starlight-theme-celestia 0.2.2 → 0.2.4

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 (6) hide show
  1. package/lib/tailwind.gen.css +5 -11
  2. package/lib/theme.css +64 -57
  3. package/package.json +5 -4
  4. package/src/index.test.ts +11 -0
  5. package/src/index.ts +1 -1
  6. package/src/shiki-transformer-container.ts +25 -0
package/lib/tailwind.gen.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -244,12 +244,6 @@
244
244
  .inset-0 {
245
245
  inset: calc(var(--spacing) * 0);
246
246
  }
247
- .start {
248
- inset-inline-start: var(--spacing);
249
- }
250
- .end {
251
- inset-inline-end: var(--spacing);
252
- }
253
247
  .top-\(--sl-nav-height\) {
254
248
  top: var(--sl-nav-height);
255
249
  }
@@ -365,6 +359,10 @@
365
359
  .transform {
366
360
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
367
361
  }
362
+ .celestia-scroll-container {
363
+ scrollbar-width: thin;
364
+ scrollbar-color: var(--sl-color-gray-5) transparent;
365
+ }
368
366
  .flex-col {
369
367
  flex-direction: column;
370
368
  }
@@ -594,10 +592,6 @@
594
592
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
595
593
  transition-duration: var(--tw-duration, var(--default-transition-duration));
596
594
  }
597
- .celestia-scroll-container {
598
- scrollbar-width: thin;
599
- scrollbar-color: var(--sl-color-gray-5) transparent;
600
- }
601
595
  .group-hover\:-translate-x-1 {
602
596
  &:is(:where(.group):hover *) {
603
597
  @media (hover: hover) {
package/lib/theme.css CHANGED
@@ -8,79 +8,86 @@
8
8
  -webkit-text-size-adjust: 100%;
9
9
  }
10
10
 
11
+ /*
12
+ * Tailwind v4 default OKLCH values are inlined as fallbacks below. They keep
13
+ * the theme working when Tailwind isn't loaded (e.g. consumers who use
14
+ * `stylingSystem: "tailwind"` but don't import `tailwindcss` themselves).
15
+ * If the user's Tailwind setup defines `--color-*`, those win over the fallback.
16
+ */
17
+
11
18
  /* Dark mode Starlight theme variables (default). */
12
19
  :root {
13
20
  --sl-color-white: white;
14
- --sl-color-gray-1: var(--color-gray-200);
15
- --sl-color-gray-2: var(--color-gray-300);
16
- --sl-color-gray-3: var(--color-gray-400);
17
- --sl-color-gray-4: var(--color-gray-600);
18
- --sl-color-gray-5: var(--color-gray-700);
19
- --sl-color-gray-6: var(--color-gray-800);
20
- --sl-color-black: var(--color-gray-950);
21
-
22
- --sl-color-bg-inline-code: var(--color-gray-800);
23
- --sl-color-border-inline-code: var(--color-gray-700);
24
- --sl-color-bg-nav: color-mix(in oklch, var(--color-gray-950) 50%, transparent);
25
-
26
- --sl-color-orange-low: var(--color-amber-950);
27
- --sl-color-orange: var(--color-amber-900);
28
- --sl-color-orange-high: var(--color-amber-200);
29
-
30
- --sl-color-green-low: var(--color-green-950);
31
- --sl-color-green: var(--color-green-900);
32
- --sl-color-green-high: var(--color-green-200);
33
-
34
- --sl-color-blue-low: var(--color-blue-950);
35
- --sl-color-blue: var(--color-blue-900);
36
- --sl-color-blue-high: var(--color-blue-200);
37
-
38
- --sl-color-purple-low: var(--color-purple-950);
39
- --sl-color-purple: var(--color-purple-900);
40
- --sl-color-purple-high: var(--color-purple-200);
41
-
42
- --sl-color-red-low: var(--color-red-950);
43
- --sl-color-red: var(--color-red-900);
44
- --sl-color-red-high: var(--color-red-200);
21
+ --sl-color-gray-1: var(--color-gray-200, oklch(92.8% 0.006 264.531));
22
+ --sl-color-gray-2: var(--color-gray-300, oklch(87.2% 0.01 258.338));
23
+ --sl-color-gray-3: var(--color-gray-400, oklch(70.7% 0.022 261.325));
24
+ --sl-color-gray-4: var(--color-gray-600, oklch(44.6% 0.03 256.802));
25
+ --sl-color-gray-5: var(--color-gray-700, oklch(37.3% 0.034 259.733));
26
+ --sl-color-gray-6: var(--color-gray-800, oklch(27.8% 0.033 256.848));
27
+ --sl-color-black: var(--color-gray-950, oklch(13% 0.028 261.692));
28
+
29
+ --sl-color-bg-inline-code: var(--color-gray-800, oklch(27.8% 0.033 256.848));
30
+ --sl-color-border-inline-code: var(--color-gray-700, oklch(37.3% 0.034 259.733));
31
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-gray-950, oklch(13% 0.028 261.692)) 50%, transparent);
32
+
33
+ --sl-color-orange-low: var(--color-amber-950, oklch(27.9% 0.077 45.635));
34
+ --sl-color-orange: var(--color-amber-900, oklch(41.4% 0.112 45.904));
35
+ --sl-color-orange-high: var(--color-amber-200, oklch(92.4% 0.12 95.746));
36
+
37
+ --sl-color-green-low: var(--color-green-950, oklch(26.6% 0.065 152.934));
38
+ --sl-color-green: var(--color-green-900, oklch(39.3% 0.095 152.535));
39
+ --sl-color-green-high: var(--color-green-200, oklch(92.5% 0.084 155.995));
40
+
41
+ --sl-color-blue-low: var(--color-blue-950, oklch(28.2% 0.091 267.935));
42
+ --sl-color-blue: var(--color-blue-900, oklch(37.9% 0.146 265.522));
43
+ --sl-color-blue-high: var(--color-blue-200, oklch(88.2% 0.059 254.128));
44
+
45
+ --sl-color-purple-low: var(--color-purple-950, oklch(29.1% 0.149 302.717));
46
+ --sl-color-purple: var(--color-purple-900, oklch(38.1% 0.176 304.987));
47
+ --sl-color-purple-high: var(--color-purple-200, oklch(90.2% 0.063 306.703));
48
+
49
+ --sl-color-red-low: var(--color-red-950, oklch(25.8% 0.092 26.042));
50
+ --sl-color-red: var(--color-red-900, oklch(39.6% 0.141 25.723));
51
+ --sl-color-red-high: var(--color-red-200, oklch(88.5% 0.062 18.334));
45
52
 
46
53
  --nano-color-highlight: var(--sl-color-gray-5);
47
54
  }
48
55
 
49
56
  /* Light mode Starlight theme variables */
50
57
  :root[data-theme="light"] {
51
- --sl-color-white: var(--color-gray-900);
52
- --sl-color-gray-1: var(--color-gray-800);
53
- --sl-color-gray-2: var(--color-gray-700);
54
- --sl-color-gray-3: var(--color-gray-500);
55
- --sl-color-gray-4: var(--color-gray-400);
56
- --sl-color-gray-5: var(--color-gray-300);
57
- --sl-color-gray-6: var(--color-gray-200);
58
- --sl-color-gray-7: var(--color-gray-100);
58
+ --sl-color-white: var(--color-gray-900, oklch(21% 0.034 264.665));
59
+ --sl-color-gray-1: var(--color-gray-800, oklch(27.8% 0.033 256.848));
60
+ --sl-color-gray-2: var(--color-gray-700, oklch(37.3% 0.034 259.733));
61
+ --sl-color-gray-3: var(--color-gray-500, oklch(55.1% 0.027 264.364));
62
+ --sl-color-gray-4: var(--color-gray-400, oklch(70.7% 0.022 261.325));
63
+ --sl-color-gray-5: var(--color-gray-300, oklch(87.2% 0.01 258.338));
64
+ --sl-color-gray-6: var(--color-gray-200, oklch(92.8% 0.006 264.531));
65
+ --sl-color-gray-7: var(--color-gray-100, oklch(96.7% 0.003 264.542));
59
66
  --sl-color-black: white;
60
67
 
61
- --sl-color-bg-inline-code: var(--color-gray-100);
62
- --sl-color-border-inline-code: var(--color-gray-300);
63
- --sl-color-bg-nav: color-mix(in oklch, var(--color-white) 80%, transparent);
68
+ --sl-color-bg-inline-code: var(--color-gray-100, oklch(96.7% 0.003 264.542));
69
+ --sl-color-border-inline-code: var(--color-gray-300, oklch(87.2% 0.01 258.338));
70
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-white, white) 80%, transparent);
64
71
 
65
- --sl-color-orange-low: var(--color-amber-100);
66
- --sl-color-orange: var(--color-amber-400);
67
- --sl-color-orange-high: var(--color-amber-800);
72
+ --sl-color-orange-low: var(--color-amber-100, oklch(96.2% 0.059 95.617));
73
+ --sl-color-orange: var(--color-amber-400, oklch(82.8% 0.189 84.429));
74
+ --sl-color-orange-high: var(--color-amber-800, oklch(47.3% 0.137 46.201));
68
75
 
69
- --sl-color-green-low: var(--color-green-100);
70
- --sl-color-green: var(--color-green-400);
71
- --sl-color-green-high: var(--color-green-800);
76
+ --sl-color-green-low: var(--color-green-100, oklch(96.2% 0.044 156.743));
77
+ --sl-color-green: var(--color-green-400, oklch(79.2% 0.209 151.711));
78
+ --sl-color-green-high: var(--color-green-800, oklch(44.8% 0.119 151.328));
72
79
 
73
- --sl-color-blue-low: var(--color-blue-100);
74
- --sl-color-blue: var(--color-blue-400);
75
- --sl-color-blue-high: var(--color-blue-800);
80
+ --sl-color-blue-low: var(--color-blue-100, oklch(93.2% 0.032 255.585));
81
+ --sl-color-blue: var(--color-blue-400, oklch(70.7% 0.165 254.624));
82
+ --sl-color-blue-high: var(--color-blue-800, oklch(42.4% 0.199 265.638));
76
83
 
77
- --sl-color-purple-low: var(--color-purple-100);
78
- --sl-color-purple: var(--color-purple-400);
79
- --sl-color-purple-high: var(--color-purple-800);
84
+ --sl-color-purple-low: var(--color-purple-100, oklch(94.6% 0.033 307.174));
85
+ --sl-color-purple: var(--color-purple-400, oklch(71.4% 0.203 305.504));
86
+ --sl-color-purple-high: var(--color-purple-800, oklch(43.8% 0.218 303.724));
80
87
 
81
- --sl-color-red-low: var(--color-red-100);
82
- --sl-color-red: var(--color-red-400);
83
- --sl-color-red-high: var(--color-red-800);
88
+ --sl-color-red-low: var(--color-red-100, oklch(93.6% 0.032 17.717));
89
+ --sl-color-red: var(--color-red-400, oklch(70.4% 0.191 22.216));
90
+ --sl-color-red-high: var(--color-red-800, oklch(44.4% 0.177 26.899));
84
91
 
85
92
  --nano-color-highlight: var(--sl-color-gray-6);
86
93
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "starlight-theme-celestia",
3
3
  "type": "module",
4
- "version": "0.2.2",
4
+ "version": "0.2.4",
5
5
  "description": "A clean, modern theme for Astro Starlight",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -22,7 +22,8 @@
22
22
  ],
23
23
  "scripts": {
24
24
  "build": "bun run build:tailwindcss",
25
- "build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css"
25
+ "build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css",
26
+ "test": "bun test"
26
27
  },
27
28
  "dependencies": {
28
29
  "@aria-ui/core": "^0.2.0",
@@ -38,7 +39,7 @@
38
39
  "rehype": "^13.0.2",
39
40
  "remark-custom-header-id": "^1.0.0",
40
41
  "shiki-twoslash-renderer": "^0.3.3",
41
- "starlight-versions": "^0.8.0"
42
+ "starlight-versions": "^0.9.0"
42
43
  },
43
44
  "peerDependencies": {
44
45
  "@astrojs/starlight": "*"
@@ -49,7 +50,7 @@
49
50
  }
50
51
  },
51
52
  "devDependencies": {
52
- "@astrojs/starlight": "^0.38.3",
53
+ "@astrojs/starlight": "^0.39.0",
53
54
  "@tailwindcss/cli": "^4.2.2",
54
55
  "@tailwindcss/vite": "^4.2.2",
55
56
  "@types/node": "^25.0.0",
package/src/index.test.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { expect, test } from "bun:test";
2
+
3
+ import starlightCelestiaTheme from "./index";
4
+
5
+ test("default factory returns a valid Starlight plugin", () => {
6
+ const plugin = starlightCelestiaTheme();
7
+
8
+ expect(plugin.name).toBe("starlight-theme-celestia");
9
+ expect(plugin.hooks).toHaveProperty("config:setup");
10
+ expect(typeof plugin.hooks["config:setup"]).toBe("function");
11
+ });
package/src/index.ts CHANGED
@@ -31,7 +31,7 @@ export default function starlightCelestiaTheme(options: ThemeCelestiaOptions = {
31
31
  return {
32
32
  name: "starlight-theme-celestia",
33
33
  hooks: {
34
- setup: async ({ config, updateConfig, addIntegration, astroConfig }) => {
34
+ "config:setup": async ({ config, updateConfig, addIntegration, astroConfig }) => {
35
35
  let useTailwind: boolean;
36
36
 
37
37
  if (options.stylingSystem === "css") {
package/src/shiki-transformer-container.ts CHANGED
@@ -18,6 +18,31 @@ export function transformerContainer(): ShikiTransformer {
18
18
  throw new Error(`[${name}] Expected at least one child`);
19
19
  }
20
20
 
21
+ // Mermaid blocks must reach downstream rehype plugins (e.g. rehype-mermaid)
22
+ // unwrapped. Shiki rewrites the original `<pre><code class="language-mermaid">`
23
+ // into highlighted tokens with `data-language="mermaid"`, which strips the
24
+ // class rehype-mermaid keys off. Restore the pre-shiki structure so any
25
+ // mermaid strategy (pre-mermaid, inline-svg, img-svg, img-png) can pick it
26
+ // up. If no mermaid plugin is configured the block falls back to plain code.
27
+ if (this.options.lang === "mermaid") {
28
+ node.children = [
29
+ {
30
+ type: "element",
31
+ tagName: "pre",
32
+ properties: {},
33
+ children: [
34
+ {
35
+ type: "element",
36
+ tagName: "code",
37
+ properties: { className: ["language-mermaid"] },
38
+ children: [{ type: "text", value: this.source }],
39
+ },
40
+ ],
41
+ },
42
+ ];
43
+ return node;
44
+ }
45
+
21
46
  const pre = node.children.find((child) => isElement(child, "pre"));
22
47
 
23
48
  if (!pre) {