@vellira-ui/tokens 2.35.1 → 2.37.0

package/dist/generated/token-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../src/generated/token-types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,UAAU,6CAA8C,CAAC;AAEtE,eAAO,MAAM,eAAe,05EAqHlB,CAAC;AAEX,eAAO,MAAM,kBAAkB,q+MAwMrB,CAAC;AAEX,eAAO,MAAM,mBAAmB,8ziFAutDtB,CAAC;AAEX,eAAO,MAAM,cAAc,ypDA+DjB,CAAC;AAEX,eAAO,MAAM,UAAU,qz3FAglEb,CAAC;AAEX,eAAO,MAAM,oBAAoB,w2BAgDvB,CAAC;AAEX,eAAO,MAAM,qBAAqB,w9zEAkhExB,CAAC;AAEX,eAAO,MAAM,gBAAgB,ww1EA8jEnB,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACxC,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACjB,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAClB,OAAO,GACP,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACjB,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACtB,CAAC,CAAC,CAAC,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,UAAU,CAAC,CAAC;AAC7D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,SAAS,CAAC,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,iBAAiB,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;AACnD,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AAC7D,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../src/generated/token-types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,UAAU,6CAA8C,CAAC;AAEtE,eAAO,MAAM,eAAe,05EAqHlB,CAAC;AAEX,eAAO,MAAM,kBAAkB,q+MAwMrB,CAAC;AAEX,eAAO,MAAM,mBAAmB,uxkFAivDtB,CAAC;AAEX,eAAO,MAAM,cAAc,ypDA+DjB,CAAC;AAEX,eAAO,MAAM,UAAU,8w5FA0mEb,CAAC;AAEX,eAAO,MAAM,oBAAoB,w2BAgDvB,CAAC;AAEX,eAAO,MAAM,qBAAqB,0t1EA4iExB,CAAC;AAEX,eAAO,MAAM,gBAAgB,0g3EAwlEnB,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACxC,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACjB,MAAM,GACN,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAClB,OAAO,GACP,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACjB,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACtB,CAAC,CAAC,CAAC,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,UAAU,CAAC,CAAC;AAC7D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,SAAS,CAAC,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,iBAAiB,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;AACnD,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AAC7D,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/generated/token-types.js

@@ -1204,6 +1204,7 @@ export const componentTokenPaths = [
     'components.input.warning.soft.hover.fg',
     'components.input.warning.soft.hover.icon',
     'components.input.warning.soft.hover.placeholder',
+    'components.modal.body.paddingBottom',
     'components.modal.closeButton.default.bg',
     'components.modal.closeButton.default.border',
     'components.modal.closeButton.default.fg',
@@ -1217,15 +1218,40 @@ export const componentTokenPaths = [
     'components.modal.closeButton.hover.bg',
     'components.modal.closeButton.hover.border',
     'components.modal.closeButton.hover.fg',
+    'components.modal.closeButton.iconSize',
     'components.modal.closeButton.pressed.bg',
     'components.modal.closeButton.pressed.border',
     'components.modal.closeButton.pressed.fg',
+    'components.modal.closeButton.radius',
+    'components.modal.closeButton.size',
+    'components.modal.content.animationDuration',
     'components.modal.content.bg',
     'components.modal.content.border',
+    'components.modal.content.borderWidth',
     'components.modal.content.fg',
+    'components.modal.content.gap',
+    'components.modal.content.maxHeight',
+    'components.modal.content.minWidth',
+    'components.modal.content.nativeMaxHeight',
+    'components.modal.content.padding',
+    'components.modal.content.radius',
     'components.modal.content.shadow',
+    'components.modal.content.size.lg',
+    'components.modal.content.size.md',
+    'components.modal.content.size.sm',
+    'components.modal.content.size.xl',
+    'components.modal.content.topOffset',
+    'components.modal.content.viewportMargin',
+    'components.modal.content.zIndexOffset',
     'components.modal.description.fg',
+    'components.modal.footer.gap',
+    'components.modal.footer.paddingTop',
+    'components.modal.header.gap',
+    'components.modal.header.paddingBottom',
+    'components.modal.header.textGap',
+    'components.modal.overlay.animationDuration',
     'components.modal.overlay.bg',
+    'components.modal.overlay.blur',
     'components.modal.title.fg',
     'components.radio.danger.default.bg',
     'components.radio.danger.default.border',
@@ -3136,6 +3162,7 @@ export const tokenPaths = [
     'components.input.warning.soft.hover.fg',
     'components.input.warning.soft.hover.icon',
     'components.input.warning.soft.hover.placeholder',
+    'components.modal.body.paddingBottom',
     'components.modal.closeButton.default.bg',
     'components.modal.closeButton.default.border',
     'components.modal.closeButton.default.fg',
@@ -3149,15 +3176,40 @@ export const tokenPaths = [
     'components.modal.closeButton.hover.bg',
     'components.modal.closeButton.hover.border',
     'components.modal.closeButton.hover.fg',
+    'components.modal.closeButton.iconSize',
     'components.modal.closeButton.pressed.bg',
     'components.modal.closeButton.pressed.border',
     'components.modal.closeButton.pressed.fg',
+    'components.modal.closeButton.radius',
+    'components.modal.closeButton.size',
+    'components.modal.content.animationDuration',
     'components.modal.content.bg',
     'components.modal.content.border',
+    'components.modal.content.borderWidth',
     'components.modal.content.fg',
+    'components.modal.content.gap',
+    'components.modal.content.maxHeight',
+    'components.modal.content.minWidth',
+    'components.modal.content.nativeMaxHeight',
+    'components.modal.content.padding',
+    'components.modal.content.radius',
     'components.modal.content.shadow',
+    'components.modal.content.size.lg',
+    'components.modal.content.size.md',
+    'components.modal.content.size.sm',
+    'components.modal.content.size.xl',
+    'components.modal.content.topOffset',
+    'components.modal.content.viewportMargin',
+    'components.modal.content.zIndexOffset',
     'components.modal.description.fg',
+    'components.modal.footer.gap',
+    'components.modal.footer.paddingTop',
+    'components.modal.header.gap',
+    'components.modal.header.paddingBottom',
+    'components.modal.header.textGap',
+    'components.modal.overlay.animationDuration',
     'components.modal.overlay.bg',
+    'components.modal.overlay.blur',
     'components.modal.title.fg',
     'components.radio.danger.default.bg',
     'components.radio.danger.default.border',
@@ -5443,6 +5495,7 @@ export const themeCssVariableNames = [
     '--menu-item-hover-fg',
     '--menu-item-pressed-bg',
     '--menu-item-pressed-fg',
+    '--modal-body-padding-bottom',
     '--modal-close-button-default-bg',
     '--modal-close-button-default-border',
     '--modal-close-button-default-fg',
@@ -5456,15 +5509,40 @@ export const themeCssVariableNames = [
     '--modal-close-button-hover-bg',
     '--modal-close-button-hover-border',
     '--modal-close-button-hover-fg',
+    '--modal-close-button-icon-size',
     '--modal-close-button-pressed-bg',
     '--modal-close-button-pressed-border',
     '--modal-close-button-pressed-fg',
+    '--modal-close-button-radius',
+    '--modal-close-button-size',
+    '--modal-content-animation-duration',
     '--modal-content-bg',
     '--modal-content-border',
+    '--modal-content-border-width',
     '--modal-content-fg',
+    '--modal-content-gap',
+    '--modal-content-max-height',
+    '--modal-content-min-width',
+    '--modal-content-native-max-height',
+    '--modal-content-padding',
+    '--modal-content-radius',
     '--modal-content-shadow',
+    '--modal-content-size-lg',
+    '--modal-content-size-md',
+    '--modal-content-size-sm',
+    '--modal-content-size-xl',
+    '--modal-content-top-offset',
+    '--modal-content-viewport-margin',
+    '--modal-content-z-index-offset',
     '--modal-description-fg',
+    '--modal-footer-gap',
+    '--modal-footer-padding-top',
+    '--modal-header-gap',
+    '--modal-header-padding-bottom',
+    '--modal-header-text-gap',
+    '--modal-overlay-animation-duration',
     '--modal-overlay-bg',
+    '--modal-overlay-blur',
     '--modal-title-fg',
     '--navigation-active-bg',
     '--navigation-active-fg',
@@ -7531,6 +7609,7 @@ export const cssVariableNames = [
     '--menu-item-hover-fg',
     '--menu-item-pressed-bg',
     '--menu-item-pressed-fg',
+    '--modal-body-padding-bottom',
     '--modal-close-button-default-bg',
     '--modal-close-button-default-border',
     '--modal-close-button-default-fg',
@@ -7544,15 +7623,40 @@ export const cssVariableNames = [
     '--modal-close-button-hover-bg',
     '--modal-close-button-hover-border',
     '--modal-close-button-hover-fg',
+    '--modal-close-button-icon-size',
     '--modal-close-button-pressed-bg',
     '--modal-close-button-pressed-border',
     '--modal-close-button-pressed-fg',
+    '--modal-close-button-radius',
+    '--modal-close-button-size',
+    '--modal-content-animation-duration',
     '--modal-content-bg',
     '--modal-content-border',
+    '--modal-content-border-width',
     '--modal-content-fg',
+    '--modal-content-gap',
+    '--modal-content-max-height',
+    '--modal-content-min-width',
+    '--modal-content-native-max-height',
+    '--modal-content-padding',
+    '--modal-content-radius',
     '--modal-content-shadow',
+    '--modal-content-size-lg',
+    '--modal-content-size-md',
+    '--modal-content-size-sm',
+    '--modal-content-size-xl',
+    '--modal-content-top-offset',
+    '--modal-content-viewport-margin',
+    '--modal-content-z-index-offset',
     '--modal-description-fg',
+    '--modal-footer-gap',
+    '--modal-footer-padding-top',
+    '--modal-header-gap',
+    '--modal-header-padding-bottom',
+    '--modal-header-text-gap',
+    '--modal-overlay-animation-duration',
     '--modal-overlay-bg',
+    '--modal-overlay-blur',
     '--modal-title-fg',
     '--navigation-active-bg',
     '--navigation-active-fg',

package/dist/highContrast/components/modal.d.ts

@@ -1,46 +1,80 @@
 export declare const modal: {
     readonly overlay: {
-        readonly bg: "rgba(0, 0, 0, 0.82)";
+        readonly bg: string;
+        readonly blur: 4;
+        readonly animationDuration: "200ms";
     };
     readonly content: {
-        readonly bg: "#111827";
-        readonly fg: "#FFFFFF";
-        readonly border: "#9CA3AF";
-        readonly shadow: "0 20px 60px rgba(0, 0, 0, 0.8)";
+        readonly bg: string;
+        readonly fg: string;
+        readonly border: string;
+        readonly shadow: string;
+        readonly borderWidth: 1;
+        readonly radius: number;
+        readonly padding: number;
+        readonly gap: number;
+        readonly minWidth: 320;
+        readonly maxHeight: "90vh";
+        readonly nativeMaxHeight: "90%";
+        readonly viewportMargin: number;
+        readonly topOffset: number;
+        readonly zIndexOffset: "1";
+        readonly animationDuration: "160ms";
+        readonly size: {
+            readonly sm: 400;
+            readonly md: 560;
+            readonly lg: 720;
+            readonly xl: 960;
+        };
     };
     readonly title: {
-        readonly fg: "#FFFFFF";
+        readonly fg: string;
     };
     readonly description: {
-        readonly fg: "#EEE8FA";
+        readonly fg: string;
+    };
+    readonly header: {
+        readonly gap: number;
+        readonly paddingBottom: number;
+        readonly textGap: number;
+    };
+    readonly body: {
+        readonly paddingBottom: number;
+    };
+    readonly footer: {
+        readonly gap: number;
+        readonly paddingTop: number;
     };
     readonly closeButton: {
+        readonly size: 32;
+        readonly iconSize: 16;
+        readonly radius: number;
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#EEE8FA";
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#374151";
-            readonly fg: "#FFFFFF";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly pressed: {
-            readonly bg: "#4B5563";
-            readonly fg: "#FFFFFF";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly focus: {
             readonly ring: {
-                readonly color: "#FCD34D";
-                readonly width: "2px";
-                readonly shadow: "0 0 0 1px rgba(255, 255, 255, 0.28)";
-                readonly offset: "#000000";
+                color: string;
+                width: string;
+                shadow: string;
+                offset: string;
             };
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#6B7280";
+            readonly fg: string;
             readonly border: "transparent";
         };
     };

package/dist/highContrast/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/modal.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDR,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/modal.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBhB,CAAC"}

package/dist/highContrast/components/modal.js

@@ -1,47 +1,31 @@
+import { createModalTokens } from '../../factories/createModalTokens.js';
+import { radius } from '../../tokens/radius.js';
+import { spacing } from '../../tokens/spacing.js';
 import { focus } from '../semantic/focus.js';
 import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
-export const modal = {
-    overlay: {
-        bg: overlay.backdrop,
-    },
-    content: {
-        bg: overlay.modal.bg,
-        fg: text.primary,
-        border: overlay.modal.border,
-        shadow: shadow.xl,
-    },
-    title: {
-        fg: text.primary,
-    },
-    description: {
-        fg: text.secondary,
-    },
-    closeButton: {
-        default: {
-            bg: 'transparent',
-            fg: text.secondary,
-            border: 'transparent',
-        },
-        hover: {
-            bg: surface.hover,
-            fg: text.primary,
-            border: 'transparent',
-        },
-        pressed: {
-            bg: surface.pressed,
-            fg: text.primary,
-            border: 'transparent',
-        },
-        focus: {
-            ring: focus.ring,
-        },
-        disabled: {
-            bg: 'transparent',
-            fg: text.disabled,
-            border: 'transparent',
-        },
-    },
-};
+export const modal = createModalTokens({
+    overlayBg: overlay.backdrop,
+    contentBg: overlay.modal.bg,
+    contentFg: text.primary,
+    contentBorder: overlay.modal.border,
+    contentShadow: shadow.xl,
+    titleFg: text.primary,
+    descriptionFg: text.secondary,
+    closeButtonDefaultFg: text.secondary,
+    closeButtonHoverBg: surface.hover,
+    closeButtonHoverFg: text.primary,
+    closeButtonPressedBg: surface.pressed,
+    closeButtonPressedFg: text.primary,
+    closeButtonDisabledFg: text.disabled,
+    closeButtonFocusRing: focus.ring,
+    radiusLg: radius.lg,
+    radiusFull: radius.full,
+    spacing1: spacing[1],
+    spacing3: spacing[3],
+    spacing4: spacing[4],
+    spacing8: spacing[8],
+    spacing10: spacing[10],
+});

package/dist/light/components/modal.d.ts

@@ -1,46 +1,80 @@
 export declare const modal: {
     readonly overlay: {
-        readonly bg: "rgba(24, 21, 33, 0.52)";
+        readonly bg: string;
+        readonly blur: 4;
+        readonly animationDuration: "200ms";
     };
     readonly content: {
-        readonly bg: "#FFFFFF";
-        readonly fg: "#3D3754";
-        readonly border: "#E4DDF4";
-        readonly shadow: "0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14)";
+        readonly bg: string;
+        readonly fg: string;
+        readonly border: string;
+        readonly shadow: string;
+        readonly borderWidth: 1;
+        readonly radius: number;
+        readonly padding: number;
+        readonly gap: number;
+        readonly minWidth: 320;
+        readonly maxHeight: "90vh";
+        readonly nativeMaxHeight: "90%";
+        readonly viewportMargin: number;
+        readonly topOffset: number;
+        readonly zIndexOffset: "1";
+        readonly animationDuration: "160ms";
+        readonly size: {
+            readonly sm: 400;
+            readonly md: 560;
+            readonly lg: 720;
+            readonly xl: 960;
+        };
     };
     readonly title: {
-        readonly fg: "#3D3754";
+        readonly fg: string;
     };
     readonly description: {
-        readonly fg: "#6B6386";
+        readonly fg: string;
+    };
+    readonly header: {
+        readonly gap: number;
+        readonly paddingBottom: number;
+        readonly textGap: number;
+    };
+    readonly body: {
+        readonly paddingBottom: number;
+    };
+    readonly footer: {
+        readonly gap: number;
+        readonly paddingTop: number;
     };
     readonly closeButton: {
+        readonly size: 32;
+        readonly iconSize: 16;
+        readonly radius: number;
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#6B6386";
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#F4F1FB";
-            readonly fg: "#3D3754";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly pressed: {
-            readonly bg: "#E4DDF4";
-            readonly fg: "#3D3754";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly focus: {
             readonly ring: {
-                readonly color: "#5037C8";
-                readonly width: "2px";
-                readonly shadow: "0 0 8px rgba(99, 70, 232, 0.14)";
-                readonly offset: "#FFFFFF";
+                color: string;
+                width: string;
+                shadow: string;
+                offset: string;
             };
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#958CB0";
+            readonly fg: string;
             readonly border: "transparent";
         };
     };

package/dist/light/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/light/components/modal.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDR,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/light/components/modal.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBhB,CAAC"}

package/dist/light/components/modal.js

@@ -1,47 +1,31 @@
+import { createModalTokens } from '../../factories/createModalTokens.js';
+import { radius } from '../../tokens/radius.js';
+import { spacing } from '../../tokens/spacing.js';
 import { focus } from '../semantic/focus.js';
 import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
-export const modal = {
-    overlay: {
-        bg: overlay.backdrop,
-    },
-    content: {
-        bg: overlay.modal.bg,
-        fg: text.primary,
-        border: overlay.modal.border,
-        shadow: shadow.xl,
-    },
-    title: {
-        fg: text.primary,
-    },
-    description: {
-        fg: text.secondary,
-    },
-    closeButton: {
-        default: {
-            bg: 'transparent',
-            fg: text.secondary,
-            border: 'transparent',
-        },
-        hover: {
-            bg: surface.hover,
-            fg: text.primary,
-            border: 'transparent',
-        },
-        pressed: {
-            bg: surface.pressed,
-            fg: text.primary,
-            border: 'transparent',
-        },
-        focus: {
-            ring: focus.ring,
-        },
-        disabled: {
-            bg: 'transparent',
-            fg: text.disabled,
-            border: 'transparent',
-        },
-    },
-};
+export const modal = createModalTokens({
+    overlayBg: overlay.backdrop,
+    contentBg: overlay.modal.bg,
+    contentFg: text.primary,
+    contentBorder: overlay.modal.border,
+    contentShadow: shadow.xl,
+    titleFg: text.primary,
+    descriptionFg: text.secondary,
+    closeButtonDefaultFg: text.secondary,
+    closeButtonHoverBg: surface.hover,
+    closeButtonHoverFg: text.primary,
+    closeButtonPressedBg: surface.pressed,
+    closeButtonPressedFg: text.primary,
+    closeButtonDisabledFg: text.disabled,
+    closeButtonFocusRing: focus.ring,
+    radiusLg: radius.lg,
+    radiusFull: radius.full,
+    spacing1: spacing[1],
+    spacing3: spacing[3],
+    spacing4: spacing[4],
+    spacing8: spacing[8],
+    spacing10: spacing[10],
+});

package/dist/utils/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,KAAG,MAetD,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,KAAG,MAetD,CAAC"}

package/dist/utils/color.js

@@ -1,4 +1,3 @@
-// packages/tokens/src/utils/color.ts
 export const withAlpha = (hex, alpha) => {
     const normalized = hex.replace('#', '');
     if (normalized.length !== 6) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.35.1",
+  "version": "2.37.0",
   "description": "Design tokens for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",

package/dist/primitives/selectionControl.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=selectionControl.d.ts.map

package/dist/primitives/selectionControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selectionControl.d.ts","sourceRoot":"","sources":["../../src/primitives/selectionControl.ts"],"names":[],"mappings":""}

package/dist/primitives/selectionControl.js

@@ -1 +0,0 @@
-"use strict";