@timmo001/docs-kit 0.9.40 → 0.10.0

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 (5) hide show
  1. package/README.md +16 -4
  2. package/package.json +3 -3
  3. package/src/blume/header-search.astro +4 -4
  4. package/src/blume/theme-picker.astro +124 -8
  5. package/src/blume/themes/all.css +674 -0
package/README.md CHANGED
@@ -109,24 +109,36 @@ its own.
109
109
  `HeaderSearch` adds a mode picker next to Blume's light and dark toggle, with
110
110
  Light, Dark and Darker. To let readers pick the theme as well, import every
111
111
  theme after the site's default and pass the themes to `HeaderSearch` from a
112
- wrapper component:
112
+ wrapper component. `all.css` has the core and optional themes.
113
113
 
114
114
  ```css
115
115
  @import "@timmo001/docs-kit/blume/themes/base.css";
116
116
  @import "@timmo001/docs-kit/blume/themes/all.css";
117
117
  ```
118
118
 
119
+ List the site's own theme first, then any other Groundwork themes, then the
120
+ optional ones. The choices from `@timmo001/groundwork-tokens/choices` carry
121
+ each optional theme's `family`, which groups it in the select, and `mode` for
122
+ one that comes in one scheme only, such as Catppuccin Latte. Picking that
123
+ theme moves the page into its scheme, and the other modes can't be picked
124
+ while it's in use. Themes without a family go under `group`, which defaults
125
+ to Groundwork.
126
+
119
127
  ```astro
120
128
  ---
129
+ import {
130
+ coreThemeChoices,
131
+ optionalThemeChoices,
132
+ } from "@timmo001/groundwork-tokens/choices";
121
133
  import HeaderSearch from "@timmo001/docs-kit/blume/header-search.astro";
122
134
 
123
135
  const themes = [
124
- { id: "base", name: "Base" },
125
- { id: "bridge", name: "Bridge" },
136
+ ...coreThemeChoices.filter((theme) => theme.id === "bridge"),
137
+ ...optionalThemeChoices,
126
138
  ];
127
139
  ---
128
140
 
129
- <HeaderSearch {...Astro.props} themes={themes} defaultTheme="base" />
141
+ <HeaderSearch {...Astro.props} themes={themes} defaultTheme="bridge" />
130
142
  ```
131
143
 
132
144
  Set these in `theme.css` to change the banner:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timmo001/docs-kit",
3
- "version": "0.9.40",
3
+ "version": "0.10.0",
4
4
  "description": "Shared branding, layout and config for timmo001 documentation sites",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -39,8 +39,8 @@
39
39
  "format:check": "prettier --check ."
40
40
  },
41
41
  "dependencies": {
42
- "@timmo001/groundwork-tokens": "0.9.40",
43
- "@timmo001/groundwork-ui": "0.9.40",
42
+ "@timmo001/groundwork-tokens": "0.10.0",
43
+ "@timmo001/groundwork-ui": "0.10.0",
44
44
  "sharp": "0.35.5"
45
45
  },
46
46
  "peerDependencies": {
package/src/blume/header-search.astro CHANGED
@@ -5,10 +5,10 @@ import data from "blume:data";
5
5
  import ThemePicker from "./theme-picker.astro";
6
6
 
7
7
  /**
8
- * `themes` and `defaultTheme` go to the theme picker; everything else Blume
9
- * passes goes to its search.
8
+ * `themes`, `group` and `defaultTheme` go to the theme picker; everything
9
+ * else Blume passes goes to its search.
10
10
  */
11
- const { themes, defaultTheme, ...searchProps } = Astro.props;
11
+ const { themes, group, defaultTheme, ...searchProps } = Astro.props;
12
12
 
13
13
  const repoUrl = data.config.repoUrl;
14
14
 
@@ -16,7 +16,7 @@ const github = SOCIAL_ICONS.github;
16
16
  ---
17
17
 
18
18
  <Search {...searchProps} />
19
- <ThemePicker themes={themes} defaultTheme={defaultTheme} />
19
+ <ThemePicker themes={themes} group={group} defaultTheme={defaultTheme} />
20
20
  {
21
21
  repoUrl && (
22
22
  <a
package/src/blume/theme-picker.astro CHANGED
@@ -5,17 +5,42 @@
5
5
  * with it. Theme choices need `@timmo001/docs-kit/blume/themes/all.css`.
6
6
  * The controls are Groundwork's `gw-select` and `gw-segmented`, styled by the
7
7
  * Groundwork theme tokens imported here.
8
+ *
9
+ * Themes are listed in the order given, under their `family`, or `group` for
10
+ * those without one. A theme with one `mode`, such as Catppuccin Latte, keeps
11
+ * the page in that scheme while it's picked, and the other modes can't be
12
+ * picked.
8
13
  */
9
14
  import "@timmo001/groundwork-tokens/themes.css";
10
15
 
11
16
  interface Props {
12
- /** Themes to offer, in order. Leave out to offer the mode only. */
13
- themes?: readonly { id: string; name: string }[];
17
+ /**
18
+ * Themes to offer, in order: usually the site's own theme, then any other
19
+ * Groundwork themes, then the optional ones. Leave out to offer the mode
20
+ * only.
21
+ */
22
+ themes?: readonly {
23
+ id: string;
24
+ name: string;
25
+ /** The palette an optional theme comes from, such as `Catppuccin`. */
26
+ family?: string | undefined;
27
+ /** The one scheme a theme covers, such as `light` for Catppuccin Latte. */
28
+ mode?: "light" | "dark" | undefined;
29
+ }[];
30
+ /** The heading for themes without a `family`. Defaults to `Groundwork`. */
31
+ group?: string;
14
32
  /** The theme the site's own `theme.css` imports, shown when none is picked. */
15
33
  defaultTheme?: string;
16
34
  }
17
35
 
18
- const { themes = [], defaultTheme = "base" } = Astro.props;
36
+ const { themes = [], group = "Groundwork", defaultTheme = "base" } = Astro.props;
37
+
38
+ const grouped = themes.some((theme) => theme.family !== undefined);
39
+
40
+ /** Each one-scheme theme's scheme, by id. */
41
+ const only = Object.fromEntries(
42
+ themes.flatMap((theme) => (theme.mode === undefined ? [] : [[theme.id, theme.mode]])),
43
+ );
19
44
 
20
45
  // MDI's sunny, waning crescent and night icons
21
46
  const modes = [
@@ -37,7 +62,7 @@ const modes = [
37
62
  ];
38
63
  ---
39
64
 
40
- <script is:inline>
65
+ <script is:inline define:vars={{ only, defaultTheme }}>
41
66
  (() => {
42
67
  const root = document.documentElement;
43
68
 
@@ -55,6 +80,19 @@ const modes = [
55
80
  if (theme) root.dataset.gwDocsTheme = theme;
56
81
  else delete root.dataset.gwDocsTheme;
57
82
 
83
+ // A theme with one scheme keeps the page in it, before the first paint
84
+ const scheme = only[theme ?? defaultTheme];
85
+
86
+ if (scheme !== undefined && root.dataset.theme !== scheme) {
87
+ root.dataset.theme = scheme;
88
+
89
+ try {
90
+ localStorage.setItem("blume-theme", scheme);
91
+ } catch {
92
+ // Blocked: it still applies to this page
93
+ }
94
+ }
95
+
58
96
  if (read("gw-darker") === "1" && root.dataset.theme === "dark") {
59
97
  root.setAttribute("data-gw-darker", "");
60
98
  } else {
@@ -72,6 +110,7 @@ const modes = [
72
110
  data-gw-theme-picker
73
111
  data-default-theme={defaultTheme}
74
112
  data-gw-theme={defaultTheme}
113
+ data-only={JSON.stringify(only)}
75
114
  >
76
115
  {
77
116
  themes.length > 0 && (
@@ -80,7 +119,14 @@ const modes = [
80
119
  label="Theme"
81
120
  inline-label
82
121
  search="never"
83
- options={JSON.stringify(themes.map((theme) => ({ value: theme.id, label: theme.name })))}
122
+ options={JSON.stringify(
123
+ themes.map((theme) => ({
124
+ value: theme.id,
125
+ label: theme.name,
126
+ // Headings only once there's more than one group
127
+ group: grouped ? (theme.family ?? group) : undefined,
128
+ })),
129
+ )}
84
130
  />
85
131
  )
86
132
  }
@@ -88,6 +134,7 @@ const modes = [
88
134
  data-gw-mode-select
89
135
  label="Color mode"
90
136
  labels="hide"
137
+ data-modes={JSON.stringify(modes)}
91
138
  options={JSON.stringify(modes)}></gw-segmented>
92
139
  </div>
93
140
 
@@ -113,12 +160,25 @@ const modes = [
113
160
  ? "darker"
114
161
  : "dark";
115
162
 
163
+ type Scheme = "light" | "dark";
164
+
165
+ /** The one scheme `theme` covers, from the picker's `data-only`, if it has one. */
166
+ const onlyFor = (picker: HTMLElement, theme: string): Scheme | undefined => {
167
+ const only: Record<string, Scheme> = JSON.parse(picker.dataset.only ?? "{}");
168
+
169
+ return only[theme];
170
+ };
171
+
172
+ const allowed = (scheme: Scheme | undefined, mode: string) =>
173
+ scheme === undefined || (scheme === "light" ? mode === "light" : mode !== "light");
174
+
116
175
  const sync = () => {
117
176
  for (const picker of document.querySelectorAll("div[data-gw-theme-picker]")) {
118
177
  if (!(picker instanceof HTMLElement)) continue;
119
178
 
120
179
  const theme = root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "";
121
180
  const mode = currentMode();
181
+ const scheme = onlyFor(picker, theme);
122
182
 
123
183
  // The controls are Groundwork components, so the picker carries the
124
184
  // page's theme and mode for them to follow
@@ -126,8 +186,23 @@ const modes = [
126
186
  picker.dataset.gwMode = mode;
127
187
 
128
188
  for (const control of picker.querySelectorAll("gw-select, gw-segmented")) {
129
- if (control instanceof GwSegmented) control.value = mode;
130
- else if (control instanceof GwSelect) control.value = theme;
189
+ if (control instanceof GwSegmented) {
190
+ const modes: { value: string; label: string; icon: string }[] = JSON.parse(
191
+ control.dataset.modes ?? "[]",
192
+ );
193
+
194
+ // The modes the theme doesn't come in show, but can't be picked
195
+ control.options = modes.map((option) =>
196
+ allowed(scheme, option.value)
197
+ ? option
198
+ : {
199
+ ...option,
200
+ disabled: true,
201
+ hint: `${option.label} isn't available: this theme is ${scheme} only`,
202
+ },
203
+ );
204
+ control.value = mode;
205
+ } else if (control instanceof GwSelect) control.value = theme;
131
206
  }
132
207
  }
133
208
  };
@@ -146,9 +221,21 @@ const modes = [
146
221
  else document.startViewTransition(change).ready.catch(() => undefined);
147
222
  };
148
223
 
224
+ const picker = target.closest("[data-gw-theme-picker]");
225
+
226
+ if (!(picker instanceof HTMLElement)) return;
227
+
149
228
  if (target.matches("[data-gw-mode-select]")) {
150
229
  const dark = target.value !== "light";
151
230
  const value = target.value;
231
+ const theme = root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "";
232
+
233
+ // A mode the theme doesn't come in is disabled, so this only guards
234
+ if (!allowed(onlyFor(picker, theme), value)) {
235
+ sync();
236
+
237
+ return;
238
+ }
152
239
 
153
240
  transition(() => {
154
241
  root.dataset.theme = dark ? "dark" : "light";
@@ -161,17 +248,46 @@ const modes = [
161
248
 
162
249
  if (target.matches("[data-gw-theme-select]")) {
163
250
  const value = target.value;
251
+ const scheme = onlyFor(picker, value);
164
252
 
253
+ // A theme with one scheme moves the page into it
165
254
  transition(() => {
166
255
  root.dataset.gwDocsTheme = value;
256
+
257
+ if (scheme !== undefined) {
258
+ root.dataset.theme = scheme;
259
+
260
+ if (scheme === "light") root.removeAttribute("data-gw-darker");
261
+ }
167
262
  });
168
263
 
169
264
  save("gw-docs-theme", value);
265
+
266
+ if (scheme !== undefined) {
267
+ save("blume-theme", scheme);
268
+
269
+ if (scheme === "light") save("gw-darker", null);
270
+ }
170
271
  }
171
272
  });
172
273
 
173
- // Blume's toggle flips data-theme; going light ends Darker.
274
+ // Blume's toggle flips data-theme; going light ends Darker, and a theme
275
+ // with one scheme flips it back.
174
276
  new MutationObserver(() => {
277
+ const picker = document.querySelector("div[data-gw-theme-picker]");
278
+
279
+ const scheme =
280
+ picker instanceof HTMLElement
281
+ ? onlyFor(picker, root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "")
282
+ : undefined;
283
+
284
+ if (scheme !== undefined && root.dataset.theme !== scheme) {
285
+ root.dataset.theme = scheme;
286
+ save("blume-theme", scheme);
287
+
288
+ return;
289
+ }
290
+
175
291
  if (root.dataset.theme !== "dark" && root.hasAttribute("data-gw-darker")) {
176
292
  root.removeAttribute("data-gw-darker");
177
293
  save("gw-darker", null);
package/src/blume/themes/all.css CHANGED
@@ -473,3 +473,677 @@
473
473
  --blume-code-word: oklch(68.29% 0.1197 249.65 / 0.14);
474
474
  --blume-code-word-border: oklch(68.29% 0.1197 249.65 / 0.45);
475
475
  }
476
+
477
+ :root[data-gw-docs-theme="catppuccin-frappe"] {
478
+ --blume-radius: 10px;
479
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
480
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
481
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
482
+ }
483
+
484
+ :root[data-gw-docs-theme="catppuccin-frappe"][data-theme="dark"] {
485
+ --blume-background: oklch(32.91% 0.0324 274.76);
486
+ --blume-foreground: oklch(86.19% 0.0526 273.35);
487
+ --blume-muted: oklch(30.05% 0.0324 274.76);
488
+ --blume-muted-foreground: oklch(75.24% 0.0483 274.47);
489
+ --blume-border: oklch(46.01% 0.0367 272.97);
490
+ --blume-accent: oklch(76.48% 0.1108 311.74);
491
+ --blume-accent-foreground: oklch(15% 0 0);
492
+ --blume-action: oklch(86.19% 0.0526 273.35);
493
+ --blume-action-foreground: oklch(32.91% 0.0324 274.76);
494
+ --blume-code-background: oklch(39.49% 0.0342 275.9);
495
+ --blume-code-highlight: oklch(74.2% 0.1044 265.66 / 0.14);
496
+ --blume-code-highlight-border: oklch(74.2% 0.1044 265.66 / 0.45);
497
+ --blume-code-add: oklch(81.24% 0.1071 133.39 / 0.14);
498
+ --blume-code-add-border: oklch(81.24% 0.1071 133.39 / 0.45);
499
+ --blume-code-remove: oklch(71.71% 0.1244 19.39 / 0.14);
500
+ --blume-code-remove-border: oklch(71.71% 0.1244 19.39 / 0.45);
501
+ --blume-code-error: oklch(71.71% 0.1244 19.39 / 0.14);
502
+ --blume-code-error-border: oklch(71.71% 0.1244 19.39 / 0.45);
503
+ --blume-code-warning: oklch(84.43% 0.0795 83.47 / 0.14);
504
+ --blume-code-warning-border: oklch(84.43% 0.0795 83.47 / 0.45);
505
+ --blume-code-word: oklch(74.2% 0.1044 265.66 / 0.14);
506
+ --blume-code-word-border: oklch(74.2% 0.1044 265.66 / 0.45);
507
+ }
508
+
509
+ :root[data-gw-docs-theme="catppuccin-frappe"][data-theme="dark"][data-gw-darker] {
510
+ --blume-background: oklch(28.41% 0.0324 274.76);
511
+ --blume-foreground: oklch(86.19% 0.0526 273.35);
512
+ --blume-muted: oklch(25.55% 0.0324 274.76);
513
+ --blume-muted-foreground: oklch(75.24% 0.0483 274.47);
514
+ --blume-border: oklch(54.01% 0.0367 272.97);
515
+ --blume-accent: oklch(76.48% 0.1108 311.74);
516
+ --blume-accent-foreground: oklch(15% 0 0);
517
+ --blume-action: oklch(86.19% 0.0526 273.35);
518
+ --blume-action-foreground: oklch(28.41% 0.0324 274.76);
519
+ --blume-code-background: oklch(34.99% 0.0342 275.9);
520
+ --blume-code-highlight: oklch(74.2% 0.1044 265.66 / 0.14);
521
+ --blume-code-highlight-border: oklch(74.2% 0.1044 265.66 / 0.45);
522
+ --blume-code-add: oklch(81.24% 0.1071 133.39 / 0.14);
523
+ --blume-code-add-border: oklch(81.24% 0.1071 133.39 / 0.45);
524
+ --blume-code-remove: oklch(71.71% 0.1244 19.39 / 0.14);
525
+ --blume-code-remove-border: oklch(71.71% 0.1244 19.39 / 0.45);
526
+ --blume-code-error: oklch(71.71% 0.1244 19.39 / 0.14);
527
+ --blume-code-error-border: oklch(71.71% 0.1244 19.39 / 0.45);
528
+ --blume-code-warning: oklch(84.43% 0.0795 83.47 / 0.14);
529
+ --blume-code-warning-border: oklch(84.43% 0.0795 83.47 / 0.45);
530
+ --blume-code-word: oklch(74.2% 0.1044 265.66 / 0.14);
531
+ --blume-code-word-border: oklch(74.2% 0.1044 265.66 / 0.45);
532
+ }
533
+
534
+ :root[data-gw-docs-theme="catppuccin-latte"] {
535
+ --blume-radius: 10px;
536
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
537
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
538
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
539
+ --blume-background: oklch(95.78% 0.0058 264.53);
540
+ --blume-foreground: oklch(43.55% 0.043 279.33);
541
+ --blume-muted: oklch(93.19% 0.0058 264.53);
542
+ --blume-muted-foreground: oklch(54.71% 0.0343 279.08);
543
+ --blume-border: oklch(80.83% 0.0174 271.2);
544
+ --blume-accent: oklch(55.47% 0.2503 297.02);
545
+ --blume-accent-foreground: oklch(100% 0 0);
546
+ --blume-action: oklch(43.55% 0.043 279.33);
547
+ --blume-action-foreground: oklch(95.78% 0.0058 264.53);
548
+ --blume-code-background: oklch(93.35% 0.0087 264.52);
549
+ --blume-code-highlight: oklch(55.86% 0.2255 262.09 / 0.14);
550
+ --blume-code-highlight-border: oklch(55.86% 0.2255 262.09 / 0.45);
551
+ --blume-code-add: oklch(62.5% 0.1772 140.44 / 0.14);
552
+ --blume-code-add-border: oklch(62.5% 0.1772 140.44 / 0.45);
553
+ --blume-code-remove: oklch(55.05% 0.2155 19.81 / 0.14);
554
+ --blume-code-remove-border: oklch(55.05% 0.2155 19.81 / 0.45);
555
+ --blume-code-error: oklch(55.05% 0.2155 19.81 / 0.14);
556
+ --blume-code-error-border: oklch(55.05% 0.2155 19.81 / 0.45);
557
+ --blume-code-warning: oklch(71.4% 0.1494 67.78 / 0.14);
558
+ --blume-code-warning-border: oklch(71.4% 0.1494 67.78 / 0.45);
559
+ --blume-code-word: oklch(55.86% 0.2255 262.09 / 0.14);
560
+ --blume-code-word-border: oklch(55.86% 0.2255 262.09 / 0.45);
561
+ }
562
+
563
+ :root[data-gw-docs-theme="catppuccin-macchiato"] {
564
+ --blume-radius: 10px;
565
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
566
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
567
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
568
+ }
569
+
570
+ :root[data-gw-docs-theme="catppuccin-macchiato"][data-theme="dark"] {
571
+ --blume-background: oklch(27.88% 0.0353 276.94);
572
+ --blume-foreground: oklch(87.08% 0.0481 273.67);
573
+ --blume-muted: oklch(24.88% 0.0353 276.94);
574
+ --blume-muted-foreground: oklch(75.13% 0.0441 273.53);
575
+ --blume-border: oklch(42.59% 0.0385 276.95);
576
+ --blume-accent: oklch(77.15% 0.1259 303.9);
577
+ --blume-accent-foreground: oklch(15% 0 0);
578
+ --blume-action: oklch(87.08% 0.0481 273.67);
579
+ --blume-action-foreground: oklch(27.88% 0.0353 276.94);
580
+ --blume-code-background: oklch(35.38% 0.0369 275.99);
581
+ --blume-code-highlight: oklch(74.97% 0.1101 263.81 / 0.14);
582
+ --blume-code-highlight-border: oklch(74.97% 0.1101 263.81 / 0.45);
583
+ --blume-code-add: oklch(83.5% 0.1079 138.15 / 0.14);
584
+ --blume-code-add-border: oklch(83.5% 0.1079 138.15 / 0.45);
585
+ --blume-code-remove: oklch(73.7% 0.1252 11.19 / 0.14);
586
+ --blume-code-remove-border: oklch(73.7% 0.1252 11.19 / 0.45);
587
+ --blume-code-error: oklch(73.7% 0.1252 11.19 / 0.14);
588
+ --blume-code-error-border: oklch(73.7% 0.1252 11.19 / 0.45);
589
+ --blume-code-warning: oklch(87.9% 0.0744 84.75 / 0.14);
590
+ --blume-code-warning-border: oklch(87.9% 0.0744 84.75 / 0.45);
591
+ --blume-code-word: oklch(74.97% 0.1101 263.81 / 0.14);
592
+ --blume-code-word-border: oklch(74.97% 0.1101 263.81 / 0.45);
593
+ }
594
+
595
+ :root[data-gw-docs-theme="catppuccin-macchiato"][data-theme="dark"][data-gw-darker] {
596
+ --blume-background: oklch(23.38% 0.0353 276.94);
597
+ --blume-foreground: oklch(87.08% 0.0481 273.67);
598
+ --blume-muted: oklch(20.38% 0.0353 276.94);
599
+ --blume-muted-foreground: oklch(75.13% 0.0441 273.53);
600
+ --blume-border: oklch(50.59% 0.0385 276.95);
601
+ --blume-accent: oklch(77.15% 0.1259 303.9);
602
+ --blume-accent-foreground: oklch(15% 0 0);
603
+ --blume-action: oklch(87.08% 0.0481 273.67);
604
+ --blume-action-foreground: oklch(23.38% 0.0353 276.94);
605
+ --blume-code-background: oklch(30.88% 0.0369 275.99);
606
+ --blume-code-highlight: oklch(74.97% 0.1101 263.81 / 0.14);
607
+ --blume-code-highlight-border: oklch(74.97% 0.1101 263.81 / 0.45);
608
+ --blume-code-add: oklch(83.5% 0.1079 138.15 / 0.14);
609
+ --blume-code-add-border: oklch(83.5% 0.1079 138.15 / 0.45);
610
+ --blume-code-remove: oklch(73.7% 0.1252 11.19 / 0.14);
611
+ --blume-code-remove-border: oklch(73.7% 0.1252 11.19 / 0.45);
612
+ --blume-code-error: oklch(73.7% 0.1252 11.19 / 0.14);
613
+ --blume-code-error-border: oklch(73.7% 0.1252 11.19 / 0.45);
614
+ --blume-code-warning: oklch(87.9% 0.0744 84.75 / 0.14);
615
+ --blume-code-warning-border: oklch(87.9% 0.0744 84.75 / 0.45);
616
+ --blume-code-word: oklch(74.97% 0.1101 263.81 / 0.14);
617
+ --blume-code-word-border: oklch(74.97% 0.1101 263.81 / 0.45);
618
+ }
619
+
620
+ :root[data-gw-docs-theme="catppuccin-mocha"] {
621
+ --blume-radius: 10px;
622
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
623
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
624
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
625
+ }
626
+
627
+ :root[data-gw-docs-theme="catppuccin-mocha"][data-theme="dark"] {
628
+ --blume-background: oklch(24.29% 0.0304 283.91);
629
+ --blume-foreground: oklch(87.87% 0.0426 272.28);
630
+ --blume-muted: oklch(21.28% 0.0304 283.91);
631
+ --blume-muted-foreground: oklch(75.1% 0.0396 273.93);
632
+ --blume-border: oklch(40.37% 0.032 280.15);
633
+ --blume-accent: oklch(78.71% 0.1187 304.77);
634
+ --blume-accent-foreground: oklch(15% 0 0);
635
+ --blume-action: oklch(87.87% 0.0426 272.28);
636
+ --blume-action-foreground: oklch(24.29% 0.0304 283.91);
637
+ --blume-code-background: oklch(32.4% 0.0319 281.98);
638
+ --blume-code-highlight: oklch(76.64% 0.1113 259.88 / 0.14);
639
+ --blume-code-highlight-border: oklch(76.64% 0.1113 259.88 / 0.45);
640
+ --blume-code-add: oklch(85.77% 0.1092 142.72 / 0.14);
641
+ --blume-code-add-border: oklch(85.77% 0.1092 142.72 / 0.45);
642
+ --blume-code-remove: oklch(75.56% 0.1297 2.76 / 0.14);
643
+ --blume-code-remove-border: oklch(75.56% 0.1297 2.76 / 0.45);
644
+ --blume-code-error: oklch(75.56% 0.1297 2.76 / 0.14);
645
+ --blume-code-error-border: oklch(75.56% 0.1297 2.76 / 0.45);
646
+ --blume-code-warning: oklch(91.93% 0.0704 86.53 / 0.14);
647
+ --blume-code-warning-border: oklch(91.93% 0.0704 86.53 / 0.45);
648
+ --blume-code-word: oklch(76.64% 0.1113 259.88 / 0.14);
649
+ --blume-code-word-border: oklch(76.64% 0.1113 259.88 / 0.45);
650
+ }
651
+
652
+ :root[data-gw-docs-theme="catppuccin-mocha"][data-theme="dark"][data-gw-darker] {
653
+ --blume-background: oklch(19.79% 0.0304 283.91);
654
+ --blume-foreground: oklch(87.87% 0.0426 272.28);
655
+ --blume-muted: oklch(16.78% 0.0304 283.91);
656
+ --blume-muted-foreground: oklch(75.1% 0.0396 273.93);
657
+ --blume-border: oklch(48.37% 0.032 280.15);
658
+ --blume-accent: oklch(78.71% 0.1187 304.77);
659
+ --blume-accent-foreground: oklch(15% 0 0);
660
+ --blume-action: oklch(87.87% 0.0426 272.28);
661
+ --blume-action-foreground: oklch(19.79% 0.0304 283.91);
662
+ --blume-code-background: oklch(27.9% 0.0319 281.98);
663
+ --blume-code-highlight: oklch(76.64% 0.1113 259.88 / 0.14);
664
+ --blume-code-highlight-border: oklch(76.64% 0.1113 259.88 / 0.45);
665
+ --blume-code-add: oklch(85.77% 0.1092 142.72 / 0.14);
666
+ --blume-code-add-border: oklch(85.77% 0.1092 142.72 / 0.45);
667
+ --blume-code-remove: oklch(75.56% 0.1297 2.76 / 0.14);
668
+ --blume-code-remove-border: oklch(75.56% 0.1297 2.76 / 0.45);
669
+ --blume-code-error: oklch(75.56% 0.1297 2.76 / 0.14);
670
+ --blume-code-error-border: oklch(75.56% 0.1297 2.76 / 0.45);
671
+ --blume-code-warning: oklch(91.93% 0.0704 86.53 / 0.14);
672
+ --blume-code-warning-border: oklch(91.93% 0.0704 86.53 / 0.45);
673
+ --blume-code-word: oklch(76.64% 0.1113 259.88 / 0.14);
674
+ --blume-code-word-border: oklch(76.64% 0.1113 259.88 / 0.45);
675
+ }
676
+
677
+ :root[data-gw-docs-theme="github"] {
678
+ --blume-radius: 10px;
679
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
680
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
681
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
682
+ --blume-background: oklch(100% 0 0);
683
+ --blume-foreground: oklch(25.42% 0.0111 254.04);
684
+ --blume-muted: oklch(98.91% 0 0);
685
+ --blume-muted-foreground: oklch(53.1% 0.0172 251.29);
686
+ --blume-border: oklch(87.58% 0.0123 247.97);
687
+ --blume-accent: oklch(53.99% 0.1906 257.48);
688
+ --blume-accent-foreground: oklch(100% 0 0);
689
+ --blume-action: oklch(25.42% 0.0111 254.04);
690
+ --blume-action-foreground: oklch(100% 0 0);
691
+ --blume-code-background: oklch(97.82% 0.0034 247.86);
692
+ --blume-code-highlight: oklch(53.99% 0.1906 257.48 / 0.14);
693
+ --blume-code-highlight-border: oklch(53.99% 0.1906 257.48 / 0.45);
694
+ --blume-code-add: oklch(52.44% 0.1401 148.04 / 0.14);
695
+ --blume-code-add-border: oklch(52.44% 0.1401 148.04 / 0.45);
696
+ --blume-code-remove: oklch(55.17% 0.2051 24.53 / 0.14);
697
+ --blume-code-remove-border: oklch(55.17% 0.2051 24.53 / 0.45);
698
+ --blume-code-error: oklch(55.17% 0.2051 24.53 / 0.14);
699
+ --blume-code-error-border: oklch(55.17% 0.2051 24.53 / 0.45);
700
+ --blume-code-warning: oklch(55.42% 0.1169 75.01 / 0.14);
701
+ --blume-code-warning-border: oklch(55.42% 0.1169 75.01 / 0.45);
702
+ --blume-code-word: oklch(53.99% 0.1906 257.48 / 0.14);
703
+ --blume-code-word-border: oklch(53.99% 0.1906 257.48 / 0.45);
704
+ }
705
+
706
+ :root[data-gw-docs-theme="github"][data-theme="dark"] {
707
+ --blume-background: oklch(17.63% 0.014 258.36);
708
+ --blume-foreground: oklch(94.25% 0.0111 243.66);
709
+ --blume-muted: oklch(14.01% 0.014 258.36);
710
+ --blume-muted-foreground: oklch(61.37% 0.0191 256.32);
711
+ --blume-border: oklch(33% 0.0149 252.31);
712
+ --blume-accent: oklch(61.82% 0.1935 258.33);
713
+ --blume-accent-foreground: oklch(15% 0 0);
714
+ --blume-action: oklch(94.25% 0.0111 243.66);
715
+ --blume-action-foreground: oklch(17.63% 0.014 258.36);
716
+ --blume-code-background: oklch(22.02% 0.0157 256.82);
717
+ --blume-code-highlight: oklch(61.82% 0.1935 258.33 / 0.14);
718
+ --blume-code-highlight-border: oklch(61.82% 0.1935 258.33 / 0.45);
719
+ --blume-code-add: oklch(69.51% 0.1809 145.62 / 0.14);
720
+ --blume-code-add-border: oklch(69.51% 0.1809 145.62 / 0.45);
721
+ --blume-code-remove: oklch(66.51% 0.2046 26.96 / 0.14);
722
+ --blume-code-remove-border: oklch(66.51% 0.2046 26.96 / 0.45);
723
+ --blume-code-error: oklch(66.51% 0.2046 26.96 / 0.14);
724
+ --blume-code-error-border: oklch(66.51% 0.2046 26.96 / 0.45);
725
+ --blume-code-warning: oklch(71.96% 0.1401 79.91 / 0.14);
726
+ --blume-code-warning-border: oklch(71.96% 0.1401 79.91 / 0.45);
727
+ --blume-code-word: oklch(61.82% 0.1935 258.33 / 0.14);
728
+ --blume-code-word-border: oklch(61.82% 0.1935 258.33 / 0.45);
729
+ }
730
+
731
+ :root[data-gw-docs-theme="github"][data-theme="dark"][data-gw-darker] {
732
+ --blume-background: oklch(13.13% 0.014 258.36);
733
+ --blume-foreground: oklch(94.25% 0.0111 243.66);
734
+ --blume-muted: oklch(9.51% 0.014 258.36);
735
+ --blume-muted-foreground: oklch(61.37% 0.0191 256.32);
736
+ --blume-border: oklch(41% 0.0149 252.31);
737
+ --blume-accent: oklch(61.82% 0.1935 258.33);
738
+ --blume-accent-foreground: oklch(15% 0 0);
739
+ --blume-action: oklch(94.25% 0.0111 243.66);
740
+ --blume-action-foreground: oklch(13.13% 0.014 258.36);
741
+ --blume-code-background: oklch(17.52% 0.0157 256.82);
742
+ --blume-code-highlight: oklch(61.82% 0.1935 258.33 / 0.14);
743
+ --blume-code-highlight-border: oklch(61.82% 0.1935 258.33 / 0.45);
744
+ --blume-code-add: oklch(69.51% 0.1809 145.62 / 0.14);
745
+ --blume-code-add-border: oklch(69.51% 0.1809 145.62 / 0.45);
746
+ --blume-code-remove: oklch(66.51% 0.2046 26.96 / 0.14);
747
+ --blume-code-remove-border: oklch(66.51% 0.2046 26.96 / 0.45);
748
+ --blume-code-error: oklch(66.51% 0.2046 26.96 / 0.14);
749
+ --blume-code-error-border: oklch(66.51% 0.2046 26.96 / 0.45);
750
+ --blume-code-warning: oklch(71.96% 0.1401 79.91 / 0.14);
751
+ --blume-code-warning-border: oklch(71.96% 0.1401 79.91 / 0.45);
752
+ --blume-code-word: oklch(61.82% 0.1935 258.33 / 0.14);
753
+ --blume-code-word-border: oklch(61.82% 0.1935 258.33 / 0.45);
754
+ }
755
+
756
+ :root[data-gw-docs-theme="github-dimmed"] {
757
+ --blume-radius: 10px;
758
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
759
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
760
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
761
+ --blume-background: oklch(100% 0 0);
762
+ --blume-foreground: oklch(25.42% 0.0111 254.04);
763
+ --blume-muted: oklch(98.91% 0 0);
764
+ --blume-muted-foreground: oklch(53.1% 0.0172 251.29);
765
+ --blume-border: oklch(87.58% 0.0123 247.97);
766
+ --blume-accent: oklch(53.99% 0.1906 257.48);
767
+ --blume-accent-foreground: oklch(100% 0 0);
768
+ --blume-action: oklch(25.42% 0.0111 254.04);
769
+ --blume-action-foreground: oklch(100% 0 0);
770
+ --blume-code-background: oklch(97.82% 0.0034 247.86);
771
+ --blume-code-highlight: oklch(53.99% 0.1906 257.48 / 0.14);
772
+ --blume-code-highlight-border: oklch(53.99% 0.1906 257.48 / 0.45);
773
+ --blume-code-add: oklch(52.44% 0.1401 148.04 / 0.14);
774
+ --blume-code-add-border: oklch(52.44% 0.1401 148.04 / 0.45);
775
+ --blume-code-remove: oklch(55.17% 0.2051 24.53 / 0.14);
776
+ --blume-code-remove-border: oklch(55.17% 0.2051 24.53 / 0.45);
777
+ --blume-code-error: oklch(55.17% 0.2051 24.53 / 0.14);
778
+ --blume-code-error-border: oklch(55.17% 0.2051 24.53 / 0.45);
779
+ --blume-code-warning: oklch(55.42% 0.1169 75.01 / 0.14);
780
+ --blume-code-warning-border: oklch(55.42% 0.1169 75.01 / 0.45);
781
+ --blume-code-word: oklch(53.99% 0.1906 257.48 / 0.14);
782
+ --blume-code-word-border: oklch(53.99% 0.1906 257.48 / 0.45);
783
+ }
784
+
785
+ :root[data-gw-docs-theme="github-dimmed"][data-theme="dark"] {
786
+ --blume-background: oklch(27.08% 0.0149 256.8);
787
+ --blume-foreground: oklch(78.29% 0.0235 248.13);
788
+ --blume-muted: oklch(25.83% 0.0149 256.8);
789
+ --blume-muted-foreground: oklch(60.38% 0.025 248.24);
790
+ --blume-border: oklch(41.32% 0.0197 254.06);
791
+ --blume-accent: oklch(68.41% 0.152 255.12);
792
+ --blume-accent-foreground: oklch(15% 0 0);
793
+ --blume-action: oklch(78.29% 0.0235 248.13);
794
+ --blume-action-foreground: oklch(27.08% 0.0149 256.8);
795
+ --blume-code-background: oklch(31.86% 0.0165 255.64);
796
+ --blume-code-highlight: oklch(68.41% 0.152 255.12 / 0.14);
797
+ --blume-code-highlight-border: oklch(68.41% 0.152 255.12 / 0.45);
798
+ --blume-code-add: oklch(66.87% 0.1421 144.47 / 0.14);
799
+ --blume-code-add-border: oklch(66.87% 0.1421 144.47 / 0.45);
800
+ --blume-code-remove: oklch(63.74% 0.1829 26.71 / 0.14);
801
+ --blume-code-remove-border: oklch(63.74% 0.1829 26.71 / 0.45);
802
+ --blume-code-error: oklch(63.74% 0.1829 26.71 / 0.14);
803
+ --blume-code-error-border: oklch(63.74% 0.1829 26.71 / 0.45);
804
+ --blume-code-warning: oklch(68.88% 0.1313 79.12 / 0.14);
805
+ --blume-code-warning-border: oklch(68.88% 0.1313 79.12 / 0.45);
806
+ --blume-code-word: oklch(68.41% 0.152 255.12 / 0.14);
807
+ --blume-code-word-border: oklch(68.41% 0.152 255.12 / 0.45);
808
+ }
809
+
810
+ :root[data-gw-docs-theme="github-dimmed"][data-theme="dark"][data-gw-darker] {
811
+ --blume-background: oklch(22.58% 0.0149 256.8);
812
+ --blume-foreground: oklch(78.29% 0.0235 248.13);
813
+ --blume-muted: oklch(21.33% 0.0149 256.8);
814
+ --blume-muted-foreground: oklch(60.38% 0.025 248.24);
815
+ --blume-border: oklch(49.32% 0.0197 254.06);
816
+ --blume-accent: oklch(68.41% 0.152 255.12);
817
+ --blume-accent-foreground: oklch(15% 0 0);
818
+ --blume-action: oklch(78.29% 0.0235 248.13);
819
+ --blume-action-foreground: oklch(22.58% 0.0149 256.8);
820
+ --blume-code-background: oklch(27.36% 0.0165 255.64);
821
+ --blume-code-highlight: oklch(68.41% 0.152 255.12 / 0.14);
822
+ --blume-code-highlight-border: oklch(68.41% 0.152 255.12 / 0.45);
823
+ --blume-code-add: oklch(66.87% 0.1421 144.47 / 0.14);
824
+ --blume-code-add-border: oklch(66.87% 0.1421 144.47 / 0.45);
825
+ --blume-code-remove: oklch(63.74% 0.1829 26.71 / 0.14);
826
+ --blume-code-remove-border: oklch(63.74% 0.1829 26.71 / 0.45);
827
+ --blume-code-error: oklch(63.74% 0.1829 26.71 / 0.14);
828
+ --blume-code-error-border: oklch(63.74% 0.1829 26.71 / 0.45);
829
+ --blume-code-warning: oklch(68.88% 0.1313 79.12 / 0.14);
830
+ --blume-code-warning-border: oklch(68.88% 0.1313 79.12 / 0.45);
831
+ --blume-code-word: oklch(68.41% 0.152 255.12 / 0.14);
832
+ --blume-code-word-border: oklch(68.41% 0.152 255.12 / 0.45);
833
+ }
834
+
835
+ :root[data-gw-docs-theme="github-high-contrast"] {
836
+ --blume-radius: 10px;
837
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
838
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
839
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
840
+ --blume-background: oklch(100% 0 0);
841
+ --blume-foreground: oklch(17.67% 0.0114 260.64);
842
+ --blume-muted: oklch(100% 0 0);
843
+ --blume-muted-foreground: oklch(17.67% 0.0114 260.64);
844
+ --blume-border: oklch(26.25% 0.015 256.8);
845
+ --blume-accent: oklch(44.1% 0.1809 260.43);
846
+ --blume-accent-foreground: oklch(100% 0 0);
847
+ --blume-action: oklch(17.67% 0.0114 260.64);
848
+ --blume-action-foreground: oklch(100% 0 0);
849
+ --blume-code-background: oklch(100% 0 0);
850
+ --blume-code-highlight: oklch(44.1% 0.1809 260.43 / 0.14);
851
+ --blume-code-highlight-border: oklch(44.1% 0.1809 260.43 / 0.45);
852
+ --blume-code-add: oklch(41.78% 0.1209 147.16 / 0.14);
853
+ --blume-code-add-border: oklch(41.78% 0.1209 147.16 / 0.45);
854
+ --blume-code-remove: oklch(45.17% 0.1733 24.29 / 0.14);
855
+ --blume-code-remove-border: oklch(45.17% 0.1733 24.29 / 0.45);
856
+ --blume-code-error: oklch(45.17% 0.1733 24.29 / 0.14);
857
+ --blume-code-error-border: oklch(45.17% 0.1733 24.29 / 0.45);
858
+ --blume-code-warning: oklch(43.6% 0.0963 66.95 / 0.14);
859
+ --blume-code-warning-border: oklch(43.6% 0.0963 66.95 / 0.45);
860
+ --blume-code-word: oklch(44.1% 0.1809 260.43 / 0.14);
861
+ --blume-code-word-border: oklch(44.1% 0.1809 260.43 / 0.45);
862
+ }
863
+
864
+ :root[data-gw-docs-theme="github-high-contrast"][data-theme="dark"] {
865
+ --blume-background: oklch(15.4% 0.0092 264.28);
866
+ --blume-foreground: oklch(96.27% 0.0051 247.88);
867
+ --blume-muted: oklch(12.9% 0.0092 264.28);
868
+ --blume-muted-foreground: oklch(96.27% 0.0051 247.88);
869
+ --blume-border: oklch(60.4% 0.0205 258.37);
870
+ --blume-accent: oklch(76.25% 0.1261 250.42);
871
+ --blume-accent-foreground: oklch(15% 0 0);
872
+ --blume-action: oklch(96.27% 0.0051 247.88);
873
+ --blume-action-foreground: oklch(15.4% 0.0092 264.28);
874
+ --blume-code-background: oklch(28.85% 0.0157 264.29);
875
+ --blume-code-highlight: oklch(76.25% 0.1261 250.42 / 0.14);
876
+ --blume-code-highlight-border: oklch(76.25% 0.1261 250.42 / 0.45);
877
+ --blume-code-add: oklch(74.22% 0.2143 146.17 / 0.14);
878
+ --blume-code-add-border: oklch(74.22% 0.2143 146.17 / 0.45);
879
+ --blume-code-remove: oklch(71% 0.1825 23.29 / 0.14);
880
+ --blume-code-remove-border: oklch(71% 0.1825 23.29 / 0.45);
881
+ --blume-code-error: oklch(71% 0.1825 23.29 / 0.14);
882
+ --blume-code-error-border: oklch(71% 0.1825 23.29 / 0.45);
883
+ --blume-code-warning: oklch(81.05% 0.1541 83.76 / 0.14);
884
+ --blume-code-warning-border: oklch(81.05% 0.1541 83.76 / 0.45);
885
+ --blume-code-word: oklch(76.25% 0.1261 250.42 / 0.14);
886
+ --blume-code-word-border: oklch(76.25% 0.1261 250.42 / 0.45);
887
+ }
888
+
889
+ :root[data-gw-docs-theme="github-high-contrast"][data-theme="dark"][data-gw-darker] {
890
+ --blume-background: oklch(10.9% 0.0092 264.28);
891
+ --blume-foreground: oklch(96.27% 0.0051 247.88);
892
+ --blume-muted: oklch(8.4% 0.0092 264.28);
893
+ --blume-muted-foreground: oklch(96.27% 0.0051 247.88);
894
+ --blume-border: oklch(68.4% 0.0205 258.37);
895
+ --blume-accent: oklch(76.25% 0.1261 250.42);
896
+ --blume-accent-foreground: oklch(15% 0 0);
897
+ --blume-action: oklch(96.27% 0.0051 247.88);
898
+ --blume-action-foreground: oklch(10.9% 0.0092 264.28);
899
+ --blume-code-background: oklch(24.35% 0.0157 264.29);
900
+ --blume-code-highlight: oklch(76.25% 0.1261 250.42 / 0.14);
901
+ --blume-code-highlight-border: oklch(76.25% 0.1261 250.42 / 0.45);
902
+ --blume-code-add: oklch(74.22% 0.2143 146.17 / 0.14);
903
+ --blume-code-add-border: oklch(74.22% 0.2143 146.17 / 0.45);
904
+ --blume-code-remove: oklch(71% 0.1825 23.29 / 0.14);
905
+ --blume-code-remove-border: oklch(71% 0.1825 23.29 / 0.45);
906
+ --blume-code-error: oklch(71% 0.1825 23.29 / 0.14);
907
+ --blume-code-error-border: oklch(71% 0.1825 23.29 / 0.45);
908
+ --blume-code-warning: oklch(81.05% 0.1541 83.76 / 0.14);
909
+ --blume-code-warning-border: oklch(81.05% 0.1541 83.76 / 0.45);
910
+ --blume-code-word: oklch(76.25% 0.1261 250.42 / 0.14);
911
+ --blume-code-word-border: oklch(76.25% 0.1261 250.42 / 0.45);
912
+ }
913
+
914
+ :root[data-gw-docs-theme="tokyo-night"] {
915
+ --blume-radius: 10px;
916
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
917
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
918
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
919
+ --blume-background: oklch(91.35% 0.0068 277.16);
920
+ --blume-foreground: oklch(51.21% 0.1563 264.1);
921
+ --blume-muted: oklch(89.34% 0.0068 277.16);
922
+ --blume-muted-foreground: oklch(56.53% 0.0983 271.32);
923
+ --blume-border: oklch(83.52% 0.0254 275.85);
924
+ --blume-accent: oklch(59.99% 0.1804 257.53);
925
+ --blume-accent-foreground: oklch(100% 0 0);
926
+ --blume-action: oklch(51.21% 0.1563 264.1);
927
+ --blume-action-foreground: oklch(91.35% 0.0068 277.16);
928
+ --blume-code-background: oklch(93.52% 0.0054 286.3);
929
+ --blume-code-highlight: oklch(59.99% 0.1804 257.53 / 0.14);
930
+ --blume-code-highlight-border: oklch(59.99% 0.1804 257.53 / 0.45);
931
+ --blume-code-add: oklch(52.49% 0.0929 130.28 / 0.14);
932
+ --blume-code-add-border: oklch(52.49% 0.0929 130.28 / 0.45);
933
+ --blume-code-remove: oklch(63.37% 0.2326 11.57 / 0.14);
934
+ --blume-code-remove-border: oklch(63.37% 0.2326 11.57 / 0.45);
935
+ --blume-code-error: oklch(63.37% 0.2326 11.57 / 0.14);
936
+ --blume-code-error-border: oklch(63.37% 0.2326 11.57 / 0.45);
937
+ --blume-code-warning: oklch(55.27% 0.0749 75.19 / 0.14);
938
+ --blume-code-warning-border: oklch(55.27% 0.0749 75.19 / 0.45);
939
+ --blume-code-word: oklch(59.99% 0.1804 257.53 / 0.14);
940
+ --blume-code-word-border: oklch(59.99% 0.1804 257.53 / 0.45);
941
+ }
942
+
943
+ :root[data-gw-docs-theme="tokyo-night"][data-theme="dark"] {
944
+ --blume-background: oklch(22.63% 0.0214 280.49);
945
+ --blume-foreground: oklch(84.56% 0.0611 274.76);
946
+ --blume-muted: oklch(21.51% 0.0214 280.49);
947
+ --blume-muted-foreground: oklch(76.66% 0.0537 275.49);
948
+ --blume-border: oklch(38.67% 0.0537 273.88);
949
+ --blume-accent: oklch(71.9% 0.1322 264.2);
950
+ --blume-accent-foreground: oklch(15% 0 0);
951
+ --blume-action: oklch(84.56% 0.0611 274.76);
952
+ --blume-action-foreground: oklch(22.63% 0.0214 280.49);
953
+ --blume-code-background: oklch(30.56% 0.0369 273.23);
954
+ --blume-code-highlight: oklch(71.9% 0.1322 264.2 / 0.14);
955
+ --blume-code-highlight-border: oklch(71.9% 0.1322 264.2 / 0.45);
956
+ --blume-code-add: oklch(79.53% 0.1395 130.14 / 0.14);
957
+ --blume-code-add-border: oklch(79.53% 0.1395 130.14 / 0.45);
958
+ --blume-code-remove: oklch(72.27% 0.1589 10.28 / 0.14);
959
+ --blume-code-remove-border: oklch(72.27% 0.1589 10.28 / 0.45);
960
+ --blume-code-error: oklch(72.27% 0.1589 10.28 / 0.14);
961
+ --blume-code-error-border: oklch(72.27% 0.1589 10.28 / 0.45);
962
+ --blume-code-warning: oklch(78.39% 0.1057 75.43 / 0.14);
963
+ --blume-code-warning-border: oklch(78.39% 0.1057 75.43 / 0.45);
964
+ --blume-code-word: oklch(71.9% 0.1322 264.2 / 0.14);
965
+ --blume-code-word-border: oklch(71.9% 0.1322 264.2 / 0.45);
966
+ }
967
+
968
+ :root[data-gw-docs-theme="tokyo-night"][data-theme="dark"][data-gw-darker] {
969
+ --blume-background: oklch(18.13% 0.0214 280.49);
970
+ --blume-foreground: oklch(84.56% 0.0611 274.76);
971
+ --blume-muted: oklch(17.01% 0.0214 280.49);
972
+ --blume-muted-foreground: oklch(76.66% 0.0537 275.49);
973
+ --blume-border: oklch(46.67% 0.0537 273.88);
974
+ --blume-accent: oklch(71.9% 0.1322 264.2);
975
+ --blume-accent-foreground: oklch(15% 0 0);
976
+ --blume-action: oklch(84.56% 0.0611 274.76);
977
+ --blume-action-foreground: oklch(18.13% 0.0214 280.49);
978
+ --blume-code-background: oklch(26.06% 0.0369 273.23);
979
+ --blume-code-highlight: oklch(71.9% 0.1322 264.2 / 0.14);
980
+ --blume-code-highlight-border: oklch(71.9% 0.1322 264.2 / 0.45);
981
+ --blume-code-add: oklch(79.53% 0.1395 130.14 / 0.14);
982
+ --blume-code-add-border: oklch(79.53% 0.1395 130.14 / 0.45);
983
+ --blume-code-remove: oklch(72.27% 0.1589 10.28 / 0.14);
984
+ --blume-code-remove-border: oklch(72.27% 0.1589 10.28 / 0.45);
985
+ --blume-code-error: oklch(72.27% 0.1589 10.28 / 0.14);
986
+ --blume-code-error-border: oklch(72.27% 0.1589 10.28 / 0.45);
987
+ --blume-code-warning: oklch(78.39% 0.1057 75.43 / 0.14);
988
+ --blume-code-warning-border: oklch(78.39% 0.1057 75.43 / 0.45);
989
+ --blume-code-word: oklch(71.9% 0.1322 264.2 / 0.14);
990
+ --blume-code-word-border: oklch(71.9% 0.1322 264.2 / 0.45);
991
+ }
992
+
993
+ :root[data-gw-docs-theme="tokyo-night-moon"] {
994
+ --blume-radius: 10px;
995
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
996
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
997
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
998
+ --blume-background: oklch(91.35% 0.0068 277.16);
999
+ --blume-foreground: oklch(51.21% 0.1563 264.1);
1000
+ --blume-muted: oklch(89.34% 0.0068 277.16);
1001
+ --blume-muted-foreground: oklch(56.53% 0.0983 271.32);
1002
+ --blume-border: oklch(83.52% 0.0254 275.85);
1003
+ --blume-accent: oklch(59.99% 0.1804 257.53);
1004
+ --blume-accent-foreground: oklch(100% 0 0);
1005
+ --blume-action: oklch(51.21% 0.1563 264.1);
1006
+ --blume-action-foreground: oklch(91.35% 0.0068 277.16);
1007
+ --blume-code-background: oklch(93.52% 0.0054 286.3);
1008
+ --blume-code-highlight: oklch(59.99% 0.1804 257.53 / 0.14);
1009
+ --blume-code-highlight-border: oklch(59.99% 0.1804 257.53 / 0.45);
1010
+ --blume-code-add: oklch(52.49% 0.0929 130.28 / 0.14);
1011
+ --blume-code-add-border: oklch(52.49% 0.0929 130.28 / 0.45);
1012
+ --blume-code-remove: oklch(63.37% 0.2326 11.57 / 0.14);
1013
+ --blume-code-remove-border: oklch(63.37% 0.2326 11.57 / 0.45);
1014
+ --blume-code-error: oklch(63.37% 0.2326 11.57 / 0.14);
1015
+ --blume-code-error-border: oklch(63.37% 0.2326 11.57 / 0.45);
1016
+ --blume-code-warning: oklch(55.27% 0.0749 75.19 / 0.14);
1017
+ --blume-code-warning-border: oklch(55.27% 0.0749 75.19 / 0.45);
1018
+ --blume-code-word: oklch(59.99% 0.1804 257.53 / 0.14);
1019
+ --blume-code-word-border: oklch(59.99% 0.1804 257.53 / 0.45);
1020
+ }
1021
+
1022
+ :root[data-gw-docs-theme="tokyo-night-moon"][data-theme="dark"] {
1023
+ --blume-background: oklch(26.69% 0.0337 278.96);
1024
+ --blume-foreground: oklch(86.94% 0.0486 271.21);
1025
+ --blume-muted: oklch(25.81% 0.0337 278.96);
1026
+ --blume-muted-foreground: oklch(64.63% 0.0682 275.56);
1027
+ --blume-border: oklch(38.67% 0.0537 273.88);
1028
+ --blume-accent: oklch(74.41% 0.1311 264.28);
1029
+ --blume-accent-foreground: oklch(15% 0 0);
1030
+ --blume-action: oklch(86.94% 0.0486 271.21);
1031
+ --blume-action-foreground: oklch(26.69% 0.0337 278.96);
1032
+ --blume-code-background: oklch(32.94% 0.0464 276.83);
1033
+ --blume-code-highlight: oklch(74.41% 0.1311 264.28 / 0.14);
1034
+ --blume-code-highlight-border: oklch(74.41% 0.1311 264.28 / 0.45);
1035
+ --blume-code-add: oklch(88.37% 0.1236 126.81 / 0.14);
1036
+ --blume-code-add-border: oklch(88.37% 0.1236 126.81 / 0.45);
1037
+ --blume-code-remove: oklch(72.88% 0.1683 17.8 / 0.14);
1038
+ --blume-code-remove-border: oklch(72.88% 0.1683 17.8 / 0.45);
1039
+ --blume-code-error: oklch(72.88% 0.1683 17.8 / 0.14);
1040
+ --blume-code-error-border: oklch(72.88% 0.1683 17.8 / 0.45);
1041
+ --blume-code-warning: oklch(86.33% 0.1168 75.04 / 0.14);
1042
+ --blume-code-warning-border: oklch(86.33% 0.1168 75.04 / 0.45);
1043
+ --blume-code-word: oklch(74.41% 0.1311 264.28 / 0.14);
1044
+ --blume-code-word-border: oklch(74.41% 0.1311 264.28 / 0.45);
1045
+ }
1046
+
1047
+ :root[data-gw-docs-theme="tokyo-night-moon"][data-theme="dark"][data-gw-darker] {
1048
+ --blume-background: oklch(22.19% 0.0337 278.96);
1049
+ --blume-foreground: oklch(86.94% 0.0486 271.21);
1050
+ --blume-muted: oklch(21.31% 0.0337 278.96);
1051
+ --blume-muted-foreground: oklch(64.63% 0.0682 275.56);
1052
+ --blume-border: oklch(46.67% 0.0537 273.88);
1053
+ --blume-accent: oklch(74.41% 0.1311 264.28);
1054
+ --blume-accent-foreground: oklch(15% 0 0);
1055
+ --blume-action: oklch(86.94% 0.0486 271.21);
1056
+ --blume-action-foreground: oklch(22.19% 0.0337 278.96);
1057
+ --blume-code-background: oklch(28.44% 0.0464 276.83);
1058
+ --blume-code-highlight: oklch(74.41% 0.1311 264.28 / 0.14);
1059
+ --blume-code-highlight-border: oklch(74.41% 0.1311 264.28 / 0.45);
1060
+ --blume-code-add: oklch(88.37% 0.1236 126.81 / 0.14);
1061
+ --blume-code-add-border: oklch(88.37% 0.1236 126.81 / 0.45);
1062
+ --blume-code-remove: oklch(72.88% 0.1683 17.8 / 0.14);
1063
+ --blume-code-remove-border: oklch(72.88% 0.1683 17.8 / 0.45);
1064
+ --blume-code-error: oklch(72.88% 0.1683 17.8 / 0.14);
1065
+ --blume-code-error-border: oklch(72.88% 0.1683 17.8 / 0.45);
1066
+ --blume-code-warning: oklch(86.33% 0.1168 75.04 / 0.14);
1067
+ --blume-code-warning-border: oklch(86.33% 0.1168 75.04 / 0.45);
1068
+ --blume-code-word: oklch(74.41% 0.1311 264.28 / 0.14);
1069
+ --blume-code-word-border: oklch(74.41% 0.1311 264.28 / 0.45);
1070
+ }
1071
+
1072
+ :root[data-gw-docs-theme="tokyo-night-storm"] {
1073
+ --blume-radius: 10px;
1074
+ --blume-font-body: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
1075
+ --blume-font-display: "Mona Sans Variable", "Mona Sans", system-ui, sans-serif;
1076
+ --blume-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
1077
+ --blume-background: oklch(91.35% 0.0068 277.16);
1078
+ --blume-foreground: oklch(51.21% 0.1563 264.1);
1079
+ --blume-muted: oklch(89.34% 0.0068 277.16);
1080
+ --blume-muted-foreground: oklch(56.53% 0.0983 271.32);
1081
+ --blume-border: oklch(83.52% 0.0254 275.85);
1082
+ --blume-accent: oklch(59.99% 0.1804 257.53);
1083
+ --blume-accent-foreground: oklch(100% 0 0);
1084
+ --blume-action: oklch(51.21% 0.1563 264.1);
1085
+ --blume-action-foreground: oklch(91.35% 0.0068 277.16);
1086
+ --blume-code-background: oklch(93.52% 0.0054 286.3);
1087
+ --blume-code-highlight: oklch(59.99% 0.1804 257.53 / 0.14);
1088
+ --blume-code-highlight-border: oklch(59.99% 0.1804 257.53 / 0.45);
1089
+ --blume-code-add: oklch(52.49% 0.0929 130.28 / 0.14);
1090
+ --blume-code-add-border: oklch(52.49% 0.0929 130.28 / 0.45);
1091
+ --blume-code-remove: oklch(63.37% 0.2326 11.57 / 0.14);
1092
+ --blume-code-remove-border: oklch(63.37% 0.2326 11.57 / 0.45);
1093
+ --blume-code-error: oklch(63.37% 0.2326 11.57 / 0.14);
1094
+ --blume-code-error-border: oklch(63.37% 0.2326 11.57 / 0.45);
1095
+ --blume-code-warning: oklch(55.27% 0.0749 75.19 / 0.14);
1096
+ --blume-code-warning-border: oklch(55.27% 0.0749 75.19 / 0.45);
1097
+ --blume-code-word: oklch(59.99% 0.1804 257.53 / 0.14);
1098
+ --blume-code-word-border: oklch(59.99% 0.1804 257.53 / 0.45);
1099
+ }
1100
+
1101
+ :root[data-gw-docs-theme="tokyo-night-storm"][data-theme="dark"] {
1102
+ --blume-background: oklch(28.19% 0.0355 274.75);
1103
+ --blume-foreground: oklch(84.56% 0.0611 274.76);
1104
+ --blume-muted: oklch(27.14% 0.0355 274.75);
1105
+ --blume-muted-foreground: oklch(76.66% 0.0537 275.49);
1106
+ --blume-border: oklch(38.67% 0.0537 273.88);
1107
+ --blume-accent: oklch(71.9% 0.1322 264.2);
1108
+ --blume-accent-foreground: oklch(15% 0 0);
1109
+ --blume-action: oklch(84.56% 0.0611 274.76);
1110
+ --blume-action-foreground: oklch(28.19% 0.0355 274.75);
1111
+ --blume-code-background: oklch(30.56% 0.0369 273.23);
1112
+ --blume-code-highlight: oklch(71.9% 0.1322 264.2 / 0.14);
1113
+ --blume-code-highlight-border: oklch(71.9% 0.1322 264.2 / 0.45);
1114
+ --blume-code-add: oklch(79.53% 0.1395 130.14 / 0.14);
1115
+ --blume-code-add-border: oklch(79.53% 0.1395 130.14 / 0.45);
1116
+ --blume-code-remove: oklch(72.27% 0.1589 10.28 / 0.14);
1117
+ --blume-code-remove-border: oklch(72.27% 0.1589 10.28 / 0.45);
1118
+ --blume-code-error: oklch(72.27% 0.1589 10.28 / 0.14);
1119
+ --blume-code-error-border: oklch(72.27% 0.1589 10.28 / 0.45);
1120
+ --blume-code-warning: oklch(78.39% 0.1057 75.43 / 0.14);
1121
+ --blume-code-warning-border: oklch(78.39% 0.1057 75.43 / 0.45);
1122
+ --blume-code-word: oklch(71.9% 0.1322 264.2 / 0.14);
1123
+ --blume-code-word-border: oklch(71.9% 0.1322 264.2 / 0.45);
1124
+ }
1125
+
1126
+ :root[data-gw-docs-theme="tokyo-night-storm"][data-theme="dark"][data-gw-darker] {
1127
+ --blume-background: oklch(23.69% 0.0355 274.75);
1128
+ --blume-foreground: oklch(84.56% 0.0611 274.76);
1129
+ --blume-muted: oklch(22.64% 0.0355 274.75);
1130
+ --blume-muted-foreground: oklch(76.66% 0.0537 275.49);
1131
+ --blume-border: oklch(46.67% 0.0537 273.88);
1132
+ --blume-accent: oklch(71.9% 0.1322 264.2);
1133
+ --blume-accent-foreground: oklch(15% 0 0);
1134
+ --blume-action: oklch(84.56% 0.0611 274.76);
1135
+ --blume-action-foreground: oklch(23.69% 0.0355 274.75);
1136
+ --blume-code-background: oklch(26.06% 0.0369 273.23);
1137
+ --blume-code-highlight: oklch(71.9% 0.1322 264.2 / 0.14);
1138
+ --blume-code-highlight-border: oklch(71.9% 0.1322 264.2 / 0.45);
1139
+ --blume-code-add: oklch(79.53% 0.1395 130.14 / 0.14);
1140
+ --blume-code-add-border: oklch(79.53% 0.1395 130.14 / 0.45);
1141
+ --blume-code-remove: oklch(72.27% 0.1589 10.28 / 0.14);
1142
+ --blume-code-remove-border: oklch(72.27% 0.1589 10.28 / 0.45);
1143
+ --blume-code-error: oklch(72.27% 0.1589 10.28 / 0.14);
1144
+ --blume-code-error-border: oklch(72.27% 0.1589 10.28 / 0.45);
1145
+ --blume-code-warning: oklch(78.39% 0.1057 75.43 / 0.14);
1146
+ --blume-code-warning-border: oklch(78.39% 0.1057 75.43 / 0.45);
1147
+ --blume-code-word: oklch(71.9% 0.1322 264.2 / 0.14);
1148
+ --blume-code-word-border: oklch(71.9% 0.1322 264.2 / 0.45);
1149
+ }