@assure-one/design-system 1.32.0 → 1.33.0

package/dist/css/tailwind.css

@@ -172,6 +172,70 @@
   --animate-accordion-up: var(--ds-animate-accordion-up);
   --animate-collapsible-down: var(--ds-animate-collapsible-down);
   --animate-collapsible-up: var(--ds-animate-collapsible-up);
+  --text-display: var(--ds-text-display);
+  --text-display--line-height: var(--ds-text-display--line-height);
+  --text-display--letter-spacing: var(--ds-text-display--letter-spacing);
+  --text-display--font-weight: var(--ds-text-display--font-weight);
+  --text-title-page: var(--ds-text-title-page);
+  --text-title-page--line-height: var(--ds-text-title-page--line-height);
+  --text-title-page--letter-spacing: var(--ds-text-title-page--letter-spacing);
+  --text-title-page--font-weight: var(--ds-text-title-page--font-weight);
+  --text-title-section: var(--ds-text-title-section);
+  --text-title-section--line-height: var(--ds-text-title-section--line-height);
+  --text-title-section--letter-spacing: var(--ds-text-title-section--letter-spacing);
+  --text-title-section--font-weight: var(--ds-text-title-section--font-weight);
+  --text-title-sub: var(--ds-text-title-sub);
+  --text-title-sub--line-height: var(--ds-text-title-sub--line-height);
+  --text-title-sub--letter-spacing: var(--ds-text-title-sub--letter-spacing);
+  --text-title-sub--font-weight: var(--ds-text-title-sub--font-weight);
+  --text-body: var(--ds-text-body);
+  --text-body--line-height: var(--ds-text-body--line-height);
+  --text-body--letter-spacing: var(--ds-text-body--letter-spacing);
+  --text-body--font-weight: var(--ds-text-body--font-weight);
+  --text-body-sm: var(--ds-text-body-sm);
+  --text-body-sm--line-height: var(--ds-text-body-sm--line-height);
+  --text-body-sm--letter-spacing: var(--ds-text-body-sm--letter-spacing);
+  --text-body-sm--font-weight: var(--ds-text-body-sm--font-weight);
+  --text-label: var(--ds-text-label);
+  --text-label--line-height: var(--ds-text-label--line-height);
+  --text-label--letter-spacing: var(--ds-text-label--letter-spacing);
+  --text-label--font-weight: var(--ds-text-label--font-weight);
+  --text-helper: var(--ds-text-helper);
+  --text-helper--line-height: var(--ds-text-helper--line-height);
+  --text-helper--letter-spacing: var(--ds-text-helper--letter-spacing);
+  --text-helper--font-weight: var(--ds-text-helper--font-weight);
+  --text-caption: var(--ds-text-caption);
+  --text-caption--line-height: var(--ds-text-caption--line-height);
+  --text-caption--letter-spacing: var(--ds-text-caption--letter-spacing);
+  --text-caption--font-weight: var(--ds-text-caption--font-weight);
+  --text-micro: var(--ds-text-micro);
+  --text-micro--line-height: var(--ds-text-micro--line-height);
+  --text-micro--letter-spacing: var(--ds-text-micro--letter-spacing);
+  --text-micro--font-weight: var(--ds-text-micro--font-weight);
+  --text-overline: var(--ds-text-overline);
+  --text-overline--line-height: var(--ds-text-overline--line-height);
+  --text-overline--letter-spacing: var(--ds-text-overline--letter-spacing);
+  --text-overline--font-weight: var(--ds-text-overline--font-weight);
+  --text-code: var(--ds-text-code);
+  --text-code--line-height: var(--ds-text-code--line-height);
+  --text-code--letter-spacing: var(--ds-text-code--letter-spacing);
+  --text-code--font-weight: var(--ds-text-code--font-weight);
+  --radius-ref-xs: var(--ds-ref-radius-xs);
+  --radius-ref-sm: var(--ds-ref-radius-sm);
+  --radius-ref-md: var(--ds-ref-radius-md);
+  --radius-ref-lg: var(--ds-ref-radius-lg);
+  --radius-ref-xl: var(--ds-ref-radius-xl);
+  --radius-control: var(--ds-radius-control);
+  --radius-surface: var(--ds-radius-surface);
+  --radius-surface-sm: var(--ds-radius-surface-sm);
+  --radius-badge: var(--ds-radius-badge);
+  --shadow-flat: var(--ds-elevation-flat);
+  --shadow-raised: var(--ds-elevation-raised);
+  --shadow-floating: var(--ds-elevation-floating);
+  --shadow-overlay: var(--ds-elevation-overlay);
+  --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);
 
   /* The namespaced role names of target architecture §9. */
   --color-canvas: var(--ds-color-canvas);
@@ -226,8 +290,7 @@
   --color-feedback-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
   --color-feedback-danger-bg: var(--ds-color-feedback-danger-bg);
   --color-feedback-danger-border: var(--ds-color-feedback-danger-border);
-  --radius-control: var(--ds-radius-control);
   --radius-chip: var(--ds-radius-chip);
-  --radius-surface: var(--ds-radius-surface);
-  --radius-badge: var(--ds-radius-badge);
+  --color-feedback-warning-solid-fg: var(--ds-color-feedback-warning-solid-fg);
+  --color-feedback-info-solid-fg: var(--ds-color-feedback-info-solid-fg);
 }

package/dist/css/tokens.css

@@ -145,7 +145,7 @@
   --ds-color-priority-medium: #7642d6;
   --ds-color-priority-high: #d9820a;
   --ds-color-priority-urgent: var(--ds-color-feedback-danger-fg);
-  --ds-focus-ring-color: var(--ds-ref-brand-pro-ring);
+  --ds-focus-ring-color: color-mix(in srgb, var(--ds-color-action-brand-bg) 24%, transparent);
   --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
   --ds-color-chart-1: #4f37c2;
   --ds-color-chart-2: #6549e5;
@@ -160,10 +160,10 @@
   --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
   --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-focus-ring-color);
-  --ds-shadow-quiet: 0 1px 2px rgba(10, 10, 10, 0.03);
-  --ds-shadow-card: 0 12px 28px -16px rgba(10, 10, 10, 0.18), 0 1px 2px rgba(10, 10, 10, 0.04);
-  --ds-shadow-pop: 0 30px 80px -30px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.06);
+  --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);
@@ -215,8 +215,8 @@
   --ds-z-popover: 400;
   --ds-z-toast: 500;
   --ds-z-tooltip: 600;
-  --ds-compat-color-destructive-foreground: #ffffff;
-  --ds-compat-color-success-foreground: #ffffff;
+  --ds-compat-color-destructive-foreground: var(--ds-color-feedback-danger-solid-fg);
+  --ds-compat-color-success-foreground: var(--ds-color-feedback-success-solid-fg);
   --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;
@@ -227,6 +227,156 @@
   --ds-compat-radius-md: 5px;
   --ds-compat-radius-lg: 8px;
   --ds-compat-radius-xl: 12px;
+  --ds-text-display: clamp(28px, 3.4vw, 38px);
+  --ds-text-display--line-height: 1.06;
+  --ds-text-display--letter-spacing: -0.028em;
+  --ds-text-display--font-weight: 500;
+  --ds-text-title-page: 26px;
+  --ds-text-title-page--line-height: 1.25;
+  --ds-text-title-page--letter-spacing: -0.025em;
+  --ds-text-title-page--font-weight: 500;
+  --ds-text-title-section: 16px;
+  --ds-text-title-section--line-height: 1.25;
+  --ds-text-title-section--letter-spacing: -0.022em;
+  --ds-text-title-section--font-weight: 500;
+  --ds-text-title-sub: 13px;
+  --ds-text-title-sub--line-height: 1.3;
+  --ds-text-title-sub--letter-spacing: -0.022em;
+  --ds-text-title-sub--font-weight: 500;
+  --ds-text-body: 14px;
+  --ds-text-body--line-height: 1.55;
+  --ds-text-body--letter-spacing: 0em;
+  --ds-text-body--font-weight: 400;
+  --ds-text-body-sm: 13px;
+  --ds-text-body-sm--line-height: 1.55;
+  --ds-text-body-sm--letter-spacing: 0em;
+  --ds-text-body-sm--font-weight: 400;
+  --ds-text-label: 13px;
+  --ds-text-label--line-height: 1;
+  --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--font-weight: 400;
+  --ds-text-caption: 11px;
+  --ds-text-caption--line-height: 1.55;
+  --ds-text-caption--letter-spacing: 0em;
+  --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--font-weight: 500;
+  --ds-text-overline: 11px;
+  --ds-text-overline--line-height: 1.55;
+  --ds-text-overline--letter-spacing: 0.14em;
+  --ds-text-overline--font-weight: 400;
+  --ds-text-code: 11px;
+  --ds-text-code--line-height: 1.55;
+  --ds-text-code--letter-spacing: 0em;
+  --ds-text-code--font-weight: 400;
+  --ds-ref-space-0: 0px;
+  --ds-ref-space-0-5: 2px;
+  --ds-ref-space-1: 4px;
+  --ds-ref-space-1-5: 6px;
+  --ds-ref-space-2: 8px;
+  --ds-ref-space-2-5: 10px;
+  --ds-ref-space-3: 12px;
+  --ds-ref-space-4: 16px;
+  --ds-ref-space-5: 20px;
+  --ds-ref-space-6: 24px;
+  --ds-ref-space-8: 32px;
+  --ds-ref-space-10: 40px;
+  --ds-ref-space-12: 48px;
+  --ds-ref-space-16: 64px;
+  --ds-ref-space-20: 80px;
+  --ds-ref-space-24: 96px;
+  --ds-surface-padding-sm: var(--ds-ref-space-4);
+  --ds-surface-padding-md: var(--ds-ref-space-5);
+  --ds-surface-padding-lg: var(--ds-ref-space-6);
+  --ds-stack-gap-xs: var(--ds-ref-space-1);
+  --ds-stack-gap-sm: var(--ds-ref-space-1-5);
+  --ds-stack-gap-md: var(--ds-ref-space-2);
+  --ds-stack-gap-lg: var(--ds-ref-space-3);
+  --ds-stack-gap-xl: var(--ds-ref-space-4);
+  --ds-layout-section-gap: var(--ds-ref-space-4);
+  --ds-layout-page-gap: var(--ds-ref-space-6);
+  --ds-icon-size-xs: 12px;
+  --ds-icon-size-sm: 14px;
+  --ds-icon-size-md: 16px;
+  --ds-icon-size-lg: 20px;
+  --ds-ref-breakpoint-sm: 40rem;
+  --ds-ref-breakpoint-md: 48rem;
+  --ds-ref-breakpoint-lg: 64rem;
+  --ds-ref-breakpoint-xl: 80rem;
+  --ds-ref-breakpoint-2xl: 96rem;
+  --ds-ref-radius-xs: 4px;
+  --ds-ref-radius-sm: 5px;
+  --ds-ref-radius-md: 7px;
+  --ds-ref-radius-lg: 8px;
+  --ds-ref-radius-xl: 12px;
+  --ds-radius-surface-sm: var(--ds-ref-radius-lg);
+  --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-motion-presence-name: initial;
+  --ds-control-height-xs: 28px;
+  --ds-control-height-sm: 32px;
+  --ds-control-height-md: 36px;
+  --ds-control-height-lg: 40px;
+  --ds-control-height-xl: 48px;
+  --ds-control-padding-x-xs: 8px;
+  --ds-control-padding-x-sm: 12px;
+  --ds-control-padding-x-md: 12px;
+  --ds-control-padding-x-lg: 16px;
+  --ds-control-padding-x-xl: 24px;
+  --ds-control-gap-xs: 4px;
+  --ds-control-gap-sm: 6px;
+  --ds-control-gap-md: 8px;
+  --ds-control-gap-lg: 8px;
+  --ds-control-gap-xl: 8px;
+  --ds-control-font-size-xs: 12px;
+  --ds-control-font-size-sm: 13px;
+  --ds-control-font-size-md: 13px;
+  --ds-control-font-size-lg: 14px;
+  --ds-control-font-size-xl: 16px;
+  --ds-control-icon-xs: 14px;
+  --ds-control-icon-sm: 14px;
+  --ds-control-icon-md: 16px;
+  --ds-control-icon-lg: 16px;
+  --ds-control-icon-xl: 20px;
+  --ds-button-height-sm: 32px;
+  --ds-button-height-md: 40px;
+  --ds-button-height-lg: 48px;
+  --ds-button-height-icon-xs: 24px;
+  --ds-button-height-icon-sm: 28px;
+  --ds-button-height-icon: 40px;
+  --ds-input-height-sm: 32px;
+  --ds-input-height-md: 36px;
+  --ds-input-height-lg: 44px;
+  --ds-search-input-height-sm: 32px;
+  --ds-search-input-height-md: 36px;
+  --ds-search-input-height-lg: 44px;
+  --ds-textarea-min-height-sm: 64px;
+  --ds-textarea-min-height-md: 80px;
+  --ds-textarea-min-height-lg: 96px;
+  --ds-multi-filter-pill-height-sm: 32px;
+  --ds-multi-filter-pill-height-md: 36px;
+  --ds-multi-filter-pill-height-lg: 40px;
+  --ds-filter-chip-height-sm: 32px;
+  --ds-filter-chip-height-md: 36px;
+  --ds-filter-chip-height-lg: 40px;
+  --ds-select-height: 36px;
+  --ds-search-select-height: 36px;
+  --ds-date-picker-height: 36px;
+  --ds-date-range-picker-height: 36px;
+  --ds-phone-country-input-height: 36px;
+  --ds-pagination-height: 28px;
+  --ds-color-feedback-warning-solid-fg: #ffffff;
+  --ds-color-feedback-info-solid-fg: #ffffff;
+  --ds-shadow-focus-ring-field: 0 0 0 3px var(--ds-focus-ring-color);
 }
 
 [data-ds-scheme="dark"],
@@ -335,15 +485,19 @@
   --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
   --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
   --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
-  --ds-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --ds-shadow-card: 0 12px 28px -16px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
-  --ds-shadow-pop: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
+  --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-focus-ring-color: color-mix(in srgb, var(--ds-color-action-brand-bg) 40%, transparent);
+  --ds-color-feedback-warning-solid-fg: #0a0a0b;
+  --ds-color-feedback-info-solid-fg: #0a0a0b;
+  --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);
 }
 
 [data-ds-brand="pro"],
@@ -365,7 +519,6 @@
   --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-pro-bg);
   --ds-color-action-accent-ring: var(--ds-ref-brand-pro-ring);
   --ds-color-action-accent-fg: var(--ds-ref-brand-pro-on-fg);
-  --ds-focus-ring-color: var(--ds-ref-brand-pro-ring);
   --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
 }
 
@@ -388,7 +541,6 @@
   --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-audit-bg);
   --ds-color-action-accent-ring: var(--ds-ref-brand-audit-ring);
   --ds-color-action-accent-fg: var(--ds-ref-brand-audit-on-fg);
-  --ds-focus-ring-color: var(--ds-ref-brand-audit-ring);
   --ds-focus-ring-border: var(--ds-ref-brand-audit-fg);
 }
 
@@ -411,7 +563,6 @@
   --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-books-bg);
   --ds-color-action-accent-ring: var(--ds-ref-brand-books-ring);
   --ds-color-action-accent-fg: var(--ds-ref-brand-books-on-fg);
-  --ds-focus-ring-color: var(--ds-ref-brand-books-ring);
   --ds-focus-ring-border: var(--ds-ref-brand-books-fg);
 }
 
@@ -434,6 +585,46 @@
   --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-tax-bg);
   --ds-color-action-accent-ring: var(--ds-ref-brand-tax-ring);
   --ds-color-action-accent-fg: var(--ds-ref-brand-tax-on-fg);
-  --ds-focus-ring-color: var(--ds-ref-brand-tax-ring);
   --ds-focus-ring-border: var(--ds-ref-brand-tax-fg);
 }
+
+[data-ds-density="compact"] {
+  --ds-control-height-sm: 28px;
+  --ds-control-height-md: 32px;
+  --ds-control-height-lg: 36px;
+  --ds-control-height-xl: 40px;
+  --ds-control-padding-x-sm: 8px;
+  --ds-control-padding-x-md: 12px;
+  --ds-control-padding-x-lg: 12px;
+  --ds-control-padding-x-xl: 16px;
+  --ds-control-gap-sm: 4px;
+  --ds-control-gap-md: 6px;
+  --ds-control-gap-lg: 8px;
+  --ds-control-gap-xl: 8px;
+  --ds-control-font-size-sm: 12px;
+  --ds-control-font-size-md: 13px;
+  --ds-control-font-size-lg: 13px;
+  --ds-control-font-size-xl: 14px;
+  --ds-control-icon-sm: 14px;
+  --ds-control-icon-md: 14px;
+  --ds-control-icon-lg: 16px;
+  --ds-control-icon-xl: 16px;
+}
+
+/* Reduced motion, once, at the token level (target architecture §20 rule 4).
+ * The durations collapse; presence does not become short, it becomes
+ * `none` — ADR-012 decision 4, because a 0.01ms animation still fires
+ * animationstart/animationend and delays a Radix unmount by 22–48 ms.
+ * This block is part of the namespaced mode only; dist/styles.css keeps
+ * the global prefers-reduced-motion rule it ships today. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ds-motion-duration-press: 0ms;
+    --ds-motion-duration-feedback: 0ms;
+    --ds-motion-duration-overlay: 0ms;
+    --ds-motion-duration-spatial: 0ms;
+    --ds-motion-duration-deliberate: 0ms;
+    --ds-motion-duration-overlay-exit: 0ms;
+    --ds-motion-presence-name: none;
+  }
+}