@timmo001/docs-kit 0.9.40 → 0.10.1

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.
package/README.md CHANGED
@@ -109,24 +109,37 @@ 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. From seven themes the select has a search field, which also
126
+ finds themes by family, or by `light` or `dark`.
127
+
119
128
  ```astro
120
129
  ---
130
+ import {
131
+ coreThemeChoices,
132
+ optionalThemeChoices,
133
+ } from "@timmo001/groundwork-tokens/choices";
121
134
  import HeaderSearch from "@timmo001/docs-kit/blume/header-search.astro";
122
135
 
123
136
  const themes = [
124
- { id: "base", name: "Base" },
125
- { id: "bridge", name: "Bridge" },
137
+ ...coreThemeChoices.filter((theme) => theme.id === "bridge"),
138
+ ...optionalThemeChoices,
126
139
  ];
127
140
  ---
128
141
 
129
- <HeaderSearch {...Astro.props} themes={themes} defaultTheme="base" />
142
+ <HeaderSearch {...Astro.props} themes={themes} defaultTheme="bridge" />
130
143
  ```
131
144
 
132
145
  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.1",
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.1",
43
+ "@timmo001/groundwork-ui": "0.10.1",
44
44
  "sharp": "0.35.5"
45
45
  },
46
46
  "peerDependencies": {
@@ -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
@@ -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 && (
@@ -79,8 +118,16 @@ const modes = [
79
118
  data-gw-theme-select
80
119
  label="Theme"
81
120
  inline-label
82
- search="never"
83
- options={JSON.stringify(themes.map((theme) => ({ value: theme.id, label: theme.name })))}
121
+ options={JSON.stringify(
122
+ themes.map((theme) => ({
123
+ value: theme.id,
124
+ label: theme.name,
125
+ // Headings only once there's more than one group
126
+ group: grouped ? (theme.family ?? group) : undefined,
127
+ // So a search for light or dark finds the themes that have it
128
+ keywords: theme.mode === undefined ? ["light", "dark"] : [theme.mode],
129
+ })),
130
+ )}
84
131
  />
85
132
  )
86
133
  }
@@ -88,6 +135,7 @@ const modes = [
88
135
  data-gw-mode-select
89
136
  label="Color mode"
90
137
  labels="hide"
138
+ data-modes={JSON.stringify(modes)}
91
139
  options={JSON.stringify(modes)}></gw-segmented>
92
140
  </div>
93
141
 
@@ -113,12 +161,25 @@ const modes = [
113
161
  ? "darker"
114
162
  : "dark";
115
163
 
164
+ type Scheme = "light" | "dark";
165
+
166
+ /** The one scheme `theme` covers, from the picker's `data-only`, if it has one. */
167
+ const onlyFor = (picker: HTMLElement, theme: string): Scheme | undefined => {
168
+ const only: Record<string, Scheme> = JSON.parse(picker.dataset.only ?? "{}");
169
+
170
+ return only[theme];
171
+ };
172
+
173
+ const allowed = (scheme: Scheme | undefined, mode: string) =>
174
+ scheme === undefined || (scheme === "light" ? mode === "light" : mode !== "light");
175
+
116
176
  const sync = () => {
117
177
  for (const picker of document.querySelectorAll("div[data-gw-theme-picker]")) {
118
178
  if (!(picker instanceof HTMLElement)) continue;
119
179
 
120
180
  const theme = root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "";
121
181
  const mode = currentMode();
182
+ const scheme = onlyFor(picker, theme);
122
183
 
123
184
  // The controls are Groundwork components, so the picker carries the
124
185
  // page's theme and mode for them to follow
@@ -126,8 +187,23 @@ const modes = [
126
187
  picker.dataset.gwMode = mode;
127
188
 
128
189
  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;
190
+ if (control instanceof GwSegmented) {
191
+ const modes: { value: string; label: string; icon: string }[] = JSON.parse(
192
+ control.dataset.modes ?? "[]",
193
+ );
194
+
195
+ // The modes the theme doesn't come in show, but can't be picked
196
+ control.options = modes.map((option) =>
197
+ allowed(scheme, option.value)
198
+ ? option
199
+ : {
200
+ ...option,
201
+ disabled: true,
202
+ hint: `${option.label} isn't available: this theme is ${scheme} only`,
203
+ },
204
+ );
205
+ control.value = mode;
206
+ } else if (control instanceof GwSelect) control.value = theme;
131
207
  }
132
208
  }
133
209
  };
@@ -146,9 +222,21 @@ const modes = [
146
222
  else document.startViewTransition(change).ready.catch(() => undefined);
147
223
  };
148
224
 
225
+ const picker = target.closest("[data-gw-theme-picker]");
226
+
227
+ if (!(picker instanceof HTMLElement)) return;
228
+
149
229
  if (target.matches("[data-gw-mode-select]")) {
150
230
  const dark = target.value !== "light";
151
231
  const value = target.value;
232
+ const theme = root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "";
233
+
234
+ // A mode the theme doesn't come in is disabled, so this only guards
235
+ if (!allowed(onlyFor(picker, theme), value)) {
236
+ sync();
237
+
238
+ return;
239
+ }
152
240
 
153
241
  transition(() => {
154
242
  root.dataset.theme = dark ? "dark" : "light";
@@ -161,17 +249,46 @@ const modes = [
161
249
 
162
250
  if (target.matches("[data-gw-theme-select]")) {
163
251
  const value = target.value;
252
+ const scheme = onlyFor(picker, value);
164
253
 
254
+ // A theme with one scheme moves the page into it
165
255
  transition(() => {
166
256
  root.dataset.gwDocsTheme = value;
257
+
258
+ if (scheme !== undefined) {
259
+ root.dataset.theme = scheme;
260
+
261
+ if (scheme === "light") root.removeAttribute("data-gw-darker");
262
+ }
167
263
  });
168
264
 
169
265
  save("gw-docs-theme", value);
266
+
267
+ if (scheme !== undefined) {
268
+ save("blume-theme", scheme);
269
+
270
+ if (scheme === "light") save("gw-darker", null);
271
+ }
170
272
  }
171
273
  });
172
274
 
173
- // Blume's toggle flips data-theme; going light ends Darker.
275
+ // Blume's toggle flips data-theme; going light ends Darker, and a theme
276
+ // with one scheme flips it back.
174
277
  new MutationObserver(() => {
278
+ const picker = document.querySelector("div[data-gw-theme-picker]");
279
+
280
+ const scheme =
281
+ picker instanceof HTMLElement
282
+ ? onlyFor(picker, root.dataset.gwDocsTheme ?? picker.dataset.defaultTheme ?? "")
283
+ : undefined;
284
+
285
+ if (scheme !== undefined && root.dataset.theme !== scheme) {
286
+ root.dataset.theme = scheme;
287
+ save("blume-theme", scheme);
288
+
289
+ return;
290
+ }
291
+
175
292
  if (root.dataset.theme !== "dark" && root.hasAttribute("data-gw-darker")) {
176
293
  root.removeAttribute("data-gw-darker");
177
294
  save("gw-darker", null);
@@ -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
+ }