@f0rbit/ui 0.1.6 → 0.1.7
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/dist/starlight.css +243 -0
- package/package.json +2 -2
- package/src/styles/starlight.css +243 -0
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
/* Starlight Theme Overrides */
|
|
2
|
+
|
|
3
|
+
/* Map library tokens to Starlight variables */
|
|
4
|
+
:root {
|
|
5
|
+
--code-background: oklch(from var(--bg) calc(l - 0.03) c h);
|
|
6
|
+
--ec-codeBg: var(--code-background);
|
|
7
|
+
--sl-color-bg: var(--bg);
|
|
8
|
+
--sl-color-bg-nav: var(--bg);
|
|
9
|
+
--sl-color-bg-sidebar: var(--bg);
|
|
10
|
+
--sl-color-text: var(--fg-muted);
|
|
11
|
+
--sl-color-text-accent: var(--accent);
|
|
12
|
+
--sl-color-hairline: var(--border);
|
|
13
|
+
--sl-color-hairline-light: var(--border);
|
|
14
|
+
--sl-font: var(--font);
|
|
15
|
+
--sl-font-system: var(--font);
|
|
16
|
+
--sl-font-mono: var(--font-mono);
|
|
17
|
+
--sl-color-accent-low: var(--bg);
|
|
18
|
+
--sl-color-accent: var(--accent);
|
|
19
|
+
--sl-color-accent-high: var(--fg);
|
|
20
|
+
--sl-color-white: var(--fg);
|
|
21
|
+
--sl-color-gray-1: var(--fg-muted);
|
|
22
|
+
--sl-color-gray-2: var(--fg-subtle);
|
|
23
|
+
--sl-color-gray-3: var(--fg-faint);
|
|
24
|
+
--sl-color-gray-4: var(--border);
|
|
25
|
+
--sl-color-gray-5: var(--bg-alt);
|
|
26
|
+
--sl-color-gray-6: var(--bg);
|
|
27
|
+
--sl-color-black: var(--bg);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Header - smaller height and border */
|
|
31
|
+
:root {
|
|
32
|
+
--sl-nav-height: 2.75rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media (min-width: 50rem) {
|
|
36
|
+
:root {
|
|
37
|
+
--sl-nav-height: 3rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
header.header {
|
|
42
|
+
border-bottom: 1px solid var(--border);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Apply stack spacing to markdown content */
|
|
46
|
+
.sl-markdown-content {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
gap: var(--space-md);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Override Starlight's aggressive content margin rules */
|
|
53
|
+
.sl-markdown-content :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content, .sl-steps *)) {
|
|
54
|
+
margin-top: 0 !important;
|
|
55
|
+
}
|
|
56
|
+
.sl-markdown-content :not(a, strong, em, del, span, input, code, br) + :not(a, strong, em, del, span, input, code, br, :where(.not-content, .sl-steps *)) {
|
|
57
|
+
margin-top: 0 !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Hide Starlight's default splash hero/tagline/banner/title on landing page */
|
|
61
|
+
.sl-hero,
|
|
62
|
+
.tagline,
|
|
63
|
+
.sl-banner {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Hide the content panel containing the splash page title placeholder */
|
|
68
|
+
.content-panel:has(.splash-title-placeholder) {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.splash-title-placeholder {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Hide the empty content panel with just an h1#_top on splash pages */
|
|
77
|
+
.content-panel:has(> .sl-container > h1#_top:only-child:empty) {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Sidebar border */
|
|
82
|
+
nav .sidebar-pane {
|
|
83
|
+
border-right: 1px solid var(--border);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Remove content max-width constraint */
|
|
87
|
+
.main-pane .sl-container {
|
|
88
|
+
max-width: unset;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
main {
|
|
92
|
+
padding-bottom: unset !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Cap "On this page" TOC width and adjust main pane on large screens */
|
|
96
|
+
@media (min-width: 72rem) {
|
|
97
|
+
.right-sidebar-panel .sl-container {
|
|
98
|
+
max-width: 25rem;
|
|
99
|
+
width: 25rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
[data-has-sidebar][data-has-toc] .main-pane {
|
|
103
|
+
width: 100%;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.right-sidebar-container {
|
|
107
|
+
width: 25rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Selected sidebar item - override Starlight defaults */
|
|
112
|
+
[aria-current="page"],
|
|
113
|
+
[aria-current="page"]:hover,
|
|
114
|
+
[aria-current="page"]:focus {
|
|
115
|
+
background-color: transparent;
|
|
116
|
+
color: var(--fg);
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
font-weight: 500;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Reduce title sizes */
|
|
122
|
+
h1#_top,
|
|
123
|
+
.content-panel h1 {
|
|
124
|
+
font-size: 1.5rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.sl-markdown-content h1 {
|
|
128
|
+
font-size: 1.5rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sl-markdown-content h2 {
|
|
132
|
+
font-size: 1.25rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.sl-markdown-content h3 {
|
|
136
|
+
font-size: 1.125rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.sl-markdown-content h4,
|
|
140
|
+
.sl-markdown-content h5,
|
|
141
|
+
.sl-markdown-content h6 {
|
|
142
|
+
font-size: 1rem;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Apply library .list styles to markdown content lists */
|
|
146
|
+
.sl-markdown-content ul,
|
|
147
|
+
.sl-markdown-content ol {
|
|
148
|
+
padding-left: var(--space-lg);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.sl-markdown-content ul {
|
|
152
|
+
list-style-type: disc;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.sl-markdown-content ol {
|
|
156
|
+
list-style-type: decimal;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.sl-markdown-content li {
|
|
160
|
+
position: relative;
|
|
161
|
+
padding-left: var(--space-sm);
|
|
162
|
+
margin-bottom: var(--space-xs);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sl-markdown-content li::marker {
|
|
166
|
+
color: var(--fg-faint);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.sl-markdown-content li:last-child {
|
|
170
|
+
margin-bottom: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.sl-markdown-content :is(ul, ol) :is(ul, ol) {
|
|
174
|
+
margin-top: var(--space-xs);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.sl-markdown-content ul ul {
|
|
178
|
+
list-style-type: circle;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.sl-markdown-content ul ul ul {
|
|
182
|
+
list-style-type: square;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.sl-markdown-content ol ol {
|
|
186
|
+
list-style-type: lower-alpha;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.sl-markdown-content ol ol ol {
|
|
190
|
+
list-style-type: lower-roman;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Override expressive-code backgrounds */
|
|
194
|
+
.expressive-code,
|
|
195
|
+
.expressive-code pre,
|
|
196
|
+
.expressive-code code,
|
|
197
|
+
.expressive-code .frame {
|
|
198
|
+
background: var(--code-background);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* Pagination - compact button style */
|
|
202
|
+
.pagination-links {
|
|
203
|
+
gap: var(--space-sm);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.pagination-links a {
|
|
207
|
+
padding: var(--space-sm) var(--space-md);
|
|
208
|
+
border: 1px solid var(--border);
|
|
209
|
+
border-radius: var(--radius);
|
|
210
|
+
box-shadow: none;
|
|
211
|
+
color: var(--fg-muted);
|
|
212
|
+
background: transparent;
|
|
213
|
+
transition: border-color var(--transition), color var(--transition);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.pagination-links a:hover {
|
|
217
|
+
border-color: var(--fg-faint);
|
|
218
|
+
color: var(--fg);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Hide "Previous"/"Next" text, keep only the page title */
|
|
222
|
+
.pagination-links a > span {
|
|
223
|
+
font-size: 0;
|
|
224
|
+
line-height: 0;
|
|
225
|
+
height: 1.35rem;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.pagination-links a > span br {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.pagination-links .link-title {
|
|
233
|
+
font-size: var(--text-sm);
|
|
234
|
+
color: var(--fg);
|
|
235
|
+
font-weight: 500;
|
|
236
|
+
line-height: var(--sl-line-height);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.pagination-links svg {
|
|
240
|
+
width: 1rem;
|
|
241
|
+
height: 1rem;
|
|
242
|
+
color: var(--fg-faint);
|
|
243
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@f0rbit/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "A minimal, composable UI component library for SolidJS",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/server.js",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"./styles/reset": "./dist/reset.css",
|
|
48
48
|
"./styles/utilities": "./dist/utilities.css",
|
|
49
49
|
"./styles/components": "./dist/components.css",
|
|
50
|
-
"./styles/starlight": "./
|
|
50
|
+
"./styles/starlight": "./dist/starlight.css"
|
|
51
51
|
},
|
|
52
52
|
"files": ["dist", "src"],
|
|
53
53
|
"scripts": {
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
/* Starlight Theme Overrides */
|
|
2
|
+
|
|
3
|
+
/* Map library tokens to Starlight variables */
|
|
4
|
+
:root {
|
|
5
|
+
--code-background: oklch(from var(--bg) calc(l - 0.03) c h);
|
|
6
|
+
--ec-codeBg: var(--code-background);
|
|
7
|
+
--sl-color-bg: var(--bg);
|
|
8
|
+
--sl-color-bg-nav: var(--bg);
|
|
9
|
+
--sl-color-bg-sidebar: var(--bg);
|
|
10
|
+
--sl-color-text: var(--fg-muted);
|
|
11
|
+
--sl-color-text-accent: var(--accent);
|
|
12
|
+
--sl-color-hairline: var(--border);
|
|
13
|
+
--sl-color-hairline-light: var(--border);
|
|
14
|
+
--sl-font: var(--font);
|
|
15
|
+
--sl-font-system: var(--font);
|
|
16
|
+
--sl-font-mono: var(--font-mono);
|
|
17
|
+
--sl-color-accent-low: var(--bg);
|
|
18
|
+
--sl-color-accent: var(--accent);
|
|
19
|
+
--sl-color-accent-high: var(--fg);
|
|
20
|
+
--sl-color-white: var(--fg);
|
|
21
|
+
--sl-color-gray-1: var(--fg-muted);
|
|
22
|
+
--sl-color-gray-2: var(--fg-subtle);
|
|
23
|
+
--sl-color-gray-3: var(--fg-faint);
|
|
24
|
+
--sl-color-gray-4: var(--border);
|
|
25
|
+
--sl-color-gray-5: var(--bg-alt);
|
|
26
|
+
--sl-color-gray-6: var(--bg);
|
|
27
|
+
--sl-color-black: var(--bg);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Header - smaller height and border */
|
|
31
|
+
:root {
|
|
32
|
+
--sl-nav-height: 2.75rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media (min-width: 50rem) {
|
|
36
|
+
:root {
|
|
37
|
+
--sl-nav-height: 3rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
header.header {
|
|
42
|
+
border-bottom: 1px solid var(--border);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Apply stack spacing to markdown content */
|
|
46
|
+
.sl-markdown-content {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
gap: var(--space-md);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Override Starlight's aggressive content margin rules */
|
|
53
|
+
.sl-markdown-content :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content, .sl-steps *)) {
|
|
54
|
+
margin-top: 0 !important;
|
|
55
|
+
}
|
|
56
|
+
.sl-markdown-content :not(a, strong, em, del, span, input, code, br) + :not(a, strong, em, del, span, input, code, br, :where(.not-content, .sl-steps *)) {
|
|
57
|
+
margin-top: 0 !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Hide Starlight's default splash hero/tagline/banner/title on landing page */
|
|
61
|
+
.sl-hero,
|
|
62
|
+
.tagline,
|
|
63
|
+
.sl-banner {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Hide the content panel containing the splash page title placeholder */
|
|
68
|
+
.content-panel:has(.splash-title-placeholder) {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.splash-title-placeholder {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Hide the empty content panel with just an h1#_top on splash pages */
|
|
77
|
+
.content-panel:has(> .sl-container > h1#_top:only-child:empty) {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Sidebar border */
|
|
82
|
+
nav .sidebar-pane {
|
|
83
|
+
border-right: 1px solid var(--border);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Remove content max-width constraint */
|
|
87
|
+
.main-pane .sl-container {
|
|
88
|
+
max-width: unset;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
main {
|
|
92
|
+
padding-bottom: unset !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Cap "On this page" TOC width and adjust main pane on large screens */
|
|
96
|
+
@media (min-width: 72rem) {
|
|
97
|
+
.right-sidebar-panel .sl-container {
|
|
98
|
+
max-width: 25rem;
|
|
99
|
+
width: 25rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
[data-has-sidebar][data-has-toc] .main-pane {
|
|
103
|
+
width: 100%;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.right-sidebar-container {
|
|
107
|
+
width: 25rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Selected sidebar item - override Starlight defaults */
|
|
112
|
+
[aria-current="page"],
|
|
113
|
+
[aria-current="page"]:hover,
|
|
114
|
+
[aria-current="page"]:focus {
|
|
115
|
+
background-color: transparent;
|
|
116
|
+
color: var(--fg);
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
font-weight: 500;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Reduce title sizes */
|
|
122
|
+
h1#_top,
|
|
123
|
+
.content-panel h1 {
|
|
124
|
+
font-size: 1.5rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.sl-markdown-content h1 {
|
|
128
|
+
font-size: 1.5rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sl-markdown-content h2 {
|
|
132
|
+
font-size: 1.25rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.sl-markdown-content h3 {
|
|
136
|
+
font-size: 1.125rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.sl-markdown-content h4,
|
|
140
|
+
.sl-markdown-content h5,
|
|
141
|
+
.sl-markdown-content h6 {
|
|
142
|
+
font-size: 1rem;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Apply library .list styles to markdown content lists */
|
|
146
|
+
.sl-markdown-content ul,
|
|
147
|
+
.sl-markdown-content ol {
|
|
148
|
+
padding-left: var(--space-lg);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.sl-markdown-content ul {
|
|
152
|
+
list-style-type: disc;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.sl-markdown-content ol {
|
|
156
|
+
list-style-type: decimal;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.sl-markdown-content li {
|
|
160
|
+
position: relative;
|
|
161
|
+
padding-left: var(--space-sm);
|
|
162
|
+
margin-bottom: var(--space-xs);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sl-markdown-content li::marker {
|
|
166
|
+
color: var(--fg-faint);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.sl-markdown-content li:last-child {
|
|
170
|
+
margin-bottom: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.sl-markdown-content :is(ul, ol) :is(ul, ol) {
|
|
174
|
+
margin-top: var(--space-xs);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.sl-markdown-content ul ul {
|
|
178
|
+
list-style-type: circle;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.sl-markdown-content ul ul ul {
|
|
182
|
+
list-style-type: square;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.sl-markdown-content ol ol {
|
|
186
|
+
list-style-type: lower-alpha;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.sl-markdown-content ol ol ol {
|
|
190
|
+
list-style-type: lower-roman;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Override expressive-code backgrounds */
|
|
194
|
+
.expressive-code,
|
|
195
|
+
.expressive-code pre,
|
|
196
|
+
.expressive-code code,
|
|
197
|
+
.expressive-code .frame {
|
|
198
|
+
background: var(--code-background);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* Pagination - compact button style */
|
|
202
|
+
.pagination-links {
|
|
203
|
+
gap: var(--space-sm);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.pagination-links a {
|
|
207
|
+
padding: var(--space-sm) var(--space-md);
|
|
208
|
+
border: 1px solid var(--border);
|
|
209
|
+
border-radius: var(--radius);
|
|
210
|
+
box-shadow: none;
|
|
211
|
+
color: var(--fg-muted);
|
|
212
|
+
background: transparent;
|
|
213
|
+
transition: border-color var(--transition), color var(--transition);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.pagination-links a:hover {
|
|
217
|
+
border-color: var(--fg-faint);
|
|
218
|
+
color: var(--fg);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Hide "Previous"/"Next" text, keep only the page title */
|
|
222
|
+
.pagination-links a > span {
|
|
223
|
+
font-size: 0;
|
|
224
|
+
line-height: 0;
|
|
225
|
+
height: 1.35rem;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.pagination-links a > span br {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.pagination-links .link-title {
|
|
233
|
+
font-size: var(--text-sm);
|
|
234
|
+
color: var(--fg);
|
|
235
|
+
font-weight: 500;
|
|
236
|
+
line-height: var(--sl-line-height);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.pagination-links svg {
|
|
240
|
+
width: 1rem;
|
|
241
|
+
height: 1rem;
|
|
242
|
+
color: var(--fg-faint);
|
|
243
|
+
}
|