palace-ui 0.13.0 → 0.15.0
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/SPEC.md +197 -63
- package/catalog.html +892 -674
- package/package.json +8 -2
- package/palace.css +138 -53
package/catalog.html
CHANGED
|
@@ -13,19 +13,20 @@
|
|
|
13
13
|
<nav class="navbar">
|
|
14
14
|
<a href="#" class="navbar-brand">Palace UI</a>
|
|
15
15
|
<div class="navbar-right">
|
|
16
|
-
<span class="navbar-user">v0.
|
|
16
|
+
<span class="navbar-user">v0.14.0</span>
|
|
17
17
|
</div>
|
|
18
18
|
</nav>
|
|
19
19
|
|
|
20
|
+
<!-- The one stripe that sits flush under the navbar. -->
|
|
20
21
|
<hr class="gradient-stripe" style="margin-top: 0;">
|
|
21
22
|
|
|
22
23
|
<main>
|
|
23
24
|
|
|
24
25
|
<!-- ════════════════════════════════════════ HERO ════════════════════════════════════════ -->
|
|
25
26
|
|
|
26
|
-
<div class="container" style="padding-top: 48px; padding-bottom: 32px;">
|
|
27
|
+
<div class="container space-lg" style="padding-top: 48px; padding-bottom: 32px;">
|
|
27
28
|
<h1 class="h1-hero">Palace UI</h1>
|
|
28
|
-
<p class="tagline"
|
|
29
|
+
<p class="tagline">
|
|
29
30
|
Retro-technical design system. Hard edges, vibrant gradients, chunky shadows. CSS-only, no build step.
|
|
30
31
|
</p>
|
|
31
32
|
<div class="stat-row">
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
<!-- ════════════════════════════════════════ TOC NAV ════════════════════════════════════════ -->
|
|
48
49
|
|
|
49
50
|
<nav aria-label="Sections" class="container" style="padding-top: 0; padding-bottom: 0;">
|
|
50
|
-
<div style="display: flex; flex-wrap: wrap;
|
|
51
|
+
<div class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
51
52
|
<a href="#colors" style="font-size: 11px;">Colors</a>
|
|
52
53
|
<a href="#typography" style="font-size: 11px;">Typography</a>
|
|
53
54
|
<a href="#spacing" style="font-size: 11px;">Spacing</a>
|
|
@@ -73,133 +74,145 @@
|
|
|
73
74
|
|
|
74
75
|
<hr class="gradient-stripe">
|
|
75
76
|
|
|
76
|
-
<div class="container">
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<h3 style="margin-bottom: 12px;">Accents</h3>
|
|
82
|
-
<div data-source style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;">
|
|
83
|
-
<div style="text-align: center;">
|
|
84
|
-
<div style="width: 80px; height: 80px; background: var(--p-accent-1); border: 2px solid var(--p-text);"></div>
|
|
85
|
-
<div class="stat-label" style="margin-top: 6px;">--p-accent-1</div>
|
|
86
|
-
<code style="font-size: 11px;">#ff2d9b</code>
|
|
87
|
-
</div>
|
|
88
|
-
<div style="text-align: center;">
|
|
89
|
-
<div style="width: 80px; height: 80px; background: var(--p-accent-2); border: 2px solid var(--p-text);"></div>
|
|
90
|
-
<div class="stat-label" style="margin-top: 6px;">--p-accent-2</div>
|
|
91
|
-
<code style="font-size: 11px;">#5b4cff</code>
|
|
92
|
-
</div>
|
|
93
|
-
<div style="text-align: center;">
|
|
94
|
-
<div style="width: 80px; height: 80px; background: var(--p-accent-3); border: 2px solid var(--p-text);"></div>
|
|
95
|
-
<div class="stat-label" style="margin-top: 6px;">--p-accent-3</div>
|
|
96
|
-
<code style="font-size: 11px;">#00e5ff</code>
|
|
97
|
-
</div>
|
|
77
|
+
<div class="container space-lg">
|
|
78
|
+
<div class="space-xs">
|
|
79
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Tokens</p>
|
|
80
|
+
<h2 id="colors">Colors</h2>
|
|
81
|
+
<p class="subtitle">The 3-accent rotation, neutrals, and status colors.</p>
|
|
98
82
|
</div>
|
|
99
83
|
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
<div style="
|
|
103
|
-
<div style="
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<div style="
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<div style="
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<div style="width: 80px; height: 80px; background: var(--p-text-faint); border: 2px solid var(--p-text);"></div>
|
|
119
|
-
<div class="stat-label" style="margin-top: 6px;">--p-text-faint</div>
|
|
120
|
-
<code style="font-size: 11px;">#6b6b6b</code>
|
|
121
|
-
</div>
|
|
122
|
-
<div style="text-align: center;">
|
|
123
|
-
<div style="width: 80px; height: 80px; background: var(--p-bg); border: 2px solid var(--p-text);"></div>
|
|
124
|
-
<div class="stat-label" style="margin-top: 6px;">--p-bg</div>
|
|
125
|
-
<code style="font-size: 11px;">#f0f0f0</code>
|
|
126
|
-
</div>
|
|
127
|
-
<div style="text-align: center;">
|
|
128
|
-
<div style="width: 80px; height: 80px; background: var(--p-surface); border: 2px solid var(--p-text);"></div>
|
|
129
|
-
<div class="stat-label" style="margin-top: 6px;">--p-surface</div>
|
|
130
|
-
<code style="font-size: 11px;">#fff</code>
|
|
84
|
+
<div class="space-sm">
|
|
85
|
+
<h3>Accents</h3>
|
|
86
|
+
<div data-source class="gap-md" style="display: flex; flex-wrap: wrap;">
|
|
87
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
88
|
+
<div style="width: 80px; height: 80px; background: var(--p-accent-1); border: 2px solid var(--p-text);"></div>
|
|
89
|
+
<div class="stat-label">--p-accent-1</div>
|
|
90
|
+
<code style="font-size: 11px;">#ff2d9b</code>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
93
|
+
<div style="width: 80px; height: 80px; background: var(--p-accent-2); border: 2px solid var(--p-text);"></div>
|
|
94
|
+
<div class="stat-label">--p-accent-2</div>
|
|
95
|
+
<code style="font-size: 11px;">#5b4cff</code>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
98
|
+
<div style="width: 80px; height: 80px; background: var(--p-accent-3); border: 2px solid var(--p-text);"></div>
|
|
99
|
+
<div class="stat-label">--p-accent-3</div>
|
|
100
|
+
<code style="font-size: 11px;">#00e5ff</code>
|
|
101
|
+
</div>
|
|
131
102
|
</div>
|
|
132
103
|
</div>
|
|
133
104
|
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
<div style="
|
|
137
|
-
<div style="
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<div style="
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<div style="
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<div style="
|
|
153
|
-
|
|
154
|
-
|
|
105
|
+
<div class="space-sm">
|
|
106
|
+
<h3>Neutrals</h3>
|
|
107
|
+
<div data-source class="gap-md" style="display: flex; flex-wrap: wrap;">
|
|
108
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
109
|
+
<div style="width: 80px; height: 80px; background: var(--p-text); border: 2px solid var(--p-text);"></div>
|
|
110
|
+
<div class="stat-label">--p-text</div>
|
|
111
|
+
<code style="font-size: 11px;">#0a0a0a</code>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
114
|
+
<div style="width: 80px; height: 80px; background: var(--p-text-secondary); border: 2px solid var(--p-text);"></div>
|
|
115
|
+
<div class="stat-label">--p-text-secondary</div>
|
|
116
|
+
<code style="font-size: 11px;">#444</code>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
119
|
+
<div style="width: 80px; height: 80px; background: var(--p-text-muted); border: 2px solid var(--p-text);"></div>
|
|
120
|
+
<div class="stat-label">--p-text-muted</div>
|
|
121
|
+
<code style="font-size: 11px;">#666</code>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
124
|
+
<div style="width: 80px; height: 80px; background: var(--p-text-faint); border: 2px solid var(--p-text);"></div>
|
|
125
|
+
<div class="stat-label">--p-text-faint</div>
|
|
126
|
+
<code style="font-size: 11px;">#6b6b6b</code>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
129
|
+
<div style="width: 80px; height: 80px; background: var(--p-bg); border: 2px solid var(--p-text);"></div>
|
|
130
|
+
<div class="stat-label">--p-bg</div>
|
|
131
|
+
<code style="font-size: 11px;">#f0f0f0</code>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
134
|
+
<div style="width: 80px; height: 80px; background: var(--p-surface); border: 2px solid var(--p-text);"></div>
|
|
135
|
+
<div class="stat-label">--p-surface</div>
|
|
136
|
+
<code style="font-size: 11px;">#fff</code>
|
|
137
|
+
</div>
|
|
155
138
|
</div>
|
|
156
139
|
</div>
|
|
157
140
|
|
|
158
|
-
<
|
|
159
|
-
|
|
160
|
-
<div style="
|
|
161
|
-
<div style="
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
<div style="
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
<div style="
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<div style="
|
|
177
|
-
|
|
178
|
-
|
|
141
|
+
<div class="space-sm">
|
|
142
|
+
<h3>Surfaces</h3>
|
|
143
|
+
<div data-source class="gap-md" style="display: flex; flex-wrap: wrap;">
|
|
144
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
145
|
+
<div style="width: 80px; height: 80px; background: var(--p-surface-inset); border: 2px solid var(--p-text);"></div>
|
|
146
|
+
<div class="stat-label">--p-surface-inset</div>
|
|
147
|
+
<code style="font-size: 11px;">#f7f7f7</code>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
150
|
+
<div style="width: 80px; height: 80px; background: var(--p-dark); border: 2px solid var(--p-text);"></div>
|
|
151
|
+
<div class="stat-label">--p-dark</div>
|
|
152
|
+
<code style="font-size: 11px;">#0a0a0a</code>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
155
|
+
<div style="width: 80px; height: 80px; background: var(--p-overlay); border: 2px solid var(--p-text);"></div>
|
|
156
|
+
<div class="stat-label">--p-overlay</div>
|
|
157
|
+
<code style="font-size: 11px;">rgba(10,10,10,0.7)</code>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
160
|
+
<div style="width: 80px; height: 80px; background: var(--p-hover-bg); border: 2px solid var(--p-text);"></div>
|
|
161
|
+
<div class="stat-label">--p-hover-bg</div>
|
|
162
|
+
<code style="font-size: 11px;">#e8e8e8</code>
|
|
163
|
+
</div>
|
|
179
164
|
</div>
|
|
180
165
|
</div>
|
|
181
166
|
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
<div style="
|
|
185
|
-
<div style="
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<div style="
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<div style="
|
|
196
|
-
|
|
197
|
-
|
|
167
|
+
<div class="space-sm">
|
|
168
|
+
<h3>Status</h3>
|
|
169
|
+
<div data-source class="gap-md" style="display: flex; flex-wrap: wrap;">
|
|
170
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
171
|
+
<div style="width: 80px; height: 80px; background: var(--p-error); border: 2px solid var(--p-text);"></div>
|
|
172
|
+
<div class="stat-label">--p-error</div>
|
|
173
|
+
<code style="font-size: 11px;">#ff4444</code>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
176
|
+
<div style="width: 80px; height: 80px; background: var(--p-success); border: 2px solid var(--p-text);"></div>
|
|
177
|
+
<div class="stat-label">--p-success</div>
|
|
178
|
+
<code style="font-size: 11px;">#00ff88</code>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
181
|
+
<div style="width: 80px; height: 80px; background: var(--p-warning); border: 2px solid var(--p-text);"></div>
|
|
182
|
+
<div class="stat-label">--p-warning</div>
|
|
183
|
+
<code style="font-size: 11px;">#ffcc00</code>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
186
|
+
<div style="width: 80px; height: 80px; background: var(--p-info); border: 2px solid var(--p-text);"></div>
|
|
187
|
+
<div class="stat-label">--p-info</div>
|
|
188
|
+
<code style="font-size: 11px;">#00e5ff</code>
|
|
189
|
+
</div>
|
|
198
190
|
</div>
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="space-sm">
|
|
194
|
+
<h3>Borders</h3>
|
|
195
|
+
<div data-source class="gap-md" style="display: flex; flex-wrap: wrap;">
|
|
196
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
197
|
+
<div style="width: 80px; height: 80px; background: var(--p-border); border: 2px solid var(--p-text);"></div>
|
|
198
|
+
<div class="stat-label">--p-border</div>
|
|
199
|
+
<code style="font-size: 11px;">#ddd</code>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
202
|
+
<div style="width: 80px; height: 80px; background: var(--p-border-light); border: 2px solid var(--p-text);"></div>
|
|
203
|
+
<div class="stat-label">--p-border-light</div>
|
|
204
|
+
<code style="font-size: 11px;">#eee</code>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
207
|
+
<div style="width: 80px; height: 80px; background: var(--p-border-dark); border: 2px solid var(--p-text);"></div>
|
|
208
|
+
<div class="stat-label">--p-border-dark</div>
|
|
209
|
+
<code style="font-size: 11px;">#333</code>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="gap-xs" style="display: grid; justify-items: center;">
|
|
212
|
+
<div style="width: 80px; height: 80px; background: var(--p-border-dashed); border: 2px solid var(--p-text);"></div>
|
|
213
|
+
<div class="stat-label">--p-border-dashed</div>
|
|
214
|
+
<code style="font-size: 11px;">#ccc</code>
|
|
215
|
+
</div>
|
|
203
216
|
</div>
|
|
204
217
|
</div>
|
|
205
218
|
</div>
|
|
@@ -208,65 +221,71 @@
|
|
|
208
221
|
|
|
209
222
|
<hr class="gradient-stripe">
|
|
210
223
|
|
|
211
|
-
<div class="container">
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
224
|
+
<div class="container space-lg">
|
|
225
|
+
<div class="space-xs">
|
|
226
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Tokens</p>
|
|
227
|
+
<h2 id="typography">Typography</h2>
|
|
228
|
+
<p class="subtitle">Space Grotesk for UI, JetBrains Mono for code.</p>
|
|
229
|
+
</div>
|
|
215
230
|
|
|
216
|
-
<div
|
|
217
|
-
<div>
|
|
218
|
-
<div
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<div
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
<div
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<div
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<div
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
<div
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
<div
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<div
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<div
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
<div
|
|
255
|
-
|
|
231
|
+
<div class="space-sm">
|
|
232
|
+
<div data-source class="space-lg">
|
|
233
|
+
<div>
|
|
234
|
+
<div class="stat-label">h1 / .h1 — 2rem / 700</div>
|
|
235
|
+
<h1>Gradient Headline</h1>
|
|
236
|
+
</div>
|
|
237
|
+
<div>
|
|
238
|
+
<div class="stat-label">.h1-hero — 2.6rem / 700</div>
|
|
239
|
+
<h1 class="h1-hero">Hero Headline</h1>
|
|
240
|
+
</div>
|
|
241
|
+
<div>
|
|
242
|
+
<div class="stat-label">h2 / .h2 — 18px / 700</div>
|
|
243
|
+
<h2>Section Heading</h2>
|
|
244
|
+
</div>
|
|
245
|
+
<div>
|
|
246
|
+
<div class="stat-label">h3 / .h3 — 14px / 600</div>
|
|
247
|
+
<h3>Subsection Heading</h3>
|
|
248
|
+
</div>
|
|
249
|
+
<div>
|
|
250
|
+
<div class="stat-label">.brand — 11px / 700</div>
|
|
251
|
+
<p class="brand">Brand Label</p>
|
|
252
|
+
</div>
|
|
253
|
+
<div>
|
|
254
|
+
<div class="stat-label">.eyebrow — 10px / 700</div>
|
|
255
|
+
<p class="eyebrow">Category Eyebrow</p>
|
|
256
|
+
</div>
|
|
257
|
+
<div>
|
|
258
|
+
<div class="stat-label">.subtitle — 14px / 400</div>
|
|
259
|
+
<p class="subtitle">A helpful subtitle below headings</p>
|
|
260
|
+
</div>
|
|
261
|
+
<div>
|
|
262
|
+
<div class="stat-label">.tagline — 18px / 400</div>
|
|
263
|
+
<p class="tagline">A slightly larger body text for hero sections and introductions.</p>
|
|
264
|
+
</div>
|
|
265
|
+
<div>
|
|
266
|
+
<div class="stat-label">Body — 14px / 400</div>
|
|
267
|
+
<p>Regular body text. The only text that isn't uppercase. Clean and readable at 14px with 1.5 line-height.</p>
|
|
268
|
+
</div>
|
|
269
|
+
<div>
|
|
270
|
+
<div class="stat-label">code — JetBrains Mono 13px</div>
|
|
271
|
+
<code>const config = { radius: 0 };</code>
|
|
272
|
+
</div>
|
|
256
273
|
</div>
|
|
257
274
|
</div>
|
|
258
275
|
|
|
259
|
-
<
|
|
260
|
-
|
|
261
|
-
<div
|
|
262
|
-
<
|
|
263
|
-
<
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
<
|
|
269
|
-
|
|
276
|
+
<div class="space-sm">
|
|
277
|
+
<h3>Brand Lockup</h3>
|
|
278
|
+
<div data-source>
|
|
279
|
+
<div class="brand-lockup">
|
|
280
|
+
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="border: 2px solid var(--p-text);">
|
|
281
|
+
<rect x="16" y="16" width="32" height="32" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>
|
|
282
|
+
<line x1="24" y1="28" x2="40" y2="28" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
|
|
283
|
+
<line x1="24" y1="36" x2="34" y2="36" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
|
|
284
|
+
</svg>
|
|
285
|
+
<div>
|
|
286
|
+
<p class="brand" style="font-size: 17px; letter-spacing: 3px;">App Name</p>
|
|
287
|
+
<p class="subtitle">Short descriptor for the app</p>
|
|
288
|
+
</div>
|
|
270
289
|
</div>
|
|
271
290
|
</div>
|
|
272
291
|
</div>
|
|
@@ -276,35 +295,39 @@
|
|
|
276
295
|
|
|
277
296
|
<hr class="gradient-stripe">
|
|
278
297
|
|
|
279
|
-
<div class="container">
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
298
|
+
<div class="container space-lg">
|
|
299
|
+
<div class="space-xs">
|
|
300
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Tokens</p>
|
|
301
|
+
<h2 id="spacing">Spacing</h2>
|
|
302
|
+
<p class="subtitle">6-step scale from 4px to 48px.</p>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="space-sm">
|
|
306
|
+
<div data-source class="space-md">
|
|
307
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
308
|
+
<div style="width: 4px; height: 24px; background: var(--p-accent-1);"></div>
|
|
309
|
+
<code style="font-size: 12px;">--p-space-xs: 4px</code>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
312
|
+
<div style="width: 8px; height: 24px; background: var(--p-accent-1);"></div>
|
|
313
|
+
<code style="font-size: 12px;">--p-space-sm: 8px</code>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
316
|
+
<div style="width: 16px; height: 24px; background: var(--p-accent-2);"></div>
|
|
317
|
+
<code style="font-size: 12px;">--p-space-md: 16px</code>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
320
|
+
<div style="width: 24px; height: 24px; background: var(--p-accent-2);"></div>
|
|
321
|
+
<code style="font-size: 12px;">--p-space-lg: 24px</code>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
324
|
+
<div style="width: 32px; height: 24px; background: var(--p-accent-3);"></div>
|
|
325
|
+
<code style="font-size: 12px;">--p-space-xl: 32px</code>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="gap-sm" style="display: flex; align-items: center;">
|
|
328
|
+
<div style="width: 48px; height: 24px; background: var(--p-accent-3);"></div>
|
|
329
|
+
<code style="font-size: 12px;">--p-space-2xl: 48px</code>
|
|
330
|
+
</div>
|
|
308
331
|
</div>
|
|
309
332
|
</div>
|
|
310
333
|
</div>
|
|
@@ -313,26 +336,35 @@
|
|
|
313
336
|
|
|
314
337
|
<hr class="gradient-stripe">
|
|
315
338
|
|
|
316
|
-
<div class="container">
|
|
317
|
-
<
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
<
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
<
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
<
|
|
339
|
+
<div class="container space-lg">
|
|
340
|
+
<div class="space-xs">
|
|
341
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Tokens</p>
|
|
342
|
+
<h2 id="shadows">Shadows</h2>
|
|
343
|
+
<p class="subtitle">Hard shadows only. Zero blur, always. Keys take xs, small chips sm, controls md, boxes and cards lg.</p>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div class="space-sm">
|
|
347
|
+
<div data-source class="gap-lg" style="display: flex; flex-wrap: wrap;">
|
|
348
|
+
<div class="gap-sm" style="display: grid; justify-items: center;">
|
|
349
|
+
<div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-xs) var(--p-accent-3);"></div>
|
|
350
|
+
<div class="stat-label">--p-shadow-xs</div>
|
|
351
|
+
<code style="font-size: 11px;">1px 1px 0</code>
|
|
352
|
+
</div>
|
|
353
|
+
<div class="gap-sm" style="display: grid; justify-items: center;">
|
|
354
|
+
<div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-sm) var(--p-accent-1);"></div>
|
|
355
|
+
<div class="stat-label">--p-shadow-sm</div>
|
|
356
|
+
<code style="font-size: 11px;">2px 2px 0</code>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="gap-sm" style="display: grid; justify-items: center;">
|
|
359
|
+
<div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-md) var(--p-accent-2);"></div>
|
|
360
|
+
<div class="stat-label">--p-shadow-md</div>
|
|
361
|
+
<code style="font-size: 11px;">3px 3px 0</code>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="gap-sm" style="display: grid; justify-items: center;">
|
|
364
|
+
<div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-lg) var(--p-accent-3);"></div>
|
|
365
|
+
<div class="stat-label">--p-shadow-lg</div>
|
|
366
|
+
<code style="font-size: 11px;">4px 4px 0</code>
|
|
367
|
+
</div>
|
|
336
368
|
</div>
|
|
337
369
|
</div>
|
|
338
370
|
</div>
|
|
@@ -341,53 +373,67 @@
|
|
|
341
373
|
|
|
342
374
|
<hr class="gradient-stripe">
|
|
343
375
|
|
|
344
|
-
<div class="container">
|
|
345
|
-
<
|
|
346
|
-
|
|
347
|
-
|
|
376
|
+
<div class="container space-lg">
|
|
377
|
+
<div class="space-xs">
|
|
378
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
379
|
+
<h2 id="buttons">Buttons</h2>
|
|
380
|
+
<p class="subtitle">4 variants, 3 sizes, disabled + CTA.</p>
|
|
381
|
+
</div>
|
|
348
382
|
|
|
349
|
-
<
|
|
350
|
-
|
|
351
|
-
<
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
383
|
+
<div class="space-sm">
|
|
384
|
+
<h3>Variants (default size)</h3>
|
|
385
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
386
|
+
<button class="btn btn-primary">Primary</button>
|
|
387
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
388
|
+
<button class="btn btn-outline">Outline</button>
|
|
389
|
+
<button class="btn btn-danger">Danger</button>
|
|
390
|
+
</div>
|
|
355
391
|
</div>
|
|
356
392
|
|
|
357
|
-
<
|
|
358
|
-
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
|
|
393
|
+
<div class="space-sm">
|
|
394
|
+
<h3>Sizes</h3>
|
|
395
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap; align-items: center;">
|
|
396
|
+
<button class="btn btn-sm btn-primary">Small</button>
|
|
397
|
+
<button class="btn btn-primary">Default</button>
|
|
398
|
+
<button class="btn btn-lg btn-primary">Large</button>
|
|
399
|
+
</div>
|
|
362
400
|
</div>
|
|
363
401
|
|
|
364
|
-
<
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
<
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
402
|
+
<div class="space-sm">
|
|
403
|
+
<h3>Buttons and links side by side</h3>
|
|
404
|
+
<p>A <code><button></code> and an <code><a class="btn"></code> of the same size are the same height and line up.</p>
|
|
405
|
+
<div data-source id="btn-match" class="gap-sm" style="display: flex; flex-wrap: wrap; align-items: baseline;">
|
|
406
|
+
<button class="btn btn-sm btn-outline">Button</button>
|
|
407
|
+
<a href="#" class="btn btn-sm btn-outline">Link</a>
|
|
408
|
+
<button class="btn btn-primary">Button</button>
|
|
409
|
+
<a href="#" class="btn btn-primary">Link</a>
|
|
410
|
+
<button class="btn btn-lg btn-secondary">Button</button>
|
|
411
|
+
<a href="#" class="btn btn-lg btn-secondary">Link</a>
|
|
412
|
+
</div>
|
|
373
413
|
</div>
|
|
374
414
|
|
|
375
|
-
<
|
|
376
|
-
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
|
|
415
|
+
<div class="space-sm">
|
|
416
|
+
<h3>Disabled</h3>
|
|
417
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
418
|
+
<button class="btn btn-primary" disabled>Disabled</button>
|
|
419
|
+
<button class="btn btn-secondary" disabled>Disabled</button>
|
|
420
|
+
<button class="btn btn-outline" disabled>Disabled</button>
|
|
421
|
+
</div>
|
|
380
422
|
</div>
|
|
381
423
|
|
|
382
|
-
<
|
|
383
|
-
|
|
384
|
-
<
|
|
424
|
+
<div class="space-sm">
|
|
425
|
+
<h3>Block</h3>
|
|
426
|
+
<div data-source>
|
|
427
|
+
<button class="btn btn-primary btn-block">Full Width Button</button>
|
|
428
|
+
</div>
|
|
385
429
|
</div>
|
|
386
430
|
|
|
387
|
-
<
|
|
388
|
-
|
|
389
|
-
<
|
|
390
|
-
|
|
431
|
+
<div class="space-sm">
|
|
432
|
+
<h3>CTA (hero sections)</h3>
|
|
433
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
434
|
+
<a href="#" class="cta cta-primary">Sign Up</a>
|
|
435
|
+
<a href="#" class="cta cta-secondary">Learn More</a>
|
|
436
|
+
</div>
|
|
391
437
|
</div>
|
|
392
438
|
</div>
|
|
393
439
|
|
|
@@ -395,35 +441,41 @@
|
|
|
395
441
|
|
|
396
442
|
<hr class="gradient-stripe">
|
|
397
443
|
|
|
398
|
-
<div class="container">
|
|
399
|
-
<
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
444
|
+
<div class="container space-lg">
|
|
445
|
+
<div class="space-xs">
|
|
446
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
447
|
+
<h2 id="cards">Cards</h2>
|
|
448
|
+
<p class="subtitle">3-color accent rotation. Hover for lift + shadow.</p>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
<div class="space-sm">
|
|
452
|
+
<div data-source class="space-md">
|
|
453
|
+
<div class="card">
|
|
454
|
+
<span class="h2">First Card</span>
|
|
455
|
+
<p>Accent 1 (pink). Headings pick up the accent color automatically. Hover to see the lift and hard shadow.</p>
|
|
456
|
+
</div>
|
|
457
|
+
<div class="card">
|
|
458
|
+
<span class="h2">Second Card</span>
|
|
459
|
+
<p>Accent 2 (purple). The rotation cycles through all three accent colors on sibling cards.</p>
|
|
460
|
+
</div>
|
|
461
|
+
<div class="card">
|
|
462
|
+
<span class="h2">Third Card</span>
|
|
463
|
+
<p>Accent 3 (cyan shadow on hover). Heading uses dark text for accessible contrast.</p>
|
|
464
|
+
</div>
|
|
465
|
+
<div class="card">
|
|
466
|
+
<span class="h2">Fourth Card</span>
|
|
467
|
+
<p>Back to accent 1 (pink). The rotation repeats every 3 cards.</p>
|
|
468
|
+
</div>
|
|
419
469
|
</div>
|
|
420
470
|
</div>
|
|
421
471
|
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
<div
|
|
425
|
-
<
|
|
426
|
-
|
|
472
|
+
<div class="space-sm">
|
|
473
|
+
<h3>Static Card (no lift, keeps its large shadow)</h3>
|
|
474
|
+
<div data-source>
|
|
475
|
+
<div class="card-static">
|
|
476
|
+
<span class="h2">Form Container</span>
|
|
477
|
+
<p style="color: var(--p-text-secondary); font-size: 14px;">Use <code>.card-static</code> for cards that hold forms or content that shouldn't lift on hover; it keeps the large shadow.</p>
|
|
478
|
+
</div>
|
|
427
479
|
</div>
|
|
428
480
|
</div>
|
|
429
481
|
</div>
|
|
@@ -432,76 +484,104 @@
|
|
|
432
484
|
|
|
433
485
|
<hr class="gradient-stripe">
|
|
434
486
|
|
|
435
|
-
<div class="container">
|
|
436
|
-
<
|
|
437
|
-
|
|
438
|
-
|
|
487
|
+
<div class="container space-lg">
|
|
488
|
+
<div class="space-xs">
|
|
489
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
490
|
+
<h2 id="forms">Forms</h2>
|
|
491
|
+
<p class="subtitle">Fields, text inputs, select, number input, textarea, control rows.</p>
|
|
492
|
+
</div>
|
|
439
493
|
|
|
440
|
-
<div
|
|
441
|
-
<div class="
|
|
442
|
-
<div>
|
|
494
|
+
<div class="space-sm">
|
|
495
|
+
<div data-source class="card-static space-md">
|
|
496
|
+
<div class="field">
|
|
443
497
|
<label for="cat-name">Full Name</label>
|
|
444
498
|
<input type="text" id="cat-name" placeholder="Enter your name">
|
|
445
499
|
</div>
|
|
446
|
-
<div>
|
|
500
|
+
<div class="field">
|
|
447
501
|
<label for="cat-email">Email Address</label>
|
|
448
|
-
<input type="email" id="cat-email"
|
|
502
|
+
<input type="email" id="cat-email" value="you@example" aria-invalid="true" aria-describedby="cat-email-error">
|
|
503
|
+
<p class="field-error" id="cat-email-error">Enter an email address with a domain, like you@example.com.</p>
|
|
449
504
|
</div>
|
|
450
|
-
<div>
|
|
505
|
+
<div class="field">
|
|
451
506
|
<label for="cat-password">Password</label>
|
|
452
|
-
<input type="password" id="cat-password"
|
|
507
|
+
<input type="password" id="cat-password" aria-describedby="cat-password-hint">
|
|
508
|
+
<p class="field-hint" id="cat-password-hint">At least 8 characters.</p>
|
|
453
509
|
</div>
|
|
454
|
-
<div>
|
|
510
|
+
<div class="field">
|
|
455
511
|
<label for="cat-search">Search</label>
|
|
456
512
|
<input type="search" id="cat-search" placeholder="Search...">
|
|
457
513
|
</div>
|
|
458
|
-
<div>
|
|
514
|
+
<div class="field">
|
|
459
515
|
<label for="cat-direction">Direction</label>
|
|
460
516
|
<select id="cat-direction"><option>Anticlockwise</option><option>Clockwise</option></select>
|
|
461
517
|
</div>
|
|
462
|
-
<div>
|
|
518
|
+
<div class="field">
|
|
463
519
|
<label for="cat-num">Quantity</label>
|
|
464
520
|
<input type="number" id="cat-num" value="5" min="0" max="99">
|
|
465
521
|
</div>
|
|
466
|
-
<div>
|
|
522
|
+
<div class="field">
|
|
467
523
|
<label for="cat-notes">Notes</label>
|
|
468
524
|
<textarea id="cat-notes" placeholder="Write something..."></textarea>
|
|
469
525
|
</div>
|
|
470
|
-
<
|
|
471
|
-
<button class="btn btn-primary btn-block">Submit</button>
|
|
472
|
-
</div>
|
|
526
|
+
<button class="btn btn-primary btn-block">Submit</button>
|
|
473
527
|
</div>
|
|
474
528
|
</div>
|
|
475
529
|
|
|
476
|
-
<
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<div class="
|
|
530
|
+
<div class="space-sm">
|
|
531
|
+
<h3>Checkboxes, radio buttons and disclosures</h3>
|
|
532
|
+
<p>Tab through them: each gets the same focus ring as links and buttons.</p>
|
|
533
|
+
<div data-source id="focus-controls" class="card-static space-md">
|
|
480
534
|
<label><input type="checkbox" checked> Show lap times</label>
|
|
481
|
-
<fieldset style="border: 0;">
|
|
535
|
+
<fieldset class="gap-sm" style="display: grid; border: 0;">
|
|
482
536
|
<legend class="visually-hidden">Direction</legend>
|
|
483
537
|
<label><input type="radio" name="cat-dir" checked> Anticlockwise</label>
|
|
484
538
|
<label><input type="radio" name="cat-dir"> Clockwise</label>
|
|
485
539
|
</fieldset>
|
|
486
|
-
<details>
|
|
540
|
+
<details class="space-sm">
|
|
487
541
|
<summary>More options</summary>
|
|
488
542
|
<p>Hidden until the summary is opened.</p>
|
|
489
543
|
</details>
|
|
490
544
|
</div>
|
|
491
545
|
</div>
|
|
492
546
|
|
|
493
|
-
<
|
|
494
|
-
|
|
495
|
-
<
|
|
496
|
-
<
|
|
547
|
+
<div class="space-sm">
|
|
548
|
+
<h3>Control Row</h3>
|
|
549
|
+
<p>Inputs, fields and buttons on one line, aligned to the bottom. Inputs grow and share the width; the row wraps when it is narrow. A hint or error for the row goes below it, not inside the field, so the button stays in line with the control.</p>
|
|
550
|
+
<div data-source id="control-row" class="control-row">
|
|
551
|
+
<input type="text" placeholder="Add a label" aria-label="Add a label">
|
|
552
|
+
<button class="btn btn-primary">Create</button>
|
|
553
|
+
</div>
|
|
554
|
+
<div data-source id="control-row-fields" class="control-row">
|
|
555
|
+
<div class="field">
|
|
556
|
+
<label for="cat-driver">Driver</label>
|
|
557
|
+
<input type="text" id="cat-driver" placeholder="Ada">
|
|
558
|
+
</div>
|
|
559
|
+
<div class="field">
|
|
560
|
+
<label for="cat-car">Car</label>
|
|
561
|
+
<select id="cat-car"><option>Red</option><option>Blue</option></select>
|
|
562
|
+
</div>
|
|
563
|
+
<button class="btn btn-primary">Add Driver</button>
|
|
564
|
+
</div>
|
|
565
|
+
<div data-source id="control-row-error" class="space-sm">
|
|
566
|
+
<div class="control-row">
|
|
567
|
+
<div class="field">
|
|
568
|
+
<label for="cat-code">Transponder</label>
|
|
569
|
+
<input type="text" id="cat-code" value="4821" aria-invalid="true" aria-describedby="cat-code-error">
|
|
570
|
+
</div>
|
|
571
|
+
<button class="btn btn-primary">Assign</button>
|
|
572
|
+
</div>
|
|
573
|
+
<p class="field-error" id="cat-code-error">Transponder 4821 is already assigned to Ada.</p>
|
|
574
|
+
</div>
|
|
497
575
|
</div>
|
|
498
576
|
|
|
499
|
-
<
|
|
500
|
-
|
|
501
|
-
<
|
|
502
|
-
|
|
503
|
-
<
|
|
504
|
-
|
|
577
|
+
<div class="space-sm">
|
|
578
|
+
<h3>Field with a Button Inside</h3>
|
|
579
|
+
<div data-source class="field">
|
|
580
|
+
<label for="pw-demo">Password</label>
|
|
581
|
+
<div class="input-action">
|
|
582
|
+
<input type="password" id="pw-demo" autocomplete="off">
|
|
583
|
+
<button type="button" class="btn btn-sm btn-outline" aria-label="Show password">Show</button>
|
|
584
|
+
</div>
|
|
505
585
|
</div>
|
|
506
586
|
</div>
|
|
507
587
|
</div>
|
|
@@ -510,68 +590,74 @@
|
|
|
510
590
|
|
|
511
591
|
<hr class="gradient-stripe">
|
|
512
592
|
|
|
513
|
-
<div class="container">
|
|
514
|
-
<
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
<
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
<
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
<
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
<
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
<
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
<
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
<
|
|
573
|
-
|
|
574
|
-
|
|
593
|
+
<div class="container space-lg">
|
|
594
|
+
<div class="space-xs">
|
|
595
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
596
|
+
<h2 id="tables">Tables</h2>
|
|
597
|
+
<p class="subtitle">Full-width with uppercase headers.</p>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<div class="space-sm">
|
|
601
|
+
<div data-source>
|
|
602
|
+
<table>
|
|
603
|
+
<thead>
|
|
604
|
+
<tr>
|
|
605
|
+
<th>Component</th>
|
|
606
|
+
<th>Category</th>
|
|
607
|
+
<th>Status</th>
|
|
608
|
+
<th style="text-align: right;">Lines</th>
|
|
609
|
+
</tr>
|
|
610
|
+
</thead>
|
|
611
|
+
<tbody>
|
|
612
|
+
<tr>
|
|
613
|
+
<td style="font-weight: 600;">Buttons</td>
|
|
614
|
+
<td>Interactive</td>
|
|
615
|
+
<td><span class="badge">Stable</span></td>
|
|
616
|
+
<td style="text-align: right;">120</td>
|
|
617
|
+
</tr>
|
|
618
|
+
<tr>
|
|
619
|
+
<td style="font-weight: 600;">Cards</td>
|
|
620
|
+
<td>Layout</td>
|
|
621
|
+
<td><span class="badge">Stable</span></td>
|
|
622
|
+
<td style="text-align: right;">45</td>
|
|
623
|
+
</tr>
|
|
624
|
+
<tr>
|
|
625
|
+
<td style="font-weight: 600;">Forms</td>
|
|
626
|
+
<td>Interactive</td>
|
|
627
|
+
<td><span class="badge">Stable</span></td>
|
|
628
|
+
<td style="text-align: right;">80</td>
|
|
629
|
+
</tr>
|
|
630
|
+
<tr>
|
|
631
|
+
<td style="font-weight: 600;">Status</td>
|
|
632
|
+
<td>Feedback</td>
|
|
633
|
+
<td><span class="badge">Updated</span></td>
|
|
634
|
+
<td style="text-align: right;">30</td>
|
|
635
|
+
</tr>
|
|
636
|
+
<tr>
|
|
637
|
+
<td style="font-weight: 600;">Navbar</td>
|
|
638
|
+
<td>Navigation</td>
|
|
639
|
+
<td><span class="badge">Updated</span></td>
|
|
640
|
+
<td style="text-align: right;">55</td>
|
|
641
|
+
</tr>
|
|
642
|
+
</tbody>
|
|
643
|
+
</table>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
|
|
647
|
+
<div class="space-sm">
|
|
648
|
+
<h3>Scrolling table</h3>
|
|
649
|
+
<p>A wide table scrolls inside its wrapper. The wrapper is <code>position: relative</code>, so <code>.visually-hidden</code> text in it stays inside it and the page never grows wider.</p>
|
|
650
|
+
<div data-source id="scroll-table" style="overflow-x: auto; position: relative;">
|
|
651
|
+
<table style="min-width: 640px;">
|
|
652
|
+
<thead>
|
|
653
|
+
<tr><th>Driver</th><th>Laps</th><th>Best</th><th>Last</th><th><span class="visually-hidden">Actions</span></th></tr>
|
|
654
|
+
</thead>
|
|
655
|
+
<tbody>
|
|
656
|
+
<tr><td>Ada</td><td>12</td><td>4.812</td><td>4.977</td><td><button class="btn btn-sm btn-outline">Edit<span class="visually-hidden"> Ada</span></button></td></tr>
|
|
657
|
+
<tr><td>Grace</td><td>11</td><td>4.903</td><td>5.120</td><td><button class="btn btn-sm btn-outline">Edit<span class="visually-hidden"> Grace</span></button></td></tr>
|
|
658
|
+
</tbody>
|
|
659
|
+
</table>
|
|
660
|
+
</div>
|
|
575
661
|
</div>
|
|
576
662
|
</div>
|
|
577
663
|
|
|
@@ -579,30 +665,36 @@
|
|
|
579
665
|
|
|
580
666
|
<hr class="gradient-stripe">
|
|
581
667
|
|
|
582
|
-
<div class="container">
|
|
583
|
-
<
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
<div
|
|
605
|
-
<
|
|
668
|
+
<div class="container space-lg">
|
|
669
|
+
<div class="space-xs">
|
|
670
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
671
|
+
<h2 id="code">Code</h2>
|
|
672
|
+
<p class="subtitle">Pre blocks and code-reveal panels.</p>
|
|
673
|
+
</div>
|
|
674
|
+
|
|
675
|
+
<div class="space-sm">
|
|
676
|
+
<h3>Pre Block</h3>
|
|
677
|
+
<div data-source>
|
|
678
|
+
<pre>:root {
|
|
679
|
+
--p-accent-1: #ff2d9b;
|
|
680
|
+
--p-accent-2: #5b4cff;
|
|
681
|
+
--p-accent-3: #00e5ff;
|
|
682
|
+
--p-radius: 0;
|
|
683
|
+
}</pre>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
|
|
687
|
+
<div class="space-sm">
|
|
688
|
+
<h3>Code Reveal</h3>
|
|
689
|
+
<div data-source>
|
|
690
|
+
<div class="code-reveal">
|
|
691
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">
|
|
692
|
+
API Key — copy this, you won't see it again
|
|
693
|
+
</p>
|
|
694
|
+
<code>pk_live_a1b2c3d4e5f6g7h8i9j0</code>
|
|
695
|
+
<div class="gap-sm" style="display: flex;">
|
|
696
|
+
<button class="btn btn-secondary btn-sm">Copy</button>
|
|
697
|
+
</div>
|
|
606
698
|
</div>
|
|
607
699
|
</div>
|
|
608
700
|
</div>
|
|
@@ -612,31 +704,39 @@
|
|
|
612
704
|
|
|
613
705
|
<hr class="gradient-stripe">
|
|
614
706
|
|
|
615
|
-
<div class="container">
|
|
616
|
-
<
|
|
617
|
-
|
|
618
|
-
|
|
707
|
+
<div class="container space-lg">
|
|
708
|
+
<div class="space-xs">
|
|
709
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
710
|
+
<h2 id="tags">Tags & Badges</h2>
|
|
711
|
+
<p class="subtitle">Tags, badges, and sticker tags with rotation.</p>
|
|
712
|
+
</div>
|
|
619
713
|
|
|
620
|
-
<
|
|
621
|
-
|
|
622
|
-
<
|
|
623
|
-
|
|
624
|
-
|
|
714
|
+
<div class="space-sm">
|
|
715
|
+
<h3>Tags</h3>
|
|
716
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
717
|
+
<span class="tag">Volume Spacer</span>
|
|
718
|
+
<span class="tag">Custom Tune</span>
|
|
719
|
+
<span class="tag">Bleed Kit</span>
|
|
720
|
+
</div>
|
|
625
721
|
</div>
|
|
626
722
|
|
|
627
|
-
<
|
|
628
|
-
|
|
629
|
-
<
|
|
630
|
-
|
|
631
|
-
|
|
723
|
+
<div class="space-sm">
|
|
724
|
+
<h3>Badges</h3>
|
|
725
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
726
|
+
<span class="badge">Stable</span>
|
|
727
|
+
<span class="badge">New</span>
|
|
728
|
+
<span class="badge">Clicks</span>
|
|
729
|
+
</div>
|
|
632
730
|
</div>
|
|
633
731
|
|
|
634
|
-
<
|
|
635
|
-
|
|
636
|
-
<
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
732
|
+
<div class="space-sm">
|
|
733
|
+
<h3>Sticker Tags</h3>
|
|
734
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
735
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-1);">Volume Spacer</span>
|
|
736
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-2);">Custom Tune</span>
|
|
737
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-3);">Bleed Kit</span>
|
|
738
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-1);">Pro Setup</span>
|
|
739
|
+
</div>
|
|
640
740
|
</div>
|
|
641
741
|
</div>
|
|
642
742
|
|
|
@@ -644,17 +744,21 @@
|
|
|
644
744
|
|
|
645
745
|
<hr class="gradient-stripe">
|
|
646
746
|
|
|
647
|
-
<div class="container">
|
|
648
|
-
<
|
|
649
|
-
|
|
650
|
-
|
|
747
|
+
<div class="container space-lg">
|
|
748
|
+
<div class="space-xs">
|
|
749
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
750
|
+
<h2 id="status">Status Messages</h2>
|
|
751
|
+
<p class="subtitle">Success, error, warning, info, and base.</p>
|
|
752
|
+
</div>
|
|
651
753
|
|
|
652
|
-
<div
|
|
653
|
-
<div class="
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
754
|
+
<div class="space-sm">
|
|
755
|
+
<div data-source class="space-sm">
|
|
756
|
+
<div class="status status-success" role="status">Account created successfully</div>
|
|
757
|
+
<div class="status status-error" role="alert">Something went wrong — please try again</div>
|
|
758
|
+
<div class="status status-warning" role="alert">Your session will expire in 5 minutes</div>
|
|
759
|
+
<div class="status status-info" role="status">New features are available in v0.14.0</div>
|
|
760
|
+
<div class="status">Neutral status message</div>
|
|
761
|
+
</div>
|
|
658
762
|
</div>
|
|
659
763
|
</div>
|
|
660
764
|
|
|
@@ -662,24 +766,28 @@
|
|
|
662
766
|
|
|
663
767
|
<hr class="gradient-stripe">
|
|
664
768
|
|
|
665
|
-
<div class="container">
|
|
666
|
-
<
|
|
667
|
-
|
|
668
|
-
|
|
769
|
+
<div class="container space-lg">
|
|
770
|
+
<div class="space-xs">
|
|
771
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
772
|
+
<h2 id="steps">Steps</h2>
|
|
773
|
+
<p class="subtitle">Numbered instruction lists.</p>
|
|
774
|
+
</div>
|
|
669
775
|
|
|
670
|
-
<div
|
|
671
|
-
<div
|
|
672
|
-
<div class="
|
|
673
|
-
<
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
<
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
<
|
|
682
|
-
|
|
776
|
+
<div class="space-sm">
|
|
777
|
+
<div data-source>
|
|
778
|
+
<div class="steps">
|
|
779
|
+
<div class="step">
|
|
780
|
+
<span class="step-num">1</span>
|
|
781
|
+
<p><strong>Install the package</strong> via npm or copy palace.css directly</p>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="step">
|
|
784
|
+
<span class="step-num">2</span>
|
|
785
|
+
<p><strong>Add the stylesheet</strong> to your HTML head (keep fonts/ next to palace.css)</p>
|
|
786
|
+
</div>
|
|
787
|
+
<div class="step">
|
|
788
|
+
<span class="step-num">3</span>
|
|
789
|
+
<p><strong>Use the classes.</strong> No build step needed — just write HTML</p>
|
|
790
|
+
</div>
|
|
683
791
|
</div>
|
|
684
792
|
</div>
|
|
685
793
|
</div>
|
|
@@ -689,33 +797,39 @@
|
|
|
689
797
|
|
|
690
798
|
<hr class="gradient-stripe">
|
|
691
799
|
|
|
692
|
-
<div class="container">
|
|
693
|
-
<
|
|
694
|
-
|
|
695
|
-
|
|
800
|
+
<div class="container space-lg">
|
|
801
|
+
<div class="space-xs">
|
|
802
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
803
|
+
<h2 id="stats">Stats</h2>
|
|
804
|
+
<p class="subtitle">Oversized numbers with labels. Picks up accent colors.</p>
|
|
805
|
+
</div>
|
|
696
806
|
|
|
697
|
-
<
|
|
698
|
-
|
|
699
|
-
<div
|
|
700
|
-
<div>
|
|
701
|
-
<div
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
<div
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
<div
|
|
710
|
-
|
|
807
|
+
<div class="space-sm">
|
|
808
|
+
<h3>Stat Row</h3>
|
|
809
|
+
<div data-source>
|
|
810
|
+
<div class="stat-row">
|
|
811
|
+
<div>
|
|
812
|
+
<div class="stat" style="--accent: var(--p-accent-1);">180mm</div>
|
|
813
|
+
<div class="stat-label">Travel</div>
|
|
814
|
+
</div>
|
|
815
|
+
<div>
|
|
816
|
+
<div class="stat" style="--accent: var(--p-accent-2);">20%</div>
|
|
817
|
+
<div class="stat-label">Sag</div>
|
|
818
|
+
</div>
|
|
819
|
+
<div>
|
|
820
|
+
<div class="stat" style="--accent: var(--p-accent-3);">450</div>
|
|
821
|
+
<div class="stat-label">Spring Rate</div>
|
|
822
|
+
</div>
|
|
711
823
|
</div>
|
|
712
824
|
</div>
|
|
713
825
|
</div>
|
|
714
826
|
|
|
715
|
-
<
|
|
716
|
-
|
|
717
|
-
<div
|
|
718
|
-
|
|
827
|
+
<div class="space-sm">
|
|
828
|
+
<h3>Single Stat</h3>
|
|
829
|
+
<div data-source>
|
|
830
|
+
<div class="stat" style="--accent: var(--p-accent-2);">1,024</div>
|
|
831
|
+
<div class="stat-label">Total Clicks</div>
|
|
832
|
+
</div>
|
|
719
833
|
</div>
|
|
720
834
|
</div>
|
|
721
835
|
|
|
@@ -723,24 +837,32 @@
|
|
|
723
837
|
|
|
724
838
|
<hr class="gradient-stripe">
|
|
725
839
|
|
|
726
|
-
<div class="container">
|
|
727
|
-
<
|
|
728
|
-
|
|
729
|
-
|
|
840
|
+
<div class="container space-lg">
|
|
841
|
+
<div class="space-xs">
|
|
842
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
843
|
+
<h2 id="dividers">Dividers</h2>
|
|
844
|
+
<p class="subtitle">Dashed dividers, danger dividers, and gradient stripes.</p>
|
|
845
|
+
</div>
|
|
730
846
|
|
|
731
|
-
<
|
|
732
|
-
|
|
733
|
-
<
|
|
847
|
+
<div class="space-sm">
|
|
848
|
+
<h3>Standard Divider</h3>
|
|
849
|
+
<div data-source>
|
|
850
|
+
<hr class="divider">
|
|
851
|
+
</div>
|
|
734
852
|
</div>
|
|
735
853
|
|
|
736
|
-
<
|
|
737
|
-
|
|
738
|
-
<
|
|
854
|
+
<div class="space-sm">
|
|
855
|
+
<h3>Danger Divider</h3>
|
|
856
|
+
<div data-source>
|
|
857
|
+
<hr class="divider-danger">
|
|
858
|
+
</div>
|
|
739
859
|
</div>
|
|
740
860
|
|
|
741
|
-
<
|
|
742
|
-
|
|
743
|
-
<
|
|
861
|
+
<div class="space-sm">
|
|
862
|
+
<h3>Gradient Stripe</h3>
|
|
863
|
+
<div data-source>
|
|
864
|
+
<hr class="gradient-stripe">
|
|
865
|
+
</div>
|
|
744
866
|
</div>
|
|
745
867
|
</div>
|
|
746
868
|
|
|
@@ -748,77 +870,141 @@
|
|
|
748
870
|
|
|
749
871
|
<hr class="gradient-stripe">
|
|
750
872
|
|
|
751
|
-
<div class="container">
|
|
752
|
-
<
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
<h3 style="margin-bottom: 12px;">Container Widths</h3>
|
|
757
|
-
<div data-source style="margin-bottom: 24px;">
|
|
758
|
-
<div style="max-width: 640px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px; margin-bottom: 8px;">
|
|
759
|
-
<code style="font-size: 12px;">.container</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 640px</span>
|
|
760
|
-
</div>
|
|
761
|
-
<div style="max-width: 420px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px;">
|
|
762
|
-
<code style="font-size: 12px;">.container-narrow</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 420px</span>
|
|
763
|
-
</div>
|
|
873
|
+
<div class="container space-lg">
|
|
874
|
+
<div class="space-xs">
|
|
875
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Layout</p>
|
|
876
|
+
<h2 id="layout">Containers, Space & Gap</h2>
|
|
877
|
+
<p class="subtitle">Content containers, page headers, and the space and gap utilities.</p>
|
|
764
878
|
</div>
|
|
765
879
|
|
|
766
|
-
<
|
|
767
|
-
|
|
768
|
-
<div
|
|
769
|
-
<
|
|
770
|
-
|
|
880
|
+
<div class="space-sm">
|
|
881
|
+
<h3>Container Widths</h3>
|
|
882
|
+
<div data-source class="space-sm">
|
|
883
|
+
<div style="max-width: 640px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px;">
|
|
884
|
+
<code style="font-size: 12px;">.container</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 640px</span>
|
|
885
|
+
</div>
|
|
886
|
+
<div style="max-width: 420px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px;">
|
|
887
|
+
<code style="font-size: 12px;">.container-narrow</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 420px</span>
|
|
888
|
+
</div>
|
|
771
889
|
</div>
|
|
772
890
|
</div>
|
|
773
891
|
|
|
774
|
-
<
|
|
775
|
-
|
|
776
|
-
<div>
|
|
777
|
-
<div class="
|
|
778
|
-
|
|
779
|
-
<
|
|
780
|
-
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
781
|
-
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
892
|
+
<div class="space-sm">
|
|
893
|
+
<h3>Page Header</h3>
|
|
894
|
+
<div data-source>
|
|
895
|
+
<div class="container page-header" style="border: 2px dashed var(--p-border-dashed); padding-left: 20px; padding-right: 20px;">
|
|
896
|
+
<h1>Page Title</h1>
|
|
897
|
+
<p class="subtitle">A helpful subtitle for the page</p>
|
|
782
898
|
</div>
|
|
783
899
|
</div>
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
900
|
+
</div>
|
|
901
|
+
|
|
902
|
+
<div class="space-sm">
|
|
903
|
+
<h3>Space (between children)</h3>
|
|
904
|
+
<p><code>space-*</code> on a container puts the same space between its direct children, top to bottom. Use it for a column of anything: paragraphs, fields, cards.</p>
|
|
905
|
+
<div data-source id="space-demo" class="gap-lg" style="display: flex; flex-wrap: wrap;">
|
|
906
|
+
<div class="space-sm">
|
|
907
|
+
<div class="stat-label">space-xs (4px)</div>
|
|
908
|
+
<div class="space-xs">
|
|
909
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
910
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
911
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
912
|
+
</div>
|
|
790
913
|
</div>
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
914
|
+
<div class="space-sm">
|
|
915
|
+
<div class="stat-label">space-sm (8px)</div>
|
|
916
|
+
<div class="space-sm">
|
|
917
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
918
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
919
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
920
|
+
</div>
|
|
798
921
|
</div>
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
922
|
+
<div class="space-sm">
|
|
923
|
+
<div class="stat-label">space-md (16px)</div>
|
|
924
|
+
<div class="space-md">
|
|
925
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
926
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
927
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
928
|
+
</div>
|
|
806
929
|
</div>
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
930
|
+
<div class="space-sm">
|
|
931
|
+
<div class="stat-label">space-lg (24px)</div>
|
|
932
|
+
<div class="space-lg">
|
|
933
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
934
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
935
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
936
|
+
</div>
|
|
937
|
+
</div>
|
|
938
|
+
<div class="space-sm">
|
|
939
|
+
<div class="stat-label">space-xl (32px)</div>
|
|
940
|
+
<div class="space-xl">
|
|
941
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
942
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
943
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
944
|
+
</div>
|
|
945
|
+
</div>
|
|
946
|
+
<div class="space-sm">
|
|
947
|
+
<div class="stat-label">space-2xl (48px)</div>
|
|
948
|
+
<div class="space-2xl">
|
|
949
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
950
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
951
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
952
|
+
</div>
|
|
814
953
|
</div>
|
|
815
954
|
</div>
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
955
|
+
</div>
|
|
956
|
+
|
|
957
|
+
<div class="space-sm">
|
|
958
|
+
<h3>Gap (rows and grids)</h3>
|
|
959
|
+
<p><code>gap-*</code> sets the gap of a flex or grid container. Use it for rows of buttons or tags and for grids.</p>
|
|
960
|
+
<div data-source id="gap-demo" class="gap-lg" style="display: flex; flex-wrap: wrap;">
|
|
961
|
+
<div class="space-sm">
|
|
962
|
+
<div class="stat-label">gap-xs (4px)</div>
|
|
963
|
+
<div class="gap-xs" style="display: flex;">
|
|
964
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
965
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
966
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
967
|
+
</div>
|
|
968
|
+
</div>
|
|
969
|
+
<div class="space-sm">
|
|
970
|
+
<div class="stat-label">gap-sm (8px)</div>
|
|
971
|
+
<div class="gap-sm" style="display: flex;">
|
|
972
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
973
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
974
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
<div class="space-sm">
|
|
978
|
+
<div class="stat-label">gap-md (16px)</div>
|
|
979
|
+
<div class="gap-md" style="display: flex;">
|
|
980
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
981
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
982
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
983
|
+
</div>
|
|
984
|
+
</div>
|
|
985
|
+
<div class="space-sm">
|
|
986
|
+
<div class="stat-label">gap-lg (24px)</div>
|
|
987
|
+
<div class="gap-lg" style="display: flex;">
|
|
988
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
989
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
990
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
<div class="space-sm">
|
|
994
|
+
<div class="stat-label">gap-xl (32px)</div>
|
|
995
|
+
<div class="gap-xl" style="display: flex;">
|
|
996
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
997
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
998
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
999
|
+
</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
<div class="space-sm">
|
|
1002
|
+
<div class="stat-label">gap-2xl (48px)</div>
|
|
1003
|
+
<div class="gap-2xl" style="display: flex;">
|
|
1004
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1005
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1006
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1007
|
+
</div>
|
|
822
1008
|
</div>
|
|
823
1009
|
</div>
|
|
824
1010
|
</div>
|
|
@@ -828,54 +1014,62 @@
|
|
|
828
1014
|
|
|
829
1015
|
<hr class="gradient-stripe">
|
|
830
1016
|
|
|
831
|
-
<div class="container">
|
|
832
|
-
<
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
<
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
<
|
|
859
|
-
|
|
860
|
-
<
|
|
861
|
-
<
|
|
1017
|
+
<div class="container space-lg">
|
|
1018
|
+
<div class="space-xs">
|
|
1019
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
1020
|
+
<h2 id="navbars">Navbar</h2>
|
|
1021
|
+
<p class="subtitle">Dark (default) and light variants.</p>
|
|
1022
|
+
</div>
|
|
1023
|
+
|
|
1024
|
+
<div class="space-sm">
|
|
1025
|
+
<h3>Dark (default)</h3>
|
|
1026
|
+
<div data-source>
|
|
1027
|
+
<nav class="navbar">
|
|
1028
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1029
|
+
<div class="navbar-right">
|
|
1030
|
+
<span class="navbar-user">Username</span>
|
|
1031
|
+
<button class="btn btn-sm">Log Out</button>
|
|
1032
|
+
</div>
|
|
1033
|
+
</nav>
|
|
1034
|
+
</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
|
|
1037
|
+
<div class="space-sm">
|
|
1038
|
+
<h3>With a navbar menu (open it)</h3>
|
|
1039
|
+
<div data-source style="padding-bottom: 300px;">
|
|
1040
|
+
<nav class="navbar">
|
|
1041
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1042
|
+
<div class="navbar-right">
|
|
1043
|
+
<details class="navbar-menu">
|
|
1044
|
+
<summary><span class="visually-hidden">Account: </span>Username</summary>
|
|
1045
|
+
<div class="navbar-menu-panel">
|
|
1046
|
+
<p class="navbar-menu-label" aria-hidden="true">Your teams</p>
|
|
1047
|
+
<ul aria-label="Your teams"><li><a href="#" aria-current="true">Team A</a></li><li><a href="#">Team B</a></li></ul>
|
|
1048
|
+
<a href="#">Account</a>
|
|
1049
|
+
<div class="navbar-menu-group" role="group" aria-labelledby="cat-menu-settings">
|
|
1050
|
+
<p class="navbar-menu-label" id="cat-menu-settings">Settings</p>
|
|
1051
|
+
<button type="button" class="navbar-menu-setting" aria-pressed="true">Notifications</button>
|
|
1052
|
+
<button type="button" class="navbar-menu-setting" aria-pressed="false">Sound</button>
|
|
1053
|
+
</div>
|
|
1054
|
+
<form><button type="button">Sign out</button></form>
|
|
862
1055
|
</div>
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
</nav>
|
|
1056
|
+
</details>
|
|
1057
|
+
</div>
|
|
1058
|
+
</nav>
|
|
1059
|
+
</div>
|
|
868
1060
|
</div>
|
|
869
1061
|
|
|
870
|
-
<
|
|
871
|
-
|
|
872
|
-
<
|
|
873
|
-
<
|
|
874
|
-
|
|
875
|
-
<
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
1062
|
+
<div class="space-sm">
|
|
1063
|
+
<h3>Light (.navbar-light)</h3>
|
|
1064
|
+
<div data-source>
|
|
1065
|
+
<nav class="navbar navbar-light" style="border: 2px solid var(--p-border);">
|
|
1066
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1067
|
+
<div class="navbar-right">
|
|
1068
|
+
<span class="navbar-user">Username</span>
|
|
1069
|
+
<button class="btn btn-sm">Log Out</button>
|
|
1070
|
+
</div>
|
|
1071
|
+
</nav>
|
|
1072
|
+
</div>
|
|
879
1073
|
</div>
|
|
880
1074
|
</div>
|
|
881
1075
|
|
|
@@ -883,30 +1077,36 @@
|
|
|
883
1077
|
|
|
884
1078
|
<hr class="gradient-stripe">
|
|
885
1079
|
|
|
886
|
-
<div class="container">
|
|
887
|
-
<
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
1080
|
+
<div class="container space-lg">
|
|
1081
|
+
<div class="space-xs">
|
|
1082
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Motion</p>
|
|
1083
|
+
<h2 id="animations">Animations</h2>
|
|
1084
|
+
<p class="subtitle">Fade-up entrance and gradient stripe. Respects prefers-reduced-motion.</p>
|
|
1085
|
+
</div>
|
|
1086
|
+
|
|
1087
|
+
<div class="space-sm">
|
|
1088
|
+
<h3>Fade Up (staggered)</h3>
|
|
1089
|
+
<div data-source class="space-md">
|
|
1090
|
+
<div class="card fade-up" style="animation-delay: 0s;">
|
|
1091
|
+
<span class="h2">First</span>
|
|
1092
|
+
<p>Fades in immediately.</p>
|
|
1093
|
+
</div>
|
|
1094
|
+
<div class="card fade-up" style="animation-delay: 0.1s;">
|
|
1095
|
+
<span class="h2">Second</span>
|
|
1096
|
+
<p>Fades in after 100ms.</p>
|
|
1097
|
+
</div>
|
|
1098
|
+
<div class="card fade-up" style="animation-delay: 0.2s;">
|
|
1099
|
+
<span class="h2">Third</span>
|
|
1100
|
+
<p>Fades in after 200ms.</p>
|
|
1101
|
+
</div>
|
|
904
1102
|
</div>
|
|
905
1103
|
</div>
|
|
906
1104
|
|
|
907
|
-
<
|
|
908
|
-
|
|
909
|
-
<
|
|
1105
|
+
<div class="space-sm">
|
|
1106
|
+
<h3>Gradient Stripe (infinite)</h3>
|
|
1107
|
+
<div data-source>
|
|
1108
|
+
<hr class="gradient-stripe">
|
|
1109
|
+
</div>
|
|
910
1110
|
</div>
|
|
911
1111
|
</div>
|
|
912
1112
|
|
|
@@ -914,77 +1114,96 @@
|
|
|
914
1114
|
|
|
915
1115
|
<hr class="gradient-stripe">
|
|
916
1116
|
|
|
917
|
-
<div class="container">
|
|
918
|
-
<
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
<h3 style="margin-bottom: 12px;">Empty State</h3>
|
|
923
|
-
<div data-source style="margin-bottom: 24px;">
|
|
924
|
-
<p class="empty">No items yet</p>
|
|
925
|
-
</div>
|
|
926
|
-
|
|
927
|
-
<h3 style="margin-bottom: 12px;">Danger Zone</h3>
|
|
928
|
-
<div data-source style="margin-bottom: 24px;">
|
|
929
|
-
<hr class="divider-danger">
|
|
930
|
-
<div class="danger-zone">
|
|
931
|
-
<span class="h2">Danger Zone</span>
|
|
932
|
-
<p style="margin-bottom: 12px;">This will permanently delete your account. This cannot be undone.</p>
|
|
933
|
-
<button class="btn btn-danger btn-block">Delete My Account</button>
|
|
934
|
-
</div>
|
|
1117
|
+
<div class="container space-lg">
|
|
1118
|
+
<div class="space-xs">
|
|
1119
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
1120
|
+
<h2 id="misc">Miscellaneous</h2>
|
|
1121
|
+
<p class="subtitle">Empty states, danger zones, watermarks, links, and lists.</p>
|
|
935
1122
|
</div>
|
|
936
1123
|
|
|
937
|
-
<
|
|
938
|
-
|
|
939
|
-
<
|
|
940
|
-
<
|
|
941
|
-
|
|
942
|
-
<menu>
|
|
943
|
-
<li><button class="btn">Cancel</button></li>
|
|
944
|
-
<li><button class="btn btn-danger">Delete</button></li>
|
|
945
|
-
</menu>
|
|
946
|
-
</dialog>
|
|
1124
|
+
<div class="space-sm">
|
|
1125
|
+
<h3>Empty State</h3>
|
|
1126
|
+
<div data-source>
|
|
1127
|
+
<p class="empty">No items yet</p>
|
|
1128
|
+
</div>
|
|
947
1129
|
</div>
|
|
948
1130
|
|
|
949
|
-
<
|
|
950
|
-
|
|
951
|
-
<
|
|
1131
|
+
<div class="space-sm">
|
|
1132
|
+
<h3>Danger Zone</h3>
|
|
1133
|
+
<div data-source>
|
|
1134
|
+
<hr class="divider-danger">
|
|
1135
|
+
<div class="danger-zone space-sm">
|
|
1136
|
+
<span class="h2">Danger Zone</span>
|
|
1137
|
+
<p>This will permanently delete your account. This cannot be undone.</p>
|
|
1138
|
+
<button class="btn btn-danger btn-block">Delete My Account</button>
|
|
1139
|
+
</div>
|
|
1140
|
+
</div>
|
|
952
1141
|
</div>
|
|
953
1142
|
|
|
954
|
-
<
|
|
955
|
-
|
|
956
|
-
<
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1143
|
+
<div class="space-sm">
|
|
1144
|
+
<h3>Dialog</h3>
|
|
1145
|
+
<p>Spaces its direct children, or those of a direct <code><form method="dialog"></code>. The action buttons share the width.</p>
|
|
1146
|
+
<div data-source>
|
|
1147
|
+
<dialog open style="position: static;">
|
|
1148
|
+
<form method="dialog">
|
|
1149
|
+
<h2>Delete project?</h2>
|
|
1150
|
+
<p class="subtitle">This cannot be undone.</p>
|
|
1151
|
+
<menu>
|
|
1152
|
+
<li><button class="btn" value="cancel">Cancel</button></li>
|
|
1153
|
+
<li><button class="btn btn-danger" value="delete">Delete</button></li>
|
|
1154
|
+
</menu>
|
|
1155
|
+
</form>
|
|
1156
|
+
</dialog>
|
|
962
1157
|
</div>
|
|
963
1158
|
</div>
|
|
964
1159
|
|
|
965
|
-
<
|
|
966
|
-
|
|
967
|
-
<
|
|
1160
|
+
<div class="space-sm">
|
|
1161
|
+
<h3>Kbd</h3>
|
|
1162
|
+
<div data-source>
|
|
1163
|
+
<kbd>Ctrl</kbd> + <kbd>Z</kbd>
|
|
1164
|
+
</div>
|
|
968
1165
|
</div>
|
|
969
1166
|
|
|
970
|
-
<
|
|
971
|
-
|
|
972
|
-
<
|
|
973
|
-
<
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
</ul>
|
|
1167
|
+
<div class="space-sm">
|
|
1168
|
+
<h3>Watermarks</h3>
|
|
1169
|
+
<p style="font-size: 13px; color: var(--p-text-secondary);">
|
|
1170
|
+
<code>.watermarks</code> is a specialized utility for fixed-position SVG backgrounds. It creates subtle, non-interactive visual texture behind page content. No live demo (it would cover the entire catalog), but here is the markup:
|
|
1171
|
+
</p>
|
|
1172
|
+
<div data-source>
|
|
1173
|
+
<div class="watermarks">
|
|
1174
|
+
<svg style="top: 10%; left: -5%;"><!-- SVG content --></svg>
|
|
1175
|
+
<svg style="top: 50%; right: -5%;"><!-- SVG content --></svg>
|
|
980
1176
|
</div>
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
1177
|
+
</div>
|
|
1178
|
+
</div>
|
|
1179
|
+
|
|
1180
|
+
<div class="space-sm">
|
|
1181
|
+
<h3>Links</h3>
|
|
1182
|
+
<div data-source>
|
|
1183
|
+
<p>This is a paragraph with a <a href="#">link to somewhere</a> in the middle of it. Links use border-bottom, not text-decoration.</p>
|
|
1184
|
+
</div>
|
|
1185
|
+
</div>
|
|
1186
|
+
|
|
1187
|
+
<div class="space-sm">
|
|
1188
|
+
<h3>Lists</h3>
|
|
1189
|
+
<div data-source>
|
|
1190
|
+
<div class="gap-2xl" style="display: flex; flex-wrap: wrap;">
|
|
1191
|
+
<div class="container space-sm" style="padding: 0; max-width: 250px;">
|
|
1192
|
+
<p style="font-weight: 600;">Unordered</p>
|
|
1193
|
+
<ul>
|
|
1194
|
+
<li>Hard edges everywhere</li>
|
|
1195
|
+
<li>2px borders, always</li>
|
|
1196
|
+
<li>Zero border radius</li>
|
|
1197
|
+
</ul>
|
|
1198
|
+
</div>
|
|
1199
|
+
<div class="container space-sm" style="padding: 0; max-width: 250px;">
|
|
1200
|
+
<p style="font-weight: 600;">Ordered</p>
|
|
1201
|
+
<ol>
|
|
1202
|
+
<li>Install palace.css</li>
|
|
1203
|
+
<li>Keep fonts/ next to it</li>
|
|
1204
|
+
<li>Write HTML</li>
|
|
1205
|
+
</ol>
|
|
1206
|
+
</div>
|
|
988
1207
|
</div>
|
|
989
1208
|
</div>
|
|
990
1209
|
</div>
|
|
@@ -996,7 +1215,7 @@
|
|
|
996
1215
|
|
|
997
1216
|
<div class="container">
|
|
998
1217
|
<div class="footer">
|
|
999
|
-
Palace UI v0.
|
|
1218
|
+
Palace UI v0.14.0 — CSS-only design system. <a href="#">GitHub</a>
|
|
1000
1219
|
</div>
|
|
1001
1220
|
</div>
|
|
1002
1221
|
|
|
@@ -1019,13 +1238,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
1019
1238
|
.replace(/>/g, '>');
|
|
1020
1239
|
const pre = document.createElement('pre');
|
|
1021
1240
|
pre.innerHTML = escaped;
|
|
1022
|
-
pre.style.marginTop = '12px';
|
|
1023
1241
|
el.after(pre);
|
|
1024
1242
|
});
|
|
1025
1243
|
});
|
|
1026
1244
|
</script>
|
|
1027
1245
|
|
|
1028
|
-
<noscript><
|
|
1246
|
+
<noscript><div class="container"><p class="status">Source code examples require JavaScript.</p></div></noscript>
|
|
1029
1247
|
|
|
1030
1248
|
</body>
|
|
1031
1249
|
</html>
|