@pantheon-systems/pds-design-tokens 0.7.0-dev.6 → 1.0.0-dev.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 (11) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +21 -10
  2. package/build/css/pds-design-tokens-light-mode.css +22 -11
  3. package/build/css/pds-design-tokens.css +3 -0
  4. package/build/figma/pds-design-tokens-figma.json +984 -383
  5. package/build/json/pds-design-tokens-dark-mode.json +341 -31
  6. package/build/json/pds-design-tokens-light-mode.json +353 -135
  7. package/build/json/pds-design-tokens.json +67 -0
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +21 -10
  9. package/build/scss/_pds-design-tokens-light-mode.scss +22 -11
  10. package/build/scss/_pds-design-tokens.scss +3 -0
  11. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -14,7 +14,16 @@
14
14
  --pds-color-border-default: #504e62;
15
15
  --pds-color-brand-accent-default: #de0093;
16
16
  --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #3017a1;
17
+ --pds-color-brand-secondary-default: #785aff;
18
+ --pds-color-button-brand-background-active: #ddbd16;
19
+ --pds-color-button-brand-background-default: #ffdc28;
20
+ --pds-color-button-brand-background-hover: #ffe668;
21
+ --pds-color-button-brand-border-active: #ddbd16;
22
+ --pds-color-button-brand-border-default: #ffdc28;
23
+ --pds-color-button-brand-border-hover: #ffe668;
24
+ --pds-color-button-brand-foreground-active: #121219;
25
+ --pds-color-button-brand-foreground-default: #121219;
26
+ --pds-color-button-brand-foreground-hover: #121219;
18
27
  --pds-color-button-critical-background-active: #9c2f2f;
19
28
  --pds-color-button-critical-background-default: #e05757;
20
29
  --pds-color-button-critical-background-hover: #be4242;
@@ -24,15 +33,15 @@
24
33
  --pds-color-button-critical-foreground-active: #ffffff;
25
34
  --pds-color-button-critical-foreground-default: #ffffff;
26
35
  --pds-color-button-critical-foreground-hover: #ffffff;
27
- --pds-color-button-primary-background-active: #ddbd16;
28
- --pds-color-button-primary-background-default: #ffdc28;
29
- --pds-color-button-primary-background-hover: #ffe668;
30
- --pds-color-button-primary-border-active: #ddbd16;
31
- --pds-color-button-primary-border-default: #ffdc28;
32
- --pds-color-button-primary-border-hover: #ffe668;
33
- --pds-color-button-primary-foreground-active: #121219;
34
- --pds-color-button-primary-foreground-default: #121219;
35
- --pds-color-button-primary-foreground-hover: #121219;
36
+ --pds-color-button-primary-background-active: #785aff;
37
+ --pds-color-button-primary-background-default: #967fff;
38
+ --pds-color-button-primary-background-hover: #b5a4ff;
39
+ --pds-color-button-primary-border-active: #785aff;
40
+ --pds-color-button-primary-border-default: #967fff;
41
+ --pds-color-button-primary-border-hover: #b5a4ff;
42
+ --pds-color-button-primary-foreground-active: #ffffff;
43
+ --pds-color-button-primary-foreground-default: #ffffff;
44
+ --pds-color-button-primary-foreground-hover: #ffffff;
36
45
  --pds-color-button-secondary-background-active: #282839;
37
46
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
38
47
  --pds-color-button-secondary-background-hover: #504e62;
@@ -73,8 +82,10 @@
73
82
  --pds-color-panel-sunken-border: #121219;
74
83
  --pds-color-text-default: #ffffff;
75
84
  --pds-color-text-headings: var(--pds-color-text-default);
85
+ --pds-color-text-lead: #858299;
76
86
  --pds-color-text-overline: #858299;
77
87
  --pds-color-text-paragraph: var(--pds-color-text-default);
88
+ --pds-color-text-quote: #858299;
78
89
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
79
90
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
80
91
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -15,24 +15,33 @@
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-critical-background-active: #920303;
18
+ --pds-color-button-brand-background-active: #ddbd16;
19
+ --pds-color-button-brand-background-default: #ffdc28;
20
+ --pds-color-button-brand-background-hover: #ffe668;
21
+ --pds-color-button-brand-border-active: #ddbd16;
22
+ --pds-color-button-brand-border-default: #ffdc28;
23
+ --pds-color-button-brand-border-hover: #ffe668;
24
+ --pds-color-button-brand-foreground-active: #23232d;
25
+ --pds-color-button-brand-foreground-default: #23232d;
26
+ --pds-color-button-brand-foreground-hover: #23232d;
27
+ --pds-color-button-critical-background-active: #700000;
19
28
  --pds-color-button-critical-background-default: #d61f1f;
20
29
  --pds-color-button-critical-background-hover: #f83333;
21
- --pds-color-button-critical-border-active: #920303;
30
+ --pds-color-button-critical-border-active: #700000;
22
31
  --pds-color-button-critical-border-default: #d61f1f;
23
32
  --pds-color-button-critical-border-hover: #f83333;
24
33
  --pds-color-button-critical-foreground-active: #ffffff;
25
34
  --pds-color-button-critical-foreground-default: #ffffff;
26
35
  --pds-color-button-critical-foreground-hover: #ffffff;
27
- --pds-color-button-primary-background-active: #ddbd16;
28
- --pds-color-button-primary-background-default: #ffdc28;
29
- --pds-color-button-primary-background-hover: #ffe668;
30
- --pds-color-button-primary-border-active: #ddbd16;
31
- --pds-color-button-primary-border-default: #ffdc28;
32
- --pds-color-button-primary-border-hover: #ffe668;
33
- --pds-color-button-primary-foreground-active: #23232d;
34
- --pds-color-button-primary-foreground-default: #23232d;
35
- --pds-color-button-primary-foreground-hover: #23232d;
36
+ --pds-color-button-primary-background-active: #11005d;
37
+ --pds-color-button-primary-background-default: #3017a1;
38
+ --pds-color-button-primary-background-hover: #785aff;
39
+ --pds-color-button-primary-border-active: #11005d;
40
+ --pds-color-button-primary-border-default: #3017a1;
41
+ --pds-color-button-primary-border-hover: #785aff;
42
+ --pds-color-button-primary-foreground-active: #ffffff;
43
+ --pds-color-button-primary-foreground-default: #ffffff;
44
+ --pds-color-button-primary-foreground-hover: #ffffff;
36
45
  --pds-color-button-secondary-background-active: #cfcfd3;
37
46
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
38
47
  --pds-color-button-secondary-background-hover: #f0ecff;
@@ -73,8 +82,10 @@
73
82
  --pds-color-panel-sunken-border: #f1f1f1;
74
83
  --pds-color-text-default: #23232d;
75
84
  --pds-color-text-headings: var(--pds-color-text-default);
85
+ --pds-color-text-lead: #71717c;
76
86
  --pds-color-text-overline: #71717c;
77
87
  --pds-color-text-paragraph: #23232d;
88
+ --pds-color-text-quote: #71717c;
78
89
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
79
90
  --pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
80
91
  }
package/build/css/pds-design-tokens.css CHANGED
@@ -10,6 +10,9 @@
10
10
  */
11
11
 
12
12
  :root {
13
+ --pds-animation-transition-delay: 0s;
14
+ --pds-animation-transition-duration: 200ms;
15
+ --pds-animation-transition-timing-function: ease-in-out;
13
16
  --pds-border-radius-default: 0.1875rem;
14
17
  --pds-border-width-default: 1px;
15
18
  --pds-typography-font-default: 'Poppins', sans-serif;