@pantheon-systems/pds-design-tokens 1.0.0-dev.4 → 1.0.0-dev.40

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 +52 -23
  2. package/build/css/pds-design-tokens-light-mode.css +51 -22
  3. package/build/css/pds-design-tokens.css +5 -3
  4. package/build/figma/pds-design-tokens-figma.json +4760 -3068
  5. package/build/json/pds-design-tokens-dark-mode.json +1360 -611
  6. package/build/json/pds-design-tokens-light-mode.json +1378 -673
  7. package/build/json/pds-design-tokens.json +188 -52
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +52 -23
  9. package/build/scss/_pds-design-tokens-light-mode.scss +51 -22
  10. package/build/scss/_pds-design-tokens.scss +5 -3
  11. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -11,10 +11,10 @@
11
11
 
12
12
  :root {
13
13
  --pds-color-background-default: #1d1d29;
14
- --pds-color-border-default: #504e62;
14
+ --pds-color-border-default: #858299;
15
15
  --pds-color-brand-accent-default: #de0093;
16
16
  --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #6947ff;
17
+ --pds-color-brand-secondary-default: #8a70ff;
18
18
  --pds-color-button-brand-background-active: #ddbd16;
19
19
  --pds-color-button-brand-background-default: #ffdc28;
20
20
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,6 +24,15 @@
24
24
  --pds-color-button-brand-foreground-active: #121219;
25
25
  --pds-color-button-brand-foreground-default: #121219;
26
26
  --pds-color-button-brand-foreground-hover: #121219;
27
+ --pds-color-button-brand-secondary-background-active: #282839;
28
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
29
+ --pds-color-button-brand-secondary-background-hover: #504e62;
30
+ --pds-color-button-brand-secondary-border-active: #504e62;
31
+ --pds-color-button-brand-secondary-border-default: #a6a3b4;
32
+ --pds-color-button-brand-secondary-border-hover: #ffffff;
33
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
34
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
35
+ --pds-color-button-brand-secondary-foreground-hover: #ffffff;
27
36
  --pds-color-button-critical-background-active: #9c2f2f;
28
37
  --pds-color-button-critical-background-default: #e05757;
29
38
  --pds-color-button-critical-background-hover: #be4242;
@@ -33,12 +42,12 @@
33
42
  --pds-color-button-critical-foreground-active: #ffffff;
34
43
  --pds-color-button-critical-foreground-default: #ffffff;
35
44
  --pds-color-button-critical-foreground-hover: #ffffff;
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;
45
+ --pds-color-button-primary-background-active: #4e39a8;
46
+ --pds-color-button-primary-background-default: #8a70ff;
47
+ --pds-color-button-primary-background-hover: #ad9bff;
48
+ --pds-color-button-primary-border-active: #4e39a8;
49
+ --pds-color-button-primary-border-default: #8a70ff;
50
+ --pds-color-button-primary-border-hover: #ad9bff;
42
51
  --pds-color-button-primary-foreground-active: #ffffff;
43
52
  --pds-color-button-primary-foreground-default: #ffffff;
44
53
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -58,25 +67,44 @@
58
67
  --pds-color-button-subtle-foreground-active: #e7e7eb;
59
68
  --pds-color-button-subtle-foreground-default: #e7e7eb;
60
69
  --pds-color-button-subtle-foreground-hover: #ffffff;
70
+ --pds-color-card-border: #504e62;
61
71
  --pds-color-foreground-default: #ffffff;
62
72
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
73
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
74
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
75
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
76
+ --pds-color-input-action-background-hover: #504e62;
77
+ --pds-color-input-background-critical: #1d1d29;
66
78
  --pds-color-input-background-default: #1d1d29;
67
- --pds-color-input-background-disabled: #504e62;
68
- --pds-color-input-border-default: var(--pds-color-border-default);
69
- --pds-color-input-border-disabled: #858299;
79
+ --pds-color-input-background-hover: #282839;
80
+ --pds-color-input-border-critical: #e05757;
81
+ --pds-color-input-border-default: #858299;
82
+ --pds-color-input-border-hover: #ad9bff;
83
+ --pds-color-input-border-success: #3cb683;
84
+ --pds-color-input-checked-background: var(--pds-color-interactive-focus);
85
+ --pds-color-input-checked-foreground: #ffffff;
86
+ --pds-color-input-foreground-critical: #e05757;
87
+ --pds-color-input-foreground-default: #ffffff;
88
+ --pds-color-input-foreground-success: #3cb683;
89
+ --pds-color-input-placeholder-text: #a6a3b4;
90
+ --pds-color-input-toggle-switch-icon: #ffffff;
91
+ --pds-color-input-toggle-switch-off: #504e62;
92
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
70
93
  --pds-color-interactive-focus: #36a3ff;
71
- --pds-color-link-active: #2776b9;
94
+ --pds-color-link-active: #6f54e8;
95
+ --pds-color-link-cta-active: #d0c6ff;
96
+ --pds-color-link-cta-default: #8a70ff;
97
+ --pds-color-link-cta-hover: #ad9bff;
72
98
  --pds-color-link-default: #36a3ff;
73
- --pds-color-link-hover: #2776b9;
74
- --pds-color-link-visited: #967fff;
75
- --pds-color-menu-background: #121219;
76
- --pds-color-menu-item-background-active: #282839;
77
- --pds-color-menu-item-background-default: #121219;
78
- --pds-color-menu-item-background-hover: #1d1d29;
99
+ --pds-color-link-hover: #6f54e8;
100
+ --pds-color-link-visited: #6f54e8;
101
+ --pds-color-menu-background: #282839;
102
+ --pds-color-menu-item-background-active: #858299;
103
+ --pds-color-menu-item-background-default: #282839;
104
+ --pds-color-menu-item-background-hover: #504e62;
105
+ --pds-color-menu-item-description-text: #a6a3b4;
79
106
  --pds-color-menu-item-foreground: #ffffff;
107
+ --pds-color-menu-item-heading-text: #a6a3b4;
80
108
  --pds-color-panel-default-background: var(--pds-color-background-default);
81
109
  --pds-color-panel-default-border: var(--pds-color-border-default);
82
110
  --pds-color-panel-overlay-background: #282839;
@@ -86,11 +114,12 @@
86
114
  --pds-color-panel-sunken-background: #121219;
87
115
  --pds-color-panel-sunken-border: #121219;
88
116
  --pds-color-text-default: #ffffff;
89
- --pds-color-text-headings: var(--pds-color-text-default);
90
- --pds-color-text-lead: #858299;
91
- --pds-color-text-overline: #858299;
92
- --pds-color-text-paragraph: var(--pds-color-text-default);
93
- --pds-color-text-quote: #858299;
117
+ --pds-color-text-default-secondary: #a6a3b4;
118
+ --pds-color-tile-background-active: #858299;
119
+ --pds-color-tile-background-hover: #504e62;
120
+ --pds-color-tile-separator: #504e62;
121
+ --pds-color-toggle-button-background-off: #504e62;
122
+ --pds-color-toggle-button-foreground-off: #c7c5d0;
94
123
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
95
124
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
96
125
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -24,6 +24,15 @@
24
24
  --pds-color-button-brand-foreground-active: #23232d;
25
25
  --pds-color-button-brand-foreground-default: #23232d;
26
26
  --pds-color-button-brand-foreground-hover: #23232d;
27
+ --pds-color-button-brand-secondary-background-active: #f1f1f1;
28
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
29
+ --pds-color-button-brand-secondary-background-hover: #f8f8f8;
30
+ --pds-color-button-brand-secondary-border-active: #23232d;
31
+ --pds-color-button-brand-secondary-border-default: #6d6d78;
32
+ --pds-color-button-brand-secondary-border-hover: #23232d;
33
+ --pds-color-button-brand-secondary-foreground-active: #23232d;
34
+ --pds-color-button-brand-secondary-foreground-default: #23232d;
35
+ --pds-color-button-brand-secondary-foreground-hover: #23232d;
27
36
  --pds-color-button-critical-background-active: #700000;
28
37
  --pds-color-button-critical-background-default: #d61f1f;
29
38
  --pds-color-button-critical-background-hover: #f83333;
@@ -35,62 +44,82 @@
35
44
  --pds-color-button-critical-foreground-hover: #ffffff;
36
45
  --pds-color-button-primary-background-active: #11005d;
37
46
  --pds-color-button-primary-background-default: #3017a1;
38
- --pds-color-button-primary-background-hover: #785aff;
47
+ --pds-color-button-primary-background-hover: #5f41e5;
39
48
  --pds-color-button-primary-border-active: #11005d;
40
49
  --pds-color-button-primary-border-default: #3017a1;
41
- --pds-color-button-primary-border-hover: #785aff;
50
+ --pds-color-button-primary-border-hover: #5f41e5;
42
51
  --pds-color-button-primary-foreground-active: #ffffff;
43
52
  --pds-color-button-primary-foreground-default: #ffffff;
44
53
  --pds-color-button-primary-foreground-hover: #ffffff;
45
- --pds-color-button-secondary-background-active: #cfcfd3;
54
+ --pds-color-button-secondary-background-active: #e5dbff;
46
55
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
47
56
  --pds-color-button-secondary-background-hover: #f0ecff;
48
57
  --pds-color-button-secondary-border-active: #11005d;
49
58
  --pds-color-button-secondary-border-default: #3017a1;
50
- --pds-color-button-secondary-border-hover: #785aff;
59
+ --pds-color-button-secondary-border-hover: #5f41e5;
51
60
  --pds-color-button-secondary-foreground-active: #11005d;
52
61
  --pds-color-button-secondary-foreground-default: #3017a1;
53
62
  --pds-color-button-secondary-foreground-hover: #3017a1;
54
- --pds-color-button-subtle-background-active: #cfcfd3;
63
+ --pds-color-button-subtle-background-active: #e5dbff;
55
64
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
65
  --pds-color-button-subtle-background-hover: #f0ecff;
57
66
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
67
  --pds-color-button-subtle-foreground-active: #11005d;
59
68
  --pds-color-button-subtle-foreground-default: #3017a1;
60
69
  --pds-color-button-subtle-foreground-hover: #3017a1;
70
+ --pds-color-card-border: var(--pds-color-border-default);
61
71
  --pds-color-foreground-default: #23232d;
62
72
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
73
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
74
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
75
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
76
+ --pds-color-input-action-background-hover: #f8f8f8;
77
+ --pds-color-input-background-critical: #ffebeb;
66
78
  --pds-color-input-background-default: #ffffff;
67
- --pds-color-input-background-disabled: #cfcfd3;
68
- --pds-color-input-border-default: var(--pds-color-border-default);
69
- --pds-color-input-border-disabled: #aeaeb6;
79
+ --pds-color-input-background-hover: #f0ecff;
80
+ --pds-color-input-border-critical: #d61f1f;
81
+ --pds-color-input-border-default: #cfcfd3;
82
+ --pds-color-input-border-hover: #5f41e5;
83
+ --pds-color-input-border-success: #1f845a;
84
+ --pds-color-input-checked-background: var(--pds-color-interactive-focus);
85
+ --pds-color-input-checked-foreground: #ffffff;
86
+ --pds-color-input-foreground-critical: #d61f1f;
87
+ --pds-color-input-foreground-default: #23232d;
88
+ --pds-color-input-foreground-success: #1f845a;
89
+ --pds-color-input-placeholder-text: #6d6d78;
90
+ --pds-color-input-toggle-switch-icon: #ffffff;
91
+ --pds-color-input-toggle-switch-off: #6d6d78;
92
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
70
93
  --pds-color-interactive-focus: #0f62fe;
71
- --pds-color-link-active: #003cac;
94
+ --pds-color-link-active: #6f54e8;
95
+ --pds-color-link-cta-active: #11005d;
96
+ --pds-color-link-cta-default: #3017a1;
97
+ --pds-color-link-cta-hover: #5f41e5;
72
98
  --pds-color-link-default: #0f62fe;
73
- --pds-color-link-hover: #003cac;
74
- --pds-color-link-visited: #967fff;
99
+ --pds-color-link-hover: #6f54e8;
100
+ --pds-color-link-visited: #6f54e8;
75
101
  --pds-color-menu-background: #ffffff;
76
- --pds-color-menu-item-background-active: #cfcfd3;
102
+ --pds-color-menu-item-background-active: #f1f1f1;
77
103
  --pds-color-menu-item-background-default: #ffffff;
78
- --pds-color-menu-item-background-hover: #f1f1f1;
104
+ --pds-color-menu-item-background-hover: #f8f8f8;
105
+ --pds-color-menu-item-description-text: #6d6d78;
79
106
  --pds-color-menu-item-foreground: #23232d;
107
+ --pds-color-menu-item-heading-text: #6d6d78;
80
108
  --pds-color-panel-default-background: var(--pds-color-background-default);
81
109
  --pds-color-panel-default-border: var(--pds-color-border-default);
82
110
  --pds-color-panel-overlay-background: var(--pds-color-background-default);
83
111
  --pds-color-panel-overlay-border: var(--pds-color-border-default);
84
112
  --pds-color-panel-raised-background: var(--pds-color-background-default);
85
113
  --pds-color-panel-raised-border: var(--pds-color-border-default);
86
- --pds-color-panel-sunken-background: #f1f1f1;
87
- --pds-color-panel-sunken-border: #f1f1f1;
114
+ --pds-color-panel-sunken-background: #f8f8f8;
115
+ --pds-color-panel-sunken-border: #f8f8f8;
88
116
  --pds-color-text-default: #23232d;
89
- --pds-color-text-headings: var(--pds-color-text-default);
90
- --pds-color-text-lead: #71717c;
91
- --pds-color-text-overline: #71717c;
92
- --pds-color-text-paragraph: #23232d;
93
- --pds-color-text-quote: #71717c;
94
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
95
- --pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
117
+ --pds-color-text-default-secondary: #6d6d78;
118
+ --pds-color-tile-background-active: #f1f1f1;
119
+ --pds-color-tile-background-hover: #f8f8f8;
120
+ --pds-color-tile-separator: #cfcfd3;
121
+ --pds-color-toggle-button-background-off: #f1f1f1;
122
+ --pds-color-toggle-button-foreground-off: #6d6d78;
123
+ --pds-elevation-overlay: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
124
+ --pds-elevation-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
96
125
  }
package/build/css/pds-design-tokens.css CHANGED
@@ -10,9 +10,11 @@
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
+ --pds-animation-transition-default-delay: 0s;
14
+ --pds-animation-transition-default-duration: 200ms;
15
+ --pds-animation-transition-default-timing-function: ease-in-out;
16
+ --pds-animation-transition-dropdown-duration: 300ms;
17
+ --pds-border-radius-container: 0.375rem;
16
18
  --pds-border-radius-default: 0.1875rem;
17
19
  --pds-border-width-default: 1px;
18
20
  --pds-typography-font-default: 'Poppins', sans-serif;