@putdotio/design 0.1.0-alpha.0 → 1.1.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.
Files changed (24) hide show
  1. package/DESIGN.md +5 -3
  2. package/README.md +30 -5
  3. package/dist/css/tokens.css +73 -16
  4. package/dist/figma/putio.tokens.json +10 -10
  5. package/dist/tokens.d.ts +1 -1
  6. package/dist/tokens.dtcg.json +755 -11
  7. package/dist/tokens.flat.json +504 -26
  8. package/dist/tokens.js +504 -26
  9. package/dist/tokens.ts +504 -26
  10. package/package.json +26 -2
  11. package/system/README.md +5 -3
  12. package/system/assets/app-icon-beta.png +0 -0
  13. package/system/assets/app-icon-dev-blueprint.png +0 -0
  14. package/system/assets/app-icon-prod-dark.png +0 -0
  15. package/system/assets/app-icon-source.png +0 -0
  16. package/system/assets/favicon.svg +6 -0
  17. package/system/assets/logo-retro-dark.svg +22 -0
  18. package/system/assets/logo-retro-light.svg +22 -0
  19. package/system/assets/logo.svg +3 -0
  20. package/tokens/components.tokens.json +658 -2
  21. package/tokens/context.tokens.json +88 -0
  22. package/tokens/foundation.css +1 -1
  23. package/tokens/primitives.tokens.json +3 -3
  24. package/tokens/semantic.tokens.json +6 -6
package/tokens/context.tokens.json CHANGED
@@ -149,6 +149,94 @@
149
149
  }
150
150
  }
151
151
  }
152
+ },
153
+ "channelArt": {
154
+ "production": {
155
+ "posterBackground": {
156
+ "$type": "color",
157
+ "$value": "#333333",
158
+ "$extensions": {
159
+ "putio": {
160
+ "cssName": "tv-channel-art-production-poster-bg",
161
+ "mode": "tv"
162
+ }
163
+ }
164
+ },
165
+ "splashBackground": {
166
+ "$type": "color",
167
+ "$value": "{color.neutral.dark.bg}",
168
+ "$extensions": {
169
+ "putio": {
170
+ "cssName": "tv-channel-art-production-splash-bg",
171
+ "mode": "tv"
172
+ }
173
+ }
174
+ }
175
+ },
176
+ "development": {
177
+ "background": {
178
+ "$type": "color",
179
+ "$value": "#248FE5",
180
+ "$extensions": {
181
+ "putio": {
182
+ "cssName": "tv-channel-art-development-bg",
183
+ "mode": "tv"
184
+ }
185
+ }
186
+ },
187
+ "accent": {
188
+ "$type": "color",
189
+ "$value": "#9FD5FF",
190
+ "$extensions": {
191
+ "putio": {
192
+ "cssName": "tv-channel-art-development-accent",
193
+ "mode": "tv"
194
+ }
195
+ }
196
+ },
197
+ "grid": {
198
+ "$type": "color",
199
+ "$value": "rgba(255,255,255,0.18)",
200
+ "$extensions": {
201
+ "putio": {
202
+ "cssName": "tv-channel-art-development-grid",
203
+ "mode": "tv"
204
+ }
205
+ }
206
+ }
207
+ },
208
+ "lab": {
209
+ "background": {
210
+ "$type": "color",
211
+ "$value": "#0a0f0a",
212
+ "$extensions": {
213
+ "putio": {
214
+ "cssName": "tv-channel-art-lab-bg",
215
+ "mode": "tv"
216
+ }
217
+ }
218
+ },
219
+ "foreground": {
220
+ "$type": "color",
221
+ "$value": "#e8ffe4",
222
+ "$extensions": {
223
+ "putio": {
224
+ "cssName": "tv-channel-art-lab-fg",
225
+ "mode": "tv"
226
+ }
227
+ }
228
+ },
229
+ "accent": {
230
+ "$type": "color",
231
+ "$value": "#39FF14",
232
+ "$extensions": {
233
+ "putio": {
234
+ "cssName": "tv-channel-art-lab-accent",
235
+ "mode": "tv"
236
+ }
237
+ }
238
+ }
239
+ }
152
240
  }
153
241
  }
154
242
  }
package/tokens/foundation.css CHANGED
@@ -130,4 +130,4 @@ a:hover { text-decoration-color: currentColor; }
130
130
  .bg-1 { background: var(--bg); }
131
131
  .bg-2 { background: var(--bg-secondary); }
132
132
  .bg-component { background: var(--component-bg); }
133
- .bg-yellow { background: var(--yellow-solid); color: #000; }
133
+ .bg-yellow { background: var(--yellow-solid); color: var(--primary-foreground); }
package/tokens/primitives.tokens.json CHANGED
@@ -4,8 +4,8 @@
4
4
  "brand": {
5
5
  "yellow": {
6
6
  "$type": "color",
7
- "$value": "#FDCE45",
8
- "$description": "Sacred put.io brand yellow. Do not change or tint.",
7
+ "$value": "hsl(44.7, 97.9%, 63.1%)",
8
+ "$description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint.",
9
9
  "$extensions": {
10
10
  "putio": {
11
11
  "cssName": "yellow-solid",
@@ -85,7 +85,7 @@
85
85
  },
86
86
  "focus": {
87
87
  "$type": "string",
88
- "$value": "0 0 0 3px var(--shadow-focus-color)",
88
+ "$value": "0 0 0 3px {elevation.focusColor}",
89
89
  "$extensions": {
90
90
  "putio": {
91
91
  "cssName": "shadow-focus",
package/tokens/semantic.tokens.json CHANGED
@@ -1006,7 +1006,7 @@
1006
1006
  },
1007
1007
  "appBg": {
1008
1008
  "$type": "color",
1009
- "$value": "white",
1009
+ "$value": "hsl(0, 0%, 100%)",
1010
1010
  "$extensions": {
1011
1011
  "putio": {
1012
1012
  "cssName": "app-bg",
@@ -1016,7 +1016,7 @@
1016
1016
  },
1017
1017
  "navBg": {
1018
1018
  "$type": "color",
1019
- "$value": "white",
1019
+ "$value": "hsl(0, 0%, 100%)",
1020
1020
  "$extensions": {
1021
1021
  "putio": {
1022
1022
  "cssName": "nav-bg",
@@ -1106,7 +1106,7 @@
1106
1106
  },
1107
1107
  "segmentedControlBgActive": {
1108
1108
  "$type": "color",
1109
- "$value": "white",
1109
+ "$value": "hsl(0, 0%, 100%)",
1110
1110
  "$extensions": {
1111
1111
  "putio": {
1112
1112
  "cssName": "segmented-control-bg-active",
@@ -1208,7 +1208,7 @@
1208
1208
  "dark": {
1209
1209
  "htmlBg": {
1210
1210
  "$type": "color",
1211
- "$value": "black",
1211
+ "$value": "hsl(0, 0%, 0%)",
1212
1212
  "$extensions": {
1213
1213
  "putio": {
1214
1214
  "cssName": "html-bg",
@@ -1408,7 +1408,7 @@
1408
1408
  },
1409
1409
  "shadowColor": {
1410
1410
  "$type": "color",
1411
- "$value": "black",
1411
+ "$value": "hsl(0, 0%, 0%)",
1412
1412
  "$extensions": {
1413
1413
  "putio": {
1414
1414
  "cssName": "shadow-color",
@@ -1418,7 +1418,7 @@
1418
1418
  },
1419
1419
  "shadow": {
1420
1420
  "$type": "color",
1421
- "$value": "black",
1421
+ "$value": "hsl(0, 0%, 0%)",
1422
1422
  "$extensions": {
1423
1423
  "putio": {
1424
1424
  "cssName": "shadow",