@materi.ai/frame 1.0.0-rc.1

package/dist/ui/tokens/design-tokens.d.ts

@@ -0,0 +1,509 @@
+/**
+ * MATERI DESIGN TOKENS
+ * Core design system tokens: spacing, typography, colors, shadows, border radii, motion
+ * Used as foundation for Tailwind CSS theme extension
+ *
+ * Token Structure:
+ * - Spacing: 4px base unit (mobile-first)
+ * - Typography: 7-scale (12px → 48px)
+ * - Colors: 50+ shades with semantic naming
+ * - Shadows: 4 depth levels
+ * - Radii: 3 levels (subtle, medium, large)
+ * - Motion: 3 durations for micro/standard/slow interactions
+ */
+export declare const spacing: {
+    readonly px: "1px";
+    readonly '0': "0";
+    readonly '1': "4px";
+    readonly '2': "8px";
+    readonly '3': "12px";
+    readonly '4': "16px";
+    readonly '5': "20px";
+    readonly '6': "24px";
+    readonly '7': "28px";
+    readonly '8': "32px";
+    readonly '9': "36px";
+    readonly '10': "40px";
+    readonly '11': "44px";
+    readonly '12': "48px";
+    readonly '14': "56px";
+    readonly '16': "64px";
+    readonly '20': "80px";
+    readonly '24': "96px";
+    readonly '28': "112px";
+    readonly '32': "128px";
+    readonly '36': "144px";
+    readonly '40': "160px";
+    readonly '44': "176px";
+    readonly '48': "192px";
+    readonly '52': "208px";
+    readonly '56': "224px";
+    readonly '60': "240px";
+    readonly '64': "256px";
+    readonly '72': "288px";
+    readonly '80': "320px";
+    readonly '96': "384px";
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: string;
+        readonly mono: string;
+    };
+    readonly fontSize: {
+        readonly xs: readonly ["12px", {
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0.01em";
+        }];
+        readonly sm: readonly ["14px", {
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0em";
+        }];
+        readonly base: readonly ["16px", {
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0em";
+        }];
+        readonly lg: readonly ["18px", {
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "-0.01em";
+        }];
+        readonly xl: readonly ["20px", {
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "-0.01em";
+        }];
+        readonly '2xl': readonly ["24px", {
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "-0.01em";
+        }];
+        readonly '3xl': readonly ["30px", {
+            readonly lineHeight: "36px";
+            readonly letterSpacing: "-0.02em";
+        }];
+        readonly '4xl': readonly ["36px", {
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "-0.02em";
+        }];
+        readonly '5xl': readonly ["48px", {
+            readonly lineHeight: "56px";
+            readonly letterSpacing: "-0.02em";
+        }];
+    };
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+};
+export declare const colors: {
+    readonly neutral: {
+        readonly '50': "#fafafa";
+        readonly '100': "#f5f5f5";
+        readonly '150': "#f0f0f0";
+        readonly '200': "#eeeeee";
+        readonly '300': "#e0e0e0";
+        readonly '400': "#bdbdbd";
+        readonly '500': "#9e9e9e";
+        readonly '600': "#757575";
+        readonly '700': "#616161";
+        readonly '800': "#424242";
+        readonly '900': "#212121";
+        readonly '950': "#121212";
+    };
+    readonly primary: {
+        readonly '50': "#f0f6ff";
+        readonly '100': "#e0ecff";
+        readonly '200': "#c7e0ff";
+        readonly '300': "#a3d5ff";
+        readonly '400': "#7cc4ff";
+        readonly '500': "#4ba8ff";
+        readonly '600': "#3184e6";
+        readonly '700': "#2563cc";
+        readonly '800': "#2050b3";
+        readonly '900': "#1a3d99";
+        readonly '950': "#0a1f4d";
+    };
+    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': "#145231";
+    };
+    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': "#ecf9ff";
+        readonly '100': "#cff2ff";
+        readonly '200': "#a5e8ff";
+        readonly '300': "#67d5ff";
+        readonly '400': "#2eb9ff";
+        readonly '500': "#06b6d4";
+        readonly '600': "#0891b2";
+        readonly '700': "#0e7490";
+        readonly '800': "#155e75";
+        readonly '900': "#0c4a6e";
+    };
+    readonly semantic: {
+        readonly text: "#212121";
+        readonly textSecondary: "#616161";
+        readonly textTertiary: "#9e9e9e";
+        readonly textDisabled: "#bdbdbd";
+        readonly textInverse: "#fafafa";
+        readonly background: "#fafafa";
+        readonly backgroundSecondary: "#f5f5f5";
+        readonly backgroundTertiary: "#eeeeee";
+        readonly border: "#eeeeee";
+        readonly borderSecondary: "#e0e0e0";
+        readonly interactive: "#4ba8ff";
+        readonly interactiveHover: "#3184e6";
+        readonly interactiveActive: "#2050b3";
+        readonly success: "#22c55e";
+        readonly warning: "#f59e0b";
+        readonly error: "#ef4444";
+        readonly info: "#06b6d4";
+    };
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    readonly base: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    readonly md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+};
+export declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "2px";
+    readonly base: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly full: "9999px";
+};
+export declare const motion: {
+    readonly duration: {
+        readonly fast: "75ms";
+        readonly micro: "100ms";
+        readonly standard: "150ms";
+        readonly base: "200ms";
+        readonly slow: "300ms";
+        readonly slower: "400ms";
+        readonly slowest: "500ms";
+    };
+    readonly easing: {
+        readonly linear: "linear";
+        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)";
+    };
+};
+export declare const components: {
+    readonly button: {
+        readonly height: {
+            readonly sm: "32px";
+            readonly base: "40px";
+            readonly lg: "48px";
+        };
+        readonly padding: {
+            readonly sm: "8px 12px";
+            readonly base: "8px 16px";
+            readonly lg: "12px 24px";
+        };
+    };
+    readonly input: {
+        readonly height: "40px";
+        readonly borderWidth: "1px";
+        readonly padding: "8px 12px";
+    };
+    readonly card: {
+        readonly padding: "24px";
+        readonly borderRadius: "8px";
+        readonly shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    };
+    readonly modal: {
+        readonly borderRadius: "12px";
+        readonly shadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+        readonly padding: "32px";
+    };
+};
+export declare const designTokens: {
+    readonly spacing: {
+        readonly px: "1px";
+        readonly '0': "0";
+        readonly '1': "4px";
+        readonly '2': "8px";
+        readonly '3': "12px";
+        readonly '4': "16px";
+        readonly '5': "20px";
+        readonly '6': "24px";
+        readonly '7': "28px";
+        readonly '8': "32px";
+        readonly '9': "36px";
+        readonly '10': "40px";
+        readonly '11': "44px";
+        readonly '12': "48px";
+        readonly '14': "56px";
+        readonly '16': "64px";
+        readonly '20': "80px";
+        readonly '24': "96px";
+        readonly '28': "112px";
+        readonly '32': "128px";
+        readonly '36': "144px";
+        readonly '40': "160px";
+        readonly '44': "176px";
+        readonly '48': "192px";
+        readonly '52': "208px";
+        readonly '56': "224px";
+        readonly '60': "240px";
+        readonly '64': "256px";
+        readonly '72': "288px";
+        readonly '80': "320px";
+        readonly '96': "384px";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: string;
+            readonly mono: string;
+        };
+        readonly fontSize: {
+            readonly xs: readonly ["12px", {
+                readonly lineHeight: "16px";
+                readonly letterSpacing: "0.01em";
+            }];
+            readonly sm: readonly ["14px", {
+                readonly lineHeight: "20px";
+                readonly letterSpacing: "0em";
+            }];
+            readonly base: readonly ["16px", {
+                readonly lineHeight: "24px";
+                readonly letterSpacing: "0em";
+            }];
+            readonly lg: readonly ["18px", {
+                readonly lineHeight: "28px";
+                readonly letterSpacing: "-0.01em";
+            }];
+            readonly xl: readonly ["20px", {
+                readonly lineHeight: "28px";
+                readonly letterSpacing: "-0.01em";
+            }];
+            readonly '2xl': readonly ["24px", {
+                readonly lineHeight: "32px";
+                readonly letterSpacing: "-0.01em";
+            }];
+            readonly '3xl': readonly ["30px", {
+                readonly lineHeight: "36px";
+                readonly letterSpacing: "-0.02em";
+            }];
+            readonly '4xl': readonly ["36px", {
+                readonly lineHeight: "40px";
+                readonly letterSpacing: "-0.02em";
+            }];
+            readonly '5xl': readonly ["48px", {
+                readonly lineHeight: "56px";
+                readonly letterSpacing: "-0.02em";
+            }];
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly normal: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+    };
+    readonly colors: {
+        readonly neutral: {
+            readonly '50': "#fafafa";
+            readonly '100': "#f5f5f5";
+            readonly '150': "#f0f0f0";
+            readonly '200': "#eeeeee";
+            readonly '300': "#e0e0e0";
+            readonly '400': "#bdbdbd";
+            readonly '500': "#9e9e9e";
+            readonly '600': "#757575";
+            readonly '700': "#616161";
+            readonly '800': "#424242";
+            readonly '900': "#212121";
+            readonly '950': "#121212";
+        };
+        readonly primary: {
+            readonly '50': "#f0f6ff";
+            readonly '100': "#e0ecff";
+            readonly '200': "#c7e0ff";
+            readonly '300': "#a3d5ff";
+            readonly '400': "#7cc4ff";
+            readonly '500': "#4ba8ff";
+            readonly '600': "#3184e6";
+            readonly '700': "#2563cc";
+            readonly '800': "#2050b3";
+            readonly '900': "#1a3d99";
+            readonly '950': "#0a1f4d";
+        };
+        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': "#145231";
+        };
+        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': "#ecf9ff";
+            readonly '100': "#cff2ff";
+            readonly '200': "#a5e8ff";
+            readonly '300': "#67d5ff";
+            readonly '400': "#2eb9ff";
+            readonly '500': "#06b6d4";
+            readonly '600': "#0891b2";
+            readonly '700': "#0e7490";
+            readonly '800': "#155e75";
+            readonly '900': "#0c4a6e";
+        };
+        readonly semantic: {
+            readonly text: "#212121";
+            readonly textSecondary: "#616161";
+            readonly textTertiary: "#9e9e9e";
+            readonly textDisabled: "#bdbdbd";
+            readonly textInverse: "#fafafa";
+            readonly background: "#fafafa";
+            readonly backgroundSecondary: "#f5f5f5";
+            readonly backgroundTertiary: "#eeeeee";
+            readonly border: "#eeeeee";
+            readonly borderSecondary: "#e0e0e0";
+            readonly interactive: "#4ba8ff";
+            readonly interactiveHover: "#3184e6";
+            readonly interactiveActive: "#2050b3";
+            readonly success: "#22c55e";
+            readonly warning: "#f59e0b";
+            readonly error: "#ef4444";
+            readonly info: "#06b6d4";
+        };
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+        readonly base: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    };
+    readonly borderRadius: {
+        readonly none: "0";
+        readonly sm: "2px";
+        readonly base: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly xl: "12px";
+        readonly '2xl': "16px";
+        readonly full: "9999px";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "75ms";
+            readonly micro: "100ms";
+            readonly standard: "150ms";
+            readonly base: "200ms";
+            readonly slow: "300ms";
+            readonly slower: "400ms";
+            readonly slowest: "500ms";
+        };
+        readonly easing: {
+            readonly linear: "linear";
+            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)";
+        };
+    };
+    readonly components: {
+        readonly button: {
+            readonly height: {
+                readonly sm: "32px";
+                readonly base: "40px";
+                readonly lg: "48px";
+            };
+            readonly padding: {
+                readonly sm: "8px 12px";
+                readonly base: "8px 16px";
+                readonly lg: "12px 24px";
+            };
+        };
+        readonly input: {
+            readonly height: "40px";
+            readonly borderWidth: "1px";
+            readonly padding: "8px 12px";
+        };
+        readonly card: {
+            readonly padding: "24px";
+            readonly borderRadius: "8px";
+            readonly shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        };
+        readonly modal: {
+            readonly borderRadius: "12px";
+            readonly shadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+            readonly padding: "32px";
+        };
+    };
+};
+export type DesignTokens = typeof designTokens;
+//# sourceMappingURL=design-tokens.d.ts.map

package/dist/ui/tokens/design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/design-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCV,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHT,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;CAWV,CAAC;AAMX,eAAO,MAAM,YAAY;;;;;;;;;CAaf,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CAuBT,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Bb,CAAC;AAMX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC"}