@dataimago/css 0.1.0-alpha.1 → 0.1.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +4 -2
  2. package/dist/dataimago.css +219 -66
  3. package/dist/dataimago.min.css +1 -1
  4. package/dist/tailwind-preset.js +188 -52
  5. package/dist/tokens.css +182 -62
  6. package/dist/tokens.scss +182 -62
  7. package/package.json +2 -2
package/dist/tailwind-preset.js CHANGED
@@ -1,6 +1,21 @@
1
- // dataimago Tailwind CSS Preset — Generated from @dataimago/tokens
2
- // Exposes the canonical warm scholarly palette. Consumers add their own
3
- // extensions via the standard `theme.extend` API.
1
+ // @dataimago/css Tailwind preset — Generated from @dataimago/tokens
2
+ // Source files:
3
+ // packages/tokens/src/colors.json (palette + functional colors)
4
+ // packages/tokens/src/typography.json (font family, size, weight)
5
+ // packages/tokens/src/spacing.json (spacing, radius, shadow simple scales)
6
+ // packages/tokens/src/effects.json (theme-aware shadow, transition)
7
+ // Regenerated by packages/css/build.mjs on every release.
8
+ //
9
+ // Iteration-1 (2026-04-30): stone+forest palette anchor, paper-as-renamed-cream
10
+ // (with deprecated cream alias through 0.2.x), editorial/documentation display
11
+ // family split, font.size scale, math family. See wiki/decisions/{josefin-weight-floor,
12
+ // display-family-split, h1-weight-medium, display-lining-figures, font-trim-deferred}.md.
13
+ //
14
+ // Stage 2.3 (2026-05-04): Tailwind preset extended to spacing/borderRadius/
15
+ // boxShadow/transitionDuration so consumers can write `p-md`, `rounded-lg`,
16
+ // `shadow-subtle`, `duration-quick` Tailwind classes throughout instead of
17
+ // reaching for inline `var(--*)` references. theme.extend merges with Tailwind
18
+ // defaults at colliding keys (e.g. `rounded-md` becomes the dataimago value).
4
19
 
5
20
  /** @type {import('tailwindcss').Config} */
6
21
  module.exports = {
@@ -8,57 +23,178 @@ module.exports = {
8
23
  theme: {
9
24
  extend: {
10
25
  colors: {
11
- ink: {
12
- "50": "#f5f5f4",
13
- "100": "#e7e5e4",
14
- "200": "#d6d3d1",
15
- "300": "#a8a29e",
16
- "400": "#78716c",
17
- "500": "#57534e",
18
- "600": "#44403c",
19
- "700": "#292524",
20
- "800": "#1c1917",
21
- "900": "#0c0a09"
22
- },
23
- cream: {
24
- "50": "#fefdfb",
25
- "100": "#fdf9f2",
26
- "200": "#faf2e3",
27
- "300": "#f5e8cf",
28
- "400": "#edd9b3",
29
- "500": "#e0c088"
30
- },
31
- copper: {
32
- "50": "#fdf4ee",
33
- "100": "#fbe5d1",
34
- "200": "#f6c79c",
35
- "300": "#f0a467",
36
- "400": "#ea8441",
37
- "500": "#d46820",
38
- "600": "#b55017",
39
- "700": "#913d15",
40
- "800": "#753318",
41
- "900": "#612b16"
42
- },
43
- accent: {
44
- "50": "#fdf2f2",
45
- "500": "#b54a27",
46
- "600": "#9a3e20",
47
- "700": "#7d321a"
48
- },
49
- functional: {
50
- "success": "#27AE60",
51
- "warning": "#F39C12",
52
- "error": "#E74C3C",
53
- "info": "#3498DB"
54
- }
26
+ "ink": {
27
+ "50": "#f5f5f4",
28
+ "100": "#e7e5e4",
29
+ "200": "#d6d3d1",
30
+ "300": "#a8a29e",
31
+ "400": "#78716c",
32
+ "500": "#57534e",
33
+ "600": "#44403c",
34
+ "700": "#292524",
35
+ "800": "#1c1917",
36
+ "900": "#0c0a09"
37
+ },
38
+ "stone": {
39
+ "50": "#f7f7f6",
40
+ "100": "#ededeb",
41
+ "200": "#dcdcda",
42
+ "300": "#c1c1bf",
43
+ "400": "#a0a0a0",
44
+ "500": "#7c7c7c",
45
+ "600": "#5e5e5c",
46
+ "700": "#424240",
47
+ "800": "#292927",
48
+ "900": "#14140f"
49
+ },
50
+ "forest": {
51
+ "50": "#f0f1ed",
52
+ "100": "#dde0d4",
53
+ "200": "#bdc4ad",
54
+ "300": "#98a384",
55
+ "400": "#7e8a6b",
56
+ "500": "#5e6749",
57
+ "600": "#4d5640",
58
+ "700": "#434739",
59
+ "800": "#363a2e",
60
+ "900": "#1f2218"
61
+ },
62
+ "paper": {
63
+ "50": "#fefdfb",
64
+ "100": "#fdf9f2",
65
+ "200": "#faf2e3",
66
+ "300": "#f5e8cf",
67
+ "400": "#edd9b3",
68
+ "500": "#e0c088"
69
+ },
70
+ "copper": {
71
+ "50": "#fdf4ee",
72
+ "100": "#fbe5d1",
73
+ "200": "#f6c79c",
74
+ "300": "#f0a467",
75
+ "400": "#ea8441",
76
+ "500": "#d46820",
77
+ "600": "#b55017",
78
+ "700": "#913d15",
79
+ "800": "#753318",
80
+ "900": "#612b16"
81
+ },
82
+ "accent": {
83
+ "50": "#f0f8fc",
84
+ "300": "#3498DB",
85
+ "400": "#2980B9",
86
+ "500": "#1f618d",
87
+ "600": "#154d6f",
88
+ "700": "#0f3a52"
89
+ },
90
+ "presentation-blue": {
91
+ "50": "#f0f8fc",
92
+ "500": "#3498DB",
93
+ "600": "#2980B9",
94
+ "700": "#1f618d"
95
+ },
96
+ "cream": {
97
+ "50": "#fefdfb",
98
+ "100": "#fdf9f2",
99
+ "200": "#faf2e3",
100
+ "300": "#f5e8cf",
101
+ "400": "#edd9b3",
102
+ "500": "#e0c088"
103
+ },
104
+ "functional": {
105
+ "success": "#27AE60",
106
+ "warning": "#F39C12",
107
+ "error": "#E74C3C",
108
+ "info": "#3498DB"
109
+ }
55
110
  },
56
111
  fontFamily: {
57
- serif: ['Cormorant Garamond', 'Georgia', 'serif'],
58
- sans: ['Inter', 'system-ui', 'sans-serif'],
59
- mono: ['JetBrains Mono', 'SF Mono', 'Monaco', 'monospace'],
60
- display: ['Inter', 'system-ui', 'sans-serif'],
61
- brand: ['Josefin Sans', 'Inter', 'system-ui', 'sans-serif']
112
+ "sans": [
113
+ "Noto Sans",
114
+ "Fira Sans",
115
+ "system-ui",
116
+ "sans-serif"
117
+ ],
118
+ "mono": [
119
+ "JetBrains Mono",
120
+ "SF Mono",
121
+ "Monaco",
122
+ "Inconsolata",
123
+ "monospace"
124
+ ],
125
+ "display": [
126
+ "Josefin Sans",
127
+ "system-ui",
128
+ "sans-serif"
129
+ ],
130
+ "display-editorial": [
131
+ "Josefin Sans",
132
+ "system-ui",
133
+ "sans-serif"
134
+ ],
135
+ "display-documentation": [
136
+ "Noto Sans",
137
+ "system-ui",
138
+ "sans-serif"
139
+ ],
140
+ "brand": [
141
+ "Futura",
142
+ "system-ui",
143
+ "sans-serif"
144
+ ],
145
+ "math": [
146
+ "Noto Sans Math",
147
+ "Noto Sans",
148
+ "system-ui",
149
+ "sans-serif"
150
+ ]
151
+ },
152
+ fontSize: {
153
+ "micro": "0.75rem",
154
+ "small": "0.875rem",
155
+ "base": "1rem",
156
+ "readable": "1.125rem",
157
+ "emphasis": "1.25rem",
158
+ "heading-small": "1.5rem",
159
+ "heading-medium": "1.875rem",
160
+ "heading-large": "2.25rem",
161
+ "heading-xl": "3rem"
162
+ },
163
+ spacing: {
164
+ "xs": "0.25rem",
165
+ "sm": "0.5rem",
166
+ "md": "1rem",
167
+ "lg": "1.5rem",
168
+ "xl": "2rem",
169
+ "2xl": "3rem",
170
+ "3xl": "4rem"
171
+ },
172
+ borderRadius: {
173
+ "sm": "0.25rem",
174
+ "md": "0.5rem",
175
+ "lg": "0.75rem",
176
+ "xl": "1rem",
177
+ "full": "9999px"
178
+ },
179
+ boxShadow: {
180
+ "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
181
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
182
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
183
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)",
184
+ "subtle": "var(--shadow-subtle, 0 1px 2px 0 rgb(20 20 16 / 0.05))",
185
+ "moderate": "var(--shadow-moderate, 0 4px 6px -1px rgb(20 20 16 / 0.1))",
186
+ "prominent": "var(--shadow-prominent, 0 10px 15px -3px rgb(20 20 16 / 0.1))"
187
+ },
188
+ transitionDuration: {
189
+ "quick": "0.15s",
190
+ "standard": "0.25s",
191
+ "smooth": "0.35s",
192
+ "logo": "0.3s"
193
+ },
194
+ transitionTimingFunction: {
195
+ "quick": "ease",
196
+ "standard": "ease-in-out",
197
+ "smooth": "ease"
62
198
  }
63
199
  }
64
200
  }
package/dist/tokens.css CHANGED
@@ -9,12 +9,32 @@
9
9
  --color-palette-ink-700: #292524;
10
10
  --color-palette-ink-800: #1c1917;
11
11
  --color-palette-ink-900: #0c0a09;
12
- --color-palette-cream-50: #fefdfb;
13
- --color-palette-cream-100: #fdf9f2;
14
- --color-palette-cream-200: #faf2e3;
15
- --color-palette-cream-300: #f5e8cf;
16
- --color-palette-cream-400: #edd9b3;
17
- --color-palette-cream-500: #e0c088;
12
+ --color-palette-stone-50: #f7f7f6;
13
+ --color-palette-stone-100: #ededeb;
14
+ --color-palette-stone-200: #dcdcda;
15
+ --color-palette-stone-300: #c1c1bf;
16
+ --color-palette-stone-400: #a0a0a0;
17
+ --color-palette-stone-500: #7c7c7c;
18
+ --color-palette-stone-600: #5e5e5c;
19
+ --color-palette-stone-700: #424240;
20
+ --color-palette-stone-800: #292927;
21
+ --color-palette-stone-900: #14140f;
22
+ --color-palette-forest-50: #f0f1ed;
23
+ --color-palette-forest-100: #dde0d4;
24
+ --color-palette-forest-200: #bdc4ad;
25
+ --color-palette-forest-300: #98a384;
26
+ --color-palette-forest-400: #7e8a6b;
27
+ --color-palette-forest-500: #5e6749;
28
+ --color-palette-forest-600: #4d5640;
29
+ --color-palette-forest-700: #434739;
30
+ --color-palette-forest-800: #363a2e;
31
+ --color-palette-forest-900: #1f2218;
32
+ --color-palette-paper-50: #fefdfb;
33
+ --color-palette-paper-100: #fdf9f2;
34
+ --color-palette-paper-200: #faf2e3;
35
+ --color-palette-paper-300: #f5e8cf;
36
+ --color-palette-paper-400: #edd9b3;
37
+ --color-palette-paper-500: #e0c088;
18
38
  --color-palette-copper-50: #fdf4ee;
19
39
  --color-palette-copper-100: #fbe5d1;
20
40
  --color-palette-copper-200: #f6c79c;
@@ -25,10 +45,12 @@
25
45
  --color-palette-copper-700: #913d15;
26
46
  --color-palette-copper-800: #753318;
27
47
  --color-palette-copper-900: #612b16;
28
- --color-palette-accent-50: #fdf2f2;
29
- --color-palette-accent-500: #b54a27;
30
- --color-palette-accent-600: #9a3e20;
31
- --color-palette-accent-700: #7d321a;
48
+ --color-palette-accent-50: #f0f8fc;
49
+ --color-palette-accent-300: #3498DB;
50
+ --color-palette-accent-400: #2980B9;
51
+ --color-palette-accent-500: #1f618d;
52
+ --color-palette-accent-600: #154d6f;
53
+ --color-palette-accent-700: #0f3a52;
32
54
  --color-palette-presentation-blue-50: #f0f8fc;
33
55
  --color-palette-presentation-blue-500: #3498DB;
34
56
  --color-palette-presentation-blue-600: #2980B9;
@@ -37,11 +59,17 @@
37
59
  --color-functional-warning: #F39C12;
38
60
  --color-functional-error: #E74C3C;
39
61
  --color-functional-info: #3498DB;
40
- --font-family-sans: Fira Sans, system-ui, sans-serif;
62
+ --transition-quick: 0.15s ease;
63
+ --transition-standard: 0.25s ease-in-out;
64
+ --transition-smooth: 0.35s ease;
65
+ --transition-logo: 0.3s;
66
+ --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
41
67
  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
42
- --font-family-display: Josefin Sans, system-ui, sans-serif;
68
+ --font-family-display: var(--font-family-display-editorial);
69
+ --font-family-display-editorial: Josefin Sans, system-ui, sans-serif;
70
+ --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
43
71
  --font-family-brand: Futura, system-ui, sans-serif;
44
- --font-family-math: Fira Math, Fira Sans Math, system-ui, sans-serif;
72
+ --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
45
73
  --font-size-micro: 0.75rem;
46
74
  --font-size-small: 0.875rem;
47
75
  --font-size-base: 1rem;
@@ -57,7 +85,7 @@
57
85
  --font-weight-medium: 500;
58
86
  --font-weight-semibold: 600;
59
87
  --font-weight-bold: 700;
60
- --font-weight-heading-h1: var(--font-weight-bold);
88
+ --font-weight-heading-h1: var(--font-weight-medium);
61
89
  --font-weight-heading-h2: var(--font-weight-medium);
62
90
  --font-weight-heading-h3: var(--font-weight-normal);
63
91
  --font-weight-heading-h4: var(--font-weight-light);
@@ -70,6 +98,8 @@
70
98
  --font-lineHeight-tight: 1.25;
71
99
  --font-lineHeight-normal: 1.5;
72
100
  --font-lineHeight-relaxed: 1.625;
101
+ --font-feature-settings-display: "lnum";
102
+ --font-feature-settings-body: "normal";
73
103
  --spacing-xs: 0.25rem;
74
104
  --spacing-sm: 0.5rem;
75
105
  --spacing-md: 1rem;
@@ -89,28 +119,58 @@
89
119
  }
90
120
 
91
121
  :root, [data-bs-theme="light"] {
92
- --color-surface-page: #fdf9f2;
93
- --color-surface-page-scrolled: #fdf9f2;
94
- --color-surface-elevated: #fefdfb;
122
+ --color-surface-page: #ededeb;
123
+ --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
124
+ --color-surface-page-scrolled: #ededeb;
125
+ --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
126
+ --color-surface-elevated: #f7f7f6;
127
+ --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
95
128
  --color-surface-sunken: #faf2e3;
96
- --color-surface-navbar: #fdf9f2;
97
- --color-surface-navbar-scrolled: #fdf9f2;
129
+ --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
130
+ --color-surface-navbar: #ededeb;
131
+ --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
132
+ --color-surface-navbar-scrolled: #ededeb;
133
+ --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
98
134
  --color-surface-code: #faf2e3;
99
- --color-border-subtle: rgba(12, 10, 9, 0.08);
100
- --color-border-moderate: rgba(12, 10, 9, 0.15);
101
- --color-border-strong: rgba(12, 10, 9, 0.25);
102
- --color-border-card: rgba(12, 10, 9, 0.15);
135
+ --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
136
+ --color-border-subtle: #0c0a09;
137
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
138
+ --color-border-moderate: #0c0a09;
139
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
140
+ --color-border-strong: #0c0a09;
141
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
142
+ --color-border-card: #0c0a09;
143
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358);
103
144
  --color-border-code: #d6d3d1;
104
- --color-content-primary: #0c0a09;
105
- --color-content-secondary: #57534e;
106
- --color-content-muted: #78716c;
145
+ --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
146
+ --color-content-primary: #14140f;
147
+ --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
148
+ --color-content-secondary: #6a6a6a;
149
+ --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
150
+ --color-content-muted: #706964;
151
+ --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
107
152
  --color-content-inverse: #fdf9f2;
108
- --color-interactive-primary: #d46820;
109
- --color-interactive-hover: #b55017;
110
- --color-interactive-accent: #b54a27;
111
- --color-interactive-focus: #d46820;
112
- --color-presentation-accent: #3498DB;
113
- --color-presentation-accent-hover: #2980B9;
153
+ --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
154
+ --color-interactive-primary: #434739;
155
+ --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
156
+ --color-interactive-hover: #363a2e;
157
+ --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
158
+ --color-interactive-accent: #1f618d;
159
+ --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
160
+ --color-interactive-focus: #434739;
161
+ --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
162
+ --color-presentation-accent: #3498db;
163
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
164
+ --color-presentation-accent-hover: #2980b9;
165
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
166
+ --color-vertical-accent-dissertation: #b87333;
167
+ --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
168
+ --color-vertical-accent-rpkg: #3b82f6;
169
+ --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
170
+ --color-vertical-accent-SGPc: #5a6310;
171
+ --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
172
+ --color-brand-mark-red: #cc0000;
173
+ --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
114
174
  --contrast-high: rgb(20, 20, 16);
115
175
  --contrast-readable: rgb(20, 20, 16);
116
176
  --contrast-medium: #7c7c7c;
@@ -126,28 +186,58 @@
126
186
  }
127
187
 
128
188
  [data-bs-theme="dark"] {
129
- --color-surface-page: #0c0a09;
130
- --color-surface-page-scrolled: #0c0a09;
189
+ --color-surface-page: #141410;
190
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
191
+ --color-surface-page-scrolled: #141410;
192
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
131
193
  --color-surface-elevated: #1c1917;
194
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
132
195
  --color-surface-sunken: #0c0a09;
133
- --color-surface-navbar: #0c0a09;
134
- --color-surface-navbar-scrolled: #0c0a09;
196
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
197
+ --color-surface-navbar: #141410;
198
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
199
+ --color-surface-navbar-scrolled: #141410;
200
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
135
201
  --color-surface-code: #1c1917;
136
- --color-border-subtle: rgba(253, 249, 242, 0.08);
137
- --color-border-moderate: rgba(253, 249, 242, 0.15);
138
- --color-border-strong: rgba(253, 249, 242, 0.25);
139
- --color-border-card: rgba(253, 249, 242, 0.15);
202
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
203
+ --color-border-subtle: #fdf9f2;
204
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
205
+ --color-border-moderate: #fdf9f2;
206
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
207
+ --color-border-strong: #fdf9f2;
208
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
209
+ --color-border-card: #fdf9f2;
210
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518);
140
211
  --color-border-code: #292524;
212
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
141
213
  --color-content-primary: #fdf9f2;
214
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
142
215
  --color-content-secondary: #a8a29e;
143
- --color-content-muted: #78716c;
216
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
217
+ --color-content-muted: #89827d;
218
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
144
219
  --color-content-inverse: #0c0a09;
145
- --color-interactive-primary: #f0a467;
146
- --color-interactive-hover: #ea8441;
147
- --color-interactive-accent: #b54a27;
148
- --color-interactive-focus: #f0a467;
149
- --color-presentation-accent: #3498DB;
150
- --color-presentation-accent-hover: #2980B9;
220
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
221
+ --color-interactive-primary: #98a384;
222
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
223
+ --color-interactive-hover: #7e8a6b;
224
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
225
+ --color-interactive-accent: #3498db;
226
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
227
+ --color-interactive-focus: #98a384;
228
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
229
+ --color-presentation-accent: #3498db;
230
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
231
+ --color-presentation-accent-hover: #2980b9;
232
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
233
+ --color-vertical-accent-dissertation: #ce8e5c;
234
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
235
+ --color-vertical-accent-rpkg: #60a5fa;
236
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
237
+ --color-vertical-accent-SGPc: #b2bf22;
238
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
239
+ --color-brand-mark-red: #ff0000;
240
+ --color-brand-mark-red: color(display-p3 1 0 0);
151
241
  --contrast-high: rgb(237, 237, 235);
152
242
  --contrast-readable: rgb(237, 237, 235);
153
243
  --contrast-medium: #83838f;
@@ -164,28 +254,58 @@
164
254
 
165
255
  @media (prefers-color-scheme: dark) {
166
256
  :root {
167
- --color-surface-page: #0c0a09;
168
- --color-surface-page-scrolled: #0c0a09;
257
+ --color-surface-page: #141410;
258
+ --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
259
+ --color-surface-page-scrolled: #141410;
260
+ --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
169
261
  --color-surface-elevated: #1c1917;
262
+ --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
170
263
  --color-surface-sunken: #0c0a09;
171
- --color-surface-navbar: #0c0a09;
172
- --color-surface-navbar-scrolled: #0c0a09;
264
+ --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
265
+ --color-surface-navbar: #141410;
266
+ --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
267
+ --color-surface-navbar-scrolled: #141410;
268
+ --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
173
269
  --color-surface-code: #1c1917;
174
- --color-border-subtle: rgba(253, 249, 242, 0.08);
175
- --color-border-moderate: rgba(253, 249, 242, 0.15);
176
- --color-border-strong: rgba(253, 249, 242, 0.25);
177
- --color-border-card: rgba(253, 249, 242, 0.15);
270
+ --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
271
+ --color-border-subtle: #fdf9f2;
272
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
273
+ --color-border-moderate: #fdf9f2;
274
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
275
+ --color-border-strong: #fdf9f2;
276
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
277
+ --color-border-card: #fdf9f2;
278
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518);
178
279
  --color-border-code: #292524;
280
+ --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
179
281
  --color-content-primary: #fdf9f2;
282
+ --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
180
283
  --color-content-secondary: #a8a29e;
181
- --color-content-muted: #78716c;
284
+ --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
285
+ --color-content-muted: #89827d;
286
+ --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
182
287
  --color-content-inverse: #0c0a09;
183
- --color-interactive-primary: #f0a467;
184
- --color-interactive-hover: #ea8441;
185
- --color-interactive-accent: #b54a27;
186
- --color-interactive-focus: #f0a467;
187
- --color-presentation-accent: #3498DB;
188
- --color-presentation-accent-hover: #2980B9;
288
+ --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
289
+ --color-interactive-primary: #98a384;
290
+ --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
291
+ --color-interactive-hover: #7e8a6b;
292
+ --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
293
+ --color-interactive-accent: #3498db;
294
+ --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
295
+ --color-interactive-focus: #98a384;
296
+ --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
297
+ --color-presentation-accent: #3498db;
298
+ --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
299
+ --color-presentation-accent-hover: #2980b9;
300
+ --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
301
+ --color-vertical-accent-dissertation: #ce8e5c;
302
+ --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
303
+ --color-vertical-accent-rpkg: #60a5fa;
304
+ --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
305
+ --color-vertical-accent-SGPc: #b2bf22;
306
+ --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
307
+ --color-brand-mark-red: #ff0000;
308
+ --color-brand-mark-red: color(display-p3 1 0 0);
189
309
  --contrast-high: rgb(237, 237, 235);
190
310
  --contrast-readable: rgb(237, 237, 235);
191
311
  --contrast-medium: #83838f;