@techsio/ui-kit 0.0.0

package/dist/templates/tabs.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "../molecules/tabs.js";
+function TabsTemplate({ items, showIndicator = false, variant = 'default', size = 'md', fitted = false, justify = 'start', orientation = 'horizontal', defaultValue, value, onValueChange, ref, className, ...tabsProps }) {
+    return /*#__PURE__*/ jsxs(Tabs, {
+        ref: ref,
+        variant: variant,
+        size: size,
+        fitted: fitted,
+        justify: justify,
+        orientation: orientation,
+        defaultValue: defaultValue,
+        value: value,
+        onValueChange: onValueChange,
+        className: className,
+        ...tabsProps,
+        children: [
+            /*#__PURE__*/ jsxs(Tabs.List, {
+                children: [
+                    items.map((item)=>/*#__PURE__*/ jsx(Tabs.Trigger, {
+                            value: item.value,
+                            disabled: item.disabled,
+                            children: item.label
+                        }, item.value)),
+                    showIndicator && /*#__PURE__*/ jsx(Tabs.Indicator, {})
+                ]
+            }),
+            items.map((item)=>/*#__PURE__*/ jsx(Tabs.Content, {
+                    value: item.value,
+                    children: item.content
+                }, item.value))
+        ]
+    });
+}
+export { TabsTemplate };

package/dist/utils.js

@@ -0,0 +1,20 @@
+import { createTV } from "tailwind-variants";
+const TEXT_SIZE_REGEX = /-(size|sm|md|lg|\d?x?[sml])$/;
+const WHITESPACE_REGEX = /\s+/g;
+const NON_WORD_REGEX = /[^\w-]+/g;
+const MULTIPLE_DASHES_REGEX = /--+/g;
+const LEADING_DASHES_REGEX = /^-+/;
+const TRAILING_DASHES_REGEX = /-+$/;
+const tv = createTV({
+    twMergeConfig: {
+        theme: {
+            text: [
+                (value)=>TEXT_SIZE_REGEX.test(value)
+            ]
+        }
+    }
+});
+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, '');
+}
+export { slugify, tv };

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "@techsio/ui-kit",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    "./types/zag": {
+      "types": "./dist/src/types/zag.d.ts",
+      "import": "./dist/types/zag.js"
+    },
+    "./tokens": {
+      "import": "./src/tokens/tokens-only.css"
+    },
+    "./tokens-with-tailwind": {
+      "import": "./src/tokens/index.css"
+    },
+    "./tokens/*": {
+      "import": "./src/tokens/*.css"
+    },
+    "./atoms/*": {
+      "types": "./dist/src/atoms/*.d.ts",
+      "import": "./dist/atoms/*.js"
+    },
+    "./molecules/*": {
+      "types": "./dist/src/molecules/*.d.ts",
+      "import": "./dist/molecules/*.js"
+    },
+    "./organisms/*": {
+      "types": "./dist/src/organisms/*.d.ts",
+      "import": "./dist/organisms/*.js"
+    },
+    "./templates/*": {
+      "types": "./dist/src/templates/*.d.ts",
+      "import": "./dist/templates/*.js"
+    },
+    "./utils": {
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/utils.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/tokens"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "build:storybook": "storybook build",
+    "dev": "rslib build --watch",
+    "storybook": "storybook dev",
+    "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",
+    "check:unused-tokens": "bun scripts/check-unused-tokens.js",
+    "validate:tokens": "bun scripts/validate-token-usage.js && bun scripts/validate-token-definitions.js",
+    "validate:token-usage": "bun scripts/validate-token-usage.js",
+    "validate:token-definitions": "bun scripts/validate-token-definitions.js",
+    "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",
+    "tailwind-variants": "^3.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@iconify/json": "^2.2.409",
+    "@iconify/tailwind4": "^1.1.0",
+    "@rsbuild/core": "1.6.7",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.18.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@storybook/addon-a11y": "^10.0.3",
+    "@storybook/addon-links": "^10.0.2",
+    "@storybook/addon-onboarding": "^10.0.2",
+    "@storybook/addon-themes": "^10.0.2",
+    "@storybook/react": "^10.0.2",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@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",
+    "rsbuild-plugin-publint": "^0.3.3",
+    "semantic-release": "^25.0.2",
+    "storybook": "^10.0.2",
+    "storybook-addon-rslib": "^2.1.6",
+    "storybook-react-rsbuild": "^2.1.4",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@types/react": ">=19.2.0",
+    "@types/react-dom": ">=19.2.0",
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/tokens/_base.css

@@ -0,0 +1,25 @@
+@theme static {
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  --color-shadow-1: light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 1));
+  --color-shadow-2: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 1));
+  --color-shadow-3: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
+
+  --offset-shadow-1: 0px 1px 3px 0px;
+  --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);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+}

package/src/tokens/_colors.css

@@ -0,0 +1,5 @@
+/*
+Tailwind 4 automatically provides default variables, including a wide range of colors
+https://tailwindcss.com/docs/theme#default-theme-variable-reference
+This file is reserved for other specific colours.
+*/

package/src/tokens/_layout.css

@@ -0,0 +1,34 @@
+@theme static {
+  /* === BREAKPOINTS === */
+  --breakpoint-xs: 30rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  /* === CONTAINER SIZES === */
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-max-w: 80rem;
+  --container-prose: 65ch;
+
+  /* === ASPECT RATIOS === */
+  --aspect-square: 1;
+  --aspect-video: 16 / 9;
+  --aspect-portrait: 9 / 16;
+  --aspect-landscape: 4 / 3;
+  --aspect-wide: 21 / 9;
+  --aspect-card: 3 / 2;
+  --aspect-golden: 1.618;
+}

package/src/tokens/_semantic.css

@@ -0,0 +1,360 @@
+/*
+ * Color manipulation functions:
+ * - oklch(from var(--color) calc(l + 0.1) c h): Modifies the lightness of a color while preserving
+ *   its chroma and hue. Used for consistent hover/active states.
+ * - --alpha(var(--color) / 50%): Adjusts transparency of a color. Tailwind's v4 utility
+ *   that compiles to color-mix() for better browser support.
+ */
+:root {
+  --state-hover: -0.08;
+  --state-active: -0.12;
+  --state-disabled-chroma: 0.01;
+  --state-light-variant: 0.1; /* Always make colors lighter for -light variant */
+  --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
+  --state-secondary-text: 0.15;
+  --state-border: 15%;
+  --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;
+}
+
+/* Explicit Dark class(es) */
+:is(.dark, .always-dark) {
+  --state-hover: 0.08;
+  --state-active: 0.12;
+  --state-secondary-text: -0.15;
+  --surface-increment: -0.05;
+}
+
+/* System Dark preference (when no explicit class forces light) */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.always-light) {
+    --state-hover: 0.08;
+    --state-active: 0.12;
+    --state-secondary-text: -0.15;
+    --surface-increment: -0.05;
+  }
+}
+
+/* Reverse if parents has .always-light/dark and we want to make reverse style to parent */
+:is(.light, .always-light) .reverse {
+  --state-hover: 0.08;
+  --state-active: 0.12;
+  --state-secondary-text: -0.15;
+  --surface-increment: -0.05;
+}
+
+:is(.dark, .always-dark) .reverse {
+  --state-hover: -0.08;
+  --state-active: -0.12;
+  --state-secondary-text: 0.15;
+  --surface-increment: 0.05;
+}
+
+/* Reverse on System Light/Dark preference (when no explicit theme class is present) */
+@media (prefers-color-scheme: light) {
+  .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
+    --state-hover: 0.08;
+    --state-active: 0.12;
+    --state-secondary-text: -0.15;
+    --surface-increment: -0.05;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
+    --state-hover: -0.08;
+    --state-active: -0.12;
+    --state-secondary-text: 0.15;
+    --surface-increment: 0.05;
+  }
+}
+
+/* === TAILWIND UTILITY VARIABLES === */
+@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-hover: oklch(
+    from var(--color-primary) calc(l + var(--state-hover)) c h
+  );
+  --color-primary-active: oklch(
+    from var(--color-primary) calc(l + var(--state-active)) c h
+  );
+  --color-primary-disabled: oklch(
+    from var(--color-primary) l var(--state-disabled-chroma) h
+  );
+  --color-primary-light: oklch(
+    from var(--color-primary)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-primary-light-hover: oklch(
+    from var(--color-primary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-primary-light-active: oklch(
+    from var(--color-primary-light) calc(l + var(--state-active)) c h
+  );
+  --color-primary-light-disabled: oklch(
+    from var(--color-primary-light) l var(--state-disabled-chroma) h
+  );
+
+  /*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-hover: oklch(
+    from var(--color-secondary) calc(l + var(--state-hover)) c h
+  );
+  --color-secondary-active: oklch(
+    from var(--color-secondary) calc(l + var(--state-active)) c h
+  );
+  --color-secondary-disabled: oklch(
+    from var(--color-secondary) l var(--state-disabled-chroma) h
+  );
+  --color-secondary-light: oklch(
+    from var(--color-secondary)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-secondary-light-hover: oklch(
+    from var(--color-secondary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-secondary-light-active: oklch(
+    from var(--color-secondary-light) calc(l + var(--state-active)) c h
+  );
+  --color-secondary-light-disabled: oklch(
+    from var(--color-secondary-light) l var(--state-disabled-chroma) h
+  );
+
+  /* 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-hover: oklch(
+    from var(--color-tertiary) calc(l + var(--state-hover)) c h
+  );
+  --color-tertiary-active: oklch(
+    from var(--color-tertiary) calc(l + var(--state-active)) c h
+  );
+  --color-tertiary-disabled: oklch(
+    from var(--color-tertiary) l var(--state-disabled-chroma) h
+  );
+  --color-tertiary-light: oklch(
+    from var(--color-tertiary)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-tertiary-light-hover: oklch(
+    from var(--color-tertiary-light) calc(l + var(--state-hover)) c h
+  );
+  --color-tertiary-light-active: oklch(
+    from var(--color-tertiary-light) calc(l + var(--state-active)) c h
+  );
+  --color-tertiary-light-disabled: oklch(
+    from var(--color-tertiary-light) l var(--state-disabled-chroma) h
+  );
+
+  /* It is usually used to express the success, completion and opening status, and is used in scenarios with the above semantics */
+  --color-success: light-dark(
+    var(--color-emerald-500),
+    var(--color-emerald-300)
+  );
+  --color-success-hover: oklch(
+    from var(--color-success) calc(l + var(--state-hover)) c h
+  );
+  --color-success-active: oklch(
+    from var(--color-success) calc(l + var(--state-active)) c h
+  );
+  --color-success-disabled: oklch(
+    from var(--color-success) l var(--state-disabled-chroma) h
+  );
+  --color-success-light: oklch(
+    from var(--color-success)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-success-light-hover: oklch(
+    from var(--color-success-light) calc(l + var(--state-hover)) c h
+  );
+  --color-success-light-active: oklch(
+    from var(--color-success-light) calc(l + var(--state-active)) c h
+  );
+  --color-success-light-disabled: oklch(
+    from var(--color-success-light) l var(--state-disabled-chroma) h
+  );
+
+  /* It is usually used to express objective and neutral information in the context with the above semantics */
+  --color-info: light-dark(var(--color-teal-500), var(--color-cyan-300));
+  --color-info-hover: oklch(
+    from var(--color-info) calc(l + var(--state-hover)) c h
+  );
+  --color-info-active: oklch(
+    from var(--color-info) calc(l + var(--state-active)) c h
+  );
+  --color-info-disabled: oklch(
+    from var(--color-info) l var(--state-disabled-chroma) h
+  );
+  --color-info-light: oklch(
+    from var(--color-info)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-info-light-hover: oklch(
+    from var(--color-info-light) calc(l + var(--state-hover)) c h
+  );
+  --color-info-light-active: oklch(
+    from var(--color-info-light) calc(l + var(--state-active)) c h
+  );
+  --color-info-light-disabled: oklch(
+    from var(--color-info-light) l var(--state-disabled-chroma) h
+  );
+
+  /* It is usually used to express warning and unsafe state, and is used in scenarios with the above semantics */
+  --color-warning: light-dark(var(--color-yellow-500), var(--color-yellow-400));
+  --color-warning-hover: oklch(
+    from var(--color-warning) calc(l + var(--state-hover)) c h
+  );
+  --color-warning-active: oklch(
+    from var(--color-warning) calc(l + var(--state-active)) c h
+  );
+  --color-warning-disabled: oklch(
+    from var(--color-warning) l var(--state-disabled-chroma) h
+  );
+  --color-warning-light: oklch(
+    from var(--color-warning)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-warning-light-hover: oklch(
+    from var(--color-warning-light) calc(l + var(--state-hover)) c h
+  );
+  --color-warning-light-active: oklch(
+    from var(--color-warning-light) calc(l + var(--state-active)) c h
+  );
+  --color-warning-light-disabled: oklch(
+    from var(--color-warning-light) l var(--state-disabled-chroma) h
+  );
+
+  /* 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-hover: oklch(
+    from var(--color-danger) calc(l + var(--state-hover)) c h
+  );
+  --color-danger-active: oklch(
+    from var(--color-danger) calc(l + var(--state-active)) c h
+  );
+  --color-danger-disabled: oklch(
+    from var(--color-danger) l var(--state-disabled-chroma) h
+  );
+  --color-danger-light: oklch(
+    from var(--color-danger)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
+      calc(c * var(--state-light-chroma)) h
+  );
+  --color-danger-light-hover: oklch(
+    from var(--color-danger-light) calc(l + var(--state-hover)) c h
+  );
+  --color-danger-light-active: oklch(
+    from var(--color-danger-light) calc(l + var(--state-active)) c h
+  );
+  --color-danger-light-disabled: oklch(
+    from var(--color-danger-light) l var(--state-disabled-chroma) h
+  );
+
+  /* Text colors and Icon colors*/
+  /* 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-dark: var(--color-white); /* Dark mode */
+  --color-fg-primary: light-dark(var(--color-fg-light), var(--color-fg-dark));
+
+  --color-fg-secondary: oklch(
+    from var(--color-fg-primary) calc(l + var(--state-secondary-text)) c h
+  );
+  --color-fg-reverse: light-dark(var(--color-fg-dark), var(--color-fg-light));
+
+  /* Background colors */
+  /* 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-surface: oklch(
+    from var(--color-base) calc(l - var(--surface-increment)) c h
+  ); /* content that needs to be promoted on the page*/
+  --color-overlay: oklch(
+    from var(--color-base) calc(l - var(--surface-increment) * 2) c h
+  ); /* containers, modals*/
+  --color-float: oklch(
+    from var(--color-base) calc(l - var(--surface-increment) * 3) c h
+  ); /* toast */
+  --color-highlight: oklch(
+    from var(--color-base) calc(l - var(--surface-increment) * 4) c h
+  ); /* top layer */
+  --color-base-reverse: light-dark(
+    var(--color-base-dark),
+    var(--color-base-light)
+  );
+
+  /* Borders */
+  --color-border-primary: --alpha(
+    var(--color-base-reverse) /
+    var(--state-border)
+  );
+  --color-border-secondary: --alpha(
+    var(--color-base-reverse) /
+    calc(var(--state-border) * 1.5)
+  );
+  --border-width-none: 0px;
+  --border-width-sm: 1px;
+  --border-width-md: 2px;
+  --border-width-lg: 3px;
+
+  /* Links */
+  --color-link: light-dark(var(--color-blue-500), var(--color-sky-300));
+  --color-link-hover: oklch(
+    from var(--color-link) calc(l + var(--state-hover)) c h
+  );
+  --color-link-active: oklch(
+    from var(--color-link) calc(l + var(--state-active)) c h
+  );
+  --color-link-visited: oklch(
+    from var(--color-link) calc(l - var(--state-hover)) c h
+  );
+
+  /* Fill Color*/
+  /* For an element, if the background color of its container is not fixed, and the contrast between the filling color of the element and the top background color is small, use the filling color as the background color to ensure that the element will not "melt" into a certain level of background color, such as a form control.  */
+  --color-fill-base: --alpha(var(--color-base-reverse) / var(--fill-increment));
+  --color-fill-hover: --alpha(
+    var(--color-base-reverse) /
+    calc(var(--fill-increment) * 2)
+  );
+  --color-fill-active: --alpha(
+    var(--color-base-reverse) /
+    calc(var(--fill-increment) * 3)
+  );
+
+  /*Disabled state - Disabled
+  It is used to fill all kinds of forbidden elements in the interface, such as background, text, stroke, fill, etc*/
+  --color-disabled-bg: --alpha(var(--color-base-reverse) / 10%);
+  --color-disabled-fg: --alpha(
+    var(--color-fg-primary) /
+    var(--opacity-disabled)
+  );
+  --color-disabled-border: --alpha(
+    var(--color-border-primary) /
+    var(--opacity-disabled)
+  );
+  --color-disabled-fill: --alpha(
+    var(--color-fill-base) /
+    var(--opacity-disabled)
+  );
+
+  /* Spacing */
+  --spacing: 0.25rem;
+
+  /* Focus ring */
+  --default-ring-color: light-dark(var(--color-black), var(--color-white));
+  --color-ring: var(--default-ring-color);
+  --default-ring-width: 3px;
+}

package/src/tokens/_spacing.css

@@ -0,0 +1,22 @@
+@theme static {
+  /* Primitive Spacing Tokens - Utopia Fluid Scale (50-950) */
+  --spacing-50: clamp(0.125rem, 0.1033rem + 0.1087vw, 0.1875rem);
+  --spacing-100: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+  --spacing-150: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
+  --spacing-200: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
+  --spacing-250: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
+  --spacing-300: clamp(1.4375rem, 1.394rem + 0.2174vw, 1.5625rem);
+  --spacing-350: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
+  --spacing-400: clamp(2rem, 1.9348rem + 0.3261vw, 2.1875rem);
+  --spacing-450: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
+  --spacing-500: clamp(2.5625rem, 2.4755rem + 0.4348vw, 2.8125rem);
+  --spacing-550: clamp(2.8125rem, 2.7038rem + 0.5435vw, 3.125rem);
+  --spacing-600: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
+  --spacing-650: clamp(3.6875rem, 3.5571rem + 0.6522vw, 4.0625rem);
+  --spacing-700: clamp(3.9375rem, 3.7853rem + 0.7609vw, 4.375rem);
+  --spacing-750: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
+  --spacing-800: clamp(5.0625rem, 4.8668rem + 0.9783vw, 5.625rem);
+  --spacing-850: clamp(5.625rem, 5.4076rem + 1.087vw, 6.25rem);
+  --spacing-900: clamp(6.1875rem, 5.9484rem + 1.1957vw, 6.875rem);
+  --spacing-950: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
+}

package/src/tokens/_typography.css

@@ -0,0 +1,17 @@
+@theme static {
+  /* Primitive Typography Tokens - Utopia fluid typography */
+  --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 WEIGHT === */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}