File size: 3,680 Bytes
b9e7b9b a4b9560 b9e7b9b a4b9560 b9e7b9b a4b9560 b9e7b9b a4b9560 3988a64 b9e7b9b 8d0d788 b9e7b9b a4b9560 c24ea90 b9e7b9b a4b9560 b9e7b9b b8e1b6c efb32fc a4b9560 c1d1666 a4b9560 e0e09d3 a4b9560 8d0d788 b9e7b9b a4b9560 b9e7b9b 3988a64 b9e7b9b 8d0d788 a4b9560 b9e7b9b 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 |
/* ============================================================================ */
/* 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 340);
--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: 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(--text-color);
--tick-color: var(--muted-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(--text-color);
--tick-color: var(--muted-color);
--grid-color: rgba(255,255,255,.10);
/* Primary (lower L in dark) */
--primary-color: oklch(from var(--primary-base) calc(l - 0.08) c h);
--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;
} |