@pantheon-systems/pds-design-tokens 1.0.0-dev.144 → 1.0.0-dev.145

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 (6) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +39 -65
  2. package/build/css/pds-design-tokens-light-mode.css +123 -134
  3. package/build/figma/pds-design-tokens-figma.json +4402 -5576
  4. package/build/json/pds-design-tokens-dark-mode.json +1393 -2166
  5. package/build/json/pds-design-tokens-light-mode.json +3420 -3821
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -10,24 +10,25 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-background-brand-secondary: #4e39a8;
14
13
  --pds-color-background-default: #1d1d29;
15
14
  --pds-color-background-default-secondary: #282839;
16
15
  --pds-color-background-reverse: #e7e7eb;
16
+ --pds-color-badge-indicator-brand-background: #8a70ff;
17
+ --pds-color-badge-indicator-brand-foreground: #ffffff;
17
18
  --pds-color-badge-indicator-critical-background: #ef5c48;
18
19
  --pds-color-badge-indicator-critical-foreground: #ffffff;
19
20
  --pds-color-badge-indicator-diamond-background: #f0fdff;
20
21
  --pds-color-badge-indicator-diamond-foreground: #388bff;
21
- --pds-color-badge-indicator-gold-background: #fff1a9;
22
+ --pds-color-badge-indicator-gold-background: #ffe668;
22
23
  --pds-color-badge-indicator-gold-foreground: #705e00;
23
24
  --pds-color-badge-indicator-info-background: #388bff;
24
25
  --pds-color-badge-indicator-info-foreground: #ffffff;
25
26
  --pds-color-badge-indicator-neutral-background: #504e62;
26
27
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
27
- --pds-color-badge-indicator-platinum-background: #d0c6ff;
28
- --pds-color-badge-indicator-platinum-foreground: #4e39a8;
28
+ --pds-color-badge-indicator-platinum-background: #fff1a9;
29
+ --pds-color-badge-indicator-platinum-foreground: #ddbd16;
29
30
  --pds-color-badge-indicator-silver-background: #a6a3b4;
30
- --pds-color-badge-indicator-silver-foreground: var(--pds-color-text-default-secondary);
31
+ --pds-color-badge-indicator-silver-foreground: var(--pds-color-foreground-default-secondary);
31
32
  --pds-color-badge-indicator-success-background: #2abb7f;
32
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
33
34
  --pds-color-badge-indicator-warning-background: #cf9f02;
@@ -36,32 +37,32 @@
36
37
  --pds-color-badge-status-dot-default: #858299;
37
38
  --pds-color-badge-status-dot-disabled: #858299;
38
39
  --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
39
- --pds-color-badge-status-dot-frozen: #d0c6ff;
40
+ --pds-color-badge-status-dot-frozen: #ad9bff;
40
41
  --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
41
42
  --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
42
43
  --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
43
44
  --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
44
45
  --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
45
- --pds-color-badge-status-neutral-label: var(--pds-color-text-default-secondary);
46
+ --pds-color-badge-status-neutral-label: var(--pds-color-foreground-default-secondary);
46
47
  --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
47
48
  --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
48
- --pds-color-badge-status-reverse-label: var(--pds-color-text-reverse);
49
+ --pds-color-badge-status-reverse-label: var(--pds-color-foreground-reverse);
49
50
  --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
50
51
  --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
51
- --pds-color-badge-status-transparent-label: var(--pds-color-text-default-secondary);
52
+ --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
52
53
  --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
53
54
  --pds-color-banner-critical-foreground: #ffffff;
54
55
  --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
55
56
  --pds-color-banner-info-foreground: #ffffff;
56
57
  --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
58
  --pds-color-banner-warning-foreground: #121219;
59
+ --pds-color-border-brand: #ad9bff;
58
60
  --pds-color-border-default: #504e62;
61
+ --pds-color-border-input: #858299;
62
+ --pds-color-border-separator: #858299;
59
63
  --pds-color-brand-accent-default: #de0093;
60
- --pds-color-brand-primary-default: #ffdc28;
61
- --pds-color-brand-secondary-default: #8a70ff;
62
- --pds-color-breadcrumb-link: var(--pds-color-interactive-link-default);
63
- --pds-color-breadcrumb-separator: #858299;
64
- --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
64
+ --pds-color-brand-primary-default: #8a70ff;
65
+ --pds-color-brand-secondary-default: #ffdc28;
65
66
  --pds-color-button-brand-background-active: #ddbd16;
66
67
  --pds-color-button-brand-background-default: #ffdc28;
67
68
  --pds-color-button-brand-background-hover: #ffe668;
@@ -93,11 +94,11 @@
93
94
  --pds-color-button-navbar-foreground-default: #ffffff;
94
95
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
95
96
  --pds-color-button-primary-background-active: #4e39a8;
96
- --pds-color-button-primary-background-default: #8a70ff;
97
- --pds-color-button-primary-background-hover: #ad9bff;
97
+ --pds-color-button-primary-background-default: #4e39a8;
98
+ --pds-color-button-primary-background-hover: #2a1a8a;
98
99
  --pds-color-button-primary-border-active: #4e39a8;
99
- --pds-color-button-primary-border-default: #8a70ff;
100
- --pds-color-button-primary-border-hover: #ad9bff;
100
+ --pds-color-button-primary-border-default: #4e39a8;
101
+ --pds-color-button-primary-border-hover: #2a1a8a;
101
102
  --pds-color-button-primary-foreground-active: #ffffff;
102
103
  --pds-color-button-primary-foreground-default: #ffffff;
103
104
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -115,33 +116,24 @@
115
116
  --pds-color-button-subtle-foreground-active: #8a70ff;
116
117
  --pds-color-button-subtle-foreground-default: #d0c6ff;
117
118
  --pds-color-button-subtle-foreground-hover: #8a70ff;
118
- --pds-color-card-border: #504e62;
119
119
  --pds-color-code-inline-background: #282839;
120
120
  --pds-color-code-inline-border: #504e62;
121
121
  --pds-color-code-inline-text: #ffffff;
122
122
  --pds-color-expansion-panel-hover: #282839;
123
123
  --pds-color-expansion-panel-open: #282839;
124
124
  --pds-color-foreground-default: #ffffff;
125
+ --pds-color-foreground-default-secondary: #a6a3b4;
125
126
  --pds-color-foreground-reverse: #1d1d29;
126
127
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
127
128
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
128
129
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
129
130
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
130
- --pds-color-icon-button-critical-background-active: #391813;
131
- --pds-color-icon-button-critical-background-default: rgba(0, 0, 0, 0);
132
- --pds-color-icon-button-critical-background-hover: #391813;
133
- --pds-color-icon-button-critical-foreground-default: #ef5c48;
134
- --pds-color-icon-button-standard-background-active: #858299;
135
- --pds-color-icon-button-standard-background-default: rgba(0, 0, 0, 0);
136
- --pds-color-icon-button-standard-background-hover: #a6a3b4;
137
- --pds-color-icon-button-standard-foreground-default: #ffffff;
138
131
  --pds-color-input-action-background-hover: #504e62;
139
132
  --pds-color-input-background-critical: #1d1d29;
140
133
  --pds-color-input-background-default: #1d1d29;
141
134
  --pds-color-input-background-hover: #282839;
142
135
  --pds-color-input-border-critical: #ef5c48;
143
136
  --pds-color-input-border-default: #858299;
144
- --pds-color-input-border-hover: #ad9bff;
145
137
  --pds-color-input-border-success: #2abb7f;
146
138
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
147
139
  --pds-color-input-checked-foreground: #ffffff;
@@ -151,9 +143,9 @@
151
143
  --pds-color-input-foreground-default: #ffffff;
152
144
  --pds-color-input-foreground-success: #2abb7f;
153
145
  --pds-color-input-placeholder-text: #a6a3b4;
154
- --pds-color-input-toggle-switch-icon: #ffffff;
155
- --pds-color-input-toggle-switch-off: #504e62;
156
- --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
146
+ --pds-color-input-switch-icon: #ffffff;
147
+ --pds-color-input-switch-off: #504e62;
148
+ --pds-color-input-switch-on: var(--pds-color-interactive-focus);
157
149
  --pds-color-interactive-focus: #36a3ff;
158
150
  --pds-color-interactive-link-active: #ad9bff;
159
151
  --pds-color-interactive-link-default: #36a3ff;
@@ -162,22 +154,9 @@
162
154
  --pds-color-interactive-reverse-focus: #0f62fe;
163
155
  --pds-color-interactive-reverse-link-active: #3017a1;
164
156
  --pds-color-interactive-reverse-link-default: #0f62fe;
165
- --pds-color-interactive-reverse-link-hover: #654bd5;
166
- --pds-color-interactive-reverse-link-visited: #654bd5;
167
- --pds-color-link-cta-active: #d0c6ff;
168
- --pds-color-link-cta-default: #8a70ff;
169
- --pds-color-link-cta-hover: #ad9bff;
170
- --pds-color-menu-background: #282839;
171
- --pds-color-menu-item-background-active: #858299;
172
- --pds-color-menu-item-background-default: #282839;
173
- --pds-color-menu-item-background-hover: #504e62;
174
- --pds-color-menu-item-description-text: #a6a3b4;
175
- --pds-color-menu-item-foreground: #ffffff;
176
- --pds-color-menu-item-heading-text: #a6a3b4;
157
+ --pds-color-interactive-reverse-link-hover: #4f32ce;
158
+ --pds-color-interactive-reverse-link-visited: #4f32ce;
177
159
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
178
- --pds-color-panel-critical-border: #ef5c48;
179
- --pds-color-panel-default-background: var(--pds-color-background-default);
180
- --pds-color-panel-default-border: var(--pds-color-border-default);
181
160
  --pds-color-panel-sunken-background: #121219;
182
161
  --pds-color-partner-bitbucket: #004dc0;
183
162
  --pds-color-partner-drupal: #009cde;
@@ -201,19 +180,22 @@
201
180
  --pds-color-semantic-success-foreground: #2abb7f;
202
181
  --pds-color-semantic-warning-background: #3d2e00;
203
182
  --pds-color-semantic-warning-foreground: #cf9f02;
204
- --pds-color-side-nav-background-hover: #282839;
205
183
  --pds-color-social-rss: #f3763a;
206
- --pds-color-stepper-completed: #8a70ff;
207
- --pds-color-stepper-current: #8a70ff;
208
- --pds-color-stepper-default: #858299;
209
- --pds-color-stepper-error: #ef5c48;
184
+ --pds-color-status-critical-background: #391813;
185
+ --pds-color-status-critical-foreground: #ef5c48;
186
+ --pds-color-status-discovery-background: #231c3f;
187
+ --pds-color-status-discovery-foreground: #8f7ee7;
188
+ --pds-color-status-info-background: #082145;
189
+ --pds-color-status-info-foreground: #388bff;
190
+ --pds-color-status-success-background: #133527;
191
+ --pds-color-status-success-foreground: #2abb7f;
192
+ --pds-color-status-warning-background: #3d2e00;
193
+ --pds-color-status-warning-foreground: #cf9f02;
210
194
  --pds-color-strength-fair: #cf9f02;
211
195
  --pds-color-strength-strong: #2abb7f;
212
196
  --pds-color-strength-very-weak: #a6a3b4;
213
197
  --pds-color-strength-weak: #ef5c48;
214
- --pds-color-table-sort-arrow-active: #8a70ff;
215
- --pds-color-table-sort-arrow-inactive: #a6a3b4;
216
- --pds-color-tabs-accent: #ad9bff;
198
+ --pds-color-tabs-accent: #8a70ff;
217
199
  --pds-color-tag-1-background: #ded8fa;
218
200
  --pds-color-tag-1-foreground: #5c4fac;
219
201
  --pds-color-tag-10-background: #d0dffc;
@@ -254,18 +236,10 @@
254
236
  --pds-color-tag-8-foreground: #9a4e1c;
255
237
  --pds-color-tag-9-background: #ceecf9;
256
238
  --pds-color-tag-9-foreground: #366880;
257
- --pds-color-text-default: var(--pds-color-foreground-default);
239
+ --pds-color-text-default: #ffffff;
258
240
  --pds-color-text-default-secondary: #a6a3b4;
259
- --pds-color-text-reverse: var(--pds-color-foreground-reverse);
260
- --pds-color-tile-background-active: #858299;
261
- --pds-color-tile-background-hover: #504e62;
262
- --pds-color-tile-separator: #504e62;
263
- --pds-color-toggle-button-background-off: #504e62;
264
- --pds-color-toggle-button-foreground-off: #e7e7eb;
265
- --pds-color-tooltip-background: #a6a3b4;
266
- --pds-color-tooltip-text: #121219;
267
- --pds-color-tooltip-trigger-icon-critical: #ef5c48;
268
- --pds-color-tooltip-trigger-icon-default: #e7e7eb;
241
+ --pds-color-text-reverse: #1d1d29;
242
+ --pds-color-utility-neutral: #858299;
269
243
  --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
270
244
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
271
245
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -10,54 +10,56 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-background-brand-secondary: #dfd8f5;
14
13
  --pds-color-background-default: #ffffff;
15
- --pds-color-background-default-secondary: #f8f8f8;
14
+ --pds-color-background-default-secondary: #f4f4f4;
16
15
  --pds-color-background-reverse: #23232d;
17
- --pds-color-badge-indicator-brand-background: #5e45cf;
16
+ --pds-color-badge-indicator-brand-background: #4f32ce;
18
17
  --pds-color-badge-indicator-brand-foreground: #ffffff;
19
18
  --pds-color-badge-indicator-critical-background: #ca3521;
20
19
  --pds-color-badge-indicator-critical-foreground: #ffffff;
21
20
  --pds-color-badge-indicator-diamond-background: #cfe1fc;
22
21
  --pds-color-badge-indicator-diamond-foreground: #035ad3;
23
22
  --pds-color-badge-indicator-gold-background: #ffe668;
24
- --pds-color-badge-indicator-gold-foreground: #705e00;
23
+ --pds-color-badge-indicator-gold-foreground: #726009;
25
24
  --pds-color-badge-indicator-info-background: #1d7afc;
26
25
  --pds-color-badge-indicator-info-foreground: #ffffff;
27
- --pds-color-badge-indicator-neutral-background: #6d6d78;
26
+ --pds-color-badge-indicator-neutral-background: #6a6e7a;
28
27
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
29
- --pds-color-badge-indicator-platinum-background: #dfd8f5;
30
- --pds-color-badge-indicator-platinum-foreground: #3017a1;
31
- --pds-color-badge-indicator-silver-background: #cfcfd3;
28
+ --pds-color-badge-indicator-platinum-background: #e2dff5;
29
+ --pds-color-badge-indicator-platinum-foreground: #4f32ce;
30
+ --pds-color-badge-indicator-silver-background: #c3c5c9;
32
31
  --pds-color-badge-indicator-silver-foreground: #23232d;
33
32
  --pds-color-badge-indicator-success-background: #218c5f;
34
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
35
34
  --pds-color-badge-indicator-warning-background: #d97008;
36
35
  --pds-color-badge-indicator-warning-foreground: #ffffff;
37
36
  --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
38
- --pds-color-badge-status-dot-default: #cfcfd3;
39
- --pds-color-badge-status-dot-disabled: #cfcfd3;
37
+ --pds-color-badge-status-dot-default: #c3c5c9;
38
+ --pds-color-badge-status-dot-disabled: #c3c5c9;
40
39
  --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
41
- --pds-color-badge-status-dot-frozen: #dfd8f5;
40
+ --pds-color-badge-status-dot-frozen: #c1b9ec;
42
41
  --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
43
42
  --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
44
43
  --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
45
44
  --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
46
45
  --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
47
- --pds-color-badge-status-neutral-label: var(--pds-color-text-default-secondary);
46
+ --pds-color-badge-status-neutral-label: var(--pds-color-foreground-default-secondary);
48
47
  --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
49
48
  --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
50
- --pds-color-badge-status-reverse-label: var(--pds-color-text-reverse);
49
+ --pds-color-badge-status-reverse-label: var(--pds-color-foreground-reverse);
51
50
  --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
52
51
  --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
53
- --pds-color-badge-status-transparent-label: var(--pds-color-text-default-secondary);
52
+ --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
54
53
  --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
55
54
  --pds-color-banner-critical-foreground: #ffffff;
56
55
  --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
57
56
  --pds-color-banner-info-foreground: #ffffff;
58
57
  --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
59
58
  --pds-color-banner-warning-foreground: #23232d;
60
- --pds-color-border-default: rgba(0, 0, 0, 0.11);
59
+ --pds-color-border-brand: #e2dff5;
60
+ --pds-color-border-default: #e3e4e5;
61
+ --pds-color-border-input: #c3c5c9;
62
+ --pds-color-border-separator: #c3c5c9;
61
63
  --pds-color-brand-accent-100: #ffe5f6;
62
64
  --pds-color-brand-accent-200: #ff99dc;
63
65
  --pds-color-brand-accent-300: #ff4cc3;
@@ -65,36 +67,34 @@
65
67
  --pds-color-brand-accent-500: #9a0066;
66
68
  --pds-color-brand-accent-600: #560039;
67
69
  --pds-color-brand-accent-default: #de0093;
68
- --pds-color-brand-primary-100: #fffbe9;
69
- --pds-color-brand-primary-200: #fff1a9;
70
- --pds-color-brand-primary-300: #ffe668;
71
- --pds-color-brand-primary-400: #ffdc28;
72
- --pds-color-brand-primary-500: #ddbd16;
73
- --pds-color-brand-primary-600: #705e00;
74
- --pds-color-brand-primary-default: #ffdc28;
75
- --pds-color-brand-secondary-100: #f0edfb;
76
- --pds-color-brand-secondary-200: #dfd8f5;
77
- --pds-color-brand-secondary-300: #5e45cf;
78
- --pds-color-brand-secondary-400: #3017a1;
79
- --pds-color-brand-secondary-500: #200c7f;
80
- --pds-color-brand-secondary-default: #3017a1;
81
- --pds-color-breadcrumb-link: var(--pds-color-interactive-link-default);
82
- --pds-color-breadcrumb-separator: #cfcfd3;
83
- --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
84
- --pds-color-button-brand-background-active: #ddbd16;
70
+ --pds-color-brand-primary-100: #f5f5fa;
71
+ --pds-color-brand-primary-200: #e2dff5;
72
+ --pds-color-brand-primary-300: #c1b9ec;
73
+ --pds-color-brand-primary-400: #4f32ce;
74
+ --pds-color-brand-primary-500: #3017a1;
75
+ --pds-color-brand-primary-600: #12026f;
76
+ --pds-color-brand-primary-default: #4f32ce;
77
+ --pds-color-brand-secondary-100: #fffbe9;
78
+ --pds-color-brand-secondary-200: #fff1a9;
79
+ --pds-color-brand-secondary-300: #ffe668;
80
+ --pds-color-brand-secondary-400: #ffdc28;
81
+ --pds-color-brand-secondary-500: #ddbd16;
82
+ --pds-color-brand-secondary-600: #726009;
83
+ --pds-color-brand-secondary-default: #ffdc28;
84
+ --pds-color-button-brand-background-active: #726009;
85
85
  --pds-color-button-brand-background-default: #ffdc28;
86
- --pds-color-button-brand-background-hover: #ffe668;
87
- --pds-color-button-brand-border-active: #ddbd16;
86
+ --pds-color-button-brand-background-hover: #ddbd16;
87
+ --pds-color-button-brand-border-active: #726009;
88
88
  --pds-color-button-brand-border-default: #ffdc28;
89
- --pds-color-button-brand-border-hover: #ffe668;
89
+ --pds-color-button-brand-border-hover: #ddbd16;
90
90
  --pds-color-button-brand-foreground-active: #23232d;
91
91
  --pds-color-button-brand-foreground-default: #23232d;
92
92
  --pds-color-button-brand-foreground-hover: #23232d;
93
- --pds-color-button-brand-secondary-background-active: #f1f1f1;
93
+ --pds-color-button-brand-secondary-background-active: #e3e4e5;
94
94
  --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
95
- --pds-color-button-brand-secondary-background-hover: #f8f8f8;
95
+ --pds-color-button-brand-secondary-background-hover: #f4f4f4;
96
96
  --pds-color-button-brand-secondary-border-active: #23232d;
97
- --pds-color-button-brand-secondary-border-default: #6d6d78;
97
+ --pds-color-button-brand-secondary-border-default: #6a6e7a;
98
98
  --pds-color-button-brand-secondary-border-hover: #23232d;
99
99
  --pds-color-button-brand-secondary-foreground-active: #23232d;
100
100
  --pds-color-button-brand-secondary-foreground-default: #23232d;
@@ -111,45 +111,54 @@
111
111
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
112
112
  --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
113
113
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
114
- --pds-color-button-primary-background-active: #200c7f;
115
- --pds-color-button-primary-background-default: #3017a1;
116
- --pds-color-button-primary-background-hover: #5e45cf;
117
- --pds-color-button-primary-border-active: #200c7f;
118
- --pds-color-button-primary-border-default: #3017a1;
119
- --pds-color-button-primary-border-hover: #5e45cf;
114
+ --pds-color-button-primary-background-active: #12026f;
115
+ --pds-color-button-primary-background-default: #4f32ce;
116
+ --pds-color-button-primary-background-hover: #3017a1;
117
+ --pds-color-button-primary-border-active: #12026f;
118
+ --pds-color-button-primary-border-default: #4f32ce;
119
+ --pds-color-button-primary-border-hover: #3017a1;
120
120
  --pds-color-button-primary-foreground-active: #ffffff;
121
121
  --pds-color-button-primary-foreground-default: #ffffff;
122
122
  --pds-color-button-primary-foreground-hover: #ffffff;
123
- --pds-color-button-secondary-background-active: #dfd8f5;
123
+ --pds-color-button-secondary-background-active: #f5f5fa;
124
124
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
125
- --pds-color-button-secondary-background-hover: #f0edfb;
126
- --pds-color-button-secondary-border-active: #200c7f;
127
- --pds-color-button-secondary-border-default: #3017a1;
128
- --pds-color-button-secondary-border-hover: #5e45cf;
129
- --pds-color-button-secondary-foreground-active: #200c7f;
130
- --pds-color-button-secondary-foreground-default: #3017a1;
131
- --pds-color-button-secondary-foreground-hover: #3017a1;
125
+ --pds-color-button-secondary-background-hover: #f5f5fa;
126
+ --pds-color-button-secondary-border-active: #3017a1;
127
+ --pds-color-button-secondary-border-default: #4f32ce;
128
+ --pds-color-button-secondary-border-hover: #4f32ce;
129
+ --pds-color-button-secondary-foreground-active: #3017a1;
130
+ --pds-color-button-secondary-foreground-default: #4f32ce;
131
+ --pds-color-button-secondary-foreground-hover: #4f32ce;
132
132
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
133
133
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
134
- --pds-color-button-subtle-foreground-active: #200c7f;
135
- --pds-color-button-subtle-foreground-default: #3017a1;
136
- --pds-color-button-subtle-foreground-hover: #5e45cf;
137
- --pds-color-card-border: var(--pds-color-border-default);
138
- --pds-color-code-inline-background: #f0edfb;
139
- --pds-color-code-inline-border: #dfd8f5;
134
+ --pds-color-button-subtle-foreground-active: #12026f;
135
+ --pds-color-button-subtle-foreground-default: #4f32ce;
136
+ --pds-color-button-subtle-foreground-hover: #3017a1;
137
+ --pds-color-code-inline-background: #f5f5fa;
138
+ --pds-color-code-inline-border: #e2dff5;
140
139
  --pds-color-code-inline-text: #000000;
141
140
  --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
141
+ --pds-color-dashboard-nav-background-admin: #edecf8;
142
142
  --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
143
143
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
144
- --pds-color-dashboard-nav-item-background-hover: #e8e8e9;
144
+ --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
145
145
  --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
146
146
  --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
147
147
  --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
148
148
  --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
149
149
  --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
150
- --pds-color-expansion-panel-hover: #f1f1f1;
151
- --pds-color-expansion-panel-open: #f1f1f1;
150
+ --pds-color-dropdown-background: var(--pds-color-background-default);
151
+ --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
152
+ --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
153
+ --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
154
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
155
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
156
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
157
+ --pds-color-dropdown-top-border: #dfdfdf;
158
+ --pds-color-expansion-panel-hover: #f4f4f4;
159
+ --pds-color-expansion-panel-open: #f4f4f4;
152
160
  --pds-color-foreground-default: #23232d;
161
+ --pds-color-foreground-default-secondary: #6a6e7a;
153
162
  --pds-color-foreground-reverse: #ffffff;
154
163
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
155
164
  --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
@@ -178,69 +187,54 @@
178
187
  --pds-color-gradient-pastel-1: linear-gradient(175deg, #DFD8F55C 15%, #FFFFFF00 80%);
179
188
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
180
189
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
181
- --pds-color-icon-button-critical-background-active: #fcc5be;
182
- --pds-color-icon-button-critical-background-default: rgba(0, 0, 0, 0);
183
- --pds-color-icon-button-critical-background-hover: #ffedeb;
184
- --pds-color-icon-button-critical-foreground-default: #ca3521;
185
- --pds-color-icon-button-standard-background-active: #cfcfd3;
186
- --pds-color-icon-button-standard-background-default: rgba(0, 0, 0, 0);
187
- --pds-color-icon-button-standard-background-hover: #f1f1f1;
188
- --pds-color-icon-button-standard-foreground-default: #23232d;
189
- --pds-color-input-action-background-hover: #f8f8f8;
190
190
  --pds-color-input-background-critical: #ffedeb;
191
191
  --pds-color-input-background-default: #ffffff;
192
- --pds-color-input-background-hover: #f0edfb;
192
+ --pds-color-input-background-hover: #fffbe9;
193
193
  --pds-color-input-border-critical: #ca3521;
194
- --pds-color-input-border-default: #cfcfd3;
195
- --pds-color-input-border-hover: #5e45cf;
194
+ --pds-color-input-border-default: #c3c5c9;
196
195
  --pds-color-input-border-success: #218c5f;
197
196
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
198
197
  --pds-color-input-checked-foreground: #ffffff;
199
- --pds-color-input-file-upload-button-background-default: #f1f1f1;
200
- --pds-color-input-file-upload-button-background-hover: #e6e6e7;
198
+ --pds-color-input-file-upload-button-background-default: #f4f4f4;
199
+ --pds-color-input-file-upload-button-background-hover: #e3e4e5;
201
200
  --pds-color-input-foreground-critical: #ca3521;
202
201
  --pds-color-input-foreground-default: #23232d;
203
202
  --pds-color-input-foreground-success: #218c5f;
204
- --pds-color-input-placeholder-text: #6d6d78;
205
- --pds-color-input-toggle-switch-icon: #ffffff;
206
- --pds-color-input-toggle-switch-off: #6d6d78;
207
- --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
203
+ --pds-color-input-placeholder-text: #6a6e7a;
204
+ --pds-color-input-switch-icon: var(--pds-color-foreground-reverse);
205
+ --pds-color-input-switch-off: #6a6e7a;
206
+ --pds-color-input-switch-on: var(--pds-color-semantic-info-foreground);
207
+ --pds-color-interactive-background-active: #e3e4e5;
208
+ --pds-color-interactive-background-hover: #f4f4f4;
208
209
  --pds-color-interactive-focus: #0f62fe;
209
210
  --pds-color-interactive-link-active: #3017a1;
210
211
  --pds-color-interactive-link-default: #0f62fe;
211
- --pds-color-interactive-link-hover: #5e45cf;
212
- --pds-color-interactive-link-visited: #5e45cf;
212
+ --pds-color-interactive-link-hover: #4f32ce;
213
+ --pds-color-interactive-link-visited: #4f32ce;
213
214
  --pds-color-interactive-reverse-focus: #36a3ff;
214
215
  --pds-color-interactive-reverse-link-active: #ad9bff;
215
216
  --pds-color-interactive-reverse-link-default: #36a3ff;
216
217
  --pds-color-interactive-reverse-link-hover: #8a70ff;
217
218
  --pds-color-interactive-reverse-link-visited: #8a70ff;
218
- --pds-color-link-cta-active: #200c7f;
219
- --pds-color-link-cta-default: #3017a1;
220
- --pds-color-link-cta-hover: #5e45cf;
221
- --pds-color-logo-carousel-background: #5e45cf;
222
- --pds-color-logo-carousel-foreground: var(--pds-color-foreground-reverse);
223
- --pds-color-menu-background: #ffffff;
224
- --pds-color-menu-item-background-active: #f1f1f1;
225
- --pds-color-menu-item-background-default: #ffffff;
226
- --pds-color-menu-item-background-hover: #f1f1f1;
227
- --pds-color-menu-item-description-text: #6d6d78;
228
- --pds-color-menu-item-foreground: #23232d;
229
- --pds-color-menu-item-heading-text: #6d6d78;
219
+ --pds-color-nav-item-default-foreground-active: #4f32ce;
220
+ --pds-color-nav-item-default-foreground-hover: #4f32ce;
221
+ --pds-color-nav-item-reverse-foreground-active: #e2dff5;
222
+ --pds-color-nav-item-reverse-foreground-hover: #e2dff5;
223
+ --pds-color-nav-trigger-default: #6a6e7a;
224
+ --pds-color-nav-trigger-open: #4f32ce;
230
225
  --pds-color-neutral-000: #ffffff;
231
- --pds-color-neutral-100: #f8f8f8;
232
- --pds-color-neutral-200: #f1f1f1;
233
- --pds-color-neutral-300: #cfcfd3;
234
- --pds-color-neutral-400: #6d6d78;
226
+ --pds-color-neutral-100: #f4f4f4;
227
+ --pds-color-neutral-200: #e3e4e5;
228
+ --pds-color-neutral-300: #c3c5c9;
229
+ --pds-color-neutral-400: #6a6e7a;
235
230
  --pds-color-neutral-500: #23232d;
231
+ --pds-color-neutral-600: #000000;
236
232
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
237
- --pds-color-pager-background-active: #f0edfb;
238
- --pds-color-pager-background-hover: #f1f1f1;
239
- --pds-color-pager-foreground-active: #5e45cf;
240
- --pds-color-panel-critical-border: #ca3521;
241
- --pds-color-panel-default-background: var(--pds-color-background-default);
242
- --pds-color-panel-default-border: var(--pds-color-border-default);
243
- --pds-color-panel-sunken-background: #f1f1f1;
233
+ --pds-color-pager-background-active: #e2dff5;
234
+ --pds-color-pager-background-hover: var(--pds-color-interactive-background-hover);
235
+ --pds-color-pager-foreground-active: var(--pds-color-interactive-link-hover);
236
+ --pds-color-pager-foreground-hover: var(--pds-color-interactive-link-hover);
237
+ --pds-color-panel-sunken-background: #f4f4f4;
244
238
  --pds-color-partner-bitbucket: #004dc0;
245
239
  --pds-color-partner-drupal: #009cde;
246
240
  --pds-color-partner-gatsby: #663399;
@@ -248,15 +242,13 @@
248
242
  --pds-color-partner-nextjs: #000000;
249
243
  --pds-color-partner-wordpress: #0073aa;
250
244
  --pds-color-progress-complete: #218c5f;
251
- --pds-color-progress-empty: #cfcfd3;
245
+ --pds-color-progress-empty: #c3c5c9;
252
246
  --pds-color-progress-partial: #1d7afc;
253
- --pds-color-segmented-button-background-active: #f0edfb;
247
+ --pds-color-segmented-button-background-active: #f5f5fa;
254
248
  --pds-color-segmented-button-background-default: #ffffff;
255
- --pds-color-segmented-button-background-hover: #f8f8f8;
256
- --pds-color-segmented-button-border-active: #3017a1;
257
- --pds-color-segmented-button-border-default: #cfcfd3;
258
- --pds-color-segmented-button-foreground-active: #3017a1;
259
- --pds-color-segmented-button-foreground-default: #6d6d78;
249
+ --pds-color-segmented-button-border-active: #4f32ce;
250
+ --pds-color-segmented-button-foreground-active: #4f32ce;
251
+ --pds-color-segmented-button-foreground-default: #6a6e7a;
260
252
  --pds-color-semantic-critical-background: #ffedeb;
261
253
  --pds-color-semantic-critical-foreground: #ca3521;
262
254
  --pds-color-semantic-critical-utility: #f35945;
@@ -265,27 +257,32 @@
265
257
  --pds-color-semantic-discovery-foreground: #8270db;
266
258
  --pds-color-semantic-info-background: #e9f2ff;
267
259
  --pds-color-semantic-info-foreground: #1d7afc;
268
- --pds-color-semantic-neutral-background: #cfcfd3;
260
+ --pds-color-semantic-neutral-background: #c3c5c9;
269
261
  --pds-color-semantic-neutral-foreground: #23232d;
270
- --pds-color-semantic-neutral-utility: #6d6d78;
262
+ --pds-color-semantic-neutral-utility: #6a6e7a;
271
263
  --pds-color-semantic-success-background: #e3fcef;
272
264
  --pds-color-semantic-success-foreground: #218c5f;
273
265
  --pds-color-semantic-success-utility: #35ae7b;
274
266
  --pds-color-semantic-warning-background: #fff7d6;
275
267
  --pds-color-semantic-warning-foreground: #d97008;
276
- --pds-color-side-nav-background-hover: #f0edfb;
277
268
  --pds-color-social-rss: #f26522;
278
- --pds-color-stepper-completed: #3017a1;
279
- --pds-color-stepper-current: #3017a1;
280
- --pds-color-stepper-default: #cfcfd3;
281
- --pds-color-stepper-error: #ca3521;
269
+ --pds-color-status-critical-background: #ffedeb;
270
+ --pds-color-status-critical-foreground: #ca3521;
271
+ --pds-color-status-critical-utility: #f35945;
272
+ --pds-color-status-discovery-background: #eae6ff;
273
+ --pds-color-status-discovery-foreground: #8270db;
274
+ --pds-color-status-info-background: #e9f2ff;
275
+ --pds-color-status-info-foreground: #1d7afc;
276
+ --pds-color-status-success-background: #e3fcef;
277
+ --pds-color-status-success-foreground: #218c5f;
278
+ --pds-color-status-success-utility: #35ae7b;
279
+ --pds-color-status-warning-background: #fff7d6;
280
+ --pds-color-status-warning-foreground: #d97008;
282
281
  --pds-color-strength-fair: #d97008;
283
282
  --pds-color-strength-strong: #218c5f;
284
- --pds-color-strength-very-weak: #cfcfd3;
283
+ --pds-color-strength-very-weak: #c3c5c9;
285
284
  --pds-color-strength-weak: #ca3521;
286
- --pds-color-table-sort-arrow-active: #5e45cf;
287
- --pds-color-table-sort-arrow-inactive: #cfcfd3;
288
- --pds-color-tabs-accent: #5e45cf;
285
+ --pds-color-tabs-accent: #4f32ce;
289
286
  --pds-color-tag-1-background: #ded8fa;
290
287
  --pds-color-tag-1-foreground: #5c4fac;
291
288
  --pds-color-tag-10-background: #d0dffc;
@@ -326,18 +323,10 @@
326
323
  --pds-color-tag-8-foreground: #9a4e1c;
327
324
  --pds-color-tag-9-background: #ceecf9;
328
325
  --pds-color-tag-9-foreground: #366880;
329
- --pds-color-text-default: var(--pds-color-foreground-default);
330
- --pds-color-text-default-secondary: #6d6d78;
331
- --pds-color-text-reverse: var(--pds-color-foreground-reverse);
332
- --pds-color-tile-background-active: #f1f1f1;
333
- --pds-color-tile-background-hover: #f8f8f8;
334
- --pds-color-tile-separator: #cfcfd3;
335
- --pds-color-toggle-button-background-off: #f1f1f1;
336
- --pds-color-toggle-button-foreground-off: #6d6d78;
337
- --pds-color-tooltip-background: #23232d;
338
- --pds-color-tooltip-text: #ffffff;
339
- --pds-color-tooltip-trigger-icon-critical: #ca3521;
340
- --pds-color-tooltip-trigger-icon-default: #23232d;
326
+ --pds-color-text-default: #23232d;
327
+ --pds-color-text-default-secondary: #6a6e7a;
328
+ --pds-color-text-reverse: #ffffff;
329
+ --pds-color-utility-neutral: #c3c5c9;
341
330
  --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
342
331
  --pds-elevation-dropdown: 0px 1px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
343
332
  --pds-elevation-overlay: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);