/** * Primitive color scales — raw, semantic-free color values. * * These are the building blocks for the semantic token layer. * Values match Tailwind CSS v3/v4 default palette so designers and engineers * can speak the same language as the wider ecosystem. * * **Do not import primitives directly in product code.** Always go through * the semantic layer (`tokens.colors.success` instead of `primitives.green[600]`) * so that future re-themes only require touching one place. */ declare const primitives: { readonly white: "#ffffff"; readonly black: "#000000"; readonly gray: { 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 green: { 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 blue: { 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 red: { 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 amber: { 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 purple: { readonly 50: "#faf5ff"; readonly 100: "#f3e8ff"; readonly 200: "#e9d5ff"; readonly 300: "#d8b4fe"; readonly 400: "#c084fc"; readonly 500: "#a855f7"; readonly 600: "#9333ea"; readonly 700: "#7e22ce"; readonly 800: "#6b21a8"; readonly 900: "#581c87"; readonly 950: "#3b0764"; }; readonly teal: { readonly 50: "#f0fdfa"; readonly 100: "#ccfbf1"; readonly 200: "#99f6e4"; readonly 300: "#5eead4"; readonly 400: "#2dd4bf"; readonly 500: "#14b8a6"; readonly 600: "#0d9488"; readonly 700: "#0f766e"; readonly 800: "#115e59"; readonly 900: "#134e4a"; readonly 950: "#042f2e"; }; }; type Primitives = typeof primitives; type PrimitiveColorName = Exclude; type PrimitiveShade = keyof Primitives['gray']; /** * Semantic color tokens — derived from primitive scales. * * These are the **public API** for cross-platform consumers (React Native, * vanilla JS, design tools). Each token carries meaning, not appearance. * * Why two variants (light/dark) instead of CSS variables? * React Native and other non-DOM environments cannot resolve CSS variables * at runtime. Consumers must pick a variant explicitly, typically based on * a runtime appearance hook (e.g. `useColorScheme()` in RN). * * @example * ```ts * import { colors } from '@arkite-ui/core/tokens' * import { useColorScheme } from 'react-native' * * const scheme = useColorScheme() ?? 'light' * const styles = StyleSheet.create({ * button: { backgroundColor: colors[scheme].success }, * }) * ``` */ interface SemanticColors { background: string; foreground: string; card: string; cardForeground: string; muted: string; mutedForeground: string; primary: string; primaryForeground: string; secondary: string; secondaryForeground: string; accent: string; accentForeground: string; success: string; successForeground: string; warning: string; warningForeground: string; danger: string; dangerForeground: string; info: string; infoForeground: string; successSoft: string; successSoftForeground: string; successBorder: string; warningSoft: string; warningSoftForeground: string; warningBorder: string; dangerSoft: string; dangerSoftForeground: string; dangerBorder: string; infoSoft: string; infoSoftForeground: string; infoBorder: string; border: string; input: string; ring: string; } declare const colors: { readonly light: SemanticColors; readonly dark: SemanticColors; }; type ColorScheme = keyof typeof colors; type SemanticColorName = keyof SemanticColors; /** * Spacing scale — for margins, padding, gaps. * * Values are in pixels (number) so they work directly in React Native * StyleSheet and CSS-in-JS. On web, multiply by your base unit if needed. * * Scale follows Tailwind's default spacing where `1 = 0.25rem = 4px`. * * @example * ```ts * import { spacing } from '@arkite-ui/core/tokens' * * StyleSheet.create({ * card: { padding: spacing[4], gap: spacing[2] }, * }) * ``` */ declare const spacing: { readonly 0: 0; readonly px: 1; readonly 0.5: 2; readonly 1: 4; readonly 1.5: 6; readonly 2: 8; readonly 2.5: 10; readonly 3: 12; readonly 3.5: 14; readonly 4: 16; readonly 5: 20; readonly 6: 24; readonly 7: 28; readonly 8: 32; readonly 9: 36; readonly 10: 40; readonly 11: 44; readonly 12: 48; readonly 14: 56; readonly 16: 64; readonly 20: 80; readonly 24: 96; readonly 28: 112; readonly 32: 128; }; type SpacingKey = keyof typeof spacing; /** * Border radius scale. * * Pixel values for cross-platform use. Web consumers can pair these with * the existing CSS variable system; React Native consumers use the numbers * directly in StyleSheet. */ declare const radius: { readonly none: 0; readonly sm: 2; readonly md: 6; readonly lg: 8; readonly xl: 12; readonly '2xl': 16; readonly '3xl': 24; readonly full: 9999; }; type RadiusKey = keyof typeof radius; /** * Typography scale — font sizes, line heights, font weights. * * Sizes are in pixels (number) for direct React Native compatibility. * Line heights are unitless multipliers (relative to font size). * * @example * ```ts * import { fontSize, lineHeight, fontWeight } from '@arkite-ui/core/tokens' * * StyleSheet.create({ * title: { * fontSize: fontSize.xl, * lineHeight: fontSize.xl * lineHeight.tight, * fontWeight: fontWeight.semibold, * }, * }) * ``` */ declare const fontSize: { 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 lineHeight: { readonly none: 1; readonly tight: 1.25; readonly snug: 1.375; readonly normal: 1.5; readonly relaxed: 1.625; readonly loose: 2; }; /** * Font weights as strings — RN accepts these literal values directly, * and they're valid in CSS. */ declare const fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; type FontSizeKey = keyof typeof fontSize; type LineHeightKey = keyof typeof lineHeight; type FontWeightKey = keyof typeof fontWeight; export { type ColorScheme, type FontSizeKey, type FontWeightKey, type LineHeightKey, type PrimitiveColorName, type PrimitiveShade, type Primitives, type RadiusKey, type SemanticColorName, type SemanticColors, type SpacingKey, colors, fontSize, fontWeight, lineHeight, primitives, radius, spacing };