@mich8060/unified-design-system 0.2.9 → 0.2.10

package/dist/tokens/motion.js

@@ -0,0 +1,15 @@
+export const motionTokens = {
+    "--uds-animation-duration-100": "100ms",
+    "--uds-animation-duration-200": "200ms",
+    "--uds-animation-duration-300": "300ms",
+    "--uds-animation-duration-500": "500ms",
+    "--uds-animation-ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "--uds-animation-ease-accelerate": "cubic-bezier(0.4, 0, 1, 1)",
+    "--uds-animation-ease-decelerate": "cubic-bezier(0, 0, 0.2, 1)",
+    "--uds-animation-ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)",
+    "--uds-transition-property-colors": "color, background-color, border-color",
+    "--uds-focus-ring-width": "2px",
+};
+export const motionCategory = {
+    cssVars: motionTokens,
+};

package/dist/tokens/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/tokens/radius.js

@@ -0,0 +1,15 @@
+export const radiusTokens = {
+    "0": "0px",
+    "2": "2px",
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "9999": "9999px",
+};
+export const radiusCategory = {
+    cssVars: Object.fromEntries(Object.entries(radiusTokens).map(([token, value]) => [`--uds-radius-${token}`, value])),
+};

package/dist/tokens/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/tokens/shadow.js

@@ -0,0 +1,24 @@
+export const shadowTokens = {
+    light: {
+        "--uds-shadow-5": "rgba(0, 0, 0, 0.05)",
+        "--uds-shadow-8": "rgba(0, 0, 0, 0.08)",
+        "--uds-shadow-10": "rgba(0, 0, 0, 0.1)",
+        "--uds-shadow-12": "rgba(0, 0, 0, 0.12)",
+        "--uds-shadow-15": "rgba(0, 0, 0, 0.15)",
+        "--uds-shadow-18": "rgba(0, 0, 0, 0.18)",
+        "--uds-shadow-25": "rgba(0, 0, 0, 0.25)",
+    },
+    dark: {
+        "--uds-shadow-5": "rgba(249, 250, 252, 0.05)",
+        "--uds-shadow-8": "rgba(249, 250, 252, 0.08)",
+        "--uds-shadow-10": "rgba(249, 250, 252, 0.1)",
+        "--uds-shadow-12": "rgba(249, 250, 252, 0.12)",
+        "--uds-shadow-15": "rgba(249, 250, 252, 0.15)",
+        "--uds-shadow-18": "rgba(249, 250, 252, 0.18)",
+        "--uds-shadow-25": "rgba(249, 250, 252, 0.25)",
+    },
+};
+export const shadowCategory = {
+    cssVars: shadowTokens.light,
+    darkCssVars: shadowTokens.dark,
+};

package/dist/tokens/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/tokens/spacing.js

@@ -0,0 +1,22 @@
+export const spacingTokens = {
+    "0": "0px",
+    "2": "2px",
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "14": "14px",
+    "16": "16px",
+    "18": "18px",
+    "24": "24px",
+    "32": "32px",
+    "36": "36px",
+    "40": "40px",
+    "48": "48px",
+    "64": "64px",
+    "80": "80px",
+};
+export const spacingCategory = {
+    cssVars: Object.fromEntries(Object.entries(spacingTokens).map(([token, value]) => [`--uds-spacing-${token}`, value])),
+};

package/dist/tokens/tokens.css

@@ -0,0 +1,421 @@
+:root {
+  --system-color-black: #111111;
+  --system-color-white: #ffffff;
+  --system-color-transparent: rgba(255, 255, 255, 0.0099999998);
+  --system-color-neutrals-25: #fafbfc;
+  --system-color-neutrals-50: #f9fafc;
+  --system-color-neutrals-100: #f3f4f6;
+  --system-color-neutrals-200: #e6e7eb;
+  --system-color-neutrals-300: #d2d5dc;
+  --system-color-neutrals-400: #9ca2ae;
+  --system-color-neutrals-500: #6b7380;
+  --system-color-neutrals-600: #4c5564;
+  --system-color-neutrals-700: #384152;
+  --system-color-neutrals-800: #202938;
+  --system-color-neutrals-900: #111828;
+  --system-color-neutrals-1000: #0d1320;
+  --system-color-primary-25: #f2fafd;
+  --system-color-primary-50: #e3f5fa;
+  --system-color-primary-100: #aee0f4;
+  --system-color-primary-200: #78cbec;
+  --system-color-primary-300: #41b7e5;
+  --system-color-primary-400: #00a7e1;
+  --system-color-primary-500: #009add;
+  --system-color-primary-600: #008dcf;
+  --system-color-primary-700: #0c6bb0;
+  --system-color-primary-800: #006aa8;
+  --system-color-primary-900: #004b88;
+  --system-color-secondary-25: #fefbf5;
+  --system-color-secondary-50: #fef8ee;
+  --system-color-secondary-100: #feefd6;
+  --system-color-secondary-200: #fbdcad;
+  --system-color-secondary-300: #f9c278;
+  --system-color-secondary-400: #f59e42;
+  --system-color-secondary-500: #f2821f;
+  --system-color-secondary-600: #e36613;
+  --system-color-secondary-700: #bc4d12;
+  --system-color-secondary-800: #963e16;
+  --system-color-secondary-900: #793515;
+  --system-color-tertiary-25: #eff2f5;
+  --system-color-tertiary-50: #e6ebf0;
+  --system-color-tertiary-100: #bfcddb;
+  --system-color-tertiary-200: #97adc3;
+  --system-color-tertiary-300: #708caa;
+  --system-color-tertiary-400: #4f7499;
+  --system-color-tertiary-500: #295d8b;
+  --system-color-tertiary-600: #215583;
+  --system-color-tertiary-700: #174b77;
+  --system-color-tertiary-800: #12416b;
+  --system-color-tertiary-900: #0f3152;
+  --system-color-quaternary-25: #fefdf6;
+  --system-color-quaternary-50: #fdfbed;
+  --system-color-quaternary-100: #f8f3cb;
+  --system-color-quaternary-200: #f1e796;
+  --system-color-quaternary-300: #ead55f;
+  --system-color-quaternary-400: #f8ca10;
+  --system-color-quaternary-500: #fbb03a;
+  --system-color-quaternary-600: #c3841c;
+  --system-color-quaternary-700: #a26e1b;
+  --system-color-quaternary-800: #845c1c;
+  --system-color-quaternary-900: #6d4d1a;
+  --system-color-accent-amber-25: #fffbeb;
+  --system-color-accent-amber-50: #fef3c7;
+  --system-color-accent-amber-100: #fde68a;
+  --system-color-accent-amber-200: #fcd34d;
+  --system-color-accent-amber-300: #fbc02d;
+  --system-color-accent-amber-400: #fbbf24;
+  --system-color-accent-amber-500: #f59e0b;
+  --system-color-accent-amber-600: #d97706;
+  --system-color-accent-amber-700: #b45309;
+  --system-color-accent-amber-800: #92400e;
+  --system-color-accent-amber-900: #78350f;
+  --system-color-accent-amber-1000: #5f2a09;
+  --system-color-accent-aqua-25: #f0fdfa;
+  --system-color-accent-aqua-50: #ccfbf1;
+  --system-color-accent-aqua-100: #99f6e4;
+  --system-color-accent-aqua-200: #5eead4;
+  --system-color-accent-aqua-300: #2dd4bf;
+  --system-color-accent-aqua-400: #14b8a6;
+  --system-color-accent-aqua-500: #0d9488;
+  --system-color-accent-aqua-600: #0f766e;
+  --system-color-accent-aqua-700: #115e59;
+  --system-color-accent-aqua-800: #134e4a;
+  --system-color-accent-aqua-900: #0f3a37;
+  --system-color-accent-aqua-1000: #0a2e2c;
+  --system-color-accent-blue-25: #f2f7ff;
+  --system-color-accent-blue-50: #eff6ff;
+  --system-color-accent-blue-100: #dbeaff;
+  --system-color-accent-blue-200: #bfdcfe;
+  --system-color-accent-blue-300: #93c4fc;
+  --system-color-accent-blue-400: #61a5fa;
+  --system-color-accent-blue-500: #3b82f6;
+  --system-color-accent-blue-600: #2563ec;
+  --system-color-accent-blue-700: #1d4ed7;
+  --system-color-accent-blue-800: #1f41af;
+  --system-color-accent-blue-900: #1f3a8b;
+  --system-color-accent-blue-1000: #182e6f;
+  --system-color-accent-cyan-25: #effeff;
+  --system-color-accent-cyan-50: #ecfeff;
+  --system-color-accent-cyan-100: #cffbfe;
+  --system-color-accent-cyan-200: #a5f3fd;
+  --system-color-accent-cyan-300: #66e8f8;
+  --system-color-accent-cyan-400: #21d3ed;
+  --system-color-accent-cyan-500: #07b6d5;
+  --system-color-accent-cyan-600: #0891b3;
+  --system-color-accent-cyan-700: #0f7490;
+  --system-color-accent-cyan-800: #165e76;
+  --system-color-accent-cyan-900: #164f63;
+  --system-color-accent-cyan-1000: #113f4f;
+  --system-color-accent-emerald-25: #effdf7;
+  --system-color-accent-emerald-50: #ecfdf5;
+  --system-color-accent-emerald-100: #d0fae4;
+  --system-color-accent-emerald-200: #a7f3cf;
+  --system-color-accent-emerald-300: #6de7b6;
+  --system-color-accent-emerald-400: #34d399;
+  --system-color-accent-emerald-500: #10b982;
+  --system-color-accent-emerald-600: #05976a;
+  --system-color-accent-emerald-700: #057857;
+  --system-color-accent-emerald-800: #075f47;
+  --system-color-accent-emerald-900: #064d3b;
+  --system-color-accent-emerald-1000: #043d2f;
+  --system-color-accent-fuchsia-25: #fef6ff;
+  --system-color-accent-fuchsia-50: #fef4ff;
+  --system-color-accent-fuchsia-100: #fae8fe;
+  --system-color-accent-fuchsia-200: #f5cffe;
+  --system-color-accent-fuchsia-300: #f0abfc;
+  --system-color-accent-fuchsia-400: #e879f9;
+  --system-color-accent-fuchsia-500: #d946ef;
+  --system-color-accent-fuchsia-600: #c026d4;
+  --system-color-accent-fuchsia-700: #a21caf;
+  --system-color-accent-fuchsia-800: #861990;
+  --system-color-accent-fuchsia-900: #701a75;
+  --system-color-accent-fuchsia-1000: #59145d;
+  --system-color-accent-green-25: #f3fdf6;
+  --system-color-accent-green-50: #f0fdf4;
+  --system-color-accent-green-100: #dcfce7;
+  --system-color-accent-green-200: #bbf7d1;
+  --system-color-accent-green-300: #86efac;
+  --system-color-accent-green-400: #4ade80;
+  --system-color-accent-green-500: #23c55e;
+  --system-color-accent-green-600: #17a34a;
+  --system-color-accent-green-700: #157f3d;
+  --system-color-accent-green-800: #176535;
+  --system-color-accent-green-900: #15532e;
+  --system-color-accent-green-1000: #104224;
+  --system-color-accent-indigo-25: #f1f4fe;
+  --system-color-accent-indigo-50: #eef2fe;
+  --system-color-accent-indigo-100: #e1e7ff;
+  --system-color-accent-indigo-200: #c7d2ff;
+  --system-color-accent-indigo-300: #a6b4fd;
+  --system-color-accent-indigo-400: #818cf8;
+  --system-color-accent-indigo-500: #6366f1;
+  --system-color-accent-indigo-600: #5046e5;
+  --system-color-accent-indigo-700: #4438ca;
+  --system-color-accent-indigo-800: #3730a2;
+  --system-color-accent-indigo-900: #312d81;
+  --system-color-accent-indigo-1000: #272467;
+  --system-color-accent-lime-25: #f7feeb;
+  --system-color-accent-lime-50: #f6fee7;
+  --system-color-accent-lime-100: #ecfccb;
+  --system-color-accent-lime-200: #daf99c;
+  --system-color-accent-lime-300: #bef164;
+  --system-color-accent-lime-400: #a3e636;
+  --system-color-accent-lime-500: #83cc16;
+  --system-color-accent-lime-600: #64a30e;
+  --system-color-accent-lime-700: #5a8720;
+  --system-color-accent-lime-800: #3f6212;
+  --system-color-accent-lime-900: #365313;
+  --system-color-accent-lime-1000: #2b420f;
+  --system-color-accent-magenta-25: #fff5fb;
+  --system-color-accent-magenta-50: #fdf2f8;
+  --system-color-accent-magenta-100: #fce7f3;
+  --system-color-accent-magenta-200: #fbcfe8;
+  --system-color-accent-magenta-300: #f9a8d4;
+  --system-color-accent-magenta-400: #f472b6;
+  --system-color-accent-magenta-500: #ec4899;
+  --system-color-accent-magenta-600: #db2777;
+  --system-color-accent-magenta-700: #be185d;
+  --system-color-accent-magenta-800: #9d174d;
+  --system-color-accent-magenta-900: #831843;
+  --system-color-accent-magenta-1000: #6b1235;
+  --system-color-accent-orange-25: #fffbf7;
+  --system-color-accent-orange-50: #fffaf5;
+  --system-color-accent-orange-100: #fff6ed;
+  --system-color-accent-orange-200: #ffead5;
+  --system-color-accent-orange-300: #fddcab;
+  --system-color-accent-orange-400: #feb273;
+  --system-color-accent-orange-500: #fd853a;
+  --system-color-accent-orange-600: #fb6514;
+  --system-color-accent-orange-700: #ec4a0a;
+  --system-color-accent-orange-800: #9c2a10;
+  --system-color-accent-orange-900: #7e2410;
+  --system-color-accent-orange-1000: #641c0c;
+  --system-color-accent-purple-25: #fbf7ff;
+  --system-color-accent-purple-50: #fbf5ff;
+  --system-color-accent-purple-100: #f4e8fe;
+  --system-color-accent-purple-200: #ead5fe;
+  --system-color-accent-purple-300: #d8b4fe;
+  --system-color-accent-purple-400: #c085fd;
+  --system-color-accent-purple-500: #a755f7;
+  --system-color-accent-purple-600: #9334ea;
+  --system-color-accent-purple-700: #7e22cf;
+  --system-color-accent-purple-800: #6b22a8;
+  --system-color-accent-purple-900: #571c86;
+  --system-color-accent-purple-1000: #45166b;
+  --system-color-accent-red-25: #fef4f4;
+  --system-color-accent-red-50: #fef2f2;
+  --system-color-accent-red-100: #fee2e1;
+  --system-color-accent-red-200: #fecbca;
+  --system-color-accent-red-300: #fda5a4;
+  --system-color-accent-red-400: #f87070;
+  --system-color-accent-red-500: #f04444;
+  --system-color-accent-red-600: #dc2625;
+  --system-color-accent-red-700: #ba1c1d;
+  --system-color-accent-red-800: #991b1c;
+  --system-color-accent-red-900: #7f1d1e;
+  --system-color-accent-red-1000: #651718;
+  --system-color-accent-rose-25: #fff3f3;
+  --system-color-accent-rose-50: #fff1f1;
+  --system-color-accent-rose-100: #fee4e7;
+  --system-color-accent-rose-200: #fecdd3;
+  --system-color-accent-rose-300: #fea4b0;
+  --system-color-accent-rose-400: #fb7286;
+  --system-color-accent-rose-500: #f43f5e;
+  --system-color-accent-rose-600: #e21d48;
+  --system-color-accent-rose-700: #be113c;
+  --system-color-accent-rose-800: #9f133a;
+  --system-color-accent-rose-900: #891336;
+  --system-color-accent-rose-1000: #6d0f2b;
+  --system-color-accent-sky-25: #f3faff;
+  --system-color-accent-sky-50: #f0f9ff;
+  --system-color-accent-sky-100: #e0f2fe;
+  --system-color-accent-sky-200: #bae7fe;
+  --system-color-accent-sky-300: #7ed3fc;
+  --system-color-accent-sky-400: #38bdf8;
+  --system-color-accent-sky-500: #0ea5ea;
+  --system-color-accent-sky-600: #0384c6;
+  --system-color-accent-sky-700: #0469a1;
+  --system-color-accent-sky-800: #075a86;
+  --system-color-accent-sky-900: #0c4a6f;
+  --system-color-accent-sky-1000: #0c4a6f;
+  --system-color-accent-violet-25: #f7f5ff;
+  --system-color-accent-violet-50: #f5f3ff;
+  --system-color-accent-violet-100: #edeaff;
+  --system-color-accent-violet-200: #ddd6ff;
+  --system-color-accent-violet-300: #c5b5fe;
+  --system-color-accent-violet-400: #a78bfa;
+  --system-color-accent-violet-500: #8b5cf6;
+  --system-color-accent-violet-600: #7d3aec;
+  --system-color-accent-violet-700: #6d28d9;
+  --system-color-accent-violet-800: #5b20b6;
+  --system-color-accent-violet-900: #4d1d95;
+  --system-color-accent-violet-1000: #3d1777;
+  --system-color-accent-yellow-25: #fefcec;
+  --system-color-accent-yellow-50: #fefce8;
+  --system-color-accent-yellow-100: #fef9c3;
+  --system-color-accent-yellow-200: #fef08a;
+  --system-color-accent-yellow-300: #fde047;
+  --system-color-accent-yellow-400: #facc15;
+  --system-color-accent-yellow-500: #e9b308;
+  --system-color-accent-yellow-600: #ca8a04;
+  --system-color-accent-yellow-700: #a26208;
+  --system-color-accent-yellow-800: #854e0e;
+  --system-color-accent-yellow-900: #723f12;
+  --system-color-accent-yellow-1000: #5b320e;
+}
+
+:root {
+  --uds-spacing-0: 0px;
+  --uds-spacing-2: 2px;
+  --uds-spacing-4: 4px;
+  --uds-spacing-6: 6px;
+  --uds-spacing-8: 8px;
+  --uds-spacing-10: 10px;
+  --uds-spacing-12: 12px;
+  --uds-spacing-14: 14px;
+  --uds-spacing-16: 16px;
+  --uds-spacing-18: 18px;
+  --uds-spacing-24: 24px;
+  --uds-spacing-32: 32px;
+  --uds-spacing-36: 36px;
+  --uds-spacing-40: 40px;
+  --uds-spacing-48: 48px;
+  --uds-spacing-64: 64px;
+  --uds-spacing-80: 80px;
+}
+
+:root {
+  --uds-radius-0: 0px;
+  --uds-radius-2: 2px;
+  --uds-radius-4: 4px;
+  --uds-radius-6: 6px;
+  --uds-radius-8: 8px;
+  --uds-radius-12: 12px;
+  --uds-radius-16: 16px;
+  --uds-radius-20: 20px;
+  --uds-radius-24: 24px;
+  --uds-radius-9999: 9999px;
+}
+
+:root {
+  --uds-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  --uds-font-size-128: 128px;
+  --uds-font-size-96: 96px;
+  --uds-font-size-72: 72px;
+  --uds-font-size-60: 60px;
+  --uds-font-size-48: 48px;
+  --uds-font-size-36: 36px;
+  --uds-font-size-32: 32px;
+  --uds-font-size-28: 28px;
+  --uds-font-size-24: 24px;
+  --uds-font-size-20: 20px;
+  --uds-font-size-16: 16px;
+  --uds-font-size-14: 14px;
+  --uds-font-size-12: 12px;
+  --uds-font-size-10: 10px;
+  --uds-line-128: 136px;
+  --uds-line-96: 104px;
+  --uds-line-72: 80px;
+  --uds-line-60: 68px;
+  --uds-line-48: 56px;
+  --uds-line-36: 44px;
+  --uds-line-32: 40px;
+  --uds-line-28: 36px;
+  --uds-line-24: 32px;
+  --uds-line-20: 28px;
+  --uds-line-16: 24px;
+  --uds-line-14: 20px;
+  --uds-line-12: 16px;
+  --uds-line-10: 14px;
+  --uds-line-heading-20: var(--uds-line-20);
+  --uds-font-weight: 400;
+  --uds-font-weight-medium: 500;
+  --uds-font-weight-semibold: 600;
+  --uds-font-weight-bold: 700;
+  --uds-typography-body-md: var(--uds-font-weight) var(--uds-font-size-16) / var(--uds-line-16) var(--uds-font-family);
+  --uds-typography-body-xs: var(--uds-font-weight) var(--uds-font-size-12) / var(--uds-line-12) var(--uds-font-family);
+  --uds-typography-label-md: var(--uds-font-weight-semibold) var(--uds-font-size-14) / var(--uds-line-14) var(--uds-font-family);
+}
+
+:root {
+  --uds-shadow-5: rgba(0, 0, 0, 0.05);
+  --uds-shadow-8: rgba(0, 0, 0, 0.08);
+  --uds-shadow-10: rgba(0, 0, 0, 0.1);
+  --uds-shadow-12: rgba(0, 0, 0, 0.12);
+  --uds-shadow-15: rgba(0, 0, 0, 0.15);
+  --uds-shadow-18: rgba(0, 0, 0, 0.18);
+  --uds-shadow-25: rgba(0, 0, 0, 0.25);
+}
+
+:root {
+  --uds-animation-duration-100: 100ms;
+  --uds-animation-duration-200: 200ms;
+  --uds-animation-duration-300: 300ms;
+  --uds-animation-duration-500: 500ms;
+  --uds-animation-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --uds-animation-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --uds-animation-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --uds-animation-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --uds-transition-property-colors: color, background-color, border-color;
+  --uds-focus-ring-width: 2px;
+}
+
+@media (max-width: 1023px) {
+:root {
+  --uds-font-size-128: 96px;
+  --uds-line-128: 104px;
+  --uds-font-size-96: 72px;
+  --uds-line-96: 80px;
+  --uds-font-size-72: 60px;
+  --uds-line-72: 68px;
+  --uds-font-size-60: 48px;
+  --uds-line-60: 56px;
+  --uds-font-size-48: 40px;
+  --uds-line-48: 48px;
+  --uds-font-size-36: 32px;
+  --uds-line-36: 40px;
+  --uds-font-size-32: 28px;
+  --uds-line-32: 36px;
+  --uds-font-size-28: 24px;
+  --uds-line-28: 32px;
+  --uds-font-size-24: 22px;
+  --uds-line-24: 30px;
+  --uds-font-size-20: 18px;
+  --uds-line-20: 26px;
+}
+}
+
+@media (max-width: 639px) {
+:root {
+  --uds-font-size-128: 72px;
+  --uds-line-128: 80px;
+  --uds-font-size-96: 60px;
+  --uds-line-96: 68px;
+  --uds-font-size-72: 48px;
+  --uds-line-72: 56px;
+  --uds-font-size-60: 40px;
+  --uds-line-60: 48px;
+  --uds-font-size-48: 32px;
+  --uds-line-48: 40px;
+  --uds-font-size-36: 28px;
+  --uds-line-36: 36px;
+  --uds-font-size-32: 24px;
+  --uds-line-32: 32px;
+  --uds-font-size-28: 22px;
+  --uds-line-28: 30px;
+  --uds-font-size-24: 20px;
+  --uds-line-24: 28px;
+  --uds-font-size-20: 18px;
+  --uds-line-20: 26px;
+}
+}
+
+.theme-dark {
+  --uds-shadow-5: rgba(249, 250, 252, 0.05);
+  --uds-shadow-8: rgba(249, 250, 252, 0.08);
+  --uds-shadow-10: rgba(249, 250, 252, 0.1);
+  --uds-shadow-12: rgba(249, 250, 252, 0.12);
+  --uds-shadow-15: rgba(249, 250, 252, 0.15);
+  --uds-shadow-18: rgba(249, 250, 252, 0.18);
+  --uds-shadow-25: rgba(249, 250, 252, 0.25);
+}

package/dist/tokens/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/tokens/types.js

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

package/dist/tokens/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";
+    };
+};