diff --git a/dist/basecoat.css b/dist/basecoat.css index 56a4c5f..6b0188c 100644 --- a/dist/basecoat.css +++ b/dist/basecoat.css @@ -6,6 +6,10 @@ --font-sans: 'Inter var', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-red-500: oklch(63.7% 0.237 25.331); + --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); + --color-amber-950: oklch(27.9% 0.077 45.635); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); @@ -50,6 +54,7 @@ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); @@ -57,6 +62,7 @@ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -80,6 +86,14 @@ --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 { @@ -228,12 +242,26 @@ } } @layer utilities { - .\@container { - container-type: inline-size; - } .pointer-events-none { pointer-events: none; } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } .relative { position: relative; } @@ -243,21 +271,63 @@ .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } .top-0 { top: calc(var(--spacing) * 0); } + .top-1\.5 { + top: calc(var(--spacing) * 1.5); + } + .top-1\/2 { + top: calc(1/2 * 100%); + } + .top-3\.5 { + top: calc(var(--spacing) * 3.5); + } + .right-0 { + right: calc(var(--spacing) * 0); + } + .right-1 { + right: calc(var(--spacing) * 1); + } + .right-3 { + right: calc(var(--spacing) * 3); + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .left-2 { + left: calc(var(--spacing) * 2); + } .isolate { isolation: isolate; } .z-10 { z-index: 10; } + .z-20 { + z-index: 20; + } + .z-50 { + z-index: 50; + } + .mx-2 { + margin-inline: calc(var(--spacing) * 2); + } + .mx-3\.5 { + margin-inline: calc(var(--spacing) * 3.5); + } .mx-auto { margin-inline: auto; } .mr-auto { margin-right: auto; } + .ml-\(--sidebar-width\) { + margin-left: var(--sidebar-width); + } .ml-auto { margin-left: auto; } @@ -276,6 +346,9 @@ .table { display: table; } + .aspect-square { + aspect-ratio: 1 / 1; + } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); @@ -284,6 +357,10 @@ width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } + .size-7 { + width: calc(var(--spacing) * 7); + height: calc(var(--spacing) * 7); + } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); @@ -298,6 +375,9 @@ .h-5 { height: calc(var(--spacing) * 5); } + .h-7 { + height: calc(var(--spacing) * 7); + } .h-8 { height: calc(var(--spacing) * 8); } @@ -307,27 +387,54 @@ .h-14 { height: calc(var(--spacing) * 14); } + .h-full { + height: 100%; + } + .h-svh { + height: 100svh; + } .max-h-\[612px\] { max-height: 612px; } + .min-h-0 { + min-height: calc(var(--spacing) * 0); + } + .min-h-svh { + min-height: 100svh; + } + .w-\(--sidebar-width\) { + width: var(--sidebar-width); + } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } + .w-\[var\(--sidebar-width\)\] { + width: var(--sidebar-width); + } + .w-auto { + width: auto; + } .w-fit { width: fit-content; } .w-full { width: 100%; } + .max-w-\(--skeleton-width\) { + max-width: var(--skeleton-width); + } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } + .min-w-0 { + min-width: calc(var(--spacing) * 0); + } .min-w-5 { min-width: calc(var(--spacing) * 5); } @@ -346,6 +453,22 @@ .shrink-0 { flex-shrink: 0; } + .-translate-x-1\/2 { + --tw-translate-x: calc(calc(1/2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .-translate-x-px { + --tw-translate-x: -1px; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-px { + --tw-translate-x: 1px; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .-translate-y-1\/2 { + --tw-translate-y: calc(calc(1/2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -353,6 +476,9 @@ .animate-spin { animation: var(--animate-spin); } + .scroll-mt-16 { + scroll-margin-top: calc(var(--spacing) * 16); + } .flex-col { flex-direction: column; } @@ -422,6 +548,12 @@ text-overflow: ellipsis; white-space: nowrap; } + .overflow-auto { + overflow: auto; + } + .overflow-hidden { + overflow: hidden; + } .overflow-x-auto { overflow-x: auto; } @@ -441,13 +573,48 @@ border-style: var(--tw-border-style); border-width: 1px; } + .border-r { + border-right-style: var(--tw-border-style); + border-right-width: 1px; + } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } + .border-l { + border-left-style: var(--tw-border-style); + border-left-width: 1px; + } + .border-amber-50 { + border-color: var(--color-amber-50); + } + .border-sidebar-border { + border-color: var(--color-sidebar-border); + } + .bg-amber-50 { + background-color: var(--color-amber-50); + } .bg-background { background-color: var(--color-background); } + .bg-sidebar { + background-color: var(--color-sidebar); + } + .bg-sidebar-border { + background-color: var(--color-sidebar-border); + } + .bg-sidebar-primary { + background-color: var(--color-sidebar-primary); + } + .bg-transparent { + background-color: transparent; + } + .p-0 { + padding: calc(var(--spacing) * 0); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } .p-3 { padding: calc(var(--spacing) * 3); } @@ -460,9 +627,15 @@ .px-2 { padding-inline: calc(var(--spacing) * 2); } + .px-2\.5 { + padding-inline: calc(var(--spacing) * 2.5); + } .px-4 { padding-inline: calc(var(--spacing) * 4); } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } @@ -472,6 +645,12 @@ .py-4 { padding-block: calc(var(--spacing) * 4); } + .pb-4 { + padding-bottom: calc(var(--spacing) * 4); + } + .pl-8 { + padding-left: calc(var(--spacing) * 8); + } .text-left { text-align: left; } @@ -529,6 +708,9 @@ .break-words { overflow-wrap: break-word; } + .text-amber-900 { + color: var(--color-amber-900); + } .text-destructive { color: var(--color-destructive); } @@ -538,6 +720,18 @@ .text-muted-foreground { color: var(--color-muted-foreground); } + .text-sidebar-foreground { + color: var(--color-sidebar-foreground); + } + .text-sidebar-foreground\/70 { + color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent); + } + } + .text-sidebar-primary-foreground { + color: var(--color-sidebar-primary-foreground); + } .text-transparent { color: transparent; } @@ -551,10 +745,58 @@ .opacity-60 { opacity: 60%; } + .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] { + --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); + } + .shadow-none { + --tw-shadow: 0 0 #0000; + 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: 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-sidebar-ring { + --tw-ring-color: var(--color-sidebar-ring); + } + .outline-hidden { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .transition-\[left\,right\,width\] { + transition-property: left,right,width; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-\[margin\,opacity\] { + transition-property: margin,opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-\[margin-left\] { + transition-property: margin-left; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-\[width\,height\,padding\] { + transition-property: width,height,padding; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-\[width\] { + transition-property: width; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -574,15 +816,239 @@ --tw-duration: 200ms; transition-duration: 200ms; } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .ease-linear { + --tw-ease: linear; + transition-timing-function: linear; + } .outline-none { --tw-outline-style: none; outline-style: none; } + .select-none { + -webkit-user-select: none; + user-select: none; + } .group-open\:rotate-180 { &:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 180deg; } } + .group-focus-within\/menu-item\:opacity-100 { + &:is(:where(.group\/menu-item):focus-within *) { + opacity: 100%; + } + } + .group-hover\/menu-item\:opacity-100 { + &:is(:where(.group\/menu-item):hover *) { + @media (hover: hover) { + opacity: 100%; + } + } + } + .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8 { + &:is(:where(.group\/menu-item):has(*[data-sidebar="menu-action"]) *) { + padding-right: calc(var(--spacing) * 8); + } + } + .group-data-\[collapsible\=icon\]\:-mt-8 { + &:is(:where(.group)[data-collapsible="icon"] *) { + margin-top: calc(var(--spacing) * -8); + } + } + .group-data-\[collapsible\=icon\]\:hidden { + &:is(:where(.group)[data-collapsible="icon"] *) { + display: none; + } + } + .group-data-\[collapsible\=icon\]\:size-8\! { + &:is(:where(.group)[data-collapsible="icon"] *) { + width: calc(var(--spacing) * 8) !important; + height: calc(var(--spacing) * 8) !important; + } + } + .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\) { + &:is(:where(.group)[data-collapsible="icon"] *) { + width: var(--sidebar-width-icon); + } + } + .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] { + &:is(:where(.group)[data-collapsible="icon"] *) { + width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4))); + } + } + .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] { + &:is(:where(.group)[data-collapsible="icon"] *) { + width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px); + } + } + .group-data-\[collapsible\=icon\]\:overflow-hidden { + &:is(:where(.group)[data-collapsible="icon"] *) { + overflow: hidden; + } + } + .group-data-\[collapsible\=icon\]\:p-0\! { + &:is(:where(.group)[data-collapsible="icon"] *) { + padding: calc(var(--spacing) * 0) !important; + } + } + .group-data-\[collapsible\=icon\]\:p-2\! { + &:is(:where(.group)[data-collapsible="icon"] *) { + padding: calc(var(--spacing) * 2) !important; + } + } + .group-data-\[collapsible\=icon\]\:opacity-0 { + &:is(:where(.group)[data-collapsible="icon"] *) { + opacity: 0%; + } + } + .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + right: calc(var(--sidebar-width) * -1); + } + } + .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + left: calc(var(--sidebar-width) * -1); + } + } + .group-data-\[collapsible\=offcanvas\]\:w-0 { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + width: calc(var(--spacing) * 0); + } + } + .group-data-\[collapsible\=offcanvas\]\:translate-x-0 { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + --tw-translate-x: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + .group-data-\[side\=left\]\:-right-4 { + &:is(:where(.group)[data-side="left"] *) { + right: calc(var(--spacing) * -4); + } + } + .group-data-\[side\=left\]\:border-r { + &:is(:where(.group)[data-side="left"] *) { + border-right-style: var(--tw-border-style); + border-right-width: 1px; + } + } + .group-data-\[side\=right\]\:left-0 { + &:is(:where(.group)[data-side="right"] *) { + left: calc(var(--spacing) * 0); + } + } + .group-data-\[side\=right\]\:rotate-180 { + &:is(:where(.group)[data-side="right"] *) { + rotate: 180deg; + } + } + .group-data-\[side\=right\]\:border-l { + &:is(:where(.group)[data-side="right"] *) { + border-left-style: var(--tw-border-style); + border-left-width: 1px; + } + } + .group-data-\[variant\=floating\]\:rounded-lg { + &:is(:where(.group)[data-variant="floating"] *) { + border-radius: var(--radius-lg); + } + } + .group-data-\[variant\=floating\]\:border { + &:is(:where(.group)[data-variant="floating"] *) { + border-style: var(--tw-border-style); + border-width: 1px; + } + } + .group-data-\[variant\=floating\]\:border-sidebar-border { + &:is(:where(.group)[data-variant="floating"] *) { + border-color: var(--color-sidebar-border); + } + } + .group-data-\[variant\=floating\]\:shadow-sm { + &:is(:where(.group)[data-variant="floating"] *) { + --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); + } + } + .peer-hover\/menu-button\:text-sidebar-accent-foreground { + &:is(:where(.peer\/menu-button):hover ~ *) { + @media (hover: hover) { + color: var(--color-sidebar-accent-foreground); + } + } + } + .peer-aria-hidden\:ml-0 { + &:is(:where(.peer)[aria-hidden="true"] ~ *) { + margin-left: calc(var(--spacing) * 0); + } + } + .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground { + &:is(:where(.peer\/menu-button)[data-active="true"] ~ *) { + color: var(--color-sidebar-accent-foreground); + } + } + .peer-data-\[size\=default\]\/menu-button\:top-1\.5 { + &:is(:where(.peer\/menu-button)[data-size="default"] ~ *) { + top: calc(var(--spacing) * 1.5); + } + } + .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 { + &:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) { + top: calc(var(--spacing) * 2.5); + } + } + .peer-data-\[size\=sm\]\/menu-button\:top-1 { + &:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) { + top: calc(var(--spacing) * 1); + } + } + .after\:absolute { + &::after { + content: var(--tw-content); + position: absolute; + } + } + .after\:-inset-2 { + &::after { + content: var(--tw-content); + inset: calc(var(--spacing) * -2); + } + } + .after\:inset-y-0 { + &::after { + content: var(--tw-content); + inset-block: calc(var(--spacing) * 0); + } + } + .after\:left-1\/2 { + &::after { + content: var(--tw-content); + left: calc(1/2 * 100%); + } + } + .after\:w-\[2px\] { + &::after { + content: var(--tw-content); + width: 2px; + } + } + .group-data-\[collapsible\=offcanvas\]\:after\:left-full { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + &::after { + content: var(--tw-content); + left: 100%; + } + } + } .last\:border-b-0 { &:last-child { border-bottom-style: var(--tw-border-style); @@ -637,6 +1103,13 @@ } } } + .hover\:bg-sidebar-accent { + &:hover { + @media (hover: hover) { + background-color: var(--color-sidebar-accent); + } + } + } .hover\:text-foreground { &:hover { @media (hover: hover) { @@ -644,6 +1117,13 @@ } } } + .hover\:text-sidebar-accent-foreground { + &:hover { + @media (hover: hover) { + color: var(--color-sidebar-accent-foreground); + } + } + } .hover\:underline { &:hover { @media (hover: hover) { @@ -651,6 +1131,33 @@ } } } + .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\] { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent))); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } + .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar { + &:hover { + @media (hover: hover) { + &:is(:where(.group)[data-collapsible="offcanvas"] *) { + background-color: var(--color-sidebar); + } + } + } + } + .hover\:after\:bg-sidebar-border { + &:hover { + @media (hover: hover) { + &::after { + content: var(--tw-content); + background-color: var(--color-sidebar-border); + } + } + } + } .focus\:bg-destructive\/10 { &:focus { background-color: color-mix(in srgb, var(--destructive) 10%, transparent); @@ -669,6 +1176,12 @@ border-color: var(--color-ring); } } + .focus-visible\:ring-2 { + &:focus-visible { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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\:ring-\[3px\] { &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); @@ -683,6 +1196,16 @@ } } } + .active\:bg-sidebar-accent { + &:active { + background-color: var(--color-sidebar-accent); + } + } + .active\:text-sidebar-accent-foreground { + &:active { + color: var(--color-sidebar-accent-foreground); + } + } .disabled\:pointer-events-none { &:disabled { pointer-events: none; @@ -693,6 +1216,21 @@ opacity: 50%; } } + .in-data-\[side\=left\]\:cursor-w-resize { + :where(*[data-side="left"]) & { + cursor: w-resize; + } + } + .in-data-\[side\=right\]\:cursor-e-resize { + :where(*[data-side="right"]) & { + cursor: e-resize; + } + } + .has-data-\[variant\=inset\]\:bg-sidebar { + &:has(*[data-variant="inset"]) { + background-color: var(--color-sidebar); + } + } .has-\[input\[type\=\'checkbox\'\]\:checked\]\:border-blue-600 { &:has(*:is(input[type='checkbox']:checked)) { border-color: var(--color-blue-600); @@ -713,6 +1251,71 @@ background-color: var(--color-green-50); } } + .aria-disabled\:pointer-events-none { + &[aria-disabled="true"] { + pointer-events: none; + } + } + .aria-disabled\:opacity-50 { + &[aria-disabled="true"] { + opacity: 50%; + } + } + .aria-hidden\:w-0 { + &[aria-hidden="true"] { + width: calc(var(--spacing) * 0); + } + } + .aria-\[hidden\=true\]\:-translate-x-full { + &[aria-hidden="true"] { + --tw-translate-x: -100%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + .data-\[active\=true\]\:bg-sidebar-accent { + &[data-active="true"] { + background-color: var(--color-sidebar-accent); + } + } + .data-\[active\=true\]\:font-medium { + &[data-active="true"] { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + } + .data-\[active\=true\]\:text-sidebar-accent-foreground { + &[data-active="true"] { + color: var(--color-sidebar-accent-foreground); + } + } + .data-\[state\=open\]\:opacity-100 { + &[data-state="open"] { + opacity: 100%; + } + } + .data-\[state\=open\]\:hover\:bg-sidebar-accent { + &[data-state="open"] { + &:hover { + @media (hover: hover) { + background-color: var(--color-sidebar-accent); + } + } + } + } + .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground { + &[data-state="open"] { + &:hover { + @media (hover: hover) { + color: var(--color-sidebar-accent-foreground); + } + } + } + } + .sm\:flex { + @media (width >= 40rem) { + display: flex; + } + } .sm\:max-w-\[425px\] { @media (width >= 40rem) { max-width: 425px; @@ -723,6 +1326,16 @@ gap: calc(var(--spacing) * 2.5); } } + .md\:block { + @media (width >= 48rem) { + display: block; + } + } + .md\:flex { + @media (width >= 48rem) { + display: flex; + } + } .md\:max-w-\[200px\] { @media (width >= 48rem) { max-width: 200px; @@ -733,6 +1346,72 @@ flex-direction: row; } } + .md\:opacity-0 { + @media (width >= 48rem) { + opacity: 0%; + } + } + .md\:peer-data-\[variant\=inset\]\:m-2 { + @media (width >= 48rem) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + margin: calc(var(--spacing) * 2); + } + } + } + .md\:peer-data-\[variant\=inset\]\:ml-0 { + @media (width >= 48rem) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + margin-left: calc(var(--spacing) * 0); + } + } + } + .md\:peer-data-\[variant\=inset\]\:rounded-xl { + @media (width >= 48rem) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + border-radius: var(--radius-xl); + } + } + } + .md\:peer-data-\[variant\=inset\]\:shadow-sm { + @media (width >= 48rem) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + --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); + } + } + } + .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 { + @media (width >= 48rem) { + &:is(:where(.peer)[data-variant="inset"] ~ *) { + &:is(:where(.peer)[data-state="collapsed"] ~ *) { + margin-left: calc(var(--spacing) * 2); + } + } + } + } + .md\:after\:hidden { + @media (width >= 48rem) { + &::after { + content: var(--tw-content); + display: none; + } + } + } + .dark\:border-amber-950 { + &:is(.dark *) { + border-color: var(--color-amber-950); + } + } + .dark\:bg-amber-950 { + &:is(.dark *) { + background-color: var(--color-amber-950); + } + } + .dark\:text-amber-100 { + &:is(.dark *) { + color: var(--color-amber-100); + } + } .dark\:checked\:border-blue-700 { &:is(.dark *) { &:checked { @@ -809,6 +1488,54 @@ color: var(--color-destructive) !important; } } + .\[\&\>button\]\:hidden { + &>button { + display: none; + } + } + .\[\&\>span\:last-child\]\:truncate { + &>span:last-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .\[\&\>svg\]\:size-4 { + &>svg { + width: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 4); + } + } + .\[\&\>svg\]\:shrink-0 { + &>svg { + flex-shrink: 0; + } + } + .\[\&\>svg\]\:text-sidebar-accent-foreground { + &>svg { + color: var(--color-sidebar-accent-foreground); + } + } + .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 { + [data-side=left][data-collapsible=offcanvas] & { + right: calc(var(--spacing) * -2); + } + } + .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize { + [data-side=left][data-state=collapsed] & { + cursor: e-resize; + } + } + .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 { + [data-side=right][data-collapsible=offcanvas] & { + left: calc(var(--spacing) * -2); + } + } + .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize { + [data-side=right][data-state=collapsed] & { + cursor: w-resize; + } + } } :root { --radius: 0.625rem; @@ -847,6 +1574,7 @@ --scrollbar-thumb: rgba(0, 0, 0, 0.3); --scrollbar-width: 6px; --scrollbar-radius: 6px; + --sidebar-width: 16rem; --chevron-down-icon: url('data:image/svg+xml;utf8,'); --check-icon: url('data:image/svg+xml;utf8,'); } @@ -2566,10 +3294,6 @@ content: var(--tw-content); left: calc(var(--spacing) * 0); } - &::before { - content: var(--tw-content); - background-color: var(--color-red-500); - } } &[data-align='end'] { &::before { @@ -2881,10 +3605,19 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-duration { syntax: "*"; inherits: false; } +@property --tw-ease { + syntax: "*"; + inherits: false; +} @property --tw-content { syntax: "*"; initial-value: ""; @@ -2940,7 +3673,9 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; --tw-duration: initial; + --tw-ease: initial; --tw-content: ""; --tw-scale-x: 1; --tw-scale-y: 1; diff --git a/dist/basecoat.tailwind.css b/dist/basecoat.tailwind.css index 1e8c774..d85b6ba 100644 --- a/dist/basecoat.tailwind.css +++ b/dist/basecoat.tailwind.css @@ -39,6 +39,7 @@ --scrollbar-thumb: rgba(0, 0, 0, 0.3); --scrollbar-width: 6px; --scrollbar-radius: 6px; + --sidebar-width: 16rem; --chevron-down-icon: url('data:image/svg+xml;utf8,'); /* --muted-foreground + 50% opacity */ --check-icon: url('data:image/svg+xml;utf8,'); /* --muted-foreground */ } @@ -719,7 +720,7 @@ &[data-side='top'], &[data-side='bottom'] { &[data-align='start'] { - @apply before:bg-red-500 before:left-0; + @apply before:left-0; } &[data-align='end'] { @apply before:right-0; diff --git a/docs/_components/select.njk b/docs/_components/select.njk index 7330462..5fce399 100644 --- a/docs/_components/select.njk +++ b/docs/_components/select.njk @@ -59,7 +59,6 @@ }, selectOptionByValue(value) { - console.log(value); const option = this.options.find(opt => opt.getAttribute('data-value') === value); this.selectOption(option); }, diff --git a/docs/_includes/accordion.njk b/docs/_includes/components/accordion.njk similarity index 67% rename from docs/_includes/accordion.njk rename to docs/_includes/components/accordion.njk index 4c8187b..1d281a5 100644 --- a/docs/_includes/accordion.njk +++ b/docs/_includes/components/accordion.njk @@ -1,4 +1,4 @@ -
+

Accordion

@@ -19,30 +19,30 @@ " >
- -

+ +

Is it accessible? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

-
+

Yes. It adheres to the WAI-ARIA design pattern.

- -

+ +

Is it styled? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

-
+

Yes. It comes with default styles that matches the other components' aesthetic.

- -

+ +

Is it animated? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

@@ -52,21 +52,34 @@

-
+
- -

+ +

What are the key considerations when implementing a comprehensive enterprise-level authentication system? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

-
+

Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.

- -

+ +

How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

diff --git a/docs/_includes/alert-dialog.njk b/docs/_includes/components/alert-dialog.njk similarity index 91% rename from docs/_includes/alert-dialog.njk rename to docs/_includes/components/alert-dialog.njk index b56d988..5bf5139 100644 --- a/docs/_includes/alert-dialog.njk +++ b/docs/_includes/components/alert-dialog.njk @@ -1,4 +1,4 @@ -
+

Alert Dialog

diff --git a/docs/_includes/alert.njk b/docs/_includes/components/alert.njk similarity index 79% rename from docs/_includes/alert.njk rename to docs/_includes/components/alert.njk index 57dab95..244ddcb 100644 --- a/docs/_includes/alert.njk +++ b/docs/_includes/components/alert.njk @@ -1,4 +1,4 @@ -
+

Alert

@@ -58,6 +58,21 @@
+ + {#
+ {% lucide "circle-check" %} +

Something went wrong!

+
Your session has expired. Please log in again.
+ +
#} + +
+ {% lucide "circle-check" %} +

Plot Twist: This Alert is Actually Amber!

+
This one has custom colors for light and dark mode.
+
\ No newline at end of file diff --git a/docs/_includes/badge.njk b/docs/_includes/components/badge.njk similarity index 95% rename from docs/_includes/badge.njk rename to docs/_includes/components/badge.njk index 8c716df..48a307c 100644 --- a/docs/_includes/badge.njk +++ b/docs/_includes/components/badge.njk @@ -1,4 +1,4 @@ -
+

Badge

diff --git a/docs/_includes/breadcrumb.njk b/docs/_includes/components/breadcrumb.njk similarity index 95% rename from docs/_includes/breadcrumb.njk rename to docs/_includes/components/breadcrumb.njk index 78eba3e..4546145 100644 --- a/docs/_includes/breadcrumb.njk +++ b/docs/_includes/components/breadcrumb.njk @@ -1,4 +1,4 @@ -