@2urgseui/core 0.1.0

package/dist/tokens/index.d.cts

@@ -0,0 +1,315 @@
+/**
+ * Breakpoints
+ *
+ * Semantic names map to the four primary viewport classes used across
+ * the design system. Tailwind min-width convention — styles apply at
+ * the named width and above.
+ *
+ * mobile   375px  — handheld (iPhone SE and up)
+ * tablet   768px  — tablet portrait and up
+ * desktop  1280px — laptop / standard PC
+ * wide     1920px — large external display / TV
+ *
+ * Numeric shorthands (xs → 2xl) are also exported for
+ * teams that prefer the compact notation.
+ */
+declare const breakpoints: {
+    readonly mobile: "375px";
+    readonly tablet: "768px";
+    readonly desktop: "1280px";
+    readonly wide: "1920px";
+    readonly xs: "375px";
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly "2xl": "1536px";
+    readonly "3xl": "1920px";
+};
+type Breakpoint = keyof typeof breakpoints;
+
+declare const colors: {
+    readonly brand: {
+        readonly 50: "#f6faf0";
+        readonly 100: "#eef7e4";
+        readonly 200: "#d4ebbe";
+        readonly 300: "#bae09d";
+        readonly 400: "#7dc75d";
+        readonly 500: "#43b02b";
+        readonly 600: "#379e23";
+        readonly 700: "#2a8518";
+        readonly 800: "#1c690f";
+        readonly 900: "#124f09";
+        readonly 950: "#093304";
+    };
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+    };
+    readonly info: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly accent: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7c3aed";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+    };
+    /** Resolved semantic aliases for light-UI usage (concrete colors, not path strings) */
+    readonly semantic: {
+        readonly primary: "#379e23";
+        readonly primaryHover: "#2a8518";
+        readonly primaryForeground: "#ffffff";
+        readonly secondary: "#f3f4f6";
+        readonly secondaryHover: "#e5e7eb";
+        readonly secondaryForeground: "#111827";
+        readonly success: "#16a34a";
+        readonly successForeground: "#f0fdf4";
+        readonly warning: "#d97706";
+        readonly warningForeground: "#fffbeb";
+        readonly error: "#dc2626";
+        readonly errorForeground: "#fef2f2";
+        readonly info: "#2563eb";
+        readonly infoForeground: "#eff6ff";
+    };
+    /**
+     * High-level color schemes for `class` dark mode (e.g. `html.light` / `html.dark` or `data-theme`).
+     * Use these to drive backgrounds, text, and surfaces instead of raw neutral steps.
+     */
+    readonly schemes: {
+        readonly light: {
+            readonly background: "#ffffff";
+            readonly foreground: "#111827";
+            readonly card: "#ffffff";
+            readonly cardForeground: "#111827";
+            readonly popover: "#ffffff";
+            readonly popoverForeground: "#111827";
+            readonly primary: "#379e23";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#f3f4f6";
+            readonly secondaryForeground: "#111827";
+            readonly muted: "#f3f4f6";
+            readonly mutedForeground: "#4b5563";
+            readonly accent: "#f3f4f6";
+            readonly accentForeground: "#111827";
+            readonly destructive: "#dc2626";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#16a34a";
+            readonly successForeground: "#f0fdf4";
+            readonly warning: "#d97706";
+            readonly warningForeground: "#78350f";
+            readonly error: "#dc2626";
+            readonly errorForeground: "#fef2f2";
+            readonly info: "#2563eb";
+            readonly infoForeground: "#eff6ff";
+            readonly border: "#e5e7eb";
+            readonly input: "#e5e7eb";
+            readonly ring: "#43b02b";
+        };
+        readonly dark: {
+            readonly background: "#030712";
+            readonly foreground: "#f9fafb";
+            readonly card: "#111827";
+            readonly cardForeground: "#f9fafb";
+            readonly popover: "#111827";
+            readonly popoverForeground: "#f9fafb";
+            readonly primary: "#43b02b";
+            readonly primaryForeground: "#030712";
+            readonly secondary: "#1f2937";
+            readonly secondaryForeground: "#f9fafb";
+            readonly muted: "#1f2937";
+            readonly mutedForeground: "#9ca3af";
+            readonly accent: "#1f2937";
+            readonly accentForeground: "#f9fafb";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#22c55e";
+            readonly successForeground: "#030712";
+            readonly warning: "#f59e0b";
+            readonly warningForeground: "#030712";
+            readonly error: "#ef4444";
+            readonly errorForeground: "#030712";
+            readonly info: "#3b82f6";
+            readonly infoForeground: "#030712";
+            readonly border: "#1f2937";
+            readonly input: "#1f2937";
+            readonly ring: "#7dc75d";
+        };
+    };
+};
+type Colors = typeof colors;
+
+declare const transitionDuration: {
+    readonly instant: "0ms";
+    readonly fast: "100ms";
+    readonly base: "150ms";
+    readonly slow: "300ms";
+    readonly slower: "500ms";
+};
+declare const transitionTimingFunction: {
+    readonly ease: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+};
+
+declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly base: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly "2xl": "1rem";
+    readonly "3xl": "1.5rem";
+    readonly full: "9999px";
+};
+
+declare const boxShadow: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+};
+
+declare const spacing: {
+    readonly px: "1px";
+    readonly 0: "0px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 3.5: "14px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+    readonly 32: "128px";
+    readonly 40: "160px";
+    readonly 48: "192px";
+    readonly 64: "256px";
+};
+
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Inter Variable", "Inter", "system-ui", "sans-serif"];
+        readonly mono: readonly ["JetBrains Mono", "Fira Code", "monospace"];
+        readonly display: readonly ["Cal Sans", "Inter Variable", "sans-serif"];
+    };
+    readonly fontSize: {
+        readonly "2xs": readonly ["0.625rem", {
+            readonly lineHeight: "0.875rem";
+        }];
+        readonly xs: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+        }];
+        readonly sm: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+        }];
+        readonly base: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+        }];
+        readonly lg: readonly ["1.125rem", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly xl: readonly ["1.25rem", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly "2xl": readonly ["1.5rem", {
+            readonly lineHeight: "2rem";
+        }];
+        readonly "3xl": readonly ["1.875rem", {
+            readonly lineHeight: "2.25rem";
+        }];
+        readonly "4xl": readonly ["2.25rem", {
+            readonly lineHeight: "2.5rem";
+        }];
+        readonly "5xl": readonly ["3rem", {
+            readonly lineHeight: "1";
+        }];
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+
+export { type Breakpoint, type Colors, borderRadius, boxShadow, breakpoints, colors, spacing, transitionDuration, transitionTimingFunction, typography };

package/dist/tokens/index.d.ts

@@ -0,0 +1,315 @@
+/**
+ * Breakpoints
+ *
+ * Semantic names map to the four primary viewport classes used across
+ * the design system. Tailwind min-width convention — styles apply at
+ * the named width and above.
+ *
+ * mobile   375px  — handheld (iPhone SE and up)
+ * tablet   768px  — tablet portrait and up
+ * desktop  1280px — laptop / standard PC
+ * wide     1920px — large external display / TV
+ *
+ * Numeric shorthands (xs → 2xl) are also exported for
+ * teams that prefer the compact notation.
+ */
+declare const breakpoints: {
+    readonly mobile: "375px";
+    readonly tablet: "768px";
+    readonly desktop: "1280px";
+    readonly wide: "1920px";
+    readonly xs: "375px";
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly "2xl": "1536px";
+    readonly "3xl": "1920px";
+};
+type Breakpoint = keyof typeof breakpoints;
+
+declare const colors: {
+    readonly brand: {
+        readonly 50: "#f6faf0";
+        readonly 100: "#eef7e4";
+        readonly 200: "#d4ebbe";
+        readonly 300: "#bae09d";
+        readonly 400: "#7dc75d";
+        readonly 500: "#43b02b";
+        readonly 600: "#379e23";
+        readonly 700: "#2a8518";
+        readonly 800: "#1c690f";
+        readonly 900: "#124f09";
+        readonly 950: "#093304";
+    };
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+    };
+    readonly info: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly accent: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7c3aed";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+    };
+    /** Resolved semantic aliases for light-UI usage (concrete colors, not path strings) */
+    readonly semantic: {
+        readonly primary: "#379e23";
+        readonly primaryHover: "#2a8518";
+        readonly primaryForeground: "#ffffff";
+        readonly secondary: "#f3f4f6";
+        readonly secondaryHover: "#e5e7eb";
+        readonly secondaryForeground: "#111827";
+        readonly success: "#16a34a";
+        readonly successForeground: "#f0fdf4";
+        readonly warning: "#d97706";
+        readonly warningForeground: "#fffbeb";
+        readonly error: "#dc2626";
+        readonly errorForeground: "#fef2f2";
+        readonly info: "#2563eb";
+        readonly infoForeground: "#eff6ff";
+    };
+    /**
+     * High-level color schemes for `class` dark mode (e.g. `html.light` / `html.dark` or `data-theme`).
+     * Use these to drive backgrounds, text, and surfaces instead of raw neutral steps.
+     */
+    readonly schemes: {
+        readonly light: {
+            readonly background: "#ffffff";
+            readonly foreground: "#111827";
+            readonly card: "#ffffff";
+            readonly cardForeground: "#111827";
+            readonly popover: "#ffffff";
+            readonly popoverForeground: "#111827";
+            readonly primary: "#379e23";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#f3f4f6";
+            readonly secondaryForeground: "#111827";
+            readonly muted: "#f3f4f6";
+            readonly mutedForeground: "#4b5563";
+            readonly accent: "#f3f4f6";
+            readonly accentForeground: "#111827";
+            readonly destructive: "#dc2626";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#16a34a";
+            readonly successForeground: "#f0fdf4";
+            readonly warning: "#d97706";
+            readonly warningForeground: "#78350f";
+            readonly error: "#dc2626";
+            readonly errorForeground: "#fef2f2";
+            readonly info: "#2563eb";
+            readonly infoForeground: "#eff6ff";
+            readonly border: "#e5e7eb";
+            readonly input: "#e5e7eb";
+            readonly ring: "#43b02b";
+        };
+        readonly dark: {
+            readonly background: "#030712";
+            readonly foreground: "#f9fafb";
+            readonly card: "#111827";
+            readonly cardForeground: "#f9fafb";
+            readonly popover: "#111827";
+            readonly popoverForeground: "#f9fafb";
+            readonly primary: "#43b02b";
+            readonly primaryForeground: "#030712";
+            readonly secondary: "#1f2937";
+            readonly secondaryForeground: "#f9fafb";
+            readonly muted: "#1f2937";
+            readonly mutedForeground: "#9ca3af";
+            readonly accent: "#1f2937";
+            readonly accentForeground: "#f9fafb";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#22c55e";
+            readonly successForeground: "#030712";
+            readonly warning: "#f59e0b";
+            readonly warningForeground: "#030712";
+            readonly error: "#ef4444";
+            readonly errorForeground: "#030712";
+            readonly info: "#3b82f6";
+            readonly infoForeground: "#030712";
+            readonly border: "#1f2937";
+            readonly input: "#1f2937";
+            readonly ring: "#7dc75d";
+        };
+    };
+};
+type Colors = typeof colors;
+
+declare const transitionDuration: {
+    readonly instant: "0ms";
+    readonly fast: "100ms";
+    readonly base: "150ms";
+    readonly slow: "300ms";
+    readonly slower: "500ms";
+};
+declare const transitionTimingFunction: {
+    readonly ease: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+};
+
+declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly base: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly "2xl": "1rem";
+    readonly "3xl": "1.5rem";
+    readonly full: "9999px";
+};
+
+declare const boxShadow: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+};
+
+declare const spacing: {
+    readonly px: "1px";
+    readonly 0: "0px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 3.5: "14px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+    readonly 32: "128px";
+    readonly 40: "160px";
+    readonly 48: "192px";
+    readonly 64: "256px";
+};
+
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Inter Variable", "Inter", "system-ui", "sans-serif"];
+        readonly mono: readonly ["JetBrains Mono", "Fira Code", "monospace"];
+        readonly display: readonly ["Cal Sans", "Inter Variable", "sans-serif"];
+    };
+    readonly fontSize: {
+        readonly "2xs": readonly ["0.625rem", {
+            readonly lineHeight: "0.875rem";
+        }];
+        readonly xs: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+        }];
+        readonly sm: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+        }];
+        readonly base: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+        }];
+        readonly lg: readonly ["1.125rem", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly xl: readonly ["1.25rem", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly "2xl": readonly ["1.5rem", {
+            readonly lineHeight: "2rem";
+        }];
+        readonly "3xl": readonly ["1.875rem", {
+            readonly lineHeight: "2.25rem";
+        }];
+        readonly "4xl": readonly ["2.25rem", {
+            readonly lineHeight: "2.5rem";
+        }];
+        readonly "5xl": readonly ["3rem", {
+            readonly lineHeight: "1";
+        }];
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+
+export { type Breakpoint, type Colors, borderRadius, boxShadow, breakpoints, colors, spacing, transitionDuration, transitionTimingFunction, typography };

package/dist/tokens/index.js

@@ -0,0 +1,20 @@
+import {
+  borderRadius,
+  boxShadow,
+  breakpoints,
+  colors,
+  spacing,
+  transitionDuration,
+  transitionTimingFunction,
+  typography
+} from "../chunk-VGPGVDCW.js";
+export {
+  borderRadius,
+  boxShadow,
+  breakpoints,
+  colors,
+  spacing,
+  transitionDuration,
+  transitionTimingFunction,
+  typography
+};