@dataimago/css-neutral 0.1.0-alpha.10

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.
@@ -0,0 +1,86 @@
1
+ % @dataimago/css-neutral@0.1.0-alpha.10 dist/latex/dataimago-tokens.sty · sha256:82abcb5097001df19364c43087a34abeaf16ff440a7525e1297fbc49996e8e20 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.10 dataimago-sync
2
+ \NeedsTeXFormat{LaTeX2e}
3
+ \ProvidesPackage{dataimago-tokens}[dataimago design tokens, light mode]
4
+ \RequirePackage{xcolor}
5
+
6
+ % Colours: every color.* token, light mode, as opaque sRGB.
7
+ \definecolor{di-palette-ink-50}{HTML}{F5F5F4}
8
+ \definecolor{di-palette-ink-100}{HTML}{E7E5E4}
9
+ \definecolor{di-palette-ink-200}{HTML}{D6D3D1}
10
+ \definecolor{di-palette-ink-300}{HTML}{A8A29E}
11
+ \definecolor{di-palette-ink-400}{HTML}{78716C}
12
+ \definecolor{di-palette-ink-500}{HTML}{57534E}
13
+ \definecolor{di-palette-ink-600}{HTML}{44403C}
14
+ \definecolor{di-palette-ink-700}{HTML}{292524}
15
+ \definecolor{di-palette-ink-800}{HTML}{1C1917}
16
+ \definecolor{di-palette-ink-900}{HTML}{0C0A09}
17
+ \definecolor{di-palette-stone-50}{HTML}{F7F7F6}
18
+ \definecolor{di-palette-stone-100}{HTML}{EDEDEB}
19
+ \definecolor{di-palette-stone-200}{HTML}{DCDCDA}
20
+ \definecolor{di-palette-stone-300}{HTML}{C1C1BF}
21
+ \definecolor{di-palette-stone-400}{HTML}{A0A0A0}
22
+ \definecolor{di-palette-stone-500}{HTML}{7C7C7C}
23
+ \definecolor{di-palette-stone-600}{HTML}{5E5E5C}
24
+ \definecolor{di-palette-stone-700}{HTML}{424240}
25
+ \definecolor{di-palette-stone-800}{HTML}{292927}
26
+ \definecolor{di-palette-stone-900}{HTML}{14140F}
27
+ \definecolor{di-palette-paper-50}{HTML}{FEFDFB}
28
+ \definecolor{di-palette-paper-100}{HTML}{FDF9F2}
29
+ \definecolor{di-palette-paper-200}{HTML}{FAF2E3}
30
+ \definecolor{di-palette-paper-300}{HTML}{F5E8CF}
31
+ \definecolor{di-palette-paper-400}{HTML}{EDD9B3}
32
+ \definecolor{di-palette-paper-500}{HTML}{E0C088}
33
+ \definecolor{di-functional-success}{HTML}{27AE60}
34
+ \definecolor{di-functional-warning}{HTML}{F39C12}
35
+ \definecolor{di-functional-error}{HTML}{E74C3C}
36
+ \definecolor{di-functional-info}{HTML}{3498DB}
37
+ \definecolor{di-surface-page}{HTML}{EDEDEB}
38
+ \definecolor{di-surface-page-scrolled}{HTML}{EDEDEB}
39
+ \definecolor{di-surface-elevated}{HTML}{F7F7F6}
40
+ \definecolor{di-surface-sunken}{HTML}{FAF2E3}
41
+ \definecolor{di-surface-navbar}{HTML}{EDEDEB}
42
+ \definecolor{di-surface-navbar-scrolled}{HTML}{EDEDEB}
43
+ \definecolor{di-surface-code}{HTML}{FAF2E3}
44
+ \definecolor{di-border-subtle}{HTML}{888785}
45
+ \definecolor{di-border-moderate}{HTML}{666563}
46
+ \definecolor{di-border-strong}{HTML}{444342}
47
+ \definecolor{di-border-card}{HTML}{666563}
48
+ \definecolor{di-border-code}{HTML}{D6D3D1}
49
+ \definecolor{di-content-primary}{HTML}{14140F}
50
+ \definecolor{di-content-secondary}{HTML}{7C7C7C}
51
+ \definecolor{di-content-muted}{HTML}{78716C}
52
+ \definecolor{di-content-inverse}{HTML}{FDF9F2}
53
+ \definecolor{di-interactive-primary}{HTML}{292524}
54
+ \definecolor{di-interactive-hover}{HTML}{1C1917}
55
+ \definecolor{di-interactive-accent}{HTML}{292524}
56
+ \definecolor{di-interactive-focus}{HTML}{292524}
57
+ \definecolor{di-dataviz-okabe-ito-orange}{HTML}{E69F00}
58
+ \definecolor{di-dataviz-okabe-ito-sky-blue}{HTML}{56B4E9}
59
+ \definecolor{di-dataviz-okabe-ito-bluish-green}{HTML}{009E73}
60
+ \definecolor{di-dataviz-okabe-ito-yellow}{HTML}{F0E442}
61
+ \definecolor{di-dataviz-okabe-ito-blue}{HTML}{0072B2}
62
+ \definecolor{di-dataviz-okabe-ito-vermillion}{HTML}{D55E00}
63
+ \definecolor{di-dataviz-okabe-ito-reddish-purple}{HTML}{CC79A7}
64
+ \definecolor{di-dataviz-okabe-ito-black}{HTML}{000000}
65
+ \definecolor{di-dataviz-categorical-1}{HTML}{E69F00}
66
+ \definecolor{di-dataviz-categorical-2}{HTML}{56B4E9}
67
+ \definecolor{di-dataviz-categorical-3}{HTML}{009E73}
68
+ \definecolor{di-dataviz-categorical-4}{HTML}{F0E442}
69
+ \definecolor{di-dataviz-categorical-5}{HTML}{0072B2}
70
+ \definecolor{di-dataviz-categorical-6}{HTML}{D55E00}
71
+ \definecolor{di-dataviz-categorical-7}{HTML}{CC79A7}
72
+ \definecolor{di-dataviz-categorical-8}{HTML}{000000}
73
+ \definecolor{di-dataviz-uncertainty-outer}{HTML}{D6D6D6}
74
+ \definecolor{di-dataviz-uncertainty-union}{HTML}{9E9E9E}
75
+ \definecolor{di-dataviz-uncertainty-inner}{HTML}{333333}
76
+
77
+ % Font families: the first family of each token stack.
78
+ \newcommand{\diFontFamilySans}{Noto Sans}
79
+ \newcommand{\diFontFamilyMono}{JetBrains Mono}
80
+ \newcommand{\diFontFamilyDisplay}{Noto Sans}
81
+ \newcommand{\diFontFamilyDisplayEditorial}{Noto Sans}
82
+ \newcommand{\diFontFamilyDisplayDocumentation}{Noto Sans}
83
+ \newcommand{\diFontFamilyBrand}{Noto Sans}
84
+ \newcommand{\diFontFamilyMath}{Noto Sans Math}
85
+
86
+ \endinput
@@ -0,0 +1,13 @@
1
+ {
2
+ "package": "@dataimago/css-neutral",
3
+ "version": "0.1.0-alpha.10",
4
+ "files": {
5
+ "dataviz/dataimago-dataviz.css": "2608516aad96d148b8df4b6d3670765e2788234bc7f39659693a685fcde60c97",
6
+ "dataviz/dataimago-dataviz.json": "9edcd5a7bfa1116b1572e190629e9b50310e7e0c1e5bc18f49b9d08b9f511d96",
7
+ "dataviz/dataimago-dataviz.tex": "676d1b7258c9182e0895fa3b5a93d3d8b8008016ccbaa8b0270ebab1580679ef",
8
+ "dataviz/dataimago_dataviz.R": "48d453c6c666a23e5f4db1904bcec85d4958c613671cb33037a61bb20fe3ff6f",
9
+ "latex/dataimago-tokens.sty": "3b64fa6b0a7687f14289cc517196300324b2811b1885c3b689b1077ace5a7d36",
10
+ "quarto/neutral-dark.scss": "3688d7c7c996b8abcba35d086ca06292e2134114262eab0de371259000f7faa1",
11
+ "quarto/neutral-light.scss": "cf49b646d565119b781cbbc5bd883e21898e72ba67b99c0b04724a3be550cff7"
12
+ }
13
+ }
@@ -0,0 +1,259 @@
1
+ // @dataimago/css-neutral@0.1.0-alpha.10 dist/quarto/neutral-dark.scss · sha256:110a66c99cc84371a92d4234c831303130c18fd31901ee016a77ceb2d2c54c06 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.10 dataimago-sync
2
+ // neutral dark theme for Quarto 1.8 — generated from the design tokens (tools/formats/quarto.mjs).
3
+ // Bootstrap Sass variables are compile-time sRGB; runtime colours come from the custom properties below.
4
+
5
+ /*-- scss:defaults --*/
6
+ $body-bg: #141410 !default;
7
+ $body-color: #fdf9f2 !default;
8
+ $headings-color: #fdf9f2 !default;
9
+ $navbar-bg: #141410 !default;
10
+ $link-color: #d6d3d1 !default;
11
+ $link-hover-color: #a8a29e !default;
12
+ $code-color: #d6d3d1 !default;
13
+ $code-bg: #1c1917 !default;
14
+ $border-color: #7d7b76 !default;
15
+ $font-family-sans-serif: Noto Sans, Fira Sans, system-ui, sans-serif !default;
16
+ $font-family-monospace: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace !default;
17
+ $headings-font-family: Noto Sans, system-ui, sans-serif !default;
18
+ $headings-font-weight: 500 !default;
19
+ $h2-font-size: 1.875rem !default;
20
+
21
+ /*-- scss:rules --*/
22
+ // ── Design tokens (contract custom properties) ───────────────────────
23
+ :root {
24
+ --color-palette-ink-50: #f5f5f4;
25
+ --color-palette-ink-100: #e7e5e4;
26
+ --color-palette-ink-200: #d6d3d1;
27
+ --color-palette-ink-300: #a8a29e;
28
+ --color-palette-ink-400: #78716c;
29
+ --color-palette-ink-500: #57534e;
30
+ --color-palette-ink-600: #44403c;
31
+ --color-palette-ink-700: #292524;
32
+ --color-palette-ink-800: #1c1917;
33
+ --color-palette-ink-900: #0c0a09;
34
+ --color-palette-stone-50: #f7f7f6;
35
+ --color-palette-stone-100: #ededeb;
36
+ --color-palette-stone-200: #dcdcda;
37
+ --color-palette-stone-300: #c1c1bf;
38
+ --color-palette-stone-400: #a0a0a0;
39
+ --color-palette-stone-500: #7c7c7c;
40
+ --color-palette-stone-600: #5e5e5c;
41
+ --color-palette-stone-700: #424240;
42
+ --color-palette-stone-800: #292927;
43
+ --color-palette-stone-900: #14140f;
44
+ --color-palette-paper-50: #fefdfb;
45
+ --color-palette-paper-100: #fdf9f2;
46
+ --color-palette-paper-200: #faf2e3;
47
+ --color-palette-paper-300: #f5e8cf;
48
+ --color-palette-paper-400: #edd9b3;
49
+ --color-palette-paper-500: #e0c088;
50
+ --color-functional-success: #27AE60;
51
+ --color-functional-warning: #F39C12;
52
+ --color-functional-error: #E74C3C;
53
+ --color-functional-info: #3498DB;
54
+ --transition-quick: 0.15s ease;
55
+ --transition-standard: 0.25s ease-in-out;
56
+ --transition-smooth: 0.35s ease;
57
+ --transition-logo: 0.3s;
58
+ --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
59
+ --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
60
+ --font-family-display: var(--font-family-display-editorial);
61
+ --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
62
+ --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
63
+ --font-family-brand: Noto Sans, system-ui, sans-serif;
64
+ --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
65
+ --font-size-micro: 0.75rem;
66
+ --font-size-small: 0.875rem;
67
+ --font-size-base: 1rem;
68
+ --font-size-readable: 1.125rem;
69
+ --font-size-emphasis: 1.25rem;
70
+ --font-size-heading-small: 1.5rem;
71
+ --font-size-heading-medium: 1.875rem;
72
+ --font-size-heading-large: 2.25rem;
73
+ --font-size-heading-xl: 3rem;
74
+ --font-weight-extralight: 200;
75
+ --font-weight-light: 300;
76
+ --font-weight-normal: 400;
77
+ --font-weight-medium: 500;
78
+ --font-weight-semibold: 600;
79
+ --font-weight-bold: 700;
80
+ --font-weight-heading-h1: var(--font-weight-semibold);
81
+ --font-weight-heading-h2: var(--font-weight-semibold);
82
+ --font-weight-heading-h3: var(--font-weight-medium);
83
+ --font-weight-heading-h4: var(--font-weight-normal);
84
+ --font-weight-heading-h5: var(--font-weight-normal);
85
+ --font-weight-heading-h6: var(--font-weight-normal);
86
+ --font-weight-heading-subtitle: var(--font-weight-semibold);
87
+ --font-style-normal: normal;
88
+ --font-style-italic: italic;
89
+ --font-style-oblique: oblique;
90
+ --font-lineHeight-tight: 1.25;
91
+ --font-lineHeight-normal: 1.5;
92
+ --font-lineHeight-relaxed: 1.625;
93
+ --font-feature-settings-display: "normal";
94
+ --font-feature-settings-body: "normal";
95
+ --spacing-xs: 0.25rem;
96
+ --spacing-sm: 0.5rem;
97
+ --spacing-md: 1rem;
98
+ --spacing-lg: 1.5rem;
99
+ --spacing-xl: 2rem;
100
+ --spacing-2xl: 3rem;
101
+ --spacing-3xl: 4rem;
102
+ --radius-sm: 0.25rem;
103
+ --radius-md: 0.5rem;
104
+ --radius-lg: 0.75rem;
105
+ --radius-xl: 1rem;
106
+ --radius-full: 9999px;
107
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
108
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
109
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
110
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
111
+ --color-dataviz-okabe-ito-orange: #E69F00;
112
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
113
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
114
+ --color-dataviz-okabe-ito-yellow: #F0E442;
115
+ --color-dataviz-okabe-ito-blue: #0072B2;
116
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
117
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
118
+ --color-dataviz-categorical-1: #E69F00;
119
+ --color-dataviz-categorical-2: #56B4E9;
120
+ --color-dataviz-categorical-3: #009E73;
121
+ --color-dataviz-categorical-4: #F0E442;
122
+ --color-dataviz-categorical-5: #0072B2;
123
+ --color-dataviz-categorical-6: #D55E00;
124
+ --color-dataviz-categorical-7: #CC79A7;
125
+ }
126
+
127
+ :root, body.quarto-dark, [data-bs-theme="dark"] {
128
+ --color-surface-page: #141410;
129
+ --color-surface-page-scrolled: #141410;
130
+ --color-surface-elevated: #1c1917;
131
+ --color-surface-sunken: #0c0a09;
132
+ --color-surface-navbar: #141410;
133
+ --color-surface-navbar-scrolled: #141410;
134
+ --color-surface-code: #1c1917;
135
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
136
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
137
+ --color-border-strong: rgba(253, 249, 242, 0.75);
138
+ --color-border-card: rgba(253, 249, 242, 0.60);
139
+ --color-border-code: #292524;
140
+ --color-content-primary: #fdf9f2;
141
+ --color-content-secondary: #a8a29e;
142
+ --color-content-muted: #78716c;
143
+ --color-content-inverse: #0c0a09;
144
+ --color-interactive-primary: #d6d3d1;
145
+ --color-interactive-hover: #a8a29e;
146
+ --color-interactive-accent: #d6d3d1;
147
+ --color-interactive-focus: #d6d3d1;
148
+ --contrast-high: rgb(237, 237, 235);
149
+ --contrast-readable: rgb(237, 237, 235);
150
+ --contrast-medium: #83838f;
151
+ --contrast-subtle: #83838f;
152
+ --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
153
+ --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
154
+ --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
155
+ --border-subtle: rgba(237, 237, 235, 0.47);
156
+ --border-moderate: rgba(237, 237, 235, 0.63);
157
+ --border-focus: #4FC3F7;
158
+ --navigation-hover-background: rgba(237, 237, 235, 0.05);
159
+ --navigation-active-background: rgba(237, 237, 235, 0.1);
160
+ --color-dataviz-okabe-ito-black: #FDF9F2;
161
+ --color-dataviz-categorical-8: #FDF9F2;
162
+ --color-dataviz-uncertainty-outer: #333333;
163
+ --color-dataviz-uncertainty-union: #6B6B6B;
164
+ --color-dataviz-uncertainty-inner: #D6D6D6;
165
+ }
166
+
167
+ // ── Quarto chrome → tokens ──────────────────────────────────────────────
168
+ body {
169
+ background-color: var(--color-surface-page);
170
+ color: var(--color-content-primary);
171
+ }
172
+
173
+ h1, h2, h3, h4, h5, h6, .title {
174
+ color: var(--color-content-primary);
175
+ }
176
+
177
+ // Links in running text are underlined: interactive.primary is about 1.9:1
178
+ // against body text in light mode, so colour cannot be the only cue (WCAG 1.4.1).
179
+ main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a {
180
+ color: var(--color-interactive-primary);
181
+ text-decoration: underline;
182
+ text-underline-offset: 0.15em;
183
+ }
184
+
185
+ main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a:hover {
186
+ color: var(--color-interactive-hover);
187
+ }
188
+
189
+ // Navigation and the outline stay plain.
190
+ #TOC a, nav a, .sidebar a, .navbar a, a.footnote-ref, a.anchorjs-link {
191
+ text-decoration: none;
192
+ }
193
+
194
+ :not(pre) > code {
195
+ color: var(--color-interactive-accent);
196
+ background-color: var(--color-surface-code);
197
+ }
198
+
199
+ pre, div.sourceCode {
200
+ background-color: var(--color-surface-code);
201
+ border: 1px solid var(--color-border-code);
202
+ }
203
+
204
+ // Quarto themes its popups as [data-theme~="quarto"] at compile time ($body-bg);
205
+ // match that specificity so the runtime token wins.
206
+ .tippy-box, .tippy-box[data-theme~="quarto"] {
207
+ background-color: var(--color-surface-elevated);
208
+ color: var(--color-content-primary);
209
+ border: 1px solid var(--color-border-subtle);
210
+ }
211
+
212
+ .tippy-box[data-theme~="quarto"] > .tippy-backdrop {
213
+ background-color: var(--color-surface-elevated);
214
+ }
215
+
216
+ .callout {
217
+ background-color: var(--color-surface-elevated);
218
+ border-color: var(--color-border-subtle);
219
+ }
220
+
221
+ .column-margin, .margin-aside, figcaption {
222
+ color: var(--color-content-secondary);
223
+ }
224
+
225
+ // Elevated cards carry an edge: in dark mode surface.elevated is about 1.06:1
226
+ // against surface.page, so a card without one disappears.
227
+ .di-elevated, div.abstract {
228
+ background-color: var(--color-surface-elevated);
229
+ border: 1px solid var(--color-border-subtle);
230
+ border-radius: var(--radius-md);
231
+ padding: var(--spacing-md);
232
+ }
233
+
234
+ // ===== THEME TOGGLE STYLING =====
235
+ // Dark theme - show sun icon (switch to light)
236
+
237
+ .quarto-color-scheme-toggle .bi::before {
238
+ display: inline-block !important;
239
+ height: 1rem !important;
240
+ width: 1rem !important;
241
+ content: "" !important;
242
+ vertical-align: -0.125em !important;
243
+ background-repeat: no-repeat !important;
244
+ background-size: 1rem 1rem !important;
245
+ background-color: transparent !important;
246
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2383838F" class="bi bi-sun" viewBox="0 0 16 16"><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/></svg>') !important;
247
+ transition: background-image 0.25s ease;
248
+ }
249
+
250
+ .quarto-color-scheme-toggle:hover .bi::before {
251
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23EDEDE8" class="bi bi-sun" viewBox="0 0 16 16"><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/></svg>') !important;
252
+ transition: background-image 0.25s ease;
253
+ }
254
+
255
+ @media (prefers-reduced-motion: reduce) {
256
+ .quarto-color-scheme-toggle .bi::before {
257
+ transition: none !important;
258
+ }
259
+ }
@@ -0,0 +1,259 @@
1
+ // @dataimago/css-neutral@0.1.0-alpha.10 dist/quarto/neutral-light.scss · sha256:f542c1c2b60892802e2211a6ae7899bd6d7c7507138a92f95001c034e6ccb865 · generated from tokens; do not edit · restore: npx -p @dataimago/css-neutral@0.1.0-alpha.10 dataimago-sync
2
+ // neutral light theme for Quarto 1.8 — generated from the design tokens (tools/formats/quarto.mjs).
3
+ // Bootstrap Sass variables are compile-time sRGB; runtime colours come from the custom properties below.
4
+
5
+ /*-- scss:defaults --*/
6
+ $body-bg: #ededeb !default;
7
+ $body-color: #14140f !default;
8
+ $headings-color: #14140f !default;
9
+ $navbar-bg: #ededeb !default;
10
+ $link-color: #292524 !default;
11
+ $link-hover-color: #1c1917 !default;
12
+ $code-color: #292524 !default;
13
+ $code-bg: #faf2e3 !default;
14
+ $border-color: #888785 !default;
15
+ $font-family-sans-serif: Noto Sans, Fira Sans, system-ui, sans-serif !default;
16
+ $font-family-monospace: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace !default;
17
+ $headings-font-family: Noto Sans, system-ui, sans-serif !default;
18
+ $headings-font-weight: 500 !default;
19
+ $h2-font-size: 1.875rem !default;
20
+
21
+ /*-- scss:rules --*/
22
+ // ── Design tokens (contract custom properties) ───────────────────────
23
+ :root {
24
+ --color-palette-ink-50: #f5f5f4;
25
+ --color-palette-ink-100: #e7e5e4;
26
+ --color-palette-ink-200: #d6d3d1;
27
+ --color-palette-ink-300: #a8a29e;
28
+ --color-palette-ink-400: #78716c;
29
+ --color-palette-ink-500: #57534e;
30
+ --color-palette-ink-600: #44403c;
31
+ --color-palette-ink-700: #292524;
32
+ --color-palette-ink-800: #1c1917;
33
+ --color-palette-ink-900: #0c0a09;
34
+ --color-palette-stone-50: #f7f7f6;
35
+ --color-palette-stone-100: #ededeb;
36
+ --color-palette-stone-200: #dcdcda;
37
+ --color-palette-stone-300: #c1c1bf;
38
+ --color-palette-stone-400: #a0a0a0;
39
+ --color-palette-stone-500: #7c7c7c;
40
+ --color-palette-stone-600: #5e5e5c;
41
+ --color-palette-stone-700: #424240;
42
+ --color-palette-stone-800: #292927;
43
+ --color-palette-stone-900: #14140f;
44
+ --color-palette-paper-50: #fefdfb;
45
+ --color-palette-paper-100: #fdf9f2;
46
+ --color-palette-paper-200: #faf2e3;
47
+ --color-palette-paper-300: #f5e8cf;
48
+ --color-palette-paper-400: #edd9b3;
49
+ --color-palette-paper-500: #e0c088;
50
+ --color-functional-success: #27AE60;
51
+ --color-functional-warning: #F39C12;
52
+ --color-functional-error: #E74C3C;
53
+ --color-functional-info: #3498DB;
54
+ --transition-quick: 0.15s ease;
55
+ --transition-standard: 0.25s ease-in-out;
56
+ --transition-smooth: 0.35s ease;
57
+ --transition-logo: 0.3s;
58
+ --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
59
+ --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
60
+ --font-family-display: var(--font-family-display-editorial);
61
+ --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
62
+ --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
63
+ --font-family-brand: Noto Sans, system-ui, sans-serif;
64
+ --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
65
+ --font-size-micro: 0.75rem;
66
+ --font-size-small: 0.875rem;
67
+ --font-size-base: 1rem;
68
+ --font-size-readable: 1.125rem;
69
+ --font-size-emphasis: 1.25rem;
70
+ --font-size-heading-small: 1.5rem;
71
+ --font-size-heading-medium: 1.875rem;
72
+ --font-size-heading-large: 2.25rem;
73
+ --font-size-heading-xl: 3rem;
74
+ --font-weight-extralight: 200;
75
+ --font-weight-light: 300;
76
+ --font-weight-normal: 400;
77
+ --font-weight-medium: 500;
78
+ --font-weight-semibold: 600;
79
+ --font-weight-bold: 700;
80
+ --font-weight-heading-h1: var(--font-weight-semibold);
81
+ --font-weight-heading-h2: var(--font-weight-semibold);
82
+ --font-weight-heading-h3: var(--font-weight-medium);
83
+ --font-weight-heading-h4: var(--font-weight-normal);
84
+ --font-weight-heading-h5: var(--font-weight-normal);
85
+ --font-weight-heading-h6: var(--font-weight-normal);
86
+ --font-weight-heading-subtitle: var(--font-weight-semibold);
87
+ --font-style-normal: normal;
88
+ --font-style-italic: italic;
89
+ --font-style-oblique: oblique;
90
+ --font-lineHeight-tight: 1.25;
91
+ --font-lineHeight-normal: 1.5;
92
+ --font-lineHeight-relaxed: 1.625;
93
+ --font-feature-settings-display: "normal";
94
+ --font-feature-settings-body: "normal";
95
+ --spacing-xs: 0.25rem;
96
+ --spacing-sm: 0.5rem;
97
+ --spacing-md: 1rem;
98
+ --spacing-lg: 1.5rem;
99
+ --spacing-xl: 2rem;
100
+ --spacing-2xl: 3rem;
101
+ --spacing-3xl: 4rem;
102
+ --radius-sm: 0.25rem;
103
+ --radius-md: 0.5rem;
104
+ --radius-lg: 0.75rem;
105
+ --radius-xl: 1rem;
106
+ --radius-full: 9999px;
107
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
108
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
109
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
110
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
111
+ --color-dataviz-okabe-ito-orange: #E69F00;
112
+ --color-dataviz-okabe-ito-sky-blue: #56B4E9;
113
+ --color-dataviz-okabe-ito-bluish-green: #009E73;
114
+ --color-dataviz-okabe-ito-yellow: #F0E442;
115
+ --color-dataviz-okabe-ito-blue: #0072B2;
116
+ --color-dataviz-okabe-ito-vermillion: #D55E00;
117
+ --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
118
+ --color-dataviz-categorical-1: #E69F00;
119
+ --color-dataviz-categorical-2: #56B4E9;
120
+ --color-dataviz-categorical-3: #009E73;
121
+ --color-dataviz-categorical-4: #F0E442;
122
+ --color-dataviz-categorical-5: #0072B2;
123
+ --color-dataviz-categorical-6: #D55E00;
124
+ --color-dataviz-categorical-7: #CC79A7;
125
+ }
126
+
127
+ :root, [data-bs-theme="light"] {
128
+ --color-surface-page: #ededeb;
129
+ --color-surface-page-scrolled: #ededeb;
130
+ --color-surface-elevated: #f7f7f6;
131
+ --color-surface-sunken: #faf2e3;
132
+ --color-surface-navbar: #ededeb;
133
+ --color-surface-navbar-scrolled: #ededeb;
134
+ --color-surface-code: #faf2e3;
135
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
136
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
137
+ --color-border-strong: rgba(12, 10, 9, 0.75);
138
+ --color-border-card: rgba(12, 10, 9, 0.60);
139
+ --color-border-code: #d6d3d1;
140
+ --color-content-primary: #14140f;
141
+ --color-content-secondary: #7c7c7c;
142
+ --color-content-muted: #78716c;
143
+ --color-content-inverse: #fdf9f2;
144
+ --color-interactive-primary: #292524;
145
+ --color-interactive-hover: #1c1917;
146
+ --color-interactive-accent: #292524;
147
+ --color-interactive-focus: #292524;
148
+ --contrast-high: rgb(20, 20, 16);
149
+ --contrast-readable: rgb(20, 20, 16);
150
+ --contrast-medium: #7c7c7c;
151
+ --contrast-subtle: #7c7c7c;
152
+ --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
153
+ --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
154
+ --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
155
+ --border-subtle: rgba(20, 20, 16, 0.47);
156
+ --border-moderate: rgba(20, 20, 16, 0.63);
157
+ --border-focus: #3498DB;
158
+ --navigation-hover-background: rgba(20, 20, 16, 0.05);
159
+ --navigation-active-background: rgba(20, 20, 16, 0.1);
160
+ --color-dataviz-okabe-ito-black: #000000;
161
+ --color-dataviz-categorical-8: #000000;
162
+ --color-dataviz-uncertainty-outer: #D6D6D6;
163
+ --color-dataviz-uncertainty-union: #9E9E9E;
164
+ --color-dataviz-uncertainty-inner: #333333;
165
+ }
166
+
167
+ // ── Quarto chrome → tokens ──────────────────────────────────────────────
168
+ body {
169
+ background-color: var(--color-surface-page);
170
+ color: var(--color-content-primary);
171
+ }
172
+
173
+ h1, h2, h3, h4, h5, h6, .title {
174
+ color: var(--color-content-primary);
175
+ }
176
+
177
+ // Links in running text are underlined: interactive.primary is about 1.9:1
178
+ // against body text in light mode, so colour cannot be the only cue (WCAG 1.4.1).
179
+ main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a {
180
+ color: var(--color-interactive-primary);
181
+ text-decoration: underline;
182
+ text-underline-offset: 0.15em;
183
+ }
184
+
185
+ main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a:hover {
186
+ color: var(--color-interactive-hover);
187
+ }
188
+
189
+ // Navigation and the outline stay plain.
190
+ #TOC a, nav a, .sidebar a, .navbar a, a.footnote-ref, a.anchorjs-link {
191
+ text-decoration: none;
192
+ }
193
+
194
+ :not(pre) > code {
195
+ color: var(--color-interactive-accent);
196
+ background-color: var(--color-surface-code);
197
+ }
198
+
199
+ pre, div.sourceCode {
200
+ background-color: var(--color-surface-code);
201
+ border: 1px solid var(--color-border-code);
202
+ }
203
+
204
+ // Quarto themes its popups as [data-theme~="quarto"] at compile time ($body-bg);
205
+ // match that specificity so the runtime token wins.
206
+ .tippy-box, .tippy-box[data-theme~="quarto"] {
207
+ background-color: var(--color-surface-elevated);
208
+ color: var(--color-content-primary);
209
+ border: 1px solid var(--color-border-subtle);
210
+ }
211
+
212
+ .tippy-box[data-theme~="quarto"] > .tippy-backdrop {
213
+ background-color: var(--color-surface-elevated);
214
+ }
215
+
216
+ .callout {
217
+ background-color: var(--color-surface-elevated);
218
+ border-color: var(--color-border-subtle);
219
+ }
220
+
221
+ .column-margin, .margin-aside, figcaption {
222
+ color: var(--color-content-secondary);
223
+ }
224
+
225
+ // Elevated cards carry an edge: in dark mode surface.elevated is about 1.06:1
226
+ // against surface.page, so a card without one disappears.
227
+ .di-elevated, div.abstract {
228
+ background-color: var(--color-surface-elevated);
229
+ border: 1px solid var(--color-border-subtle);
230
+ border-radius: var(--radius-md);
231
+ padding: var(--spacing-md);
232
+ }
233
+
234
+ // ===== THEME TOGGLE STYLING =====
235
+ // Light theme - show moon icon (switch to dark)
236
+
237
+ .quarto-color-scheme-toggle .bi::before {
238
+ display: inline-block !important;
239
+ height: 1rem !important;
240
+ width: 1rem !important;
241
+ content: "" !important;
242
+ vertical-align: -0.125em !important;
243
+ background-repeat: no-repeat !important;
244
+ background-size: 1rem 1rem !important;
245
+ background-color: transparent !important;
246
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2383838F" class="bi bi-moon" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>') !important;
247
+ transition: background-image 0.25s ease;
248
+ }
249
+
250
+ .quarto-color-scheme-toggle:hover .bi::before {
251
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000000" class="bi bi-moon" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>') !important;
252
+ transition: background-image 0.25s ease;
253
+ }
254
+
255
+ @media (prefers-reduced-motion: reduce) {
256
+ .quarto-color-scheme-toggle .bi::before {
257
+ transition: none !important;
258
+ }
259
+ }