@teseor/css 2.0.2 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/compiled.css +1 -1
- package/dist/index.css +17 -15
- package/package.json +1 -1
- package/src/config/layers.scss +1 -1
- package/src/config/tokens/_variables.scss +12 -9
- package/src/config/tokens/borders.scss +5 -5
- package/src/config/tokens/colors/index.scss +1 -8
- package/src/config/tokens/core.scss +30 -0
- package/src/config/tokens/grid/index.scss +1 -2
- package/src/config/tokens/index.scss +2 -1
- package/src/config/tokens/input.scss +1 -1
- package/src/config/tokens/motion.scss +1 -1
- package/src/config/tokens/radius.scss +1 -3
- package/src/config/tokens/semantic-colors.scss +1 -1
- package/src/config/tokens/shadows.scss +17 -5
- package/src/config/tokens/spacing/index.scss +1 -1
- package/src/config/tokens/typography.scss +14 -15
- package/src/config/tokens/zindex.scss +1 -1
package/dist/index.css
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
|
|
2
|
-
@layer tokens{:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-
|
|
3
|
-
@layer tokens{:root{--ui-
|
|
4
|
-
@layer tokens{:root{--ui-
|
|
5
|
-
@layer tokens{:root{--ui-
|
|
6
|
-
@layer tokens{:root{--ui-
|
|
7
|
-
@layer tokens{:root{--ui-
|
|
8
|
-
@layer tokens{:root{--ui-
|
|
9
|
-
@layer tokens{:root{--ui-
|
|
10
|
-
@layer tokens{:root{--ui-
|
|
11
|
-
@layer tokens{:root{
|
|
1
|
+
@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.styles, components.tokens, utilities, themes;
|
|
2
|
+
@layer tokens.core{:root{--ui-unit: 8px;--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;--ui-font-size-base: 1rem;--ui-radius-base: var(--ui-unit);--ui-border-width-base: calc(var(--ui-unit) * 0.125);--ui-shadow-strength: 20%}}
|
|
3
|
+
@layer tokens.scale{:root{--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-success-light: color-mix(in oklch, var(--ui-color-success) 50%, white);--ui-color-success-dark: color-mix(in oklch, var(--ui-color-success) 75%, black);--ui-color-success-subtle: color-mix(in oklch, var(--ui-color-success) 12%, white);--ui-color-success-hover: color-mix(in oklch, var(--ui-color-success) 85%, black);--ui-color-warning-light: color-mix(in oklch, var(--ui-color-warning) 50%, white);--ui-color-warning-dark: color-mix(in oklch, var(--ui-color-warning) 75%, black);--ui-color-warning-subtle: color-mix(in oklch, var(--ui-color-warning) 12%, white);--ui-color-warning-hover: color-mix(in oklch, var(--ui-color-warning) 85%, black);--ui-color-danger-light: color-mix(in oklch, var(--ui-color-danger) 50%, white);--ui-color-danger-dark: color-mix(in oklch, var(--ui-color-danger) 75%, black);--ui-color-danger-subtle: color-mix(in oklch, var(--ui-color-danger) 12%, white);--ui-color-danger-hover: color-mix(in oklch, var(--ui-color-danger) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}}
|
|
4
|
+
@layer tokens.scale{:root{--ui-space-px: calc(var(--ui-unit) * 0.125);--ui-space-quarter: calc(var(--ui-unit) * 0.25);--ui-space-half: calc(var(--ui-unit) * 0.5);--ui-space-0: calc(var(--ui-unit) * 0.5);--ui-space-1: var(--ui-unit);--ui-space-2: calc(var(--ui-unit) * 2);--ui-space-3: calc(var(--ui-unit) * 3);--ui-space-4: calc(var(--ui-unit) * 4);--ui-space-6: calc(var(--ui-unit) * 6);--ui-space-8: calc(var(--ui-unit) * 8)}}
|
|
5
|
+
@layer tokens.scale{:root{--ui-font-size-xs: calc(var(--ui-font-size-base) * 0.75);--ui-font-size-sm: calc(var(--ui-font-size-base) * 0.875);--ui-font-size-md: var(--ui-font-size-base);--ui-font-size-lg: calc(var(--ui-font-size-base) * 1.25);--ui-font-size-xl: calc(var(--ui-font-size-base) * 1.5);--ui-font-size-2xl: calc(var(--ui-font-size-base) * 1.75);--ui-font-size-3xl: calc(var(--ui-font-size-base) * 2);--ui-font-size-4xl: calc(var(--ui-font-size-base) * 2.5);--ui-line-height-tight-xs: var(--ui-row-1);--ui-line-height-tight-sm: var(--ui-row-1);--ui-line-height-tight-md: calc(var(--ui-unit) * 3);--ui-line-height-tight-lg: calc(var(--ui-unit) * 3);--ui-line-height-xs: var(--ui-row-1);--ui-line-height-sm: calc(var(--ui-unit) * 3);--ui-line-height-md: calc(var(--ui-unit) * 3);--ui-line-height-lg: var(--ui-row-2);--ui-line-height-xl: var(--ui-row-2);--ui-line-height-2xl: var(--ui-row-2);--ui-line-height-3xl: calc(var(--ui-unit) * 5);--ui-line-height-4xl: calc(var(--ui-unit) * 6);--ui-font-weight-normal: 400;--ui-font-weight-medium: 500;--ui-font-weight-semibold: 600;--ui-font-weight-bold: 700;--ui-letter-spacing-display: -0.02em;--ui-letter-spacing-body: 0;--ui-letter-spacing-caps: 0.08em}}
|
|
6
|
+
@layer tokens.semantic{:root{--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-line-height-4xl);--ui-heading-1-weight: var(--ui-font-weight-bold);--ui-heading-1-tracking: var(--ui-letter-spacing-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-line-height-3xl);--ui-heading-2-weight: var(--ui-font-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-line-height-2xl);--ui-heading-3-weight: var(--ui-font-weight-semibold);--ui-heading-3-tracking: var(--ui-letter-spacing-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-line-height-xl);--ui-heading-4-weight: var(--ui-font-weight-semibold);--ui-heading-4-tracking: var(--ui-letter-spacing-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-line-height-sm);--ui-heading-5-weight: var(--ui-font-weight-medium);--ui-heading-5-tracking: var(--ui-letter-spacing-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-line-height-md);--ui-body-weight: var(--ui-font-weight-normal);--ui-body-tracking: var(--ui-letter-spacing-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-line-height-sm);--ui-body-sm-weight: var(--ui-font-weight-normal);--ui-body-sm-tracking: var(--ui-letter-spacing-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-line-height-xs);--ui-caption-weight: var(--ui-font-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-line-height-lg);--ui-lead-weight: var(--ui-font-weight-normal);--ui-lead-tracking: var(--ui-letter-spacing-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-line-height-xs);--ui-eyebrow-weight: var(--ui-font-weight-semibold);--ui-eyebrow-tracking: var(--ui-letter-spacing-caps)}}
|
|
7
|
+
@layer tokens.scale{:root{--ui-row: calc(var(--ui-unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}}
|
|
8
|
+
@layer tokens.scale{:root{--ui-radius-sm: calc(var(--ui-radius-base) * 0.5);--ui-radius-md: var(--ui-radius-base);--ui-radius-lg: calc(var(--ui-radius-base) * 2);--ui-radius-full: 9999px}}
|
|
9
|
+
@layer tokens.scale{:root{--ui-border-width-sm: var(--ui-border-width-base);--ui-border-width-md: calc(var(--ui-border-width-base) * 2);--ui-border-width-lg: calc(var(--ui-border-width-base) * 4)}}
|
|
10
|
+
@layer tokens.scale{:root{--ui-shadow-sm: 0 calc(var(--ui-unit) * 0.125) calc(var(--ui-unit) * 0.25) color-mix(in oklch, var(--ui-color-neutral) var(--ui-shadow-strength), transparent);--ui-shadow-md: 0 calc(var(--ui-unit) * 0.5) calc(var(--ui-unit) * 0.75) color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.75), transparent);--ui-shadow-lg: 0 calc(var(--ui-unit) * 1.25) calc(var(--ui-unit) * 2) color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.6), transparent)}}
|
|
11
|
+
@layer tokens.scale{:root{--ui-z-index-base: 0;--ui-z-index-sticky: 100;--ui-z-index-dropdown: 200;--ui-z-index-overlay: 300;--ui-z-index-modal: 400;--ui-z-index-popover: 500;--ui-z-index-tooltip: 600;--ui-z-index-toast: 700;--ui-z-index-drawer: 800;--ui-z-index-debug: 9999}}
|
|
12
|
+
@layer tokens.scale{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-normal: 200ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-normal: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}
|
|
13
|
+
@layer tokens.semantic{:root{color-scheme:light dark;--ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));--ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));--ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));--ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
|
|
12
14
|
@layer themes{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));--ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700))}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}}
|
|
13
|
-
@layer tokens{:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}}
|
|
15
|
+
@layer tokens.semantic{:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}}
|
|
14
16
|
@layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}
|
|
15
17
|
@layer base{.ui-root{font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-line-height-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}
|
|
16
18
|
@layer base{h1{margin-block-end:var(--ui-space-4);font-size:var(--ui-heading-1-size);font-weight:var(--ui-heading-1-weight);line-height:var(--ui-heading-1-line-height);letter-spacing:var(--ui-heading-1-tracking)}h2{margin-block-end:var(--ui-space-3);font-size:var(--ui-heading-2-size);font-weight:var(--ui-heading-2-weight);line-height:var(--ui-heading-2-line-height);letter-spacing:var(--ui-heading-2-tracking)}h3{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-3-size);font-weight:var(--ui-heading-3-weight);line-height:var(--ui-heading-3-line-height);letter-spacing:var(--ui-heading-3-tracking)}h4{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-4-size);font-weight:var(--ui-heading-4-weight);line-height:var(--ui-heading-4-line-height);letter-spacing:var(--ui-heading-4-tracking)}h5,h6{margin-block-end:var(--ui-space-1);font-size:var(--ui-heading-5-size);font-weight:var(--ui-heading-5-weight);line-height:var(--ui-heading-5-line-height);letter-spacing:var(--ui-heading-5-tracking)}p{margin-block-end:var(--ui-space-2);font-size:var(--ui-body-size);line-height:var(--ui-body-line-height);letter-spacing:var(--ui-body-tracking)}p:last-child{margin-block-end:0}strong,b{font-weight:var(--ui-font-weight-bold);line-height:0}small{font-size:var(--ui-caption-size);line-height:0}code{padding:0 var(--ui-space-1);font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:0;vertical-align:baseline;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-sm)}pre{padding:var(--ui-space-2);margin-block-end:var(--ui-space-2);overflow-x:auto;font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:var(--ui-body-sm-line-height);background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-md)}pre code{padding:0;background:none}a{text-decoration:underline;color:var(--ui-color-primary);transition:color var(--ui-duration-fast) var(--ui-ease-default)}a:hover{color:var(--ui-color-primary-hover)}a:visited{color:var(--ui-color-primary)}@media(width < 45.625rem){h1{font-size:var(--ui-font-size-2xl);line-height:var(--ui-line-height-2xl)}h2{font-size:var(--ui-font-size-xl);line-height:var(--ui-line-height-xl)}h3{font-size:var(--ui-font-size-lg);line-height:var(--ui-line-height-sm)}h4{font-size:1.125rem;line-height:var(--ui-line-height-sm)}}@media(width > 67.5rem){h1{font-size:calc(var(--ui-unit)*6);line-height:calc(var(--ui-unit)*7)}h2{font-size:var(--ui-font-size-4xl);line-height:var(--ui-line-height-4xl)}}}
|
|
@@ -78,7 +80,7 @@
|
|
|
78
80
|
@layer components.styles{.ui-skeleton{display:block;position:relative;overflow:hidden;background:var(--_bg);border-radius:var(--_radius)}.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.ui-skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.ui-skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.ui-skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.ui-skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.ui-skeleton--static::after{animation:none}.ui-skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.ui-skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion: reduce){.ui-skeleton::after{animation:none}.ui-skeleton--pulse{animation:none}}}
|
|
79
81
|
@layer components.tokens{.ui-spinner{--_size: var(--ui-spinner-size, calc(var(--ui-unit, 0.5rem) * 4));--_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md, 0.125rem));--_color: var(--ui-spinner-color, currentcolor);--_track-color: var(--ui-spinner-track-color, transparent);--_duration: var(--ui-spinner-duration, 750ms)}.ui-spinner--xs{--_size: var(--ui-spinner-size-xs, calc(var(--ui-unit, 0.5rem) * 2));--_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm, 0.0625rem))}.ui-spinner--sm{--_size: var(--ui-spinner-size-sm, calc(var(--ui-unit, 0.5rem) * 3));--_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md, 0.125rem))}.ui-spinner--lg{--_size: var(--ui-spinner-size-lg, calc(var(--ui-unit, 0.5rem) * 5));--_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md, 0.125rem))}.ui-spinner--xl{--_size: var(--ui-spinner-size-xl, calc(var(--ui-unit, 0.5rem) * 6));--_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg, 0.25rem))}}
|
|
80
82
|
@layer components.styles{.ui-spinner{display:inline-block;flex-shrink:0;box-sizing:border-box;block-size:var(--_size);inline-size:var(--_size);vertical-align:middle;border:var(--_border-width) solid var(--_track-color);border-radius:50%;border-block-start-color:var(--_color);animation:spinner-rotate var(--_duration) linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion: reduce){.ui-spinner{animation:none}}}
|
|
81
|
-
@layer components.tokens{.ui-toast-viewport{--_z-toast: var(--ui-z-index-toast, 700);--_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--_max-width: var(--ui-toast-viewport-max-width, 420px)}.ui-toast{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_padding: var(--ui-toast-padding, calc(0.5rem * 2));--_gap: var(--ui-toast-gap, calc(0.5rem * 1));--_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg, 0
|
|
83
|
+
@layer components.tokens{.ui-toast-viewport{--_z-toast: var(--ui-z-index-toast, 700);--_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--_max-width: var(--ui-toast-viewport-max-width, 420px)}.ui-toast{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_padding: var(--ui-toast-padding, calc(0.5rem * 2));--_gap: var(--ui-toast-gap, calc(0.5rem * 1));--_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)))}.ui-toast--success{--_border-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-toast--warning{--_border-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-toast--danger{--_border-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-toast--info{--_border-color: var(--ui-color-primary, oklch(55% 0.22 250deg))}}
|
|
82
84
|
@layer components.styles{.ui-toast-viewport{display:flex;flex-direction:column;gap:var(--_gap);position:fixed;z-index:var(--_z-toast);max-inline-size:var(--_max-width);padding:var(--_padding);pointer-events:none;list-style:none}.ui-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ui-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ui-toast-viewport--bottom-end{inset-block-end:0;inset-inline-end:0}.ui-toast-viewport--bottom-start{inset-block-end:0;inset-inline-start:0}.ui-toast-viewport--top-center{inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast-viewport--bottom-center{inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast{display:flex;align-items:flex-start;gap:var(--_gap);padding:var(--_padding);background:var(--_bg);border-radius:var(--_radius);outline:var(--_border-width-sm) solid var(--_border-color);box-shadow:var(--_shadow);pointer-events:auto;outline-offset:calc(var(--_border-width-sm)*-1)}.ui-toast__icon{flex-shrink:0}.ui-toast__content{flex:1;min-inline-size:0}.ui-toast__title{margin:0;font-weight:var(--_weight-medium);line-height:var(--_row-1)}.ui-toast__description{margin:0;font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-toast__action{flex-shrink:0}.ui-toast__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_row-1);inline-size:var(--_row-1);padding:0;color:var(--_color-text-muted);background:none;border:none;cursor:pointer}.ui-toast__close:hover{color:var(--_color-text)}.ui-toast[data-state=open]{animation:toast-slide-in var(--_duration-normal) var(--_ease-out)}.ui-toast[data-state=closed]{animation:toast-slide-out var(--_duration-fast) var(--_ease-in)}@keyframes toast-slide-in{from{opacity:0;transform:translateX(100%)}}@keyframes toast-slide-out{to{opacity:0;transform:translateX(100%)}}@media(prefers-reduced-motion: reduce){.ui-toast[data-state]{animation:none}}}
|
|
83
85
|
@layer components.tokens{.ui-checkbox{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, ease);--_border-width-md: var(--ui-border-width-md, 0.125rem);--_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_size: var(--ui-checkbox-size, calc(0.5rem * 2));--_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));--_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-checkbox--lg{--_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3))}.ui-checkbox--error{--_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-checkbox--success{--_border-color: var(--ui-checkbox-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--_border-color-focus: var(--ui-checkbox-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
|
|
84
86
|
@layer components.styles{.ui-checkbox{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_size);inline-size:var(--_size);margin:0;vertical-align:middle;background:var(--_bg);border:var(--_border-width-sm) solid var(--_border-color);border-radius:var(--_radius);cursor:pointer;appearance:none;transition:background-color var(--_duration-fast) var(--_ease-default),border-color var(--_duration-fast) var(--_ease-default),box-shadow var(--_duration-fast) var(--_ease-default)}.ui-checkbox::before{content:"";block-size:65%;inline-size:65%;background-color:var(--_check-color);opacity:0;clip-path:polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);transition:opacity var(--_duration-fast) var(--_ease-default)}.ui-checkbox:hover:not(:disabled){border-color:var(--_border-color-focus)}.ui-checkbox:focus-visible{border-color:var(--_border-color-focus);outline:var(--_border-width-md) solid rgba(0,0,0,0);outline-offset:var(--_border-width-sm);box-shadow:0 0 0 var(--_border-width-md) var(--_color-focus)}.ui-checkbox:checked{background:var(--_bg-checked);border-color:var(--_bg-checked)}.ui-checkbox:checked::before{opacity:1}.ui-checkbox:indeterminate{background:var(--_bg-checked);border-color:var(--_bg-checked)}.ui-checkbox:indeterminate::before{opacity:1;clip-path:polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%)}.ui-checkbox:disabled{opacity:var(--_opacity-disabled);cursor:not-allowed}}
|
|
@@ -120,7 +122,7 @@
|
|
|
120
122
|
@layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);block-size:var(--_height);padding:0;margin:0;font-size:var(--_font-size-sm);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--_gap);block-size:var(--_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--_breadcrumb-separator);color:var(--_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--_link-color);transition:color var(--_duration-fast) var(--_ease-default)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--_color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--_separator-color)}}
|
|
121
123
|
@layer components.tokens{.ui-dropdown-menu{--_space-0: var(--ui-space-0, 0.25rem);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_z: var(--ui-dropdown-menu-z, var(--ui-z-index-dropdown, 200));--_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, 0.5rem));--_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto)}}
|
|
122
124
|
@layer components.styles{.ui-dropdown-menu{display:inline-block;position:relative}.ui-dropdown-menu__trigger{display:inline-flex;align-items:center;gap:var(--_space-0)}.ui-dropdown-menu__trigger-icon{display:inline-flex;font-size:0.6em;transition:transform var(--_duration-fast) var(--_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__trigger-icon{transform:rotate(180deg)}.ui-dropdown-menu__panel{position:absolute;inset-block-start:calc(100% + var(--_panel-offset));inset-inline-start:0;z-index:var(--_z);min-inline-size:var(--_panel-min-width);opacity:0;pointer-events:none;transform:translateY(calc(0.5rem * -1));transition:opacity var(--_duration-fast) var(--_ease-default),transform var(--_duration-fast) var(--_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.ui-dropdown-menu--top .ui-dropdown-menu__panel{inset-block-start:auto;inset-block-end:calc(100% + var(--_panel-offset));transform:translateY(0.5rem)}.ui-dropdown-menu--top.ui-dropdown-menu--open .ui-dropdown-menu__panel{transform:translateY(0)}.ui-dropdown-menu--align-end .ui-dropdown-menu__panel{inset-inline-start:auto;inset-inline-end:0}.ui-dropdown-menu--full-width .ui-dropdown-menu__panel{min-inline-size:100%}}
|
|
123
|
-
@layer components.tokens{.ui-menu{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-xs: var(--ui-font-size-xs, 0.75rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--_padding: var(--ui-menu-padding, calc(0.5rem * 1));--_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0
|
|
125
|
+
@layer components.tokens{.ui-menu{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-xs: var(--ui-font-size-xs, 0.75rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--_padding: var(--ui-menu-padding, calc(0.5rem * 1));--_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)));--_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
|
|
124
126
|
@layer components.styles{.ui-menu{min-inline-size:var(--_min-width);max-block-size:var(--_max-height);padding:var(--_padding);overflow-y:auto;background:var(--_bg);border-radius:var(--_radius);outline:var(--_border-width-sm) solid var(--_border-color);box-shadow:var(--_shadow);outline-offset:calc(var(--_border-width-sm)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--_item-padding);font-size:var(--_font-size-xs);font-weight:var(--_weight-medium);line-height:var(--_row-1);letter-spacing:0.05em;text-transform:uppercase;color:var(--_color-text-muted)}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--_item-padding);font-size:var(--_font-size-sm);line-height:var(--_row-1);text-decoration:none;color:var(--_color-text);background:rgba(0,0,0,0);border:none;border-radius:var(--_item-radius);cursor:pointer;transition:background var(--_duration-fast) var(--_ease-default)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--_color-danger)}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--_color-danger)}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:var(--_opacity-disabled);pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--_font-size-xs);color:var(--_color-text-muted)}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--_border-width-sm);background:var(--_color-border)}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}
|
|
125
127
|
@layer components.tokens{.ui-nav{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-sans: var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);--_border-width-md: var(--ui-border-width-md, 0.125rem);--_duration-base: var(--ui-duration-base, 150ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-font-weight-medium, 500));--_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-nav--pills{--_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}
|
|
126
128
|
@layer components.styles{.ui-nav__list{display:flex;align-items:stretch;gap:var(--_gap);box-sizing:border-box;block-size:var(--_item-height);padding:0;margin:0;list-style:none;box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-nav__item{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--_item-height);padding-inline:var(--_item-padding-x);font-family:var(--_font-sans);font-size:var(--_item-font-size);font-weight:var(--_item-font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--_item-color);background:rgba(0,0,0,0);border:none;box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--_duration-base) var(--_ease-default),background var(--_duration-base) var(--_ease-default),box-shadow var(--_duration-base) var(--_ease-default)}.ui-nav__item:hover{color:var(--_item-color-hover)}.ui-nav__item--active{color:var(--_item-color-active);box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 var(--_item-color-active)}.ui-nav__item--disabled{opacity:var(--_opacity-disabled);pointer-events:none}.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--pills .ui-nav__item{border-radius:var(--_item-radius);box-shadow:none}.ui-nav--pills .ui-nav__item:hover{background:var(--_item-bg-hover)}.ui-nav--pills .ui-nav__item--active{color:var(--_item-color-active);background:var(--_item-bg-active)}.ui-nav--vertical .ui-nav__list{flex-direction:column;align-items:stretch;block-size:auto;box-shadow:inset calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-nav--vertical .ui-nav__item{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 rgba(0,0,0,0)}.ui-nav--vertical .ui-nav__item--active{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 var(--_item-color-active)}.ui-nav--vertical.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--vertical.ui-nav--pills .ui-nav__item{box-shadow:none}}
|
|
@@ -130,7 +132,7 @@
|
|
|
130
132
|
@layer components.styles{.ui-tabs__list{display:flex;align-items:stretch;gap:var(--_space-1);box-sizing:border-box;block-size:var(--_tab-height);box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-tabs__tab{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--_tab-height);padding-inline:var(--_tab-padding-x);margin:0;font-family:var(--_font-sans);font-size:var(--_tab-font-size);font-weight:var(--_weight-medium);line-height:1;color:var(--_color-text-muted);background:var(--_tab-bg);border:none;box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--_duration-base) var(--_ease-default),box-shadow var(--_duration-base) var(--_ease-default)}.ui-tabs__tab:hover{color:var(--_color-text)}.ui-tabs__tab--active{color:var(--_color-primary);background:var(--_tab-bg-active);box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 var(--_color-primary)}.ui-tabs__panel{display:none;padding:var(--_panel-padding);line-height:var(--_row-1)}.ui-tabs__panel--active{display:block}.ui-tabs--vertical{display:flex}.ui-tabs--vertical>.ui-tabs__list{flex-direction:column;block-size:auto;inline-size:auto;box-shadow:inset calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-tabs--vertical>.ui-tabs__list>.ui-tabs__tab{block-size:var(--_tab-height);box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 rgba(0,0,0,0)}.ui-tabs--vertical>.ui-tabs__list>.ui-tabs__tab--active{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 var(--_color-primary)}.ui-tabs--vertical>.ui-tabs__panel{flex:1}}
|
|
131
133
|
@layer components.tokens{.ui-dialog{--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-dialog-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}}
|
|
132
134
|
@layer components.styles{.ui-dialog .ui-modal__content{padding:0}.ui-dialog__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);border-block-end:1px solid var(--_border-color)}.ui-dialog__title{margin:0;font-size:var(--_font-size-lg);font-weight:var(--_weight-semibold);line-height:calc(0.5rem*3)}.ui-dialog__close{flex-shrink:0;margin-inline-start:auto}.ui-dialog__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto}.ui-dialog__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*1.5);padding:var(--_footer-padding);border-block-start:1px solid var(--_border-color)}.ui-dialog--borderless .ui-dialog__header{border-block-end:none}.ui-dialog--borderless .ui-dialog__footer{border-block-start:none}}
|
|
133
|
-
@layer components.tokens{.ui-drawer{--_z-drawer: var(--ui-z-index-drawer, 800);--_overlay-bg: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_size: var(--ui-drawer-size, calc(0.5rem * 40));--_max-size: var(--ui-drawer-max-size, 90%);--_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg, 0
|
|
135
|
+
@layer components.tokens{.ui-drawer{--_z-drawer: var(--ui-z-index-drawer, 800);--_overlay-bg: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_size: var(--ui-drawer-size, calc(0.5rem * 40));--_max-size: var(--ui-drawer-max-size, 90%);--_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)));--_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-drawer--sm{--_size: calc(0.5rem * 30)}.ui-drawer--lg{--_size: calc(0.5rem * 50)}.ui-drawer--full{--_size: 100%;--_max-size: 100%}}
|
|
134
136
|
@layer components.styles{.ui-drawer-overlay{position:fixed;inset:0;z-index:var(--_z-drawer);background:var(--_overlay-bg)}.ui-drawer-overlay[data-state=open]{animation:drawer-overlay-in var(--_duration-normal) var(--_ease-out)}.ui-drawer-overlay[data-state=closed]{animation:drawer-overlay-out var(--_duration-fast) var(--_ease-in)}@keyframes drawer-overlay-in{from{opacity:0}}@keyframes drawer-overlay-out{to{opacity:0}}.ui-drawer{display:flex;flex-direction:column;position:fixed;z-index:var(--_z-drawer);background:var(--_bg);box-shadow:var(--_shadow)}.ui-drawer--end{inset-block:0;inset-inline-end:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-drawer--start{inset-block:0;inset-inline-start:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:var(--_border-width-sm) 0 0 var(--_border-color)}.ui-drawer--top{inset-block-start:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 var(--_border-width-sm) 0 var(--_border-color)}.ui-drawer--bottom{inset-block-end:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-drawer--end[data-state=open]{animation:drawer-slide-in-end var(--_duration-normal) var(--_ease-out)}.ui-drawer--end[data-state=closed]{animation:drawer-slide-out-end var(--_duration-fast) var(--_ease-in)}.ui-drawer--start[data-state=open]{animation:drawer-slide-in-start var(--_duration-normal) var(--_ease-out)}.ui-drawer--start[data-state=closed]{animation:drawer-slide-out-start var(--_duration-fast) var(--_ease-in)}.ui-drawer--top[data-state=open]{animation:drawer-slide-in-top var(--_duration-normal) var(--_ease-out)}.ui-drawer--top[data-state=closed]{animation:drawer-slide-out-top var(--_duration-fast) var(--_ease-in)}.ui-drawer--bottom[data-state=open]{animation:drawer-slide-in-bottom var(--_duration-normal) var(--_ease-out)}.ui-drawer--bottom[data-state=closed]{animation:drawer-slide-out-bottom var(--_duration-fast) var(--_ease-in)}@keyframes drawer-slide-in-end{from{transform:translateX(100%)}}@keyframes drawer-slide-out-end{to{transform:translateX(100%)}}@keyframes drawer-slide-in-start{from{transform:translateX(-100%)}}@keyframes drawer-slide-out-start{to{transform:translateX(-100%)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.ui-drawer__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-drawer__title{margin:0;font-size:var(--_font-size-lg);font-weight:var(--_weight-semibold);line-height:var(--_row-1)}.ui-drawer__description{margin:0;font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-drawer__close{flex-shrink:0;margin-inline-start:auto}.ui-drawer__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto;line-height:var(--_row-1)}.ui-drawer__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*2);padding:var(--_footer-padding);box-shadow:inset 0 var(--_border-width-sm) 0 var(--_border-color)}@media(prefers-reduced-motion: reduce){.ui-drawer-overlay[data-state],.ui-drawer[data-state]{animation:none}}}
|
|
135
137
|
@layer components.tokens{.ui-modal{--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-default: var(--ui-ease-default, ease);--_bg: var(--ui-modal-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));--_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));--_padding: var(--ui-modal-padding, calc(0.5rem * 3));--_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));--_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));--_z: var(--ui-modal-z, var(--ui-z-index-modal, 400))}.ui-modal--sm{--_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40))}.ui-modal--lg{--_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80))}.ui-modal--full{--_max-width: calc(100vw - 0.5rem * 4);--_max-height: calc(100vh - 0.5rem * 4);--_radius: 0}}
|
|
136
138
|
@layer components.styles{.ui-modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--_z);padding:calc(0.5rem*2)}.ui-modal__content{display:flex;flex-direction:column;position:relative;inline-size:100%;max-block-size:var(--_max-height);max-inline-size:var(--_max-width);padding:var(--_padding);overflow:hidden;background:var(--_bg);border-radius:var(--_radius);box-shadow:var(--_shadow)}.ui-modal__body{flex:1 1 auto;overflow-y:auto}.ui-modal--entering .ui-modal__content,.ui-modal--visible .ui-modal__content{opacity:1;transform:scale(1)}.ui-modal--exiting .ui-modal__content,.ui-modal--hidden .ui-modal__content{opacity:0;transform:scale(0.95)}.ui-modal--animate .ui-modal__content{transition:opacity var(--_duration-normal) var(--_ease-default),transform var(--_duration-normal) var(--_ease-default)}.ui-modal--hidden{visibility:hidden;pointer-events:none}}
|
package/package.json
CHANGED
package/src/config/layers.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
|
|
1
|
+
@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.styles, components.tokens, utilities, themes;
|
|
@@ -101,7 +101,8 @@ $sizes: (
|
|
|
101
101
|
$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
|
|
102
102
|
$font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
|
|
103
103
|
|
|
104
|
-
// Font sizes (1.2 modular scale)
|
|
104
|
+
// Font sizes (derived from base, 1.2 modular scale)
|
|
105
|
+
$font-size-base: 1rem; // 16px — core knob
|
|
105
106
|
$font-size-xs: 0.75rem; // 12px
|
|
106
107
|
$font-size-sm: 0.875rem; // 14px
|
|
107
108
|
$font-size-md: 1rem; // 16px (base)
|
|
@@ -153,19 +154,21 @@ $radius-lg: $radius-base * 2; // 16px
|
|
|
153
154
|
$radius-full: 9999px;
|
|
154
155
|
|
|
155
156
|
// ==========================================================================
|
|
156
|
-
// 6. Borders — derived from $
|
|
157
|
+
// 6. Borders — derived from $border-width-base
|
|
157
158
|
// ==========================================================================
|
|
158
|
-
$border-width-
|
|
159
|
-
$border-width-
|
|
160
|
-
$border-width-
|
|
159
|
+
$border-width-base: $unit * 0.125; // 1px — core knob
|
|
160
|
+
$border-width-sm: $border-width-base; // 1px
|
|
161
|
+
$border-width-md: $border-width-base * 2; // 2px
|
|
162
|
+
$border-width-lg: $border-width-base * 4; // 4px
|
|
161
163
|
$focus-ring-offset: -$border-width-md;
|
|
162
164
|
|
|
163
165
|
// ==========================================================================
|
|
164
|
-
// 7. Shadows —
|
|
166
|
+
// 7. Shadows — geometry from $unit, opacity from $shadow-strength
|
|
165
167
|
// ==========================================================================
|
|
166
|
-
$shadow-
|
|
167
|
-
$shadow-
|
|
168
|
-
$shadow-
|
|
168
|
+
$shadow-strength: 20%; // core knob
|
|
169
|
+
$shadow-sm: 0 ($unit * 0.125) ($unit * 0.25) hsl(220 10% 20% / 0.05);
|
|
170
|
+
$shadow-md: 0 ($unit * 0.5) ($unit * 0.75) hsl(220 10% 20% / 0.1);
|
|
171
|
+
$shadow-lg: 0 ($unit * 1.25) ($unit * 2) hsl(220 10% 20% / 0.15);
|
|
169
172
|
|
|
170
173
|
// ==========================================================================
|
|
171
174
|
// 8. Z-index scale
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@layer tokens {
|
|
1
|
+
@layer tokens.scale {
|
|
2
2
|
:root {
|
|
3
|
-
// Border widths - derived from
|
|
4
|
-
--ui-border-width-sm:
|
|
5
|
-
--ui-border-width-md: calc(var(--ui-
|
|
6
|
-
--ui-border-width-lg: calc(var(--ui-
|
|
3
|
+
// Border widths - derived from --ui-border-width-base
|
|
4
|
+
--ui-border-width-sm: var(--ui-border-width-base);
|
|
5
|
+
--ui-border-width-md: calc(var(--ui-border-width-base) * 2);
|
|
6
|
+
--ui-border-width-lg: calc(var(--ui-border-width-base) * 4);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
@@ -1,12 +1,5 @@
|
|
|
1
|
-
@layer tokens {
|
|
1
|
+
@layer tokens.scale {
|
|
2
2
|
:root {
|
|
3
|
-
// Base colors - override these to customize the design system
|
|
4
|
-
--ui-color-primary: oklch(55% 0.22 250);
|
|
5
|
-
--ui-color-success: oklch(60% 0.18 145);
|
|
6
|
-
--ui-color-warning: oklch(75% 0.18 70);
|
|
7
|
-
--ui-color-danger: oklch(60% 0.22 25);
|
|
8
|
-
--ui-color-neutral: oklch(50% 0.02 250);
|
|
9
|
-
|
|
10
3
|
// Primary shades - auto-generated via color-mix
|
|
11
4
|
--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
|
|
12
5
|
--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// Core design knobs — change these ~10 values to retheme everything
|
|
2
|
+
@layer tokens.core {
|
|
3
|
+
:root {
|
|
4
|
+
// Grid unit — all spacing, row heights, and radii derive from this
|
|
5
|
+
--ui-unit: 8px;
|
|
6
|
+
|
|
7
|
+
// Base colors — shades auto-generated via color-mix in tokens.scale
|
|
8
|
+
--ui-color-primary: oklch(55% 0.22 250);
|
|
9
|
+
--ui-color-success: oklch(60% 0.18 145);
|
|
10
|
+
--ui-color-warning: oklch(75% 0.18 70);
|
|
11
|
+
--ui-color-danger: oklch(60% 0.22 25);
|
|
12
|
+
--ui-color-neutral: oklch(50% 0.02 250);
|
|
13
|
+
|
|
14
|
+
// Font families — system stacks, override for brand fonts
|
|
15
|
+
--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
|
|
16
|
+
--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
|
|
17
|
+
|
|
18
|
+
// Base font size — all font-size-* tokens derive from this via calc()
|
|
19
|
+
--ui-font-size-base: 1rem;
|
|
20
|
+
|
|
21
|
+
// Base radius — sm/md/lg derive from this
|
|
22
|
+
--ui-radius-base: var(--ui-unit);
|
|
23
|
+
|
|
24
|
+
// Base border width — sm/md/lg derive from this
|
|
25
|
+
--ui-border-width-base: calc(var(--ui-unit) * 0.125);
|
|
26
|
+
|
|
27
|
+
// Shadow strength — controls opacity of all shadow levels
|
|
28
|
+
--ui-shadow-strength: 20%;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
@layer tokens {
|
|
1
|
+
@layer tokens.scale {
|
|
2
2
|
:root {
|
|
3
|
-
// Override --ui-radius-base to control all border radii at once
|
|
4
|
-
--ui-radius-base: var(--ui-unit); // 8px — the single theme knob
|
|
5
3
|
--ui-radius-sm: calc(var(--ui-radius-base) * 0.5); // 4px
|
|
6
4
|
--ui-radius-md: var(--ui-radius-base); // 8px
|
|
7
5
|
--ui-radius-lg: calc(var(--ui-radius-base) * 2); // 16px
|
|
@@ -1,8 +1,20 @@
|
|
|
1
|
-
@layer tokens {
|
|
1
|
+
@layer tokens.scale {
|
|
2
2
|
:root {
|
|
3
|
-
// Shadows
|
|
4
|
-
--ui-shadow-sm:
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
// Shadows — geometry from --ui-unit, opacity from --ui-shadow-strength
|
|
4
|
+
--ui-shadow-sm:
|
|
5
|
+
0
|
|
6
|
+
calc(var(--ui-unit) * 0.125)
|
|
7
|
+
calc(var(--ui-unit) * 0.25)
|
|
8
|
+
color-mix(in oklch, var(--ui-color-neutral) var(--ui-shadow-strength), transparent);
|
|
9
|
+
--ui-shadow-md:
|
|
10
|
+
0
|
|
11
|
+
calc(var(--ui-unit) * 0.5)
|
|
12
|
+
calc(var(--ui-unit) * 0.75)
|
|
13
|
+
color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.75), transparent);
|
|
14
|
+
--ui-shadow-lg:
|
|
15
|
+
0
|
|
16
|
+
calc(var(--ui-unit) * 1.25)
|
|
17
|
+
calc(var(--ui-unit) * 2)
|
|
18
|
+
color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.6), transparent);
|
|
7
19
|
}
|
|
8
20
|
}
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
@layer tokens {
|
|
1
|
+
@layer tokens.scale {
|
|
2
2
|
:root {
|
|
3
|
-
// Font families — system font stack, override with custom fonts via these tokens
|
|
4
|
-
--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
|
|
5
|
-
--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
|
|
6
|
-
|
|
7
3
|
// ==========================================================================
|
|
8
|
-
// PRIMITIVE TOKENS - Font Size Scale
|
|
9
|
-
// Modular scale: 1.2 ratio (Minor Third), base 16px
|
|
4
|
+
// PRIMITIVE TOKENS - Font Size Scale (derived from --ui-font-size-base)
|
|
10
5
|
// ==========================================================================
|
|
11
|
-
--ui-font-size-xs: 0.
|
|
12
|
-
--ui-font-size-sm: 0.
|
|
13
|
-
--ui-font-size-md:
|
|
14
|
-
--ui-font-size-lg: 1.
|
|
15
|
-
--ui-font-size-xl: 1.
|
|
16
|
-
--ui-font-size-2xl: 1.
|
|
17
|
-
--ui-font-size-3xl:
|
|
18
|
-
--ui-font-size-4xl: 2.
|
|
6
|
+
--ui-font-size-xs: calc(var(--ui-font-size-base) * 0.75);
|
|
7
|
+
--ui-font-size-sm: calc(var(--ui-font-size-base) * 0.875);
|
|
8
|
+
--ui-font-size-md: var(--ui-font-size-base);
|
|
9
|
+
--ui-font-size-lg: calc(var(--ui-font-size-base) * 1.25);
|
|
10
|
+
--ui-font-size-xl: calc(var(--ui-font-size-base) * 1.5);
|
|
11
|
+
--ui-font-size-2xl: calc(var(--ui-font-size-base) * 1.75);
|
|
12
|
+
--ui-font-size-3xl: calc(var(--ui-font-size-base) * 2);
|
|
13
|
+
--ui-font-size-4xl: calc(var(--ui-font-size-base) * 2.5);
|
|
19
14
|
|
|
20
15
|
// ==========================================================================
|
|
21
16
|
// PRIMITIVE TOKENS - Line Heights (8px grid-snap)
|
|
@@ -52,7 +47,11 @@
|
|
|
52
47
|
--ui-letter-spacing-display: -0.02em;
|
|
53
48
|
--ui-letter-spacing-body: 0;
|
|
54
49
|
--ui-letter-spacing-caps: 0.08em;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
55
52
|
|
|
53
|
+
@layer tokens.semantic {
|
|
54
|
+
:root {
|
|
56
55
|
// ==========================================================================
|
|
57
56
|
// SEMANTIC TOKENS - Text Roles
|
|
58
57
|
// ==========================================================================
|