@vellira-ui/tokens 2.99.0 → 2.100.1

package/css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dark/semantic/focus.d.ts

@@ -2,7 +2,7 @@ export declare const focus: {
     readonly ring: {
         readonly color: "#B8A8FF";
         readonly width: "2px";
-        readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+        readonly shadow: string;
         readonly offsetColor: "#181521";
     };
 };

package/dist/dark/semantic/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/focus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}

package/dist/dark/semantic/focus.js

@@ -1,9 +1,10 @@
+import { createFocusRingShadowToken } from '../../effects/shadow-system.js';
 import { colors } from '../../primitives/colors.js';
 export const focus = {
     ring: {
         color: colors.primary[300],
         width: '2px',
-        shadow: '0 0 8px rgba(184, 168, 255, 0.14)',
+        shadow: createFocusRingShadowToken('dark'),
         offsetColor: colors.vellira[950],
     },
 };

package/dist/dark/semantic/shadow.d.ts

@@ -1,8 +1,8 @@
 export declare const shadow: {
-    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.12)";
-    readonly md: "0 4px 12px rgba(0, 0, 0, 0.22)";
-    readonly lg: "0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)";
-    readonly xl: "0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3)";
-    readonly inset: "inset 0 1px 0 rgba(255, 255, 255, 0.06)";
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly inset: string;
 };
 //# sourceMappingURL=shadow.d.ts.map

package/dist/dark/semantic/shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/shadow.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC"}
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;CAAqC,CAAC"}

package/dist/dark/semantic/shadow.js

@@ -1,7 +1,2 @@
-export const shadow = {
-    sm: '0 1px 2px rgba(0, 0, 0, 0.12)',
-    md: '0 4px 12px rgba(0, 0, 0, 0.22)',
-    lg: '0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)',
-    xl: '0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3)',
-    inset: 'inset 0 1px 0 rgba(255, 255, 255, 0.06)',
-};
+import { createSemanticShadowTokens } from '../../effects/shadow-system.js';
+export const shadow = createSemanticShadowTokens('dark');

package/dist/dark/theme.d.ts

@@ -152,30 +152,30 @@ export declare const darkTheme: {
             readonly full: 999;
         };
         readonly shadows: {
-            readonly sm: {
-                readonly x: 0;
-                readonly y: 1;
-                readonly blur: 3;
-                readonly color: "#000000";
-                readonly opacity: 0.04;
-                readonly elevation: 1;
-            };
-            readonly md: {
-                readonly x: 0;
-                readonly y: 6;
-                readonly blur: 16;
-                readonly color: "#000000";
-                readonly opacity: 0.08;
-                readonly elevation: 4;
-            };
-            readonly lg: {
-                readonly x: 0;
-                readonly y: 12;
-                readonly blur: 32;
-                readonly color: "#000000";
-                readonly opacity: 0.1;
-                readonly elevation: 8;
-            };
+            readonly sm: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly md: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly lg: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
         };
         readonly spacing: {
             readonly 0: 0;

package/dist/effects/shadow-system.d.ts

@@ -0,0 +1,181 @@
+export declare const shadowThemeNames: readonly ["light", "dark", "high-contrast"];
+export type ShadowThemeName = (typeof shadowThemeNames)[number];
+export declare const elevationShadowLevels: readonly ["sm", "md", "lg", "xl"];
+export type ElevationShadowLevel = (typeof elevationShadowLevels)[number];
+export type ShadowLayer = Readonly<{
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
+    opacity: number;
+    inset: boolean;
+}>;
+export type ShadowEffect = Readonly<{
+    layers: readonly ShadowLayer[];
+}>;
+export type ReactNativeShadowOutput = Readonly<{
+    x: number;
+    y: number;
+    blur: number;
+    color: string;
+    opacity: number;
+    elevation: number;
+}>;
+export declare const canonicalShadowEffects: {
+    readonly elevation: {
+        readonly sm: {
+            readonly themes: {
+                readonly light: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly dark: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly 'high-contrast': Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+            };
+            readonly reactNativeApproximation: {
+                readonly kind: "direct";
+                readonly output: Readonly<{
+                    x: number;
+                    y: number;
+                    blur: number;
+                    color: string;
+                    opacity: number;
+                    elevation: number;
+                }>;
+            };
+        };
+        readonly md: {
+            readonly themes: {
+                readonly light: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly dark: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly 'high-contrast': Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+            };
+            readonly reactNativeApproximation: {
+                readonly kind: "direct";
+                readonly output: Readonly<{
+                    x: number;
+                    y: number;
+                    blur: number;
+                    color: string;
+                    opacity: number;
+                    elevation: number;
+                }>;
+            };
+        };
+        readonly lg: {
+            readonly themes: {
+                readonly light: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly dark: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly 'high-contrast': Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+            };
+            readonly reactNativeApproximation: {
+                readonly kind: "direct";
+                readonly output: Readonly<{
+                    x: number;
+                    y: number;
+                    blur: number;
+                    color: string;
+                    opacity: number;
+                    elevation: number;
+                }>;
+            };
+        };
+        readonly xl: {
+            readonly themes: {
+                readonly light: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly dark: Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+                readonly 'high-contrast': Readonly<{
+                    layers: readonly ShadowLayer[];
+                }>;
+            };
+            readonly reactNativeApproximation: {
+                readonly kind: "reference";
+                readonly level: "lg";
+                readonly reason: "React Native preserves the pre-unification Modal output by approximating xl with lg.";
+            };
+        };
+    };
+    readonly inset: {
+        readonly themes: {
+            readonly light: Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+            readonly dark: Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+            readonly 'high-contrast': Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+        };
+    };
+    readonly focusRing: {
+        readonly themes: {
+            readonly light: Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+            readonly dark: Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+            readonly 'high-contrast': Readonly<{
+                layers: readonly ShadowLayer[];
+            }>;
+        };
+    };
+};
+export declare function serializeShadowEffectForWeb(value: ShadowEffect): string;
+export declare function createSemanticShadowTokens(themeName: ShadowThemeName): {
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly inset: string;
+};
+export declare function createFocusRingShadowToken(themeName: ShadowThemeName): string;
+export declare function resolveReactNativeElevationShadow(level: ElevationShadowLevel): ReactNativeShadowOutput;
+export declare function createReactNativeShadowTokens(): {
+    readonly sm: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
+    readonly md: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
+    readonly lg: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
+};
+//# sourceMappingURL=shadow-system.d.ts.map

package/dist/effects/shadow-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-system.d.ts","sourceRoot":"","sources":["../../src/effects/shadow-system.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,6CAA8C,CAAC;AAC5E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,eAAO,MAAM,qBAAqB,mCAAoC,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;CAChC,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAsDH,eAAO,MAAM,sBAAsB;;;;;4BAhEzB,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;;;;uBAI3B,MAAM;uBACN,MAAM;0BACH,MAAM;2BACL,MAAM;6BACJ,MAAM;+BACJ,MAAM;;;;;;;4BATT,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;;;;uBAI3B,MAAM;uBACN,MAAM;0BACH,MAAM;2BACL,MAAM;6BACJ,MAAM;+BACJ,MAAM;;;;;;;4BATT,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;;;;uBAI3B,MAAM;uBACN,MAAM;0BACH,MAAM;2BACL,MAAM;6BACJ,MAAM;+BACJ,MAAM;;;;;;;4BATT,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;4BAAtB,SAAS,WAAW,EAAE;;;;;;;;;;;;;wBAAtB,SAAS,WAAW,EAAE;;;wBAAtB,SAAS,WAAW,EAAE;;;wBAAtB,SAAS,WAAW,EAAE;;;;;;;wBAAtB,SAAS,WAAW,EAAE;;;wBAAtB,SAAS,WAAW,EAAE;;;wBAAtB,SAAS,WAAW,EAAE;;;;CAkIW,CAAC;AA2D5C,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAMvE;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,eAAe;;;;;;EAkBpE;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,eAAe,GAAG,MAAM,CAI7E;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,oBAAoB,GAC1B,uBAAuB,CASzB;AAED,wBAAgB,6BAA6B;;WAxOxC,MAAM;WACN,MAAM;cACH,MAAM;eACL,MAAM;iBACJ,MAAM;mBACJ,MAAM;;;WALd,MAAM;WACN,MAAM;cACH,MAAM;eACL,MAAM;iBACJ,MAAM;mBACJ,MAAM;;;WALd,MAAM;WACN,MAAM;cACH,MAAM;eACL,MAAM;iBACJ,MAAM;mBACJ,MAAM;;EAyOlB"}

package/dist/effects/shadow-system.js

@@ -0,0 +1,134 @@
+import { colors } from '../primitives/colors.js';
+export const shadowThemeNames = ['light', 'dark', 'high-contrast'];
+export const elevationShadowLevels = ['sm', 'md', 'lg', 'xl'];
+const effect = (...layers) => ({ layers });
+const layer = (x, y, blur, spread, color, opacity, inset = false) => ({ x, y, blur, spread, color, opacity, inset });
+const nativeShadow = (x, y, blur, color, opacity, elevation) => ({ x, y, blur, color, opacity, elevation });
+const nativeSm = nativeShadow(0, 1, 3, colors.mono[950], 0.04, 1);
+const nativeMd = nativeShadow(0, 6, 16, colors.mono[950], 0.08, 4);
+const nativeLg = nativeShadow(0, 12, 32, colors.mono[950], 0.1, 8);
+export const canonicalShadowEffects = {
+    elevation: {
+        sm: {
+            themes: {
+                light: effect(layer(0, 1, 2, 0, colors.vellira[950], 0.08)),
+                dark: effect(layer(0, 1, 2, 0, colors.mono[950], 0.12)),
+                'high-contrast': effect(layer(0, 1, 2, 0, colors.mono[950], 0.5)),
+            },
+            reactNativeApproximation: { kind: 'direct', output: nativeSm },
+        },
+        md: {
+            themes: {
+                light: effect(layer(0, 4, 12, 0, colors.vellira[950], 0.12)),
+                dark: effect(layer(0, 4, 12, 0, colors.mono[950], 0.22)),
+                'high-contrast': effect(layer(0, 4, 12, 0, colors.mono[950], 0.6)),
+            },
+            reactNativeApproximation: { kind: 'direct', output: nativeMd },
+        },
+        lg: {
+            themes: {
+                light: effect(layer(0, 12, 40, 0, colors.vellira[950], 0.16), layer(0, 2, 8, 0, colors.vellira[950], 0.1)),
+                dark: effect(layer(0, 12, 40, 0, colors.mono[950], 0.35), layer(0, 2, 8, 0, colors.mono[950], 0.25)),
+                'high-contrast': effect(layer(0, 12, 40, 0, colors.mono[950], 0.7)),
+            },
+            reactNativeApproximation: { kind: 'direct', output: nativeLg },
+        },
+        xl: {
+            themes: {
+                light: effect(layer(0, 20, 60, 0, colors.vellira[950], 0.2), layer(0, 4, 16, 0, colors.vellira[950], 0.14)),
+                dark: effect(layer(0, 20, 60, 0, colors.mono[950], 0.45), layer(0, 4, 16, 0, colors.mono[950], 0.3)),
+                'high-contrast': effect(layer(0, 20, 60, 0, colors.mono[950], 0.8)),
+            },
+            reactNativeApproximation: {
+                kind: 'reference',
+                level: 'lg',
+                reason: 'React Native preserves the pre-unification Modal output by approximating xl with lg.',
+            },
+        },
+    },
+    inset: {
+        themes: {
+            light: effect(layer(0, 1, 0, 0, colors.mono[50], 0.55, true)),
+            dark: effect(layer(0, 1, 0, 0, colors.mono[50], 0.06, true)),
+            'high-contrast': effect(layer(0, 1, 0, 0, colors.mono[50], 0.14, true)),
+        },
+    },
+    focusRing: {
+        themes: {
+            light: effect(layer(0, 0, 8, 0, colors.primary[600], 0.14)),
+            dark: effect(layer(0, 0, 8, 0, colors.primary[300], 0.14)),
+            'high-contrast': effect(layer(0, 0, 0, 1, colors.mono[50], 0.28)),
+        },
+    },
+};
+function parseHexColor(color) {
+    const match = color.match(/^#([0-9a-f]{6})$/i);
+    if (!match) {
+        throw new Error(`Shadow layer color must be a six-digit hex value, received ${color}.`);
+    }
+    const value = match[1];
+    return [
+        Number.parseInt(value.slice(0, 2), 16),
+        Number.parseInt(value.slice(2, 4), 16),
+        Number.parseInt(value.slice(4, 6), 16),
+    ];
+}
+function formatLength(value) {
+    if (!Number.isFinite(value)) {
+        throw new Error(`Shadow length must be finite, received ${value}.`);
+    }
+    return value === 0 ? '0' : `${value}px`;
+}
+function serializeLayerForWeb(value) {
+    if (!Number.isFinite(value.blur) || value.blur < 0) {
+        throw new Error(`Shadow blur must be finite and non-negative, received ${value.blur}.`);
+    }
+    if (!Number.isFinite(value.opacity) ||
+        value.opacity < 0 ||
+        value.opacity > 1) {
+        throw new Error(`Shadow opacity must be finite and within [0, 1], received ${value.opacity}.`);
+    }
+    const [red, green, blue] = parseHexColor(value.color);
+    const lengths = [
+        formatLength(value.x),
+        formatLength(value.y),
+        formatLength(value.blur),
+    ];
+    if (value.spread !== 0) {
+        lengths.push(formatLength(value.spread));
+    }
+    const color = `rgba(${red}, ${green}, ${blue}, ${value.opacity})`;
+    return `${value.inset ? 'inset ' : ''}${lengths.join(' ')} ${color}`;
+}
+export function serializeShadowEffectForWeb(value) {
+    if (value.layers.length === 0) {
+        throw new Error('Shadow effect must contain at least one layer.');
+    }
+    return value.layers.map(serializeLayerForWeb).join(', ');
+}
+export function createSemanticShadowTokens(themeName) {
+    return {
+        sm: serializeShadowEffectForWeb(canonicalShadowEffects.elevation.sm.themes[themeName]),
+        md: serializeShadowEffectForWeb(canonicalShadowEffects.elevation.md.themes[themeName]),
+        lg: serializeShadowEffectForWeb(canonicalShadowEffects.elevation.lg.themes[themeName]),
+        xl: serializeShadowEffectForWeb(canonicalShadowEffects.elevation.xl.themes[themeName]),
+        inset: serializeShadowEffectForWeb(canonicalShadowEffects.inset.themes[themeName]),
+    };
+}
+export function createFocusRingShadowToken(themeName) {
+    return serializeShadowEffectForWeb(canonicalShadowEffects.focusRing.themes[themeName]);
+}
+export function resolveReactNativeElevationShadow(level) {
+    const approximation = canonicalShadowEffects.elevation[level].reactNativeApproximation;
+    if (approximation.kind === 'direct') {
+        return approximation.output;
+    }
+    return resolveReactNativeElevationShadow(approximation.level);
+}
+export function createReactNativeShadowTokens() {
+    return {
+        sm: resolveReactNativeElevationShadow('sm'),
+        md: resolveReactNativeElevationShadow('md'),
+        lg: resolveReactNativeElevationShadow('lg'),
+    };
+}

package/dist/highContrast/semantic/focus.d.ts

@@ -2,7 +2,7 @@ export declare const focus: {
     readonly ring: {
         readonly color: "#FCD34D";
         readonly width: "2px";
-        readonly shadow: "0 0 0 1px rgba(255, 255, 255, 0.28)";
+        readonly shadow: string;
         readonly offsetColor: "#000000";
     };
 };

package/dist/highContrast/semantic/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/focus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}

package/dist/highContrast/semantic/focus.js

@@ -1,9 +1,10 @@
+import { createFocusRingShadowToken } from '../../effects/shadow-system.js';
 import { colors } from '../../primitives/colors.js';
 export const focus = {
     ring: {
         color: colors.warning[300],
         width: '2px',
-        shadow: '0 0 0 1px rgba(255, 255, 255, 0.28)',
+        shadow: createFocusRingShadowToken('high-contrast'),
         offsetColor: colors.mono[950],
     },
 };

package/dist/highContrast/semantic/shadow.d.ts

@@ -1,8 +1,8 @@
 export declare const shadow: {
-    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.5)";
-    readonly md: "0 4px 12px rgba(0, 0, 0, 0.6)";
-    readonly lg: "0 12px 40px rgba(0, 0, 0, 0.7)";
-    readonly xl: "0 20px 60px rgba(0, 0, 0, 0.8)";
-    readonly inset: "inset 0 1px 0 rgba(255, 255, 255, 0.14)";
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly inset: string;
 };
 //# sourceMappingURL=shadow.d.ts.map

package/dist/highContrast/semantic/shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/shadow.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC"}
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;CAA8C,CAAC"}

package/dist/highContrast/semantic/shadow.js

@@ -1,7 +1,2 @@
-export const shadow = {
-    sm: '0 1px 2px rgba(0, 0, 0, 0.5)',
-    md: '0 4px 12px rgba(0, 0, 0, 0.6)',
-    lg: '0 12px 40px rgba(0, 0, 0, 0.7)',
-    xl: '0 20px 60px rgba(0, 0, 0, 0.8)',
-    inset: 'inset 0 1px 0 rgba(255, 255, 255, 0.14)',
-};
+import { createSemanticShadowTokens } from '../../effects/shadow-system.js';
+export const shadow = createSemanticShadowTokens('high-contrast');

package/dist/highContrast/theme.d.ts

@@ -152,30 +152,30 @@ export declare const highContrastTheme: {
             readonly full: 999;
         };
         readonly shadows: {
-            readonly sm: {
-                readonly x: 0;
-                readonly y: 1;
-                readonly blur: 3;
-                readonly color: "#000000";
-                readonly opacity: 0.04;
-                readonly elevation: 1;
-            };
-            readonly md: {
-                readonly x: 0;
-                readonly y: 6;
-                readonly blur: 16;
-                readonly color: "#000000";
-                readonly opacity: 0.08;
-                readonly elevation: 4;
-            };
-            readonly lg: {
-                readonly x: 0;
-                readonly y: 12;
-                readonly blur: 32;
-                readonly color: "#000000";
-                readonly opacity: 0.1;
-                readonly elevation: 8;
-            };
+            readonly sm: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly md: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly lg: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
         };
         readonly spacing: {
             readonly 0: 0;

package/dist/index.d.ts

@@ -22,30 +22,30 @@ export declare const theme: {
             readonly full: 999;
         };
         readonly shadows: {
-            readonly sm: {
-                readonly x: 0;
-                readonly y: 1;
-                readonly blur: 3;
-                readonly color: "#000000";
-                readonly opacity: 0.04;
-                readonly elevation: 1;
-            };
-            readonly md: {
-                readonly x: 0;
-                readonly y: 6;
-                readonly blur: 16;
-                readonly color: "#000000";
-                readonly opacity: 0.08;
-                readonly elevation: 4;
-            };
-            readonly lg: {
-                readonly x: 0;
-                readonly y: 12;
-                readonly blur: 32;
-                readonly color: "#000000";
-                readonly opacity: 0.1;
-                readonly elevation: 8;
-            };
+            readonly sm: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly md: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly lg: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
         };
         readonly spacing: {
             readonly 0: 0;

package/dist/light/semantic/focus.d.ts

@@ -2,7 +2,7 @@ export declare const focus: {
     readonly ring: {
         readonly color: "#5037C8";
         readonly width: "2px";
-        readonly shadow: "0 0 8px rgba(99, 70, 232, 0.14)";
+        readonly shadow: string;
         readonly offsetColor: "#FFFFFF";
     };
 };

package/dist/light/semantic/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/focus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC"}

package/dist/light/semantic/focus.js

@@ -1,9 +1,10 @@
+import { createFocusRingShadowToken } from '../../effects/shadow-system.js';
 import { colors } from '../../primitives/colors.js';
 export const focus = {
     ring: {
         color: colors.primary[700],
         width: '2px',
-        shadow: '0 0 8px rgba(99, 70, 232, 0.14)',
+        shadow: createFocusRingShadowToken('light'),
         offsetColor: colors.mono[50],
     },
 };

package/dist/light/semantic/shadow.d.ts

@@ -1,8 +1,8 @@
 export declare const shadow: {
-    readonly sm: "0 1px 2px rgba(24, 21, 33, 0.08)";
-    readonly md: "0 4px 12px rgba(24, 21, 33, 0.12)";
-    readonly lg: "0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)";
-    readonly xl: "0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14)";
-    readonly inset: "inset 0 1px 0 rgba(255, 255, 255, 0.55)";
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly inset: string;
 };
 //# sourceMappingURL=shadow.d.ts.map

package/dist/light/semantic/shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/shadow.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC"}
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;CAAsC,CAAC"}

package/dist/light/semantic/shadow.js

@@ -1,7 +1,2 @@
-export const shadow = {
-    sm: '0 1px 2px rgba(24, 21, 33, 0.08)',
-    md: '0 4px 12px rgba(24, 21, 33, 0.12)',
-    lg: '0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)',
-    xl: '0 20px 60px rgba(24, 21, 33, 0.2), 0 4px 16px rgba(24, 21, 33, 0.14)',
-    inset: 'inset 0 1px 0 rgba(255, 255, 255, 0.55)',
-};
+import { createSemanticShadowTokens } from '../../effects/shadow-system.js';
+export const shadow = createSemanticShadowTokens('light');

package/dist/light/theme.d.ts

@@ -152,30 +152,30 @@ export declare const lightTheme: {
             readonly full: 999;
         };
         readonly shadows: {
-            readonly sm: {
-                readonly x: 0;
-                readonly y: 1;
-                readonly blur: 3;
-                readonly color: "#000000";
-                readonly opacity: 0.04;
-                readonly elevation: 1;
-            };
-            readonly md: {
-                readonly x: 0;
-                readonly y: 6;
-                readonly blur: 16;
-                readonly color: "#000000";
-                readonly opacity: 0.08;
-                readonly elevation: 4;
-            };
-            readonly lg: {
-                readonly x: 0;
-                readonly y: 12;
-                readonly blur: 32;
-                readonly color: "#000000";
-                readonly opacity: 0.1;
-                readonly elevation: 8;
-            };
+            readonly sm: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly md: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
+            readonly lg: Readonly<{
+                x: number;
+                y: number;
+                blur: number;
+                color: string;
+                opacity: number;
+                elevation: number;
+            }>;
         };
         readonly spacing: {
             readonly 0: 0;

package/dist/platform-output/component-token-intents.d.ts

@@ -1,5 +1,6 @@
+import { type ElevationShadowLevel, type ReactNativeShadowOutput as CanonicalReactNativeShadowOutput, type ShadowThemeName } from '../effects/shadow-system.js';
 export declare const componentShadowLevels: readonly ["sm", "md", "lg", "xl"];
-export type ComponentShadowLevel = (typeof componentShadowLevels)[number];
+export type ComponentShadowLevel = ElevationShadowLevel;
 export type ComponentElevationShadowIntent = Readonly<{
     kind: 'shadow';
     role: 'elevation';
@@ -19,14 +20,7 @@ export type ComponentViewportHeightIntent = Readonly<{
     ratio: number;
 }>;
 export type ComponentPlatformIntent = ComponentShadowIntent | ComponentViewportHeightIntent;
-export type ReactNativeShadowOutput = Readonly<{
-    x: number;
-    y: number;
-    blur: number;
-    color: string;
-    opacity: number;
-    elevation: number;
-}>;
+export type ReactNativeShadowOutput = CanonicalReactNativeShadowOutput;
 export type ComponentPlatformOutputSources = Readonly<{
     web: {
         shadow: Readonly<Record<ComponentShadowLevel, string>>;
@@ -37,17 +31,7 @@ export type ComponentPlatformOutputSources = Readonly<{
     };
 }>;
 type ComponentOutputThemeSources = Readonly<{
-    semantic: {
-        focus: {
-            ring: {
-                shadow: string;
-            };
-        };
-        shadow: Readonly<Record<ComponentShadowLevel, string>>;
-    };
-    tokens: {
-        shadows: Readonly<Record<'sm' | 'md' | 'lg', ReactNativeShadowOutput>>;
-    };
+    name: ShadowThemeName;
 }>;
 type WebAdaptedIntent<T> = T extends ComponentPlatformIntent ? string : never;
 type ReactNativeAdaptedIntent<T> = T extends ComponentElevationShadowIntent ? ReactNativeShadowOutput : T extends ComponentFocusRingShadowIntent | ComponentNoShadowIntent ? null : T extends ComponentViewportHeightIntent ? string : never;

package/dist/platform-output/component-token-intents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-token-intents.d.ts","sourceRoot":"","sources":["../../src/platform-output/component-token-intents.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-token-intents.d.ts","sourceRoot":"","sources":["../../src/platform-output/component-token-intents.ts"],"names":[],"mappings":"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"}

package/dist/platform-output/component-token-intents.js

@@ -1,4 +1,5 @@
-export const componentShadowLevels = ['sm', 'md', 'lg', 'xl'];
+import { createFocusRingShadowToken, createSemanticShadowTokens, elevationShadowLevels, resolveReactNativeElevationShadow, } from '../effects/shadow-system.js';
+export const componentShadowLevels = elevationShadowLevels;
 export function createComponentShadowIntent(level) {
     return { kind: 'shadow', role: 'elevation', level };
 }
@@ -41,24 +42,23 @@ export function isComponentPlatformIntent(value) {
         candidate.ratio <= 1);
 }
 export function createComponentPlatformOutputSources(theme) {
+    const shadow = createSemanticShadowTokens(theme.name);
     return {
         web: {
             shadow: {
-                sm: theme.semantic.shadow.sm,
-                md: theme.semantic.shadow.md,
-                lg: theme.semantic.shadow.lg,
-                xl: theme.semantic.shadow.xl,
+                sm: shadow.sm,
+                md: shadow.md,
+                lg: shadow.lg,
+                xl: shadow.xl,
             },
-            focusRingShadow: theme.semantic.focus.ring.shadow,
+            focusRingShadow: createFocusRingShadowToken(theme.name),
         },
         reactNative: {
             shadow: {
-                sm: theme.tokens.shadows.sm,
-                md: theme.tokens.shadows.md,
-                lg: theme.tokens.shadows.lg,
-                // Preserve current native Modal output. #885 owns the later authority
-                // decision for whether an independent structured xl shadow is needed.
-                xl: theme.tokens.shadows.lg,
+                sm: resolveReactNativeElevationShadow('sm'),
+                md: resolveReactNativeElevationShadow('md'),
+                lg: resolveReactNativeElevationShadow('lg'),
+                xl: resolveReactNativeElevationShadow('xl'),
             },
         },
     };

package/dist/token-architecture.d.ts

@@ -189,8 +189,8 @@ export declare const semanticVocabularyV1: {
         readonly roles: readonly ["backdrop", "tooltip", "floating", "dialog"];
     };
     readonly shadow: {
-        readonly purpose: "Semantic elevation references; renderer ownership is normalized separately.";
-        readonly roles: readonly ["sm", "md", "lg", "xl"];
+        readonly purpose: "Semantic shadow references derived from the canonical structured #885 authority; Web strings are renderer output, not authored design values.";
+        readonly roles: readonly ["sm", "md", "lg", "xl", "inset"];
     };
 };
 export declare const canonicalTokenVocabulary: {
@@ -201,7 +201,7 @@ export declare const canonicalTokenVocabulary: {
     readonly intent: readonly ["primary", "accent", "neutral", "success", "warning", "danger"];
     readonly status: readonly ["success", "error", "warning", "info"];
 };
-export declare const canonicalSemanticRolePaths: readonly ["surface.canvas", "surface.default", "surface.panel", "surface.subtle", "surface.muted", "surface.elevated", "surface.hover", "surface.active", "surface.pressed", "surface.disabled", "surface.danger", "surface.inverse", "text.primary", "text.secondary", "text.muted", "text.subtle", "text.disabled", "text.brand", "text.interactive", "text.interactiveHover", "text.interactivePressed", "text.inverse", "icons.default", "icons.secondary", "icons.muted", "icons.subtle", "icons.disabled", "icons.interactive", "icons.brand", "icons.interactiveHover", "icons.success", "icons.danger", "icons.inverse", "border.subtle", "border.muted", "border.default", "border.strong", "border.elevated", "border.disabled", "border.interactive", "divider.muted", "divider.default", "divider.strong", "focus.ring.color", "focus.ring.width", "focus.ring.shadow", "focus.ring.offsetColor", "status.success.fg", "status.success.bg", "status.success.border", "status.success.ring", "status.success.emphasisFg", "status.error.fg", "status.error.bg", "status.error.border", "status.error.ring", "status.error.emphasisFg", "status.warning.fg", "status.warning.bg", "status.warning.border", "status.warning.ring", "status.warning.emphasisFg", "status.info.fg", "status.info.bg", "status.info.border", "status.info.ring", "status.info.emphasisFg", "overlay.backdrop", "overlay.tooltip.bg", "overlay.tooltip.fg", "overlay.tooltip.border", "overlay.floating.bg", "overlay.floating.border", "overlay.dialog.bg", "overlay.dialog.border"];
+export declare const canonicalSemanticRolePaths: readonly ["surface.canvas", "surface.default", "surface.panel", "surface.subtle", "surface.muted", "surface.elevated", "surface.hover", "surface.active", "surface.pressed", "surface.disabled", "surface.danger", "surface.inverse", "text.primary", "text.secondary", "text.muted", "text.subtle", "text.disabled", "text.brand", "text.interactive", "text.interactiveHover", "text.interactivePressed", "text.inverse", "icons.default", "icons.secondary", "icons.muted", "icons.subtle", "icons.disabled", "icons.interactive", "icons.brand", "icons.interactiveHover", "icons.success", "icons.danger", "icons.inverse", "border.subtle", "border.muted", "border.default", "border.strong", "border.elevated", "border.disabled", "border.interactive", "divider.muted", "divider.default", "divider.strong", "focus.ring.color", "focus.ring.width", "focus.ring.shadow", "focus.ring.offsetColor", "status.success.fg", "status.success.bg", "status.success.border", "status.success.ring", "status.success.emphasisFg", "status.error.fg", "status.error.bg", "status.error.border", "status.error.ring", "status.error.emphasisFg", "status.warning.fg", "status.warning.bg", "status.warning.border", "status.warning.ring", "status.warning.emphasisFg", "status.info.fg", "status.info.bg", "status.info.border", "status.info.ring", "status.info.emphasisFg", "overlay.backdrop", "overlay.tooltip.bg", "overlay.tooltip.fg", "overlay.tooltip.border", "overlay.floating.bg", "overlay.floating.border", "overlay.dialog.bg", "overlay.dialog.border", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl", "shadow.inset"];
 export declare const componentTokenFactoryModel: {
     readonly canonicalName: "create<Component>Tokens";
     readonly legacyPaletteName: "create<Component>Palette is retained when the component exposes intent palettes.";

package/dist/token-architecture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-architecture.d.ts","sourceRoot":"","sources":["../src/token-architecture.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,uBAAuB,qGAO1B,CAAC;AAEX,eAAO,MAAM,qBAAqB,EAChC,wFAAiG,CAAC;AAEpG,eAAO,MAAM,eAAe,wLAelB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qCAAqC;;;;;;;;;;CA2BqB,CAAC;AAsHxE;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,cAAc,GAAG,IAAI,CAwCvB;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,cAAc,CAQhB;AAED,eAAO,MAAM,0BAA0B,qFAQ7B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GACnC,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC/B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wCAAwC;;;;;;;;;;;;;;;;;;;;;EAiC3C,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGvB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;CA+C3B,CAAC;AAEX,eAAO,MAAM,0BAA0B,4+CA4E7B,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;CAS7B,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqG/B,CAAC;AAEX,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;EA+BjC,CAAC"}
+{"version":3,"file":"token-architecture.d.ts","sourceRoot":"","sources":["../src/token-architecture.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,uBAAuB,qGAO1B,CAAC;AAEX,eAAO,MAAM,qBAAqB,EAChC,wFAAiG,CAAC;AAEpG,eAAO,MAAM,eAAe,wLAelB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qCAAqC;;;;;;;;;;CA2BqB,CAAC;AAsHxE;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,cAAc,GAAG,IAAI,CAwCvB;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,cAAc,CAQhB;AAED,eAAO,MAAM,0BAA0B,qFAQ7B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GACnC,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC/B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wCAAwC;;;;;;;;;;;;;;;;;;;;;EAiC3C,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGvB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;CA+C3B,CAAC;AAEX,eAAO,MAAM,0BAA0B,gjDAiF7B,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;CAS7B,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqG/B,CAAC;AAEX,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;EA+BjC,CAAC"}

package/dist/token-architecture.js

@@ -388,8 +388,8 @@ export const semanticVocabularyV1 = {
         roles: ['backdrop', 'tooltip', 'floating', 'dialog'],
     },
     shadow: {
-        purpose: 'Semantic elevation references; renderer ownership is normalized separately.',
-        roles: ['sm', 'md', 'lg', 'xl'],
+        purpose: 'Semantic shadow references derived from the canonical structured #885 authority; Web strings are renderer output, not authored design values.',
+        roles: ['sm', 'md', 'lg', 'xl', 'inset'],
     },
 };
 export const canonicalTokenVocabulary = {
@@ -516,6 +516,11 @@ export const canonicalSemanticRolePaths = [
     'overlay.floating.border',
     'overlay.dialog.bg',
     'overlay.dialog.border',
+    'shadow.sm',
+    'shadow.md',
+    'shadow.lg',
+    'shadow.xl',
+    'shadow.inset',
 ];
 export const componentTokenFactoryModel = {
     canonicalName: 'create<Component>Tokens',

package/dist/tokens/shadows.d.ts

@@ -1,27 +1,27 @@
 export declare const shadows: {
-    readonly sm: {
-        readonly x: 0;
-        readonly y: 1;
-        readonly blur: 3;
-        readonly color: "#000000";
-        readonly opacity: 0.04;
-        readonly elevation: 1;
-    };
-    readonly md: {
-        readonly x: 0;
-        readonly y: 6;
-        readonly blur: 16;
-        readonly color: "#000000";
-        readonly opacity: 0.08;
-        readonly elevation: 4;
-    };
-    readonly lg: {
-        readonly x: 0;
-        readonly y: 12;
-        readonly blur: 32;
-        readonly color: "#000000";
-        readonly opacity: 0.1;
-        readonly elevation: 8;
-    };
+    readonly sm: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
+    readonly md: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
+    readonly lg: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+        opacity: number;
+        elevation: number;
+    }>;
 };
 //# sourceMappingURL=shadows.d.ts.map

package/dist/tokens/shadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CA2BV,CAAC"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAAkC,CAAC"}

package/dist/tokens/shadows.js

@@ -1,27 +1,2 @@
-import { colors } from '../primitives/colors.js';
-export const shadows = {
-    sm: {
-        x: 0,
-        y: 1,
-        blur: 3,
-        color: colors.mono[950],
-        opacity: 0.04,
-        elevation: 1,
-    },
-    md: {
-        x: 0,
-        y: 6,
-        blur: 16,
-        color: colors.mono[950],
-        opacity: 0.08,
-        elevation: 4,
-    },
-    lg: {
-        x: 0,
-        y: 12,
-        blur: 32,
-        color: colors.mono[950],
-        opacity: 0.1,
-        elevation: 8,
-    },
-};
+import { createReactNativeShadowTokens } from '../effects/shadow-system.js';
+export const shadows = createReactNativeShadowTokens();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.99.0",
+  "version": "2.100.1",
   "description": "Design tokens for Vellira Design System",
   "keywords": [
     "vellira",
@@ -40,10 +40,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./css": "./dist/css/tokens.css"
+    "./css": {
+      "types": "./css.d.ts",
+      "default": "./dist/css/tokens.css"
+    }
   },
   "files": [
     "dist",
+    "css.d.ts",
     "README.md",
     "LICENSE"
   ],