starlight-theme-celestia 0.2.1 → 0.2.3
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 +87 -0
- package/lib/theme.css +64 -57
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# starlight-theme-celestia
|
|
2
|
+
|
|
3
|
+
A clean, modern theme for [Astro Starlight](https://starlight.astro.build/), forked from [starlight-theme-nova](https://github.com/ocavue/starlight-theme-nova).
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **No sidebar borders** — seamless layout between content and sidebars
|
|
8
|
+
- **Inter font** — self-hosted via `@fontsource/inter`, 14px base size
|
|
9
|
+
- **Wider content** — 55rem content width, 17rem sidebars
|
|
10
|
+
- **3-way theme toggle** — cycles through Auto, Light, and Dark
|
|
11
|
+
- **Warm accent colors** — `#fb923c` (dark) / `#c2410c` (light)
|
|
12
|
+
- **Multi-sidebar ready** — ships `@lorenzo_lewis/starlight-utils` as a dependency
|
|
13
|
+
- **Version dropdown** — built-in `starlight-versions` integration with auto-detected header dropdown
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
bun add starlight-theme-celestia
|
|
19
|
+
# or
|
|
20
|
+
npm install starlight-theme-celestia
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import { defineConfig } from "astro/config";
|
|
27
|
+
import starlight from "@astrojs/starlight";
|
|
28
|
+
import starlightCelestiaTheme from "starlight-theme-celestia";
|
|
29
|
+
|
|
30
|
+
export default defineConfig({
|
|
31
|
+
integrations: [
|
|
32
|
+
starlight({
|
|
33
|
+
title: "My Docs",
|
|
34
|
+
plugins: [starlightCelestiaTheme()],
|
|
35
|
+
sidebar: [{ label: "Guide", autogenerate: { directory: "guide" } }],
|
|
36
|
+
}),
|
|
37
|
+
],
|
|
38
|
+
});
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Options
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
starlightCelestiaTheme({
|
|
45
|
+
// Navigation items in the header bar
|
|
46
|
+
nav: [
|
|
47
|
+
{ label: "Blog", href: "/blog" },
|
|
48
|
+
{ label: "GitHub", href: "https://github.com" },
|
|
49
|
+
],
|
|
50
|
+
// CSS delivery mode: 'detect' (default), 'css', or 'tailwind'
|
|
51
|
+
stylingSystem: "detect",
|
|
52
|
+
});
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Multi-Sidebar
|
|
56
|
+
|
|
57
|
+
The theme ships `@lorenzo_lewis/starlight-utils` as a dependency.
|
|
58
|
+
Add it alongside the theme plugin:
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
import starlightUtils from "@lorenzo_lewis/starlight-utils";
|
|
62
|
+
|
|
63
|
+
// Inside starlight({ plugins: [...] })
|
|
64
|
+
starlightUtils({
|
|
65
|
+
multiSidebar: {
|
|
66
|
+
switcherStyle: "horizontalList",
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Versioning
|
|
72
|
+
|
|
73
|
+
The theme ships `starlight-versions` as a dependency. When configured, a version dropdown automatically appears next to the site title:
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
import starlightVersions from "starlight-versions";
|
|
77
|
+
|
|
78
|
+
// Inside starlight({ plugins: [...] })
|
|
79
|
+
starlightVersions({
|
|
80
|
+
current: { label: "v2.0 (latest)" },
|
|
81
|
+
versions: [{ slug: "v1", label: "v1.0" }],
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
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
|
}
|