@buttonschool/create-wireframe 0.1.1 → 0.2.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/README.md +4 -0
- package/index.js +15 -2
- package/package.json +2 -2
- package/template/.editorconfig +8 -0
- package/template/AGENTS.md +12 -2
- package/template/_partials/nav.html +5 -0
- package/template/components.html +122 -0
- package/template/index.html +25 -2
- package/template/package.json +3 -1
- package/template/src/game.js +302 -0
- package/template/src/kit/components/button.css +53 -0
- package/template/src/kit/components/checkbox.css +26 -0
- package/template/src/kit/components/field.css +11 -0
- package/template/src/kit/components/input.css +31 -0
- package/template/src/kit/components/label.css +14 -0
- package/template/src/kit/components/radio.css +26 -0
- package/template/src/kit/components/select.css +69 -0
- package/template/src/kit/components/textarea.css +33 -0
- package/template/src/kit/tokens.css +28 -0
- package/template/src/main.js +1 -6
- package/template/src/strings.json +24 -0
- package/template/src/{style.css → styles/base.css} +7 -7
- package/template/src/styles/components/nav.css +36 -0
- package/template/src/styles/layout.css +5 -0
- package/template/src/styles/main.css +15 -0
- package/template/src/styles/pages/components-showcase.css +38 -0
- package/template/src/styles/pages/start.css +243 -0
- package/template/src/styles/pages/tokens-showcase.css +233 -0
- package/template/tokens.html +240 -0
- package/template/vite.config.js +29 -1
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
/* Code font/color for this page only – not part of the wireframe kit. */
|
|
2
|
+
@import "@fontsource/monaspace-argon/400.css";
|
|
3
|
+
|
|
4
|
+
.token-showcase-intro {
|
|
5
|
+
margin-block-end: var(--wire-space-2xl);
|
|
6
|
+
color: var(--wire-text-muted);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.token-showcase code {
|
|
10
|
+
padding: var(--wire-space-2xs) 0;
|
|
11
|
+
background-color: var(--wire-surface-alt);
|
|
12
|
+
border-radius: var(--wire-radius-sm);
|
|
13
|
+
font-family: "Monaspace Argon", monospace;
|
|
14
|
+
font-size: var(--wire-text-xs);
|
|
15
|
+
color: #c41;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.showcase-section {
|
|
20
|
+
margin-block-end: var(--wire-space-3xl);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.showcase-section h2 {
|
|
24
|
+
font-size: var(--wire-text-subheading);
|
|
25
|
+
margin-block-end: var(--wire-space-md);
|
|
26
|
+
color: var(--wire-text-secondary);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.showcase-section h3 {
|
|
30
|
+
font-size: var(--wire-text-base);
|
|
31
|
+
font-weight: var(--wire-font-weight-bold);
|
|
32
|
+
margin-block: var(--wire-space-lg) var(--wire-space-sm);
|
|
33
|
+
color: var(--wire-text-secondary);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.text-muted {
|
|
37
|
+
color: var(--wire-text-muted);
|
|
38
|
+
font-size: var(--wire-text-sm);
|
|
39
|
+
margin-block-start: var(--wire-space-md);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.colors-two-col {
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-template-columns: 1fr;
|
|
45
|
+
gap: var(--wire-space-2xl);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@media (min-width: 600px) {
|
|
49
|
+
.colors-two-col {
|
|
50
|
+
grid-template-columns: 1fr 1fr;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.colors-two-col .swatches {
|
|
55
|
+
margin: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.swatches {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: var(--wire-space-sm);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.swatch {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: var(--wire-space-md);
|
|
69
|
+
margin: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.swatch .swatch-sample {
|
|
73
|
+
width: 3rem;
|
|
74
|
+
height: 3rem;
|
|
75
|
+
aspect-ratio: 1;
|
|
76
|
+
border-radius: var(--wire-radius-md);
|
|
77
|
+
flex-shrink: 0;
|
|
78
|
+
border: var(--wire-border-width) solid var(--wire-dark);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.swatch figcaption {
|
|
82
|
+
font-size: var(--wire-text-xs);
|
|
83
|
+
color: var(--wire-text-muted);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.spacing-demos {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
gap: var(--wire-space-sm);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.spacing-figure {
|
|
93
|
+
margin: 0;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
align-items: center;
|
|
97
|
+
gap: var(--wire-space-md);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.spacing-figure .spacing-visual {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.spacing-figure .spacing-block {
|
|
107
|
+
width: 2rem;
|
|
108
|
+
height: 2rem;
|
|
109
|
+
aspect-ratio: 1;
|
|
110
|
+
background-color: var(--wire-dark);
|
|
111
|
+
border-radius: var(--wire-radius-sm);
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.spacing-figure figcaption {
|
|
116
|
+
font-size: var(--wire-text-xs);
|
|
117
|
+
color: var(--wire-text-muted);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.typography-two-col {
|
|
121
|
+
display: grid;
|
|
122
|
+
grid-template-columns: 1fr;
|
|
123
|
+
gap: var(--wire-space-2xl);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@media (min-width: 600px) {
|
|
127
|
+
.typography-two-col {
|
|
128
|
+
grid-template-columns: 1fr 1fr;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.sizing-two-col {
|
|
133
|
+
display: grid;
|
|
134
|
+
grid-template-columns: 1fr;
|
|
135
|
+
gap: var(--wire-space-2xl);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media (min-width: 600px) {
|
|
139
|
+
.sizing-two-col {
|
|
140
|
+
grid-template-columns: 1fr 1fr;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.sizing-demos {
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
gap: var(--wire-space-sm);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.sizing-subsection {
|
|
151
|
+
margin: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sizing-figure {
|
|
155
|
+
margin: 0;
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-direction: row;
|
|
158
|
+
align-items: center;
|
|
159
|
+
gap: var(--wire-space-md);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.sizing-figure .icon-sample {
|
|
163
|
+
background-color: var(--wire-mid);
|
|
164
|
+
border-radius: var(--wire-radius-sm);
|
|
165
|
+
flex-shrink: 0;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.sizing-figure .avatar-sample {
|
|
169
|
+
background-color: var(--wire-dark);
|
|
170
|
+
border-radius: var(--wire-radius-full);
|
|
171
|
+
flex-shrink: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.sizing-figure figcaption {
|
|
175
|
+
font-size: var(--wire-text-xs);
|
|
176
|
+
color: var(--wire-text-muted);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.radius-demos {
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-direction: column;
|
|
182
|
+
gap: var(--wire-space-sm);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.radius-figure {
|
|
186
|
+
margin: 0;
|
|
187
|
+
display: flex;
|
|
188
|
+
flex-direction: row;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: var(--wire-space-md);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.radius-figure .radius-sample {
|
|
194
|
+
width: 3rem;
|
|
195
|
+
height: 3rem;
|
|
196
|
+
aspect-ratio: 1;
|
|
197
|
+
background-color: var(--wire-dark);
|
|
198
|
+
color: var(--wire-white);
|
|
199
|
+
font-size: var(--wire-text-xs);
|
|
200
|
+
display: flex;
|
|
201
|
+
align-items: center;
|
|
202
|
+
justify-content: center;
|
|
203
|
+
flex-shrink: 0;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.radius-figure figcaption {
|
|
207
|
+
font-size: var(--wire-text-xs);
|
|
208
|
+
color: var(--wire-text-muted);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.type-sample {
|
|
212
|
+
margin-block-end: var(--wire-space-sm);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.type-scale-heading {
|
|
216
|
+
font-size: var(--wire-text-base);
|
|
217
|
+
font-weight: var(--wire-font-weight-bold);
|
|
218
|
+
margin-block: var(--wire-space-lg) var(--wire-space-sm);
|
|
219
|
+
color: var(--wire-text-secondary);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.type-scale-line {
|
|
223
|
+
margin-block-end: var(--wire-space-xs);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.type-scale-line:last-of-type {
|
|
227
|
+
margin-block-end: 0;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.type-scale--semantic .type-scale-line code {
|
|
231
|
+
display: block;
|
|
232
|
+
margin-block-start: var(--wire-space-2xs);
|
|
233
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<link rel="stylesheet" href="/src/styles/main.css" />
|
|
7
|
+
<title>Tokens – Wireframe</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
{% include "_partials/nav.html" %}
|
|
11
|
+
<main class="token-showcase">
|
|
12
|
+
<h1>Design tokens</h1>
|
|
13
|
+
<p class="token-showcase-intro">This page shows the wireframe kit tokens. Use them in your CSS with <code>var(--wire-*)</code>.</p>
|
|
14
|
+
|
|
15
|
+
<section class="showcase-section">
|
|
16
|
+
<h2>Colors</h2>
|
|
17
|
+
<div class="colors-two-col">
|
|
18
|
+
<div>
|
|
19
|
+
<h3>Base colors</h3>
|
|
20
|
+
<div class="swatches">
|
|
21
|
+
<figure class="swatch">
|
|
22
|
+
<div class="swatch-sample" style="background-color: var(--wire-black);"></div>
|
|
23
|
+
<figcaption><code>--wire-black</code></figcaption>
|
|
24
|
+
</figure>
|
|
25
|
+
<figure class="swatch">
|
|
26
|
+
<div class="swatch-sample" style="background-color: var(--wire-dark);"></div>
|
|
27
|
+
<figcaption><code>--wire-dark</code></figcaption>
|
|
28
|
+
</figure>
|
|
29
|
+
<figure class="swatch">
|
|
30
|
+
<div class="swatch-sample" style="background-color: var(--wire-mid);"></div>
|
|
31
|
+
<figcaption><code>--wire-mid</code></figcaption>
|
|
32
|
+
</figure>
|
|
33
|
+
<figure class="swatch">
|
|
34
|
+
<div class="swatch-sample" style="background-color: var(--wire-light);"></div>
|
|
35
|
+
<figcaption><code>--wire-light</code></figcaption>
|
|
36
|
+
</figure>
|
|
37
|
+
<figure class="swatch">
|
|
38
|
+
<div class="swatch-sample" style="background-color: var(--wire-lighter);"></div>
|
|
39
|
+
<figcaption><code>--wire-lighter</code></figcaption>
|
|
40
|
+
</figure>
|
|
41
|
+
<figure class="swatch">
|
|
42
|
+
<div class="swatch-sample" style="background-color: var(--wire-bg);"></div>
|
|
43
|
+
<figcaption><code>--wire-bg</code></figcaption>
|
|
44
|
+
</figure>
|
|
45
|
+
<figure class="swatch">
|
|
46
|
+
<div class="swatch-sample" style="background-color: var(--wire-white);"></div>
|
|
47
|
+
<figcaption><code>--wire-white</code></figcaption>
|
|
48
|
+
</figure>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div>
|
|
52
|
+
<h3>Semantic colors</h3>
|
|
53
|
+
<div class="swatches">
|
|
54
|
+
<figure class="swatch">
|
|
55
|
+
<div class="swatch-sample" style="background-color: var(--wire-text-primary);"></div>
|
|
56
|
+
<figcaption><code>--wire-text-primary</code></figcaption>
|
|
57
|
+
</figure>
|
|
58
|
+
<figure class="swatch">
|
|
59
|
+
<div class="swatch-sample" style="background-color: var(--wire-text-secondary);"></div>
|
|
60
|
+
<figcaption><code>--wire-text-secondary</code></figcaption>
|
|
61
|
+
</figure>
|
|
62
|
+
<figure class="swatch">
|
|
63
|
+
<div class="swatch-sample" style="background-color: var(--wire-text-muted);"></div>
|
|
64
|
+
<figcaption><code>--wire-text-muted</code></figcaption>
|
|
65
|
+
</figure>
|
|
66
|
+
<figure class="swatch">
|
|
67
|
+
<div class="swatch-sample" style="background-color: var(--wire-text-placeholder);"></div>
|
|
68
|
+
<figcaption><code>--wire-text-placeholder</code></figcaption>
|
|
69
|
+
</figure>
|
|
70
|
+
<figure class="swatch">
|
|
71
|
+
<div class="swatch-sample" style="background-color: var(--wire-surface);"></div>
|
|
72
|
+
<figcaption><code>--wire-surface</code></figcaption>
|
|
73
|
+
</figure>
|
|
74
|
+
<figure class="swatch">
|
|
75
|
+
<div class="swatch-sample" style="background-color: var(--wire-surface-alt);"></div>
|
|
76
|
+
<figcaption><code>--wire-surface-alt</code></figcaption>
|
|
77
|
+
</figure>
|
|
78
|
+
<figure class="swatch">
|
|
79
|
+
<div class="swatch-sample" style="background-color: var(--wire-border);"></div>
|
|
80
|
+
<figcaption><code>--wire-border</code></figcaption>
|
|
81
|
+
</figure>
|
|
82
|
+
<figure class="swatch">
|
|
83
|
+
<div class="swatch-sample" style="background-color: var(--wire-border-light);"></div>
|
|
84
|
+
<figcaption><code>--wire-border-light</code></figcaption>
|
|
85
|
+
</figure>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</section>
|
|
90
|
+
|
|
91
|
+
<section class="showcase-section">
|
|
92
|
+
<h2>Spacing</h2>
|
|
93
|
+
<p class="text-muted">Gap between the two blocks is the token value.</p>
|
|
94
|
+
<div class="spacing-demos">
|
|
95
|
+
<figure class="spacing-figure">
|
|
96
|
+
<div class="spacing-visual" style="gap: var(--wire-space-xs);">
|
|
97
|
+
<div class="spacing-block"></div>
|
|
98
|
+
<div class="spacing-block"></div>
|
|
99
|
+
</div>
|
|
100
|
+
<figcaption><code>--wire-space-xs</code></figcaption>
|
|
101
|
+
</figure>
|
|
102
|
+
<figure class="spacing-figure">
|
|
103
|
+
<div class="spacing-visual" style="gap: var(--wire-space-sm);">
|
|
104
|
+
<div class="spacing-block"></div>
|
|
105
|
+
<div class="spacing-block"></div>
|
|
106
|
+
</div>
|
|
107
|
+
<figcaption><code>--wire-space-sm</code></figcaption>
|
|
108
|
+
</figure>
|
|
109
|
+
<figure class="spacing-figure">
|
|
110
|
+
<div class="spacing-visual" style="gap: var(--wire-space-md);">
|
|
111
|
+
<div class="spacing-block"></div>
|
|
112
|
+
<div class="spacing-block"></div>
|
|
113
|
+
</div>
|
|
114
|
+
<figcaption><code>--wire-space-md</code></figcaption>
|
|
115
|
+
</figure>
|
|
116
|
+
<figure class="spacing-figure">
|
|
117
|
+
<div class="spacing-visual" style="gap: var(--wire-space-lg);">
|
|
118
|
+
<div class="spacing-block"></div>
|
|
119
|
+
<div class="spacing-block"></div>
|
|
120
|
+
</div>
|
|
121
|
+
<figcaption><code>--wire-space-lg</code></figcaption>
|
|
122
|
+
</figure>
|
|
123
|
+
<figure class="spacing-figure">
|
|
124
|
+
<div class="spacing-visual" style="gap: var(--wire-space-xl);">
|
|
125
|
+
<div class="spacing-block"></div>
|
|
126
|
+
<div class="spacing-block"></div>
|
|
127
|
+
</div>
|
|
128
|
+
<figcaption><code>--wire-space-xl</code></figcaption>
|
|
129
|
+
</figure>
|
|
130
|
+
<figure class="spacing-figure">
|
|
131
|
+
<div class="spacing-visual" style="gap: var(--wire-space-2xl);">
|
|
132
|
+
<div class="spacing-block"></div>
|
|
133
|
+
<div class="spacing-block"></div>
|
|
134
|
+
</div>
|
|
135
|
+
<figcaption><code>--wire-space-2xl</code></figcaption>
|
|
136
|
+
</figure>
|
|
137
|
+
<figure class="spacing-figure">
|
|
138
|
+
<div class="spacing-visual" style="gap: var(--wire-space-3xl);">
|
|
139
|
+
<div class="spacing-block"></div>
|
|
140
|
+
<div class="spacing-block"></div>
|
|
141
|
+
</div>
|
|
142
|
+
<figcaption><code>--wire-space-3xl</code></figcaption>
|
|
143
|
+
</figure>
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
|
|
147
|
+
<section class="showcase-section">
|
|
148
|
+
<h2>Typography</h2>
|
|
149
|
+
<p class="type-sample" style="font-weight: var(--wire-font-weight-normal);">Comic Neue, normal weight (400).</p>
|
|
150
|
+
<p class="type-sample" style="font-weight: var(--wire-font-weight-bold);">Comic Neue, bold (700).</p>
|
|
151
|
+
<div class="typography-two-col">
|
|
152
|
+
<div>
|
|
153
|
+
<h3 class="type-scale-heading">Type scale</h3>
|
|
154
|
+
<div class="type-scale type-scale--semantic">
|
|
155
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-2xs);">Sample text<code>--wire-text-2xs</code></p>
|
|
156
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-xs);">Sample text<code>--wire-text-xs</code></p>
|
|
157
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-sm);">Sample text<code>--wire-text-sm</code></p>
|
|
158
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-base);">Sample text<code>--wire-text-base</code></p>
|
|
159
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-lg);">Sample text<code>--wire-text-lg</code></p>
|
|
160
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-xl);">Sample text<code>--wire-text-xl</code></p>
|
|
161
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-2xl);">Sample text<code>--wire-text-2xl</code></p>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div>
|
|
165
|
+
<h3 class="type-scale-heading">Semantic type</h3>
|
|
166
|
+
<div class="type-scale type-scale--semantic">
|
|
167
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-body);">Body text<code>--wire-text-body</code></p>
|
|
168
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-heading);">Heading<code>--wire-text-heading</code></p>
|
|
169
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-subheading);">Subheading<code>--wire-text-subheading</code></p>
|
|
170
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-caption);">Caption<code>--wire-text-caption</code></p>
|
|
171
|
+
<p class="type-scale-line" style="font-size: var(--wire-text-label);">Label<code>--wire-text-label</code></p>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
|
|
177
|
+
<section class="showcase-section">
|
|
178
|
+
<h2>Border radius</h2>
|
|
179
|
+
<div class="radius-demos">
|
|
180
|
+
<figure class="radius-figure">
|
|
181
|
+
<div class="radius-sample" style="border-radius: var(--wire-radius-sm);">sm</div>
|
|
182
|
+
<figcaption><code>--wire-radius-sm</code></figcaption>
|
|
183
|
+
</figure>
|
|
184
|
+
<figure class="radius-figure">
|
|
185
|
+
<div class="radius-sample" style="border-radius: var(--wire-radius-md);">md</div>
|
|
186
|
+
<figcaption><code>--wire-radius-md</code></figcaption>
|
|
187
|
+
</figure>
|
|
188
|
+
<figure class="radius-figure">
|
|
189
|
+
<div class="radius-sample" style="border-radius: var(--wire-radius-lg);">lg</div>
|
|
190
|
+
<figcaption><code>--wire-radius-lg</code></figcaption>
|
|
191
|
+
</figure>
|
|
192
|
+
<figure class="radius-figure">
|
|
193
|
+
<div class="radius-sample" style="border-radius: var(--wire-radius-full);">full</div>
|
|
194
|
+
<figcaption><code>--wire-radius-full</code></figcaption>
|
|
195
|
+
</figure>
|
|
196
|
+
</div>
|
|
197
|
+
</section>
|
|
198
|
+
|
|
199
|
+
<section class="showcase-section">
|
|
200
|
+
<h2>Sizing</h2>
|
|
201
|
+
<div class="sizing-two-col">
|
|
202
|
+
<div class="sizing-subsection">
|
|
203
|
+
<h3>Icon sizes</h3>
|
|
204
|
+
<div class="sizing-demos">
|
|
205
|
+
<figure class="sizing-figure">
|
|
206
|
+
<div class="icon-sample" style="width: var(--wire-size-icon-sm); height: var(--wire-size-icon-sm);"></div>
|
|
207
|
+
<figcaption><code>--wire-size-icon-sm</code></figcaption>
|
|
208
|
+
</figure>
|
|
209
|
+
<figure class="sizing-figure">
|
|
210
|
+
<div class="icon-sample" style="width: var(--wire-size-icon-md); height: var(--wire-size-icon-md);"></div>
|
|
211
|
+
<figcaption><code>--wire-size-icon-md</code></figcaption>
|
|
212
|
+
</figure>
|
|
213
|
+
<figure class="sizing-figure">
|
|
214
|
+
<div class="icon-sample" style="width: var(--wire-size-icon-lg); height: var(--wire-size-icon-lg);"></div>
|
|
215
|
+
<figcaption><code>--wire-size-icon-lg</code></figcaption>
|
|
216
|
+
</figure>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="sizing-subsection">
|
|
220
|
+
<h3>Avatar sizes</h3>
|
|
221
|
+
<div class="sizing-demos">
|
|
222
|
+
<figure class="sizing-figure">
|
|
223
|
+
<div class="avatar-sample" style="width: var(--wire-size-avatar-sm); height: var(--wire-size-avatar-sm);"></div>
|
|
224
|
+
<figcaption><code>--wire-size-avatar-sm</code></figcaption>
|
|
225
|
+
</figure>
|
|
226
|
+
<figure class="sizing-figure">
|
|
227
|
+
<div class="avatar-sample" style="width: var(--wire-size-avatar-md); height: var(--wire-size-avatar-md);"></div>
|
|
228
|
+
<figcaption><code>--wire-size-avatar-md</code></figcaption>
|
|
229
|
+
</figure>
|
|
230
|
+
<figure class="sizing-figure">
|
|
231
|
+
<div class="avatar-sample" style="width: var(--wire-size-avatar-lg); height: var(--wire-size-avatar-lg);"></div>
|
|
232
|
+
<figcaption><code>--wire-size-avatar-lg</code></figcaption>
|
|
233
|
+
</figure>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
</section>
|
|
238
|
+
</main>
|
|
239
|
+
</body>
|
|
240
|
+
</html>
|
package/template/vite.config.js
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
import { readFileSync, readdirSync } from "fs";
|
|
2
|
+
import { dirname, resolve } from "path";
|
|
3
|
+
import { fileURLToPath } from "url";
|
|
1
4
|
import { defineConfig } from "vite";
|
|
5
|
+
import nunjucks from "vite-plugin-nunjucks";
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
const root = dirname(fileURLToPath(import.meta.url));
|
|
8
|
+
const htmlFiles = readdirSync(root).filter((f) => f.endsWith(".html"));
|
|
9
|
+
const input = Object.fromEntries(
|
|
10
|
+
htmlFiles.map((f) => [f.replace(/\.html$/, ""), resolve(root, f)])
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
const strings = JSON.parse(
|
|
14
|
+
readFileSync(resolve(root, "src/strings.json"), "utf-8")
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
export default defineConfig({
|
|
18
|
+
plugins: [
|
|
19
|
+
nunjucks({
|
|
20
|
+
templatesDir: root,
|
|
21
|
+
variables: {
|
|
22
|
+
"index.html": { ...strings, current: "start" },
|
|
23
|
+
"tokens.html": { ...strings, current: "tokens" },
|
|
24
|
+
"components.html": { ...strings, current: "components" },
|
|
25
|
+
},
|
|
26
|
+
}),
|
|
27
|
+
],
|
|
28
|
+
build: {
|
|
29
|
+
rollupOptions: { input },
|
|
30
|
+
},
|
|
31
|
+
});
|