@mich8060/unified-design-system 0.2.8 → 0.2.10

package/dist/tokens/color.d.ts

@@ -0,0 +1,40 @@
+import type { TokenCategory } from "./types.js";
+type Tone11 = "25" | "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000";
+type Tone10 = Exclude<Tone11, "1000">;
+type Scale11 = Record<Tone11, string>;
+type Scale10 = Record<Tone10, string>;
+export declare const colorTokens: {
+    readonly system: {
+        readonly black: "#111111";
+        readonly white: "#ffffff";
+        readonly transparent: "rgba(255, 255, 255, 0.0099999998)";
+    };
+    readonly neutrals: Scale11;
+    readonly brand: {
+        readonly primary: Scale10;
+        readonly secondary: Scale10;
+        readonly tertiary: Scale10;
+        readonly quaternary: Scale10;
+    };
+    readonly accent: {
+        readonly amber: Scale11;
+        readonly aqua: Scale11;
+        readonly blue: Scale11;
+        readonly cyan: Scale11;
+        readonly emerald: Scale11;
+        readonly fuchsia: Scale11;
+        readonly green: Scale11;
+        readonly indigo: Scale11;
+        readonly lime: Scale11;
+        readonly magenta: Scale11;
+        readonly orange: Scale11;
+        readonly purple: Scale11;
+        readonly red: Scale11;
+        readonly rose: Scale11;
+        readonly sky: Scale11;
+        readonly violet: Scale11;
+        readonly yellow: Scale11;
+    };
+};
+export declare const colorCategory: TokenCategory;
+export {};

package/dist/tokens/color.js

@@ -0,0 +1,81 @@
+const scale11 = (values) => ({
+    "25": values[0],
+    "50": values[1],
+    "100": values[2],
+    "200": values[3],
+    "300": values[4],
+    "400": values[5],
+    "500": values[6],
+    "600": values[7],
+    "700": values[8],
+    "800": values[9],
+    "900": values[10],
+    "1000": values[11],
+});
+const scale10 = (values) => ({
+    "25": values[0],
+    "50": values[1],
+    "100": values[2],
+    "200": values[3],
+    "300": values[4],
+    "400": values[5],
+    "500": values[6],
+    "600": values[7],
+    "700": values[8],
+    "800": values[9],
+    "900": values[10],
+});
+export const colorTokens = {
+    system: {
+        black: "#111111",
+        white: "#ffffff",
+        transparent: "rgba(255, 255, 255, 0.0099999998)",
+    },
+    neutrals: scale11(["#fafbfc", "#f9fafc", "#f3f4f6", "#e6e7eb", "#d2d5dc", "#9ca2ae", "#6b7380", "#4c5564", "#384152", "#202938", "#111828", "#0d1320"]),
+    brand: {
+        primary: scale10(["#f2fafd", "#e3f5fa", "#aee0f4", "#78cbec", "#41b7e5", "#00a7e1", "#009add", "#008dcf", "#0c6bb0", "#006aa8", "#004b88"]),
+        secondary: scale10(["#fefbf5", "#fef8ee", "#feefd6", "#fbdcad", "#f9c278", "#f59e42", "#f2821f", "#e36613", "#bc4d12", "#963e16", "#793515"]),
+        tertiary: scale10(["#eff2f5", "#e6ebf0", "#bfcddb", "#97adc3", "#708caa", "#4f7499", "#295d8b", "#215583", "#174b77", "#12416b", "#0f3152"]),
+        quaternary: scale10(["#fefdf6", "#fdfbed", "#f8f3cb", "#f1e796", "#ead55f", "#f8ca10", "#fbb03a", "#c3841c", "#a26e1b", "#845c1c", "#6d4d1a"]),
+    },
+    accent: {
+        amber: scale11(["#fffbeb", "#fef3c7", "#fde68a", "#fcd34d", "#fbc02d", "#fbbf24", "#f59e0b", "#d97706", "#b45309", "#92400e", "#78350f", "#5f2a09"]),
+        aqua: scale11(["#f0fdfa", "#ccfbf1", "#99f6e4", "#5eead4", "#2dd4bf", "#14b8a6", "#0d9488", "#0f766e", "#115e59", "#134e4a", "#0f3a37", "#0a2e2c"]),
+        blue: scale11(["#f2f7ff", "#eff6ff", "#dbeaff", "#bfdcfe", "#93c4fc", "#61a5fa", "#3b82f6", "#2563ec", "#1d4ed7", "#1f41af", "#1f3a8b", "#182e6f"]),
+        cyan: scale11(["#effeff", "#ecfeff", "#cffbfe", "#a5f3fd", "#66e8f8", "#21d3ed", "#07b6d5", "#0891b3", "#0f7490", "#165e76", "#164f63", "#113f4f"]),
+        emerald: scale11(["#effdf7", "#ecfdf5", "#d0fae4", "#a7f3cf", "#6de7b6", "#34d399", "#10b982", "#05976a", "#057857", "#075f47", "#064d3b", "#043d2f"]),
+        fuchsia: scale11(["#fef6ff", "#fef4ff", "#fae8fe", "#f5cffe", "#f0abfc", "#e879f9", "#d946ef", "#c026d4", "#a21caf", "#861990", "#701a75", "#59145d"]),
+        green: scale11(["#f3fdf6", "#f0fdf4", "#dcfce7", "#bbf7d1", "#86efac", "#4ade80", "#23c55e", "#17a34a", "#157f3d", "#176535", "#15532e", "#104224"]),
+        indigo: scale11(["#f1f4fe", "#eef2fe", "#e1e7ff", "#c7d2ff", "#a6b4fd", "#818cf8", "#6366f1", "#5046e5", "#4438ca", "#3730a2", "#312d81", "#272467"]),
+        lime: scale11(["#f7feeb", "#f6fee7", "#ecfccb", "#daf99c", "#bef164", "#a3e636", "#83cc16", "#64a30e", "#5a8720", "#3f6212", "#365313", "#2b420f"]),
+        magenta: scale11(["#fff5fb", "#fdf2f8", "#fce7f3", "#fbcfe8", "#f9a8d4", "#f472b6", "#ec4899", "#db2777", "#be185d", "#9d174d", "#831843", "#6b1235"]),
+        orange: scale11(["#fffbf7", "#fffaf5", "#fff6ed", "#ffead5", "#fddcab", "#feb273", "#fd853a", "#fb6514", "#ec4a0a", "#9c2a10", "#7e2410", "#641c0c"]),
+        purple: scale11(["#fbf7ff", "#fbf5ff", "#f4e8fe", "#ead5fe", "#d8b4fe", "#c085fd", "#a755f7", "#9334ea", "#7e22cf", "#6b22a8", "#571c86", "#45166b"]),
+        red: scale11(["#fef4f4", "#fef2f2", "#fee2e1", "#fecbca", "#fda5a4", "#f87070", "#f04444", "#dc2625", "#ba1c1d", "#991b1c", "#7f1d1e", "#651718"]),
+        rose: scale11(["#fff3f3", "#fff1f1", "#fee4e7", "#fecdd3", "#fea4b0", "#fb7286", "#f43f5e", "#e21d48", "#be113c", "#9f133a", "#891336", "#6d0f2b"]),
+        sky: scale11(["#f3faff", "#f0f9ff", "#e0f2fe", "#bae7fe", "#7ed3fc", "#38bdf8", "#0ea5ea", "#0384c6", "#0469a1", "#075a86", "#0c4a6f", "#0c4a6f"]),
+        violet: scale11(["#f7f5ff", "#f5f3ff", "#edeaff", "#ddd6ff", "#c5b5fe", "#a78bfa", "#8b5cf6", "#7d3aec", "#6d28d9", "#5b20b6", "#4d1d95", "#3d1777"]),
+        yellow: scale11(["#fefcec", "#fefce8", "#fef9c3", "#fef08a", "#fde047", "#facc15", "#e9b308", "#ca8a04", "#a26208", "#854e0e", "#723f12", "#5b320e"]),
+    },
+};
+const rootVars = {
+    "--system-color-black": colorTokens.system.black,
+    "--system-color-white": colorTokens.system.white,
+    "--system-color-transparent": colorTokens.system.transparent,
+};
+for (const [tone, value] of Object.entries(colorTokens.neutrals)) {
+    rootVars[`--system-color-neutrals-${tone}`] = value;
+}
+for (const [family, tones] of Object.entries(colorTokens.brand)) {
+    for (const [tone, value] of Object.entries(tones)) {
+        rootVars[`--system-color-${family}-${tone}`] = value;
+    }
+}
+for (const [family, tones] of Object.entries(colorTokens.accent)) {
+    for (const [tone, value] of Object.entries(tones)) {
+        rootVars[`--system-color-accent-${family}-${tone}`] = value;
+    }
+}
+export const colorCategory = {
+    cssVars: rootVars,
+};

package/dist/tokens/generateCss.d.ts

@@ -0,0 +1,2 @@
+import type { RuntimeTokens } from "./types.js";
+export declare const generateRuntimeTokensCss: (tokens: RuntimeTokens) => string;

package/dist/tokens/generateCss.js

@@ -0,0 +1,34 @@
+const renderCssVars = (vars) => Object.entries(vars)
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join("\n");
+const renderRootBlock = (vars) => `:root {\n${renderCssVars(vars)}\n}`;
+export const generateRuntimeTokensCss = (tokens) => {
+    const sections = [];
+    sections.push(renderRootBlock(tokens.color.cssVars));
+    sections.push(renderRootBlock(tokens.spacing.cssVars));
+    sections.push(renderRootBlock(tokens.radius.cssVars));
+    sections.push(renderRootBlock(tokens.typography.cssVars));
+    sections.push(renderRootBlock(tokens.shadow.cssVars));
+    sections.push(renderRootBlock(tokens.motion.cssVars));
+    if (tokens.typography.media) {
+        for (const media of tokens.typography.media) {
+            sections.push(`@media ${media.query} {\n${renderRootBlock(media.cssVars)}\n}`);
+        }
+    }
+    if (tokens.shadow.darkCssVars) {
+        sections.push(`.theme-dark {\n${renderCssVars(tokens.shadow.darkCssVars)}\n}`);
+    }
+    if (tokens.color.darkCssVars) {
+        sections.push(`.theme-dark {\n${renderCssVars(tokens.color.darkCssVars)}\n}`);
+    }
+    if (tokens.motion.darkCssVars) {
+        sections.push(`.theme-dark {\n${renderCssVars(tokens.motion.darkCssVars)}\n}`);
+    }
+    if (tokens.spacing.darkCssVars) {
+        sections.push(`.theme-dark {\n${renderCssVars(tokens.spacing.darkCssVars)}\n}`);
+    }
+    if (tokens.radius.darkCssVars) {
+        sections.push(`.theme-dark {\n${renderCssVars(tokens.radius.darkCssVars)}\n}`);
+    }
+    return `${sections.join("\n\n")}\n`;
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,475 @@
+import type { RuntimeTokens } from "./types.js";
+export { colorTokens } from "./color.js";
+export { spacingTokens } from "./spacing.js";
+export { radiusTokens } from "./radius.js";
+export { typographyTokens } from "./typography.js";
+export { shadowTokens } from "./shadow.js";
+export { motionTokens } from "./motion.js";
+export { generateRuntimeTokensCss } from "./generateCss.js";
+export type { CssVarMap, RuntimeTokens, TokenCategory, TypographyCategory } from "./types.js";
+export declare const runtimeTokens: RuntimeTokens;
+export declare const tokensByCategory: {
+    readonly color: {
+        readonly system: {
+            readonly black: "#111111";
+            readonly white: "#ffffff";
+            readonly transparent: "rgba(255, 255, 255, 0.0099999998)";
+        };
+        readonly neutrals: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            1000: string;
+        };
+        readonly brand: {
+            readonly primary: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            readonly secondary: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            readonly tertiary: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            readonly quaternary: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        readonly accent: {
+            readonly amber: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly aqua: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly blue: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly cyan: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly emerald: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly fuchsia: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly green: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly indigo: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly lime: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly magenta: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly orange: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly purple: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly red: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly rose: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly sky: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly violet: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+            readonly yellow: {
+                25: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                1000: string;
+            };
+        };
+    };
+    readonly spacing: {
+        readonly "0": "0px";
+        readonly "2": "2px";
+        readonly "4": "4px";
+        readonly "6": "6px";
+        readonly "8": "8px";
+        readonly "10": "10px";
+        readonly "12": "12px";
+        readonly "14": "14px";
+        readonly "16": "16px";
+        readonly "18": "18px";
+        readonly "24": "24px";
+        readonly "32": "32px";
+        readonly "36": "36px";
+        readonly "40": "40px";
+        readonly "48": "48px";
+        readonly "64": "64px";
+        readonly "80": "80px";
+    };
+    readonly radius: {
+        readonly "0": "0px";
+        readonly "2": "2px";
+        readonly "4": "4px";
+        readonly "6": "6px";
+        readonly "8": "8px";
+        readonly "12": "12px";
+        readonly "16": "16px";
+        readonly "20": "20px";
+        readonly "24": "24px";
+        readonly "9999": "9999px";
+    };
+    readonly typography: {
+        readonly root: {
+            readonly "--uds-font-family": "\"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial";
+            readonly "--uds-font-size-128": "128px";
+            readonly "--uds-font-size-96": "96px";
+            readonly "--uds-font-size-72": "72px";
+            readonly "--uds-font-size-60": "60px";
+            readonly "--uds-font-size-48": "48px";
+            readonly "--uds-font-size-36": "36px";
+            readonly "--uds-font-size-32": "32px";
+            readonly "--uds-font-size-28": "28px";
+            readonly "--uds-font-size-24": "24px";
+            readonly "--uds-font-size-20": "20px";
+            readonly "--uds-font-size-16": "16px";
+            readonly "--uds-font-size-14": "14px";
+            readonly "--uds-font-size-12": "12px";
+            readonly "--uds-font-size-10": "10px";
+            readonly "--uds-line-128": "136px";
+            readonly "--uds-line-96": "104px";
+            readonly "--uds-line-72": "80px";
+            readonly "--uds-line-60": "68px";
+            readonly "--uds-line-48": "56px";
+            readonly "--uds-line-36": "44px";
+            readonly "--uds-line-32": "40px";
+            readonly "--uds-line-28": "36px";
+            readonly "--uds-line-24": "32px";
+            readonly "--uds-line-20": "28px";
+            readonly "--uds-line-16": "24px";
+            readonly "--uds-line-14": "20px";
+            readonly "--uds-line-12": "16px";
+            readonly "--uds-line-10": "14px";
+            readonly "--uds-line-heading-20": "var(--uds-line-20)";
+            readonly "--uds-font-weight": "400";
+            readonly "--uds-font-weight-medium": "500";
+            readonly "--uds-font-weight-semibold": "600";
+            readonly "--uds-font-weight-bold": "700";
+            readonly "--uds-typography-body-md": "var(--uds-font-weight) var(--uds-font-size-16) / var(--uds-line-16) var(--uds-font-family)";
+            readonly "--uds-typography-body-xs": "var(--uds-font-weight) var(--uds-font-size-12) / var(--uds-line-12) var(--uds-font-family)";
+            readonly "--uds-typography-label-md": "var(--uds-font-weight-semibold) var(--uds-font-size-14) / var(--uds-line-14) var(--uds-font-family)";
+        };
+        readonly tablet: {
+            readonly "--uds-font-size-128": "96px";
+            readonly "--uds-line-128": "104px";
+            readonly "--uds-font-size-96": "72px";
+            readonly "--uds-line-96": "80px";
+            readonly "--uds-font-size-72": "60px";
+            readonly "--uds-line-72": "68px";
+            readonly "--uds-font-size-60": "48px";
+            readonly "--uds-line-60": "56px";
+            readonly "--uds-font-size-48": "40px";
+            readonly "--uds-line-48": "48px";
+            readonly "--uds-font-size-36": "32px";
+            readonly "--uds-line-36": "40px";
+            readonly "--uds-font-size-32": "28px";
+            readonly "--uds-line-32": "36px";
+            readonly "--uds-font-size-28": "24px";
+            readonly "--uds-line-28": "32px";
+            readonly "--uds-font-size-24": "22px";
+            readonly "--uds-line-24": "30px";
+            readonly "--uds-font-size-20": "18px";
+            readonly "--uds-line-20": "26px";
+        };
+        readonly mobile: {
+            readonly "--uds-font-size-128": "72px";
+            readonly "--uds-line-128": "80px";
+            readonly "--uds-font-size-96": "60px";
+            readonly "--uds-line-96": "68px";
+            readonly "--uds-font-size-72": "48px";
+            readonly "--uds-line-72": "56px";
+            readonly "--uds-font-size-60": "40px";
+            readonly "--uds-line-60": "48px";
+            readonly "--uds-font-size-48": "32px";
+            readonly "--uds-line-48": "40px";
+            readonly "--uds-font-size-36": "28px";
+            readonly "--uds-line-36": "36px";
+            readonly "--uds-font-size-32": "24px";
+            readonly "--uds-line-32": "32px";
+            readonly "--uds-font-size-28": "22px";
+            readonly "--uds-line-28": "30px";
+            readonly "--uds-font-size-24": "20px";
+            readonly "--uds-line-24": "28px";
+            readonly "--uds-font-size-20": "18px";
+            readonly "--uds-line-20": "26px";
+        };
+    };
+    readonly shadow: {
+        readonly light: {
+            readonly "--uds-shadow-5": "rgba(0, 0, 0, 0.05)";
+            readonly "--uds-shadow-8": "rgba(0, 0, 0, 0.08)";
+            readonly "--uds-shadow-10": "rgba(0, 0, 0, 0.1)";
+            readonly "--uds-shadow-12": "rgba(0, 0, 0, 0.12)";
+            readonly "--uds-shadow-15": "rgba(0, 0, 0, 0.15)";
+            readonly "--uds-shadow-18": "rgba(0, 0, 0, 0.18)";
+            readonly "--uds-shadow-25": "rgba(0, 0, 0, 0.25)";
+        };
+        readonly dark: {
+            readonly "--uds-shadow-5": "rgba(249, 250, 252, 0.05)";
+            readonly "--uds-shadow-8": "rgba(249, 250, 252, 0.08)";
+            readonly "--uds-shadow-10": "rgba(249, 250, 252, 0.1)";
+            readonly "--uds-shadow-12": "rgba(249, 250, 252, 0.12)";
+            readonly "--uds-shadow-15": "rgba(249, 250, 252, 0.15)";
+            readonly "--uds-shadow-18": "rgba(249, 250, 252, 0.18)";
+            readonly "--uds-shadow-25": "rgba(249, 250, 252, 0.25)";
+        };
+    };
+    readonly motion: {
+        readonly "--uds-animation-duration-100": "100ms";
+        readonly "--uds-animation-duration-200": "200ms";
+        readonly "--uds-animation-duration-300": "300ms";
+        readonly "--uds-animation-duration-500": "500ms";
+        readonly "--uds-animation-ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly "--uds-animation-ease-accelerate": "cubic-bezier(0.4, 0, 1, 1)";
+        readonly "--uds-animation-ease-decelerate": "cubic-bezier(0, 0, 0.2, 1)";
+        readonly "--uds-animation-ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)";
+        readonly "--uds-transition-property-colors": "color, background-color, border-color";
+        readonly "--uds-focus-ring-width": "2px";
+    };
+};

package/dist/tokens/index.js

@@ -0,0 +1,29 @@
+import { colorCategory, colorTokens } from "./color.js";
+import { spacingCategory, spacingTokens } from "./spacing.js";
+import { radiusCategory, radiusTokens } from "./radius.js";
+import { typographyCategory, typographyTokens } from "./typography.js";
+import { shadowCategory, shadowTokens } from "./shadow.js";
+import { motionCategory, motionTokens } from "./motion.js";
+export { colorTokens } from "./color.js";
+export { spacingTokens } from "./spacing.js";
+export { radiusTokens } from "./radius.js";
+export { typographyTokens } from "./typography.js";
+export { shadowTokens } from "./shadow.js";
+export { motionTokens } from "./motion.js";
+export { generateRuntimeTokensCss } from "./generateCss.js";
+export const runtimeTokens = {
+    color: colorCategory,
+    spacing: spacingCategory,
+    radius: radiusCategory,
+    typography: typographyCategory,
+    shadow: shadowCategory,
+    motion: motionCategory,
+};
+export const tokensByCategory = {
+    color: colorTokens,
+    spacing: spacingTokens,
+    radius: radiusTokens,
+    typography: typographyTokens,
+    shadow: shadowTokens,
+    motion: motionTokens,
+};

package/dist/tokens/motion.d.ts

@@ -0,0 +1,14 @@
+import type { TokenCategory } from "./types.js";
+export declare const motionTokens: {
+    readonly "--uds-animation-duration-100": "100ms";
+    readonly "--uds-animation-duration-200": "200ms";
+    readonly "--uds-animation-duration-300": "300ms";
+    readonly "--uds-animation-duration-500": "500ms";
+    readonly "--uds-animation-ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly "--uds-animation-ease-accelerate": "cubic-bezier(0.4, 0, 1, 1)";
+    readonly "--uds-animation-ease-decelerate": "cubic-bezier(0, 0, 0.2, 1)";
+    readonly "--uds-animation-ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)";
+    readonly "--uds-transition-property-colors": "color, background-color, border-color";
+    readonly "--uds-focus-ring-width": "2px";
+};
+export declare const motionCategory: TokenCategory;