@mich8060/unified-design-system 0.2.10 → 0.2.13

package/dist/design-system/tokens/runtime/index.d.ts

@@ -0,0 +1,476 @@
+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 tokenVersion = "1.0.0";
+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/design-system/tokens/runtime/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;

package/dist/design-system/tokens/runtime/radius.d.ts

@@ -0,0 +1,14 @@
+import type { TokenCategory } from "./types.js";
+export declare const radiusTokens: {
+    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";
+};
+export declare const radiusCategory: TokenCategory;

package/dist/design-system/tokens/runtime/shadow.d.ts

@@ -0,0 +1,22 @@
+import type { TokenCategory } from "./types.js";
+export declare const shadowTokens: {
+    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)";
+    };
+};
+export declare const shadowCategory: TokenCategory;

package/dist/design-system/tokens/runtime/spacing.d.ts

@@ -0,0 +1,21 @@
+import type { TokenCategory } from "./types.js";
+export declare const spacingTokens: {
+    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";
+};
+export declare const spacingCategory: TokenCategory;

package/dist/design-system/tokens/runtime/types.d.ts

@@ -0,0 +1,21 @@
+export type CssVarName = `--${string}`;
+export type CssVarValue = string;
+export type CssVarMap = Record<CssVarName, CssVarValue>;
+export interface TokenCategory {
+    readonly cssVars: CssVarMap;
+    readonly darkCssVars?: CssVarMap;
+}
+export interface TypographyCategory extends TokenCategory {
+    readonly media?: ReadonlyArray<{
+        readonly query: string;
+        readonly cssVars: CssVarMap;
+    }>;
+}
+export interface RuntimeTokens {
+    readonly color: TokenCategory;
+    readonly spacing: TokenCategory;
+    readonly radius: TokenCategory;
+    readonly typography: TypographyCategory;
+    readonly shadow: TokenCategory;
+    readonly motion: TokenCategory;
+}

package/dist/design-system/tokens/runtime/typography.d.ts

@@ -0,0 +1,87 @@
+import type { TypographyCategory } from "./types.js";
+export declare const typographyCategory: TypographyCategory;
+export declare const typographyTokens: {
+    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";
+    };
+};

package/dist/design-system/version.d.ts

@@ -0,0 +1 @@
+export declare const UDS_RUNTIME_VERSION = "0.2.12";