File size: 3,656 Bytes
b9e7b9b a4b9560 b9e7b9b a4b9560 b9e7b9b 5897d8c a4b9560 20810cd a4b9560 b9e7b9b a4b9560 3988a64 5897d8c b9e7b9b a4b9560 c24ea90 b9e7b9b a4b9560 b9e7b9b b8e1b6c efb32fc a4b9560 5897d8c c1d1666 a4b9560 e0e09d3 a4b9560 f7b880e a4b9560 8d0d788 ca41799 5897d8c b9e7b9b a4b9560 b9e7b9b 3988a64 5897d8c b9e7b9b 5897d8c 8d0d788 ca41799 8d0d788 5897d8c a4b9560 b9e7b9b f7b880e a4b9560 |
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 110 111 112 113 114 115 116 117 118 |
/* ============================================================================ */
/* 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;
/* Custom Media aliases compiled by PostCSS */
@custom-media --bp-xxs (max-width: 320px);
@custom-media --bp-xs (max-width: 480px);
@custom-media --bp-sm (max-width: 640px);
@custom-media --bp-md (max-width: 768px);
@custom-media --bp-lg (max-width: 1024px);
@custom-media --bp-xl (max-width: 1280px);
@custom-media --bp-content-collapse (max-width: 1100px);
/* Layout */
--content-padding-x: 16px;
/* default page gutter */
--block-spacing-y: var(--spacing-4);
/* default vertical spacing between block components */
/* Config */
--palette-count: 8;
/* Button tokens */
--button-radius: 6px;
--button-padding-x: 16px;
--button-padding-y: 10px;
--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: var(--page-bg);
} |