@pantheon-systems/pds-design-tokens 0.5.0-dev.0 → 0.6.0-dev.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 (9) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +46 -0
  2. package/build/css/pds-design-tokens-light-mode.css +32 -13
  3. package/build/figma/pds-design-tokens-figma.json +2312 -482
  4. package/build/json/pds-design-tokens-dark-mode.json +1299 -0
  5. package/build/json/pds-design-tokens-light-mode.json +731 -200
  6. package/build/json/pds-design-tokens.json +16 -8
  7. package/build/scss/_pds-design-tokens-dark-mode.scss +46 -0
  8. package/build/scss/_pds-design-tokens-light-mode.scss +32 -13
  9. package/package.json +1 -1
package/build/json/pds-design-tokens.json CHANGED
@@ -683,11 +683,13 @@
683
683
  },
684
684
  "letter-spacing": {
685
685
  "XL": {
686
- "value": "6%",
686
+ "value": "0.06",
687
+ "defaultUnit": "em",
687
688
  "filePath": "tokens/typography/base/letter-spacing.json",
688
689
  "isSource": true,
689
690
  "original": {
690
- "value": "6%"
691
+ "value": "0.06",
692
+ "defaultUnit": "em"
691
693
  },
692
694
  "name": "typography-letter-spacing-xl",
693
695
  "attributes": {
@@ -702,11 +704,13 @@
702
704
  ]
703
705
  },
704
706
  "L": {
705
- "value": "4%",
707
+ "value": "0.04",
708
+ "defaultUnit": "em",
706
709
  "filePath": "tokens/typography/base/letter-spacing.json",
707
710
  "isSource": true,
708
711
  "original": {
709
- "value": "4%"
712
+ "value": "0.04",
713
+ "defaultUnit": "em"
710
714
  },
711
715
  "name": "typography-letter-spacing-l",
712
716
  "attributes": {
@@ -721,11 +725,13 @@
721
725
  ]
722
726
  },
723
727
  "M": {
724
- "value": "2%",
728
+ "value": "0.02",
729
+ "defaultUnit": "em",
725
730
  "filePath": "tokens/typography/base/letter-spacing.json",
726
731
  "isSource": true,
727
732
  "original": {
728
- "value": "2%"
733
+ "value": "0.02",
734
+ "defaultUnit": "em"
729
735
  },
730
736
  "name": "typography-letter-spacing-m",
731
737
  "attributes": {
@@ -740,11 +746,13 @@
740
746
  ]
741
747
  },
742
748
  "S": {
743
- "value": "1%",
749
+ "value": "0.01",
750
+ "defaultUnit": "em",
744
751
  "filePath": "tokens/typography/base/letter-spacing.json",
745
752
  "isSource": true,
746
753
  "original": {
747
- "value": "1%"
754
+ "value": "0.01",
755
+ "defaultUnit": "em"
748
756
  },
749
757
  "name": "typography-letter-spacing-s",
750
758
  "attributes": {
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -13,6 +13,51 @@ $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-destructive-background-active: rgba(0, 0, 0, 0);
17
+ $pds-color-button-destructive-background-default: rgba(0, 0, 0, 0);
18
+ $pds-color-button-destructive-background-focus: rgba(0, 0, 0, 0);
19
+ $pds-color-button-destructive-background-hover: rgba(0, 0, 0, 0);
20
+ $pds-color-button-destructive-border-active: #be4242;
21
+ $pds-color-button-destructive-border-default: #be4242;
22
+ $pds-color-button-destructive-border-focus: #be4242;
23
+ $pds-color-button-destructive-border-hover: #ffafaf;
24
+ $pds-color-button-destructive-foreground-active: #be4242;
25
+ $pds-color-button-destructive-foreground-default: #e05757;
26
+ $pds-color-button-destructive-foreground-focus: #e05757;
27
+ $pds-color-button-destructive-foreground-hover: #ffafaf;
28
+ $pds-color-button-primary-background-active: #ddbd16;
29
+ $pds-color-button-primary-background-default: #ffdc28;
30
+ $pds-color-button-primary-background-focus: #ddbd16;
31
+ $pds-color-button-primary-background-hover: #ffe668;
32
+ $pds-color-button-primary-border-active: #ddbd16;
33
+ $pds-color-button-primary-border-default: #ffdc28;
34
+ $pds-color-button-primary-border-focus: #ddbd16;
35
+ $pds-color-button-primary-border-hover: #ffe668;
36
+ $pds-color-button-primary-foreground-active: #ffffff;
37
+ $pds-color-button-primary-foreground-default: #ffffff;
38
+ $pds-color-button-primary-foreground-focus: #ffffff;
39
+ $pds-color-button-primary-foreground-hover: #ffffff;
40
+ $pds-color-button-secondary-background-active: #282839;
41
+ $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
42
+ $pds-color-button-secondary-background-focus: rgba(0, 0, 0, 0);
43
+ $pds-color-button-secondary-background-hover: #504e62;
44
+ $pds-color-button-secondary-border-active: #504e62;
45
+ $pds-color-button-secondary-border-default: #a6a3b4;
46
+ $pds-color-button-secondary-border-focus: #a6a3b4;
47
+ $pds-color-button-secondary-border-hover: #ffffff;
48
+ $pds-color-button-secondary-foreground-active: #e7e7eb;
49
+ $pds-color-button-secondary-foreground-default: #e7e7eb;
50
+ $pds-color-button-secondary-foreground-focus: #e7e7eb;
51
+ $pds-color-button-secondary-foreground-hover: #ffffff;
52
+ $pds-color-button-subtle-background-active: #282839;
53
+ $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
+ $pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
55
+ $pds-color-button-subtle-background-hover: #504e62;
56
+ $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
57
+ $pds-color-button-subtle-foreground-active: #e7e7eb;
58
+ $pds-color-button-subtle-foreground-default: #e7e7eb;
59
+ $pds-color-button-subtle-foreground-focus: #e7e7eb;
60
+ $pds-color-button-subtle-foreground-hover: #ffffff;
16
61
  $pds-color-foreground-default: #ffffff;
17
62
  $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
18
63
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
@@ -22,6 +67,7 @@ $pds-color-input-background-default: #1d1d29;
22
67
  $pds-color-input-background-disabled: #504e62;
23
68
  $pds-color-input-border-default: $pds-color-border-default;
24
69
  $pds-color-input-border-disabled: #858299;
70
+ $pds-color-interactive-focus: #36a3ff;
25
71
  $pds-color-link-active: #2776b9;
26
72
  $pds-color-link-default: #36a3ff;
27
73
  $pds-color-link-hover: #2776b9;
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -13,33 +13,51 @@ $pds-color-border-default: #71717c;
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-destructive-background-active: #ffebeb;
17
- $pds-color-button-destructive-background-default: rgba(0, 0, 0, 0);
18
- $pds-color-button-destructive-background-hover: #ffebeb;
16
+ $pds-color-button-destructive-background-active: #920303;
17
+ $pds-color-button-destructive-background-default: #d61f1f;
18
+ $pds-color-button-destructive-background-focus: #ffebeb;
19
+ $pds-color-button-destructive-background-hover: #f83333;
19
20
  $pds-color-button-destructive-border-active: #920303;
20
21
  $pds-color-button-destructive-border-default: #d61f1f;
22
+ $pds-color-button-destructive-border-focus: #d61f1f;
21
23
  $pds-color-button-destructive-border-hover: #f83333;
22
- $pds-color-button-destructive-text-active: #920303;
23
- $pds-color-button-destructive-text-default: #d61f1f;
24
- $pds-color-button-destructive-text-hover: #d61f1f;
24
+ $pds-color-button-destructive-foreground-active: #ffffff;
25
+ $pds-color-button-destructive-foreground-default: #ffffff;
26
+ $pds-color-button-destructive-foreground-focus: #f83333;
27
+ $pds-color-button-destructive-foreground-hover: #ffffff;
25
28
  $pds-color-button-primary-background-active: #ddbd16;
26
29
  $pds-color-button-primary-background-default: #ffdc28;
30
+ $pds-color-button-primary-background-focus: #ffe668;
27
31
  $pds-color-button-primary-background-hover: #ffe668;
28
32
  $pds-color-button-primary-border-active: #ddbd16;
29
33
  $pds-color-button-primary-border-default: #ffdc28;
34
+ $pds-color-button-primary-border-focus: #ffe668;
30
35
  $pds-color-button-primary-border-hover: #ffe668;
31
- $pds-color-button-primary-text-active: #23232d;
32
- $pds-color-button-primary-text-default: #23232d;
33
- $pds-color-button-primary-text-hover: #23232d;
34
- $pds-color-button-secondary-background-active: #f0ecff;
36
+ $pds-color-button-primary-foreground-active: #23232d;
37
+ $pds-color-button-primary-foreground-default: #23232d;
38
+ $pds-color-button-primary-foreground-focus: #23232d;
39
+ $pds-color-button-primary-foreground-hover: #23232d;
40
+ $pds-color-button-secondary-background-active: #cfcfd3;
35
41
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
42
+ $pds-color-button-secondary-background-focus: #f0ecff;
36
43
  $pds-color-button-secondary-background-hover: #f0ecff;
37
44
  $pds-color-button-secondary-border-active: #11005d;
38
45
  $pds-color-button-secondary-border-default: #3017a1;
46
+ $pds-color-button-secondary-border-focus: #785aff;
39
47
  $pds-color-button-secondary-border-hover: #785aff;
40
- $pds-color-button-secondary-text-active: #11005d;
41
- $pds-color-button-secondary-text-default: #3017a1;
42
- $pds-color-button-secondary-text-hover: #3017a1;
48
+ $pds-color-button-secondary-foreground-active: #11005d;
49
+ $pds-color-button-secondary-foreground-default: #3017a1;
50
+ $pds-color-button-secondary-foreground-focus: #3017a1;
51
+ $pds-color-button-secondary-foreground-hover: #3017a1;
52
+ $pds-color-button-subtle-background-active: #cfcfd3;
53
+ $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
+ $pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
55
+ $pds-color-button-subtle-background-hover: #f1f1f1;
56
+ $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
57
+ $pds-color-button-subtle-foreground-active: #11005d;
58
+ $pds-color-button-subtle-foreground-default: #3017a1;
59
+ $pds-color-button-subtle-foreground-focus: #3017a1;
60
+ $pds-color-button-subtle-foreground-hover: #3017a1;
43
61
  $pds-color-foreground-default: #23232d;
44
62
  $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
45
63
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
@@ -49,6 +67,7 @@ $pds-color-input-background-default: #ffffff;
49
67
  $pds-color-input-background-disabled: #cfcfd3;
50
68
  $pds-color-input-border-default: $pds-color-border-default;
51
69
  $pds-color-input-border-disabled: #aeaeb6;
70
+ $pds-color-interactive-focus: #0f62fe;
52
71
  $pds-color-link-active: #003cac;
53
72
  $pds-color-link-default: #0f62fe;
54
73
  $pds-color-link-hover: #003cac;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "0.5.0-dev.0",
3
+ "version": "0.6.0-dev.1",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [