@vellira-ui/tokens 2.35.1 → 2.37.0

package/dist/css/tokens.css

@@ -1241,12 +1241,38 @@
   --input-counter-fg: #6B6386;
   --input-spinner-fg: #958CB0;
   --modal-overlay-bg: rgba(24, 21, 33, 0.52);
+  --modal-overlay-blur: 4px;
+  --modal-overlay-animation-duration: 200ms;
   --modal-content-bg: #FFFFFF;
   --modal-content-fg: #3D3754;
   --modal-content-border: #E4DDF4;
   --modal-content-shadow: 0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14);
+  --modal-content-border-width: 1px;
+  --modal-content-radius: 16px;
+  --modal-content-padding: 16px;
+  --modal-content-gap: 16px;
+  --modal-content-min-width: 320px;
+  --modal-content-max-height: 90vh;
+  --modal-content-native-max-height: 90%;
+  --modal-content-viewport-margin: 32px;
+  --modal-content-top-offset: 40px;
+  --modal-content-z-index-offset: 1;
+  --modal-content-animation-duration: 160ms;
+  --modal-content-size-sm: 400px;
+  --modal-content-size-md: 560px;
+  --modal-content-size-lg: 720px;
+  --modal-content-size-xl: 960px;
   --modal-title-fg: #3D3754;
   --modal-description-fg: #6B6386;
+  --modal-header-gap: 16px;
+  --modal-header-padding-bottom: 16px;
+  --modal-header-text-gap: 4px;
+  --modal-body-padding-bottom: 16px;
+  --modal-footer-gap: 12px;
+  --modal-footer-padding-top: 16px;
+  --modal-close-button-size: 32px;
+  --modal-close-button-icon-size: 16px;
+  --modal-close-button-radius: 999px;
   --modal-close-button-default-bg: transparent;
   --modal-close-button-default-fg: #6B6386;
   --modal-close-button-default-border: transparent;
@@ -3299,12 +3325,38 @@
   --input-counter-fg: #BBB2D2;
   --input-spinner-fg: #958CB0;
   --modal-overlay-bg: rgba(0, 0, 0, 0.72);
+  --modal-overlay-blur: 4px;
+  --modal-overlay-animation-duration: 200ms;
   --modal-content-bg: #242034;
   --modal-content-fg: #F4F1FB;
   --modal-content-border: #3D3754;
   --modal-content-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3);
+  --modal-content-border-width: 1px;
+  --modal-content-radius: 16px;
+  --modal-content-padding: 16px;
+  --modal-content-gap: 16px;
+  --modal-content-min-width: 320px;
+  --modal-content-max-height: 90vh;
+  --modal-content-native-max-height: 90%;
+  --modal-content-viewport-margin: 32px;
+  --modal-content-top-offset: 40px;
+  --modal-content-z-index-offset: 1;
+  --modal-content-animation-duration: 160ms;
+  --modal-content-size-sm: 400px;
+  --modal-content-size-md: 560px;
+  --modal-content-size-lg: 720px;
+  --modal-content-size-xl: 960px;
   --modal-title-fg: #F4F1FB;
   --modal-description-fg: #BBB2D2;
+  --modal-header-gap: 16px;
+  --modal-header-padding-bottom: 16px;
+  --modal-header-text-gap: 4px;
+  --modal-body-padding-bottom: 16px;
+  --modal-footer-gap: 12px;
+  --modal-footer-padding-top: 16px;
+  --modal-close-button-size: 32px;
+  --modal-close-button-icon-size: 16px;
+  --modal-close-button-radius: 999px;
   --modal-close-button-default-bg: transparent;
   --modal-close-button-default-fg: #BBB2D2;
   --modal-close-button-default-border: transparent;
@@ -5368,12 +5420,38 @@
   --input-counter-fg: #EEE8FA;
   --input-spinner-fg: #9CA3AF;
   --modal-overlay-bg: rgba(0, 0, 0, 0.82);
+  --modal-overlay-blur: 4px;
+  --modal-overlay-animation-duration: 200ms;
   --modal-content-bg: #111827;
   --modal-content-fg: #FFFFFF;
   --modal-content-border: #9CA3AF;
   --modal-content-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+  --modal-content-border-width: 1px;
+  --modal-content-radius: 16px;
+  --modal-content-padding: 16px;
+  --modal-content-gap: 16px;
+  --modal-content-min-width: 320px;
+  --modal-content-max-height: 90vh;
+  --modal-content-native-max-height: 90%;
+  --modal-content-viewport-margin: 32px;
+  --modal-content-top-offset: 40px;
+  --modal-content-z-index-offset: 1;
+  --modal-content-animation-duration: 160ms;
+  --modal-content-size-sm: 400px;
+  --modal-content-size-md: 560px;
+  --modal-content-size-lg: 720px;
+  --modal-content-size-xl: 960px;
   --modal-title-fg: #FFFFFF;
   --modal-description-fg: #EEE8FA;
+  --modal-header-gap: 16px;
+  --modal-header-padding-bottom: 16px;
+  --modal-header-text-gap: 4px;
+  --modal-body-padding-bottom: 16px;
+  --modal-footer-gap: 12px;
+  --modal-footer-padding-top: 16px;
+  --modal-close-button-size: 32px;
+  --modal-close-button-icon-size: 16px;
+  --modal-close-button-radius: 999px;
   --modal-close-button-default-bg: transparent;
   --modal-close-button-default-fg: #EEE8FA;
   --modal-close-button-default-border: transparent;

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

@@ -1,46 +1,80 @@
 export declare const modal: {
     readonly overlay: {
-        readonly bg: "rgba(0, 0, 0, 0.72)";
+        readonly bg: string;
+        readonly blur: 4;
+        readonly animationDuration: "200ms";
     };
     readonly content: {
-        readonly bg: "#242034";
-        readonly fg: "#F4F1FB";
-        readonly border: "#3D3754";
-        readonly shadow: "0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3)";
+        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: "#F4F1FB";
+        readonly fg: string;
     };
     readonly description: {
-        readonly fg: "#BBB2D2";
+        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: "#BBB2D2";
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#2F2A42";
-            readonly fg: "#F4F1FB";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly pressed: {
-            readonly bg: "#3D3754";
-            readonly fg: "#F4F1FB";
+            readonly bg: string;
+            readonly fg: string;
             readonly border: "transparent";
         };
         readonly focus: {
             readonly ring: {
-                readonly color: "#B8A8FF";
-                readonly width: "2px";
-                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
-                readonly offset: "#181521";
+                color: string;
+                width: string;
+                shadow: string;
+                offset: string;
             };
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#6B6386";
+            readonly fg: string;
             readonly border: "transparent";
         };
     };

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

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

package/dist/dark/components/modal.js

@@ -1,48 +1,32 @@
+import { createModalTokens } from '../../factories/createModalTokens.js';
 import { overlay } from '../../semantic/overlay.js';
+import { radius } from '../../tokens/radius.js';
+import { spacing } from '../../tokens/spacing.js';
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.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: surface.subtle,
-        fg: text.primary,
-        border: border.muted,
-        shadow: shadow.xl,
-    },
-    title: {
-        fg: text.primary,
-    },
-    description: {
-        fg: text.secondary,
-    },
-    closeButton: {
-        default: {
-            bg: 'transparent',
-            fg: text.secondary,
-            border: 'transparent',
-        },
-        hover: {
-            bg: surface.elevated,
-            fg: text.primary,
-            border: 'transparent',
-        },
-        pressed: {
-            bg: surface.active,
-            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: surface.subtle,
+    contentFg: text.primary,
+    contentBorder: border.muted,
+    contentShadow: shadow.xl,
+    titleFg: text.primary,
+    descriptionFg: text.secondary,
+    closeButtonDefaultFg: text.secondary,
+    closeButtonHoverBg: surface.elevated,
+    closeButtonHoverFg: text.primary,
+    closeButtonPressedBg: surface.active,
+    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/factories/createModalTokens.d.ts

@@ -0,0 +1,107 @@
+type ModalFocusRing = {
+    color: string;
+    width: string;
+    shadow: string;
+    offset: string;
+};
+type ModalTokensConfig = {
+    overlayBg: string;
+    contentBg: string;
+    contentFg: string;
+    contentBorder: string;
+    contentShadow: string;
+    titleFg: string;
+    descriptionFg: string;
+    closeButtonDefaultFg: string;
+    closeButtonHoverBg: string;
+    closeButtonHoverFg: string;
+    closeButtonPressedBg: string;
+    closeButtonPressedFg: string;
+    closeButtonDisabledFg: string;
+    closeButtonFocusRing: ModalFocusRing;
+    radiusLg: number;
+    radiusFull: number;
+    spacing1: number;
+    spacing3: number;
+    spacing4: number;
+    spacing8: number;
+    spacing10: number;
+};
+export declare const createModalTokens: (config: ModalTokensConfig) => {
+    readonly overlay: {
+        readonly bg: string;
+        readonly blur: 4;
+        readonly animationDuration: "200ms";
+    };
+    readonly content: {
+        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: string;
+    };
+    readonly description: {
+        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: string;
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+        readonly pressed: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+        readonly focus: {
+            readonly ring: ModalFocusRing;
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+    };
+};
+export {};
+//# sourceMappingURL=createModalTokens.d.ts.map

package/dist/factories/createModalTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createModalTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createModalTokens.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,cAAc,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AASF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF9C,CAAC"}

package/dist/factories/createModalTokens.js

@@ -0,0 +1,82 @@
+const modalLayout = {
+    maxHeight: '90vh',
+    nativeMaxHeight: '90%',
+    zIndexOffset: '1',
+    animationDuration: '160ms',
+};
+export const createModalTokens = (config) => ({
+    overlay: {
+        bg: config.overlayBg,
+        blur: 4,
+        animationDuration: '200ms',
+    },
+    content: {
+        bg: config.contentBg,
+        fg: config.contentFg,
+        border: config.contentBorder,
+        shadow: config.contentShadow,
+        borderWidth: 1,
+        radius: config.radiusLg,
+        padding: config.spacing4,
+        gap: config.spacing4,
+        minWidth: 320,
+        maxHeight: modalLayout.maxHeight,
+        nativeMaxHeight: modalLayout.nativeMaxHeight,
+        viewportMargin: config.spacing8,
+        topOffset: config.spacing10,
+        zIndexOffset: modalLayout.zIndexOffset,
+        animationDuration: modalLayout.animationDuration,
+        size: {
+            sm: 400,
+            md: 560,
+            lg: 720,
+            xl: 960,
+        },
+    },
+    title: {
+        fg: config.titleFg,
+    },
+    description: {
+        fg: config.descriptionFg,
+    },
+    header: {
+        gap: config.spacing4,
+        paddingBottom: config.spacing4,
+        textGap: config.spacing1,
+    },
+    body: {
+        paddingBottom: config.spacing4,
+    },
+    footer: {
+        gap: config.spacing3,
+        paddingTop: config.spacing4,
+    },
+    closeButton: {
+        size: 32,
+        iconSize: 16,
+        radius: config.radiusFull,
+        default: {
+            bg: 'transparent',
+            fg: config.closeButtonDefaultFg,
+            border: 'transparent',
+        },
+        hover: {
+            bg: config.closeButtonHoverBg,
+            fg: config.closeButtonHoverFg,
+            border: 'transparent',
+        },
+        pressed: {
+            bg: config.closeButtonPressedBg,
+            fg: config.closeButtonPressedFg,
+            border: 'transparent',
+        },
+        focus: {
+            ring: config.closeButtonFocusRing,
+        },
+        disabled: {
+            bg: 'transparent',
+            fg: config.closeButtonDisabledFg,
+            border: 'transparent',
+        },
+    },
+});

package/dist/factories/index.d.ts

@@ -1,5 +1,6 @@
 export * from './createButtonPalette.js';
 export * from './createCheckboxPalette.js';
 export * from './createInputPalette.js';
+export * from './createModalTokens.js';
 export * from './createRadioPalette.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/factories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/factories/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/factories/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC"}

package/dist/factories/index.js

@@ -1,4 +1,5 @@
 export * from './createButtonPalette.js';
 export * from './createCheckboxPalette.js';
 export * from './createInputPalette.js';
+export * from './createModalTokens.js';
 export * from './createRadioPalette.js';