@putdotio/design 1.5.1 → 2.0.1

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 (13) hide show
  1. package/DESIGN.md +10 -2
  2. package/dist/css/tokens.css +26 -0
  3. package/dist/figma/putio.tokens.json +114 -0
  4. package/dist/tokens.d.ts +1 -1
  5. package/dist/tokens.dtcg.json +291 -0
  6. package/dist/tokens.flat.json +208 -0
  7. package/dist/tokens.js +208 -0
  8. package/package.json +4 -2
  9. package/system/assets/logo-retro-dark.svg +11 -1
  10. package/system/assets/logo-retro-light.svg +11 -1
  11. package/system/assets/logo.svg +7 -1
  12. package/system/components.css +440 -0
  13. package/tokens/components.tokens.json +291 -0
package/dist/tokens.flat.json CHANGED
@@ -66,6 +66,22 @@
66
66
  "value": "hsl(0, 0%, 93.0%)",
67
67
  "originalValue": "{color.neutral.dark.text}"
68
68
  },
69
+ "component.button.secondary.backgroundHover": {
70
+ "cssName": "--button-secondary-bg-hover",
71
+ "type": "color",
72
+ "mode": "light",
73
+ "value": "hsl(0, 0%, 93.0%)",
74
+ "originalValue": "{color.neutral.light.componentBgHover}",
75
+ "description": "Secondary quiet-fill hover in light mode."
76
+ },
77
+ "component.button.secondary.backgroundHoverDark": {
78
+ "cssName": "--button-secondary-bg-hover",
79
+ "type": "color",
80
+ "mode": "dark",
81
+ "value": "hsl(0, 0%, 15.8%)",
82
+ "originalValue": "{color.neutral.dark.componentBgHover}",
83
+ "description": "Secondary quiet-fill hover in dark mode."
84
+ },
69
85
  "component.button.success.background": {
70
86
  "cssName": "--button-success-bg",
71
87
  "type": "color",
@@ -242,6 +258,198 @@
242
258
  "originalValue": "{color.neutral.dark.text}",
243
259
  "description": "Default button label in dark mode."
244
260
  },
261
+ "component.button.ghost.background": {
262
+ "cssName": "--button-ghost-bg",
263
+ "type": "color",
264
+ "mode": "global",
265
+ "value": "hsla(0, 0%, 0%, 0)",
266
+ "originalValue": "hsla(0, 0%, 0%, 0)",
267
+ "description": "Ghost tier rests with no fill and no border."
268
+ },
269
+ "component.button.ghost.foreground": {
270
+ "cssName": "--button-ghost-fg",
271
+ "type": "color",
272
+ "mode": "light",
273
+ "value": "hsl(0, 0%, 43.5%)",
274
+ "originalValue": "{color.neutral.light.textSecondary}",
275
+ "description": "Ghost label at rest in light mode."
276
+ },
277
+ "component.button.ghost.foregroundDark": {
278
+ "cssName": "--button-ghost-fg",
279
+ "type": "color",
280
+ "mode": "dark",
281
+ "value": "hsl(0, 0%, 62.8%)",
282
+ "originalValue": "{color.neutral.dark.textSecondary}",
283
+ "description": "Ghost label at rest in dark mode."
284
+ },
285
+ "component.button.ghost.foregroundHover": {
286
+ "cssName": "--button-ghost-fg-hover",
287
+ "type": "color",
288
+ "mode": "light",
289
+ "value": "hsl(0, 0%, 9.0%)",
290
+ "originalValue": "{color.neutral.light.text}",
291
+ "description": "Ghost label on hover in light mode. The lift is mandatory."
292
+ },
293
+ "component.button.ghost.foregroundHoverDark": {
294
+ "cssName": "--button-ghost-fg-hover",
295
+ "type": "color",
296
+ "mode": "dark",
297
+ "value": "hsl(0, 0%, 93.0%)",
298
+ "originalValue": "{color.neutral.dark.text}",
299
+ "description": "Ghost label on hover in dark mode. The lift is mandatory."
300
+ },
301
+ "component.button.ghost.backgroundHover": {
302
+ "cssName": "--button-ghost-bg-hover",
303
+ "type": "color",
304
+ "mode": "light",
305
+ "value": "hsl(0, 0%, 93.0%)",
306
+ "originalValue": "{color.neutral.light.componentBgHover}",
307
+ "description": "Shared quiet-fill hover step in light mode."
308
+ },
309
+ "component.button.ghost.backgroundHoverDark": {
310
+ "cssName": "--button-ghost-bg-hover",
311
+ "type": "color",
312
+ "mode": "dark",
313
+ "value": "hsl(0, 0%, 15.8%)",
314
+ "originalValue": "{color.neutral.dark.componentBgHover}",
315
+ "description": "Shared quiet-fill hover step in dark mode."
316
+ },
317
+ "component.button.height": {
318
+ "cssName": "--button-height",
319
+ "type": "dimension",
320
+ "mode": "global",
321
+ "value": "36px",
322
+ "originalValue": "36px",
323
+ "description": "Default (lg) button box."
324
+ },
325
+ "component.button.heightMd": {
326
+ "cssName": "--button-height-md",
327
+ "type": "dimension",
328
+ "mode": "global",
329
+ "value": "32px",
330
+ "originalValue": "32px",
331
+ "description": "Medium button box. The site top-bar CTA size."
332
+ },
333
+ "component.button.heightSm": {
334
+ "cssName": "--button-height-sm",
335
+ "type": "dimension",
336
+ "mode": "global",
337
+ "value": "28px",
338
+ "originalValue": "28px",
339
+ "description": "Small button box."
340
+ },
341
+ "component.button.heightXs": {
342
+ "cssName": "--button-height-xs",
343
+ "type": "dimension",
344
+ "mode": "global",
345
+ "value": "24px",
346
+ "originalValue": "24px",
347
+ "description": "Extra-small button box."
348
+ },
349
+ "component.button.paddingX": {
350
+ "cssName": "--button-padding-x",
351
+ "type": "dimension",
352
+ "mode": "global",
353
+ "value": "12px",
354
+ "originalValue": "12px",
355
+ "description": "Horizontal padding for lg, md and sm."
356
+ },
357
+ "component.button.paddingXXs": {
358
+ "cssName": "--button-padding-x-xs",
359
+ "type": "dimension",
360
+ "mode": "global",
361
+ "value": "8px",
362
+ "originalValue": "8px",
363
+ "description": "Horizontal padding at xs."
364
+ },
365
+ "component.button.labelSize": {
366
+ "cssName": "--button-label-size",
367
+ "type": "dimension",
368
+ "mode": "global",
369
+ "value": "0.875rem",
370
+ "originalValue": "{typography.fontSize.sm}",
371
+ "description": "Uppercase label size."
372
+ },
373
+ "component.button.labelSizeXs": {
374
+ "cssName": "--button-label-size-xs",
375
+ "type": "dimension",
376
+ "mode": "global",
377
+ "value": "0.75rem",
378
+ "originalValue": "{typography.fontSize.xs}",
379
+ "description": "Uppercase label size at xs."
380
+ },
381
+ "component.button.tracking": {
382
+ "cssName": "--button-tracking",
383
+ "type": "dimension",
384
+ "mode": "global",
385
+ "value": "1px",
386
+ "originalValue": "1px",
387
+ "description": "Letter-spacing at lg."
388
+ },
389
+ "component.button.trackingMd": {
390
+ "cssName": "--button-tracking-md",
391
+ "type": "dimension",
392
+ "mode": "global",
393
+ "value": "0.8px",
394
+ "originalValue": "0.8px",
395
+ "description": "Letter-spacing at md."
396
+ },
397
+ "component.button.trackingSm": {
398
+ "cssName": "--button-tracking-sm",
399
+ "type": "dimension",
400
+ "mode": "global",
401
+ "value": "0.6px",
402
+ "originalValue": "0.6px",
403
+ "description": "Letter-spacing at sm."
404
+ },
405
+ "component.button.trackingXs": {
406
+ "cssName": "--button-tracking-xs",
407
+ "type": "dimension",
408
+ "mode": "global",
409
+ "value": "0.3px",
410
+ "originalValue": "0.3px",
411
+ "description": "Letter-spacing at xs."
412
+ },
413
+ "component.button.iconSize": {
414
+ "cssName": "--button-icon-size",
415
+ "type": "dimension",
416
+ "mode": "global",
417
+ "value": "14px",
418
+ "originalValue": "14px",
419
+ "description": "Glyph size inside a button."
420
+ },
421
+ "component.button.gap": {
422
+ "cssName": "--button-gap",
423
+ "type": "dimension",
424
+ "mode": "global",
425
+ "value": "8px",
426
+ "originalValue": "8px",
427
+ "description": "Gap between glyph and label."
428
+ },
429
+ "component.nav.height": {
430
+ "cssName": "--nav-height",
431
+ "type": "dimension",
432
+ "mode": "global",
433
+ "value": "56px",
434
+ "originalValue": "56px",
435
+ "description": "Sticky top bar height."
436
+ },
437
+ "component.nav.heightCompact": {
438
+ "cssName": "--nav-height-compact",
439
+ "type": "dimension",
440
+ "mode": "global",
441
+ "value": "52px",
442
+ "originalValue": "52px",
443
+ "description": "Sticky top bar height on narrow viewports."
444
+ },
445
+ "component.nav.ctaHeight": {
446
+ "cssName": "--nav-cta-height",
447
+ "type": "dimension",
448
+ "mode": "global",
449
+ "value": "32px",
450
+ "originalValue": "{component.button.heightMd}",
451
+ "description": "The top-bar CTA box. Always the md button."
452
+ },
245
453
  "component.input.background": {
246
454
  "cssName": "--input-bg",
247
455
  "type": "color",
package/dist/tokens.js CHANGED
@@ -68,6 +68,22 @@ export const tokens = {
68
68
  "value": "hsl(0, 0%, 93.0%)",
69
69
  "originalValue": "{color.neutral.dark.text}"
70
70
  },
71
+ "component.button.secondary.backgroundHover": {
72
+ "cssName": "--button-secondary-bg-hover",
73
+ "type": "color",
74
+ "mode": "light",
75
+ "value": "hsl(0, 0%, 93.0%)",
76
+ "originalValue": "{color.neutral.light.componentBgHover}",
77
+ "description": "Secondary quiet-fill hover in light mode."
78
+ },
79
+ "component.button.secondary.backgroundHoverDark": {
80
+ "cssName": "--button-secondary-bg-hover",
81
+ "type": "color",
82
+ "mode": "dark",
83
+ "value": "hsl(0, 0%, 15.8%)",
84
+ "originalValue": "{color.neutral.dark.componentBgHover}",
85
+ "description": "Secondary quiet-fill hover in dark mode."
86
+ },
71
87
  "component.button.success.background": {
72
88
  "cssName": "--button-success-bg",
73
89
  "type": "color",
@@ -244,6 +260,198 @@ export const tokens = {
244
260
  "originalValue": "{color.neutral.dark.text}",
245
261
  "description": "Default button label in dark mode."
246
262
  },
263
+ "component.button.ghost.background": {
264
+ "cssName": "--button-ghost-bg",
265
+ "type": "color",
266
+ "mode": "global",
267
+ "value": "hsla(0, 0%, 0%, 0)",
268
+ "originalValue": "hsla(0, 0%, 0%, 0)",
269
+ "description": "Ghost tier rests with no fill and no border."
270
+ },
271
+ "component.button.ghost.foreground": {
272
+ "cssName": "--button-ghost-fg",
273
+ "type": "color",
274
+ "mode": "light",
275
+ "value": "hsl(0, 0%, 43.5%)",
276
+ "originalValue": "{color.neutral.light.textSecondary}",
277
+ "description": "Ghost label at rest in light mode."
278
+ },
279
+ "component.button.ghost.foregroundDark": {
280
+ "cssName": "--button-ghost-fg",
281
+ "type": "color",
282
+ "mode": "dark",
283
+ "value": "hsl(0, 0%, 62.8%)",
284
+ "originalValue": "{color.neutral.dark.textSecondary}",
285
+ "description": "Ghost label at rest in dark mode."
286
+ },
287
+ "component.button.ghost.foregroundHover": {
288
+ "cssName": "--button-ghost-fg-hover",
289
+ "type": "color",
290
+ "mode": "light",
291
+ "value": "hsl(0, 0%, 9.0%)",
292
+ "originalValue": "{color.neutral.light.text}",
293
+ "description": "Ghost label on hover in light mode. The lift is mandatory."
294
+ },
295
+ "component.button.ghost.foregroundHoverDark": {
296
+ "cssName": "--button-ghost-fg-hover",
297
+ "type": "color",
298
+ "mode": "dark",
299
+ "value": "hsl(0, 0%, 93.0%)",
300
+ "originalValue": "{color.neutral.dark.text}",
301
+ "description": "Ghost label on hover in dark mode. The lift is mandatory."
302
+ },
303
+ "component.button.ghost.backgroundHover": {
304
+ "cssName": "--button-ghost-bg-hover",
305
+ "type": "color",
306
+ "mode": "light",
307
+ "value": "hsl(0, 0%, 93.0%)",
308
+ "originalValue": "{color.neutral.light.componentBgHover}",
309
+ "description": "Shared quiet-fill hover step in light mode."
310
+ },
311
+ "component.button.ghost.backgroundHoverDark": {
312
+ "cssName": "--button-ghost-bg-hover",
313
+ "type": "color",
314
+ "mode": "dark",
315
+ "value": "hsl(0, 0%, 15.8%)",
316
+ "originalValue": "{color.neutral.dark.componentBgHover}",
317
+ "description": "Shared quiet-fill hover step in dark mode."
318
+ },
319
+ "component.button.height": {
320
+ "cssName": "--button-height",
321
+ "type": "dimension",
322
+ "mode": "global",
323
+ "value": "36px",
324
+ "originalValue": "36px",
325
+ "description": "Default (lg) button box."
326
+ },
327
+ "component.button.heightMd": {
328
+ "cssName": "--button-height-md",
329
+ "type": "dimension",
330
+ "mode": "global",
331
+ "value": "32px",
332
+ "originalValue": "32px",
333
+ "description": "Medium button box. The site top-bar CTA size."
334
+ },
335
+ "component.button.heightSm": {
336
+ "cssName": "--button-height-sm",
337
+ "type": "dimension",
338
+ "mode": "global",
339
+ "value": "28px",
340
+ "originalValue": "28px",
341
+ "description": "Small button box."
342
+ },
343
+ "component.button.heightXs": {
344
+ "cssName": "--button-height-xs",
345
+ "type": "dimension",
346
+ "mode": "global",
347
+ "value": "24px",
348
+ "originalValue": "24px",
349
+ "description": "Extra-small button box."
350
+ },
351
+ "component.button.paddingX": {
352
+ "cssName": "--button-padding-x",
353
+ "type": "dimension",
354
+ "mode": "global",
355
+ "value": "12px",
356
+ "originalValue": "12px",
357
+ "description": "Horizontal padding for lg, md and sm."
358
+ },
359
+ "component.button.paddingXXs": {
360
+ "cssName": "--button-padding-x-xs",
361
+ "type": "dimension",
362
+ "mode": "global",
363
+ "value": "8px",
364
+ "originalValue": "8px",
365
+ "description": "Horizontal padding at xs."
366
+ },
367
+ "component.button.labelSize": {
368
+ "cssName": "--button-label-size",
369
+ "type": "dimension",
370
+ "mode": "global",
371
+ "value": "0.875rem",
372
+ "originalValue": "{typography.fontSize.sm}",
373
+ "description": "Uppercase label size."
374
+ },
375
+ "component.button.labelSizeXs": {
376
+ "cssName": "--button-label-size-xs",
377
+ "type": "dimension",
378
+ "mode": "global",
379
+ "value": "0.75rem",
380
+ "originalValue": "{typography.fontSize.xs}",
381
+ "description": "Uppercase label size at xs."
382
+ },
383
+ "component.button.tracking": {
384
+ "cssName": "--button-tracking",
385
+ "type": "dimension",
386
+ "mode": "global",
387
+ "value": "1px",
388
+ "originalValue": "1px",
389
+ "description": "Letter-spacing at lg."
390
+ },
391
+ "component.button.trackingMd": {
392
+ "cssName": "--button-tracking-md",
393
+ "type": "dimension",
394
+ "mode": "global",
395
+ "value": "0.8px",
396
+ "originalValue": "0.8px",
397
+ "description": "Letter-spacing at md."
398
+ },
399
+ "component.button.trackingSm": {
400
+ "cssName": "--button-tracking-sm",
401
+ "type": "dimension",
402
+ "mode": "global",
403
+ "value": "0.6px",
404
+ "originalValue": "0.6px",
405
+ "description": "Letter-spacing at sm."
406
+ },
407
+ "component.button.trackingXs": {
408
+ "cssName": "--button-tracking-xs",
409
+ "type": "dimension",
410
+ "mode": "global",
411
+ "value": "0.3px",
412
+ "originalValue": "0.3px",
413
+ "description": "Letter-spacing at xs."
414
+ },
415
+ "component.button.iconSize": {
416
+ "cssName": "--button-icon-size",
417
+ "type": "dimension",
418
+ "mode": "global",
419
+ "value": "14px",
420
+ "originalValue": "14px",
421
+ "description": "Glyph size inside a button."
422
+ },
423
+ "component.button.gap": {
424
+ "cssName": "--button-gap",
425
+ "type": "dimension",
426
+ "mode": "global",
427
+ "value": "8px",
428
+ "originalValue": "8px",
429
+ "description": "Gap between glyph and label."
430
+ },
431
+ "component.nav.height": {
432
+ "cssName": "--nav-height",
433
+ "type": "dimension",
434
+ "mode": "global",
435
+ "value": "56px",
436
+ "originalValue": "56px",
437
+ "description": "Sticky top bar height."
438
+ },
439
+ "component.nav.heightCompact": {
440
+ "cssName": "--nav-height-compact",
441
+ "type": "dimension",
442
+ "mode": "global",
443
+ "value": "52px",
444
+ "originalValue": "52px",
445
+ "description": "Sticky top bar height on narrow viewports."
446
+ },
447
+ "component.nav.ctaHeight": {
448
+ "cssName": "--nav-cta-height",
449
+ "type": "dimension",
450
+ "mode": "global",
451
+ "value": "32px",
452
+ "originalValue": "{component.button.heightMd}",
453
+ "description": "The top-bar CTA box. Always the md button."
454
+ },
247
455
  "component.input.background": {
248
456
  "cssName": "--input-bg",
249
457
  "type": "color",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@putdotio/design",
3
- "version": "1.5.1",
3
+ "version": "2.0.1",
4
4
  "description": "Public put.io design tokens, brand assets, and design-system guidance.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -48,11 +48,13 @@
48
48
  "dist",
49
49
  "tokens",
50
50
  "system/assets",
51
+ "system/components.css",
51
52
  "system/README.md"
52
53
  ],
53
54
  "exports": {
54
55
  "./assets/*": "./system/assets/*",
55
56
  "./css": "./dist/css/tokens.css",
57
+ "./components": "./system/components.css",
56
58
  "./tokens": "./dist/tokens.flat.json",
57
59
  "./tokens/meta": {
58
60
  "types": "./dist/tokens.d.ts",
@@ -65,7 +67,7 @@
65
67
  "scripts": {
66
68
  "dev": "node scripts/serve-system.ts",
67
69
  "tokens:build": "node scripts/build-tokens.ts",
68
- "tokens:check": "node scripts/check-generated-tokens.ts && node scripts/verify-design-system.ts",
70
+ "tokens:check": "node scripts/check-generated-tokens.ts && node scripts/check-component-css.ts && node scripts/check-doc-tokens.ts && node scripts/verify-design-system.ts",
69
71
  "design:mirror": "node scripts/export-design-mirror.ts",
70
72
  "test:mirror": "node --test tests/export-design-mirror.test.mjs",
71
73
  "typecheck:scripts": "tsc --noEmit --ignoreConfig --skipLibCheck --module ESNext --moduleResolution Bundler --target ES2022 --strict --types node scripts/*.ts playwright.config.ts tests/e2e/*.ts sst.config.ts infra/*.ts",
package/system/assets/logo-retro-dark.svg CHANGED
@@ -1,4 +1,14 @@
1
- <svg width="376" height="96" viewBox="0 0 376 96" fill="none" xmlns="http://www.w3.org/2000/svg">
1
+ <!--
2
+ Optically pre-centred: 16 units of empty space at the top of the viewBox.
3
+ The wordmark is top-heavy - the letterforms are dense up top while only the
4
+ `p` descender occupies the bottom - so its ink centroid sat 8.01% above the
5
+ geometric centre and every consumer that flex-centred the box got a mark
6
+ that read as riding high. The padding is 2x that offset, which lands the
7
+ centroid at 50%. Flex-centre as-is; never add a translateY nudge.
8
+ Ink height is 6/7 of box height: size boxes at 7/6 of the ink you want
9
+ (26px of ink -> a 30.33px box).
10
+ -->
11
+ <svg width="376" height="112" viewBox="0 -16 376 112" fill="none" xmlns="http://www.w3.org/2000/svg">
2
12
  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 30.0002H2L2 22.0001H4V18.0001H6V16.0001H8V14.0001H10V10.0001H14V8.00008H16V6.00007H20V4.00007H24V2.00006L46 2.00006V4.00007L50 4.00007V6.00007L54 6.00007V8.00008H58V10.0001H60V12.0001H62V14.0001H64V18.0001H66V22.0001H68V26.0001H70V46.0002H68V52.0002H66V56.0002H64V58.0002H62V60.0002H60L60 62.0003L58 62.0003V64.0003H56V66.0003H52V68.0003H48V70.0003H40V72.0003H20V74.0003H18V84.0003H16V86.0003H14V88.0003H4V86.0003H2V84.0003H0L0 30.0002ZM21.9981 30.0002V26.0002H23.9981V24.0002H27.9981V22.0002L31.9981 22.0002V20.0002H37.9981V22.0002H43.9981V24.0002H45.9981V26.0002H47.9981V30.0002H49.9981V42.0002H47.9981V44.0002H45.9981V46.0002H43.9981V48.0002H41.9981V50.0002H27.9981V48.0002H25.9981V46.0002H23.9981V44.0002H21.9981V40.0002H19.9981L19.9981 30.0002H21.9981Z" fill="white"></path>
3
13
  <path d="M102 2.00006L88.0001 2.00006V4.00006H86.0001V6.00006H84.0001V44.0001H86.0001V50.0001H88.0001V56.0001H90.0001V58.0001H92.0001V60.0001H94.0001V62.0001H96.0001V64.0001H98.0001V66.0001H100V68.0001H104V70.0001H110V72.0001H124V70.0001H132V68.0001H136V66.0001H138V64.0001H140V62.0001H142V60.0001L144 60.0001V58.0001H146V54.0001H148V50.0001H150V44.0001H152V6.00006L150 6.00006V4.00006H148V2.00006L134 2.00006V6.00006H132V42.0001H130V46.0001H128V48.0001H126V50.0001H122V52.0001H114V50.0001H110V48.0001H108V46.0001H106V40.0001H104V4.00006L102 4.00006V2.00006Z" fill="white"></path>
4
14
  <path d="M226 2.00006L166 2.00006V4.00006H164V6.00006H162V16.0001H164V18.0001H166V20.0001H182V22.0001H186V66.0001H188V70.0001H192V72.0001H200V70.0001H204V66.0001H206V22.0001H210V20.0001H226V18.0001H228V16.0001H230V6.00006L228 6.00006V4.00006H226V2.00006Z" fill="white"></path>
package/system/assets/logo-retro-light.svg CHANGED
@@ -1,4 +1,14 @@
1
- <svg width="376" height="96" viewBox="0 0 376 96" fill="none" xmlns="http://www.w3.org/2000/svg">
1
+ <!--
2
+ Optically pre-centred: 16 units of empty space at the top of the viewBox.
3
+ The wordmark is top-heavy - the letterforms are dense up top while only the
4
+ `p` descender occupies the bottom - so its ink centroid sat 8.01% above the
5
+ geometric centre and every consumer that flex-centred the box got a mark
6
+ that read as riding high. The padding is 2x that offset, which lands the
7
+ centroid at 50%. Flex-centre as-is; never add a translateY nudge.
8
+ Ink height is 6/7 of box height: size boxes at 7/6 of the ink you want
9
+ (26px of ink -> a 30.33px box).
10
+ -->
11
+ <svg width="376" height="112" viewBox="0 -16 376 112" fill="none" xmlns="http://www.w3.org/2000/svg">
2
12
  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 30.0002H2L2 22.0001H4V18.0001H6V16.0001H8V14.0001H10V10.0001H14V8.00008H16V6.00007H20V4.00007H24V2.00006L46 2.00006V4.00007L50 4.00007V6.00007L54 6.00007V8.00008H58V10.0001H60V12.0001H62V14.0001H64V18.0001H66V22.0001H68V26.0001H70V46.0002H68V52.0002H66V56.0002H64V58.0002H62V60.0002H60L60 62.0003L58 62.0003V64.0003H56V66.0003H52V68.0003H48V70.0003H40V72.0003H20V74.0003H18V84.0003H16V86.0003H14V88.0003H4V86.0003H2V84.0003H0L0 30.0002ZM21.9981 30.0002V26.0002H23.9981V24.0002H27.9981V22.0002L31.9981 22.0002V20.0002H37.9981V22.0002H43.9981V24.0002H45.9981V26.0002H47.9981V30.0002H49.9981V42.0002H47.9981V44.0002H45.9981V46.0002H43.9981V48.0002H41.9981V50.0002H27.9981V48.0002H25.9981V46.0002H23.9981V44.0002H21.9981V40.0002H19.9981L19.9981 30.0002H21.9981Z" fill="#323232"></path>
3
13
  <path d="M102 2.00006L88.0001 2.00006V4.00006H86.0001V6.00006H84.0001V44.0001H86.0001V50.0001H88.0001V56.0001H90.0001V58.0001H92.0001V60.0001H94.0001V62.0001H96.0001V64.0001H98.0001V66.0001H100V68.0001H104V70.0001H110V72.0001H124V70.0001H132V68.0001H136V66.0001H138V64.0001H140V62.0001H142V60.0001L144 60.0001V58.0001H146V54.0001H148V50.0001H150V44.0001H152V6.00006L150 6.00006V4.00006H148V2.00006L134 2.00006V6.00006H132V42.0001H130V46.0001H128V48.0001H126V50.0001H122V52.0001H114V50.0001H110V48.0001H108V46.0001H106V40.0001H104V4.00006L102 4.00006V2.00006Z" fill="#323232"></path>
4
14
  <path d="M226 2.00006L166 2.00006V4.00006H164V6.00006H162V16.0001H164V18.0001H166V20.0001H182V22.0001H186V66.0001H188V70.0001H192V72.0001H200V70.0001H204V66.0001H206V22.0001H210V20.0001H226V18.0001H228V16.0001H230V6.00006L228 6.00006V4.00006H226V2.00006Z" fill="#323232"></path>
package/system/assets/logo.svg CHANGED
@@ -1,3 +1,9 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.79 151.615">
1
+ <!--
2
+ Optically pre-centred: 24.44 units of empty space at the top of the viewBox.
3
+ See logo-retro-dark.svg for the reasoning - the ink centroid sat 7.90% above
4
+ the geometric centre. Flex-centre as-is; never add a translateY nudge.
5
+ Ink height is 6/7 of box height: size boxes at 7/6 of the ink you want.
6
+ -->
7
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -24.44 621.79 176.055">
2
8
  <path d="M242.258,1.084h-5.672c-3.923,0-7.576,1.538-10.28,4.34c-2.707,2.801-4.194,6.567-4.194,10.619v46.023&#xA;c0,14.542-10.234,26.378-22.809,26.378c-12.374,0-22.441-11.836-22.441-26.391v-46.01c0-8.39-6.37-14.959-14.498-14.959h-5.674&#xA;c-8.272,0-14.995,6.711-14.995,14.959v46.726c0,35.053,24.544,61.49,57.09,61.49c32.791,0,58.483-27.008,58.483-61.49V16.043&#xA;C257.268,7.795,250.531,1.084,242.258,1.084z M464.234,56.81h-5.636c-7.987,0-14.501,6.47-14.501,14.433v19.083V93.4v15.877&#xA;c0,8.094,6.287,14.435,14.299,14.435h5.649c7.985,0,14.487-6.47,14.487-14.435V90.194v-3.073V71.243&#xA;C478.533,63.148,472.259,56.81,464.234,56.81z M397.087,83.769c-11.214,0-19.971,8.857-19.971,20.157&#xA;c0,11.297,8.757,20.142,19.971,20.142c11.205,0,19.984-8.845,19.984-20.142C417.072,92.626,408.292,83.769,397.087,83.769z&#xA;M561.702,1.645c-33.478,0-59.723,26.854-59.723,61.123c0,34.185,26.022,60.942,59.215,60.942c33.407,0,60.597-27.415,60.597-61.122&#xA;C621.79,28.965,594.836,1.645,561.702,1.645z M587.558,62.769c0,15.887-11.698,28.82-26.055,28.82&#xA;c-14.276,0-25.454-12.659-25.454-28.82c0-15.723,12.359-29.001,27.023-29.001c13.391,0,23.553,11.359,24.496,26.746&#xA;C587.558,61.695,587.558,62.769,587.558,62.769z M389.172,21.919v-5.876c0-8.082-6.277-14.41-14.301-14.41h-1.607h-22.416h-39.447&#xA;h-0.568h-23.456c-8.035,0-14.298,6.329-14.298,14.41v5.876c0,8.106,6.263,14.435,14.298,14.435h17.313&#xA;c9.216,0,9.216,4.9,9.216,6.986v65.949c0,8.082,6.276,14.423,14.288,14.423h0.188h5.462h0.2c8.011,0,14.287-6.341,14.287-14.423&#xA;V43.339c0-2.086,0-6.986,9.216-6.986h15.717h1.607C382.895,36.354,389.172,30.025,389.172,21.919z M59.707,1.633&#xA;C26.245,1.633,0,28.488,0,62.769v76.082c0,7.163,5.567,12.764,12.655,12.764h5.649c7.09,0,12.846-5.708,12.846-12.764v-9.228&#xA;c0-3.265,3.357-5.912,7.517-5.912h22.458l-0.095-0.095c32.555-0.989,58.767-27.938,58.767-61.039&#xA;C119.797,28.965,92.841,1.633,59.707,1.633z M85.776,62.792c0,16.043-11.82,29.12-26.34,29.12c-14.401,0-25.697-12.802-25.697-29.12&#xA;c0-15.9,12.501-29.322,27.292-29.322c13.544,0,23.823,11.49,24.769,27.021C85.776,61.695,85.776,62.792,85.776,62.792z M461.575,0&#xA;c-11.214,0-19.971,8.844-19.971,20.132c0,11.311,8.757,20.157,19.971,20.157c11.193,0,19.97-8.846,19.97-20.145&#xA;C481.544,8.844,472.768,0,461.575,0z"></path>
3
9
  </svg>