@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/test/visual.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual.spec.d.ts","sourceRoot":"","sources":["../../test/visual.spec.ts"],"names":[],"mappings":""}

package/dist/utils.js

@@ -15,6 +15,6 @@ const tv = createTV({
     }
 });
 function slugify(str) {
-    return str.toString().toLowerCase().replace(WHITESPACE_REGEX, '-').replace(NON_WORD_REGEX, '').replace(MULTIPLE_DASHES_REGEX, '-').replace(LEADING_DASHES_REGEX, '').replace(TRAILING_DASHES_REGEX, '');
+    return str.toString().toLowerCase().replace(WHITESPACE_REGEX, "-").replace(NON_WORD_REGEX, "").replace(MULTIPLE_DASHES_REGEX, "-").replace(LEADING_DASHES_REGEX, "").replace(TRAILING_DASHES_REGEX, "");
 }
 export { slugify, tv };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/NMIT-WR/new-engine",
+    "url": "git+https://github.com/TechsioCZ/new-engine.git",
     "directory": "libs/ui"
   },
   "exports": {
@@ -13,13 +13,16 @@
       "import": "./dist/types/zag.js"
     },
     "./tokens": {
-      "import": "./src/tokens/tokens-only.css"
+      "style": "./src/tokens/tokens-only.css",
+      "default": "./src/tokens/tokens-only.css"
     },
     "./tokens-with-tailwind": {
-      "import": "./src/tokens/index.css"
+      "style": "./src/tokens/index.css",
+      "default": "./src/tokens/index.css"
     },
     "./tokens/*": {
-      "import": "./src/tokens/*.css"
+      "style": "./src/tokens/*.css",
+      "default": "./src/tokens/*.css"
     },
     "./atoms/*": {
       "types": "./dist/src/atoms/*.d.ts",
@@ -51,6 +54,12 @@
     "build:storybook": "storybook build",
     "dev": "rslib build --watch",
     "storybook": "storybook dev",
+    "figma:connect:parse": "figma connect parse --config figma.config.json",
+    "figma:connect:publish": "figma connect publish --config figma.config.json",
+    "test-storybook": "test-storybook",
+    "storybook:a11y": "bash scripts/storybook-a11y.sh",
+    "test:components": "node scripts/run-component-tests.mjs",
+    "test:components:update": "node scripts/run-component-tests.mjs --update-snapshots",
     "lint:tailwind": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js",
     "lint:tailwind:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js --fix",
     "prepare": "pnpm build && pnpm build:storybook",
@@ -61,30 +70,33 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@zag-js/accordion": "^1.29.1",
-    "@zag-js/carousel": "^1.29.1",
-    "@zag-js/checkbox": "^1.29.1",
-    "@zag-js/combobox": "^1.29.1",
-    "@zag-js/dialog": "^1.29.1",
-    "@zag-js/i18n-utils": "^1.29.1",
-    "@zag-js/menu": "^1.29.1",
-    "@zag-js/number-input": "^1.29.1",
-    "@zag-js/pagination": "^1.29.1",
-    "@zag-js/popover": "^1.29.1",
-    "@zag-js/rating-group": "^1.29.1",
-    "@zag-js/react": "^1.29.1",
-    "@zag-js/select": "^1.29.1",
-    "@zag-js/slider": "^1.29.1",
-    "@zag-js/steps": "^1.29.1",
-    "@zag-js/switch": "^1.29.1",
-    "@zag-js/tabs": "^1.29.1",
-    "@zag-js/toast": "^1.29.1",
-    "@zag-js/tooltip": "^1.29.1",
-    "@zag-js/tree-view": "^1.29.1",
+    "@zag-js/accordion": "^1.31.1",
+    "@zag-js/carousel": "^1.31.1",
+    "@zag-js/checkbox": "^1.31.1",
+    "@zag-js/combobox": "^1.31.1",
+    "@zag-js/dialog": "^1.31.1",
+    "@zag-js/i18n-utils": "^1.31.1",
+    "@zag-js/menu": "^1.31.1",
+    "@zag-js/number-input": "^1.31.1",
+    "@zag-js/pagination": "^1.31.1",
+    "@zag-js/popover": "^1.31.1",
+    "@zag-js/radio-group": "^1.31.1",
+    "@zag-js/rating-group": "^1.31.1",
+    "@zag-js/react": "^1.31.1",
+    "@zag-js/select": "^1.31.1",
+    "@zag-js/slider": "^1.31.1",
+    "@zag-js/steps": "^1.31.1",
+    "@zag-js/switch": "^1.31.1",
+    "@zag-js/tabs": "^1.31.1",
+    "@zag-js/toast": "^1.31.1",
+    "@zag-js/tooltip": "^1.31.1",
+    "@zag-js/tree-view": "^1.31.1",
+    "libphonenumber-js": "^1.13.2",
     "tailwind-variants": "^3.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@figma/code-connect": "^1.4.3",
     "@iconify/json": "^2.2.409",
     "@iconify/tailwind4": "^1.1.0",
     "@rsbuild/core": "1.6.7",
@@ -101,14 +113,15 @@
     "@storybook/addon-onboarding": "^10.0.2",
     "@storybook/addon-themes": "^10.0.2",
     "@storybook/react": "^10.0.2",
+    "@storybook/test-runner": "^0.24.2",
     "@tailwindcss/postcss": "^4.1.17",
+    "@techsio/storybook-a11y-reporter": "0.1.3",
+    "@techsio/storybook-better-a11y": "0.1.3",
     "@typescript-eslint/parser": "^8.47.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-tailwindcss": "beta",
     "glob": "^11.0.2",
-    "next": "^16.0.3",
+    "postcss": "^8.5.6",
     "rsbuild-plugin-publint": "^0.3.3",
     "semantic-release": "^25.0.2",
     "storybook": "^10.0.2",

package/src/tokens/_base.css

@@ -13,9 +13,9 @@
   --offset-shadow-2: 0px 5px 6px 0px;
   --offset-shadow-3: 1px 1px 20px 0px;
 
-  --shadow-primary: var(--offset-shadow-1) var(--color-shadow-1),
-    var(--offset-shadow-2) var(--color-shadow-2), var(--offset-shadow-3)
-    var(--color-shadow-3);
+  --shadow-primary:
+    var(--offset-shadow-1) var(--color-shadow-1), var(--offset-shadow-2)
+    var(--color-shadow-2), var(--offset-shadow-3) var(--color-shadow-3);
 
   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

package/src/tokens/_layout.css

@@ -1,4 +1,8 @@
 @theme static {
+  /* === RUNTIME POSITIONING FALLBACKS (Zag.js) === */
+  --reference-width: 100%;
+  --z-index: 1;
+
   /* === BREAKPOINTS === */
   --breakpoint-xs: 30rem;
   --breakpoint-sm: 40rem;

package/src/tokens/_semantic.css

@@ -15,13 +15,13 @@
   --state-border: 15%;
   --state-placeholder: 0.25;
   --max-lightness: 0.97;
-  --opacity-ring: 80%;
   --opacity-disabled: 60%;
   --opacity-placeholder: 60%;
   --opacity-text-secondary: 70%;
   --opacity-disabled-placeholder: 30%;
   --fill-increment: 5%;
   --surface-increment: 0.05;
+  --state-fg-lightness: 0.42; /* Accent color lightness for text - WCAG AAA on light bg */
 }
 
 /* Explicit Dark class(es) */
@@ -31,6 +31,7 @@
   --state-secondary-text: -0.15;
   --state-placeholder: -0.25;
   --surface-increment: -0.05;
+  --state-fg-lightness: 0.85;
 }
 
 /* System Dark preference (when no explicit class forces light) */
@@ -41,6 +42,7 @@
     --state-secondary-text: -0.15;
     --state-placeholder: -0.25;
     --surface-increment: -0.05;
+    --state-fg-lightness: 0.85;
   }
 }
 
@@ -51,6 +53,7 @@
   --state-secondary-text: -0.15;
   --state-placeholder: -0.25;
   --surface-increment: -0.05;
+  --state-fg-lightness: 0.85;
 }
 
 :is(.dark, .always-dark) .reverse {
@@ -59,6 +62,7 @@
   --state-secondary-text: 0.15;
   --state-placeholder: 0.25;
   --surface-increment: 0.05;
+  --state-fg-lightness: 0.42;
 }
 
 /* Reverse on System Light/Dark preference (when no explicit theme class is present) */
@@ -69,6 +73,7 @@
     --state-secondary-text: -0.15;
     --state-placeholder: -0.25;
     --surface-increment: -0.05;
+    --state-fg-lightness: 0.85;
   }
 }
 
@@ -79,6 +84,7 @@
     --state-secondary-text: 0.15;
     --state-placeholder: 0.25;
     --surface-increment: 0.05;
+    --state-fg-lightness: 0.42;
   }
 }
 
@@ -86,7 +92,7 @@
 @theme static {
   /* Colors */
   /* User interface main tone and interactive colors, usually used for main operation button, etc */
-  --color-primary: light-dark(var(--color-blue-500), var(--color-sky-300));
+  --color-primary: light-dark(var(--color-blue-300), var(--color-sky-300));
   --color-primary-hover: oklch(
     from var(--color-primary) calc(l + var(--state-hover)) c h
   );
@@ -112,7 +118,10 @@
   );
 
   /*Secondary colors. Less important than primary colors, but still serve as accents.*/
-  --color-secondary: light-dark(var(--color-orange-500), var(--color-amber-400));
+  --color-secondary: light-dark(
+    var(--color-orange-500),
+    var(--color-amber-400)
+  );
   --color-secondary-hover: oklch(
     from var(--color-secondary) calc(l + var(--state-hover)) c h
   );
@@ -138,7 +147,7 @@
   );
 
   /* In the user interface, non emphasis color and interactive color are usually used for general and non emphasis function operation buttons */
-  --color-tertiary: light-dark(var(--color-pink-500), var(--color-rose-400));
+  --color-tertiary: light-dark(var(--color-pink-300), var(--color-rose-400));
   --color-tertiary-hover: oklch(
     from var(--color-tertiary) calc(l + var(--state-hover)) c h
   );
@@ -245,7 +254,7 @@
   );
 
   /* It is usually used to express the dangerous state, and is used in the scene with the above semantics */
-  --color-danger: light-dark(var(--color-red-500), var(--color-red-400));
+  --color-danger: light-dark(var(--color-red-400), var(--color-red-300));
   --color-danger-hover: oklch(
     from var(--color-danger) calc(l + var(--state-hover)) c h
   );
@@ -270,9 +279,30 @@
     from var(--color-danger-light) l var(--state-disabled-chroma) h
   );
 
-  /* Text colors and Icon colors*/
+  /* Text colors and Icon colors */
+  /* semantic text color for better contrast WCAG AAA - uses absolute lightness */
+  --color-primary-accent-fg: oklch(
+    from var(--color-primary) var(--state-fg-lightness) c h
+  );
+  --color-secondary-accent-fg: oklch(
+    from var(--color-secondary) var(--state-fg-lightness) c h
+  );
+  --color-tertiary-accent-fg: oklch(
+    from var(--color-tertiary) var(--state-fg-lightness) c h
+  );
+  --color-success-fg: oklch(
+    from var(--color-success) var(--state-fg-lightness) c h
+  );
+  --color-info-fg: oklch(from var(--color-info) var(--state-fg-lightness) c h);
+  --color-warning-fg: oklch(
+    from var(--color-warning) var(--state-fg-lightness) c h
+  );
+  --color-danger-fg: oklch(
+    from var(--color-danger) var(--state-fg-lightness) c h
+  );
+
   /* Four different levels of text / icon colors represent the most important, secondary, minor and minor contents in the product interface */
-  --color-fg-light: var(--color-slate-800); /* Light mode */
+  --color-fg-light: var(--color-slate-950); /* Light mode */
   --color-fg-dark: var(--color-white); /* Dark mode */
   --color-fg-primary: light-dark(var(--color-fg-light), var(--color-fg-dark));
 
@@ -288,7 +318,10 @@
   /* All levels of background color in the application, including container, menu, navigation bar, etc. In dark mode, we usually use the background color to distinguish the front and back levels */
   --color-base-light: var(--color-white);
   --color-base-dark: var(--color-gray-950);
-  --color-base: light-dark(var(--color-base-light), var(--color-base-dark)); /*bottom page*/
+  --color-base: light-dark(
+    var(--color-base-light),
+    var(--color-base-dark)
+  ); /*bottom page*/
   --color-surface: oklch(
     from var(--color-base) calc(l - var(--surface-increment)) c h
   ); /* content that needs to be promoted on the page*/
@@ -319,6 +352,7 @@
   --border-width-sm: 1px;
   --border-width-md: 2px;
   --border-width-lg: 3px;
+  --border-width-validation: var(--border-width-lg);
 
   /* Links */
   --color-link: light-dark(var(--color-blue-500), var(--color-sky-300));
@@ -353,7 +387,10 @@
   );
 
   /* Disabled fill for form controls and interactive elements */
-  --color-fill-disabled: light-dark(var(--color-gray-50), var(--color-gray-850));
+  --color-fill-disabled: light-dark(
+    var(--color-gray-50),
+    var(--color-gray-850)
+  );
 
   /* Spacing */
   --spacing: 0.25rem;
@@ -361,5 +398,7 @@
   /* Focus ring */
   --default-ring-color: light-dark(var(--color-black), var(--color-white));
   --color-ring: var(--default-ring-color);
-  --default-ring-width: 3px;
+  --default-ring-width: 2px;
+  --default-ring-offset: 2px;
+  --default-ring-style: solid;
 }

package/src/tokens/_tokens-base.css

@@ -0,0 +1,67 @@
+/* Shared tokens (with or without Tailwind) */
+
+/* Primitive tokens */
+@import "./_base.css";
+@import "./_colors.css";
+@import "./_spacing.css";
+@import "./_typography.css";
+@import "./_layout.css";
+
+/* Semantic tokens (dependent on primitives) */
+@import "./_semantic.css";
+
+/* Component tokens (dependent on semantic) */
+@import "./components/components.css";
+
+/* Base styles */
+:root {
+  color-scheme: light dark;
+}
+
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+.always-light {
+  color-scheme: light;
+}
+
+.always-dark {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  .reverse {
+    color-scheme: dark;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .reverse {
+    color-scheme: light;
+  }
+}
+
+.light .reverse {
+  color-scheme: dark;
+}
+
+.dark .reverse {
+  color-scheme: light;
+}
+
+body {
+  background-color: var(--color-base);
+  color: var(--color-fg-primary);
+
+  font-family: system-ui, sans-serif;
+}
+
+.sbdocs-preview {
+  background-color: var(--color-base) !important;
+  color: var(--color-fg-primary) !important;
+}

package/src/tokens/_typography.css

@@ -1,13 +1,43 @@
 @theme static {
   /* Primitive Typography Tokens - Utopia fluid typography */
-  --text-xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* 12.5px - 12.8px */
+  --text-xs: clamp(
+    0.7813rem,
+    0.7747rem +
+    0.0326vw,
+    0.8rem
+  ); /* 12.5px - 12.8px */
   --text-sm: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* 15px - 16px */
   --text-md: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 18px - 20px */
-  --text-lg: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* 21.6px - 25px */
-  --text-xl: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* 25.92px - 31.25px */
-  --text-2xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 31.1px - 39.06px */
-  --text-3xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 37.32px - 48.83px */
-  --text-4xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 44.79px - 61.04px */
+  --text-lg: clamp(
+    1.35rem,
+    1.2761rem +
+    0.3696vw,
+    1.5625rem
+  ); /* 21.6px - 25px */
+  --text-xl: clamp(
+    1.62rem,
+    1.5041rem +
+    0.5793vw,
+    1.9531rem
+  ); /* 25.92px - 31.25px */
+  --text-2xl: clamp(
+    1.944rem,
+    1.771rem +
+    0.8651vw,
+    2.4414rem
+  ); /* 31.1px - 39.06px */
+  --text-3xl: clamp(
+    2.3328rem,
+    2.0827rem +
+    1.2504vw,
+    3.0518rem
+  ); /* 37.32px - 48.83px */
+  --text-4xl: clamp(
+    2.7994rem,
+    2.4462rem +
+    1.7658vw,
+    3.8147rem
+  ); /* 44.79px - 61.04px */
 
   /* === TEXT WEIGHT === */
   --font-weight-normal: 400;

package/src/tokens/components/_form-control.css

@@ -0,0 +1,67 @@
+/*
+ * Shared form-control foundation tokens.
+ * All box-style form controls (Input, NumericInput, Combobox, Select, SearchForm)
+ * alias their visual tokens to these to maintain a single source of truth.
+ *
+ * To change the design of every form control at once, edit these tokens.
+ * To diverge a specific component, override its own alias token in its own CSS file.
+ */
+@theme static {
+  /* Border */
+  --border-width-form-control: var(--border-width-input); /* 2px */
+
+  /* Shape */
+  --radius-form-control-sm: var(--radius-button-sm);
+  --radius-form-control-md: var(--radius-button-md);
+  --radius-form-control-lg: var(--radius-button-lg);
+  --radius-form-control: var(--radius-form-control-md); /* default md */
+
+  /* Colors */
+  --color-form-control-bg: var(--color-fill-base);
+  --color-form-control-border: var(--color-border-primary);
+  --color-form-control-border-hover: oklch(
+    from var(--color-form-control-border) calc(l + var(--state-hover)) c h
+  );
+  --color-form-control-border-focus: var(--color-primary);
+  --color-form-control-ring: var(--color-ring);
+
+  /* Disabled */
+  --color-form-control-bg-disabled: var(--color-bg-disabled);
+  --color-form-control-fg-disabled: var(--color-fg-disabled);
+  --color-form-control-border-disabled: var(--color-border-disabled);
+
+  /* Placeholder */
+  --color-form-control-placeholder: var(--color-fg-placeholder);
+
+  /*
+   * Shared heights for sm/md form controls + buttons.
+   * Formula: border×2 + button-padding-y×2 + 1lh
+   * (1lh resolves to the element's computed line-height at usage time)
+   * Apply h-form-control-sm / h-form-control-md to both buttons and
+   * form-control wrappers so they share an identical rendered height.
+   */
+  --height-form-control-sm: calc(
+    var(--border-width-form-control) * 2 + var(--spacing-50) * 2 + 1lh
+  );
+  --height-form-control-md: calc(
+    var(--border-width-form-control) * 2 + var(--spacing-100) * 2 + 1lh
+  );
+  --height-form-control-lg: calc(
+    var(--border-width-form-control) * 2 + var(--spacing-200) * 2 + 1lh
+  );
+}
+
+/*
+ * Shared base utility for box-style form controls.
+ * Covers the static visual foundation (border, radius, background).
+ * Interactive states (hover border, focus ring, disabled, validation) are applied
+ * per-component via Tailwind classes in their tv() slots because focus behaviour
+ * differs (focus-within vs data-focus vs focus-visible) across components.
+ */
+@utility form-control-base {
+  border-width: var(--border-width-form-control);
+  border-style: solid;
+  border-color: var(--color-form-control-border);
+  border-radius: var(--radius-form-control);
+  background-color: var(--color-form-control-bg);
+}

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

@@ -21,7 +21,7 @@
   --color-badge-bg-discount: var(--color-badge-danger); /* Alias for discount */
 
   /* Foreground colors */
-  --color-badge-fg: var(--color-fg-reverse);
+  --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);
@@ -29,7 +29,9 @@
   --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-fg-dark); /* Keep original for discount */
+  --color-badge-fg-discount: var(
+    --color-badge-fg
+  ); /* Keep original for discount */
 
   /* Border colors */
   --color-badge-border: var(--color-border-primary);
@@ -49,12 +51,21 @@
   --color-badge-border-outline: var(--color-badge-border);
 
   /* === SPACING === */
-  --padding-badge: var(--spacing-100) var(--spacing-100);
+  --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-size: var(--text-xs);
-  --font-weight-badge: var(--font-weight-normal);
+  --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);

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

@@ -22,8 +22,8 @@
   --color-button-bg-danger: var(--color-button-danger);
 
   /* Foreground colors */
-  --color-button-fg: var(--color-fg-reverse);
-  --color-button-fg-light: var(--color-fg-reverse);
+  --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);
@@ -40,11 +40,11 @@
   --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-button-primary);
-  --color-button-fg-secondary-borderless: var(--color-button-secondary);
-  --color-button-fg-tertiary-borderless: var(--color-button-tertiary);
-  --color-button-fg-warning-borderless: var(--color-button-warning);
-  --color-button-fg-danger-borderless: var(--color-button-danger);
+  --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);
@@ -141,6 +141,7 @@
   );
 
   /* Outlined variants */
+  --color-button-bg-outlined: transparent;
   --color-button-bg-outlined-primary-hover: --alpha(
     var(--color-button-primary) /
     var(--opacity-outlined-hover)
@@ -192,9 +193,9 @@
   --spacing-button-md: var(--spacing-200);
   --spacing-button-lg: var(--spacing-250);
 
-  --padding-button-sm: var(--spacing-150) var(--spacing-250);
-  --padding-button-md: var(--spacing-200) var(--spacing-350);
-  --padding-button-lg: var(--spacing-250) var(--spacing-450);
+  --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);
@@ -213,3 +214,8 @@
   /* === FOCUS RING === */
   --color-button-ring: var(--color-ring);
 }
+
+
+@utility token-icon-button-spinner {
+  @apply token-icon-spinner;
+}

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

@@ -0,0 +1,52 @@
+@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);
+
+  /* === 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);
+  --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)
+  );
+}
+
+@utility token-icon-checkbox {
+  @apply token-icon-check-bold;
+}