palace-ui 0.12.2 → 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 +182 -54
- package/catalog.html +886 -664
- package/package.json +8 -2
- package/palace.css +152 -45
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
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<div data-source style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;">
|
|
102
|
-
<div style="text-align: center;">
|
|
103
|
-
<div style="width: 80px; height: 80px; background: var(--p-text); border: 2px solid var(--p-text);"></div>
|
|
104
|
-
<div class="stat-label" style="margin-top: 6px;">--p-text</div>
|
|
105
|
-
<code style="font-size: 11px;">#0a0a0a</code>
|
|
106
|
-
</div>
|
|
107
|
-
<div style="text-align: center;">
|
|
108
|
-
<div style="width: 80px; height: 80px; background: var(--p-text-secondary); border: 2px solid var(--p-text);"></div>
|
|
109
|
-
<div class="stat-label" style="margin-top: 6px;">--p-text-secondary</div>
|
|
110
|
-
<code style="font-size: 11px;">#444</code>
|
|
111
|
-
</div>
|
|
112
|
-
<div style="text-align: center;">
|
|
113
|
-
<div style="width: 80px; height: 80px; background: var(--p-text-muted); border: 2px solid var(--p-text);"></div>
|
|
114
|
-
<div class="stat-label" style="margin-top: 6px;">--p-text-muted</div>
|
|
115
|
-
<code style="font-size: 11px;">#666</code>
|
|
116
|
-
</div>
|
|
117
|
-
<div style="text-align: center;">
|
|
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>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<h3 style="margin-bottom: 12px;">Surfaces</h3>
|
|
135
|
-
<div data-source style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;">
|
|
136
|
-
<div style="text-align: center;">
|
|
137
|
-
<div style="width: 80px; height: 80px; background: var(--p-surface-inset); border: 2px solid var(--p-text);"></div>
|
|
138
|
-
<div class="stat-label" style="margin-top: 6px;">--p-surface-inset</div>
|
|
139
|
-
<code style="font-size: 11px;">#f7f7f7</code>
|
|
140
|
-
</div>
|
|
141
|
-
<div style="text-align: center;">
|
|
142
|
-
<div style="width: 80px; height: 80px; background: var(--p-dark); border: 2px solid var(--p-text);"></div>
|
|
143
|
-
<div class="stat-label" style="margin-top: 6px;">--p-dark</div>
|
|
144
|
-
<code style="font-size: 11px;">#0a0a0a</code>
|
|
145
|
-
</div>
|
|
146
|
-
<div style="text-align: center;">
|
|
147
|
-
<div style="width: 80px; height: 80px; background: var(--p-overlay); border: 2px solid var(--p-text);"></div>
|
|
148
|
-
<div class="stat-label" style="margin-top: 6px;">--p-overlay</div>
|
|
149
|
-
<code style="font-size: 11px;">rgba(10,10,10,0.7)</code>
|
|
150
|
-
</div>
|
|
151
|
-
<div style="text-align: center;">
|
|
152
|
-
<div style="width: 80px; height: 80px; background: var(--p-hover-bg); border: 2px solid var(--p-text);"></div>
|
|
153
|
-
<div class="stat-label" style="margin-top: 6px;">--p-hover-bg</div>
|
|
154
|
-
<code style="font-size: 11px;">#e8e8e8</code>
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
<h3 style="margin-bottom: 12px;">Status</h3>
|
|
159
|
-
<div data-source style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;">
|
|
160
|
-
<div style="text-align: center;">
|
|
161
|
-
<div style="width: 80px; height: 80px; background: var(--p-error); border: 2px solid var(--p-text);"></div>
|
|
162
|
-
<div class="stat-label" style="margin-top: 6px;">--p-error</div>
|
|
163
|
-
<code style="font-size: 11px;">#ff4444</code>
|
|
164
|
-
</div>
|
|
165
|
-
<div style="text-align: center;">
|
|
166
|
-
<div style="width: 80px; height: 80px; background: var(--p-success); border: 2px solid var(--p-text);"></div>
|
|
167
|
-
<div class="stat-label" style="margin-top: 6px;">--p-success</div>
|
|
168
|
-
<code style="font-size: 11px;">#00ff88</code>
|
|
169
|
-
</div>
|
|
170
|
-
<div style="text-align: center;">
|
|
171
|
-
<div style="width: 80px; height: 80px; background: var(--p-warning); border: 2px solid var(--p-text);"></div>
|
|
172
|
-
<div class="stat-label" style="margin-top: 6px;">--p-warning</div>
|
|
173
|
-
<code style="font-size: 11px;">#ffcc00</code>
|
|
174
|
-
</div>
|
|
175
|
-
<div style="text-align: center;">
|
|
176
|
-
<div style="width: 80px; height: 80px; background: var(--p-info); border: 2px solid var(--p-text);"></div>
|
|
177
|
-
<div class="stat-label" style="margin-top: 6px;">--p-info</div>
|
|
178
|
-
<code style="font-size: 11px;">#00e5ff</code>
|
|
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>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
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>
|
|
179
102
|
</div>
|
|
180
103
|
</div>
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
<div style="
|
|
185
|
-
<div style="
|
|
186
|
-
|
|
187
|
-
|
|
104
|
+
|
|
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>
|
|
188
138
|
</div>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
139
|
+
</div>
|
|
140
|
+
|
|
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>
|
|
193
164
|
</div>
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
165
|
+
</div>
|
|
166
|
+
|
|
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
|
-
|
|
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>
|
|
283
304
|
|
|
284
|
-
<div
|
|
285
|
-
<div
|
|
286
|
-
<div style="
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
<div style="
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
<div style="
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
<div style="
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
<div style="
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
<div style="
|
|
307
|
-
|
|
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
|
-
|
|
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>
|
|
320
345
|
|
|
321
|
-
<div
|
|
322
|
-
<div style="
|
|
323
|
-
<div
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
<div
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
<div
|
|
334
|
-
|
|
335
|
-
|
|
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
|
-
|
|
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>
|
|
402
445
|
|
|
403
|
-
<div
|
|
404
|
-
<div class="
|
|
405
|
-
<
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
<
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
<
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
<
|
|
418
|
-
|
|
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,68 +479,105 @@
|
|
|
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>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
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>
|
|
580
|
+
</div>
|
|
497
581
|
</div>
|
|
498
582
|
</div>
|
|
499
583
|
|
|
@@ -501,68 +585,74 @@
|
|
|
501
585
|
|
|
502
586
|
<hr class="gradient-stripe">
|
|
503
587
|
|
|
504
|
-
<div class="container">
|
|
505
|
-
<
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
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
|
-
|
|
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>
|
|
566
656
|
</div>
|
|
567
657
|
</div>
|
|
568
658
|
|
|
@@ -570,30 +660,36 @@
|
|
|
570
660
|
|
|
571
661
|
<hr class="gradient-stripe">
|
|
572
662
|
|
|
573
|
-
<div class="container">
|
|
574
|
-
<
|
|
575
|
-
|
|
576
|
-
|
|
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>
|
|
577
669
|
|
|
578
|
-
<
|
|
579
|
-
|
|
580
|
-
<
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
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>
|
|
586
680
|
</div>
|
|
587
681
|
|
|
588
|
-
<
|
|
589
|
-
|
|
590
|
-
<div
|
|
591
|
-
<
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
<
|
|
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>
|
|
597
693
|
</div>
|
|
598
694
|
</div>
|
|
599
695
|
</div>
|
|
@@ -603,31 +699,39 @@
|
|
|
603
699
|
|
|
604
700
|
<hr class="gradient-stripe">
|
|
605
701
|
|
|
606
|
-
<div class="container">
|
|
607
|
-
<
|
|
608
|
-
|
|
609
|
-
|
|
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>
|
|
610
708
|
|
|
611
|
-
<
|
|
612
|
-
|
|
613
|
-
<
|
|
614
|
-
|
|
615
|
-
|
|
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>
|
|
616
716
|
</div>
|
|
617
717
|
|
|
618
|
-
<
|
|
619
|
-
|
|
620
|
-
<
|
|
621
|
-
|
|
622
|
-
|
|
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>
|
|
623
725
|
</div>
|
|
624
726
|
|
|
625
|
-
<
|
|
626
|
-
|
|
627
|
-
<
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
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>
|
|
631
735
|
</div>
|
|
632
736
|
</div>
|
|
633
737
|
|
|
@@ -635,17 +739,21 @@
|
|
|
635
739
|
|
|
636
740
|
<hr class="gradient-stripe">
|
|
637
741
|
|
|
638
|
-
<div class="container">
|
|
639
|
-
<
|
|
640
|
-
|
|
641
|
-
|
|
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>
|
|
642
748
|
|
|
643
|
-
<div
|
|
644
|
-
<div class="
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
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>
|
|
649
757
|
</div>
|
|
650
758
|
</div>
|
|
651
759
|
|
|
@@ -653,24 +761,28 @@
|
|
|
653
761
|
|
|
654
762
|
<hr class="gradient-stripe">
|
|
655
763
|
|
|
656
|
-
<div class="container">
|
|
657
|
-
<
|
|
658
|
-
|
|
659
|
-
|
|
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>
|
|
660
770
|
|
|
661
|
-
<div
|
|
662
|
-
<div
|
|
663
|
-
<div class="
|
|
664
|
-
<
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
<
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
<
|
|
673
|
-
|
|
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>
|
|
674
786
|
</div>
|
|
675
787
|
</div>
|
|
676
788
|
</div>
|
|
@@ -680,33 +792,39 @@
|
|
|
680
792
|
|
|
681
793
|
<hr class="gradient-stripe">
|
|
682
794
|
|
|
683
|
-
<div class="container">
|
|
684
|
-
<
|
|
685
|
-
|
|
686
|
-
|
|
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>
|
|
687
801
|
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
<div
|
|
691
|
-
<div>
|
|
692
|
-
<div
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
<div
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
<div
|
|
701
|
-
|
|
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>
|
|
702
818
|
</div>
|
|
703
819
|
</div>
|
|
704
820
|
</div>
|
|
705
821
|
|
|
706
|
-
<
|
|
707
|
-
|
|
708
|
-
<div
|
|
709
|
-
|
|
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>
|
|
710
828
|
</div>
|
|
711
829
|
</div>
|
|
712
830
|
|
|
@@ -714,24 +832,32 @@
|
|
|
714
832
|
|
|
715
833
|
<hr class="gradient-stripe">
|
|
716
834
|
|
|
717
|
-
<div class="container">
|
|
718
|
-
<
|
|
719
|
-
|
|
720
|
-
|
|
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>
|
|
721
841
|
|
|
722
|
-
<
|
|
723
|
-
|
|
724
|
-
<
|
|
842
|
+
<div class="space-sm">
|
|
843
|
+
<h3>Standard Divider</h3>
|
|
844
|
+
<div data-source>
|
|
845
|
+
<hr class="divider">
|
|
846
|
+
</div>
|
|
725
847
|
</div>
|
|
726
848
|
|
|
727
|
-
<
|
|
728
|
-
|
|
729
|
-
<
|
|
849
|
+
<div class="space-sm">
|
|
850
|
+
<h3>Danger Divider</h3>
|
|
851
|
+
<div data-source>
|
|
852
|
+
<hr class="divider-danger">
|
|
853
|
+
</div>
|
|
730
854
|
</div>
|
|
731
855
|
|
|
732
|
-
<
|
|
733
|
-
|
|
734
|
-
<
|
|
856
|
+
<div class="space-sm">
|
|
857
|
+
<h3>Gradient Stripe</h3>
|
|
858
|
+
<div data-source>
|
|
859
|
+
<hr class="gradient-stripe">
|
|
860
|
+
</div>
|
|
735
861
|
</div>
|
|
736
862
|
</div>
|
|
737
863
|
|
|
@@ -739,77 +865,141 @@
|
|
|
739
865
|
|
|
740
866
|
<hr class="gradient-stripe">
|
|
741
867
|
|
|
742
|
-
<div class="container">
|
|
743
|
-
<
|
|
744
|
-
|
|
745
|
-
|
|
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>
|
|
873
|
+
</div>
|
|
746
874
|
|
|
747
|
-
<
|
|
748
|
-
|
|
749
|
-
<div
|
|
750
|
-
<
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
<
|
|
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>
|
|
754
884
|
</div>
|
|
755
885
|
</div>
|
|
756
886
|
|
|
757
|
-
<
|
|
758
|
-
|
|
759
|
-
<div
|
|
760
|
-
<
|
|
761
|
-
|
|
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>
|
|
893
|
+
</div>
|
|
762
894
|
</div>
|
|
763
895
|
</div>
|
|
764
896
|
|
|
765
|
-
<
|
|
766
|
-
|
|
767
|
-
<
|
|
768
|
-
|
|
769
|
-
<div class="
|
|
770
|
-
<div
|
|
771
|
-
<div
|
|
772
|
-
|
|
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>
|
|
773
908
|
</div>
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
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>
|
|
781
916
|
</div>
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
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>
|
|
789
924
|
</div>
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
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>
|
|
797
932
|
</div>
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
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>
|
|
805
948
|
</div>
|
|
806
949
|
</div>
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
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>
|
|
813
1003
|
</div>
|
|
814
1004
|
</div>
|
|
815
1005
|
</div>
|
|
@@ -819,54 +1009,62 @@
|
|
|
819
1009
|
|
|
820
1010
|
<hr class="gradient-stripe">
|
|
821
1011
|
|
|
822
|
-
<div class="container">
|
|
823
|
-
<
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
<
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
<
|
|
850
|
-
|
|
851
|
-
<
|
|
852
|
-
<
|
|
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>
|
|
853
1050
|
</div>
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
</nav>
|
|
1051
|
+
</details>
|
|
1052
|
+
</div>
|
|
1053
|
+
</nav>
|
|
1054
|
+
</div>
|
|
859
1055
|
</div>
|
|
860
1056
|
|
|
861
|
-
<
|
|
862
|
-
|
|
863
|
-
<
|
|
864
|
-
<
|
|
865
|
-
|
|
866
|
-
<
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
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>
|
|
870
1068
|
</div>
|
|
871
1069
|
</div>
|
|
872
1070
|
|
|
@@ -874,30 +1072,36 @@
|
|
|
874
1072
|
|
|
875
1073
|
<hr class="gradient-stripe">
|
|
876
1074
|
|
|
877
|
-
<div class="container">
|
|
878
|
-
<
|
|
879
|
-
|
|
880
|
-
|
|
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>
|
|
881
1081
|
|
|
882
|
-
<
|
|
883
|
-
|
|
884
|
-
<div
|
|
885
|
-
<
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
<
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
<
|
|
894
|
-
|
|
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>
|
|
895
1097
|
</div>
|
|
896
1098
|
</div>
|
|
897
1099
|
|
|
898
|
-
<
|
|
899
|
-
|
|
900
|
-
<
|
|
1100
|
+
<div class="space-sm">
|
|
1101
|
+
<h3>Gradient Stripe (infinite)</h3>
|
|
1102
|
+
<div data-source>
|
|
1103
|
+
<hr class="gradient-stripe">
|
|
1104
|
+
</div>
|
|
901
1105
|
</div>
|
|
902
1106
|
</div>
|
|
903
1107
|
|
|
@@ -905,77 +1109,96 @@
|
|
|
905
1109
|
|
|
906
1110
|
<hr class="gradient-stripe">
|
|
907
1111
|
|
|
908
|
-
<div class="container">
|
|
909
|
-
<
|
|
910
|
-
|
|
911
|
-
|
|
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>
|
|
1117
|
+
</div>
|
|
912
1118
|
|
|
913
|
-
<
|
|
914
|
-
|
|
915
|
-
<
|
|
1119
|
+
<div class="space-sm">
|
|
1120
|
+
<h3>Empty State</h3>
|
|
1121
|
+
<div data-source>
|
|
1122
|
+
<p class="empty">No items yet</p>
|
|
1123
|
+
</div>
|
|
916
1124
|
</div>
|
|
917
1125
|
|
|
918
|
-
<
|
|
919
|
-
|
|
920
|
-
<
|
|
921
|
-
|
|
922
|
-
<
|
|
923
|
-
|
|
924
|
-
|
|
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>
|
|
925
1135
|
</div>
|
|
926
1136
|
</div>
|
|
927
1137
|
|
|
928
|
-
<
|
|
929
|
-
|
|
930
|
-
<
|
|
931
|
-
|
|
932
|
-
<
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
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>
|
|
1152
|
+
</div>
|
|
938
1153
|
</div>
|
|
939
1154
|
|
|
940
|
-
<
|
|
941
|
-
|
|
942
|
-
<
|
|
1155
|
+
<div class="space-sm">
|
|
1156
|
+
<h3>Kbd</h3>
|
|
1157
|
+
<div data-source>
|
|
1158
|
+
<kbd>Ctrl</kbd> + <kbd>Z</kbd>
|
|
1159
|
+
</div>
|
|
943
1160
|
</div>
|
|
944
1161
|
|
|
945
|
-
<
|
|
946
|
-
|
|
947
|
-
<
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
<div
|
|
951
|
-
<
|
|
952
|
-
|
|
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>
|
|
1171
|
+
</div>
|
|
953
1172
|
</div>
|
|
954
1173
|
</div>
|
|
955
1174
|
|
|
956
|
-
<
|
|
957
|
-
|
|
958
|
-
<
|
|
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>
|
|
959
1180
|
</div>
|
|
960
1181
|
|
|
961
|
-
<
|
|
962
|
-
|
|
963
|
-
<div
|
|
964
|
-
<div class="
|
|
965
|
-
<
|
|
966
|
-
|
|
967
|
-
<
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
<
|
|
974
|
-
|
|
975
|
-
<
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
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>
|
|
979
1202
|
</div>
|
|
980
1203
|
</div>
|
|
981
1204
|
</div>
|
|
@@ -987,7 +1210,7 @@
|
|
|
987
1210
|
|
|
988
1211
|
<div class="container">
|
|
989
1212
|
<div class="footer">
|
|
990
|
-
Palace UI v0.
|
|
1213
|
+
Palace UI v0.14.0 — CSS-only design system. <a href="#">GitHub</a>
|
|
991
1214
|
</div>
|
|
992
1215
|
</div>
|
|
993
1216
|
|
|
@@ -1010,13 +1233,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
1010
1233
|
.replace(/>/g, '>');
|
|
1011
1234
|
const pre = document.createElement('pre');
|
|
1012
1235
|
pre.innerHTML = escaped;
|
|
1013
|
-
pre.style.marginTop = '12px';
|
|
1014
1236
|
el.after(pre);
|
|
1015
1237
|
});
|
|
1016
1238
|
});
|
|
1017
1239
|
</script>
|
|
1018
1240
|
|
|
1019
|
-
<noscript><
|
|
1241
|
+
<noscript><div class="container"><p class="status">Source code examples require JavaScript.</p></div></noscript>
|
|
1020
1242
|
|
|
1021
1243
|
</body>
|
|
1022
1244
|
</html>
|