File size: 3,656 Bytes
b9e7b9b
a4b9560
b9e7b9b
 
a4b9560
b9e7b9b
 
 
 
 
6b70860
a4b9560
 
ef40dcd
a4b9560
 
 
b9e7b9b
 
a4b9560
3988a64
6b70860
 
 
 
b9e7b9b
 
a4b9560
 
 
c24ea90
b9e7b9b
a4b9560
b9e7b9b
 
 
 
 
 
 
 
 
 
b8e1b6c
efb32fc
 
 
 
 
 
 
 
a4b9560
 
6b70860
 
 
 
c1d1666
a4b9560
e0e09d3
a4b9560
 
 
4e4e67f
 
a4b9560
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8d0d788
 
ca41799
 
6b70860
b9e7b9b
a4b9560
 
 
 
b9e7b9b
3988a64
6b70860
 
 
b9e7b9b
 
6b70860
 
8d0d788
ca41799
8d0d788
6b70860
a4b9560
 
 
 
b9e7b9b
 
 
a17a3bf
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);
}