@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/css/pds-design-tokens-dark-mode.css CHANGED
@@ -15,6 +15,51 @@
15
15
  --pds-color-brand-accent-default: #de0093;
16
16
  --pds-color-brand-primary-default: #ffdc28;
17
17
  --pds-color-brand-secondary-default: #3017a1;
18
+ --pds-color-button-destructive-background-active: rgba(0, 0, 0, 0);
19
+ --pds-color-button-destructive-background-default: rgba(0, 0, 0, 0);
20
+ --pds-color-button-destructive-background-focus: rgba(0, 0, 0, 0);
21
+ --pds-color-button-destructive-background-hover: rgba(0, 0, 0, 0);
22
+ --pds-color-button-destructive-border-active: #be4242;
23
+ --pds-color-button-destructive-border-default: #be4242;
24
+ --pds-color-button-destructive-border-focus: #be4242;
25
+ --pds-color-button-destructive-border-hover: #ffafaf;
26
+ --pds-color-button-destructive-foreground-active: #be4242;
27
+ --pds-color-button-destructive-foreground-default: #e05757;
28
+ --pds-color-button-destructive-foreground-focus: #e05757;
29
+ --pds-color-button-destructive-foreground-hover: #ffafaf;
30
+ --pds-color-button-primary-background-active: #ddbd16;
31
+ --pds-color-button-primary-background-default: #ffdc28;
32
+ --pds-color-button-primary-background-focus: #ddbd16;
33
+ --pds-color-button-primary-background-hover: #ffe668;
34
+ --pds-color-button-primary-border-active: #ddbd16;
35
+ --pds-color-button-primary-border-default: #ffdc28;
36
+ --pds-color-button-primary-border-focus: #ddbd16;
37
+ --pds-color-button-primary-border-hover: #ffe668;
38
+ --pds-color-button-primary-foreground-active: #ffffff;
39
+ --pds-color-button-primary-foreground-default: #ffffff;
40
+ --pds-color-button-primary-foreground-focus: #ffffff;
41
+ --pds-color-button-primary-foreground-hover: #ffffff;
42
+ --pds-color-button-secondary-background-active: #282839;
43
+ --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
44
+ --pds-color-button-secondary-background-focus: rgba(0, 0, 0, 0);
45
+ --pds-color-button-secondary-background-hover: #504e62;
46
+ --pds-color-button-secondary-border-active: #504e62;
47
+ --pds-color-button-secondary-border-default: #a6a3b4;
48
+ --pds-color-button-secondary-border-focus: #a6a3b4;
49
+ --pds-color-button-secondary-border-hover: #ffffff;
50
+ --pds-color-button-secondary-foreground-active: #e7e7eb;
51
+ --pds-color-button-secondary-foreground-default: #e7e7eb;
52
+ --pds-color-button-secondary-foreground-focus: #e7e7eb;
53
+ --pds-color-button-secondary-foreground-hover: #ffffff;
54
+ --pds-color-button-subtle-background-active: #282839;
55
+ --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
+ --pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
57
+ --pds-color-button-subtle-background-hover: #504e62;
58
+ --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
59
+ --pds-color-button-subtle-foreground-active: #e7e7eb;
60
+ --pds-color-button-subtle-foreground-default: #e7e7eb;
61
+ --pds-color-button-subtle-foreground-focus: #e7e7eb;
62
+ --pds-color-button-subtle-foreground-hover: #ffffff;
18
63
  --pds-color-foreground-default: #ffffff;
19
64
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
20
65
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
@@ -24,6 +69,7 @@
24
69
  --pds-color-input-background-disabled: #504e62;
25
70
  --pds-color-input-border-default: var(--pds-color-border-default);
26
71
  --pds-color-input-border-disabled: #858299;
72
+ --pds-color-interactive-focus: #36a3ff;
27
73
  --pds-color-link-active: #2776b9;
28
74
  --pds-color-link-default: #36a3ff;
29
75
  --pds-color-link-hover: #2776b9;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -15,33 +15,51 @@
15
15
  --pds-color-brand-accent-default: #de0093;
16
16
  --pds-color-brand-primary-default: #ffdc28;
17
17
  --pds-color-brand-secondary-default: #3017a1;
18
- --pds-color-button-destructive-background-active: #ffebeb;
19
- --pds-color-button-destructive-background-default: rgba(0, 0, 0, 0);
20
- --pds-color-button-destructive-background-hover: #ffebeb;
18
+ --pds-color-button-destructive-background-active: #920303;
19
+ --pds-color-button-destructive-background-default: #d61f1f;
20
+ --pds-color-button-destructive-background-focus: #ffebeb;
21
+ --pds-color-button-destructive-background-hover: #f83333;
21
22
  --pds-color-button-destructive-border-active: #920303;
22
23
  --pds-color-button-destructive-border-default: #d61f1f;
24
+ --pds-color-button-destructive-border-focus: #d61f1f;
23
25
  --pds-color-button-destructive-border-hover: #f83333;
24
- --pds-color-button-destructive-text-active: #920303;
25
- --pds-color-button-destructive-text-default: #d61f1f;
26
- --pds-color-button-destructive-text-hover: #d61f1f;
26
+ --pds-color-button-destructive-foreground-active: #ffffff;
27
+ --pds-color-button-destructive-foreground-default: #ffffff;
28
+ --pds-color-button-destructive-foreground-focus: #f83333;
29
+ --pds-color-button-destructive-foreground-hover: #ffffff;
27
30
  --pds-color-button-primary-background-active: #ddbd16;
28
31
  --pds-color-button-primary-background-default: #ffdc28;
32
+ --pds-color-button-primary-background-focus: #ffe668;
29
33
  --pds-color-button-primary-background-hover: #ffe668;
30
34
  --pds-color-button-primary-border-active: #ddbd16;
31
35
  --pds-color-button-primary-border-default: #ffdc28;
36
+ --pds-color-button-primary-border-focus: #ffe668;
32
37
  --pds-color-button-primary-border-hover: #ffe668;
33
- --pds-color-button-primary-text-active: #23232d;
34
- --pds-color-button-primary-text-default: #23232d;
35
- --pds-color-button-primary-text-hover: #23232d;
36
- --pds-color-button-secondary-background-active: #f0ecff;
38
+ --pds-color-button-primary-foreground-active: #23232d;
39
+ --pds-color-button-primary-foreground-default: #23232d;
40
+ --pds-color-button-primary-foreground-focus: #23232d;
41
+ --pds-color-button-primary-foreground-hover: #23232d;
42
+ --pds-color-button-secondary-background-active: #cfcfd3;
37
43
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
44
+ --pds-color-button-secondary-background-focus: #f0ecff;
38
45
  --pds-color-button-secondary-background-hover: #f0ecff;
39
46
  --pds-color-button-secondary-border-active: #11005d;
40
47
  --pds-color-button-secondary-border-default: #3017a1;
48
+ --pds-color-button-secondary-border-focus: #785aff;
41
49
  --pds-color-button-secondary-border-hover: #785aff;
42
- --pds-color-button-secondary-text-active: #11005d;
43
- --pds-color-button-secondary-text-default: #3017a1;
44
- --pds-color-button-secondary-text-hover: #3017a1;
50
+ --pds-color-button-secondary-foreground-active: #11005d;
51
+ --pds-color-button-secondary-foreground-default: #3017a1;
52
+ --pds-color-button-secondary-foreground-focus: #3017a1;
53
+ --pds-color-button-secondary-foreground-hover: #3017a1;
54
+ --pds-color-button-subtle-background-active: #cfcfd3;
55
+ --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
+ --pds-color-button-subtle-background-focus: rgba(0, 0, 0, 0);
57
+ --pds-color-button-subtle-background-hover: #f1f1f1;
58
+ --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
59
+ --pds-color-button-subtle-foreground-active: #11005d;
60
+ --pds-color-button-subtle-foreground-default: #3017a1;
61
+ --pds-color-button-subtle-foreground-focus: #3017a1;
62
+ --pds-color-button-subtle-foreground-hover: #3017a1;
45
63
  --pds-color-foreground-default: #23232d;
46
64
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
47
65
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
@@ -51,6 +69,7 @@
51
69
  --pds-color-input-background-disabled: #cfcfd3;
52
70
  --pds-color-input-border-default: var(--pds-color-border-default);
53
71
  --pds-color-input-border-disabled: #aeaeb6;
72
+ --pds-color-interactive-focus: #0f62fe;
54
73
  --pds-color-link-active: #003cac;
55
74
  --pds-color-link-default: #0f62fe;
56
75
  --pds-color-link-hover: #003cac;