Add a square corners toggle for a border-radius-free interface

This commit is contained in:
Steven RYDELL
2026-07-29 08:52:37 +02:00
parent 13c21fc6d5
commit 272502e0a3
4 changed files with 42 additions and 4 deletions
+9 -3
View File
@@ -90,6 +90,12 @@
--chart-5: 340 75% 60%;
}
/* Square mode: every radius token derives multiplicatively from --radius,
so zeroing it here flattens all corners (rounded-full stays untouched). */
:root[data-radius='square'] {
--radius: 0px;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
@@ -127,10 +133,10 @@
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) * 0.5);
--radius-md: calc(var(--radius) * 0.75);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-xl: calc(var(--radius) * 1.5);
--animate-collapsible-down: collapsible-down 0.2s ease-out;
--animate-collapsible-up: collapsible-up 0.2s ease-out;