@vellira-ui/tokens 2.95.2 → 2.97.0

package/dist/dark/components/tooltip.js

@@ -1,21 +1,13 @@
-import { createTooltipTokens } from '../../factories/createTooltipTokens.js';
+import { createTooltipTokensFromTheme } from '../../factories/createTooltipTokens.js';
 import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
 import { typography } from '../../tokens/typography.js';
 import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
-export const tooltip = createTooltipTokens({
-    contentBg: overlay.tooltip.bg,
-    contentFg: overlay.tooltip.fg,
-    contentBorder: overlay.tooltip.border,
-    contentShadow: shadow.md,
-    contentRadius: radius.sm,
-    contentPaddingX: spacing[3],
-    contentPaddingY: spacing[2],
-    contentCompactPaddingX: spacing[2],
-    contentCompactPaddingY: spacing[1],
-    contentFontSize: typography.size.sm,
-    contentLineHeight: typography.lineHeight.sm,
-    contentCompactFontSize: typography.size.xs,
-    contentCompactLineHeight: typography.lineHeight.xs,
+export const tooltip = createTooltipTokensFromTheme({
+    overlay,
+    shadow,
+    radius,
+    spacing,
+    typography,
 });

package/dist/factories/createAccordionTokens.d.ts

@@ -24,5 +24,28 @@ export type AccordionTokensConfig = {
     };
     focusRing: string;
 };
+export type AccordionThemeSemantics = {
+    border: {
+        muted: string;
+    };
+    focus: {
+        ring: {
+            color: string;
+        };
+    };
+    surface: {
+        default: string;
+        subtle: string;
+        hover: string;
+        pressed: string;
+        disabled: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+};
 export declare const createAccordionTokens: (config: AccordionTokensConfig) => AccordionTokensConfig;
+export declare const createAccordionTokensFromSemantics: ({ border, focus, surface, text, }: AccordionThemeSemantics) => AccordionTokensConfig;
 //# sourceMappingURL=createAccordionTokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createAccordionTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createAccordionTokens.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,OAAO,EAAE,qBAAqB,CAAC;QAC/B,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,KAAK,EAAE,qBAAqB,CAAC;QAC7B,OAAO,EAAE,qBAAqB,CAAC;QAC/B,QAAQ,EAAE,qBAAqB,CAAC;KACjC,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,qBAAqB,0BAAW,CAAC"}
+{"version":3,"file":"createAccordionTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createAccordionTokens.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,OAAO,EAAE,qBAAqB,CAAC;QAC/B,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,KAAK,EAAE,qBAAqB,CAAC;QAC7B,OAAO,EAAE,qBAAqB,CAAC;QAC/B,QAAQ,EAAE,qBAAqB,CAAC;KACjC,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,qBAAqB,0BAAW,CAAC;AAE/E,eAAO,MAAM,kCAAkC,GAAI,mCAKhD,uBAAuB,0BAkCtB,CAAC"}

package/dist/factories/createAccordionTokens.js

@@ -1 +1,35 @@
 export const createAccordionTokens = (config) => config;
+export const createAccordionTokensFromSemantics = ({ border, focus, surface, text, }) => createAccordionTokens({
+    root: {
+        bg: surface.default,
+        border: border.muted,
+    },
+    divider: border.muted,
+    trigger: {
+        default: {
+            bg: surface.default,
+            fg: text.primary,
+        },
+        expanded: {
+            bg: surface.subtle,
+        },
+        hover: {
+            bg: surface.hover,
+            fg: text.primary,
+        },
+        pressed: {
+            bg: surface.pressed,
+            fg: text.primary,
+        },
+        disabled: {
+            bg: surface.disabled,
+            fg: text.disabled,
+        },
+    },
+    indicator: text.secondary,
+    content: {
+        bg: surface.subtle,
+        fg: text.secondary,
+    },
+    focusRing: focus.ring.color,
+});

package/dist/factories/createContextMenuTokens.d.ts

@@ -0,0 +1,161 @@
+type ContextMenuState = {
+    readonly bg: string;
+    readonly fg: string;
+};
+type ContextMenuDangerStates = {
+    readonly default: ContextMenuState;
+    readonly hover: ContextMenuState;
+    readonly active: ContextMenuState;
+    readonly disabled: ContextMenuState;
+};
+type ContextMenuFocusRing = {
+    readonly color: string;
+    readonly width: string;
+    readonly shadow: string;
+    readonly offset: string;
+};
+type ContextMenuTokensConfig = {
+    contentBg: string;
+    contentBorder: string;
+    contentShadow: string;
+    itemDefault: ContextMenuState;
+    itemHover: ContextMenuState;
+    itemActive: ContextMenuState;
+    itemPressed: ContextMenuState;
+    itemFocusRing: ContextMenuFocusRing;
+    itemDisabled: ContextMenuState;
+    itemDanger: ContextMenuDangerStates;
+    triggerDefaultFg: string;
+    triggerHoverBg: string;
+    triggerHoverFg: string;
+    triggerFocusFg: string;
+    triggerFocusRing: ContextMenuFocusRing;
+    triggerDisabledFg: string;
+    groupLabelFg: string;
+};
+export type ContextMenuThemeSemantics = {
+    focus: {
+        ring: ContextMenuFocusRing;
+    };
+    menu: {
+        background: string;
+        border: string;
+        item: {
+            default: ContextMenuState;
+            hover: ContextMenuState;
+            active: ContextMenuState;
+            pressed: ContextMenuState;
+            disabled: ContextMenuState;
+            danger: ContextMenuDangerStates;
+        };
+    };
+    shadow: {
+        lg: string;
+    };
+    text: {
+        interactive: string;
+        interactiveHover: string;
+        disabled: string;
+        secondary: string;
+    };
+};
+export declare const createContextMenuTokens: (config: ContextMenuTokensConfig) => {
+    readonly content: {
+        readonly bg: string;
+        readonly border: string;
+        readonly shadow: string;
+    };
+    readonly item: {
+        readonly default: ContextMenuState;
+        readonly hover: ContextMenuState;
+        readonly active: {
+            readonly ring: "transparent";
+            readonly bg: string;
+            readonly fg: string;
+        };
+        readonly pressed: ContextMenuState;
+        readonly focus: {
+            readonly ring: ContextMenuFocusRing;
+        };
+        readonly disabled: ContextMenuState;
+        readonly danger: ContextMenuDangerStates;
+    };
+    readonly trigger: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+            readonly ring: "transparent";
+        };
+        readonly focus: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+            readonly ring: ContextMenuFocusRing;
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+    };
+    readonly groupLabel: {
+        readonly fg: string;
+    };
+};
+export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shadow, text, }: ContextMenuThemeSemantics) => {
+    readonly content: {
+        readonly bg: string;
+        readonly border: string;
+        readonly shadow: string;
+    };
+    readonly item: {
+        readonly default: ContextMenuState;
+        readonly hover: ContextMenuState;
+        readonly active: {
+            readonly ring: "transparent";
+            readonly bg: string;
+            readonly fg: string;
+        };
+        readonly pressed: ContextMenuState;
+        readonly focus: {
+            readonly ring: ContextMenuFocusRing;
+        };
+        readonly disabled: ContextMenuState;
+        readonly danger: ContextMenuDangerStates;
+    };
+    readonly trigger: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+            readonly ring: "transparent";
+        };
+        readonly focus: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+            readonly ring: ContextMenuFocusRing;
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+    };
+    readonly groupLabel: {
+        readonly fg: string;
+    };
+};
+export {};
+//# sourceMappingURL=createContextMenuTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createContextMenuTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createContextMenuTokens.ts"],"names":[],"mappings":"AAAA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,uBAAuB,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,oBAAoB,CAAC;IACvC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE;QACL,IAAI,EAAE,oBAAoB,CAAC;KAC5B,CAAC;IACF,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE;YACJ,OAAO,EAAE,gBAAgB,CAAC;YAC1B,KAAK,EAAE,gBAAgB,CAAC;YACxB,MAAM,EAAE,gBAAgB,CAAC;YACzB,OAAO,EAAE,gBAAgB,CAAC;YAC1B,QAAQ,EAAE,gBAAgB,CAAC;YAC3B,MAAM,EAAE,uBAAuB,CAAC;SACjC,CAAC;KACH,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC;QACpB,gBAAgB,EAAE,MAAM,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,uBAAuB;;;;;;;;;;;yBAjExD,MAAM;yBACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHR,CAAC;AAEd,eAAO,MAAM,oCAAoC,GAAI,gCAKlD,yBAAyB;;;;;;;;;;;yBA3Hb,MAAM;yBACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IjB,CAAC"}

package/dist/factories/createContextMenuTokens.js

@@ -0,0 +1,67 @@
+export const createContextMenuTokens = (config) => ({
+    content: {
+        bg: config.contentBg,
+        border: config.contentBorder,
+        shadow: config.contentShadow,
+    },
+    item: {
+        default: config.itemDefault,
+        hover: config.itemHover,
+        active: {
+            ...config.itemActive,
+            ring: 'transparent',
+        },
+        pressed: config.itemPressed,
+        focus: {
+            ring: config.itemFocusRing,
+        },
+        disabled: config.itemDisabled,
+        danger: config.itemDanger,
+    },
+    trigger: {
+        default: {
+            bg: 'transparent',
+            fg: config.triggerDefaultFg,
+            border: 'transparent',
+        },
+        hover: {
+            bg: config.triggerHoverBg,
+            fg: config.triggerHoverFg,
+            border: 'transparent',
+            ring: 'transparent',
+        },
+        focus: {
+            bg: 'transparent',
+            fg: config.triggerFocusFg,
+            border: 'transparent',
+            ring: config.triggerFocusRing,
+        },
+        disabled: {
+            bg: 'transparent',
+            fg: config.triggerDisabledFg,
+            border: 'transparent',
+        },
+    },
+    groupLabel: {
+        fg: config.groupLabelFg,
+    },
+});
+export const createContextMenuTokensFromSemantics = ({ focus, menu, shadow, text, }) => createContextMenuTokens({
+    contentBg: menu.background,
+    contentBorder: menu.border,
+    contentShadow: shadow.lg,
+    itemDefault: menu.item.default,
+    itemHover: menu.item.hover,
+    itemActive: menu.item.active,
+    itemPressed: menu.item.pressed,
+    itemFocusRing: focus.ring,
+    itemDisabled: menu.item.disabled,
+    itemDanger: menu.item.danger,
+    triggerDefaultFg: text.interactive,
+    triggerHoverBg: menu.item.hover.bg,
+    triggerHoverFg: text.interactiveHover,
+    triggerFocusFg: text.interactive,
+    triggerFocusRing: focus.ring,
+    triggerDisabledFg: text.disabled,
+    groupLabelFg: text.secondary,
+});

package/dist/factories/createFormFieldTokens.d.ts

@@ -0,0 +1,124 @@
+type FormFieldStatus = {
+    fg: string;
+};
+export type FormFieldThemeSources = {
+    radius: {
+        full: number;
+    };
+    spacing: {
+        readonly [key: number]: number;
+    };
+    typography: {
+        size: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
+        lineHeight: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    status: {
+        error: FormFieldStatus;
+        success: FormFieldStatus;
+        warning: FormFieldStatus;
+        info: FormFieldStatus;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        disabled: string;
+    };
+};
+export declare const createFormFieldTokensFromTheme: ({ radius, spacing, typography, status, text, }: FormFieldThemeSources) => {
+    readonly label: {
+        readonly fg: string;
+    };
+    readonly optional: {
+        readonly fg: string;
+    };
+    readonly labelInfo: {
+        readonly fg: string;
+        readonly border: string;
+        readonly radius: number;
+    };
+    readonly description: {
+        readonly fg: string;
+    };
+    readonly helperText: {
+        readonly default: {
+            readonly fg: string;
+        };
+        readonly error: {
+            readonly fg: string;
+        };
+        readonly success: {
+            readonly fg: string;
+        };
+        readonly warning: {
+            readonly fg: string;
+        };
+        readonly info: {
+            readonly fg: string;
+        };
+    };
+    readonly requiredMark: {
+        readonly fg: string;
+    };
+    readonly disabled: {
+        readonly labelFg: string;
+        readonly descriptionFg: string;
+        readonly helperTextFg: string;
+    };
+    readonly size: {
+        readonly sm: {
+            readonly gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
+        };
+        readonly md: {
+            readonly gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
+        };
+        readonly lg: {
+            readonly gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=createFormFieldTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormFieldTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createFormFieldTokens.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,EAAE;QACP,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,CAAC;IACF,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,UAAU,EAAE;YACV,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;KACH,CAAC;IACF,MAAM,EAAE;QACN,KAAK,EAAE,eAAe,CAAC;QACvB,OAAO,EAAE,eAAe,CAAC;QACzB,OAAO,EAAE,eAAe,CAAC;QACzB,IAAI,EAAE,eAAe,CAAC;KACvB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,gDAM5C,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGX,CAAC"}

package/dist/factories/createFormFieldTokens.js

@@ -0,0 +1,85 @@
+export const createFormFieldTokensFromTheme = ({ radius, spacing, typography, status, text, }) => ({
+    label: {
+        fg: text.primary,
+    },
+    optional: {
+        fg: text.secondary,
+    },
+    labelInfo: {
+        fg: text.secondary,
+        border: text.secondary,
+        radius: radius.full,
+    },
+    description: {
+        fg: text.secondary,
+    },
+    helperText: {
+        default: {
+            fg: text.muted,
+        },
+        error: {
+            fg: status.error.fg,
+        },
+        success: {
+            fg: status.success.fg,
+        },
+        warning: {
+            fg: status.warning.fg,
+        },
+        info: {
+            fg: status.info.fg,
+        },
+    },
+    requiredMark: {
+        fg: status.error.fg,
+    },
+    disabled: {
+        labelFg: text.disabled,
+        descriptionFg: text.disabled,
+        helperTextFg: text.disabled,
+    },
+    size: {
+        sm: {
+            gap: spacing[1],
+            horizontalGap: spacing[3],
+            labelFontSize: typography.size.sm,
+            labelLineHeight: typography.lineHeight.sm,
+            descriptionFontSize: typography.size.xs,
+            descriptionLineHeight: typography.lineHeight.xs,
+            helperTextFontSize: typography.size.xs,
+            helperTextLineHeight: typography.lineHeight.xs,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        md: {
+            gap: spacing[2],
+            horizontalGap: spacing[4],
+            labelFontSize: typography.size.md,
+            labelLineHeight: typography.lineHeight.md,
+            descriptionFontSize: typography.size.sm,
+            descriptionLineHeight: typography.lineHeight.sm,
+            helperTextFontSize: typography.size.sm,
+            helperTextLineHeight: typography.lineHeight.sm,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        lg: {
+            gap: spacing[3],
+            horizontalGap: spacing[5],
+            labelFontSize: typography.size.lg,
+            labelLineHeight: typography.lineHeight.lg,
+            descriptionFontSize: typography.size.md,
+            descriptionLineHeight: typography.lineHeight.md,
+            helperTextFontSize: typography.size.md,
+            helperTextLineHeight: typography.lineHeight.md,
+            optionalFontSize: typography.size.sm,
+            optionalLineHeight: typography.lineHeight.sm,
+            labelInfoSize: spacing[5],
+            labelInfoFontSize: typography.size.sm,
+        },
+    },
+});

package/dist/factories/createModalTokens.d.ts

@@ -27,6 +27,43 @@ type ModalTokensConfig = {
     spacing8: number;
     spacing10: number;
 };
+export type ModalThemeSemantics = {
+    closeButtonHoverBg?: string;
+    closeButtonPressedBg?: string;
+    focus: {
+        ring: ModalFocusRing;
+    };
+    overlay: {
+        backdrop: string;
+        modal: {
+            bg: string;
+            border: string;
+        };
+    };
+    radius: {
+        lg: number;
+        full: number;
+    };
+    shadow: {
+        xl: string;
+    };
+    spacing: {
+        1: number;
+        3: number;
+        4: number;
+        8: number;
+        10: number;
+    };
+    surface: {
+        hover: string;
+        pressed: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+};
 export declare const createModalTokens: (config: ModalTokensConfig) => {
     readonly overlay: {
         readonly bg: string;
@@ -108,5 +145,86 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
         readonly openDuration: "180ms";
     };
 };
+export declare const createModalTokensFromSemantics: ({ closeButtonHoverBg, closeButtonPressedBg, focus, overlay, radius, shadow, spacing, surface, text, }: ModalThemeSemantics) => {
+    readonly overlay: {
+        readonly bg: string;
+        readonly blur: 4;
+        readonly animationDuration: "180ms";
+    };
+    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: "180ms";
+        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";
+        };
+    };
+    readonly motion: {
+        readonly closeDuration: "150ms";
+        readonly easing: "cubic-bezier(0.22, 1, 0.36, 1)";
+        readonly openDuration: "180ms";
+    };
+};
 export {};
 //# sourceMappingURL=createModalTokens.d.ts.map

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

@@ -1 +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;AAcF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F9C,CAAC"}
+{"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;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,EAAE;QACL,IAAI,EAAE,cAAc,CAAC;KACtB,CAAC;IACF,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE;YACL,EAAE,EAAE,MAAM,CAAC;YACX,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,OAAO,EAAE;QACP,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAcF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F9C,CAAC;AAEd,eAAO,MAAM,8BAA8B,GAAI,uGAU5C,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBlB,CAAC"}