starlight-theme-celestia 0.2.2 → 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/lib/theme.css +64 -57
- package/package.json +1 -1
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
|
}
|