@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/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -10,11 +10,64 @@
10
10
 
11
11
  $pds-color-background-default: #1d1d29;
12
12
  $pds-color-border-default: #504e62;
13
+ $pds-color-brand-accent-default: #de0093;
14
+ $pds-color-brand-primary-default: #ffdc28;
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: 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;
13
61
  $pds-color-foreground-default: #ffffff;
62
+ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
+ $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
+ $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
+ $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
14
66
  $pds-color-input-background-default: #1d1d29;
15
67
  $pds-color-input-background-disabled: #504e62;
16
68
  $pds-color-input-border-default: $pds-color-border-default;
17
69
  $pds-color-input-border-disabled: #858299;
70
+ $pds-color-interactive-focus: #36a3ff;
18
71
  $pds-color-link-active: #2776b9;
19
72
  $pds-color-link-default: #36a3ff;
20
73
  $pds-color-link-hover: #2776b9;
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -10,11 +10,64 @@
10
10
 
11
11
  $pds-color-background-default: #ffffff;
12
12
  $pds-color-border-default: #71717c;
13
+ $pds-color-brand-accent-default: #de0093;
14
+ $pds-color-brand-primary-default: #ffdc28;
15
+ $pds-color-brand-secondary-default: #3017a1;
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;
20
+ $pds-color-button-destructive-border-active: #920303;
21
+ $pds-color-button-destructive-border-default: #d61f1f;
22
+ $pds-color-button-destructive-border-focus: #d61f1f;
23
+ $pds-color-button-destructive-border-hover: #f83333;
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;
28
+ $pds-color-button-primary-background-active: #ddbd16;
29
+ $pds-color-button-primary-background-default: #ffdc28;
30
+ $pds-color-button-primary-background-focus: #ffe668;
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: #ffe668;
35
+ $pds-color-button-primary-border-hover: #ffe668;
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;
41
+ $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
42
+ $pds-color-button-secondary-background-focus: #f0ecff;
43
+ $pds-color-button-secondary-background-hover: #f0ecff;
44
+ $pds-color-button-secondary-border-active: #11005d;
45
+ $pds-color-button-secondary-border-default: #3017a1;
46
+ $pds-color-button-secondary-border-focus: #785aff;
47
+ $pds-color-button-secondary-border-hover: #785aff;
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: 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;
13
61
  $pds-color-foreground-default: #23232d;
62
+ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
+ $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
+ $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
+ $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
14
66
  $pds-color-input-background-default: #ffffff;
15
67
  $pds-color-input-background-disabled: #cfcfd3;
16
68
  $pds-color-input-border-default: $pds-color-border-default;
17
69
  $pds-color-input-border-disabled: #aeaeb6;
70
+ $pds-color-interactive-focus: #0f62fe;
18
71
  $pds-color-link-active: #003cac;
19
72
  $pds-color-link-default: #0f62fe;
20
73
  $pds-color-link-hover: #003cac;
package/build/scss/_pds-design-tokens.scss CHANGED
@@ -8,13 +8,6 @@
8
8
  //
9
9
  // This file has been generated automatically.
10
10
 
11
- $pds-border-radius-default: 0.25rem;
11
+ $pds-border-radius-default: 0.1875rem;
12
12
  $pds-border-width-default: 1px;
13
- $pds-color-global-brand-accent-default: #de0093;
14
- $pds-color-global-brand-primary-default: #ffdc28;
15
- $pds-color-global-brand-secondary-default: #3017a1;
16
- $pds-color-global-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
17
- $pds-color-global-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
18
- $pds-color-global-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
19
- $pds-color-global-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
20
13
  $pds-typography-font-default: 'Poppins', sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "0.4.0-dev.2",
3
+ "version": "0.6.0-dev.0",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [