feat(styles): Add comprehensive border color utility classes

- Expand border color utility classes for more granular styling
- Add directional border color classes (border-x, border-y, border-t, border-r, border-b, border-l)
- Include border color utilities for various theme colors (primary, background, foreground, card, muted, accent, destructive)
- Enhance Tailwind CSS utility layer for more flexible border styling
This commit is contained in:
padreug 2025-03-09 15:40:24 +01:00
parent 8e87b81ba9
commit 6a5b64a382

View file

@ -237,13 +237,60 @@
/* Add support for border colors */
@layer utilities {
.box-border {
.border {
border-color: var(--border);
}
.border-x {
border-left-color: var(--border);
border-right-color: var(--border);
}
.border-y {
border-top-color: var(--border);
border-bottom-color: var(--border);
}
.border-t {
border-top-color: var(--border);
}
.border-r {
border-right-color: var(--border);
}
.border-b {
border-bottom-color: var(--border);
}
.border-l {
border-left-color: var(--border);
}
.border-primary {
border-color: var(--primary);
}
.border-background {
border-color: var(--background);
}
.border-foreground {
border-color: var(--foreground);
}
.border-card {
border-color: var(--card);
}
.border-card-foreground {
border-color: var(--card-foreground);
}
.border-muted {
border-color: var(--muted);
}
.border-muted-foreground {
border-color: var(--muted-foreground);
}
.border-accent {
border-color: var(--accent);
}
.border-accent-foreground {
border-color: var(--accent-foreground);
}
.border-destructive {
border-color: var(--destructive);
}
.border-destructive-foreground {
border-color: var(--destructive-foreground);
}
}