@pantheon-systems/pds-design-tokens 0.7.0-dev.7 → 1.0.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 (11) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +19 -10
  2. package/build/css/pds-design-tokens-light-mode.css +21 -12
  3. package/build/css/pds-design-tokens.css +3 -0
  4. package/build/figma/pds-design-tokens-figma.json +935 -411
  5. package/build/json/pds-design-tokens-dark-mode.json +314 -31
  6. package/build/json/pds-design-tokens-light-mode.json +304 -136
  7. package/build/json/pds-design-tokens.json +67 -0
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +19 -10
  9. package/build/scss/_pds-design-tokens-light-mode.scss +21 -12
  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: #6947ff;
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: #4b32bb;
37
+ --pds-color-button-primary-background-default: #6947ff;
38
+ --pds-color-button-primary-background-hover: #7657ff;
39
+ --pds-color-button-primary-border-active: #4b32bb;
40
+ --pds-color-button-primary-border-default: #6947ff;
41
+ --pds-color-button-primary-border-hover: #7657ff;
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;
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;
@@ -44,7 +53,7 @@
44
53
  --pds-color-button-secondary-foreground-hover: #3017a1;
45
54
  --pds-color-button-subtle-background-active: #cfcfd3;
46
55
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
47
- --pds-color-button-subtle-background-hover: #f1f1f1;
56
+ --pds-color-button-subtle-background-hover: #f0ecff;
48
57
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
49
58
  --pds-color-button-subtle-foreground-active: #11005d;
50
59
  --pds-color-button-subtle-foreground-default: #3017a1;
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;