appostle-installer 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/appostle.js +760 -353
- package/dist/appostle.js.map +4 -4
- package/dist/schema-templates/art-direction.md +90 -0
- package/dist/schema-templates/buttons.md +298 -31
- package/dist/schema-templates/icons.md +26 -19
- package/dist/schema-templates/motion.md +35 -15
- package/dist/schema-templates/spacing.md +52 -32
- package/dist/worker.js +1129 -534
- package/dist/worker.js.map +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: ""
|
|
3
|
+
variables:
|
|
4
|
+
- key: layout.base-unit
|
|
5
|
+
type: number
|
|
6
|
+
label: Base Unit
|
|
7
|
+
value: 4
|
|
8
|
+
section: layout
|
|
9
|
+
- key: layout.max-width
|
|
10
|
+
type: number
|
|
11
|
+
label: Max Content Width
|
|
12
|
+
value: 1200
|
|
13
|
+
section: layout
|
|
14
|
+
- key: layout.hero
|
|
15
|
+
type: select
|
|
16
|
+
label: Hero Style
|
|
17
|
+
value: none
|
|
18
|
+
section: layout
|
|
19
|
+
options: [none, split, left-aligned, editorial, image-led, fullscreen]
|
|
20
|
+
- key: layout.feature-layout
|
|
21
|
+
type: select
|
|
22
|
+
label: Feature Layout
|
|
23
|
+
value: none
|
|
24
|
+
section: layout
|
|
25
|
+
options: [none, zig-zag, bento, horizontal-scroll, staggered, masonry]
|
|
26
|
+
- key: layout.section-rhythm
|
|
27
|
+
type: select
|
|
28
|
+
label: Section Rhythm
|
|
29
|
+
value: none
|
|
30
|
+
section: layout
|
|
31
|
+
options: [none, uniform, varied, oscillating, bimodal]
|
|
32
|
+
- key: layout.density
|
|
33
|
+
type: select
|
|
34
|
+
label: Density
|
|
35
|
+
value: none
|
|
36
|
+
section: layout
|
|
37
|
+
options: [none, airy, moderate, dense]
|
|
38
|
+
- key: layout.section-color
|
|
39
|
+
type: select
|
|
40
|
+
label: Section Color
|
|
41
|
+
value: all-neutral
|
|
42
|
+
section: layout
|
|
43
|
+
options: [all-neutral, alternating, accent-sections]
|
|
44
|
+
- key: layout.grid
|
|
45
|
+
type: select
|
|
46
|
+
label: Grid System
|
|
47
|
+
value: none
|
|
48
|
+
section: layout
|
|
49
|
+
options: [none, invisible-12col, asymmetric, visible-borders, bento]
|
|
50
|
+
- key: layout.image-height
|
|
51
|
+
type: select
|
|
52
|
+
label: Image Height
|
|
53
|
+
value: none
|
|
54
|
+
section: layout
|
|
55
|
+
options: [none, constrained, half-viewport, full-viewport, unconstrained]
|
|
56
|
+
- key: layout.image-aspect
|
|
57
|
+
type: select
|
|
58
|
+
label: Image Aspect
|
|
59
|
+
value: none
|
|
60
|
+
section: layout
|
|
61
|
+
options: [none, mixed, uniform, square, cinematic-wide]
|
|
62
|
+
- key: layout.image-treatment
|
|
63
|
+
type: select
|
|
64
|
+
label: Image Treatment
|
|
65
|
+
value: none
|
|
66
|
+
section: layout
|
|
67
|
+
options: [none, raw, desaturated, warm-grade, high-contrast, editorial-crop]
|
|
68
|
+
- key: layout.cta-density
|
|
69
|
+
type: select
|
|
70
|
+
label: CTA Density
|
|
71
|
+
value: none
|
|
72
|
+
section: layout
|
|
73
|
+
options: [none, one-per-section, multiple, minimal]
|
|
74
|
+
- key: layout.dividers
|
|
75
|
+
type: select
|
|
76
|
+
label: Dividers
|
|
77
|
+
value: none
|
|
78
|
+
section: layout
|
|
79
|
+
options: [none, hairline, thick-rule, full-width]
|
|
80
|
+
- key: layout.bg-texture
|
|
81
|
+
type: select
|
|
82
|
+
label: Background Texture
|
|
83
|
+
value: none
|
|
84
|
+
section: layout
|
|
85
|
+
options: [none, subtle-noise, scanlines, grain]
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
# Layout
|
|
89
|
+
|
|
90
|
+
Structural layout rules for this brand. Defines page structure, section rhythm, density, grid system, and image treatment. A builder reads this to understand the spatial and compositional constraints before applying visual tokens.
|
|
@@ -1,73 +1,340 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: Button
|
|
2
|
+
description: Button system — Primary, Secondary, Text buttons and Pills
|
|
3
3
|
variables:
|
|
4
|
-
|
|
4
|
+
# Primary button (always on — the mandatory base)
|
|
5
|
+
- key: button.primary.radius
|
|
6
|
+
type: number
|
|
7
|
+
label: Primary Radius (px)
|
|
8
|
+
value: "8"
|
|
9
|
+
section: visual
|
|
10
|
+
- key: button.primary.padding
|
|
11
|
+
type: number
|
|
12
|
+
label: Primary Padding (px)
|
|
13
|
+
value: "16"
|
|
14
|
+
section: visual
|
|
15
|
+
- key: button.primary.icon
|
|
16
|
+
type: select
|
|
17
|
+
label: Primary Icon
|
|
18
|
+
value: "no"
|
|
19
|
+
options: [yes, no]
|
|
20
|
+
section: visual
|
|
21
|
+
- key: button.primary.icon.position
|
|
22
|
+
type: select
|
|
23
|
+
label: Primary Icon Position
|
|
24
|
+
value: right
|
|
25
|
+
options: [left, right]
|
|
26
|
+
section: visual
|
|
27
|
+
- key: button.primary.icon.name
|
|
5
28
|
type: text
|
|
6
|
-
label:
|
|
29
|
+
label: Primary Icon Name
|
|
30
|
+
value: ChevronRight
|
|
31
|
+
section: visual
|
|
32
|
+
- key: button.primary.border.width
|
|
33
|
+
type: number
|
|
34
|
+
label: Primary Border (px)
|
|
35
|
+
value: "0"
|
|
36
|
+
section: visual
|
|
37
|
+
- key: button.primary.fill
|
|
38
|
+
type: color
|
|
39
|
+
label: Primary Fill
|
|
7
40
|
value: ""
|
|
8
41
|
section: visual
|
|
9
|
-
- key: button.
|
|
42
|
+
- key: button.primary.fill.opacity
|
|
10
43
|
type: number
|
|
11
|
-
label:
|
|
44
|
+
label: Primary Fill Opacity
|
|
45
|
+
value: "100"
|
|
46
|
+
section: visual
|
|
47
|
+
- key: button.primary.border.color
|
|
48
|
+
type: color
|
|
49
|
+
label: Primary Border Color
|
|
12
50
|
value: ""
|
|
13
51
|
section: visual
|
|
14
|
-
- key: button.
|
|
15
|
-
type:
|
|
16
|
-
label:
|
|
52
|
+
- key: button.primary.border.color.opacity
|
|
53
|
+
type: number
|
|
54
|
+
label: Primary Border Opacity
|
|
55
|
+
value: "100"
|
|
56
|
+
section: visual
|
|
57
|
+
- key: button.primary.text.color
|
|
58
|
+
type: color
|
|
59
|
+
label: Primary Text Color
|
|
17
60
|
value: ""
|
|
18
61
|
section: visual
|
|
19
|
-
- key: button.
|
|
62
|
+
- key: button.primary.text.color.opacity
|
|
63
|
+
type: number
|
|
64
|
+
label: Primary Text Opacity
|
|
65
|
+
value: "100"
|
|
66
|
+
section: visual
|
|
67
|
+
|
|
68
|
+
# Secondary button
|
|
69
|
+
- key: button.secondary.enabled
|
|
70
|
+
type: select
|
|
71
|
+
label: Secondary Enabled
|
|
72
|
+
value: "yes"
|
|
73
|
+
options: [yes, no]
|
|
74
|
+
section: visual
|
|
75
|
+
- key: button.secondary.radius
|
|
76
|
+
type: number
|
|
77
|
+
label: Secondary Radius (px)
|
|
78
|
+
value: "8"
|
|
79
|
+
section: visual
|
|
80
|
+
- key: button.secondary.padding
|
|
81
|
+
type: number
|
|
82
|
+
label: Secondary Padding (px)
|
|
83
|
+
value: "16"
|
|
84
|
+
section: visual
|
|
85
|
+
- key: button.secondary.icon
|
|
86
|
+
type: select
|
|
87
|
+
label: Secondary Icon
|
|
88
|
+
value: "no"
|
|
89
|
+
options: [yes, no]
|
|
90
|
+
section: visual
|
|
91
|
+
- key: button.secondary.icon.position
|
|
92
|
+
type: select
|
|
93
|
+
label: Secondary Icon Position
|
|
94
|
+
value: right
|
|
95
|
+
options: [left, right]
|
|
96
|
+
section: visual
|
|
97
|
+
- key: button.secondary.icon.name
|
|
20
98
|
type: text
|
|
21
|
-
label:
|
|
99
|
+
label: Secondary Icon Name
|
|
100
|
+
value: ChevronRight
|
|
101
|
+
section: visual
|
|
102
|
+
- key: button.secondary.border.width
|
|
103
|
+
type: number
|
|
104
|
+
label: Secondary Border (px)
|
|
105
|
+
value: "1"
|
|
106
|
+
section: visual
|
|
107
|
+
- key: button.secondary.fill
|
|
108
|
+
type: color
|
|
109
|
+
label: Secondary Fill
|
|
22
110
|
value: ""
|
|
23
111
|
section: visual
|
|
24
|
-
- key: button.
|
|
25
|
-
type:
|
|
26
|
-
label:
|
|
112
|
+
- key: button.secondary.fill.opacity
|
|
113
|
+
type: number
|
|
114
|
+
label: Secondary Fill Opacity
|
|
115
|
+
value: "100"
|
|
116
|
+
section: visual
|
|
117
|
+
- key: button.secondary.border.color
|
|
118
|
+
type: color
|
|
119
|
+
label: Secondary Border Color
|
|
27
120
|
value: ""
|
|
28
121
|
section: visual
|
|
29
|
-
- key: button.
|
|
122
|
+
- key: button.secondary.border.color.opacity
|
|
123
|
+
type: number
|
|
124
|
+
label: Secondary Border Opacity
|
|
125
|
+
value: "100"
|
|
126
|
+
section: visual
|
|
127
|
+
- key: button.secondary.text.color
|
|
128
|
+
type: color
|
|
129
|
+
label: Secondary Text Color
|
|
130
|
+
value: ""
|
|
131
|
+
section: visual
|
|
132
|
+
- key: button.secondary.text.color.opacity
|
|
133
|
+
type: number
|
|
134
|
+
label: Secondary Text Opacity
|
|
135
|
+
value: "100"
|
|
136
|
+
section: visual
|
|
137
|
+
|
|
138
|
+
# Text button (no fill, no border — just text + optional icon)
|
|
139
|
+
- key: button.text.enabled
|
|
140
|
+
type: select
|
|
141
|
+
label: Text Button Enabled
|
|
142
|
+
value: "yes"
|
|
143
|
+
options: [yes, no]
|
|
144
|
+
section: visual
|
|
145
|
+
- key: button.text.icon
|
|
146
|
+
type: select
|
|
147
|
+
label: Text Icon
|
|
148
|
+
value: "no"
|
|
149
|
+
options: [yes, no]
|
|
150
|
+
section: visual
|
|
151
|
+
- key: button.text.icon.position
|
|
152
|
+
type: select
|
|
153
|
+
label: Text Icon Position
|
|
154
|
+
value: right
|
|
155
|
+
options: [left, right]
|
|
156
|
+
section: visual
|
|
157
|
+
- key: button.text.icon.name
|
|
30
158
|
type: text
|
|
31
|
-
label:
|
|
159
|
+
label: Text Icon Name
|
|
160
|
+
value: ChevronRight
|
|
161
|
+
section: visual
|
|
162
|
+
- key: button.text.padding
|
|
163
|
+
type: number
|
|
164
|
+
label: Text Padding (px)
|
|
165
|
+
value: "8"
|
|
166
|
+
section: visual
|
|
167
|
+
- key: button.text.text.color
|
|
168
|
+
type: color
|
|
169
|
+
label: Text Button Color
|
|
32
170
|
value: ""
|
|
33
171
|
section: visual
|
|
34
|
-
- key: button.
|
|
172
|
+
- key: button.text.text.color.opacity
|
|
173
|
+
type: number
|
|
174
|
+
label: Text Button Opacity
|
|
175
|
+
value: "100"
|
|
176
|
+
section: visual
|
|
177
|
+
|
|
178
|
+
# Pills
|
|
179
|
+
- key: pill.enabled
|
|
180
|
+
type: select
|
|
181
|
+
label: Pills Enabled
|
|
182
|
+
value: "yes"
|
|
183
|
+
options: [yes, no]
|
|
184
|
+
section: visual
|
|
185
|
+
- key: pill.radius
|
|
186
|
+
type: number
|
|
187
|
+
label: Pill Radius (px)
|
|
188
|
+
value: "999"
|
|
189
|
+
section: visual
|
|
190
|
+
- key: pill.padding
|
|
191
|
+
type: number
|
|
192
|
+
label: Pill Padding (px)
|
|
193
|
+
value: "10"
|
|
194
|
+
section: visual
|
|
195
|
+
- key: pill.icon
|
|
196
|
+
type: select
|
|
197
|
+
label: Pill Icon
|
|
198
|
+
value: "no"
|
|
199
|
+
options: [yes, no]
|
|
200
|
+
section: visual
|
|
201
|
+
- key: pill.icon.position
|
|
202
|
+
type: select
|
|
203
|
+
label: Pill Icon Position
|
|
204
|
+
value: left
|
|
205
|
+
options: [left, right]
|
|
206
|
+
section: visual
|
|
207
|
+
- key: pill.icon.name
|
|
35
208
|
type: text
|
|
36
|
-
label:
|
|
209
|
+
label: Pill Icon Name
|
|
210
|
+
value: ChevronRight
|
|
211
|
+
section: visual
|
|
212
|
+
- key: pill.border.width
|
|
213
|
+
type: number
|
|
214
|
+
label: Pill Border (px)
|
|
215
|
+
value: "1"
|
|
216
|
+
section: visual
|
|
217
|
+
- key: pill.active.fill
|
|
218
|
+
type: color
|
|
219
|
+
label: Pill Active Fill
|
|
37
220
|
value: ""
|
|
38
221
|
section: visual
|
|
39
|
-
- key:
|
|
222
|
+
- key: pill.active.fill.opacity
|
|
223
|
+
type: number
|
|
224
|
+
label: Pill Active Fill Opacity
|
|
225
|
+
value: "100"
|
|
226
|
+
section: visual
|
|
227
|
+
- key: pill.active.border.color
|
|
40
228
|
type: color
|
|
41
|
-
label:
|
|
229
|
+
label: Pill Active Border
|
|
42
230
|
value: ""
|
|
43
231
|
section: visual
|
|
44
|
-
- key:
|
|
232
|
+
- key: pill.active.border.color.opacity
|
|
233
|
+
type: number
|
|
234
|
+
label: Pill Active Border Opacity
|
|
235
|
+
value: "100"
|
|
236
|
+
section: visual
|
|
237
|
+
- key: pill.active.text.color
|
|
45
238
|
type: color
|
|
46
|
-
label:
|
|
239
|
+
label: Pill Active Text
|
|
47
240
|
value: ""
|
|
48
241
|
section: visual
|
|
49
|
-
- key:
|
|
242
|
+
- key: pill.active.text.color.opacity
|
|
243
|
+
type: number
|
|
244
|
+
label: Pill Active Text Opacity
|
|
245
|
+
value: "100"
|
|
246
|
+
section: visual
|
|
247
|
+
- key: pill.inactive.fill
|
|
50
248
|
type: color
|
|
51
|
-
label:
|
|
249
|
+
label: Pill Inactive Fill
|
|
52
250
|
value: ""
|
|
53
251
|
section: visual
|
|
54
|
-
- key:
|
|
252
|
+
- key: pill.inactive.fill.opacity
|
|
253
|
+
type: number
|
|
254
|
+
label: Pill Inactive Fill Opacity
|
|
255
|
+
value: "100"
|
|
256
|
+
section: visual
|
|
257
|
+
- key: pill.inactive.border.color
|
|
55
258
|
type: color
|
|
56
|
-
label:
|
|
259
|
+
label: Pill Inactive Border
|
|
57
260
|
value: ""
|
|
58
261
|
section: visual
|
|
59
|
-
- key:
|
|
60
|
-
type:
|
|
61
|
-
label:
|
|
262
|
+
- key: pill.inactive.border.color.opacity
|
|
263
|
+
type: number
|
|
264
|
+
label: Pill Inactive Border Opacity
|
|
265
|
+
value: "100"
|
|
266
|
+
section: visual
|
|
267
|
+
- key: pill.inactive.text.color
|
|
268
|
+
type: color
|
|
269
|
+
label: Pill Inactive Text
|
|
62
270
|
value: ""
|
|
63
271
|
section: visual
|
|
64
|
-
- key:
|
|
272
|
+
- key: pill.inactive.text.color.opacity
|
|
273
|
+
type: number
|
|
274
|
+
label: Pill Inactive Text Opacity
|
|
275
|
+
value: "100"
|
|
276
|
+
section: visual
|
|
277
|
+
|
|
278
|
+
# Icon button — square button containing only an icon. Renders three
|
|
279
|
+
# specimens side-by-side at icon.size.sm / .md / .lg from the Icons section.
|
|
280
|
+
- key: iconbutton.enabled
|
|
281
|
+
type: select
|
|
282
|
+
label: Icon Button Enabled
|
|
283
|
+
value: "yes"
|
|
284
|
+
options: [yes, no]
|
|
285
|
+
section: visual
|
|
286
|
+
- key: iconbutton.radius
|
|
287
|
+
type: number
|
|
288
|
+
label: Icon Button Radius (px)
|
|
289
|
+
value: "8"
|
|
290
|
+
section: visual
|
|
291
|
+
- key: iconbutton.padding
|
|
292
|
+
type: number
|
|
293
|
+
label: Icon Button Padding (px)
|
|
294
|
+
value: "8"
|
|
295
|
+
section: visual
|
|
296
|
+
- key: iconbutton.icon.name
|
|
65
297
|
type: text
|
|
66
|
-
label:
|
|
298
|
+
label: Icon Button Icon Name
|
|
299
|
+
value: Settings
|
|
300
|
+
section: visual
|
|
301
|
+
- key: iconbutton.border.width
|
|
302
|
+
type: number
|
|
303
|
+
label: Icon Button Border (px)
|
|
304
|
+
value: "0"
|
|
305
|
+
section: visual
|
|
306
|
+
- key: iconbutton.fill
|
|
307
|
+
type: color
|
|
308
|
+
label: Icon Button Fill
|
|
67
309
|
value: ""
|
|
68
310
|
section: visual
|
|
311
|
+
- key: iconbutton.fill.opacity
|
|
312
|
+
type: number
|
|
313
|
+
label: Icon Button Fill Opacity
|
|
314
|
+
value: "100"
|
|
315
|
+
section: visual
|
|
316
|
+
- key: iconbutton.border.color
|
|
317
|
+
type: color
|
|
318
|
+
label: Icon Button Border Color
|
|
319
|
+
value: ""
|
|
320
|
+
section: visual
|
|
321
|
+
- key: iconbutton.border.color.opacity
|
|
322
|
+
type: number
|
|
323
|
+
label: Icon Button Border Opacity
|
|
324
|
+
value: "100"
|
|
325
|
+
section: visual
|
|
326
|
+
- key: iconbutton.icon.color
|
|
327
|
+
type: color
|
|
328
|
+
label: Icon Button Icon Color
|
|
329
|
+
value: ""
|
|
330
|
+
section: visual
|
|
331
|
+
- key: iconbutton.icon.color.opacity
|
|
332
|
+
type: number
|
|
333
|
+
label: Icon Button Icon Color Opacity
|
|
334
|
+
value: "100"
|
|
335
|
+
section: visual
|
|
69
336
|
---
|
|
70
337
|
|
|
71
338
|
# Buttons
|
|
72
339
|
|
|
73
|
-
|
|
340
|
+
Three button styles (Primary, Secondary, Text), Pills, and Icon Buttons. Primary is always on. Secondary, Text, Pills, and Icon Buttons can be toggled per brand. Specimens auto-render against brand colors from the Colors section. Icon-button sizes come from `icon.size.sm/md/lg` in the Icons section.
|
|
@@ -1,38 +1,45 @@
|
|
|
1
1
|
---
|
|
2
|
-
description:
|
|
2
|
+
description: Icon system — library, stroke, sizing, and color rules
|
|
3
3
|
variables:
|
|
4
4
|
- key: icon.library
|
|
5
|
-
type:
|
|
5
|
+
type: select
|
|
6
6
|
label: Library
|
|
7
|
-
value:
|
|
7
|
+
value: lucide
|
|
8
|
+
options: [lucide, phosphor, tabler, heroicons, remixicon]
|
|
9
|
+
section: visual
|
|
10
|
+
- key: icon.style
|
|
11
|
+
type: select
|
|
12
|
+
label: Style
|
|
13
|
+
value: outline
|
|
14
|
+
options: [outline, filled]
|
|
8
15
|
section: visual
|
|
9
16
|
- key: icon.stroke
|
|
10
|
-
type:
|
|
11
|
-
label: Stroke
|
|
12
|
-
value: ""
|
|
17
|
+
type: number
|
|
18
|
+
label: Stroke Weight
|
|
19
|
+
value: "2"
|
|
13
20
|
section: visual
|
|
14
21
|
- key: icon.size.sm
|
|
15
|
-
type:
|
|
16
|
-
label: Size Small
|
|
17
|
-
value: ""
|
|
22
|
+
type: number
|
|
23
|
+
label: Size Small (px)
|
|
24
|
+
value: "16"
|
|
18
25
|
section: visual
|
|
19
26
|
- key: icon.size.md
|
|
20
|
-
type:
|
|
21
|
-
label: Size Medium
|
|
22
|
-
value: ""
|
|
27
|
+
type: number
|
|
28
|
+
label: Size Medium (px)
|
|
29
|
+
value: "20"
|
|
23
30
|
section: visual
|
|
24
31
|
- key: icon.size.lg
|
|
25
|
-
type:
|
|
26
|
-
label: Size Large
|
|
27
|
-
value: ""
|
|
32
|
+
type: number
|
|
33
|
+
label: Size Large (px)
|
|
34
|
+
value: "24"
|
|
28
35
|
section: visual
|
|
29
|
-
- key: icon.
|
|
30
|
-
type:
|
|
31
|
-
label:
|
|
36
|
+
- key: icon.color
|
|
37
|
+
type: color
|
|
38
|
+
label: Icon Color
|
|
32
39
|
value: ""
|
|
33
40
|
section: visual
|
|
34
41
|
---
|
|
35
42
|
|
|
36
43
|
# Icons
|
|
37
44
|
|
|
38
|
-
|
|
45
|
+
Icon library and rendering rules. Empty color inherits the surrounding text color.
|
|
@@ -1,33 +1,53 @@
|
|
|
1
1
|
---
|
|
2
|
-
description:
|
|
2
|
+
description: Easing curves and duration scale — the raw timing vocabulary every animation references
|
|
3
3
|
variables:
|
|
4
|
-
- key: motion.easing
|
|
4
|
+
- key: motion.easing.default
|
|
5
5
|
type: text
|
|
6
|
-
label: Default
|
|
6
|
+
label: Default
|
|
7
7
|
value: ""
|
|
8
|
-
section:
|
|
8
|
+
section: motion
|
|
9
|
+
- key: motion.easing.enter
|
|
10
|
+
type: text
|
|
11
|
+
label: Enter
|
|
12
|
+
value: ""
|
|
13
|
+
section: motion
|
|
14
|
+
- key: motion.easing.exit
|
|
15
|
+
type: text
|
|
16
|
+
label: Exit
|
|
17
|
+
value: ""
|
|
18
|
+
section: motion
|
|
19
|
+
- key: motion.easing.expressive
|
|
20
|
+
type: text
|
|
21
|
+
label: Expressive
|
|
22
|
+
value: ""
|
|
23
|
+
section: motion
|
|
24
|
+
- key: motion.duration.instant
|
|
25
|
+
type: number
|
|
26
|
+
label: Instant
|
|
27
|
+
value: ""
|
|
28
|
+
section: motion
|
|
9
29
|
- key: motion.duration.fast
|
|
10
30
|
type: number
|
|
11
|
-
label:
|
|
31
|
+
label: Fast
|
|
12
32
|
value: ""
|
|
13
|
-
section:
|
|
33
|
+
section: motion
|
|
14
34
|
- key: motion.duration.normal
|
|
15
35
|
type: number
|
|
16
|
-
label:
|
|
36
|
+
label: Normal
|
|
17
37
|
value: ""
|
|
18
|
-
section:
|
|
38
|
+
section: motion
|
|
19
39
|
- key: motion.duration.slow
|
|
20
40
|
type: number
|
|
21
|
-
label:
|
|
41
|
+
label: Slow
|
|
22
42
|
value: ""
|
|
23
|
-
section:
|
|
24
|
-
- key: motion.
|
|
25
|
-
type:
|
|
26
|
-
label:
|
|
43
|
+
section: motion
|
|
44
|
+
- key: motion.duration.glacial
|
|
45
|
+
type: number
|
|
46
|
+
label: Glacial
|
|
27
47
|
value: ""
|
|
28
|
-
section:
|
|
48
|
+
section: motion
|
|
29
49
|
---
|
|
30
50
|
|
|
31
51
|
# Motion
|
|
32
52
|
|
|
33
|
-
|
|
53
|
+
Named easing curves and a duration scale. Curves define *how* something accelerates; durations define *how long*. Together they are the timing vocabulary that every animation recipe in animations.md references.
|
|
@@ -1,38 +1,58 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: Spacing scale
|
|
2
|
+
description: Spacing scale — responsive whitespace tokens for mobile and desktop
|
|
3
3
|
variables:
|
|
4
|
-
- key: spacing.base
|
|
5
|
-
type:
|
|
6
|
-
label: Base Unit
|
|
7
|
-
value: ""
|
|
8
|
-
section:
|
|
9
|
-
- key: spacing.
|
|
10
|
-
type:
|
|
11
|
-
label:
|
|
12
|
-
value: ""
|
|
13
|
-
section:
|
|
14
|
-
- key: spacing.section.
|
|
15
|
-
type:
|
|
16
|
-
label: Section
|
|
17
|
-
value: ""
|
|
18
|
-
section:
|
|
19
|
-
- key: spacing.
|
|
20
|
-
type:
|
|
21
|
-
label:
|
|
22
|
-
value: ""
|
|
23
|
-
section:
|
|
24
|
-
- key: spacing.
|
|
25
|
-
type:
|
|
26
|
-
label:
|
|
27
|
-
value: ""
|
|
28
|
-
section:
|
|
29
|
-
- key: spacing.
|
|
30
|
-
type:
|
|
31
|
-
label:
|
|
32
|
-
value: ""
|
|
33
|
-
section:
|
|
4
|
+
- key: spacing.base-unit
|
|
5
|
+
type: number
|
|
6
|
+
label: Base Unit
|
|
7
|
+
value: ""
|
|
8
|
+
section: spacing
|
|
9
|
+
- key: spacing.max-width
|
|
10
|
+
type: number
|
|
11
|
+
label: Max Content Width
|
|
12
|
+
value: ""
|
|
13
|
+
section: spacing
|
|
14
|
+
- key: spacing.section-gap.mobile
|
|
15
|
+
type: number
|
|
16
|
+
label: Section Gap — Mobile
|
|
17
|
+
value: ""
|
|
18
|
+
section: spacing
|
|
19
|
+
- key: spacing.section-gap.desktop
|
|
20
|
+
type: number
|
|
21
|
+
label: Section Gap — Desktop
|
|
22
|
+
value: ""
|
|
23
|
+
section: spacing
|
|
24
|
+
- key: spacing.container-padding.mobile
|
|
25
|
+
type: number
|
|
26
|
+
label: Container Padding — Mobile
|
|
27
|
+
value: ""
|
|
28
|
+
section: spacing
|
|
29
|
+
- key: spacing.container-padding.desktop
|
|
30
|
+
type: number
|
|
31
|
+
label: Container Padding — Desktop
|
|
32
|
+
value: ""
|
|
33
|
+
section: spacing
|
|
34
|
+
- key: spacing.card-padding.mobile
|
|
35
|
+
type: number
|
|
36
|
+
label: Card Padding — Mobile
|
|
37
|
+
value: ""
|
|
38
|
+
section: spacing
|
|
39
|
+
- key: spacing.card-padding.desktop
|
|
40
|
+
type: number
|
|
41
|
+
label: Card Padding — Desktop
|
|
42
|
+
value: ""
|
|
43
|
+
section: spacing
|
|
44
|
+
- key: spacing.element-gap.mobile
|
|
45
|
+
type: number
|
|
46
|
+
label: Element Gap — Mobile
|
|
47
|
+
value: ""
|
|
48
|
+
section: spacing
|
|
49
|
+
- key: spacing.element-gap.desktop
|
|
50
|
+
type: number
|
|
51
|
+
label: Element Gap — Desktop
|
|
52
|
+
value: ""
|
|
53
|
+
section: spacing
|
|
34
54
|
---
|
|
35
55
|
|
|
36
56
|
# Spacing
|
|
37
57
|
|
|
38
|
-
|
|
58
|
+
Responsive whitespace tokens. Each gap has a mobile and desktop value — the builder picks the right one based on viewport.
|