@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

package/src/styles/theme.css

@@ -1,341 +1,341 @@
-/*
- * ArcFusion Design Tokens
- * Source of truth: ArcFusion Brand Toolkit 2026
- *
- * Consumers import this AFTER Tailwind:
- *
- *   @import "tailwindcss";
- *   @import "@arcfusionz/arc-primitive-ui/theme.css";
- *
- * Two tiers:
- *   1. Primitive scales   — raw color ramps & font stacks
- *   2. Semantic aliases   — role-based tokens components use
- *
- * `static` emits every token as a CSS variable even when no utility uses
- * it yet, so consumers (and the Storybook palette docs) can read any token
- * at runtime via var(--color-*).
- *
- * Hexes marked [brand] are locked by the brand book; the remaining steps
- * extend them into full ramps.
- */
-
-@theme static {
-  /* ---------------------------------------------------------------------
-   * Typography
-   * Headline: Poppins ("friendly but geometric") · Body/UI: Inter
-   * Formal documents: Noto Serif · Thai pairing: Noto Sans Thai / Sarabun
-   * Note: the brand does not use a monospace family; Tailwind's default
-   * mono token is removed on purpose.
-   * ------------------------------------------------------------------- */
-  --font-sans: "Inter", "Sarabun", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Poppins", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
-  --font-serif: "Noto Serif", Georgia, serif;
-  --font-mono: initial;
-
-  /* ---------------------------------------------------------------------
-   * Radius
-   * The system uses a single 6px radius. Tailwind's default radius scale
-   * is removed so `rounded-md` is the only sized option (`rounded-none`
-   * and `rounded-full` stay available for structural cases).
-   * ------------------------------------------------------------------- */
-  --radius-*: initial;
-  --radius-md: 6px;
-
-  /* ---------------------------------------------------------------------
-   * Motion
-   * AI Loader uses an asymmetric 2.4s ambient rhythm. Processing combines a
-   * variable-speed 3.6s rotation, a strong whole-mark pulse, and a monochrome
-   * currentColor fill. Its satellites fade at peak speed and return as the
-   * rotation eases. The four-point path itself never morphs. Skeleton's wave
-   * crosses a placeholder in 1.6s and rests off-canvas when motion is reduced.
-   * Progress sweeps its indeterminate segment across the track in 1.8s;
-   * reduced motion swaps the sweep for Tailwind's opacity pulse so activity
-   * still reads without positional movement.
-   * `motion-safe` leaves a still frame for reduced-motion users.
-   * ------------------------------------------------------------------- */
-  --animate-ai-loader-rotate: ai-loader-rotate 3.6s infinite;
-  --animate-ai-loader-processing-pulse: ai-loader-processing-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 3.6s linear infinite;
-  --animate-ai-loader-core: ai-loader-core 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-facet: ai-loader-facet 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-spark: ai-loader-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-text-shimmer: ai-loader-text-shimmer 2s linear infinite;
-  --animate-skeleton-wave: skeleton-wave 1.6s ease-in-out infinite;
-  --animate-progress-indeterminate: progress-indeterminate 1.8s ease-in-out infinite;
-
-  /* ---------------------------------------------------------------------
-   * Primary — Electric Blue (Hero Brand B / Functional actions)
-   * ------------------------------------------------------------------- */
-  --color-primary-50: #f0f5fe;
-  --color-primary-100: #dfeafd;
-  --color-primary-200: #c2d4f9; /* [brand] soft wash — zebra rows, secondary buttons */
-  --color-primary-300: #9bbaf8;
-  --color-primary-400: #699ef7;
-  --color-primary-500: #3b82f6; /* [brand] accessible blue — links, active on dark */
-  --color-primary-600: #1848f3; /* [brand] Electric Blue — primary actions */
-  --color-primary-700: #143ad4;
-  --color-primary-800: #1530ab;
-  --color-primary-900: #172c84;
-  --color-primary-950: #0d1a52;
-
-  /* ---------------------------------------------------------------------
-   * Navy — Hero Brand A (marketing headers, key visuals, dark surfaces)
-   * ------------------------------------------------------------------- */
-  --color-navy-50: #eeeefb;
-  --color-navy-100: #dedef8;
-  --color-navy-200: #c3c3f2;
-  --color-navy-300: #9f9ee9;
-  --color-navy-400: #7b77de;
-  --color-navy-500: #5d54d1;
-  --color-navy-600: #4b3dbf;
-  --color-navy-700: #3c2e9f;
-  --color-navy-800: #2f2280;
-  --color-navy-900: #1d1168;
-  --color-navy-950: #040067; /* [brand] Deep Navy */
-
-  /* ---------------------------------------------------------------------
-   * Slate — The Engineering Grays (blue-tinted; replaces pure black/white)
-   * Brand book defines the scale by name only; hexes extended here.
-   * Slate-50 for table cards · Slate-900 for code blocks.
-   * ------------------------------------------------------------------- */
-  --color-slate-50: #f7f9fc;
-  --color-slate-100: #eff2f8;
-  --color-slate-200: #dee4ef;
-  --color-slate-300: #c3cddf;
-  --color-slate-400: #93a2bd;
-  --color-slate-500: #67789b;
-  --color-slate-600: #4a5878;
-  --color-slate-700: #38445f;
-  --color-slate-800: #253048;
-  --color-slate-900: #111a30;
-  --color-slate-950: #0a101f;
-
-  /* ---------------------------------------------------------------------
-   * Status ramps — brand book shows Success/Error swatches without hexes;
-   * ramps defined here. Warning is an extension for a complete system.
-   * ------------------------------------------------------------------- */
-  --color-success-50: #ebfef2;
-  --color-success-100: #d0fbe0;
-  --color-success-200: #a5f5c6;
-  --color-success-300: #6be9a6;
-  --color-success-400: #30d57f;
-  --color-success-500: #10bf62;
-  --color-success-600: #059b4e;
-  --color-success-700: #077c41;
-  --color-success-800: #0a6236;
-  --color-success-900: #0a502e;
-  --color-success-950: #032d18;
-
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde58a;
-  --color-warning-300: #fcd24d;
-  --color-warning-400: #fabe23;
-  --color-warning-500: #f4a80b;
-  --color-warning-600: #d88406;
-  --color-warning-700: #b36209;
-  --color-warning-800: #914d0e;
-  --color-warning-900: #78400f;
-  --color-warning-950: #452103;
-
-  --color-error-50: #fef2f2;
-  --color-error-100: #fee2e1;
-  --color-error-200: #fec9c8;
-  --color-error-300: #fba3a1;
-  --color-error-400: #f76d6a;
-  --color-error-500: #ee4540;
-  --color-error-600: #db2723;
-  --color-error-700: #b81d19;
-  --color-error-800: #981c19;
-  --color-error-900: #7e1f1d;
-  --color-error-950: #440c0b;
-}
-
-@keyframes skeleton-wave {
-  from {
-    translate: -100% 0;
-  }
-  to {
-    translate: 100% 0;
-  }
-}
-
-/* The indeterminate Progress segment is 40% of its track wide; translate is
-   relative to the segment itself, so -100% rests fully off the left edge and
-   250% (100% / 40% width) exits fully off the right. */
-@keyframes progress-indeterminate {
-  from {
-    translate: -100% 0;
-  }
-  to {
-    translate: 250% 0;
-  }
-}
-
-@keyframes ai-loader-rotate {
-  0% {
-    transform: rotate(0deg);
-    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35);
-  }
-  28% {
-    transform: rotate(60deg);
-    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
-  }
-  58% {
-    transform: rotate(220deg);
-    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
-  }
-  76% {
-    transform: rotate(276deg);
-    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ai-loader-processing-pulse {
-  0%,
-  100% {
-    opacity: 0.82;
-    transform: scale(0.72);
-  }
-  34% {
-    opacity: 1;
-    transform: scale(1.08);
-  }
-  56% {
-    opacity: 0.9;
-    transform: scale(0.86);
-  }
-  78% {
-    opacity: 1;
-    transform: scale(1.04);
-  }
-}
-
-@keyframes ai-loader-processing-satellite {
-  0%,
-  18%,
-  100% {
-    opacity: 1;
-  }
-  28%,
-  38% {
-    opacity: 0;
-  }
-  58% {
-    opacity: 1;
-  }
-}
-
-@keyframes ai-loader-text-shimmer {
-  0% {
-    background-position:
-      100% 50%,
-      0 0;
-  }
-  100% {
-    background-position:
-      0% 50%,
-      0 0;
-  }
-}
-
-@keyframes ai-loader-core {
-  0%,
-  100% {
-    opacity: 0.95;
-    transform: rotate(0deg) scale(1);
-  }
-  26% {
-    opacity: 0.82;
-    transform: rotate(-8deg) scale(0.82);
-  }
-  56% {
-    opacity: 1;
-    transform: rotate(0deg) scale(1);
-  }
-  78% {
-    opacity: 0.92;
-    transform: rotate(9deg) scale(0.9);
-  }
-}
-
-@keyframes ai-loader-facet {
-  0%,
-  100% {
-    opacity: 0.15;
-    transform: rotate(45deg) scale(0.75);
-  }
-  36% {
-    opacity: 0.34;
-    transform: rotate(55deg) scale(0.82);
-  }
-  68% {
-    opacity: 0.12;
-    transform: rotate(36deg) scale(0.58);
-  }
-}
-
-@keyframes ai-loader-spark {
-  0%,
-  100% {
-    opacity: 0.45;
-    transform: scale(1);
-  }
-  20% {
-    opacity: 0.18;
-    transform: scale(0.45);
-  }
-  42% {
-    opacity: 0.95;
-    transform: scale(1);
-  }
-  62% {
-    opacity: 0.28;
-    transform: scale(0.62);
-  }
-}
-
-/* -----------------------------------------------------------------------
- * Semantic tokens — what components actually reference.
- * --------------------------------------------------------------------- */
-@theme static {
-  --color-background: #ffffff; /* [brand] the "Clean Slate" */
-  --color-foreground: var(--color-slate-900);
-
-  --color-surface: var(--color-slate-50);
-  --color-surface-foreground: var(--color-slate-900);
-
-  --color-muted: var(--color-slate-100);
-  --color-muted-foreground: var(--color-slate-500);
-
-  --color-border: var(--color-slate-200);
-  --color-ring: var(--color-primary-600);
-
-  /* Scrim behind modal surfaces (dialogs, drawers). Carries its own alpha so
-     overlays fade the whole layer via opacity without restating the color. */
-  --color-overlay: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
-
-  --color-primary: var(--color-primary-600);
-  --color-primary-foreground: #ffffff;
-
-  --color-secondary: var(--color-primary-200);
-  --color-secondary-foreground: var(--color-navy-950);
-
-  --color-hero: var(--color-navy-950);
-  --color-hero-foreground: #ffffff;
-
-  --color-success: var(--color-success-600);
-  --color-success-foreground: #ffffff;
-
-  --color-warning: var(--color-warning-600);
-  --color-warning-foreground: #ffffff;
-
-  --color-destructive: var(--color-error-600);
-  --color-destructive-foreground: #ffffff;
-
-  --color-info: var(--color-primary-500);
-  --color-info-foreground: #ffffff;
-}
+/*
+ * ArcFusion Design Tokens
+ * Source of truth: ArcFusion Brand Toolkit 2026
+ *
+ * Consumers import this AFTER Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@arcfusionz/arc-primitive-ui/theme.css";
+ *
+ * Two tiers:
+ *   1. Primitive scales   — raw color ramps & font stacks
+ *   2. Semantic aliases   — role-based tokens components use
+ *
+ * `static` emits every token as a CSS variable even when no utility uses
+ * it yet, so consumers (and the Storybook palette docs) can read any token
+ * at runtime via var(--color-*).
+ *
+ * Hexes marked [brand] are locked by the brand book; the remaining steps
+ * extend them into full ramps.
+ */
+
+@theme static {
+  /* ---------------------------------------------------------------------
+   * Typography
+   * Headline: Poppins ("friendly but geometric") · Body/UI: Inter
+   * Formal documents: Noto Serif · Thai pairing: Noto Sans Thai / Sarabun
+   * Note: the brand does not use a monospace family; Tailwind's default
+   * mono token is removed on purpose.
+   * ------------------------------------------------------------------- */
+  --font-sans: "Inter", "Sarabun", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Poppins", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Noto Serif", Georgia, serif;
+  --font-mono: initial;
+
+  /* ---------------------------------------------------------------------
+   * Radius
+   * The system uses a single 6px radius. Tailwind's default radius scale
+   * is removed so `rounded-md` is the only sized option (`rounded-none`
+   * and `rounded-full` stay available for structural cases).
+   * ------------------------------------------------------------------- */
+  --radius-*: initial;
+  --radius-md: 6px;
+
+  /* ---------------------------------------------------------------------
+   * Motion
+   * AI Loader uses an asymmetric 2.4s ambient rhythm. Processing combines a
+   * variable-speed 3.6s rotation, a strong whole-mark pulse, and a monochrome
+   * currentColor fill. Its satellites fade at peak speed and return as the
+   * rotation eases. The four-point path itself never morphs. Skeleton's wave
+   * crosses a placeholder in 1.6s and rests off-canvas when motion is reduced.
+   * Progress sweeps its indeterminate segment across the track in 1.8s;
+   * reduced motion swaps the sweep for Tailwind's opacity pulse so activity
+   * still reads without positional movement.
+   * `motion-safe` leaves a still frame for reduced-motion users.
+   * ------------------------------------------------------------------- */
+  --animate-ai-loader-rotate: ai-loader-rotate 3.6s infinite;
+  --animate-ai-loader-processing-pulse: ai-loader-processing-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 3.6s linear infinite;
+  --animate-ai-loader-core: ai-loader-core 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-facet: ai-loader-facet 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-spark: ai-loader-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-text-shimmer: ai-loader-text-shimmer 2s linear infinite;
+  --animate-skeleton-wave: skeleton-wave 1.6s ease-in-out infinite;
+  --animate-progress-indeterminate: progress-indeterminate 1.8s ease-in-out infinite;
+
+  /* ---------------------------------------------------------------------
+   * Primary — Electric Blue (Hero Brand B / Functional actions)
+   * ------------------------------------------------------------------- */
+  --color-primary-50: #f0f5fe;
+  --color-primary-100: #dfeafd;
+  --color-primary-200: #c2d4f9; /* [brand] soft wash — zebra rows, secondary buttons */
+  --color-primary-300: #9bbaf8;
+  --color-primary-400: #699ef7;
+  --color-primary-500: #3b82f6; /* [brand] accessible blue — links, active on dark */
+  --color-primary-600: #1848f3; /* [brand] Electric Blue — primary actions */
+  --color-primary-700: #143ad4;
+  --color-primary-800: #1530ab;
+  --color-primary-900: #172c84;
+  --color-primary-950: #0d1a52;
+
+  /* ---------------------------------------------------------------------
+   * Navy — Hero Brand A (marketing headers, key visuals, dark surfaces)
+   * ------------------------------------------------------------------- */
+  --color-navy-50: #eeeefb;
+  --color-navy-100: #dedef8;
+  --color-navy-200: #c3c3f2;
+  --color-navy-300: #9f9ee9;
+  --color-navy-400: #7b77de;
+  --color-navy-500: #5d54d1;
+  --color-navy-600: #4b3dbf;
+  --color-navy-700: #3c2e9f;
+  --color-navy-800: #2f2280;
+  --color-navy-900: #1d1168;
+  --color-navy-950: #040067; /* [brand] Deep Navy */
+
+  /* ---------------------------------------------------------------------
+   * Slate — The Engineering Grays (blue-tinted; replaces pure black/white)
+   * Brand book defines the scale by name only; hexes extended here.
+   * Slate-50 for table cards · Slate-900 for code blocks.
+   * ------------------------------------------------------------------- */
+  --color-slate-50: #f7f9fc;
+  --color-slate-100: #eff2f8;
+  --color-slate-200: #dee4ef;
+  --color-slate-300: #c3cddf;
+  --color-slate-400: #93a2bd;
+  --color-slate-500: #67789b;
+  --color-slate-600: #4a5878;
+  --color-slate-700: #38445f;
+  --color-slate-800: #253048;
+  --color-slate-900: #111a30;
+  --color-slate-950: #0a101f;
+
+  /* ---------------------------------------------------------------------
+   * Status ramps — brand book shows Success/Error swatches without hexes;
+   * ramps defined here. Warning is an extension for a complete system.
+   * ------------------------------------------------------------------- */
+  --color-success-50: #ebfef2;
+  --color-success-100: #d0fbe0;
+  --color-success-200: #a5f5c6;
+  --color-success-300: #6be9a6;
+  --color-success-400: #30d57f;
+  --color-success-500: #10bf62;
+  --color-success-600: #059b4e;
+  --color-success-700: #077c41;
+  --color-success-800: #0a6236;
+  --color-success-900: #0a502e;
+  --color-success-950: #032d18;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde58a;
+  --color-warning-300: #fcd24d;
+  --color-warning-400: #fabe23;
+  --color-warning-500: #f4a80b;
+  --color-warning-600: #d88406;
+  --color-warning-700: #b36209;
+  --color-warning-800: #914d0e;
+  --color-warning-900: #78400f;
+  --color-warning-950: #452103;
+
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e1;
+  --color-error-200: #fec9c8;
+  --color-error-300: #fba3a1;
+  --color-error-400: #f76d6a;
+  --color-error-500: #ee4540;
+  --color-error-600: #db2723;
+  --color-error-700: #b81d19;
+  --color-error-800: #981c19;
+  --color-error-900: #7e1f1d;
+  --color-error-950: #440c0b;
+}
+
+@keyframes skeleton-wave {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 100% 0;
+  }
+}
+
+/* The indeterminate Progress segment is 40% of its track wide; translate is
+   relative to the segment itself, so -100% rests fully off the left edge and
+   250% (100% / 40% width) exits fully off the right. */
+@keyframes progress-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 250% 0;
+  }
+}
+
+@keyframes ai-loader-rotate {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35);
+  }
+  28% {
+    transform: rotate(60deg);
+    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
+  }
+  58% {
+    transform: rotate(220deg);
+    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
+  }
+  76% {
+    transform: rotate(276deg);
+    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ai-loader-processing-pulse {
+  0%,
+  100% {
+    opacity: 0.82;
+    transform: scale(0.72);
+  }
+  34% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  56% {
+    opacity: 0.9;
+    transform: scale(0.86);
+  }
+  78% {
+    opacity: 1;
+    transform: scale(1.04);
+  }
+}
+
+@keyframes ai-loader-processing-satellite {
+  0%,
+  18%,
+  100% {
+    opacity: 1;
+  }
+  28%,
+  38% {
+    opacity: 0;
+  }
+  58% {
+    opacity: 1;
+  }
+}
+
+@keyframes ai-loader-text-shimmer {
+  0% {
+    background-position:
+      100% 50%,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 50%,
+      0 0;
+  }
+}
+
+@keyframes ai-loader-core {
+  0%,
+  100% {
+    opacity: 0.95;
+    transform: rotate(0deg) scale(1);
+  }
+  26% {
+    opacity: 0.82;
+    transform: rotate(-8deg) scale(0.82);
+  }
+  56% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+  78% {
+    opacity: 0.92;
+    transform: rotate(9deg) scale(0.9);
+  }
+}
+
+@keyframes ai-loader-facet {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: rotate(45deg) scale(0.75);
+  }
+  36% {
+    opacity: 0.34;
+    transform: rotate(55deg) scale(0.82);
+  }
+  68% {
+    opacity: 0.12;
+    transform: rotate(36deg) scale(0.58);
+  }
+}
+
+@keyframes ai-loader-spark {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  20% {
+    opacity: 0.18;
+    transform: scale(0.45);
+  }
+  42% {
+    opacity: 0.95;
+    transform: scale(1);
+  }
+  62% {
+    opacity: 0.28;
+    transform: scale(0.62);
+  }
+}
+
+/* -----------------------------------------------------------------------
+ * Semantic tokens — what components actually reference.
+ * --------------------------------------------------------------------- */
+@theme static {
+  --color-background: #ffffff; /* [brand] the "Clean Slate" */
+  --color-foreground: var(--color-slate-900);
+
+  --color-surface: var(--color-slate-50);
+  --color-surface-foreground: var(--color-slate-900);
+
+  --color-muted: var(--color-slate-100);
+  --color-muted-foreground: var(--color-slate-500);
+
+  --color-border: var(--color-slate-200);
+  --color-ring: var(--color-primary-600);
+
+  /* Scrim behind modal surfaces (dialogs, drawers). Carries its own alpha so
+     overlays fade the whole layer via opacity without restating the color. */
+  --color-overlay: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
+
+  --color-primary: var(--color-primary-600);
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: var(--color-primary-200);
+  --color-secondary-foreground: var(--color-navy-950);
+
+  --color-hero: var(--color-navy-950);
+  --color-hero-foreground: #ffffff;
+
+  --color-success: var(--color-success-600);
+  --color-success-foreground: #ffffff;
+
+  --color-warning: var(--color-warning-600);
+  --color-warning-foreground: #ffffff;
+
+  --color-destructive: var(--color-error-600);
+  --color-destructive-foreground: #ffffff;
+
+  --color-info: var(--color-primary-500);
+  --color-info-foreground: #ffffff;
+}