bob-ide / src /styles /tokens.css
SNAPKITTYWEST's picture
push from SNAPKITTYWEST/bob-ide
0110dee verified
Raw History Blame Contribute Delete
1.76 kB
/* BOB IDE Design Tokens */
:root {
/* Spacing Scale */
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 10px;
--space-6: 12px;
--space-8: 16px;
--space-10: 20px;
--space-12: 24px;
--space-16: 32px;
--space-20: 40px;
--space-24: 48px;
/* Typography Scale */
--font-10: 0.625rem;
--font-11: 0.6875rem;
--font-12: 0.75rem;
--font-13: 0.8125rem;
--font-14: 0.875rem;
--font-15: 0.9375rem;
--font-16: 1rem;
--font-18: 1.125rem;
--font-20: 1.25rem;
--font-24: 1.5rem;
--font-32: 2rem;
/* Font Families */
--font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
--font-code: "SFMono-Regular", "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
/* Border Radius */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 9px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
/* Shadows */
--shadow-panel: 0 1px 2px rgba(0,0,0,0.08), 0 8px 30px rgba(0,0,0,0.08);
--shadow-popover: 0 18px 55px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
/* Motion */
--duration-fast: 110ms;
--duration-normal: 180ms;
--duration-slow: 280ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
/* Z-Index Scale */
--z-base: 0;
--z-sidebar: 10;
--z-toolbar: 20;
--z-panel: 30;
--z-popover: 100;
--z-modal: 200;
--z-toast: 300;
}
/* Made with Bob */