@assure-one/design-system 1.35.0 → 1.37.0

package/dist/css/legacy-aliases.css

@@ -242,7 +242,7 @@
   --color-brand-soft: var(--ds-compat-color-brand-soft);
   --color-brand-soft-foreground: var(--ds-compat-color-brand-soft-foreground);
   --color-border: var(--ds-color-border);
-  --color-input: var(--ds-color-border-strong);
+  --color-input: var(--ds-compat-color-input);
   --color-input-background: var(--ds-color-surface);
   --color-ring: var(--ds-color-border-focus);
   --color-switch-background: var(--ds-color-canvas-sunken-strong);
@@ -427,6 +427,18 @@
   --avatar-size-md: var(--ds-avatar-size-md);
   --avatar-size-lg: var(--ds-avatar-size-lg);
   --avatar-size-xl: var(--ds-avatar-size-xl);
+  --motion-duration-floating: var(--ds-motion-duration-floating);
+  --motion-ease-emphasized: var(--ds-motion-ease-emphasized);
+  --motion-ease-standard: var(--ds-motion-ease-standard);
+  --color-skeleton: var(--ds-color-skeleton);
+  --color-skeleton-sheen: var(--ds-color-skeleton-sheen);
+  --animate-skeleton-shimmer: var(--ds-animate-skeleton-shimmer);
+  --animate-spinner: var(--ds-animate-spinner);
+  --color-field-border: var(--ds-field-border);
+  --color-field-border-hover: var(--ds-field-border-hover);
+  --color-field-border-invalid: var(--ds-field-border-invalid);
+  --color-surface-floating: var(--ds-color-surface-floating);
+  --color-surface-hover: var(--ds-color-surface-hover);
 }
 
 [data-ds-scheme="dark"],
@@ -545,9 +557,21 @@
   --shadow-xl: var(--ds-ref-shadow-xl);
   --shadow-2xl: var(--ds-ref-shadow-2xl);
   --focus-ring-color: var(--ds-focus-ring-color);
+  --color-control-hover-bg: var(--ds-control-hover-bg);
+  --color-control-active-bg: var(--ds-control-active-bg);
+  --color-control-secondary-bg: var(--ds-control-neutral-bg);
+  --color-menu-bg: var(--ds-menu-bg);
+  --color-menu-item-hover-bg: var(--ds-menu-item-hover-bg);
+  --color-overlay: var(--ds-color-scrim);
+  --color-skeleton: var(--ds-color-skeleton);
+  --color-skeleton-sheen: var(--ds-color-skeleton-sheen);
   --color-fg-on-warning: var(--ds-color-feedback-warning-solid-fg);
   --color-fg-on-info: var(--ds-color-feedback-info-solid-fg);
+  --color-field-border: var(--ds-field-border);
+  --color-field-border-hover: var(--ds-field-border-hover);
   --shadow-overlay: var(--ds-elevation-overlay);
+  --color-surface-floating: var(--ds-color-surface-floating);
+  --color-surface-hover: var(--ds-color-surface-hover);
 }
 
 [data-ds-brand="pro"],

package/dist/css/shadcn.css

@@ -47,7 +47,7 @@
  *   --app-warning-foreground        var(--ds-color-feedback-warning-solid-fg)
  *   --app-info-foreground           var(--ds-color-feedback-info-solid-fg)
  *   --app-border                    var(--ds-color-border)
- *   --app-input                     var(--ds-color-border-strong)
+ *   --app-input                     var(--ds-field-border)
  *   --app-input-background          var(--ds-color-surface)
  *   --app-switch-background         var(--ds-color-canvas-sunken-strong)
  *   --app-ring                      var(--ds-color-border-focus)
@@ -122,7 +122,7 @@
 
   /* Lines, controls and focus. */
   --color-border: var(--app-border, var(--ds-color-border));
-  --color-input: var(--app-input, var(--ds-color-border-strong));
+  --color-input: var(--app-input, var(--ds-field-border));
   --color-input-background: var(--app-input-background, var(--ds-color-surface));
   --color-switch-background: var(--app-switch-background, var(--ds-color-canvas-sunken-strong));
   --color-ring: var(--app-ring, var(--ds-color-border-focus));

package/dist/css/tailwind.css

@@ -236,6 +236,15 @@
   --color-fg-on-warning: var(--ds-color-feedback-warning-solid-fg);
   --color-fg-on-info: var(--ds-color-feedback-info-solid-fg);
   --shadow-focus-ring-field: var(--ds-shadow-focus-ring-field);
+  --color-skeleton: var(--ds-color-skeleton);
+  --color-skeleton-sheen: var(--ds-color-skeleton-sheen);
+  --animate-skeleton-shimmer: var(--ds-animate-skeleton-shimmer);
+  --animate-spinner: var(--ds-animate-spinner);
+  --color-field-border: var(--ds-field-border);
+  --color-field-border-hover: var(--ds-field-border-hover);
+  --color-field-border-invalid: var(--ds-field-border-invalid);
+  --color-surface-floating: var(--ds-color-surface-floating);
+  --color-surface-hover: var(--ds-color-surface-hover);
 
   /* The namespaced role names of target architecture §9. */
   --color-canvas: var(--ds-color-canvas);

package/dist/css/tokens.css

@@ -96,9 +96,9 @@
   --ds-color-feedback-success-solid-fg: #ffffff;
   --ds-selection-fg: var(--ds-color-action-accent-fg);
   --ds-color-content-disabled: #a7a7ac;
-  --ds-color-state-disabled-bg: #f3f3f1;
-  --ds-color-state-hover: rgba(10, 10, 10, 0.03);
-  --ds-color-state-active: rgba(10, 10, 10, 0.05);
+  --ds-color-state-disabled-bg: #f1f2f6;
+  --ds-color-state-hover: rgba(16, 20, 36, 0.04);
+  --ds-color-state-active: rgba(16, 20, 36, 0.07);
   --ds-control-bg: transparent;
   --ds-control-fg: var(--ds-color-content-secondary);
   --ds-control-muted-fg: var(--ds-color-content-muted);
@@ -161,15 +161,15 @@
   --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
   --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
   --ds-shadow-focus-ring: 0 0 0 2px var(--ds-color-surface), 0 0 0 4px var(--ds-focus-ring-border);
-  --ds-shadow-quiet: 0 1px 2px rgba(16, 20, 36, 0.05);
-  --ds-shadow-card: 0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08);
-  --ds-shadow-pop: 0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14);
-  --ds-ref-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
-  --ds-ref-shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
-  --ds-ref-shadow-md: 0 4px 8px -2px rgba(10, 10, 10, 0.08), 0 2px 4px -2px rgba(10, 10, 10, 0.05);
-  --ds-ref-shadow-lg: 0 12px 24px -8px rgba(10, 10, 10, 0.12), 0 4px 8px -4px rgba(10, 10, 10, 0.06);
-  --ds-ref-shadow-xl: 0 20px 40px -12px rgba(10, 10, 10, 0.16), 0 8px 16px -8px rgba(10, 10, 10, 0.08);
-  --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(10, 10, 10, 0.2), 0 12px 24px -12px rgba(10, 10, 10, 0.1);
+  --ds-shadow-quiet: 0 1px 1px rgba(16, 20, 36, 0.03), 0 1px 3px rgba(16, 20, 36, 0.05);
+  --ds-shadow-card: 0 1px 2px rgba(16, 20, 36, 0.04), 0 2px 4px -2px rgba(16, 20, 36, 0.04), 0 8px 16px -6px rgba(16, 20, 36, 0.08);
+  --ds-shadow-pop: 0 0 0 1px rgba(16, 20, 36, 0.04), 0 2px 4px -1px rgba(16, 20, 36, 0.05), 0 6px 12px -3px rgba(16, 20, 36, 0.07), 0 16px 32px -8px rgba(16, 20, 36, 0.12);
+  --ds-ref-shadow-xs: 0 1px 2px rgba(16, 20, 36, 0.05);
+  --ds-ref-shadow-sm: 0 1px 3px rgba(16, 20, 36, 0.07), 0 1px 2px rgba(16, 20, 36, 0.04);
+  --ds-ref-shadow-md: 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 6px 14px -4px rgba(16, 20, 36, 0.1);
+  --ds-ref-shadow-lg: 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 24px -6px rgba(16, 20, 36, 0.14);
+  --ds-ref-shadow-xl: 0 2px 6px -2px rgba(16, 20, 36, 0.07), 0 20px 40px -10px rgba(16, 20, 36, 0.2);
+  --ds-ref-shadow-2xl: 0 2px 8px -2px rgba(16, 20, 36, 0.08), 0 32px 64px -16px rgba(16, 20, 36, 0.26);
   --ds-font-display: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
   --ds-font-body: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
   --ds-font-mono: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
@@ -183,7 +183,7 @@
   --ds-radius-surface: 12px;
   --ds-radius-badge: 4px;
   --ds-radius-full: 9999px;
-  --ds-ref-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-ref-ease-enter: cubic-bezier(0.25, 1, 0.5, 1);
   --ds-ref-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
   --ds-ref-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
   --ds-ref-ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
@@ -198,16 +198,16 @@
   --ds-motion-duration-spatial: var(--ds-ref-duration-slow);
   --ds-motion-duration-deliberate: var(--ds-ref-duration-slower);
   --ds-motion-ease-enter: var(--ds-ref-ease-enter);
-  --ds-motion-ease-exit: var(--ds-ref-ease-exit);
+  --ds-motion-ease-exit: var(--ds-ref-ease-enter);
   --ds-motion-ease-move: var(--ds-ref-ease-standard);
   --ds-layout-shell-sidebar-width: 200px;
   --ds-layout-shell-sidebar-rail-width: 56px;
   --ds-layout-shell-header-height: 56px;
   --ds-layout-content-padding: 32px;
-  --ds-animate-accordion-down: accordion-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ds-animate-accordion-up: accordion-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ds-animate-collapsible-down: collapsible-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ds-animate-collapsible-up: collapsible-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-animate-accordion-down: accordion-down var(--ds-motion-duration-overlay) var(--ds-motion-ease-enter);
+  --ds-animate-accordion-up: accordion-up var(--ds-motion-duration-overlay) var(--ds-motion-ease-enter);
+  --ds-animate-collapsible-down: collapsible-down var(--ds-motion-duration-overlay) var(--ds-motion-ease-enter);
+  --ds-animate-collapsible-up: collapsible-up var(--ds-motion-duration-overlay) var(--ds-motion-ease-enter);
   --ds-z-base: 0;
   --ds-z-sticky: 100;
   --ds-z-overlay: 200;
@@ -220,8 +220,9 @@
   --ds-color-feedback-info-fg: var(--ds-color-action-accent-bg-strong);
   --ds-compat-color-brand-soft: #f4f0fe;
   --ds-compat-color-brand-soft-foreground: #4925c9;
+  --ds-compat-color-input: var(--ds-field-border);
   --ds-color-border-focus: var(--ds-color-action-accent-bg);
-  --ds-color-scrim: rgba(10, 10, 10, 0.4);
+  --ds-color-scrim: rgba(16, 20, 36, 0.36);
   --ds-compat-color-green-dark: #196832;
   --ds-color-content-link: var(--ds-color-action-accent-bg);
   --ds-compat-radius-md: 5px;
@@ -256,16 +257,16 @@
   --ds-text-label--letter-spacing: 0em;
   --ds-text-label--font-weight: 500;
   --ds-text-helper: 12px;
-  --ds-text-helper--line-height: 1.25;
-  --ds-text-helper--letter-spacing: 0em;
+  --ds-text-helper--line-height: 1.35;
+  --ds-text-helper--letter-spacing: 0.005em;
   --ds-text-helper--font-weight: 400;
   --ds-text-caption: 11px;
-  --ds-text-caption--line-height: 1.55;
-  --ds-text-caption--letter-spacing: 0em;
+  --ds-text-caption--line-height: 1.4;
+  --ds-text-caption--letter-spacing: 0.01em;
   --ds-text-caption--font-weight: 400;
   --ds-text-micro: 10px;
-  --ds-text-micro--line-height: 1.55;
-  --ds-text-micro--letter-spacing: 0em;
+  --ds-text-micro--line-height: 1.3;
+  --ds-text-micro--letter-spacing: 0.02em;
   --ds-text-micro--font-weight: 500;
   --ds-text-overline: 11px;
   --ds-text-overline--line-height: 1.55;
@@ -319,8 +320,8 @@
   --ds-elevation-flat: var(--ds-shadow-quiet);
   --ds-elevation-raised: var(--ds-shadow-card);
   --ds-elevation-floating: var(--ds-shadow-pop);
-  --ds-elevation-overlay: 0 2px 6px -2px rgba(16, 20, 36, 0.08), 0 28px 64px -16px rgba(16, 20, 36, 0.28);
-  --ds-motion-duration-overlay-exit: var(--ds-ref-duration-fast);
+  --ds-elevation-overlay: 0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 6px -2px rgba(16, 20, 36, 0.06), 0 12px 24px -8px rgba(16, 20, 36, 0.1), 0 32px 64px -16px rgba(16, 20, 36, 0.22);
+  --ds-motion-duration-overlay-exit: 120ms;
   --ds-motion-presence-name: initial;
   --ds-control-height-xs: 28px;
   --ds-control-height-sm: 32px;
@@ -382,6 +383,18 @@
   --ds-avatar-size-md: 36px;
   --ds-avatar-size-lg: 48px;
   --ds-avatar-size-xl: 64px;
+  --ds-motion-duration-floating: 150ms;
+  --ds-motion-ease-emphasized: var(--ds-ref-ease-emphasized);
+  --ds-motion-ease-standard: var(--ds-ref-ease-standard);
+  --ds-color-skeleton: var(--ds-color-canvas-sunken-strong);
+  --ds-color-skeleton-sheen: rgba(255, 255, 255, 0.35);
+  --ds-animate-skeleton-shimmer: skeleton-shimmer 1.6s linear infinite;
+  --ds-animate-spinner: spin 0.8s linear infinite;
+  --ds-field-border: #c5ccda;
+  --ds-field-border-hover: var(--ds-color-content-faint);
+  --ds-field-border-invalid: color-mix(in srgb, var(--ds-color-feedback-danger-fg) 60%, var(--ds-color-feedback-danger-border));
+  --ds-color-surface-floating: #ffffff;
+  --ds-color-surface-hover: var(--ds-color-canvas-sunken);
 }
 
 [data-ds-scheme="dark"],
@@ -397,9 +410,9 @@
   --ds-color-content-muted: #a7a7ac;
   --ds-color-content-subtle: #9a9aa0;
   --ds-color-content-faint: #83838a;
-  --ds-color-border: rgba(255, 255, 255, 0.08);
-  --ds-color-border-subtle: rgba(255, 255, 255, 0.05);
-  --ds-color-border-strong: rgba(255, 255, 255, 0.14);
+  --ds-color-border: rgba(255, 255, 255, 0.1);
+  --ds-color-border-subtle: rgba(255, 255, 255, 0.06);
+  --ds-color-border-strong: rgba(255, 255, 255, 0.18);
   --ds-color-action-accent-bg: #a78bff;
   --ds-color-action-accent-bg-strong: #8b6cf5;
   --ds-color-action-accent-subtle-bg: rgba(108, 66, 248, 0.16);
@@ -455,8 +468,8 @@
   --ds-ref-brand-tax-on-fg: #0a0a0b;
   --ds-color-content-disabled: #6b6b72;
   --ds-color-state-disabled-bg: #1f1f23;
-  --ds-color-state-hover: rgba(255, 255, 255, 0.04);
-  --ds-color-state-active: rgba(255, 255, 255, 0.08);
+  --ds-color-state-hover: rgba(255, 255, 255, 0.06);
+  --ds-color-state-active: rgba(255, 255, 255, 0.1);
   --ds-color-action-accent-fg: #0a0a0b;
   --ds-ref-brand-pro-on-fg: #0a0a0b;
   --ds-color-feedback-danger-solid-fg: #0a0a0b;
@@ -493,16 +506,28 @@
   --ds-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
   --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   --ds-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 14px 32px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  --ds-ref-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
-  --ds-ref-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
-  --ds-ref-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
-  --ds-ref-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
-  --ds-ref-shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.5);
-  --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
+  --ds-ref-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ds-ref-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
+  --ds-ref-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 6px 14px -4px rgba(0, 0, 0, 0.6);
+  --ds-ref-shadow-lg: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 12px 24px -6px rgba(0, 0, 0, 0.65);
+  --ds-ref-shadow-xl: 0 2px 6px -2px rgba(0, 0, 0, 0.55), 0 20px 40px -10px rgba(0, 0, 0, 0.7);
+  --ds-ref-shadow-2xl: 0 2px 8px -2px rgba(0, 0, 0, 0.6), 0 32px 64px -16px rgba(0, 0, 0, 0.75);
   --ds-focus-ring-color: color-mix(in srgb, var(--ds-color-action-brand-bg) 40%, transparent);
+  --ds-control-hover-bg: rgba(255, 255, 255, 0.06);
+  --ds-control-active-bg: rgba(255, 255, 255, 0.1);
+  --ds-control-neutral-bg: rgba(255, 255, 255, 0.06);
+  --ds-menu-bg: var(--ds-color-surface-floating);
+  --ds-menu-item-hover-bg: rgba(255, 255, 255, 0.07);
+  --ds-color-scrim: rgba(0, 0, 0, 0.6);
+  --ds-color-skeleton: rgba(255, 255, 255, 0.08);
+  --ds-color-skeleton-sheen: rgba(255, 255, 255, 0.06);
   --ds-color-feedback-warning-solid-fg: #0a0a0b;
   --ds-color-feedback-info-solid-fg: #0a0a0b;
+  --ds-field-border: rgba(255, 255, 255, 0.18);
+  --ds-field-border-hover: rgba(255, 255, 255, 0.28);
   --ds-elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 28px 64px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --ds-color-surface-floating: #1c1c21;
+  --ds-color-surface-hover: rgba(255, 255, 255, 0.05);
 }
 
 [data-ds-brand="pro"],
@@ -631,5 +656,6 @@
     --ds-motion-duration-deliberate: 0ms;
     --ds-motion-duration-overlay-exit: 0ms;
     --ds-motion-presence-name: none;
+    --ds-motion-duration-floating: 0ms;
   }
 }