Spaces:
Configuration error
Configuration error
File size: 3,197 Bytes
d5489dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
```css
/* ============================================================================ */
/* Design Tokens */
/* ============================================================================ */
:root {
/* Neutrals */
--neutral-600: rgb(107, 114, 128);
--neutral-400: rgb(185, 185, 185);
--neutral-300: rgb(228, 228, 228);
--neutral-200: rgb(245, 245, 245);
--default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* Brand (OKLCH base + derived states) */
--primary-base: oklch(0.75 0.12 47);
--primary-color: var(--primary-base);
--primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
--primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
--on-primary: #ffffff;
/* Text & Surfaces */
--page-bg: #ffffff;
--text-color: rgba(0, 0, 0, .85);
--transparent-page-contrast: rgba(255, 255, 255, .85);
--muted-color: rgba(0, 0, 0, .6);
--border-color: rgba(0, 0, 0, .1);
--surface-bg: #fafafa;
--code-bg: #f6f8fa;
/* Links */
--link-underline: var(--primary-color);
--link-underline-hover: var(--primary-color-hover);
/* Spacing scale */
--spacing-1: 8px;
--spacing-2: 12px;
--spacing-3: 16px;
--spacing-4: 24px;
--spacing-5: 32px;
--spacing-6: 40px;
--spacing-7: 48px;
--spacing-8: 56px;
--spacing-9: 64px;
--spacing-10: 72px;
/* Layout */
--content-padding-x: 16px;
--block-spacing-y: var(--spacing-4);
/* Config */
--palette-count: 8;
/* Button tokens */
--button-radius: 6px;
--button-padding-x: 12px;
--button-padding-y: 8px;
--button-font-size: 14px;
--button-icon-padding: 8px;
/* Big button */
--button-big-padding-x: 16px;
--button-big-padding-y: 12px;
--button-big-font-size: 16px;
--button-big-icon-padding: 12px;
/* Table tokens */
--table-border-radius: 8px;
--table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
--table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);
/* Z-index */
--z-base: 0;
--z-content: 1;
--z-elevated: 10;
--z-overlay: 1000;
--z-modal: 1100;
--z-tooltip: 1200;
/* Charts (global) */
--axis-color: var(--muted-color);
--tick-color: var(--text-color);
--grid-color: rgba(0, 0, 0, .08);
}
/* ============================================================================ */
/* Dark Theme Overrides */
/* ============================================================================ */
[data-theme="dark"] {
--page-bg: #0f1115;
--text-color: rgba(255, 255, 255, .9);
--muted-color: rgba(255, 255, 255, .7);
--border-color: rgba(255, 255, 255, .15);
--surface-bg: #12151b;
--code-bg: #12151b;
--transparent-page-contrast: rgba(0, 0, 0, .85);
/* Charts (global) */
--axis-color: var(--muted-color);
--tick-color: var(--muted-color);
--grid-color: rgba(255, 255, 255, .10);
/* Primary (lower L in dark) */
--primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
--primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
--on-primary: #0f1115;
color-scheme: dark;
background: #0f1115;
}
``` |