palace-ui 0.13.0 → 0.14.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 +175 -59
- package/catalog.html +887 -674
- package/package.json +8 -2
- package/palace.css +132 -49
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,30 @@
|
|
|
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.</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-sm) var(--p-accent-1);"></div>
|
|
350
|
+
<div class="stat-label">--p-shadow-sm</div>
|
|
351
|
+
<code style="font-size: 11px;">2px 2px 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-md) var(--p-accent-2);"></div>
|
|
355
|
+
<div class="stat-label">--p-shadow-md</div>
|
|
356
|
+
<code style="font-size: 11px;">3px 3px 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-lg) var(--p-accent-3);"></div>
|
|
360
|
+
<div class="stat-label">--p-shadow-lg</div>
|
|
361
|
+
<code style="font-size: 11px;">4px 4px 0</code>
|
|
362
|
+
</div>
|
|
336
363
|
</div>
|
|
337
364
|
</div>
|
|
338
365
|
</div>
|
|
@@ -341,53 +368,67 @@
|
|
|
341
368
|
|
|
342
369
|
<hr class="gradient-stripe">
|
|
343
370
|
|
|
344
|
-
<div class="container">
|
|
345
|
-
<
|
|
346
|
-
|
|
347
|
-
|
|
371
|
+
<div class="container space-lg">
|
|
372
|
+
<div class="space-xs">
|
|
373
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
374
|
+
<h2 id="buttons">Buttons</h2>
|
|
375
|
+
<p class="subtitle">4 variants, 3 sizes, disabled + CTA.</p>
|
|
376
|
+
</div>
|
|
348
377
|
|
|
349
|
-
<
|
|
350
|
-
|
|
351
|
-
<
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
378
|
+
<div class="space-sm">
|
|
379
|
+
<h3>Variants (default size)</h3>
|
|
380
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
381
|
+
<button class="btn btn-primary">Primary</button>
|
|
382
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
383
|
+
<button class="btn btn-outline">Outline</button>
|
|
384
|
+
<button class="btn btn-danger">Danger</button>
|
|
385
|
+
</div>
|
|
355
386
|
</div>
|
|
356
387
|
|
|
357
|
-
<
|
|
358
|
-
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
|
|
388
|
+
<div class="space-sm">
|
|
389
|
+
<h3>Sizes</h3>
|
|
390
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap; align-items: center;">
|
|
391
|
+
<button class="btn btn-sm btn-primary">Small</button>
|
|
392
|
+
<button class="btn btn-primary">Default</button>
|
|
393
|
+
<button class="btn btn-lg btn-primary">Large</button>
|
|
394
|
+
</div>
|
|
362
395
|
</div>
|
|
363
396
|
|
|
364
|
-
<
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
<
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
397
|
+
<div class="space-sm">
|
|
398
|
+
<h3>Buttons and links side by side</h3>
|
|
399
|
+
<p>A <code><button></code> and an <code><a class="btn"></code> of the same size are the same height and line up.</p>
|
|
400
|
+
<div data-source id="btn-match" class="gap-sm" style="display: flex; flex-wrap: wrap; align-items: baseline;">
|
|
401
|
+
<button class="btn btn-sm btn-outline">Button</button>
|
|
402
|
+
<a href="#" class="btn btn-sm btn-outline">Link</a>
|
|
403
|
+
<button class="btn btn-primary">Button</button>
|
|
404
|
+
<a href="#" class="btn btn-primary">Link</a>
|
|
405
|
+
<button class="btn btn-lg btn-secondary">Button</button>
|
|
406
|
+
<a href="#" class="btn btn-lg btn-secondary">Link</a>
|
|
407
|
+
</div>
|
|
373
408
|
</div>
|
|
374
409
|
|
|
375
|
-
<
|
|
376
|
-
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
|
|
410
|
+
<div class="space-sm">
|
|
411
|
+
<h3>Disabled</h3>
|
|
412
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
413
|
+
<button class="btn btn-primary" disabled>Disabled</button>
|
|
414
|
+
<button class="btn btn-secondary" disabled>Disabled</button>
|
|
415
|
+
<button class="btn btn-outline" disabled>Disabled</button>
|
|
416
|
+
</div>
|
|
380
417
|
</div>
|
|
381
418
|
|
|
382
|
-
<
|
|
383
|
-
|
|
384
|
-
<
|
|
419
|
+
<div class="space-sm">
|
|
420
|
+
<h3>Block</h3>
|
|
421
|
+
<div data-source>
|
|
422
|
+
<button class="btn btn-primary btn-block">Full Width Button</button>
|
|
423
|
+
</div>
|
|
385
424
|
</div>
|
|
386
425
|
|
|
387
|
-
<
|
|
388
|
-
|
|
389
|
-
<
|
|
390
|
-
|
|
426
|
+
<div class="space-sm">
|
|
427
|
+
<h3>CTA (hero sections)</h3>
|
|
428
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
429
|
+
<a href="#" class="cta cta-primary">Sign Up</a>
|
|
430
|
+
<a href="#" class="cta cta-secondary">Learn More</a>
|
|
431
|
+
</div>
|
|
391
432
|
</div>
|
|
392
433
|
</div>
|
|
393
434
|
|
|
@@ -395,35 +436,41 @@
|
|
|
395
436
|
|
|
396
437
|
<hr class="gradient-stripe">
|
|
397
438
|
|
|
398
|
-
<div class="container">
|
|
399
|
-
<
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
439
|
+
<div class="container space-lg">
|
|
440
|
+
<div class="space-xs">
|
|
441
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
442
|
+
<h2 id="cards">Cards</h2>
|
|
443
|
+
<p class="subtitle">3-color accent rotation. Hover for lift + shadow.</p>
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<div class="space-sm">
|
|
447
|
+
<div data-source class="space-md">
|
|
448
|
+
<div class="card">
|
|
449
|
+
<span class="h2">First Card</span>
|
|
450
|
+
<p>Accent 1 (pink). Headings pick up the accent color automatically. Hover to see the lift and hard shadow.</p>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="card">
|
|
453
|
+
<span class="h2">Second Card</span>
|
|
454
|
+
<p>Accent 2 (purple). The rotation cycles through all three accent colors on sibling cards.</p>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="card">
|
|
457
|
+
<span class="h2">Third Card</span>
|
|
458
|
+
<p>Accent 3 (cyan shadow on hover). Heading uses dark text for accessible contrast.</p>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="card">
|
|
461
|
+
<span class="h2">Fourth Card</span>
|
|
462
|
+
<p>Back to accent 1 (pink). The rotation repeats every 3 cards.</p>
|
|
463
|
+
</div>
|
|
419
464
|
</div>
|
|
420
465
|
</div>
|
|
421
466
|
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
<div
|
|
425
|
-
<
|
|
426
|
-
|
|
467
|
+
<div class="space-sm">
|
|
468
|
+
<h3>Static Card (no hover)</h3>
|
|
469
|
+
<div data-source>
|
|
470
|
+
<div class="card-static">
|
|
471
|
+
<span class="h2">Form Container</span>
|
|
472
|
+
<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.</p>
|
|
473
|
+
</div>
|
|
427
474
|
</div>
|
|
428
475
|
</div>
|
|
429
476
|
</div>
|
|
@@ -432,76 +479,104 @@
|
|
|
432
479
|
|
|
433
480
|
<hr class="gradient-stripe">
|
|
434
481
|
|
|
435
|
-
<div class="container">
|
|
436
|
-
<
|
|
437
|
-
|
|
438
|
-
|
|
482
|
+
<div class="container space-lg">
|
|
483
|
+
<div class="space-xs">
|
|
484
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
485
|
+
<h2 id="forms">Forms</h2>
|
|
486
|
+
<p class="subtitle">Fields, text inputs, select, number input, textarea, control rows.</p>
|
|
487
|
+
</div>
|
|
439
488
|
|
|
440
|
-
<div
|
|
441
|
-
<div class="
|
|
442
|
-
<div>
|
|
489
|
+
<div class="space-sm">
|
|
490
|
+
<div data-source class="card-static space-md">
|
|
491
|
+
<div class="field">
|
|
443
492
|
<label for="cat-name">Full Name</label>
|
|
444
493
|
<input type="text" id="cat-name" placeholder="Enter your name">
|
|
445
494
|
</div>
|
|
446
|
-
<div>
|
|
495
|
+
<div class="field">
|
|
447
496
|
<label for="cat-email">Email Address</label>
|
|
448
|
-
<input type="email" id="cat-email"
|
|
497
|
+
<input type="email" id="cat-email" value="you@example" aria-invalid="true" aria-describedby="cat-email-error">
|
|
498
|
+
<p class="field-error" id="cat-email-error">Enter an email address with a domain, like you@example.com.</p>
|
|
449
499
|
</div>
|
|
450
|
-
<div>
|
|
500
|
+
<div class="field">
|
|
451
501
|
<label for="cat-password">Password</label>
|
|
452
|
-
<input type="password" id="cat-password"
|
|
502
|
+
<input type="password" id="cat-password" aria-describedby="cat-password-hint">
|
|
503
|
+
<p class="field-hint" id="cat-password-hint">At least 8 characters.</p>
|
|
453
504
|
</div>
|
|
454
|
-
<div>
|
|
505
|
+
<div class="field">
|
|
455
506
|
<label for="cat-search">Search</label>
|
|
456
507
|
<input type="search" id="cat-search" placeholder="Search...">
|
|
457
508
|
</div>
|
|
458
|
-
<div>
|
|
509
|
+
<div class="field">
|
|
459
510
|
<label for="cat-direction">Direction</label>
|
|
460
511
|
<select id="cat-direction"><option>Anticlockwise</option><option>Clockwise</option></select>
|
|
461
512
|
</div>
|
|
462
|
-
<div>
|
|
513
|
+
<div class="field">
|
|
463
514
|
<label for="cat-num">Quantity</label>
|
|
464
515
|
<input type="number" id="cat-num" value="5" min="0" max="99">
|
|
465
516
|
</div>
|
|
466
|
-
<div>
|
|
517
|
+
<div class="field">
|
|
467
518
|
<label for="cat-notes">Notes</label>
|
|
468
519
|
<textarea id="cat-notes" placeholder="Write something..."></textarea>
|
|
469
520
|
</div>
|
|
470
|
-
<
|
|
471
|
-
<button class="btn btn-primary btn-block">Submit</button>
|
|
472
|
-
</div>
|
|
521
|
+
<button class="btn btn-primary btn-block">Submit</button>
|
|
473
522
|
</div>
|
|
474
523
|
</div>
|
|
475
524
|
|
|
476
|
-
<
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<div class="
|
|
525
|
+
<div class="space-sm">
|
|
526
|
+
<h3>Checkboxes, radio buttons and disclosures</h3>
|
|
527
|
+
<p>Tab through them: each gets the same focus ring as links and buttons.</p>
|
|
528
|
+
<div data-source id="focus-controls" class="card-static space-md">
|
|
480
529
|
<label><input type="checkbox" checked> Show lap times</label>
|
|
481
|
-
<fieldset style="border: 0;">
|
|
530
|
+
<fieldset class="gap-sm" style="display: grid; border: 0;">
|
|
482
531
|
<legend class="visually-hidden">Direction</legend>
|
|
483
532
|
<label><input type="radio" name="cat-dir" checked> Anticlockwise</label>
|
|
484
533
|
<label><input type="radio" name="cat-dir"> Clockwise</label>
|
|
485
534
|
</fieldset>
|
|
486
|
-
<details>
|
|
535
|
+
<details class="space-sm">
|
|
487
536
|
<summary>More options</summary>
|
|
488
537
|
<p>Hidden until the summary is opened.</p>
|
|
489
538
|
</details>
|
|
490
539
|
</div>
|
|
491
540
|
</div>
|
|
492
541
|
|
|
493
|
-
<
|
|
494
|
-
|
|
495
|
-
<
|
|
496
|
-
<
|
|
542
|
+
<div class="space-sm">
|
|
543
|
+
<h3>Control Row</h3>
|
|
544
|
+
<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>
|
|
545
|
+
<div data-source id="control-row" class="control-row">
|
|
546
|
+
<input type="text" placeholder="Add a label" aria-label="Add a label">
|
|
547
|
+
<button class="btn btn-primary">Create</button>
|
|
548
|
+
</div>
|
|
549
|
+
<div data-source id="control-row-fields" class="control-row">
|
|
550
|
+
<div class="field">
|
|
551
|
+
<label for="cat-driver">Driver</label>
|
|
552
|
+
<input type="text" id="cat-driver" placeholder="Ada">
|
|
553
|
+
</div>
|
|
554
|
+
<div class="field">
|
|
555
|
+
<label for="cat-car">Car</label>
|
|
556
|
+
<select id="cat-car"><option>Red</option><option>Blue</option></select>
|
|
557
|
+
</div>
|
|
558
|
+
<button class="btn btn-primary">Add Driver</button>
|
|
559
|
+
</div>
|
|
560
|
+
<div data-source id="control-row-error" class="space-sm">
|
|
561
|
+
<div class="control-row">
|
|
562
|
+
<div class="field">
|
|
563
|
+
<label for="cat-code">Transponder</label>
|
|
564
|
+
<input type="text" id="cat-code" value="4821" aria-invalid="true" aria-describedby="cat-code-error">
|
|
565
|
+
</div>
|
|
566
|
+
<button class="btn btn-primary">Assign</button>
|
|
567
|
+
</div>
|
|
568
|
+
<p class="field-error" id="cat-code-error">Transponder 4821 is already assigned to Ada.</p>
|
|
569
|
+
</div>
|
|
497
570
|
</div>
|
|
498
571
|
|
|
499
|
-
<
|
|
500
|
-
|
|
501
|
-
<
|
|
502
|
-
|
|
503
|
-
<
|
|
504
|
-
|
|
572
|
+
<div class="space-sm">
|
|
573
|
+
<h3>Field with a Button Inside</h3>
|
|
574
|
+
<div data-source class="field">
|
|
575
|
+
<label for="pw-demo">Password</label>
|
|
576
|
+
<div class="input-action">
|
|
577
|
+
<input type="password" id="pw-demo" autocomplete="off">
|
|
578
|
+
<button type="button" class="btn btn-sm btn-outline" aria-label="Show password">Show</button>
|
|
579
|
+
</div>
|
|
505
580
|
</div>
|
|
506
581
|
</div>
|
|
507
582
|
</div>
|
|
@@ -510,68 +585,74 @@
|
|
|
510
585
|
|
|
511
586
|
<hr class="gradient-stripe">
|
|
512
587
|
|
|
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
|
-
|
|
588
|
+
<div class="container space-lg">
|
|
589
|
+
<div class="space-xs">
|
|
590
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
591
|
+
<h2 id="tables">Tables</h2>
|
|
592
|
+
<p class="subtitle">Full-width with uppercase headers.</p>
|
|
593
|
+
</div>
|
|
594
|
+
|
|
595
|
+
<div class="space-sm">
|
|
596
|
+
<div data-source>
|
|
597
|
+
<table>
|
|
598
|
+
<thead>
|
|
599
|
+
<tr>
|
|
600
|
+
<th>Component</th>
|
|
601
|
+
<th>Category</th>
|
|
602
|
+
<th>Status</th>
|
|
603
|
+
<th style="text-align: right;">Lines</th>
|
|
604
|
+
</tr>
|
|
605
|
+
</thead>
|
|
606
|
+
<tbody>
|
|
607
|
+
<tr>
|
|
608
|
+
<td style="font-weight: 600;">Buttons</td>
|
|
609
|
+
<td>Interactive</td>
|
|
610
|
+
<td><span class="badge">Stable</span></td>
|
|
611
|
+
<td style="text-align: right;">120</td>
|
|
612
|
+
</tr>
|
|
613
|
+
<tr>
|
|
614
|
+
<td style="font-weight: 600;">Cards</td>
|
|
615
|
+
<td>Layout</td>
|
|
616
|
+
<td><span class="badge">Stable</span></td>
|
|
617
|
+
<td style="text-align: right;">45</td>
|
|
618
|
+
</tr>
|
|
619
|
+
<tr>
|
|
620
|
+
<td style="font-weight: 600;">Forms</td>
|
|
621
|
+
<td>Interactive</td>
|
|
622
|
+
<td><span class="badge">Stable</span></td>
|
|
623
|
+
<td style="text-align: right;">80</td>
|
|
624
|
+
</tr>
|
|
625
|
+
<tr>
|
|
626
|
+
<td style="font-weight: 600;">Status</td>
|
|
627
|
+
<td>Feedback</td>
|
|
628
|
+
<td><span class="badge">Updated</span></td>
|
|
629
|
+
<td style="text-align: right;">30</td>
|
|
630
|
+
</tr>
|
|
631
|
+
<tr>
|
|
632
|
+
<td style="font-weight: 600;">Navbar</td>
|
|
633
|
+
<td>Navigation</td>
|
|
634
|
+
<td><span class="badge">Updated</span></td>
|
|
635
|
+
<td style="text-align: right;">55</td>
|
|
636
|
+
</tr>
|
|
637
|
+
</tbody>
|
|
638
|
+
</table>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
|
|
642
|
+
<div class="space-sm">
|
|
643
|
+
<h3>Scrolling table</h3>
|
|
644
|
+
<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>
|
|
645
|
+
<div data-source id="scroll-table" style="overflow-x: auto; position: relative;">
|
|
646
|
+
<table style="min-width: 640px;">
|
|
647
|
+
<thead>
|
|
648
|
+
<tr><th>Driver</th><th>Laps</th><th>Best</th><th>Last</th><th><span class="visually-hidden">Actions</span></th></tr>
|
|
649
|
+
</thead>
|
|
650
|
+
<tbody>
|
|
651
|
+
<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>
|
|
652
|
+
<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>
|
|
653
|
+
</tbody>
|
|
654
|
+
</table>
|
|
655
|
+
</div>
|
|
575
656
|
</div>
|
|
576
657
|
</div>
|
|
577
658
|
|
|
@@ -579,30 +660,36 @@
|
|
|
579
660
|
|
|
580
661
|
<hr class="gradient-stripe">
|
|
581
662
|
|
|
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
|
-
<
|
|
663
|
+
<div class="container space-lg">
|
|
664
|
+
<div class="space-xs">
|
|
665
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
666
|
+
<h2 id="code">Code</h2>
|
|
667
|
+
<p class="subtitle">Pre blocks and code-reveal panels.</p>
|
|
668
|
+
</div>
|
|
669
|
+
|
|
670
|
+
<div class="space-sm">
|
|
671
|
+
<h3>Pre Block</h3>
|
|
672
|
+
<div data-source>
|
|
673
|
+
<pre>:root {
|
|
674
|
+
--p-accent-1: #ff2d9b;
|
|
675
|
+
--p-accent-2: #5b4cff;
|
|
676
|
+
--p-accent-3: #00e5ff;
|
|
677
|
+
--p-radius: 0;
|
|
678
|
+
}</pre>
|
|
679
|
+
</div>
|
|
680
|
+
</div>
|
|
681
|
+
|
|
682
|
+
<div class="space-sm">
|
|
683
|
+
<h3>Code Reveal</h3>
|
|
684
|
+
<div data-source>
|
|
685
|
+
<div class="code-reveal">
|
|
686
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">
|
|
687
|
+
API Key — copy this, you won't see it again
|
|
688
|
+
</p>
|
|
689
|
+
<code>pk_live_a1b2c3d4e5f6g7h8i9j0</code>
|
|
690
|
+
<div class="gap-sm" style="display: flex;">
|
|
691
|
+
<button class="btn btn-secondary btn-sm">Copy</button>
|
|
692
|
+
</div>
|
|
606
693
|
</div>
|
|
607
694
|
</div>
|
|
608
695
|
</div>
|
|
@@ -612,31 +699,39 @@
|
|
|
612
699
|
|
|
613
700
|
<hr class="gradient-stripe">
|
|
614
701
|
|
|
615
|
-
<div class="container">
|
|
616
|
-
<
|
|
617
|
-
|
|
618
|
-
|
|
702
|
+
<div class="container space-lg">
|
|
703
|
+
<div class="space-xs">
|
|
704
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
705
|
+
<h2 id="tags">Tags & Badges</h2>
|
|
706
|
+
<p class="subtitle">Tags, badges, and sticker tags with rotation.</p>
|
|
707
|
+
</div>
|
|
619
708
|
|
|
620
|
-
<
|
|
621
|
-
|
|
622
|
-
<
|
|
623
|
-
|
|
624
|
-
|
|
709
|
+
<div class="space-sm">
|
|
710
|
+
<h3>Tags</h3>
|
|
711
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
712
|
+
<span class="tag">Volume Spacer</span>
|
|
713
|
+
<span class="tag">Custom Tune</span>
|
|
714
|
+
<span class="tag">Bleed Kit</span>
|
|
715
|
+
</div>
|
|
625
716
|
</div>
|
|
626
717
|
|
|
627
|
-
<
|
|
628
|
-
|
|
629
|
-
<
|
|
630
|
-
|
|
631
|
-
|
|
718
|
+
<div class="space-sm">
|
|
719
|
+
<h3>Badges</h3>
|
|
720
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
721
|
+
<span class="badge">Stable</span>
|
|
722
|
+
<span class="badge">New</span>
|
|
723
|
+
<span class="badge">Clicks</span>
|
|
724
|
+
</div>
|
|
632
725
|
</div>
|
|
633
726
|
|
|
634
|
-
<
|
|
635
|
-
|
|
636
|
-
<
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
727
|
+
<div class="space-sm">
|
|
728
|
+
<h3>Sticker Tags</h3>
|
|
729
|
+
<div data-source class="gap-sm" style="display: flex; flex-wrap: wrap;">
|
|
730
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-1);">Volume Spacer</span>
|
|
731
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-2);">Custom Tune</span>
|
|
732
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-3);">Bleed Kit</span>
|
|
733
|
+
<span class="tag-sticker" style="--accent: var(--p-accent-1);">Pro Setup</span>
|
|
734
|
+
</div>
|
|
640
735
|
</div>
|
|
641
736
|
</div>
|
|
642
737
|
|
|
@@ -644,17 +739,21 @@
|
|
|
644
739
|
|
|
645
740
|
<hr class="gradient-stripe">
|
|
646
741
|
|
|
647
|
-
<div class="container">
|
|
648
|
-
<
|
|
649
|
-
|
|
650
|
-
|
|
742
|
+
<div class="container space-lg">
|
|
743
|
+
<div class="space-xs">
|
|
744
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
745
|
+
<h2 id="status">Status Messages</h2>
|
|
746
|
+
<p class="subtitle">Success, error, warning, info, and base.</p>
|
|
747
|
+
</div>
|
|
651
748
|
|
|
652
|
-
<div
|
|
653
|
-
<div class="
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
749
|
+
<div class="space-sm">
|
|
750
|
+
<div data-source class="space-sm">
|
|
751
|
+
<div class="status status-success" role="status">Account created successfully</div>
|
|
752
|
+
<div class="status status-error" role="alert">Something went wrong — please try again</div>
|
|
753
|
+
<div class="status status-warning" role="alert">Your session will expire in 5 minutes</div>
|
|
754
|
+
<div class="status status-info" role="status">New features are available in v0.14.0</div>
|
|
755
|
+
<div class="status">Neutral status message</div>
|
|
756
|
+
</div>
|
|
658
757
|
</div>
|
|
659
758
|
</div>
|
|
660
759
|
|
|
@@ -662,24 +761,28 @@
|
|
|
662
761
|
|
|
663
762
|
<hr class="gradient-stripe">
|
|
664
763
|
|
|
665
|
-
<div class="container">
|
|
666
|
-
<
|
|
667
|
-
|
|
668
|
-
|
|
764
|
+
<div class="container space-lg">
|
|
765
|
+
<div class="space-xs">
|
|
766
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
767
|
+
<h2 id="steps">Steps</h2>
|
|
768
|
+
<p class="subtitle">Numbered instruction lists.</p>
|
|
769
|
+
</div>
|
|
669
770
|
|
|
670
|
-
<div
|
|
671
|
-
<div
|
|
672
|
-
<div class="
|
|
673
|
-
<
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
<
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
<
|
|
682
|
-
|
|
771
|
+
<div class="space-sm">
|
|
772
|
+
<div data-source>
|
|
773
|
+
<div class="steps">
|
|
774
|
+
<div class="step">
|
|
775
|
+
<span class="step-num">1</span>
|
|
776
|
+
<p><strong>Install the package</strong> via npm or copy palace.css directly</p>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="step">
|
|
779
|
+
<span class="step-num">2</span>
|
|
780
|
+
<p><strong>Add the stylesheet</strong> to your HTML head (keep fonts/ next to palace.css)</p>
|
|
781
|
+
</div>
|
|
782
|
+
<div class="step">
|
|
783
|
+
<span class="step-num">3</span>
|
|
784
|
+
<p><strong>Use the classes.</strong> No build step needed — just write HTML</p>
|
|
785
|
+
</div>
|
|
683
786
|
</div>
|
|
684
787
|
</div>
|
|
685
788
|
</div>
|
|
@@ -689,33 +792,39 @@
|
|
|
689
792
|
|
|
690
793
|
<hr class="gradient-stripe">
|
|
691
794
|
|
|
692
|
-
<div class="container">
|
|
693
|
-
<
|
|
694
|
-
|
|
695
|
-
|
|
795
|
+
<div class="container space-lg">
|
|
796
|
+
<div class="space-xs">
|
|
797
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
798
|
+
<h2 id="stats">Stats</h2>
|
|
799
|
+
<p class="subtitle">Oversized numbers with labels. Picks up accent colors.</p>
|
|
800
|
+
</div>
|
|
696
801
|
|
|
697
|
-
<
|
|
698
|
-
|
|
699
|
-
<div
|
|
700
|
-
<div>
|
|
701
|
-
<div
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
<div
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
<div
|
|
710
|
-
|
|
802
|
+
<div class="space-sm">
|
|
803
|
+
<h3>Stat Row</h3>
|
|
804
|
+
<div data-source>
|
|
805
|
+
<div class="stat-row">
|
|
806
|
+
<div>
|
|
807
|
+
<div class="stat" style="--accent: var(--p-accent-1);">180mm</div>
|
|
808
|
+
<div class="stat-label">Travel</div>
|
|
809
|
+
</div>
|
|
810
|
+
<div>
|
|
811
|
+
<div class="stat" style="--accent: var(--p-accent-2);">20%</div>
|
|
812
|
+
<div class="stat-label">Sag</div>
|
|
813
|
+
</div>
|
|
814
|
+
<div>
|
|
815
|
+
<div class="stat" style="--accent: var(--p-accent-3);">450</div>
|
|
816
|
+
<div class="stat-label">Spring Rate</div>
|
|
817
|
+
</div>
|
|
711
818
|
</div>
|
|
712
819
|
</div>
|
|
713
820
|
</div>
|
|
714
821
|
|
|
715
|
-
<
|
|
716
|
-
|
|
717
|
-
<div
|
|
718
|
-
|
|
822
|
+
<div class="space-sm">
|
|
823
|
+
<h3>Single Stat</h3>
|
|
824
|
+
<div data-source>
|
|
825
|
+
<div class="stat" style="--accent: var(--p-accent-2);">1,024</div>
|
|
826
|
+
<div class="stat-label">Total Clicks</div>
|
|
827
|
+
</div>
|
|
719
828
|
</div>
|
|
720
829
|
</div>
|
|
721
830
|
|
|
@@ -723,24 +832,32 @@
|
|
|
723
832
|
|
|
724
833
|
<hr class="gradient-stripe">
|
|
725
834
|
|
|
726
|
-
<div class="container">
|
|
727
|
-
<
|
|
728
|
-
|
|
729
|
-
|
|
835
|
+
<div class="container space-lg">
|
|
836
|
+
<div class="space-xs">
|
|
837
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Components</p>
|
|
838
|
+
<h2 id="dividers">Dividers</h2>
|
|
839
|
+
<p class="subtitle">Dashed dividers, danger dividers, and gradient stripes.</p>
|
|
840
|
+
</div>
|
|
730
841
|
|
|
731
|
-
<
|
|
732
|
-
|
|
733
|
-
<
|
|
842
|
+
<div class="space-sm">
|
|
843
|
+
<h3>Standard Divider</h3>
|
|
844
|
+
<div data-source>
|
|
845
|
+
<hr class="divider">
|
|
846
|
+
</div>
|
|
734
847
|
</div>
|
|
735
848
|
|
|
736
|
-
<
|
|
737
|
-
|
|
738
|
-
<
|
|
849
|
+
<div class="space-sm">
|
|
850
|
+
<h3>Danger Divider</h3>
|
|
851
|
+
<div data-source>
|
|
852
|
+
<hr class="divider-danger">
|
|
853
|
+
</div>
|
|
739
854
|
</div>
|
|
740
855
|
|
|
741
|
-
<
|
|
742
|
-
|
|
743
|
-
<
|
|
856
|
+
<div class="space-sm">
|
|
857
|
+
<h3>Gradient Stripe</h3>
|
|
858
|
+
<div data-source>
|
|
859
|
+
<hr class="gradient-stripe">
|
|
860
|
+
</div>
|
|
744
861
|
</div>
|
|
745
862
|
</div>
|
|
746
863
|
|
|
@@ -748,77 +865,141 @@
|
|
|
748
865
|
|
|
749
866
|
<hr class="gradient-stripe">
|
|
750
867
|
|
|
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>
|
|
868
|
+
<div class="container space-lg">
|
|
869
|
+
<div class="space-xs">
|
|
870
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Layout</p>
|
|
871
|
+
<h2 id="layout">Containers, Space & Gap</h2>
|
|
872
|
+
<p class="subtitle">Content containers, page headers, and the space and gap utilities.</p>
|
|
764
873
|
</div>
|
|
765
874
|
|
|
766
|
-
<
|
|
767
|
-
|
|
768
|
-
<div
|
|
769
|
-
<
|
|
770
|
-
|
|
875
|
+
<div class="space-sm">
|
|
876
|
+
<h3>Container Widths</h3>
|
|
877
|
+
<div data-source class="space-sm">
|
|
878
|
+
<div style="max-width: 640px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px;">
|
|
879
|
+
<code style="font-size: 12px;">.container</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 640px</span>
|
|
880
|
+
</div>
|
|
881
|
+
<div style="max-width: 420px; background: var(--p-surface); border: 2px solid var(--p-text); padding: 12px;">
|
|
882
|
+
<code style="font-size: 12px;">.container-narrow</code> <span style="color: var(--p-text-muted); font-size: 12px;">— 420px</span>
|
|
883
|
+
</div>
|
|
771
884
|
</div>
|
|
772
885
|
</div>
|
|
773
886
|
|
|
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>
|
|
887
|
+
<div class="space-sm">
|
|
888
|
+
<h3>Page Header</h3>
|
|
889
|
+
<div data-source>
|
|
890
|
+
<div class="container page-header" style="border: 2px dashed var(--p-border-dashed); padding-left: 20px; padding-right: 20px;">
|
|
891
|
+
<h1>Page Title</h1>
|
|
892
|
+
<p class="subtitle">A helpful subtitle for the page</p>
|
|
782
893
|
</div>
|
|
783
894
|
</div>
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
895
|
+
</div>
|
|
896
|
+
|
|
897
|
+
<div class="space-sm">
|
|
898
|
+
<h3>Space (between children)</h3>
|
|
899
|
+
<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>
|
|
900
|
+
<div data-source id="space-demo" class="gap-lg" style="display: flex; flex-wrap: wrap;">
|
|
901
|
+
<div class="space-sm">
|
|
902
|
+
<div class="stat-label">space-xs (4px)</div>
|
|
903
|
+
<div class="space-xs">
|
|
904
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
905
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
906
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
907
|
+
</div>
|
|
790
908
|
</div>
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
909
|
+
<div class="space-sm">
|
|
910
|
+
<div class="stat-label">space-sm (8px)</div>
|
|
911
|
+
<div class="space-sm">
|
|
912
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
913
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
914
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
915
|
+
</div>
|
|
798
916
|
</div>
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
917
|
+
<div class="space-sm">
|
|
918
|
+
<div class="stat-label">space-md (16px)</div>
|
|
919
|
+
<div class="space-md">
|
|
920
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
921
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
922
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
923
|
+
</div>
|
|
806
924
|
</div>
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
925
|
+
<div class="space-sm">
|
|
926
|
+
<div class="stat-label">space-lg (24px)</div>
|
|
927
|
+
<div class="space-lg">
|
|
928
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
929
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
930
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 100px;"></div>
|
|
931
|
+
</div>
|
|
932
|
+
</div>
|
|
933
|
+
<div class="space-sm">
|
|
934
|
+
<div class="stat-label">space-xl (32px)</div>
|
|
935
|
+
<div class="space-xl">
|
|
936
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
937
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
938
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 100px;"></div>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
941
|
+
<div class="space-sm">
|
|
942
|
+
<div class="stat-label">space-2xl (48px)</div>
|
|
943
|
+
<div class="space-2xl">
|
|
944
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
945
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
946
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 100px;"></div>
|
|
947
|
+
</div>
|
|
814
948
|
</div>
|
|
815
949
|
</div>
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
950
|
+
</div>
|
|
951
|
+
|
|
952
|
+
<div class="space-sm">
|
|
953
|
+
<h3>Gap (rows and grids)</h3>
|
|
954
|
+
<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>
|
|
955
|
+
<div data-source id="gap-demo" class="gap-lg" style="display: flex; flex-wrap: wrap;">
|
|
956
|
+
<div class="space-sm">
|
|
957
|
+
<div class="stat-label">gap-xs (4px)</div>
|
|
958
|
+
<div class="gap-xs" style="display: flex;">
|
|
959
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
960
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
961
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
962
|
+
</div>
|
|
963
|
+
</div>
|
|
964
|
+
<div class="space-sm">
|
|
965
|
+
<div class="stat-label">gap-sm (8px)</div>
|
|
966
|
+
<div class="gap-sm" style="display: flex;">
|
|
967
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
968
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
969
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
<div class="space-sm">
|
|
973
|
+
<div class="stat-label">gap-md (16px)</div>
|
|
974
|
+
<div class="gap-md" style="display: flex;">
|
|
975
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
976
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
977
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
978
|
+
</div>
|
|
979
|
+
</div>
|
|
980
|
+
<div class="space-sm">
|
|
981
|
+
<div class="stat-label">gap-lg (24px)</div>
|
|
982
|
+
<div class="gap-lg" style="display: flex;">
|
|
983
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
984
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
985
|
+
<div style="background: var(--p-accent-1); height: 20px; width: 20px;"></div>
|
|
986
|
+
</div>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="space-sm">
|
|
989
|
+
<div class="stat-label">gap-xl (32px)</div>
|
|
990
|
+
<div class="gap-xl" style="display: flex;">
|
|
991
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
992
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
993
|
+
<div style="background: var(--p-accent-2); height: 20px; width: 20px;"></div>
|
|
994
|
+
</div>
|
|
995
|
+
</div>
|
|
996
|
+
<div class="space-sm">
|
|
997
|
+
<div class="stat-label">gap-2xl (48px)</div>
|
|
998
|
+
<div class="gap-2xl" style="display: flex;">
|
|
999
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1000
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1001
|
+
<div style="background: var(--p-accent-3); height: 20px; width: 20px;"></div>
|
|
1002
|
+
</div>
|
|
822
1003
|
</div>
|
|
823
1004
|
</div>
|
|
824
1005
|
</div>
|
|
@@ -828,54 +1009,62 @@
|
|
|
828
1009
|
|
|
829
1010
|
<hr class="gradient-stripe">
|
|
830
1011
|
|
|
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
|
-
<
|
|
1012
|
+
<div class="container space-lg">
|
|
1013
|
+
<div class="space-xs">
|
|
1014
|
+
<p class="eyebrow" style="color: var(--p-accent-1);">Components</p>
|
|
1015
|
+
<h2 id="navbars">Navbar</h2>
|
|
1016
|
+
<p class="subtitle">Dark (default) and light variants.</p>
|
|
1017
|
+
</div>
|
|
1018
|
+
|
|
1019
|
+
<div class="space-sm">
|
|
1020
|
+
<h3>Dark (default)</h3>
|
|
1021
|
+
<div data-source>
|
|
1022
|
+
<nav class="navbar">
|
|
1023
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1024
|
+
<div class="navbar-right">
|
|
1025
|
+
<span class="navbar-user">Username</span>
|
|
1026
|
+
<button class="btn btn-sm">Log Out</button>
|
|
1027
|
+
</div>
|
|
1028
|
+
</nav>
|
|
1029
|
+
</div>
|
|
1030
|
+
</div>
|
|
1031
|
+
|
|
1032
|
+
<div class="space-sm">
|
|
1033
|
+
<h3>With a navbar menu (open it)</h3>
|
|
1034
|
+
<div data-source style="padding-bottom: 300px;">
|
|
1035
|
+
<nav class="navbar">
|
|
1036
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1037
|
+
<div class="navbar-right">
|
|
1038
|
+
<details class="navbar-menu">
|
|
1039
|
+
<summary><span class="visually-hidden">Account: </span>Username</summary>
|
|
1040
|
+
<div class="navbar-menu-panel">
|
|
1041
|
+
<p class="navbar-menu-label" aria-hidden="true">Your teams</p>
|
|
1042
|
+
<ul aria-label="Your teams"><li><a href="#" aria-current="true">Team A</a></li><li><a href="#">Team B</a></li></ul>
|
|
1043
|
+
<a href="#">Account</a>
|
|
1044
|
+
<div class="navbar-menu-group" role="group" aria-labelledby="cat-menu-settings">
|
|
1045
|
+
<p class="navbar-menu-label" id="cat-menu-settings">Settings</p>
|
|
1046
|
+
<button type="button" class="navbar-menu-setting" aria-pressed="true">Notifications</button>
|
|
1047
|
+
<button type="button" class="navbar-menu-setting" aria-pressed="false">Sound</button>
|
|
1048
|
+
</div>
|
|
1049
|
+
<form><button type="button">Sign out</button></form>
|
|
862
1050
|
</div>
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
</nav>
|
|
1051
|
+
</details>
|
|
1052
|
+
</div>
|
|
1053
|
+
</nav>
|
|
1054
|
+
</div>
|
|
868
1055
|
</div>
|
|
869
1056
|
|
|
870
|
-
<
|
|
871
|
-
|
|
872
|
-
<
|
|
873
|
-
<
|
|
874
|
-
|
|
875
|
-
<
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
1057
|
+
<div class="space-sm">
|
|
1058
|
+
<h3>Light (.navbar-light)</h3>
|
|
1059
|
+
<div data-source>
|
|
1060
|
+
<nav class="navbar navbar-light" style="border: 2px solid var(--p-border);">
|
|
1061
|
+
<a href="#" class="navbar-brand">App Name</a>
|
|
1062
|
+
<div class="navbar-right">
|
|
1063
|
+
<span class="navbar-user">Username</span>
|
|
1064
|
+
<button class="btn btn-sm">Log Out</button>
|
|
1065
|
+
</div>
|
|
1066
|
+
</nav>
|
|
1067
|
+
</div>
|
|
879
1068
|
</div>
|
|
880
1069
|
</div>
|
|
881
1070
|
|
|
@@ -883,30 +1072,36 @@
|
|
|
883
1072
|
|
|
884
1073
|
<hr class="gradient-stripe">
|
|
885
1074
|
|
|
886
|
-
<div class="container">
|
|
887
|
-
<
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
1075
|
+
<div class="container space-lg">
|
|
1076
|
+
<div class="space-xs">
|
|
1077
|
+
<p class="eyebrow" style="color: var(--p-accent-2);">Motion</p>
|
|
1078
|
+
<h2 id="animations">Animations</h2>
|
|
1079
|
+
<p class="subtitle">Fade-up entrance and gradient stripe. Respects prefers-reduced-motion.</p>
|
|
1080
|
+
</div>
|
|
1081
|
+
|
|
1082
|
+
<div class="space-sm">
|
|
1083
|
+
<h3>Fade Up (staggered)</h3>
|
|
1084
|
+
<div data-source class="space-md">
|
|
1085
|
+
<div class="card fade-up" style="animation-delay: 0s;">
|
|
1086
|
+
<span class="h2">First</span>
|
|
1087
|
+
<p>Fades in immediately.</p>
|
|
1088
|
+
</div>
|
|
1089
|
+
<div class="card fade-up" style="animation-delay: 0.1s;">
|
|
1090
|
+
<span class="h2">Second</span>
|
|
1091
|
+
<p>Fades in after 100ms.</p>
|
|
1092
|
+
</div>
|
|
1093
|
+
<div class="card fade-up" style="animation-delay: 0.2s;">
|
|
1094
|
+
<span class="h2">Third</span>
|
|
1095
|
+
<p>Fades in after 200ms.</p>
|
|
1096
|
+
</div>
|
|
904
1097
|
</div>
|
|
905
1098
|
</div>
|
|
906
1099
|
|
|
907
|
-
<
|
|
908
|
-
|
|
909
|
-
<
|
|
1100
|
+
<div class="space-sm">
|
|
1101
|
+
<h3>Gradient Stripe (infinite)</h3>
|
|
1102
|
+
<div data-source>
|
|
1103
|
+
<hr class="gradient-stripe">
|
|
1104
|
+
</div>
|
|
910
1105
|
</div>
|
|
911
1106
|
</div>
|
|
912
1107
|
|
|
@@ -914,77 +1109,96 @@
|
|
|
914
1109
|
|
|
915
1110
|
<hr class="gradient-stripe">
|
|
916
1111
|
|
|
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>
|
|
1112
|
+
<div class="container space-lg">
|
|
1113
|
+
<div class="space-xs">
|
|
1114
|
+
<p class="eyebrow" style="color: var(--p-accent-3);">Components</p>
|
|
1115
|
+
<h2 id="misc">Miscellaneous</h2>
|
|
1116
|
+
<p class="subtitle">Empty states, danger zones, watermarks, links, and lists.</p>
|
|
935
1117
|
</div>
|
|
936
1118
|
|
|
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>
|
|
1119
|
+
<div class="space-sm">
|
|
1120
|
+
<h3>Empty State</h3>
|
|
1121
|
+
<div data-source>
|
|
1122
|
+
<p class="empty">No items yet</p>
|
|
1123
|
+
</div>
|
|
947
1124
|
</div>
|
|
948
1125
|
|
|
949
|
-
<
|
|
950
|
-
|
|
951
|
-
<
|
|
1126
|
+
<div class="space-sm">
|
|
1127
|
+
<h3>Danger Zone</h3>
|
|
1128
|
+
<div data-source>
|
|
1129
|
+
<hr class="divider-danger">
|
|
1130
|
+
<div class="danger-zone space-sm">
|
|
1131
|
+
<span class="h2">Danger Zone</span>
|
|
1132
|
+
<p>This will permanently delete your account. This cannot be undone.</p>
|
|
1133
|
+
<button class="btn btn-danger btn-block">Delete My Account</button>
|
|
1134
|
+
</div>
|
|
1135
|
+
</div>
|
|
952
1136
|
</div>
|
|
953
1137
|
|
|
954
|
-
<
|
|
955
|
-
|
|
956
|
-
<
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1138
|
+
<div class="space-sm">
|
|
1139
|
+
<h3>Dialog</h3>
|
|
1140
|
+
<p>Spaces its direct children, or those of a direct <code><form method="dialog"></code>. The action buttons share the width.</p>
|
|
1141
|
+
<div data-source>
|
|
1142
|
+
<dialog open style="position: static;">
|
|
1143
|
+
<form method="dialog">
|
|
1144
|
+
<h2>Delete project?</h2>
|
|
1145
|
+
<p class="subtitle">This cannot be undone.</p>
|
|
1146
|
+
<menu>
|
|
1147
|
+
<li><button class="btn" value="cancel">Cancel</button></li>
|
|
1148
|
+
<li><button class="btn btn-danger" value="delete">Delete</button></li>
|
|
1149
|
+
</menu>
|
|
1150
|
+
</form>
|
|
1151
|
+
</dialog>
|
|
962
1152
|
</div>
|
|
963
1153
|
</div>
|
|
964
1154
|
|
|
965
|
-
<
|
|
966
|
-
|
|
967
|
-
<
|
|
1155
|
+
<div class="space-sm">
|
|
1156
|
+
<h3>Kbd</h3>
|
|
1157
|
+
<div data-source>
|
|
1158
|
+
<kbd>Ctrl</kbd> + <kbd>Z</kbd>
|
|
1159
|
+
</div>
|
|
968
1160
|
</div>
|
|
969
1161
|
|
|
970
|
-
<
|
|
971
|
-
|
|
972
|
-
<
|
|
973
|
-
<
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
</ul>
|
|
1162
|
+
<div class="space-sm">
|
|
1163
|
+
<h3>Watermarks</h3>
|
|
1164
|
+
<p style="font-size: 13px; color: var(--p-text-secondary);">
|
|
1165
|
+
<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:
|
|
1166
|
+
</p>
|
|
1167
|
+
<div data-source>
|
|
1168
|
+
<div class="watermarks">
|
|
1169
|
+
<svg style="top: 10%; left: -5%;"><!-- SVG content --></svg>
|
|
1170
|
+
<svg style="top: 50%; right: -5%;"><!-- SVG content --></svg>
|
|
980
1171
|
</div>
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
1172
|
+
</div>
|
|
1173
|
+
</div>
|
|
1174
|
+
|
|
1175
|
+
<div class="space-sm">
|
|
1176
|
+
<h3>Links</h3>
|
|
1177
|
+
<div data-source>
|
|
1178
|
+
<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>
|
|
1179
|
+
</div>
|
|
1180
|
+
</div>
|
|
1181
|
+
|
|
1182
|
+
<div class="space-sm">
|
|
1183
|
+
<h3>Lists</h3>
|
|
1184
|
+
<div data-source>
|
|
1185
|
+
<div class="gap-2xl" style="display: flex; flex-wrap: wrap;">
|
|
1186
|
+
<div class="container space-sm" style="padding: 0; max-width: 250px;">
|
|
1187
|
+
<p style="font-weight: 600;">Unordered</p>
|
|
1188
|
+
<ul>
|
|
1189
|
+
<li>Hard edges everywhere</li>
|
|
1190
|
+
<li>2px borders, always</li>
|
|
1191
|
+
<li>Zero border radius</li>
|
|
1192
|
+
</ul>
|
|
1193
|
+
</div>
|
|
1194
|
+
<div class="container space-sm" style="padding: 0; max-width: 250px;">
|
|
1195
|
+
<p style="font-weight: 600;">Ordered</p>
|
|
1196
|
+
<ol>
|
|
1197
|
+
<li>Install palace.css</li>
|
|
1198
|
+
<li>Keep fonts/ next to it</li>
|
|
1199
|
+
<li>Write HTML</li>
|
|
1200
|
+
</ol>
|
|
1201
|
+
</div>
|
|
988
1202
|
</div>
|
|
989
1203
|
</div>
|
|
990
1204
|
</div>
|
|
@@ -996,7 +1210,7 @@
|
|
|
996
1210
|
|
|
997
1211
|
<div class="container">
|
|
998
1212
|
<div class="footer">
|
|
999
|
-
Palace UI v0.
|
|
1213
|
+
Palace UI v0.14.0 — CSS-only design system. <a href="#">GitHub</a>
|
|
1000
1214
|
</div>
|
|
1001
1215
|
</div>
|
|
1002
1216
|
|
|
@@ -1019,13 +1233,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
1019
1233
|
.replace(/>/g, '>');
|
|
1020
1234
|
const pre = document.createElement('pre');
|
|
1021
1235
|
pre.innerHTML = escaped;
|
|
1022
|
-
pre.style.marginTop = '12px';
|
|
1023
1236
|
el.after(pre);
|
|
1024
1237
|
});
|
|
1025
1238
|
});
|
|
1026
1239
|
</script>
|
|
1027
1240
|
|
|
1028
|
-
<noscript><
|
|
1241
|
+
<noscript><div class="container"><p class="status">Source code examples require JavaScript.</p></div></noscript>
|
|
1029
1242
|
|
|
1030
1243
|
</body>
|
|
1031
1244
|
</html>
|