@techsio/ui-kit 0.6.0 → 0.9.0

package/dist/src/molecules/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/molecules/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwGhB,CAAA;AAuBF,MAAM,WAAW,SACf,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAA0B,EAC1B,GAAW,EACX,cAA4B,EAC5B,SAAgB,EAChB,aAAa,EACb,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAkCX;yBAnDe,IAAI;uDA+DjB,aAAa;2EA6Bb,gBAAgB;iEA8BhB,gBAAgB;kDAwBhB,kBAAkB;;;AA5FrB,UAAU,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAuBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B;AA4BD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwBD,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/molecules/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG1D,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwGhB,CAAA;AAuBF,MAAM,WAAW,SACf,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAA0B,EAC1B,GAAW,EACX,cAA4B,EAC5B,SAAgB,EAChB,aAAa,EACb,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAkCX;yBAnDe,IAAI;uDA+DjB,aAAa;8FA+Bb,gBAAgB;iEAkChB,gBAAgB;kDAwBhB,kBAAkB;;;AAlGrB,UAAU,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAuBD,KAAK,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AAmCD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwBD,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}

package/dist/stories/molecules/slider.stories.d.ts

@@ -9,6 +9,7 @@ export declare const WithValidation: Story;
 export declare const WithMarkers: Story;
 export declare const VerticalOrientation: Story;
 export declare const Controlled: Story;
+export declare const DynamicBoundsControlled: Story;
 export declare const SingleVsMultiThumb: Story;
 export declare const Origin: Story;
 export declare const ThumbAlignment: Story;

package/dist/stories/molecules/slider.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EACL,MAAM,EAEP,MAAM,4BAA4B,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AASpC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqDjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAqCnC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiD9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwIzB,CAAA"}
+{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EACL,MAAM,EAEP,MAAM,4BAA4B,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AASpC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqDjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KA0CrC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAqCnC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiD9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwIzB,CAAA"}

package/dist/stories/molecules/tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA6D3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,eAAO,MAAM,UAAU,EAAE,KAqCxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,KAwFzB,CAAA;AAGD,eAAO,MAAM,KAAK,EAAE,KAmEnB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA4CjC,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAiCxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAuD5B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KAwCvB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4FxB,CAAA"}
+{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAG/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA6D3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,eAAO,MAAM,UAAU,EAAE,KAqCxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,KAwFzB,CAAA;AAGD,eAAO,MAAM,KAAK,EAAE,KAmEnB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA4CjC,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAiCxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAuD5B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KAqCvB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4FxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.6.0",
+  "version": "0.9.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/tokens/_tokens-base.css

@@ -13,6 +13,13 @@
 /* Component tokens (dependent on semantic) */
 @import "./components/components.css";
 
+/* Figma source of truth — imported LAST so its @theme static values win
+ * the cascade over any duplicate declarations in the per-component CSS
+ * above. Atom files still own tokens that Figma does not export (font
+ * weights, --alpha() helpers, bridge shorthands, @utility blocks).
+ * Generated by merge-figma-themes.mjs from figma/{light,dark}/variables.css. */
+@import "./figma/variables.css";
+
 /* Base styles */
 :root {
   color-scheme: light dark;

package/src/tokens/components/atoms/_badge.css

@@ -1,72 +1,15 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-badge-primary: var(--color-primary);
-  --color-badge-secondary: var(--color-secondary);
-  --color-badge-tertiary: var(--color-tertiary);
-  --color-badge-info: var(--color-info);
-  --color-badge-success: var(--color-success);
-  --color-badge-warning: var(--color-warning);
-  --color-badge-danger: var(--color-danger);
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-badge-bg-primary: var(--color-badge-primary);
-  --color-badge-bg-secondary: var(--color-badge-secondary);
-  --color-badge-bg-tertiary: var(--color-badge-tertiary);
-  --color-badge-bg-info: var(--color-badge-info);
-  --color-badge-bg-success: var(--color-badge-success);
-  --color-badge-bg-warning: var(--color-badge-warning);
-  --color-badge-bg-danger: var(--color-badge-danger);
-  --color-badge-bg-discount: var(--color-badge-danger); /* Alias for discount */
-
-  /* Foreground colors */
-  --color-badge-fg: var(--color-fg-light);
-  --color-badge-fg-primary: var(--color-badge-fg);
-  --color-badge-fg-secondary: var(--color-badge-fg);
-  --color-badge-fg-tertiary: var(--color-badge-fg);
-  --color-badge-fg-info: var(--color-badge-fg);
-  --color-badge-fg-success: var(--color-badge-fg);
-  --color-badge-fg-warning: var(--color-badge-fg);
-  --color-badge-fg-danger: var(--color-badge-fg);
-  --color-badge-fg-discount: var(
-    --color-badge-fg
-  ); /* Keep original for discount */
-
-  /* Border colors */
-  --color-badge-border: var(--color-border-primary);
-  --color-badge-border-primary: transparent;
-  --color-badge-border-secondary: transparent;
-  --color-badge-border-tertiary: transparent;
-  --color-badge-border-info: transparent;
-  --color-badge-border-success: transparent;
-  --color-badge-border-warning: transparent;
-  --color-badge-border-danger: transparent;
-  --color-badge-border-discount: transparent;
+/*
+ * Badge — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * This file only declares what Figma does not export:
+ *   - `--color-badge-border` (base fallback for the `border-badge-border`
+ *     utility on the root; every variant overrides it via Figma's
+ *     `--color-badge-border-{variant}` tokens).
+ *
+ * Sizing, color, font-weight, radius, border-width are all owned by Figma
+ * now — see grep `--color-badge-` in figma/variables.css.
+ */
 
-  /* === COMPONENT VARIANTS === */
-  /* Outline variant */
-  --color-badge-bg-outline: transparent;
-  --color-badge-fg-outline: var(--color-fg-secondary);
-  --color-badge-border-outline: var(--color-badge-border);
-
-  /* === SPACING === */
-  --spacing-badge-sm: var(--spacing-50);
-  --spacing-badge-md: var(--spacing-100);
-  --spacing-badge-lg: var(--spacing-150);
-  --spacing-badge-xl: var(--spacing-200);
-
-  /* === TYPOGRAPHY === */
-  --text-badge-sm: var(--text-xs);
-  --text-badge-md: var(--text-xs);
-  --text-badge-lg: var(--text-sm);
-  --text-badge-xl: var(--text-md);
-
-  --font-weight-badge-sm: var(--font-weight-light);
-  --font-weight-badge-md: var(--font-weight-medium);
-  --font-weight-badge-lg: var(--font-weight-semibold);
-  --font-weight-badge-xl: var(--font-weight-bold);
-  /* === BORDERS & RADIUS === */
-  --radius-badge: var(--radius-sm);
-  --border-width-badge: var(--border-width-sm);
+@theme static {
+  --color-badge-border: oklch(0 0 0 / 0);
 }

package/src/tokens/components/atoms/_button.css

@@ -1,221 +1,20 @@
-:root {
-  --opacity-outlined-hover: 16%;
-  --opacity-outlined-active: 12%;
-}
+/*
+ * Button — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * This file only declares what Figma does not export:
+ *   - Combined padding shorthands (`--padding-button-{sm,md,lg}`) for the
+ *     `p-button-{size}` utility. Figma exports the split `x` and `y`
+ *     axes; this bridge composes them so the existing utility name keeps
+ *     working without per-axis class churn.
+ *   - The `token-icon-button-spinner` semantic icon alias.
+ */
 
 @theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-button-primary: var(--color-primary);
-  --color-button-secondary: var(--color-secondary);
-  --color-button-tertiary: var(--color-tertiary);
-  --color-button-warning: var(--color-warning);
-  --color-button-danger: var(--color-danger);
-  --color-button-borderless: transparent;
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-button-bg-primary: var(--color-button-primary);
-  --color-button-bg-secondary: var(--color-button-secondary);
-  --color-button-bg-tertiary: var(--color-button-tertiary);
-  --color-button-bg-warning: var(--color-button-warning);
-  --color-button-bg-danger: var(--color-button-danger);
-
-  /* Foreground colors */
-  --color-button-fg: var(--color-fg-light);
-  --color-button-fg-light: var(--color-fg-light);
-  --color-button-fg-outlined: var(--color-fg-primary);
-  --color-button-fg-primary: var(--color-button-fg);
-  --color-button-fg-secondary: var(--color-button-fg);
-  --color-button-fg-tertiary: var(--color-button-fg);
-  --color-button-fg-warning: var(--color-button-fg);
-  --color-button-fg-danger: var(--color-button-fg);
-  --color-button-fg-primary-light: var(--color-button-fg-light);
-  --color-button-fg-secondary-light: var(--color-button-fg-light);
-  --color-button-fg-tertiary-light: var(--color-button-fg-light);
-  --color-button-fg-warning-light: var(--color-button-fg-light);
-  --color-button-fg-danger-light: var(--color-button-fg-light);
-  --color-button-fg-outlined-primary: var(--color-button-fg-outlined);
-  --color-button-fg-outlined-secondary: var(--color-button-fg-outlined);
-  --color-button-fg-outlined-tertiary: var(--color-button-fg-outlined);
-  --color-button-fg-outlined-warning: var(--color-button-fg-outlined);
-  --color-button-fg-outlined-danger: var(--color-button-fg-outlined);
-  --color-button-fg-primary-borderless: var(--color-primary-accent-fg);
-  --color-button-fg-secondary-borderless: var(--color-secondary-accent-fg);
-  --color-button-fg-tertiary-borderless: var(--color-tertiary-accent-fg);
-  --color-button-fg-warning-borderless: var(--color-warning-fg);
-  --color-button-fg-danger-borderless: var(--color-danger-fg);
-
-  /* Border colors */
-  --color-button-border-primary: var(--color-button-primary);
-  --color-button-border-secondary: var(--color-button-secondary);
-  --color-button-border-tertiary: var(--color-button-tertiary);
-  --color-button-border-warning: var(--color-button-warning);
-  --color-button-border-danger: var(--color-button-danger);
-
-  /* === STATE VARIATIONS === */
-  /* Primary states */
-  --color-button-bg-primary-hover: oklch(
-    from var(--color-button-primary) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-primary-active: oklch(
-    from var(--color-button-primary) calc(l + var(--state-active)) c h
-  );
-
-  /* Secondary states */
-  --color-button-bg-secondary-hover: oklch(
-    from var(--color-button-secondary) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-secondary-active: oklch(
-    from var(--color-button-secondary) calc(l + var(--state-active)) c h
-  );
-
-  /* Tertiary states */
-  --color-button-bg-tertiary-hover: oklch(
-    from var(--color-button-tertiary) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-tertiary-active: oklch(
-    from var(--color-button-tertiary) calc(l + var(--state-active)) c h
-  );
-
-  /* Warning states */
-  --color-button-bg-warning-hover: oklch(
-    from var(--color-button-warning) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-warning-active: oklch(
-    from var(--color-button-warning) calc(l + var(--state-active)) c h
-  );
-
-  /* Danger states */
-  --color-button-bg-danger-hover: oklch(
-    from var(--color-button-danger) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-danger-active: oklch(
-    from var(--color-button-danger) calc(l + var(--state-active)) c h
-  );
-
-  /* Borderless states */
-  --color-button-bg-borderless: var(--color-button-borderless);
-  --color-button-bg-borderless-hover: var(--color-fill-hover);
-  --color-button-bg-borderless-active: var(--color-fill-active);
-
-  /* === COMPONENT VARIANTS === */
-  /* Light variants */
-  --color-button-bg-primary-light: var(--color-primary-light);
-  --color-button-bg-secondary-light: var(--color-secondary-light);
-  --color-button-bg-tertiary-light: var(--color-tertiary-light);
-  --color-button-bg-warning-light: var(--color-warning-light);
-  --color-button-bg-danger-light: var(--color-danger-light);
-
-  /* Light variant states */
-  --color-button-bg-primary-light-hover: oklch(
-    from var(--color-button-bg-primary-light) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-primary-light-active: oklch(
-    from var(--color-button-bg-primary-light) calc(l + var(--state-active)) c h
-  );
-  --color-button-bg-secondary-light-hover: oklch(
-    from var(--color-button-bg-secondary-light) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-secondary-light-active: oklch(
-    from var(--color-button-bg-secondary-light) calc(l + var(--state-active)) c
-      h
-  );
-  --color-button-bg-tertiary-light-hover: oklch(
-    from var(--color-button-bg-tertiary-light) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-tertiary-light-active: oklch(
-    from var(--color-button-bg-tertiary-light) calc(l + var(--state-active)) c h
-  );
-  --color-button-bg-warning-light-hover: oklch(
-    from var(--color-button-bg-warning-light) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-warning-light-active: oklch(
-    from var(--color-button-bg-warning-light) calc(l + var(--state-active)) c h
-  );
-  --color-button-bg-danger-light-hover: oklch(
-    from var(--color-button-bg-danger-light) calc(l + var(--state-hover)) c h
-  );
-  --color-button-bg-danger-light-active: oklch(
-    from var(--color-button-bg-danger-light) calc(l + var(--state-active)) c h
-  );
-
-  /* Outlined variants */
-  --color-button-bg-outlined: transparent;
-  --color-button-bg-outlined-primary-hover: --alpha(
-    var(--color-button-primary) /
-    var(--opacity-outlined-hover)
-  );
-  --color-button-bg-outlined-primary-active: --alpha(
-    var(--color-button-primary) /
-    var(--opacity-outlined-active)
-  );
-  --color-button-bg-outlined-secondary-hover: --alpha(
-    var(--color-button-secondary) /
-    var(--opacity-outlined-hover)
-  );
-  --color-button-bg-outlined-secondary-active: --alpha(
-    var(--color-button-secondary) /
-    var(--opacity-outlined-active)
-  );
-  --color-button-bg-outlined-tertiary-hover: --alpha(
-    var(--color-button-tertiary) /
-    var(--opacity-outlined-hover)
-  );
-  --color-button-bg-outlined-tertiary-active: --alpha(
-    var(--color-button-tertiary) /
-    var(--opacity-outlined-active)
-  );
-  --color-button-bg-outlined-warning-hover: --alpha(
-    var(--color-button-warning) /
-    var(--opacity-outlined-hover)
-  );
-  --color-button-bg-outlined-warning-active: --alpha(
-    var(--color-button-warning) /
-    var(--opacity-outlined-active)
-  );
-  --color-button-bg-outlined-danger-hover: --alpha(
-    var(--color-button-danger) /
-    var(--opacity-outlined-hover)
-  );
-  --color-button-bg-outlined-danger-active: --alpha(
-    var(--color-button-danger) /
-    var(--opacity-outlined-active)
-  );
-
-  /* === DISABLED STATES === */
-  --color-button-bg-disabled: var(--color-bg-disabled);
-  --color-button-fg-disabled: var(--color-fg-disabled);
-  --color-button-border-disabled: var(--color-border-disabled);
-
-  /* === SPACING === */
-  --spacing-button-sm: var(--spacing-150);
-  --spacing-button-md: var(--spacing-200);
-  --spacing-button-lg: var(--spacing-250);
-
-  --padding-button-sm: var(--spacing-50) var(--spacing-200);
-  --padding-button-md: var(--spacing-100) var(--spacing-250);
-  --padding-button-lg: var(--spacing-150) var(--spacing-400);
-
-  /* === TYPOGRAPHY === */
-  --text-button-sm: var(--text-sm);
-  --text-button-md: var(--text-md);
-  --text-button-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --radius-button-sm: var(--radius-sm);
-  --radius-button-md: var(--radius-md);
-  --radius-button-lg: var(--radius-lg);
-
-  --border-button-width-sm: var(--border-width-sm);
-  --border-button-width-md: var(--border-width-md);
-  --border-button-width-lg: var(--border-width-lg);
-
-  /* === FOCUS RING === */
-  --color-button-ring: var(--color-ring);
+  --padding-button-sm: var(--padding-button-y-sm) var(--padding-button-x-sm);
+  --padding-button-md: var(--padding-button-y-md) var(--padding-button-x-md);
+  --padding-button-lg: var(--padding-button-y-lg) var(--padding-button-x-lg);
 }
 
-
 @utility token-icon-button-spinner {
   @apply token-icon-spinner;
-}
+}

package/src/tokens/components/atoms/_checkbox.css

@@ -1,50 +1,20 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-checkbox-primary: var(--color-primary);
-  --color-checkbox-success: var(--color-success);
-  --color-checkbox-danger: var(--color-danger);
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-checkbox-bg: var(--color-fill-active);
-  --color-checkbox-bg-checked: var(--color-checkbox-success);
-  --color-checkbox-bg-indeterminate: var(--color-checkbox-primary);
-
-  /* Foreground colors (icons/checkmarks) */
-  --color-checkbox-fg-checked: var(--color-fg-dark);
-  --color-checkbox-fg-indeterminate: var(--color-fg-dark);
-
-  /* Border colors */
-  --color-checkbox-border: var(--color-border-primary);
-  --color-checkbox-border-checked: var(--color-checkbox-success);
-  --color-checkbox-border-indeterminate: var(--color-checkbox-primary);
-
-  /* === VALIDATION STATES === */
-  --color-checkbox-border-error: var(--color-checkbox-danger);
-  --color-checkbox-ring-error: var(--color-checkbox-danger);
+/*
+ * Checkbox — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * This file only declares what Figma does not export yet:
+ *   - `--spacing-checkbox-indeterminate-icon` — 60% size for the
+ *     indeterminate-state icon (no size-axis equivalent in Figma).
+ *   - `--spacing-form-checkbox-gap` — Figma exports `--spacing-form-checkbox`
+ *     (no `-gap` suffix); keep this alias name until FormCheckbox TSX
+ *     adopts the Figma name.
+ *
+ * Color, border-width, radius, size, ring, and form-checkbox-text-offset
+ * are owned by Figma.
+ */
 
-  /* === DISABLED STATES === */
-  --color-checkbox-bg-disabled: var(--color-bg-disabled);
-  --color-checkbox-fg-disabled: var(--color-fg-disabled);
-  --color-checkbox-border-disabled: var(--color-border-disabled);
-
-  /* === FOCUS RINGS === */
-  --color-checkbox-ring-focus: var(--color-ring);
-
-  /* === SPACING === */
-  --spacing-checkbox: var(--spacing-200);
+@theme static {
   --spacing-checkbox-indeterminate-icon: 60%;
-
-  /* === BORDERS & RADIUS === */
-  --radius-checkbox: var(--radius-sm);
-
-  /* === FORM CHECKBOX MOLECULE === */
-  --spacing-form-checkbox-gap: var(--spacing-150);
-  --spacing-form-checkbox-text-offset: calc(
-    var(--spacing-checkbox) +
-    var(--spacing-form-checkbox-gap)
-  );
+  --spacing-form-checkbox-gap: var(--spacing-form-checkbox);
 }
 
 @utility token-icon-checkbox {

package/src/tokens/components/atoms/_icon.css

@@ -1,210 +1,168 @@
+/*
+ * Icon — bound directly to Figma tokens.
+ * Source: tokens/figma/{light,dark}/variables.css.
+ *
+ * Color tokens are exported but not consumed by the TSX (icons inherit from
+ * surrounding text color). They're defined here so they're available when
+ * stories or call sites opt into colored icons.
+ */
+
 @plugin "@iconify/tailwind4";
 
-@theme static {
-  --text-icon-xs: var(--text-xs);
-  --text-icon-sm: var(--text-sm);
-  --text-icon-md: var(--text-md);
-  --text-icon-lg: var(--text-lg);
-  --text-icon-xl: var(--text-xl);
-  --text-icon-2xl: var(--text-2xl);
-}
+/*
+ * Icon — color + size tokens come from libs/ui/src/tokens/figma/variables.css
+ * (Figma now exports the full icon size scale including 2xl).
+ * Only the @plugin directive and the semantic glyph @utility aliases live here.
+ */
+
+/* === Semantic glyph aliases (not part of Figma export) === */
 
-/* Semantic tokens for icons */
 @utility token-icon-error {
   @apply icon-[mdi-light--alert-circle];
 }
-
 @utility token-icon-success {
   @apply icon-[mdi-light--check-circle];
 }
-
 @utility token-icon-warning {
   @apply icon-[mdi-light--alert];
 }
-
 @utility token-icon-info {
   @apply icon-[mdi-light--information];
 }
-
 @utility token-icon-close {
   @apply icon-[mdi--close];
 }
 
-/* Component tokens for icons */
 @utility token-icon-input-error {
   @apply token-icon-error;
 }
-
 @utility token-icon-input-success {
   @apply token-icon-success;
 }
-
 @utility token-icon-input-warning {
   @apply token-icon-warning;
 }
-
 @utility token-icon-input-info {
   @apply token-icon-info;
 }
 
-/* Navigation icons */
 @utility token-icon-chevron-down {
   @apply icon-[mdi--chevron-down];
 }
-
 @utility token-icon-chevron-right {
   @apply icon-[mdi--chevron-right];
 }
-
 @utility token-icon-chevron-left {
   @apply icon-[mdi--chevron-left];
 }
-
 @utility token-icon-chevron-up {
   @apply icon-[mdi--chevron-up];
 }
 
-/* Action icons */
 @utility token-icon-spinner {
   @apply icon-[svg-spinners--ring-resize];
 }
-
 @utility token-icon-play {
   @apply icon-[mdi--play];
 }
-
 @utility token-icon-pause {
   @apply icon-[mdi--pause];
 }
-
 @utility token-icon-menu {
   @apply icon-[mdi--menu];
 }
-
 @utility token-icon-plus {
   @apply icon-[mdi--plus];
 }
-
 @utility token-icon-minus {
   @apply icon-[mdi--minus];
 }
-
 @utility token-icon-folder {
   @apply icon-[mdi--folder];
 }
-
 @utility token-icon-folder-open {
   @apply icon-[mdi--folder-open];
 }
-
 @utility token-icon-file-document {
   @apply icon-[mdi--file-document];
 }
-
 @utility token-icon-home {
   @apply icon-[mdi--home];
 }
-
 @utility token-icon-shopping-bag {
   @apply icon-[mdi--shopping];
 }
-
 @utility token-icon-cpu {
   @apply icon-[mdi--cpu-64-bit];
 }
-
 @utility token-icon-smartphone {
   @apply icon-[mdi--smartphone];
 }
-
 @utility token-icon-save {
   @apply icon-[mdi--content-save];
 }
-
 @utility token-icon-trash {
   @apply icon-[mdi--delete];
 }
-
 @utility token-icon-copy {
   @apply icon-[mdi--content-copy];
 }
-
 @utility token-icon-clipboard {
   @apply icon-[mdi--clipboard];
 }
-
 @utility token-icon-undo {
   @apply icon-[mdi--undo];
 }
-
 @utility token-icon-redo {
   @apply icon-[mdi--redo];
 }
-
 @utility token-icon-check {
   @apply icon-[mdi--check];
 }
-
 @utility token-icon-check-bold {
   @apply icon-[mdi--check-bold];
 }
-
 @utility token-icon-check-circle {
   @apply icon-[mdi--check-circle];
 }
-
 @utility token-icon-alert {
   @apply icon-[mdi--alert];
 }
-
 @utility token-icon-alert-circle {
   @apply icon-[mdi--alert-circle];
 }
-
 @utility token-icon-information {
   @apply icon-[mdi--information];
 }
-
 @utility token-icon-ellipsis-horizontal {
   @apply icon-[mdi--ellipsis-horizontal];
 }
-
 @utility token-icon-circle {
   @apply icon-[mdi--circle];
 }
-
 @utility token-icon-star {
   @apply icon-[mdi--star];
 }
-
 @utility token-icon-star-half {
   @apply icon-[mdi--star-half];
 }
 
-/* product card icons */
-
 @utility token-icon-cart {
   @apply icon-[mdi-light--cart];
 }
-
 @utility token-icon-eye {
   @apply icon-[mdi--eye];
 }
-
 @utility token-icon-heart {
   @apply icon-[mdi--heart];
 }
-
 @utility token-icon-search {
   @apply icon-[mdi--magnify];
 }
 
-/* Semantic action aliases decoupled from concrete icon glyphs. */
-
 @utility token-icon-increment {
   @apply token-icon-chevron-up;
 }
-
 @utility token-icon-decrement {
   @apply token-icon-chevron-down;
-}
+}