@pantheon-systems/pds-design-tokens 0.7.0-dev.0 → 0.7.0-dev.2

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 (9) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +9 -20
  2. package/build/css/pds-design-tokens-light-mode.css +0 -11
  3. package/build/figma/pds-design-tokens-figma.json +297 -647
  4. package/build/json/pds-design-tokens-dark-mode.json +27 -323
  5. package/build/json/pds-design-tokens-light-mode.json +0 -306
  6. package/build/json/pds-design-tokens.json +21 -2
  7. package/build/scss/_pds-design-tokens-dark-mode.scss +9 -20
  8. package/build/scss/_pds-design-tokens-light-mode.scss +0 -11
  9. package/package.json +1 -1
package/build/json/pds-design-tokens-light-mode.json CHANGED
@@ -280,34 +280,6 @@
280
280
  "background",
281
281
  "active"
282
282
  ]
283
- },
284
- "focus": {
285
- "value": "#ffe668",
286
- "public": true,
287
- "isReferenceToInternal": true,
288
- "filePath": "tokens/color/alias/interactive.light.json",
289
- "isSource": true,
290
- "original": {
291
- "value": "{color.light-mode.brand.primary.300.value}",
292
- "public": true,
293
- "isReferenceToInternal": true
294
- },
295
- "name": "color-light-mode-button-primary-background-focus",
296
- "attributes": {
297
- "category": "color",
298
- "type": "light-mode",
299
- "item": "button",
300
- "subitem": "primary",
301
- "state": "background"
302
- },
303
- "path": [
304
- "color",
305
- "light-mode",
306
- "button",
307
- "primary",
308
- "background",
309
- "focus"
310
- ]
311
283
  }
312
284
  },
313
285
  "border": {
@@ -394,34 +366,6 @@
394
366
  "border",
395
367
  "active"
396
368
  ]
397
- },
398
- "focus": {
399
- "value": "#ffe668",
400
- "public": true,
401
- "isReferenceToInternal": true,
402
- "filePath": "tokens/color/alias/interactive.light.json",
403
- "isSource": true,
404
- "original": {
405
- "value": "{color.light-mode.brand.primary.300.value}",
406
- "public": true,
407
- "isReferenceToInternal": true
408
- },
409
- "name": "color-light-mode-button-primary-border-focus",
410
- "attributes": {
411
- "category": "color",
412
- "type": "light-mode",
413
- "item": "button",
414
- "subitem": "primary",
415
- "state": "border"
416
- },
417
- "path": [
418
- "color",
419
- "light-mode",
420
- "button",
421
- "primary",
422
- "border",
423
- "focus"
424
- ]
425
369
  }
426
370
  },
427
371
  "foreground": {
@@ -508,34 +452,6 @@
508
452
  "foreground",
509
453
  "active"
510
454
  ]
511
- },
512
- "focus": {
513
- "value": "#23232d",
514
- "public": true,
515
- "isReferenceToInternal": true,
516
- "filePath": "tokens/color/alias/interactive.light.json",
517
- "isSource": true,
518
- "original": {
519
- "value": "{color.light-mode.neutral.700.value}",
520
- "public": true,
521
- "isReferenceToInternal": true
522
- },
523
- "name": "color-light-mode-button-primary-foreground-focus",
524
- "attributes": {
525
- "category": "color",
526
- "type": "light-mode",
527
- "item": "button",
528
- "subitem": "primary",
529
- "state": "foreground"
530
- },
531
- "path": [
532
- "color",
533
- "light-mode",
534
- "button",
535
- "primary",
536
- "foreground",
537
- "focus"
538
- ]
539
455
  }
540
456
  }
541
457
  },
@@ -622,34 +538,6 @@
622
538
  "background",
623
539
  "active"
624
540
  ]
625
- },
626
- "focus": {
627
- "value": "#f0ecff",
628
- "public": true,
629
- "isReferenceToInternal": true,
630
- "filePath": "tokens/color/alias/interactive.light.json",
631
- "isSource": true,
632
- "original": {
633
- "value": "{color.light-mode.brand.secondary.100.value}",
634
- "public": true,
635
- "isReferenceToInternal": true
636
- },
637
- "name": "color-light-mode-button-secondary-background-focus",
638
- "attributes": {
639
- "category": "color",
640
- "type": "light-mode",
641
- "item": "button",
642
- "subitem": "secondary",
643
- "state": "background"
644
- },
645
- "path": [
646
- "color",
647
- "light-mode",
648
- "button",
649
- "secondary",
650
- "background",
651
- "focus"
652
- ]
653
541
  }
654
542
  },
655
543
  "border": {
@@ -736,34 +624,6 @@
736
624
  "border",
737
625
  "active"
738
626
  ]
739
- },
740
- "focus": {
741
- "value": "#785aff",
742
- "public": true,
743
- "isReferenceToInternal": true,
744
- "filePath": "tokens/color/alias/interactive.light.json",
745
- "isSource": true,
746
- "original": {
747
- "value": "{color.light-mode.brand.secondary.300.value}",
748
- "public": true,
749
- "isReferenceToInternal": true
750
- },
751
- "name": "color-light-mode-button-secondary-border-focus",
752
- "attributes": {
753
- "category": "color",
754
- "type": "light-mode",
755
- "item": "button",
756
- "subitem": "secondary",
757
- "state": "border"
758
- },
759
- "path": [
760
- "color",
761
- "light-mode",
762
- "button",
763
- "secondary",
764
- "border",
765
- "focus"
766
- ]
767
627
  }
768
628
  },
769
629
  "foreground": {
@@ -850,34 +710,6 @@
850
710
  "foreground",
851
711
  "active"
852
712
  ]
853
- },
854
- "focus": {
855
- "value": "#3017a1",
856
- "public": true,
857
- "isReferenceToInternal": true,
858
- "filePath": "tokens/color/alias/interactive.light.json",
859
- "isSource": true,
860
- "original": {
861
- "value": "{color.light-mode.brand.secondary.400.value}",
862
- "public": true,
863
- "isReferenceToInternal": true
864
- },
865
- "name": "color-light-mode-button-secondary-foreground-focus",
866
- "attributes": {
867
- "category": "color",
868
- "type": "light-mode",
869
- "item": "button",
870
- "subitem": "secondary",
871
- "state": "foreground"
872
- },
873
- "path": [
874
- "color",
875
- "light-mode",
876
- "button",
877
- "secondary",
878
- "foreground",
879
- "focus"
880
- ]
881
713
  }
882
714
  }
883
715
  },
@@ -964,32 +796,6 @@
964
796
  "background",
965
797
  "active"
966
798
  ]
967
- },
968
- "focus": {
969
- "value": "rgba(0, 0, 0, 0)",
970
- "public": true,
971
- "filePath": "tokens/color/alias/interactive.light.json",
972
- "isSource": true,
973
- "original": {
974
- "value": "transparent",
975
- "public": true
976
- },
977
- "name": "color-light-mode-button-subtle-background-focus",
978
- "attributes": {
979
- "category": "color",
980
- "type": "light-mode",
981
- "item": "button",
982
- "subitem": "subtle",
983
- "state": "background"
984
- },
985
- "path": [
986
- "color",
987
- "light-mode",
988
- "button",
989
- "subtle",
990
- "background",
991
- "focus"
992
- ]
993
799
  }
994
800
  },
995
801
  "border": {
@@ -1104,34 +910,6 @@
1104
910
  "foreground",
1105
911
  "active"
1106
912
  ]
1107
- },
1108
- "focus": {
1109
- "value": "#3017a1",
1110
- "public": true,
1111
- "isReferenceToInternal": true,
1112
- "filePath": "tokens/color/alias/interactive.light.json",
1113
- "isSource": true,
1114
- "original": {
1115
- "value": "{color.light-mode.brand.secondary.400.value}",
1116
- "public": true,
1117
- "isReferenceToInternal": true
1118
- },
1119
- "name": "color-light-mode-button-subtle-foreground-focus",
1120
- "attributes": {
1121
- "category": "color",
1122
- "type": "light-mode",
1123
- "item": "button",
1124
- "subitem": "subtle",
1125
- "state": "foreground"
1126
- },
1127
- "path": [
1128
- "color",
1129
- "light-mode",
1130
- "button",
1131
- "subtle",
1132
- "foreground",
1133
- "focus"
1134
- ]
1135
913
  }
1136
914
  }
1137
915
  },
@@ -1220,34 +998,6 @@
1220
998
  "background",
1221
999
  "active"
1222
1000
  ]
1223
- },
1224
- "focus": {
1225
- "value": "#ffebeb",
1226
- "public": true,
1227
- "isReferenceToInternal": true,
1228
- "filePath": "tokens/color/alias/interactive.light.json",
1229
- "isSource": true,
1230
- "original": {
1231
- "value": "{color.light-mode.semantic.error.100.value}",
1232
- "public": true,
1233
- "isReferenceToInternal": true
1234
- },
1235
- "name": "color-light-mode-button-critical-background-focus",
1236
- "attributes": {
1237
- "category": "color",
1238
- "type": "light-mode",
1239
- "item": "button",
1240
- "subitem": "critical",
1241
- "state": "background"
1242
- },
1243
- "path": [
1244
- "color",
1245
- "light-mode",
1246
- "button",
1247
- "critical",
1248
- "background",
1249
- "focus"
1250
- ]
1251
1001
  }
1252
1002
  },
1253
1003
  "border": {
@@ -1334,34 +1084,6 @@
1334
1084
  "border",
1335
1085
  "active"
1336
1086
  ]
1337
- },
1338
- "focus": {
1339
- "value": "#d61f1f",
1340
- "public": true,
1341
- "isReferenceToInternal": true,
1342
- "filePath": "tokens/color/alias/interactive.light.json",
1343
- "isSource": true,
1344
- "original": {
1345
- "value": "{color.light-mode.semantic.error.400.value}",
1346
- "public": true,
1347
- "isReferenceToInternal": true
1348
- },
1349
- "name": "color-light-mode-button-critical-border-focus",
1350
- "attributes": {
1351
- "category": "color",
1352
- "type": "light-mode",
1353
- "item": "button",
1354
- "subitem": "critical",
1355
- "state": "border"
1356
- },
1357
- "path": [
1358
- "color",
1359
- "light-mode",
1360
- "button",
1361
- "critical",
1362
- "border",
1363
- "focus"
1364
- ]
1365
1087
  }
1366
1088
  },
1367
1089
  "foreground": {
@@ -1448,34 +1170,6 @@
1448
1170
  "foreground",
1449
1171
  "active"
1450
1172
  ]
1451
- },
1452
- "focus": {
1453
- "value": "#f83333",
1454
- "public": true,
1455
- "isReferenceToInternal": true,
1456
- "filePath": "tokens/color/alias/interactive.light.json",
1457
- "isSource": true,
1458
- "original": {
1459
- "value": "{color.light-mode.semantic.error.300.value}",
1460
- "public": true,
1461
- "isReferenceToInternal": true
1462
- },
1463
- "name": "color-light-mode-button-critical-foreground-focus",
1464
- "attributes": {
1465
- "category": "color",
1466
- "type": "light-mode",
1467
- "item": "button",
1468
- "subitem": "critical",
1469
- "state": "foreground"
1470
- },
1471
- "path": [
1472
- "color",
1473
- "light-mode",
1474
- "button",
1475
- "critical",
1476
- "foreground",
1477
- "focus"
1478
- ]
1479
1173
  }
1480
1174
  }
1481
1175
  }
package/build/json/pds-design-tokens.json CHANGED
@@ -584,11 +584,11 @@
584
584
  ]
585
585
  },
586
586
  "css-import": {
587
- "value": "https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'",
587
+ "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap'",
588
588
  "filePath": "tokens/typography/base/font.json",
589
589
  "isSource": true,
590
590
  "original": {
591
- "value": "https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'"
591
+ "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap'"
592
592
  },
593
593
  "name": "typography-font-css-import",
594
594
  "attributes": {
@@ -623,6 +623,25 @@
623
623
  "regular"
624
624
  ]
625
625
  },
626
+ "medium": {
627
+ "value": 500,
628
+ "filePath": "tokens/typography/base/font-weight.json",
629
+ "isSource": true,
630
+ "original": {
631
+ "value": 500
632
+ },
633
+ "name": "typography-font-weight-medium",
634
+ "attributes": {
635
+ "category": "typography",
636
+ "type": "font-weight",
637
+ "item": "medium"
638
+ },
639
+ "path": [
640
+ "typography",
641
+ "font-weight",
642
+ "medium"
643
+ ]
644
+ },
626
645
  "semibold": {
627
646
  "value": 600,
628
647
  "filePath": "tokens/typography/base/font-weight.json",
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -13,50 +13,39 @@ $pds-color-border-default: #504e62;
13
13
  $pds-color-brand-accent-default: #de0093;
14
14
  $pds-color-brand-primary-default: #ffdc28;
15
15
  $pds-color-brand-secondary-default: #3017a1;
16
- $pds-color-button-critical-background-active: rgba(0, 0, 0, 0);
17
- $pds-color-button-critical-background-default: rgba(0, 0, 0, 0);
18
- $pds-color-button-critical-background-focus: rgba(0, 0, 0, 0);
19
- $pds-color-button-critical-background-hover: rgba(0, 0, 0, 0);
20
- $pds-color-button-critical-border-active: #be4242;
21
- $pds-color-button-critical-border-default: #be4242;
22
- $pds-color-button-critical-border-focus: #be4242;
23
- $pds-color-button-critical-border-hover: #ffafaf;
24
- $pds-color-button-critical-foreground-active: #be4242;
25
- $pds-color-button-critical-foreground-default: #e05757;
26
- $pds-color-button-critical-foreground-focus: #e05757;
27
- $pds-color-button-critical-foreground-hover: #ffafaf;
16
+ $pds-color-button-critical-background-active: #9c2f2f;
17
+ $pds-color-button-critical-background-default: #e05757;
18
+ $pds-color-button-critical-background-hover: #be4242;
19
+ $pds-color-button-critical-border-active: #9c2f2f;
20
+ $pds-color-button-critical-border-default: #e05757;
21
+ $pds-color-button-critical-border-hover: #be4242;
22
+ $pds-color-button-critical-foreground-active: #ffffff;
23
+ $pds-color-button-critical-foreground-default: #ffffff;
24
+ $pds-color-button-critical-foreground-hover: #ffffff;
28
25
  $pds-color-button-primary-background-active: #ddbd16;
29
26
  $pds-color-button-primary-background-default: #ffdc28;
30
- $pds-color-button-primary-background-focus: #ddbd16;
31
27
  $pds-color-button-primary-background-hover: #ffe668;
32
28
  $pds-color-button-primary-border-active: #ddbd16;
33
29
  $pds-color-button-primary-border-default: #ffdc28;
34
- $pds-color-button-primary-border-focus: #ddbd16;
35
30
  $pds-color-button-primary-border-hover: #ffe668;
36
31
  $pds-color-button-primary-foreground-active: #121219;
37
32
  $pds-color-button-primary-foreground-default: #121219;
38
- $pds-color-button-primary-foreground-focus: #121219;
39
33
  $pds-color-button-primary-foreground-hover: #121219;
40
34
  $pds-color-button-secondary-background-active: #282839;
41
35
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
42
- $pds-color-button-secondary-background-focus: rgba(0, 0, 0, 0);
43
36
  $pds-color-button-secondary-background-hover: #504e62;
44
37
  $pds-color-button-secondary-border-active: #504e62;
45
38
  $pds-color-button-secondary-border-default: #a6a3b4;
46
- $pds-color-button-secondary-border-focus: #a6a3b4;
47
39
  $pds-color-button-secondary-border-hover: #ffffff;
48
40
  $pds-color-button-secondary-foreground-active: #e7e7eb;
49
41
  $pds-color-button-secondary-foreground-default: #e7e7eb;
50
- $pds-color-button-secondary-foreground-focus: #e7e7eb;
51
42
  $pds-color-button-secondary-foreground-hover: #ffffff;
52
43
  $pds-color-button-subtle-background-active: #282839;
53
44
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
- $pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
55
45
  $pds-color-button-subtle-background-hover: #504e62;
56
46
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
57
47
  $pds-color-button-subtle-foreground-active: #e7e7eb;
58
48
  $pds-color-button-subtle-foreground-default: #e7e7eb;
59
- $pds-color-button-subtle-foreground-focus: #e7e7eb;
60
49
  $pds-color-button-subtle-foreground-hover: #ffffff;
61
50
  $pds-color-foreground-default: #ffffff;
62
51
  $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -15,48 +15,37 @@ $pds-color-brand-primary-default: #ffdc28;
15
15
  $pds-color-brand-secondary-default: #3017a1;
16
16
  $pds-color-button-critical-background-active: #920303;
17
17
  $pds-color-button-critical-background-default: #d61f1f;
18
- $pds-color-button-critical-background-focus: #ffebeb;
19
18
  $pds-color-button-critical-background-hover: #f83333;
20
19
  $pds-color-button-critical-border-active: #920303;
21
20
  $pds-color-button-critical-border-default: #d61f1f;
22
- $pds-color-button-critical-border-focus: #d61f1f;
23
21
  $pds-color-button-critical-border-hover: #f83333;
24
22
  $pds-color-button-critical-foreground-active: #ffffff;
25
23
  $pds-color-button-critical-foreground-default: #ffffff;
26
- $pds-color-button-critical-foreground-focus: #f83333;
27
24
  $pds-color-button-critical-foreground-hover: #ffffff;
28
25
  $pds-color-button-primary-background-active: #ddbd16;
29
26
  $pds-color-button-primary-background-default: #ffdc28;
30
- $pds-color-button-primary-background-focus: #ffe668;
31
27
  $pds-color-button-primary-background-hover: #ffe668;
32
28
  $pds-color-button-primary-border-active: #ddbd16;
33
29
  $pds-color-button-primary-border-default: #ffdc28;
34
- $pds-color-button-primary-border-focus: #ffe668;
35
30
  $pds-color-button-primary-border-hover: #ffe668;
36
31
  $pds-color-button-primary-foreground-active: #23232d;
37
32
  $pds-color-button-primary-foreground-default: #23232d;
38
- $pds-color-button-primary-foreground-focus: #23232d;
39
33
  $pds-color-button-primary-foreground-hover: #23232d;
40
34
  $pds-color-button-secondary-background-active: #cfcfd3;
41
35
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
42
- $pds-color-button-secondary-background-focus: #f0ecff;
43
36
  $pds-color-button-secondary-background-hover: #f0ecff;
44
37
  $pds-color-button-secondary-border-active: #11005d;
45
38
  $pds-color-button-secondary-border-default: #3017a1;
46
- $pds-color-button-secondary-border-focus: #785aff;
47
39
  $pds-color-button-secondary-border-hover: #785aff;
48
40
  $pds-color-button-secondary-foreground-active: #11005d;
49
41
  $pds-color-button-secondary-foreground-default: #3017a1;
50
- $pds-color-button-secondary-foreground-focus: #3017a1;
51
42
  $pds-color-button-secondary-foreground-hover: #3017a1;
52
43
  $pds-color-button-subtle-background-active: #cfcfd3;
53
44
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
- $pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
55
45
  $pds-color-button-subtle-background-hover: #f1f1f1;
56
46
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
57
47
  $pds-color-button-subtle-foreground-active: #11005d;
58
48
  $pds-color-button-subtle-foreground-default: #3017a1;
59
- $pds-color-button-subtle-foreground-focus: #3017a1;
60
49
  $pds-color-button-subtle-foreground-hover: #3017a1;
61
50
  $pds-color-foreground-default: #23232d;
62
51
  $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "0.7.0-dev.0",
3
+ "version": "0.7.0-dev.2",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [