@gtcx/tokens 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,424 @@
+/**
+ * Primitive design tokens - raw values without semantic meaning.
+ * These are the foundation for semantic tokens and should not be used directly in components.
+ */
+declare const colorPrimitives: {
+    readonly primary: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+        readonly 950: "#082f49";
+    };
+    readonly secondary: {
+        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";
+        readonly 950: "#3b0764";
+    };
+    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 950: "#052e16";
+    };
+    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 950: "#451a03";
+    };
+    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 950: "#450a0a";
+    };
+    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 950: "#172554";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+declare const spacingPrimitives: {
+    readonly 0: 0;
+    readonly 1: 4;
+    readonly 2: 8;
+    readonly 3: 12;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 8: 32;
+    readonly 10: 40;
+    readonly 12: 48;
+    readonly 16: 64;
+    readonly 20: 80;
+    readonly 24: 96;
+    readonly 32: 128;
+};
+declare const fontSizePrimitives: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 30;
+    readonly '4xl': 36;
+    readonly '5xl': 48;
+};
+declare const fontWeightPrimitives: {
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+declare const lineHeightPrimitives: {
+    readonly tight: 1.2;
+    readonly normal: 1.5;
+    readonly relaxed: 1.7;
+};
+declare const letterSpacingPrimitives: {
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+};
+declare const borderRadiusPrimitives: {
+    readonly none: 0;
+    readonly sm: 2;
+    readonly md: 4;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly full: 9999;
+};
+declare const shadowPrimitives: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    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)";
+};
+declare const fontFamilyPrimitives: {
+    readonly sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    readonly mono: "JetBrains Mono, Fira Code, Consolas, monospace";
+    readonly serif: "Georgia, 'Times New Roman', serif";
+};
+type ColorPrimitives = typeof colorPrimitives;
+type SpacingPrimitives = typeof spacingPrimitives;
+type FontSizePrimitives = typeof fontSizePrimitives;
+type FontWeightPrimitives = typeof fontWeightPrimitives;
+type BorderRadiusPrimitives = typeof borderRadiusPrimitives;
+
+/**
+ * Semantic design tokens - named for their purpose/usage.
+ * Components should consume these tokens, not primitives.
+ */
+declare const semanticTokens: {
+    readonly colors: {
+        readonly primary: "#0ea5e9";
+        readonly primaryHover: "#0284c7";
+        readonly primaryActive: "#0369a1";
+        readonly primaryBg: "#f0f9ff";
+        readonly secondary: "#a855f7";
+        readonly secondaryHover: "#9333ea";
+        readonly success: "#22c55e";
+        readonly warning: "#f59e0b";
+        readonly error: "#ef4444";
+        readonly info: "#3b82f6";
+        readonly profit: "#10b981";
+        readonly loss: "#ef4444";
+        readonly approved: "#059669";
+        readonly pending: "#d97706";
+        readonly rejected: "#dc2626";
+        readonly secure: "#059669";
+        readonly insecure: "#dc2626";
+        readonly textPrimary: "#171717";
+        readonly textSecondary: "#525252";
+        readonly textTertiary: "#737373";
+        readonly textMuted: "#a3a3a3";
+        readonly textInverse: "#fafafa";
+        readonly bgPage: "#fafafa";
+        readonly bgSurface: "#ffffff";
+        readonly bgSurfaceHover: "#f5f5f5";
+        readonly bgSurfaceTertiary: "#e5e5e5";
+        readonly bgInverse: "#171717";
+        readonly bgSidebar: "#ffffff";
+        readonly bgHeader: "#ffffff";
+        readonly border: "#e5e5e5";
+        readonly borderLight: "#f5f5f5";
+        readonly borderSecondary: "#d4d4d4";
+        readonly borderFocus: "#0ea5e9";
+        readonly link: "#0284c7";
+        readonly linkHover: "#0369a1";
+    };
+    readonly spacing: {
+        readonly pageGutter: 24;
+        readonly cardPadding: 16;
+        readonly sectionGap: 24;
+        readonly componentGap: 12;
+        readonly inlineGap: 8;
+        readonly component: {
+            readonly button: {
+                readonly paddingX: 16;
+                readonly paddingY: 8;
+                readonly gap: 8;
+            };
+            readonly input: {
+                readonly paddingX: 12;
+                readonly paddingY: 8;
+            };
+            readonly card: {
+                readonly padding: 24;
+                readonly gap: 16;
+            };
+            readonly form: {
+                readonly fieldGap: 16;
+                readonly sectionGap: 32;
+                readonly labelGap: 8;
+            };
+            readonly modal: {
+                readonly padding: 24;
+                readonly gap: 16;
+            };
+            readonly table: {
+                readonly cellPadding: 16;
+                readonly headerPadding: 16;
+            };
+        };
+        readonly layout: {
+            readonly container: {
+                readonly paddingX: 16;
+                readonly paddingY: 24;
+            };
+            readonly section: {
+                readonly marginY: 48;
+                readonly gap: 32;
+            };
+            readonly page: {
+                readonly marginY: 64;
+                readonly paddingX: 24;
+            };
+        };
+    };
+    readonly typography: {
+        readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        readonly fontFamilyCode: "JetBrains Mono, Fira Code, Consolas, monospace";
+        readonly fontFamilySerif: "Georgia, 'Times New Roman', serif";
+        readonly display: {
+            readonly lg: {
+                readonly fontSize: 48;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+                readonly letterSpacing: "-0.025em";
+            };
+            readonly md: {
+                readonly fontSize: 36;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+            };
+            readonly sm: {
+                readonly fontSize: 30;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.2;
+            };
+        };
+        readonly heading: {
+            readonly h1: {
+                readonly fontSize: 30;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+            };
+            readonly h2: {
+                readonly fontSize: 24;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.2;
+            };
+            readonly h3: {
+                readonly fontSize: 20;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.5;
+            };
+            readonly h4: {
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+            };
+        };
+        readonly body: {
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.7;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+            };
+        };
+        readonly caption: {
+            readonly fontSize: 12;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+        };
+        readonly button: {
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly fontWeight: 500;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly fontWeight: 500;
+            };
+        };
+    };
+    readonly radii: {
+        readonly component: 4;
+        readonly card: 8;
+        readonly button: 4;
+        readonly input: 4;
+        readonly tag: 2;
+        readonly avatar: 9999;
+    };
+    readonly shadows: {
+        readonly card: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    };
+    readonly layout: {
+        readonly sidebarWidth: 240;
+        readonly sidebarCollapsedWidth: 72;
+        readonly headerHeight: 56;
+        readonly contentMaxWidth: 1440;
+    };
+};
+type SemanticTokens = typeof semanticTokens;
+
+/**
+ * Platform-specific token overrides for CRX, SGX, and AGX.
+ */
+type Platform = 'crx' | 'sgx' | 'agx';
+declare const platformColors: {
+    readonly crx: {
+        readonly primary: "#0284c7";
+        readonly secondary: "#9333ea";
+        readonly accent: "#3b82f6";
+        readonly gradient: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)";
+    };
+    readonly sgx: {
+        readonly primary: "#0369a1";
+        readonly secondary: "#7c3aed";
+        readonly accent: "#f59e0b";
+        readonly gradient: "linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%)";
+    };
+    readonly agx: {
+        readonly primary: "#0ea5e9";
+        readonly secondary: "#a855f7";
+        readonly accent: "#22c55e";
+        readonly gradient: "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)";
+    };
+};
+declare const platformSpacing: {
+    readonly crx: {
+        readonly density: "comfortable";
+        readonly basePadding: 20;
+        readonly baseGap: 16;
+    };
+    readonly sgx: {
+        readonly density: "spacious";
+        readonly basePadding: 24;
+        readonly baseGap: 20;
+    };
+    readonly agx: {
+        readonly density: "compact";
+        readonly basePadding: 16;
+        readonly baseGap: 12;
+    };
+};
+
+/**
+ * Dark theme color overrides.
+ */
+declare const darkColors: {
+    readonly text: {
+        readonly primary: "#fafafa";
+        readonly secondary: "#d4d4d4";
+        readonly tertiary: "#a3a3a3";
+    };
+    readonly background: {
+        readonly primary: "#171717";
+        readonly secondary: "#262626";
+        readonly tertiary: "#404040";
+    };
+    readonly border: {
+        readonly primary: "#404040";
+        readonly secondary: "#525252";
+    };
+};
+
+export { type BorderRadiusPrimitives, type ColorPrimitives, type FontSizePrimitives, type FontWeightPrimitives, type Platform, type SemanticTokens, type SpacingPrimitives, borderRadiusPrimitives, colorPrimitives, darkColors, fontFamilyPrimitives, fontSizePrimitives, fontWeightPrimitives, letterSpacingPrimitives, lineHeightPrimitives, platformColors, platformSpacing, semanticTokens, shadowPrimitives, spacingPrimitives };