diff --git a/docs/css/styles.css b/docs/css/styles.css index ed5ea45..3cff2a4 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -1,5 +1,3 @@ -@source "../../src/css/basecoat.css"; - @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lora&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"); diff --git a/docs/css/themes/supabase.css b/docs/css/themes/supabase.css index bf45cc8..f066f51 100644 --- a/docs/css/themes/supabase.css +++ b/docs/css/themes/supabase.css @@ -94,66 +94,6 @@ --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43); } - @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); - - --tracking-tighter: calc(var(--tracking-normal) - 0.05em); - --tracking-tight: calc(var(--tracking-normal) - 0.025em); - --tracking-normal: var(--tracking-normal); - --tracking-wide: calc(var(--tracking-normal) + 0.025em); - --tracking-wider: calc(var(--tracking-normal) + 0.05em); - --tracking-widest: calc(var(--tracking-normal) + 0.1em); - } - body { letter-spacing: var(--tracking-normal); } diff --git a/docs/src/_includes/partials/kitchen-sink/form.njk b/docs/src/_includes/partials/kitchen-sink/form.njk index f0a6c56..5781255 100644 --- a/docs/src/_includes/partials/kitchen-sink/form.njk +++ b/docs/src/_includes/partials/kitchen-sink/form.njk @@ -1,9 +1,6 @@ -
-
+
+

Form

- - {% lucide "book-open", { "class": "size-4" } %} -
diff --git a/docs/src/assets/images/avatar-1.png b/docs/src/assets/images/avatar-1.png new file mode 100644 index 0000000..c190101 Binary files /dev/null and b/docs/src/assets/images/avatar-1.png differ diff --git a/docs/src/assets/images/avatar-2.png b/docs/src/assets/images/avatar-2.png new file mode 100644 index 0000000..b2aae01 Binary files /dev/null and b/docs/src/assets/images/avatar-2.png differ diff --git a/docs/src/assets/images/avatar-3.png b/docs/src/assets/images/avatar-3.png new file mode 100644 index 0000000..f04b6b0 Binary files /dev/null and b/docs/src/assets/images/avatar-3.png differ diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index 614f920..49ef401 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -8,9 +8,8 @@ @layer theme, base, components, utilities; @layer theme { :root, :host { - --font-sans: var(--font-sans); - --font-serif: var(--font-serif); - --font-mono: var(--font-mono); + --font-sans: 'Inter'; + --font-mono: 'JetBrains Mono'; --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-900: oklch(41.4% 0.112 45.904); @@ -48,24 +47,28 @@ --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; - --tracking-normal: var(--tracking-normal); + --tracking-tighter: -0.05em; + --tracking-tight: -0.025em; + --tracking-normal: 0em; + --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: 0.125rem; - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @@ -74,7 +77,32 @@ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); - --shadow: var(--shadow); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); } } @layer base { @@ -249,6 +277,9 @@ .sticky { position: sticky; } + .inset-0 { + inset: calc(var(--spacing) * 0); + } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } @@ -408,6 +439,9 @@ .h-8 { height: calc(var(--spacing) * 8); } + .h-10 { + height: calc(var(--spacing) * 10); + } .h-12 { height: calc(var(--spacing) * 12); } @@ -444,6 +478,9 @@ .w-6 { width: calc(var(--spacing) * 6); } + .w-10 { + width: calc(var(--spacing) * 10); + } .w-48 { width: calc(var(--spacing) * 48); } @@ -468,6 +505,12 @@ .w-full { width: 100%; } + .w-max { + width: max-content; + } + .max-w-\[75\%\] { + max-width: 75%; + } .max-w-\[200px\] { max-width: 200px; } @@ -537,6 +580,9 @@ .scroll-mt-14 { scroll-margin-top: calc(var(--spacing) * 14); } + .scroll-mt-16 { + scroll-margin-top: calc(var(--spacing) * 16); + } .list-decimal { list-style-type: decimal; } @@ -588,6 +634,9 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-5 { + gap: calc(var(--spacing) * 5); + } .gap-6 { gap: calc(var(--spacing) * 6); } @@ -681,21 +730,29 @@ border-radius: calc(infinity * 1px); } .rounded-lg { - border-radius: var(--radius); + border-radius: var(--radius-lg); } .rounded-md { - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); } .rounded-sm { - border-radius: calc(var(--radius) - 4px); + border-radius: var(--radius-sm); } .rounded-xl { - border-radius: calc(var(--radius) + 4px); + border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; @@ -704,31 +761,40 @@ border-color: var(--color-amber-50); } .border-border\/50 { - border-color: var(--border); + border-color: var(--color-border); @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--border) 50%, transparent); + border-color: color-mix(in oklab, var(--color-border) 50%, transparent); } } + .border-muted { + border-color: var(--color-muted); + } .\!bg-neutral-900 { background-color: var(--color-neutral-900) !important; } .bg-accent { - background-color: var(--accent); + background-color: var(--color-accent); } .bg-amber-50 { background-color: var(--color-amber-50); } .bg-background { - background-color: var(--background); + background-color: var(--color-background); + } + .bg-card { + background-color: var(--color-card); } .bg-foreground { - background-color: var(--foreground); + background-color: var(--color-foreground); } .bg-muted { - background-color: var(--muted); + background-color: var(--color-muted); + } + .bg-primary { + background-color: var(--color-primary); } .bg-sidebar-primary { - background-color: var(--sidebar-primary); + background-color: var(--color-sidebar-primary); } .object-cover { object-fit: cover; @@ -763,18 +829,27 @@ .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } .px-4 { padding-inline: calc(var(--spacing) * 4); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } @@ -799,6 +874,10 @@ .font-mono { font-family: var(--font-mono); } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); @@ -848,12 +927,16 @@ font-weight: var(--font-weight-semibold); } .tracking-tight { - --tw-tracking: calc(var(--tracking-normal) - 0.025em); - letter-spacing: calc(var(--tracking-normal) - 0.025em); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + } + .tracking-tighter { + --tw-tracking: var(--tracking-tighter); + letter-spacing: var(--tracking-tighter); } .tracking-widest { - --tw-tracking: calc(var(--tracking-normal) + 0.1em); - letter-spacing: calc(var(--tracking-normal) + 0.1em); + --tw-tracking: var(--tracking-widest); + letter-spacing: var(--tracking-widest); } .break-words { overflow-wrap: break-word; @@ -868,20 +951,26 @@ color: var(--color-amber-900); } .text-destructive { - color: var(--destructive); + color: var(--color-destructive); } .text-foreground { - color: var(--foreground); + color: var(--color-foreground); } .text-muted-foreground { - color: var(--muted-foreground); + color: var(--color-muted-foreground); + } + .text-primary-foreground { + color: var(--color-primary-foreground); } .text-sidebar-primary-foreground { - color: var(--sidebar-primary-foreground); + color: var(--color-sidebar-primary-foreground); } .text-zinc-50 { color: var(--color-zinc-50); } + .uppercase { + text-transform: uppercase; + } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); @@ -909,15 +998,15 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { - --tw-shadow: var(--shadow-xl); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xs { - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-offset-background { - --tw-ring-offset-color: var(--background); + --tw-ring-offset-color: var(--color-background); } .outline { outline-style: var(--tw-outline-style); @@ -967,6 +1056,22 @@ visibility: visible; } } + .peer-checked\:border { + &:is(:where(.peer):checked ~ *) { + border-style: var(--tw-border-style); + border-width: 1px; + } + } + .peer-checked\:border-blue-500 { + &:is(:where(.peer):checked ~ *) { + border-color: var(--color-blue-500); + } + } + .peer-checked\:border-primary { + &:is(:where(.peer):checked ~ *) { + border-color: var(--color-primary); + } + } .last\:border-b-0 { &:last-child { border-bottom-style: var(--tw-border-style); @@ -1002,7 +1107,7 @@ &:checked { &::before { content: var(--tw-content); - background-color: var(--background); + background-color: var(--color-background); } } } @@ -1025,12 +1130,19 @@ } } } + .hover\:bg-accent { + &:hover { + @media (hover: hover) { + background-color: var(--color-accent); + } + } + } .hover\:bg-accent\/50 { &:hover { @media (hover: hover) { - background-color: var(--accent); + background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); + background-color: color-mix(in oklab, var(--color-accent) 50%, transparent); } } } @@ -1038,13 +1150,20 @@ .hover\:bg-destructive\/10 { &:hover { @media (hover: hover) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent); } } } } + .hover\:bg-muted { + &:hover { + @media (hover: hover) { + background-color: var(--color-muted); + } + } + } .hover\:bg-zinc-700 { &:hover { @media (hover: hover) { @@ -1052,10 +1171,24 @@ } } } + .hover\:text-accent-foreground { + &:hover { + @media (hover: hover) { + color: var(--color-accent-foreground); + } + } + } .hover\:text-foreground { &:hover { @media (hover: hover) { - color: var(--foreground); + color: var(--color-foreground); + } + } + } + .hover\:text-muted-foreground { + &:hover { + @media (hover: hover) { + color: var(--color-muted-foreground); } } } @@ -1075,20 +1208,20 @@ } .focus\:bg-destructive\/10 { &:focus { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent); } } } .focus\:text-destructive { &:focus { - color: var(--destructive); + color: var(--color-destructive); } } .focus-visible\:border-ring { &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } } .focus-visible\:ring-1 { @@ -1111,14 +1244,14 @@ } .focus-visible\:ring-ring { &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); } } .focus-visible\:ring-ring\/50 { &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } } @@ -1174,6 +1307,18 @@ gap: calc(var(--spacing) * 2.5); } } + .sm\:text-3xl { + @media (width >= 40rem) { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + } + .sm\:text-lg { + @media (width >= 40rem) { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + } .md\:ml-4 { @media (width >= 48rem) { margin-left: calc(var(--spacing) * 4); @@ -1205,6 +1350,12 @@ padding-left: calc(var(--spacing) * 8); } } + .md\:text-4xl { + @media (width >= 48rem) { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + } .xl\:block { @media (width >= 80rem) { display: block; @@ -1264,9 +1415,9 @@ .dark\:checked\:bg-input\/30 { &:is(.dark *) { &:checked { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } } @@ -1276,7 +1427,7 @@ &:checked { &::before { content: var(--tw-content); - background-color: var(--primary); + background-color: var(--color-primary); } } } @@ -1285,9 +1436,9 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 20%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } } @@ -1296,9 +1447,9 @@ .dark\:focus\:bg-destructive\/20 { &:is(.dark *) { &:focus { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 20%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } } @@ -1338,7 +1489,7 @@ } .\[\&_a\]\:text-muted-foreground { & a { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } } .\[\&_a\]\:no-underline { @@ -1357,7 +1508,7 @@ & a { &:hover { @media (hover: hover) { - color: var(--foreground); + color: var(--color-foreground); } } } @@ -1397,12 +1548,12 @@ } .\[\&_img\]\:ring-background { & img { - --tw-ring-color: var(--background); + --tw-ring-color: var(--color-background); } } .\[\&_img\]\:ring-card { & img { - --tw-ring-color: var(--card); + --tw-ring-color: var(--color-card); } } .\[\&_img\]\:grayscale { @@ -1468,7 +1619,7 @@ } .\[\&_svg\]\:\!text-destructive { & svg { - color: var(--destructive) !important; + color: var(--color-destructive) !important; } } .\[\&_ul\]\:m-0 { @@ -1512,12 +1663,23 @@ height: calc(var(--spacing) * 4); } } + .\[\&\>svg\]\:mb-3 { + &>svg { + margin-bottom: calc(var(--spacing) * 3); + } + } .\[\&\>svg\]\:size-4 { &>svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } + .\[\&\>svg\]\:size-6 { + &>svg { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6); + } + } .\[\&\>svg\]\:shrink-0 { &>svg { flex-shrink: 0; @@ -1607,10 +1769,10 @@ } @layer base { * { - border-color: var(--border); - outline-color: var(--ring); + border-color: var(--color-border); + outline-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - outline-color: color-mix(in oklab, var(--ring) 50%, transparent); + outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } html { @@ -1618,8 +1780,8 @@ } body { overscroll-behavior: none; - background-color: var(--background); - color: var(--foreground); + background-color: var(--color-background); + color: var(--color-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -1664,7 +1826,7 @@ grid-template-columns: 0 1fr; align-items: flex-start; row-gap: calc(var(--spacing) * 0.5); - border-radius: var(--radius); + border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 4); @@ -1697,8 +1859,8 @@ min-height: calc(var(--spacing) * 4); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); - --tw-tracking: calc(var(--tracking-normal) - 0.025em); - letter-spacing: calc(var(--tracking-normal) - 0.025em); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); } section { grid-column-start: 2; @@ -1707,7 +1869,7 @@ gap: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); - color: var(--muted-foreground); + color: var(--color-muted-foreground); & p { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @@ -1721,17 +1883,17 @@ } } .alert { - background-color: var(--card); - color: var(--card-foreground); + background-color: var(--color-card); + color: var(--color-card-foreground); } .alert-destructive { - background-color: var(--card); - color: var(--destructive); + background-color: var(--color-card); + color: var(--color-destructive); &>svg { color: currentcolor; } section { - color: var(--destructive); + color: var(--color-destructive); } } } @@ -1742,7 +1904,7 @@ cursor: pointer; align-items: center; justify-content: center; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); @@ -1754,16 +1916,16 @@ --tw-outline-style: none; outline-style: none; &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -1773,19 +1935,19 @@ opacity: 50%; } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -1838,77 +2000,77 @@ height: calc(var(--spacing) * 10); } .btn, .btn-primary, .btn-sm, .btn-sm-primary, .btn-lg, .btn-lg-primary, .btn-icon, .btn-icon-primary, .btn-sm-icon, .btn-sm-icon-primary, .btn-lg-icon, .btn-lg-icon-primary { - background-color: var(--primary); - color: var(--primary-foreground); - --tw-shadow: var(--shadow-xs); + background-color: var(--color-primary); + color: var(--color-primary-foreground); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:hover { @media (hover: hover) { - background-color: var(--primary); + background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); + background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); } } } &[aria-pressed='true'] { - background-color: var(--primary); + background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); + background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); } } } .btn-secondary, .btn-sm-secondary, .btn-lg-secondary, .btn-icon-secondary, .btn-sm-icon-secondary, .btn-lg-icon-secondary { - background-color: var(--secondary); - color: var(--secondary-foreground); - --tw-shadow: var(--shadow-xs); + background-color: var(--color-secondary); + color: var(--color-secondary-foreground); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:hover, &[aria-pressed='true'] { - background-color: var(--secondary); + background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 80%, transparent); + background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent); } } } .btn-outline, .btn-sm-outline, .btn-lg-outline, .btn-icon-outline, .btn-sm-icon-outline, .btn-lg-icon-outline { border-style: var(--tw-border-style); border-width: 1px; - background-color: var(--background); - --tw-shadow: var(--shadow-xs); + background-color: var(--color-background); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:is(.dark *) { - border-color: var(--input); + border-color: var(--color-input); } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:hover, &[aria-pressed='true'] { - background-color: var(--accent); - color: var(--accent-foreground); + background-color: var(--color-accent); + color: var(--color-accent-foreground); &:is(.dark *) { - background-color: var(--accent); + background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); + background-color: color-mix(in oklab, var(--color-accent) 50%, transparent); } } } } .btn-ghost, .btn-sm-ghost, .btn-lg-ghost, .btn-icon-ghost, .btn-sm-icon-ghost, .btn-lg-icon-ghost { &:hover, &[aria-pressed='true'] { - background-color: var(--accent); - color: var(--accent-foreground); + background-color: var(--color-accent); + color: var(--color-accent-foreground); &:is(.dark *) { - background-color: var(--accent); + background-color: var(--color-accent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); + background-color: color-mix(in oklab, var(--color-accent) 50%, transparent); } } } } .btn-link, .btn-sm-link, .btn-lg-link, .btn-icon-link, .btn-sm-icon-link, .btn-lg-icon-link { - color: var(--primary); + color: var(--color-primary); text-underline-offset: 4px; &:hover, &[aria-pressed='true'] { &:hover { @@ -1919,39 +2081,39 @@ } } .btn-destructive, .btn-sm-destructive, .btn-lg-destructive, .btn-icon-destructive, .btn-sm-icon-destructive, .btn-lg-icon-destructive { - background-color: var(--destructive); + background-color: var(--color-destructive); color: var(--color-white); - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:focus-visible { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 60%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent); } } &:is(.dark *) { &:focus-visible { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } &:hover, &[aria-pressed='true'] { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent); } &:is(.dark *) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 50%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 50%, transparent); } } } @@ -1966,7 +2128,7 @@ justify-content: center; gap: calc(var(--spacing) * 1); overflow: hidden; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 2); @@ -1980,32 +2142,32 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -2019,14 +2181,14 @@ } .badge, .badge-primary { border-color: transparent; - background-color: var(--primary); - color: var(--primary-foreground); + background-color: var(--color-primary); + color: var(--color-primary-foreground); a& { &:hover { @media (hover: hover) { - background-color: var(--primary); + background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); + background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); } } } @@ -2034,14 +2196,14 @@ } .badge-secondary { border-color: transparent; - background-color: var(--secondary); - color: var(--secondary-foreground); + background-color: var(--color-secondary); + color: var(--color-secondary-foreground); a& { &:hover { @media (hover: hover) { - background-color: var(--secondary); + background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--secondary) 90%, transparent); + background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent); } } } @@ -2049,52 +2211,52 @@ } .badge-destructive { border-color: transparent; - background-color: var(--destructive); + background-color: var(--color-destructive); color: var(--color-white); &:focus-visible { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 60%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent); } } &:is(.dark *) { &:focus-visible { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } a& { &:hover { @media (hover: hover) { - background-color: var(--destructive); + background-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); + background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent); } } } } } .badge-outline { - color: var(--foreground); + color: var(--color-foreground); a& { &:hover { @media (hover: hover) { - background-color: var(--accent); + background-color: var(--color-accent); } } } a& { &:hover { @media (hover: hover) { - color: var(--accent-foreground); + color: var(--color-accent-foreground); } } } @@ -2105,13 +2267,13 @@ display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); - border-radius: calc(var(--radius) + 4px); + border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; - background-color: var(--card); + background-color: var(--color-card); padding-block: calc(var(--spacing) * 6); - color: var(--card-foreground); - --tw-shadow: var(--shadow-sm); + color: var(--color-card-foreground); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); > header { container-type: inline-size; @@ -2137,7 +2299,7 @@ p { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); - color: var(--muted-foreground); + color: var(--color-muted-foreground); } } > section { @@ -2162,8 +2324,8 @@ border-radius: 4px; border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--input); - --tw-shadow: var(--shadow-xs); + border-color: var(--color-input); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2171,22 +2333,22 @@ --tw-outline-style: none; outline-style: none; &:checked { - border-color: var(--primary); + border-color: var(--color-primary); } &:checked { - background-color: var(--primary); + background-color: var(--color-primary); } &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -2196,30 +2358,30 @@ opacity: 50%; } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:is(.dark *) { &:checked { - background-color: var(--primary); + background-color: var(--color-primary); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -2227,7 +2389,7 @@ display: block; width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); - background-color: var(--primary-foreground); + background-color: var(--color-primary-foreground); --tw-content: ''; content: var(--tw-content); mask-image: var(--check-icon); @@ -2310,13 +2472,13 @@ scale: var(--tw-scale-x) var(--tw-scale-y); flex-direction: column; gap: calc(var(--spacing) * 4); - border-radius: var(--radius); + border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; - background-color: var(--background); + background-color: var(--color-background); padding: calc(var(--spacing) * 6); opacity: 0%; - --tw-shadow: var(--shadow-lg); + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2343,7 +2505,7 @@ > p { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); - color: var(--muted-foreground); + color: var(--color-muted-foreground); } } > section { @@ -2368,7 +2530,7 @@ right: calc(var(--spacing) * 4); border-radius: var(--radius-xs); opacity: 70%; - --tw-ring-offset-color: var(--background); + --tw-ring-offset-color: var(--color-background); transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); @@ -2382,7 +2544,7 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); } &:focus { --tw-ring-offset-width: 2px; @@ -2400,10 +2562,10 @@ pointer-events: none; } &[data-state="open"] { - background-color: var(--accent); + background-color: var(--color-accent); } &[data-state="open"] { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } & svg { pointer-events: none; @@ -2427,16 +2589,16 @@ width: 100%; min-width: calc(var(--spacing) * 0); appearance: none; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--input); + border-color: var(--color-input); background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2444,16 +2606,16 @@ --tw-outline-style: none; outline-style: none; & *::selection { - background-color: var(--primary); + background-color: var(--color-primary); } &::selection { - background-color: var(--primary); + background-color: var(--color-primary); } & *::selection { - color: var(--primary-foreground); + color: var(--color-primary-foreground); } &::selection { - color: var(--primary-foreground); + color: var(--color-primary-foreground); } &::file-selector-button { display: inline-flex; @@ -2477,10 +2639,10 @@ font-weight: var(--font-weight-medium); } &::file-selector-button { - color: var(--foreground); + color: var(--color-foreground); } &::placeholder { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } &:disabled { pointer-events: none; @@ -2496,38 +2658,38 @@ line-height: var(--tw-leading, var(--text-sm--line-height)); } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -2574,14 +2736,14 @@ scale: var(--tw-scale-x) var(--tw-scale-y); overflow-x: hidden; overflow-y: auto; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; - background-color: var(--popover); + background-color: var(--color-popover); padding: calc(var(--spacing) * 1); - color: var(--popover-foreground); + color: var(--color-popover-foreground); opacity: 100%; - --tw-shadow: var(--shadow-md); + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2662,7 +2824,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - border-radius: calc(var(--radius) - 4px); + border-radius: var(--radius-sm); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-sm); @@ -2698,34 +2860,34 @@ flex-shrink: 0; } & svg { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } } [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] { &:hover { @media (hover: hover) { - background-color: var(--accent); + background-color: var(--color-accent); } } &:hover { @media (hover: hover) { - color: var(--accent-foreground); + color: var(--color-accent-foreground); } } &:focus-visible { - background-color: var(--accent); + background-color: var(--color-accent); } &:focus-visible { - color: var(--accent-foreground); + color: var(--color-accent-foreground); } } [role='option'] { padding-right: calc(var(--spacing) * 7.5); &[data-focus] { - background-color: var(--accent); + background-color: var(--color-accent); } &[data-focus] { - color: var(--accent-foreground); + color: var(--color-accent-foreground); } &[aria-selected='true'] { background-image: var(--check-icon); @@ -2749,7 +2911,7 @@ padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); - color: var(--muted-foreground); + color: var(--color-muted-foreground); } [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) { display: none; @@ -2757,7 +2919,7 @@ [role='separator'] { margin-inline: calc(var(--spacing) * -1); margin-block: calc(var(--spacing) * 1); - border-color: var(--border); + border-color: var(--color-border); } > header { margin-inline: calc(var(--spacing) * -1); @@ -2782,7 +2944,7 @@ width: 100%; min-width: calc(var(--spacing) * 0); flex: 1; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); background-color: transparent; padding-block: calc(var(--spacing) * 3); font-size: var(--text-sm); @@ -2794,7 +2956,7 @@ outline-offset: 2px; } &::placeholder { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } &:disabled { cursor: not-allowed; @@ -2837,9 +2999,9 @@ border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--input); - color: var(--primary); - --tw-shadow: var(--shadow-xs); + border-color: var(--color-input); + color: var(--color-primary); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2847,16 +3009,16 @@ --tw-outline-style: none; outline-style: none; &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -2866,25 +3028,25 @@ opacity: 50%; } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -2899,7 +3061,7 @@ --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); - background-color: var(--primary); + background-color: var(--color-primary); --tw-content: ''; content: var(--tw-content); } @@ -2938,13 +3100,13 @@ border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--primary); - background-color: var(--background); - --tw-shadow: var(--shadow-sm); + border-color: var(--color-primary); + background-color: var(--color-background); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &::-webkit-slider-runnable-track { @@ -2964,13 +3126,13 @@ border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--primary); - background-color: var(--background); - --tw-shadow: var(--shadow-sm); + border-color: var(--color-primary); + background-color: var(--color-background); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &::-moz-range-track { @@ -2990,13 +3152,13 @@ border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--primary); - background-color: var(--background); - --tw-shadow: var(--shadow-sm); + border-color: var(--color-primary); + background-color: var(--color-background); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &::-ms-track { @@ -3007,11 +3169,11 @@ } &::-ms-fill-lower { border-radius: calc(infinity * 1px); - background-color: var(--primary); + background-color: var(--color-primary); } &::-ms-fill-upper { border-radius: calc(infinity * 1px); - background-color: var(--muted); + background-color: var(--color-muted); } } } @@ -3024,10 +3186,10 @@ align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2); - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--input); + border-color: var(--color-input); background-color: transparent; padding-block: calc(var(--spacing) * 2); padding-right: calc(var(--spacing) * 9); @@ -3035,7 +3197,7 @@ font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3043,16 +3205,16 @@ --tw-outline-style: none; outline-style: none; &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -3062,35 +3224,35 @@ opacity: 50%; } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 50%, transparent); + background-color: color-mix(in oklab, var(--color-input) 50%, transparent); } } } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -3130,8 +3292,8 @@ display: flex; width: var(--sidebar-mobile-width); flex-direction: column; - background-color: var(--sidebar); - color: var(--sidebar-foreground); + background-color: var(--color-sidebar); + color: var(--color-sidebar-foreground); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); @@ -3215,7 +3377,7 @@ [role=separator] { margin-inline: calc(var(--spacing) * 2); width: auto; - border-color: var(--sidebar-border); + border-color: var(--color-sidebar-border); } > section { display: flex; @@ -3237,17 +3399,17 @@ height: calc(var(--spacing) * 8); flex-shrink: 0; align-items: center; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); - color: var(--sidebar-foreground); + color: var(--color-sidebar-foreground); @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); + color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent); } - --tw-ring-color: var(--sidebar-ring); + --tw-ring-color: var(--color-sidebar-ring); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { @@ -3287,12 +3449,12 @@ align-items: center; gap: calc(var(--spacing) * 2); overflow: hidden; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); padding: calc(var(--spacing) * 2); text-align: left; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-ring-color: var(--sidebar-ring); + --tw-ring-color: var(--color-sidebar-ring); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { @@ -3304,12 +3466,12 @@ transition-duration: var(--tw-duration, var(--default-transition-duration)); &:hover { @media (hover: hover) { - background-color: var(--sidebar-accent); + background-color: var(--color-sidebar-accent); } } &:hover { @media (hover: hover) { - color: var(--sidebar-accent-foreground); + color: var(--color-sidebar-accent-foreground); } } &:focus-visible { @@ -3317,10 +3479,10 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:active { - background-color: var(--sidebar-accent); + background-color: var(--color-sidebar-accent); } &:active { - color: var(--sidebar-accent-foreground); + color: var(--color-sidebar-accent-foreground); } &:disabled { pointer-events: none; @@ -3347,39 +3509,39 @@ flex-shrink: 0; } &[aria-current=page] { - background-color: var(--sidebar-accent); + background-color: var(--color-sidebar-accent); } &[aria-current=page] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } &[aria-current=page] { - color: var(--sidebar-accent-foreground); + color: var(--color-sidebar-accent-foreground); } &:not([data-variant]), &[data-variant=default] { &:hover { @media (hover: hover) { - background-color: var(--sidebar-accent); + background-color: var(--color-sidebar-accent); } } &:hover { @media (hover: hover) { - color: var(--sidebar-accent-foreground); + color: var(--color-sidebar-accent-foreground); } } } &[data-variant=outline] { - background-color: var(--background); + background-color: var(--color-background); --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:hover { @media (hover: hover) { - background-color: var(--sidebar-accent); + background-color: var(--color-sidebar-accent); } } &:hover { @media (hover: hover) { - color: var(--sidebar-accent-foreground); + color: var(--color-sidebar-accent-foreground); } } &:hover { @@ -3422,7 +3584,7 @@ display: block; width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); - background-color: var(--primary); + background-color: var(--color-primary); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); @@ -3451,7 +3613,7 @@ gap: calc(var(--spacing) * 1); border-left-style: var(--tw-border-style); border-left-width: 1px; - border-color: var(--sidebar-border); + border-color: var(--color-sidebar-border); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 0.5); } @@ -3471,7 +3633,7 @@ border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3479,16 +3641,16 @@ --tw-outline-style: none; outline-style: none; &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -3497,19 +3659,19 @@ &:disabled { opacity: 50%; } - background-color: var(--input); + background-color: var(--color-input); &:checked { - background-color: var(--primary); + background-color: var(--color-primary); } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 80%, transparent); + background-color: color-mix(in oklab, var(--color-input) 80%, transparent); } } &:is(.dark *) { &:checked { - background-color: var(--primary); + background-color: var(--color-primary); } } &::before { @@ -3547,12 +3709,12 @@ } &::before { content: var(--tw-content); - background-color: var(--background); + background-color: var(--color-background); } &:is(.dark *) { &::before { content: var(--tw-content); - background-color: var(--foreground); + background-color: var(--color-foreground); } } &:checked { @@ -3565,7 +3727,7 @@ &:checked { &::before { content: var(--tw-content); - background-color: var(--primary-foreground); + background-color: var(--color-primary-foreground); } } } @@ -3592,9 +3754,9 @@ tfoot { border-top-style: var(--tw-border-style); border-top-width: 1px; - background-color: var(--muted); + background-color: var(--color-muted); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); + background-color: color-mix(in oklab, var(--color-muted) 50%, transparent); } --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); @@ -3613,9 +3775,9 @@ transition-duration: var(--tw-duration, var(--default-transition-duration)); &:hover { @media (hover: hover) { - background-color: var(--muted); + background-color: var(--color-muted); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); + background-color: color-mix(in oklab, var(--color-muted) 50%, transparent); } } } @@ -3628,7 +3790,7 @@ --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; - color: var(--foreground); + color: var(--color-foreground); &:has([role=checkbox]) { padding-right: calc(var(--spacing) * 0); } @@ -3653,7 +3815,7 @@ margin-top: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); - color: var(--muted-foreground); + color: var(--color-muted-foreground); } } } @@ -3668,10 +3830,10 @@ width: fit-content; align-items: center; justify-content: center; - border-radius: var(--radius); - background-color: var(--muted); + border-radius: var(--radius-lg); + background-color: var(--color-muted); padding: 3px; - color: var(--muted-foreground); + color: var(--color-muted-foreground); [role='tab'] { display: inline-flex; height: calc(100% - 1px); @@ -3679,7 +3841,7 @@ align-items: center; justify-content: center; gap: calc(var(--spacing) * 1.5); - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; @@ -3690,21 +3852,21 @@ --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; - color: var(--foreground); + color: var(--color-foreground); transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:focus-visible { @@ -3712,7 +3874,7 @@ outline-width: 1px; } &:focus-visible { - outline-color: var(--ring); + outline-color: var(--color-ring); } &:disabled { pointer-events: none; @@ -3721,7 +3883,7 @@ opacity: 50%; } &:is(.dark *) { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } & svg { pointer-events: none; @@ -3734,20 +3896,20 @@ height: calc(var(--spacing) * 4); } &[aria-selected='true'] { - background-color: var(--background); - --tw-shadow: var(--shadow-sm); + background-color: var(--color-background); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:is(.dark *) { - border-color: var(--input); + border-color: var(--color-input); } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:is(.dark *) { - color: var(--foreground); + color: var(--color-foreground); } } } @@ -3765,16 +3927,16 @@ field-sizing: content; min-height: calc(var(--spacing) * 16); width: 100%; - border-radius: calc(var(--radius) - 2px); + border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; - border-color: var(--input); + border-color: var(--color-input); background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-shadow: var(--shadow-xs); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3782,19 +3944,19 @@ --tw-outline-style: none; outline-style: none; &::placeholder { - color: var(--muted-foreground); + color: var(--color-muted-foreground); } &:focus-visible { - border-color: var(--ring); + border-color: var(--color-ring); } &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus-visible { - --tw-ring-color: var(--ring); + --tw-ring-color: var(--color-ring); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent); } } &:disabled { @@ -3804,12 +3966,12 @@ opacity: 50%; } &[aria-invalid="true"] { - border-color: var(--destructive); + border-color: var(--color-destructive); } &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent); } } @media (width >= 48rem) { @@ -3817,16 +3979,16 @@ line-height: var(--tw-leading, var(--text-sm--line-height)); } &:is(.dark *) { - background-color: var(--input); + background-color: var(--color-input); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); + background-color: color-mix(in oklab, var(--color-input) 30%, transparent); } } &:is(.dark *) { &[aria-invalid="true"] { - --tw-ring-color: var(--destructive); + --tw-ring-color: var(--color-destructive); @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); + --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); } } } @@ -3872,13 +4034,13 @@ transition-timing-function: var(--ease-in-out); .toast-content { overflow: hidden; - border-radius: var(--radius); + border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; - background-color: var(--popover); + background-color: var(--color-popover); font-size: 13px; - color: var(--popover-foreground); - --tw-shadow: var(--shadow-lg); + color: var(--color-popover-foreground); + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &[aria-hidden='true'] { @@ -3920,13 +4082,13 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - border-radius: calc(var(--radius) - 2px); - background-color: var(--primary); + border-radius: var(--radius-md); + background-color: var(--color-primary); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); - color: var(--primary-foreground); + color: var(--color-primary-foreground); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -4105,8 +4267,8 @@ line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); - --tw-tracking: calc(var(--tracking-normal) - 0.025em); - letter-spacing: calc(var(--tracking-normal) - 0.025em); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); &:first-child { margin-top: calc(var(--spacing) * 0); } @@ -4119,8 +4281,8 @@ line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); - --tw-tracking: calc(var(--tracking-normal) - 0.025em); - letter-spacing: calc(var(--tracking-normal) - 0.025em); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); } .prose { margin-block: calc(var(--spacing) * 6); @@ -4133,7 +4295,7 @@ code:not(pre > code) { position: relative; border-radius: 0.25rem; - background-color: var(--muted); + background-color: var(--color-muted); padding-inline: 0.3rem; padding-block: 0.2rem; font-family: var(--font-mono); @@ -4143,7 +4305,7 @@ blockquote { border-left-style: var(--tw-border-style); border-left-width: 4px; - border-color: var(--border); + border-color: var(--color-border); padding-left: calc(var(--spacing) * 4); } ol { @@ -4186,8 +4348,8 @@ border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 4px; - border-color: var(--background); - background-color: var(--muted); + border-color: var(--color-background); + background-color: var(--color-muted); text-align: center; text-indent: -1px; font-family: var(--font-mono); diff --git a/docs/src/index.njk b/docs/src/index.njk index 2692463..58ba5dd 100644 --- a/docs/src/index.njk +++ b/docs/src/index.njk @@ -1,5 +1,282 @@ --- -layout: layouts/page.njk +layout: layouts/base.njk --- -HELLO \ No newline at end of file +{% from "select.njk" import select %} + +
+
+
+

All of the shadcn/ui magic, none of the React

+

A components library built with Tailwind CSS that works with any web stack.

+
+
+ Get Started + Learn more +
+
+ +
+
+
+
+

Team Members

+

Invite your team members to collaborate.

+
+
+
    +
  • + Sofia Davis +
    +

    Sofia Davis

    +

    m@example.com

    +
    + + {% call select( + is_combobox=true, + selected="owner", + content_attrs={"data-align": "end"} + ) %} +
    Viewer
    +
    Developer
    +
    Billing
    +
    Owner
    + {% endcall %} +
    • +
  • + Jackson Lee +
    +

    Jackson Lee

    +

    p@example.com

    +
    + + {% call select( + is_combobox=true, + content_attrs={"data-align": "end"} + ) %} +
    Viewer
    +
    Developer
    +
    Billing
    +
    Owner
    + {% endcall %} +
    • +
  • + Isabella Nguyen +
    +

    Isabella Nguyen

    +

    i@example.com

    +
    + + {% call select( + is_combobox=true, + content_attrs={"data-align": "end"} + ) %} +
    Viewer
    +
    Developer
    +
    Billing
    +
    Owner
    + {% endcall %} +
    • +
+
+
+ +
+
+

Cookie Settings

+

Manage your cookie settings here.

+
+
+ + + +
+
+ +
+
+ +
+
+

Payment Method

+

Add a new payment method to your account.

+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+ Sofia Davis +
+

Sofia Davis

+

m@example.com

+
+ +
+
+
+ Hi, how can I help you today? +
+
+ Hey, I'm having trouble with my account. +
+
+ What seems to be the problem? +
+
+ I can't log in. +
+
+
+ + +
+
+
+ +
+
+

Create an account

+

Enter your email below to create your account

+
+
+
+ + +
+
+
+ +
+
+ Or continue with +
+
+
+
+ + +
+
+
+ + Forgot your password? +
+ +
+ +
+
+
+
+
+
\ No newline at end of file