Updated generator to match existing MindLyst conventions: - Kotlin: SCREAMING_SNAKE_CASE, Palette/Dark/Light/BrainGradient/Typography/Motion/Layout - Swift: Color(hex: UInt), dark/light prefixes, Gradient(colors:), MindLystMotion, Color ext - CSS: [data-theme] selectors, --ml-fs-*, --ml-elevation-*, --ml-motion-*, light theme Generated 4 files: - generated/tokens.css — CSS custom properties (dark + light themes) - generated/tokens.ts — Full token tree as const - generated/MindLystTokens.kt — KMP shared module (drop-in for existing) - generated/MindLystTheme.swift — SwiftUI structs (drop-in for existing)
79 lines
2.1 KiB
CSS
79 lines
2.1 KiB
CSS
/* Auto-generated from bytelyst.tokens.json — do not edit manually */
|
|
|
|
:root,
|
|
[data-theme="dark"] {
|
|
--ml-bg-canvas: #06070A;
|
|
--ml-bg-elevated: #0E1118;
|
|
--ml-surface-card: #121725;
|
|
--ml-surface-muted: #1A2335;
|
|
--ml-border-default: rgba(255,255,255,0.12);
|
|
--ml-border-strong: rgba(255,255,255,0.22);
|
|
--ml-text-primary: #EFF4FF;
|
|
--ml-text-secondary: #A5B1C7;
|
|
--ml-text-tertiary: #6C7C98;
|
|
--ml-accent-primary: #5A8CFF;
|
|
--ml-accent-secondary: #2EE6D6;
|
|
--ml-success: #34D399;
|
|
--ml-warning: #F59E0B;
|
|
--ml-danger: #FF6E6E;
|
|
--ml-focus-ring: rgba(90,140,255,0.45);
|
|
--ml-overlay-scrim: rgba(5,8,18,0.72);
|
|
|
|
--ml-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
|
|
--ml-font-body: "DM Sans", "SF Pro Text", sans-serif;
|
|
--ml-font-mono: "IBM Plex Mono", "SF Mono", monospace;
|
|
|
|
--ml-fs-xs: 12px;
|
|
--ml-fs-sm: 14px;
|
|
--ml-fs-md: 16px;
|
|
--ml-fs-lg: 18px;
|
|
--ml-fs-xl: 22px;
|
|
--ml-fs-2xl: 28px;
|
|
--ml-fs-3xl: 36px;
|
|
|
|
--ml-space-0: 0;
|
|
--ml-space-1: 4px;
|
|
--ml-space-2: 8px;
|
|
--ml-space-3: 12px;
|
|
--ml-space-4: 16px;
|
|
--ml-space-5: 20px;
|
|
--ml-space-6: 24px;
|
|
--ml-space-7: 28px;
|
|
--ml-space-8: 32px;
|
|
--ml-space-10: 40px;
|
|
--ml-space-12: 48px;
|
|
--ml-space-16: 64px;
|
|
|
|
--ml-radius-xs: 8px;
|
|
--ml-radius-sm: 12px;
|
|
--ml-radius-md: 16px;
|
|
--ml-radius-lg: 20px;
|
|
--ml-radius-xl: 24px;
|
|
--ml-radius-pill: 999px;
|
|
|
|
--ml-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
|
|
--ml-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
|
|
--ml-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
|
|
|
|
--ml-motion-fast: 140ms;
|
|
--ml-motion-base: 220ms;
|
|
--ml-motion-slow: 320ms;
|
|
--ml-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--ml-bg-canvas: #F6F8FC;
|
|
--ml-bg-elevated: #EEF2FA;
|
|
--ml-surface-card: #FFFFFF;
|
|
--ml-surface-muted: #F3F5FA;
|
|
--ml-border-default: rgba(14,19,32,0.12);
|
|
--ml-border-strong: rgba(14,19,32,0.24);
|
|
--ml-text-primary: #0E1320;
|
|
--ml-text-secondary: #55637A;
|
|
--ml-success: #13956A;
|
|
--ml-warning: #B87504;
|
|
--ml-danger: #D24242;
|
|
--ml-focus-ring: rgba(90,140,255,0.35);
|
|
--ml-overlay-scrim: rgba(10,13,23,0.5);
|
|
}
|