@nexus-cross/design-system 1.1.1 → 2.0.0

package/dist/modal/index.js

@@ -1,51 +1,51 @@
 'use strict';
 
-var chunk7F4SOLAC_js = require('../chunks/chunk-7F4SOLAC.js');
+var chunkU53UA76K_js = require('../chunks/chunk-U53UA76K.js');
+require('../chunks/chunk-HHXDOKXY.js');
 require('../chunks/chunk-NHDGKOAM.js');
 require('../chunks/chunk-T2IY2TSR.js');
 require('../chunks/chunk-XEHFB62A.js');
 require('../chunks/chunk-INP2AH3B.js');
 var chunkHUPAHDJ7_js = require('../chunks/chunk-HUPAHDJ7.js');
-require('../chunks/chunk-HHXDOKXY.js');
 require('../chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "ModalContainer", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalContainer_default; }
+  get: function () { return chunkU53UA76K_js.ModalContainer_default; }
 });
 Object.defineProperty(exports, "ModalPortalTarget", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalPortalTarget_default; }
+  get: function () { return chunkU53UA76K_js.ModalPortalTarget_default; }
 });
 Object.defineProperty(exports, "ModalTemplate", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalTemplate_default; }
+  get: function () { return chunkU53UA76K_js.ModalTemplate_default; }
 });
 Object.defineProperty(exports, "checkModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.checkModal; }
+  get: function () { return chunkU53UA76K_js.checkModal; }
 });
 Object.defineProperty(exports, "closeModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.closeModal; }
+  get: function () { return chunkU53UA76K_js.closeModal; }
 });
 Object.defineProperty(exports, "getModalDefaultOption", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.getModalDefaultOption; }
+  get: function () { return chunkU53UA76K_js.getModalDefaultOption; }
 });
 Object.defineProperty(exports, "modal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "openModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "resetModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.resetModal; }
+  get: function () { return chunkU53UA76K_js.resetModal; }
 });
 Object.defineProperty(exports, "useModal", {
   enumerable: true,

package/dist/modal/index.mjs

@@ -1,8 +1,8 @@
-export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from '../chunks/chunk-5ZVPTIL3.mjs';
+export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from '../chunks/chunk-3VFBPFZF.mjs';
+import '../chunks/chunk-U56AGSLE.mjs';
 import '../chunks/chunk-4J3GCZ7W.mjs';
 import '../chunks/chunk-54IA2P2Z.mjs';
 import '../chunks/chunk-YEWKPWK3.mjs';
 import '../chunks/chunk-OTGS6BDQ.mjs';
 export { useModal } from '../chunks/chunk-6H7V2I3X.mjs';
-import '../chunks/chunk-U56AGSLE.mjs';
 import '../chunks/chunk-MCKOWMLS.mjs';

package/dist/nx-image.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkNZHK76R3_js = require('./chunks/chunk-NZHK76R3.js');
+var chunkLYPBQI3Y_js = require('./chunks/chunk-LYPBQI3Y.js');
 require('./chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "NxImage", {
   enumerable: true,
-  get: function () { return chunkNZHK76R3_js.NxImage; }
+  get: function () { return chunkLYPBQI3Y_js.NxImage; }
 });

package/dist/nx-image.mjs

@@ -1,2 +1,2 @@
-export { NxImage } from './chunks/chunk-6BWOKTVQ.mjs';
+export { NxImage } from './chunks/chunk-WZFKTTVX.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/tailwind-v4.css

@@ -0,0 +1,19 @@
+/*!
+ * @nexus-cross/design-system — Tailwind v4 Single-Import Preset
+ *
+ * Use after `@import 'tailwindcss';` in your app's globals.css:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@nexus-cross/design-system/tailwind-v4.css';
+ *
+ * Loads NEXUS company tokens (vendored sub-path) and design-system component
+ * CSS into Tailwind's `components` layer (Tailwind order: base < components <
+ * utilities), so `className="bg-red-500"` overrides ALWAYS win over component
+ * styles.
+ *
+ * Need domain tokens? Add a third import in your globals.css:
+ *   @import '@nexus-cross/design-system/tokens-domains/prediction.css';
+ */
+
+@import './tokens/company.css';
+@import './styles.css' layer(components);

package/dist/tokens/TOKENS.md

@@ -0,0 +1,426 @@
+# @nexus-cross/tokens — Design Token Reference
+
+> NEXUS design token reference for AI coding assistants.
+> Includes Tailwind v4 utility classes and CSS variables.
+
+## Installation & Usage
+
+### Tailwind v4 (Recommended)
+```css
+@import "tailwindcss";
+@import "@nexus-cross/tokens/company.css";
+```
+
+### Tailwind v3
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@nexus-cross/tokens/tailwind")],
+};
+```
+
+### Plain CSS (without Tailwind)
+```css
+@import "@nexus-cross/tokens/css";
+```
+
+### JS/TS API
+```ts
+import { getTheme } from "@nexus-cross/tokens";
+const { semantic } = getTheme("dark");
+// semantic.bg.default.base → "#1E232E"
+```
+
+## Color Tokens (@theme → Tailwind Classes)
+
+### Background
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-bg-default` | `--color-bg-default` | Default background | `#FFFFFF` | `#1E232E` |
+| `bg-bg-subtle` | `--color-bg-subtle` | Subtle background | `#F3F6F8` | `#161A21` |
+| `bg-bg-strong` | `--color-bg-strong` | Strong background | `#EAEDEE` | `#000000` |
+
+### Surface
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-surface-default` | `--color-surface-default` | Default surface | `#FFFFFF` | `#1E232E` |
+| `bg-surface-default-dim` | `--color-surface-default-dim` | Default surface - dim | `#F3F6F8` | `#161A21` |
+| `bg-surface-default-hover` | `--color-surface-default-hover` | Default surface - hover | `#F3F6F8` | `#252B39` |
+| `bg-surface-default-pressed` | `--color-surface-default-pressed` | Default surface - pressed | `#EAEDEE` | `#363B4C` |
+| `bg-surface-default-disabled` | `--color-surface-default-disabled` | Default surface - disabled | `#EAEDEE` | `#363B4C` |
+| `bg-surface-subtle` | `--color-surface-subtle` | Subtle surface | `#F3F6F8` | `#252B39` |
+| `bg-surface-subtle-hover` | `--color-surface-subtle-hover` | Subtle surface - hover | `#EAEDEE` | `#363B4C` |
+| `bg-surface-strong` | `--color-surface-strong` | Strong surface | `#EAEDEE` | `#363B4C` |
+| `bg-surface-inverted` | `--color-surface-inverted` | Inverted surface | `#161A21` | `#F3F6F8` |
+
+### Text
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `text-text-highlight` | `--color-text-highlight` | Highlight text | `#000000` | `#FFFFFF` |
+| `text-text-primary` | `--color-text-primary` | Primary text | `#1E232E` | `#EAEDEE` |
+| `text-text-primary-hover` | `--color-text-primary-hover` | Primary text - hover | `#000000` | `#FFFFFF` |
+| `text-text-primary-pressed` | `--color-text-primary-pressed` | Primary text - pressed | `#000000` | `#FFFFFF` |
+| `text-text-secondary` | `--color-text-secondary` | Secondary text | `#7E8597` | `#A2AABA` |
+| `text-text-secondary-hover` | `--color-text-secondary-hover` | Secondary text - hover | `#3B4153` | `#C6D0DA` |
+| `text-text-secondary-pressed` | `--color-text-secondary-pressed` | Secondary text - pressed | `#3B4153` | `#C6D0DA` |
+| `text-text-tertiary` | `--color-text-tertiary` | Tertiary text | `#7E8597` | `#7E8597` |
+| `text-text-tertiary-hover` | `--color-text-tertiary-hover` | Tertiary text - hover | `#62697A` | `#A2AABA` |
+| `text-text-tertiary-pressed` | `--color-text-tertiary-pressed` | Tertiary text - pressed | `#62697A` | `#A2AABA` |
+| `text-text-muted` | `--color-text-muted` | Muted text | `#A2AABA` | `#62697A` |
+| `text-text-inverted` | `--color-text-inverted` | Inverted text | `#FFFFFF` | `#000000` |
+
+### Icon
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `text-icon-highlight` | `--color-icon-highlight` | Highlight icon | `#000000` | `#FFFFFF` |
+| `text-icon-primary` | `--color-icon-primary` | Primary icon | `#1E232E` | `#EAEDEE` |
+| `text-icon-primary-hover` | `--color-icon-primary-hover` | Primary icon - hover | `#000000` | `#FFFFFF` |
+| `text-icon-primary-pressed` | `--color-icon-primary-pressed` | Primary icon - pressed | `#000000` | `#FFFFFF` |
+| `text-icon-secondary` | `--color-icon-secondary` | Secondary icon | `#7E8597` | `#A2AABA` |
+| `text-icon-secondary-hover` | `--color-icon-secondary-hover` | Secondary icon - hover | `#3B4153` | `#C6D0DA` |
+| `text-icon-secondary-pressed` | `--color-icon-secondary-pressed` | Secondary icon - pressed | `#3B4153` | `#C6D0DA` |
+| `text-icon-tertiary` | `--color-icon-tertiary` | Tertiary icon | `#7E8597` | `#7E8597` |
+| `text-icon-tertiary-hover` | `--color-icon-tertiary-hover` | Tertiary icon - hover | `#62697A` | `#A2AABA` |
+| `text-icon-tertiary-pressed` | `--color-icon-tertiary-pressed` | Tertiary icon - pressed | `#62697A` | `#A2AABA` |
+| `text-icon-muted` | `--color-icon-muted` | Muted icon | `#A2AABA` | `#62697A` |
+| `text-icon-inverted` | `--color-icon-inverted` | Inverted icon | `#FFFFFF` | `#000000` |
+
+### Border
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `border-border-default` | `--color-border-default` | Default border | `#EAEDEE` | `#3B4153` |
+| `border-border-default-hover` | `--color-border-default-hover` | Default border - hover | `#A2AABA` | `#62697A` |
+| `border-border-default-focus` | `--color-border-default-focus` | Default border - focus | `#62697A` | `#A2AABA` |
+| `border-border-subtle` | `--color-border-subtle` | Subtle border | `#F3F6F8` | `#252B39` |
+| `border-border-medium` | `--color-border-medium` | Medium border | `#C6D0DA` | `#62697A` |
+| `border-border-strong` | `--color-border-strong` | Strong border | `#000000` | `#FFFFFF` |
+
+### Accent
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-accent-primary` | `--color-accent-primary` | Primary accent | `#09B498` | `#00D5AA` |
+| `bg-accent-primary-hover` | `--color-accent-primary-hover` | Primary accent - hover | `#07C6A6` | `#12DFB6` |
+| `bg-accent-primary-pressed` | `--color-accent-primary-pressed` | Primary accent - pressed | `#0F947E` | `#07C6A6` |
+| `bg-accent-primary-disabled` | `--color-accent-primary-disabled` | Primary accent - disabled | `#CDF4ED` | `#123F3C` |
+| `bg-accent-primary-focus` | `--color-accent-primary-focus` | Primary accent - focus | `#09B498` | `#07C6A6` |
+| `bg-accent-primary-intense` | `--color-accent-primary-intense` | Primary accent - intense | `#0F947E` | `#12DFB6` |
+| `bg-accent-primary-dim` | `--color-accent-primary-dim` | Primary accent - dim | `#83DCC9` | `#0F947E` |
+| `bg-accent-on-primary` | `--color-accent-on-primary` | Foreground on accent | `#FFFFFF` | `#000000` |
+| `bg-accent-secondary` | `--color-accent-secondary` |  | `#7346F3` | `#7D4FFF` |
+| `bg-accent-secondary-intense` | `--color-accent-secondary-intense` |  | `#7346F3` | `#9975FF` |
+| `bg-accent-secondary-dim` | `--color-accent-secondary-dim` |  | `#E0CDF8` | `#7346F3` |
+| `bg-accent-secondary-hover` | `--color-accent-secondary-hover` |  | `#7D4FFF` | `#9975FF` |
+| `bg-accent-secondary-pressed` | `--color-accent-secondary-pressed` |  | `#9975FF` | `#7346F3` |
+| `bg-accent-secondary-disabled` | `--color-accent-secondary-disabled` |  | `#F4EBFF` | `#3A1D7C` |
+| `bg-accent-secondary-focus` | `--color-accent-secondary-focus` |  | `#7D4FFF` | `#9975FF` |
+| `bg-accent-on-secondary` | `--color-accent-on-secondary` |  | `#FFFFFF` | `#FFFFFF` |
+| `bg-accent-primary-bg` | `--color-accent-primary-bg` |  | `#EAFAF6` | `#113535` |
+| `bg-accent-secondary-bg` | `--color-accent-secondary-bg` |  | `#F9F5FF` | `#2F1766` |
+
+### Status
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-status-success` | `--color-status-success` | Success | `#00B784` | `#02D69C` |
+| `bg-status-success-hover` | `--color-status-success-hover` | Success - hover | `#00C890` | `#0BDFA5` |
+| `bg-status-success-pressed` | `--color-status-success-pressed` | Success - pressed | `#1B9674` | `#00C890` |
+| `bg-status-success-disabled` | `--color-status-success-disabled` | Success - disabled | `#CDF4EA` | `#0D4431` |
+| `bg-status-success-intense` | `--color-status-success-intense` | Success - intense | `#1B9674` | `#0BDFA5` |
+| `bg-status-success-dim` | `--color-status-success-dim` | Success - dim | `#9FECD7` | `#1B9674` |
+| `bg-status-warning` | `--color-status-warning` | Warning | `#FF9D00` | `#FFAA00` |
+| `bg-status-warning-hover` | `--color-status-warning-hover` | Warning - hover | `#FFAA00` | `#FF9D00` |
+| `bg-status-warning-pressed` | `--color-status-warning-pressed` | Warning - pressed | `#F9C127` | `#F9C127` |
+| `bg-status-warning-disabled` | `--color-status-warning-disabled` | Warning - disabled | `#FFF2D2` | `#4A3F2B` |
+| `bg-status-warning-intense` | `--color-status-warning-intense` | Warning - intense | `#D9840C` | `#FFAA00` |
+| `bg-status-warning-dim` | `--color-status-warning-dim` | Warning - dim | `#FFDB6E` | `#9F701A` |
+| `bg-status-danger` | `--color-status-danger` | Danger | `#DB0A2D` | `#DB0A2D` |
+| `bg-status-danger-hover` | `--color-status-danger-hover` | Danger - hover | `#E62848` | `#E62848` |
+| `bg-status-danger-pressed` | `--color-status-danger-pressed` | Danger - pressed | `#AF2239` | `#D20625` |
+| `bg-status-danger-disabled` | `--color-status-danger-disabled` | Danger - disabled | `#FDE8EB` | `#5B121E` |
+| `bg-status-danger-intense` | `--color-status-danger-intense` | Danger - intense | `#D20625` | `#EC3C56` |
+| `bg-status-danger-dim` | `--color-status-danger-dim` | Danger - dim | `#FFBBC4` | `#AF2239` |
+| `bg-status-danger-focus` | `--color-status-danger-focus` | Danger - focus | `#E62848` | `#AF2239` |
+| `bg-status-info` | `--color-status-info` | Info | `#0095FF` | `#0095FF` |
+| `bg-status-info-hover` | `--color-status-info-hover` | Info - hover | `#20B1FF` | `#20B1FF` |
+| `bg-status-info-pressed` | `--color-status-info-pressed` | Info - pressed | `#1087FF` | `#1087FF` |
+| `bg-status-info-disabled` | `--color-status-info-disabled` | Info - disabled | `#CCEFFF` | `#143A67` |
+| `bg-status-info-intense` | `--color-status-info-intense` | Info - intense | `#1672D0` | `#20B1FF` |
+| `bg-status-info-dim` | `--color-status-info-dim` | Info - dim | `#92DDFF` | `#1672D0` |
+
+### Overlay
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-overlay-dim` | `--color-overlay-dim` |  | `#000000` | `#000000` |
+| `bg-overlay-light` | `--color-overlay-light` |  | `#000000` | `#000000` |
+
+### Static
+
+| Tailwind Class | CSS Variable | Purpose | Light | Dark |
+|---|---|---|---|---|
+| `bg-static-white` | `--color-static-white` | Static white | `#FFFFFF` | `#FFFFFF` |
+| `bg-static-black` | `--color-static-black` | Static black | `#000000` | `#000000` |
+
+### Shadow
+
+| Tailwind Class | CSS Variable | Value |
+|---|---|---|
+| `shadow-none` | `--shadow-none` | `none` |
+| `shadow-sm` | `--shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.12)` |
+| `shadow-md` | `--shadow-md` | `0 1px 3px 0 rgb(0 0 0 / 0.12)` |
+| `shadow-lg` | `--shadow-lg` | `0 2px 8px -1px rgb(0 0 0 / 0.12)` |
+| `shadow-xl` | `--shadow-xl` | `0 4px 15px -3px rgb(0 0 0 / 0.12)` |
+| `shadow-2xl` | `--shadow-2xl` | `0 5px 25px -5px rgb(0 0 0 / 0.12)` |
+
+### Radius
+
+| Tailwind Class | CSS Variable | Value |
+|---|---|---|
+| `rounded-corner-none` | `--radius-corner-none` | `0px` |
+| `rounded-corner-sm` | `--radius-corner-sm` | `4px` |
+| `rounded-corner-md` | `--radius-corner-md` | `8px` |
+| `rounded-corner-lg` | `--radius-corner-lg` | `12px` |
+| `rounded-corner-xl` | `--radius-corner-xl` | `16px` |
+| `rounded-corner-2xl` | `--radius-corner-2xl` | `24px` |
+| `rounded-corner-full` | `--radius-corner-full` | `9999px` |
+
+### Breakpoint
+
+| Tailwind Class | CSS Variable | Value |
+|---|---|---|
+| `var(--breakpoint-screen-xs)` | `--breakpoint-screen-xs` | `320px` |
+| `var(--breakpoint-screen-sm)` | `--breakpoint-screen-sm` | `640px` |
+| `var(--breakpoint-screen-md)` | `--breakpoint-screen-md` | `768px` |
+| `var(--breakpoint-screen-lg)` | `--breakpoint-screen-lg` | `1024px` |
+| `var(--breakpoint-screen-xl)` | `--breakpoint-screen-xl` | `1280px` |
+| `var(--breakpoint-screen-2xl)` | `--breakpoint-screen-2xl` | `1440px` |
+
+### Typography
+
+| Tailwind Class | CSS Variable | Value |
+|---|---|---|
+| `text-text-xs` | `--text-text-xs` | `0.75rem` |
+| `text-text-sm` | `--text-text-sm` | `0.875rem` |
+| `text-text-base` | `--text-text-base` | `1rem` |
+| `text-text-lg` | `--text-text-lg` | `1.125rem` |
+| `text-text-xl` | `--text-text-xl` | `1.25rem` |
+| `text-text-medium-xs` | `--text-text-medium-xs` | `0.75rem` |
+| `text-text-medium-sm` | `--text-text-medium-sm` | `0.875rem` |
+| `text-text-medium-base` | `--text-text-medium-base` | `1rem` |
+| `text-text-medium-lg` | `--text-text-medium-lg` | `1.125rem` |
+| `text-text-medium-xl` | `--text-text-medium-xl` | `1.25rem` |
+| `text-text-semibold-xs` | `--text-text-semibold-xs` | `0.75rem` |
+| `text-text-semibold-sm` | `--text-text-semibold-sm` | `0.875rem` |
+| `text-text-semibold-base` | `--text-text-semibold-base` | `1rem` |
+| `text-text-semibold-lg` | `--text-text-semibold-lg` | `1.125rem` |
+| `text-text-semibold-xl` | `--text-text-semibold-xl` | `1.25rem` |
+| `text-heading-h7` | `--text-heading-h7` | `0.875rem` |
+| `text-heading-h6` | `--text-heading-h6` | `1rem` |
+| `text-heading-h5` | `--text-heading-h5` | `1.125rem` |
+| `text-heading-h4` | `--text-heading-h4` | `1.25rem` |
+| `text-heading-h3` | `--text-heading-h3` | `1.5rem` |
+| `text-heading-h2` | `--text-heading-h2` | `1.875rem` |
+| `text-heading-h1` | `--text-heading-h1` | `2.25rem` |
+| `text-display-sm` | `--text-display-sm` | `2.25rem` |
+| `text-display-md` | `--text-display-md` | `3rem` |
+| `text-display-lg` | `--text-display-lg` | `3.75rem` |
+| `text-label-sm` | `--text-label-sm` | `0.75rem` |
+| `text-label-md` | `--text-label-md` | `0.875rem` |
+| `text-label-lg` | `--text-label-lg` | `1rem` |
+| `text-label-semibold-sm` | `--text-label-semibold-sm` | `0.75rem` |
+| `text-label-semibold-md` | `--text-label-semibold-md` | `0.875rem` |
+| `text-label-semibold-lg` | `--text-label-semibold-lg` | `1rem` |
+
+### Easing
+
+| Tailwind Class | CSS Variable | Value |
+|---|---|---|
+| `ease-transition-instant` | `--ease-transition-instant` | `linear` |
+| `ease-transition-fast` | `--ease-transition-fast` | `cubic-bezier(0, 0, 0.2, 1)` |
+| `ease-transition-normal` | `--ease-transition-normal` | `cubic-bezier(0, 0, 0.2, 1)` |
+| `ease-transition-slow` | `--ease-transition-slow` | `cubic-bezier(0, 0, 0.2, 1)` |
+| `ease-animation-enter` | `--ease-animation-enter` | `cubic-bezier(0, 0, 0.2, 1)` |
+| `ease-animation-exit` | `--ease-animation-exit` | `cubic-bezier(0.4, 0, 1, 1)` |
+| `ease-animation-bounce` | `--ease-animation-bounce` | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` |
+
+## Foundation Tokens (:root → use with var())
+
+### Spacing
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--spacing-padding-none` | `0` | `spacing-padding: var(--spacing-padding-none)` |
+| `--spacing-padding-2xs` | `0.25rem` | `spacing-padding: var(--spacing-padding-2xs)` |
+| `--spacing-padding-xs` | `0.5rem` | `spacing-padding: var(--spacing-padding-xs)` |
+| `--spacing-padding-sm` | `0.75rem` | `spacing-padding: var(--spacing-padding-sm)` |
+| `--spacing-padding-md` | `1rem` | `spacing-padding: var(--spacing-padding-md)` |
+| `--spacing-padding-lg` | `1.5rem` | `spacing-padding: var(--spacing-padding-lg)` |
+| `--spacing-padding-xl` | `2rem` | `spacing-padding: var(--spacing-padding-xl)` |
+| `--spacing-padding-2xl` | `2.5rem` | `spacing-padding: var(--spacing-padding-2xl)` |
+| `--spacing-gap-none` | `0` | `spacing-gap: var(--spacing-gap-none)` |
+| `--spacing-gap-xs` | `0.25rem` | `spacing-gap: var(--spacing-gap-xs)` |
+| `--spacing-gap-sm` | `0.5rem` | `spacing-gap: var(--spacing-gap-sm)` |
+| `--spacing-gap-md` | `1rem` | `spacing-gap: var(--spacing-gap-md)` |
+| `--spacing-gap-lg` | `1.5rem` | `spacing-gap: var(--spacing-gap-lg)` |
+| `--spacing-gap-xl` | `2rem` | `spacing-gap: var(--spacing-gap-xl)` |
+
+### Border Width
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--border-width-stroke-none` | `0px` | `border-width: var(--border-width-stroke-none)` |
+| `--border-width-stroke-hairline` | `0.5px` | `border-width: var(--border-width-stroke-hairline)` |
+| `--border-width-stroke-thin` | `1px` | `border-width: var(--border-width-stroke-thin)` |
+| `--border-width-stroke-default` | `1px` | `border-width: var(--border-width-stroke-default)` |
+| `--border-width-stroke-thick` | `1.5px` | `border-width: var(--border-width-stroke-thick)` |
+| `--border-width-stroke-heavy` | `2px` | `border-width: var(--border-width-stroke-heavy)` |
+
+### Opacity
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--opacity-overlay-dim` | `0.5` | `opacity-overlay: var(--opacity-overlay-dim)` |
+| `--opacity-overlay-light` | `0.3` | `opacity-overlay: var(--opacity-overlay-light)` |
+| `--opacity-overlay-heavy` | `0.7` | `opacity-overlay: var(--opacity-overlay-heavy)` |
+| `--opacity-disabled-element` | `0.4` | `opacity-disabled: var(--opacity-disabled-element)` |
+| `--opacity-disabled-text` | `0.5` | `opacity-disabled: var(--opacity-disabled-text)` |
+| `--opacity-hover-subtle` | `0.05` | `opacity-hover: var(--opacity-hover-subtle)` |
+| `--opacity-hover-default` | `0.1` | `opacity-hover: var(--opacity-hover-default)` |
+| `--opacity-pressed-subtle` | `0.1` | `opacity-pressed: var(--opacity-pressed-subtle)` |
+| `--opacity-pressed-default` | `0.2` | `opacity-pressed: var(--opacity-pressed-default)` |
+
+### Size
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--size-icon-xs` | `12px` | `size-icon: var(--size-icon-xs)` |
+| `--size-icon-sm` | `16px` | `size-icon: var(--size-icon-sm)` |
+| `--size-icon-md` | `20px` | `size-icon: var(--size-icon-md)` |
+| `--size-icon-lg` | `24px` | `size-icon: var(--size-icon-lg)` |
+| `--size-icon-xl` | `32px` | `size-icon: var(--size-icon-xl)` |
+| `--size-control-xs` | `24px` | `size-control: var(--size-control-xs)` |
+| `--size-control-sm` | `32px` | `size-control: var(--size-control-sm)` |
+| `--size-control-md` | `40px` | `size-control: var(--size-control-md)` |
+| `--size-control-lg` | `48px` | `size-control: var(--size-control-lg)` |
+| `--size-touch-min` | `44px` | `size-touch: var(--size-touch-min)` |
+| `--size-avatar-xs` | `24px` | `size-avatar: var(--size-avatar-xs)` |
+| `--size-avatar-sm` | `32px` | `size-avatar: var(--size-avatar-sm)` |
+| `--size-avatar-md` | `40px` | `size-avatar: var(--size-avatar-md)` |
+| `--size-avatar-lg` | `48px` | `size-avatar: var(--size-avatar-lg)` |
+| `--size-avatar-xl` | `64px` | `size-avatar: var(--size-avatar-xl)` |
+| `--size-avatar-2xl` | `96px` | `size-avatar: var(--size-avatar-2xl)` |
+
+### Z-Index
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--z-index-layer-base` | `0` | `z-index: var(--z-index-layer-base)` |
+| `--z-index-layer-dropdown` | `10` | `z-index: var(--z-index-layer-dropdown)` |
+| `--z-index-layer-sticky` | `20` | `z-index: var(--z-index-layer-sticky)` |
+| `--z-index-layer-popover` | `30` | `z-index: var(--z-index-layer-popover)` |
+| `--z-index-layer-modal` | `40` | `z-index: var(--z-index-layer-modal)` |
+| `--z-index-layer-toast` | `50` | `z-index: var(--z-index-layer-toast)` |
+| `--z-index-layer-tooltip` | `100` | `z-index: var(--z-index-layer-tooltip)` |
+
+### Duration
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--duration-transition-instant` | `0ms` | `duration-transition: var(--duration-transition-instant)` |
+| `--duration-transition-fast` | `150ms` | `duration-transition: var(--duration-transition-fast)` |
+| `--duration-transition-normal` | `200ms` | `duration-transition: var(--duration-transition-normal)` |
+| `--duration-transition-slow` | `300ms` | `duration-transition: var(--duration-transition-slow)` |
+| `--duration-animation-enter` | `200ms` | `duration-animation: var(--duration-animation-enter)` |
+| `--duration-animation-exit` | `150ms` | `duration-animation: var(--duration-animation-exit)` |
+| `--duration-animation-bounce` | `500ms` | `duration-animation: var(--duration-animation-bounce)` |
+
+### Font Weight
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--font-weight-text-xs` | `400` | `font-weight: var(--font-weight-text-xs)` |
+| `--font-weight-text-sm` | `400` | `font-weight: var(--font-weight-text-sm)` |
+| `--font-weight-text-base` | `400` | `font-weight: var(--font-weight-text-base)` |
+| `--font-weight-text-lg` | `400` | `font-weight: var(--font-weight-text-lg)` |
+| `--font-weight-text-xl` | `400` | `font-weight: var(--font-weight-text-xl)` |
+| `--font-weight-text-medium-xs` | `500` | `font-weight: var(--font-weight-text-medium-xs)` |
+| `--font-weight-text-medium-sm` | `500` | `font-weight: var(--font-weight-text-medium-sm)` |
+| `--font-weight-text-medium-base` | `500` | `font-weight: var(--font-weight-text-medium-base)` |
+| `--font-weight-text-medium-lg` | `500` | `font-weight: var(--font-weight-text-medium-lg)` |
+| `--font-weight-text-medium-xl` | `500` | `font-weight: var(--font-weight-text-medium-xl)` |
+| `--font-weight-text-semibold-xs` | `600` | `font-weight: var(--font-weight-text-semibold-xs)` |
+| `--font-weight-text-semibold-sm` | `600` | `font-weight: var(--font-weight-text-semibold-sm)` |
+| `--font-weight-text-semibold-base` | `600` | `font-weight: var(--font-weight-text-semibold-base)` |
+| `--font-weight-text-semibold-lg` | `600` | `font-weight: var(--font-weight-text-semibold-lg)` |
+| `--font-weight-text-semibold-xl` | `600` | `font-weight: var(--font-weight-text-semibold-xl)` |
+| `--font-weight-heading-h7` | `600` | `font-weight: var(--font-weight-heading-h7)` |
+| `--font-weight-heading-h6` | `600` | `font-weight: var(--font-weight-heading-h6)` |
+| `--font-weight-heading-h5` | `600` | `font-weight: var(--font-weight-heading-h5)` |
+| `--font-weight-heading-h4` | `600` | `font-weight: var(--font-weight-heading-h4)` |
+| `--font-weight-heading-h3` | `600` | `font-weight: var(--font-weight-heading-h3)` |
+| `--font-weight-heading-h2` | `700` | `font-weight: var(--font-weight-heading-h2)` |
+| `--font-weight-heading-h1` | `700` | `font-weight: var(--font-weight-heading-h1)` |
+| `--font-weight-display-sm` | `700` | `font-weight: var(--font-weight-display-sm)` |
+| `--font-weight-display-md` | `700` | `font-weight: var(--font-weight-display-md)` |
+| `--font-weight-display-lg` | `700` | `font-weight: var(--font-weight-display-lg)` |
+| `--font-weight-label-sm` | `500` | `font-weight: var(--font-weight-label-sm)` |
+| `--font-weight-label-md` | `500` | `font-weight: var(--font-weight-label-md)` |
+| `--font-weight-label-lg` | `500` | `font-weight: var(--font-weight-label-lg)` |
+| `--font-weight-label-semibold-sm` | `600` | `font-weight: var(--font-weight-label-semibold-sm)` |
+| `--font-weight-label-semibold-md` | `600` | `font-weight: var(--font-weight-label-semibold-md)` |
+| `--font-weight-label-semibold-lg` | `600` | `font-weight: var(--font-weight-label-semibold-lg)` |
+
+### Letter Spacing
+
+| CSS Variable | Value | Example |
+|---|---|---|
+| `--letter-spacing-text-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-xs)` |
+| `--letter-spacing-text-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-sm)` |
+| `--letter-spacing-text-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-base)` |
+| `--letter-spacing-text-lg` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-lg)` |
+| `--letter-spacing-text-xl` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-xl)` |
+| `--letter-spacing-text-medium-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-xs)` |
+| `--letter-spacing-text-medium-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-sm)` |
+| `--letter-spacing-text-medium-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-base)` |
+| `--letter-spacing-text-medium-lg` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-lg)` |
+| `--letter-spacing-text-medium-xl` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-xl)` |
+| `--letter-spacing-text-semibold-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-xs)` |
+| `--letter-spacing-text-semibold-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-sm)` |
+| `--letter-spacing-text-semibold-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-base)` |
+| `--letter-spacing-text-semibold-lg` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-lg)` |
+| `--letter-spacing-text-semibold-xl` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-xl)` |
+| `--letter-spacing-heading-h7` | `0` | `letter-spacing: var(--letter-spacing-heading-h7)` |
+| `--letter-spacing-heading-h6` | `0` | `letter-spacing: var(--letter-spacing-heading-h6)` |
+| `--letter-spacing-heading-h5` | `0` | `letter-spacing: var(--letter-spacing-heading-h5)` |
+| `--letter-spacing-heading-h4` | `0` | `letter-spacing: var(--letter-spacing-heading-h4)` |
+| `--letter-spacing-heading-h3` | `0` | `letter-spacing: var(--letter-spacing-heading-h3)` |
+| `--letter-spacing-heading-h2` | `0` | `letter-spacing: var(--letter-spacing-heading-h2)` |
+| `--letter-spacing-heading-h1` | `0` | `letter-spacing: var(--letter-spacing-heading-h1)` |
+| `--letter-spacing-display-sm` | `0` | `letter-spacing: var(--letter-spacing-display-sm)` |
+| `--letter-spacing-display-md` | `0` | `letter-spacing: var(--letter-spacing-display-md)` |
+| `--letter-spacing-display-lg` | `0` | `letter-spacing: var(--letter-spacing-display-lg)` |
+| `--letter-spacing-label-sm` | `0` | `letter-spacing: var(--letter-spacing-label-sm)` |
+| `--letter-spacing-label-md` | `0` | `letter-spacing: var(--letter-spacing-label-md)` |
+| `--letter-spacing-label-lg` | `0` | `letter-spacing: var(--letter-spacing-label-lg)` |
+| `--letter-spacing-label-semibold-sm` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-sm)` |
+| `--letter-spacing-label-semibold-md` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-md)` |
+| `--letter-spacing-label-semibold-lg` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-lg)` |
+
+## Usage Guidelines
+
+- **Background**: use `bg-bg-*` or `bg-surface-*`
+- **Text**: use `text-text-*`
+- **Icon**: use `text-icon-*`
+- **Border**: use `border-border-*`
+- **Accent/CTA**: use `bg-accent-*`, `text-accent-*`
+- **Status**: use `text-status-*`, `bg-status-*`
+- **Dark mode**: toggle via `.dark` class for automatic CSS switching
+- **Spacing**: `p-[var(--spacing-padding-md)]`, `gap-[var(--spacing-gap-sm)]`
+- **Size**: `w-[var(--size-icon-md)]`, `h-[var(--size-control-lg)]`
+- **z-index**: `z-[var(--z-index-layer-modal)]`