@pantheon-systems/pds-design-tokens 0.4.0-dev.2 → 0.6.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 (12) hide show
  1. package/README.md +1 -3
  2. package/build/css/pds-design-tokens-dark-mode.css +53 -0
  3. package/build/css/pds-design-tokens-light-mode.css +53 -0
  4. package/build/css/pds-design-tokens.css +1 -8
  5. package/build/figma/pds-design-tokens-figma.json +6342 -3087
  6. package/build/json/pds-design-tokens-dark-mode.json +2071 -35
  7. package/build/json/pds-design-tokens-light-mode.json +2081 -35
  8. package/build/json/pds-design-tokens.json +18 -777
  9. package/build/scss/_pds-design-tokens-dark-mode.scss +53 -0
  10. package/build/scss/_pds-design-tokens-light-mode.scss +53 -0
  11. package/build/scss/_pds-design-tokens.scss +1 -8
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -31,6 +31,4 @@ We typically only designate tokens as public when they need to be available to o
31
31
 
32
32
  ## Color Modes
33
33
 
34
- All global color values are found within the default output files which should be loaded at all times.
35
-
36
- Mode-specific (light or dark) color and elevation tokens are found within theme-specific files and are to be used in conjunction with (and loaded after) the default tokens implementation files.
34
+ Each color or elevation token is designated as light-mode or dark-mode. All non-color tokens are considered to be global tokens.
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -12,11 +12,64 @@
12
12
  :root {
13
13
  --pds-color-background-default: #1d1d29;
14
14
  --pds-color-border-default: #504e62;
15
+ --pds-color-brand-accent-default: #de0093;
16
+ --pds-color-brand-primary-default: #ffdc28;
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: 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;
15
63
  --pds-color-foreground-default: #ffffff;
64
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
65
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
66
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
67
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
16
68
  --pds-color-input-background-default: #1d1d29;
17
69
  --pds-color-input-background-disabled: #504e62;
18
70
  --pds-color-input-border-default: var(--pds-color-border-default);
19
71
  --pds-color-input-border-disabled: #858299;
72
+ --pds-color-interactive-focus: #36a3ff;
20
73
  --pds-color-link-active: #2776b9;
21
74
  --pds-color-link-default: #36a3ff;
22
75
  --pds-color-link-hover: #2776b9;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -12,11 +12,64 @@
12
12
  :root {
13
13
  --pds-color-background-default: #ffffff;
14
14
  --pds-color-border-default: #71717c;
15
+ --pds-color-brand-accent-default: #de0093;
16
+ --pds-color-brand-primary-default: #ffdc28;
17
+ --pds-color-brand-secondary-default: #3017a1;
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;
22
+ --pds-color-button-destructive-border-active: #920303;
23
+ --pds-color-button-destructive-border-default: #d61f1f;
24
+ --pds-color-button-destructive-border-focus: #d61f1f;
25
+ --pds-color-button-destructive-border-hover: #f83333;
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;
30
+ --pds-color-button-primary-background-active: #ddbd16;
31
+ --pds-color-button-primary-background-default: #ffdc28;
32
+ --pds-color-button-primary-background-focus: #ffe668;
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: #ffe668;
37
+ --pds-color-button-primary-border-hover: #ffe668;
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;
43
+ --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
44
+ --pds-color-button-secondary-background-focus: #f0ecff;
45
+ --pds-color-button-secondary-background-hover: #f0ecff;
46
+ --pds-color-button-secondary-border-active: #11005d;
47
+ --pds-color-button-secondary-border-default: #3017a1;
48
+ --pds-color-button-secondary-border-focus: #785aff;
49
+ --pds-color-button-secondary-border-hover: #785aff;
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: 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;
15
63
  --pds-color-foreground-default: #23232d;
64
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
65
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
66
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
67
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
16
68
  --pds-color-input-background-default: #ffffff;
17
69
  --pds-color-input-background-disabled: #cfcfd3;
18
70
  --pds-color-input-border-default: var(--pds-color-border-default);
19
71
  --pds-color-input-border-disabled: #aeaeb6;
72
+ --pds-color-interactive-focus: #0f62fe;
20
73
  --pds-color-link-active: #003cac;
21
74
  --pds-color-link-default: #0f62fe;
22
75
  --pds-color-link-hover: #003cac;
package/build/css/pds-design-tokens.css CHANGED
@@ -10,14 +10,7 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-border-radius-default: 0.25rem;
13
+ --pds-border-radius-default: 0.1875rem;
14
14
  --pds-border-width-default: 1px;
15
- --pds-color-global-brand-accent-default: #de0093;
16
- --pds-color-global-brand-primary-default: #ffdc28;
17
- --pds-color-global-brand-secondary-default: #3017a1;
18
- --pds-color-global-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
19
- --pds-color-global-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
20
- --pds-color-global-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
21
- --pds-color-global-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
22
15
  --pds-typography-font-default: 'Poppins', sans-serif;
23
16
  }