@putdotio/design 1.4.0 → 1.5.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/DESIGN.md +11 -3
- package/dist/css/tokens.css +86 -3
- package/dist/figma/putio.tokens.json +182 -6
- package/dist/tokens.d.ts +3 -1
- package/dist/tokens.dtcg.json +1113 -144
- package/dist/tokens.flat.json +757 -83
- package/dist/tokens.js +757 -83
- package/package.json +4 -3
- package/system/README.md +34 -7
- package/tokens/components.tokens.json +851 -5
- package/tokens/context.tokens.json +136 -120
- package/tokens/foundation.css +1 -1
- package/tokens/primitives.tokens.json +14 -12
|
@@ -2,52 +2,12 @@
|
|
|
2
2
|
"$description": "Shared TV context tokens. Consuming TV repos generate their own platform artifacts from these values.",
|
|
3
3
|
"context": {
|
|
4
4
|
"tv": {
|
|
5
|
-
"surface": {
|
|
6
|
-
"0": {
|
|
7
|
-
"$type": "color",
|
|
8
|
-
"$value": "hsl(0, 0%, 0%)",
|
|
9
|
-
"$extensions": {
|
|
10
|
-
"putio": {
|
|
11
|
-
"cssName": "surf-0",
|
|
12
|
-
"mode": "tv"
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"1": {
|
|
17
|
-
"$type": "color",
|
|
18
|
-
"$value": "hsl(0, 0%, 3.9%)",
|
|
19
|
-
"$extensions": {
|
|
20
|
-
"putio": {
|
|
21
|
-
"cssName": "surf-1",
|
|
22
|
-
"mode": "tv"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"2": {
|
|
27
|
-
"$type": "color",
|
|
28
|
-
"$value": "hsl(0, 0%, 8.6%)",
|
|
29
|
-
"$extensions": {
|
|
30
|
-
"putio": {
|
|
31
|
-
"cssName": "surf-2",
|
|
32
|
-
"mode": "tv"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
"3": {
|
|
37
|
-
"$type": "color",
|
|
38
|
-
"$value": "hsl(0, 0%, 12.2%)",
|
|
39
|
-
"$extensions": {
|
|
40
|
-
"putio": {
|
|
41
|
-
"cssName": "surf-3",
|
|
42
|
-
"mode": "tv"
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
5
|
"text": {
|
|
6
|
+
"$description": "TV uses two semantic text roles. The tertiary name remains as a deprecated alias of secondary so existing consumers keep working; TV text is solid.",
|
|
48
7
|
"primary": {
|
|
49
8
|
"$type": "color",
|
|
50
|
-
"$value": "
|
|
9
|
+
"$value": "{color.neutral.dark.text}",
|
|
10
|
+
"$description": "Row titles, modal option labels, and button labels.",
|
|
51
11
|
"$extensions": {
|
|
52
12
|
"putio": {
|
|
53
13
|
"cssName": "text-1",
|
|
@@ -57,7 +17,8 @@
|
|
|
57
17
|
},
|
|
58
18
|
"secondary": {
|
|
59
19
|
"$type": "color",
|
|
60
|
-
"$value": "
|
|
20
|
+
"$value": "{color.neutral.dark.textSecondary}",
|
|
21
|
+
"$description": "Row sublines, modal titles, section headers, and accessories.",
|
|
61
22
|
"$extensions": {
|
|
62
23
|
"putio": {
|
|
63
24
|
"cssName": "text-2",
|
|
@@ -67,85 +28,13 @@
|
|
|
67
28
|
},
|
|
68
29
|
"tertiary": {
|
|
69
30
|
"$type": "color",
|
|
70
|
-
"$value": "
|
|
31
|
+
"$value": "{context.tv.text.secondary}",
|
|
32
|
+
"$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
|
|
71
33
|
"$extensions": {
|
|
72
34
|
"putio": {
|
|
73
35
|
"cssName": "text-3",
|
|
74
|
-
"mode": "tv"
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
"glass": {
|
|
80
|
-
"1": {
|
|
81
|
-
"$type": "color",
|
|
82
|
-
"$value": "hsla(0, 0%, 100%, 0.06)",
|
|
83
|
-
"$extensions": {
|
|
84
|
-
"putio": {
|
|
85
|
-
"cssName": "glass-1-bg",
|
|
86
|
-
"mode": "tv"
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
"2": {
|
|
91
|
-
"$type": "color",
|
|
92
|
-
"$value": "hsla(0, 0%, 100%, 0.10)",
|
|
93
|
-
"$extensions": {
|
|
94
|
-
"putio": {
|
|
95
|
-
"cssName": "glass-2-bg",
|
|
96
|
-
"mode": "tv"
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
"3": {
|
|
101
|
-
"$type": "color",
|
|
102
|
-
"$value": "hsla(0, 0%, 100%, 0.14)",
|
|
103
|
-
"$extensions": {
|
|
104
|
-
"putio": {
|
|
105
|
-
"cssName": "glass-3-bg",
|
|
106
|
-
"mode": "tv"
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
"border": {
|
|
111
|
-
"$type": "color",
|
|
112
|
-
"$value": "hsla(0, 0%, 100%, 0.12)",
|
|
113
|
-
"$extensions": {
|
|
114
|
-
"putio": {
|
|
115
|
-
"cssName": "glass-border",
|
|
116
|
-
"mode": "tv"
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
"borderStrong": {
|
|
121
|
-
"$type": "color",
|
|
122
|
-
"$value": "hsla(0, 0%, 100%, 0.22)",
|
|
123
|
-
"$extensions": {
|
|
124
|
-
"putio": {
|
|
125
|
-
"cssName": "glass-border-strong",
|
|
126
|
-
"mode": "tv"
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
"focus": {
|
|
132
|
-
"ring": {
|
|
133
|
-
"$type": "color",
|
|
134
|
-
"$value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
|
|
135
|
-
"$extensions": {
|
|
136
|
-
"putio": {
|
|
137
|
-
"cssName": "focus-ring",
|
|
138
|
-
"mode": "tv"
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
"liftShadow": {
|
|
143
|
-
"$type": "string",
|
|
144
|
-
"$value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
|
|
145
|
-
"$extensions": {
|
|
146
|
-
"putio": {
|
|
147
|
-
"cssName": "focus-shadow",
|
|
148
|
-
"mode": "tv"
|
|
36
|
+
"mode": "tv",
|
|
37
|
+
"deprecated": true
|
|
149
38
|
}
|
|
150
39
|
}
|
|
151
40
|
}
|
|
@@ -239,5 +128,132 @@
|
|
|
239
128
|
}
|
|
240
129
|
}
|
|
241
130
|
}
|
|
131
|
+
},
|
|
132
|
+
"tv": {
|
|
133
|
+
"$description": "The portable 10-foot scale. These mode \"tv\" tokens are graph data for platform adapters and are not emitted into web CSS; preview support CSS declares matching --tv-* properties under .tv. TV has no mono face, and its z-order is distinct from the web stack.",
|
|
134
|
+
"text": {
|
|
135
|
+
"heading": {
|
|
136
|
+
"$type": "dimension",
|
|
137
|
+
"$value": "64px",
|
|
138
|
+
"$description": "text.heading · GTAmerica-Md.",
|
|
139
|
+
"$extensions": { "putio": { "cssName": "tv-text-heading", "mode": "tv" } }
|
|
140
|
+
},
|
|
141
|
+
"label": {
|
|
142
|
+
"$type": "dimension",
|
|
143
|
+
"$value": "48px",
|
|
144
|
+
"$description": "text.label · GTAmerica-Md. Screen titles, and the file-row icon size.",
|
|
145
|
+
"$extensions": { "putio": { "cssName": "tv-text-label", "mode": "tv" } }
|
|
146
|
+
},
|
|
147
|
+
"body": {
|
|
148
|
+
"$type": "dimension",
|
|
149
|
+
"$value": "36px",
|
|
150
|
+
"$description": "text.body · GTAmerica-Rg. The file-row title.",
|
|
151
|
+
"$extensions": { "putio": { "cssName": "tv-text-body", "mode": "tv" } }
|
|
152
|
+
},
|
|
153
|
+
"caption": {
|
|
154
|
+
"$type": "dimension",
|
|
155
|
+
"$value": "32px",
|
|
156
|
+
"$description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face — the size subline renders in GT America with tabular figures, so the Berkeley Mono numeric rule is web and mobile only.",
|
|
157
|
+
"$extensions": { "putio": { "cssName": "tv-text-caption", "mode": "tv" } }
|
|
158
|
+
},
|
|
159
|
+
"smol": {
|
|
160
|
+
"$type": "dimension",
|
|
161
|
+
"$value": "24px",
|
|
162
|
+
"$description": "text.smol · GTAmerica-Rg. Button labels, rendered uppercase.",
|
|
163
|
+
"$extensions": { "putio": { "cssName": "tv-text-smol", "mode": "tv" } }
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
"fontWeight": {
|
|
167
|
+
"regular": {
|
|
168
|
+
"$type": "fontWeight",
|
|
169
|
+
"$value": "400",
|
|
170
|
+
"$description": "GTAmerica-Rg.",
|
|
171
|
+
"$extensions": { "putio": { "cssName": "tv-fw-regular", "mode": "tv" } }
|
|
172
|
+
},
|
|
173
|
+
"medium": {
|
|
174
|
+
"$type": "fontWeight",
|
|
175
|
+
"$value": "500",
|
|
176
|
+
"$description": "GTAmerica-Md.",
|
|
177
|
+
"$extensions": { "putio": { "cssName": "tv-fw-medium", "mode": "tv" } }
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
"space": {
|
|
181
|
+
"xxs": {
|
|
182
|
+
"$type": "dimension",
|
|
183
|
+
"$value": "4px",
|
|
184
|
+
"$extensions": { "putio": { "cssName": "tv-space-xxs", "mode": "tv" } }
|
|
185
|
+
},
|
|
186
|
+
"xs": {
|
|
187
|
+
"$type": "dimension",
|
|
188
|
+
"$value": "8px",
|
|
189
|
+
"$extensions": { "putio": { "cssName": "tv-space-xs", "mode": "tv" } }
|
|
190
|
+
},
|
|
191
|
+
"sm": {
|
|
192
|
+
"$type": "dimension",
|
|
193
|
+
"$value": "16px",
|
|
194
|
+
"$description": "Button padding at size=\"sm\".",
|
|
195
|
+
"$extensions": { "putio": { "cssName": "tv-space-sm", "mode": "tv" } }
|
|
196
|
+
},
|
|
197
|
+
"md": {
|
|
198
|
+
"$type": "dimension",
|
|
199
|
+
"$value": "32px",
|
|
200
|
+
"$description": "The workhorse step: uniform list-row padding, row gap, and header padding-bottom.",
|
|
201
|
+
"$extensions": { "putio": { "cssName": "tv-space-md", "mode": "tv" } }
|
|
202
|
+
},
|
|
203
|
+
"lg": {
|
|
204
|
+
"$type": "dimension",
|
|
205
|
+
"$value": "64px",
|
|
206
|
+
"$extensions": { "putio": { "cssName": "tv-space-lg", "mode": "tv" } }
|
|
207
|
+
},
|
|
208
|
+
"xl": {
|
|
209
|
+
"$type": "dimension",
|
|
210
|
+
"$value": "128px",
|
|
211
|
+
"$extensions": { "putio": { "cssName": "tv-space-xl", "mode": "tv" } }
|
|
212
|
+
},
|
|
213
|
+
"xxl": {
|
|
214
|
+
"$type": "dimension",
|
|
215
|
+
"$value": "256px",
|
|
216
|
+
"$extensions": { "putio": { "cssName": "tv-space-xxl", "mode": "tv" } }
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
"overscan": {
|
|
220
|
+
"x": {
|
|
221
|
+
"$type": "number",
|
|
222
|
+
"$value": 0.04,
|
|
223
|
+
"$description": "Horizontal safe-area ratio. Platform adapters multiply this value by viewport width.",
|
|
224
|
+
"$extensions": { "putio": { "cssName": "tv-overscan-x", "mode": "tv", "basis": "viewport-width" } }
|
|
225
|
+
},
|
|
226
|
+
"y": {
|
|
227
|
+
"$type": "number",
|
|
228
|
+
"$value": 0.02,
|
|
229
|
+
"$description": "Vertical safe-area ratio. Platform adapters multiply this value by viewport height.",
|
|
230
|
+
"$extensions": { "putio": { "cssName": "tv-overscan-y", "mode": "tv", "basis": "viewport-height" } }
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
"radius": {
|
|
234
|
+
"$type": "dimension",
|
|
235
|
+
"$value": "{radius.tv}",
|
|
236
|
+
"$description": "radii.default — one radius for every 10-foot surface.",
|
|
237
|
+
"$extensions": { "putio": { "cssName": "tv-radius", "mode": "tv" } }
|
|
238
|
+
},
|
|
239
|
+
"z": {
|
|
240
|
+
"$description": "zIndices. NOT the web --z-* order: on TV, overlay sits ABOVE toast. Emit the two scales separately and never fold TV into the web stack order.",
|
|
241
|
+
"modal": {
|
|
242
|
+
"$type": "number",
|
|
243
|
+
"$value": 100,
|
|
244
|
+
"$extensions": { "putio": { "cssName": "tv-z-modal", "mode": "tv", "category": "other" } }
|
|
245
|
+
},
|
|
246
|
+
"toast": {
|
|
247
|
+
"$type": "number",
|
|
248
|
+
"$value": 200,
|
|
249
|
+
"$extensions": { "putio": { "cssName": "tv-z-toast", "mode": "tv", "category": "other" } }
|
|
250
|
+
},
|
|
251
|
+
"overlay": {
|
|
252
|
+
"$type": "number",
|
|
253
|
+
"$value": 300,
|
|
254
|
+
"$description": "Above toast — the opposite of the web scale, where --z-notification (1400) sits above --z-modal (1300).",
|
|
255
|
+
"$extensions": { "putio": { "cssName": "tv-z-overlay", "mode": "tv", "category": "other" } }
|
|
256
|
+
}
|
|
257
|
+
}
|
|
242
258
|
}
|
|
243
259
|
}
|
package/tokens/foundation.css
CHANGED
|
@@ -120,20 +120,10 @@
|
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
|
-
"uiMono": {
|
|
124
|
-
"$type": "fontFamily",
|
|
125
|
-
"$value": "\"GT America Mono\", monospace",
|
|
126
|
-
"$extensions": {
|
|
127
|
-
"putio": {
|
|
128
|
-
"cssName": "font-ui-mono",
|
|
129
|
-
"mode": "global",
|
|
130
|
-
"figma": true
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
123
|
"mono": {
|
|
135
124
|
"$type": "fontFamily",
|
|
136
|
-
"$value": "\"Berkeley Mono\",
|
|
125
|
+
"$value": "\"Berkeley Mono\", monospace",
|
|
126
|
+
"$description": "The single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, magnet URIs, identifiers, and filenames. Web and mobile only — TV has no mono face.",
|
|
137
127
|
"$extensions": {
|
|
138
128
|
"putio": {
|
|
139
129
|
"cssName": "font-mono",
|
|
@@ -559,6 +549,18 @@
|
|
|
559
549
|
"figma": true
|
|
560
550
|
}
|
|
561
551
|
}
|
|
552
|
+
},
|
|
553
|
+
"tv": {
|
|
554
|
+
"$type": "dimension",
|
|
555
|
+
"$value": "12px",
|
|
556
|
+
"$description": "The corner radius for every 10-foot surface — list rows, buttons, sheets, cards, code tiles, and keys. TV uses one radius, not a scale; the only other radii on TV are intentional pills and circles.",
|
|
557
|
+
"$extensions": {
|
|
558
|
+
"putio": {
|
|
559
|
+
"cssName": "radius-tv",
|
|
560
|
+
"mode": "global",
|
|
561
|
+
"figma": true
|
|
562
|
+
}
|
|
563
|
+
}
|
|
562
564
|
}
|
|
563
565
|
},
|
|
564
566
|
"border": {
|