@pantheon-systems/pds-design-tokens 1.0.0-dev.147 → 1.0.0-dev.149

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 (8) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +8 -65
  2. package/build/css/pds-design-tokens-light-mode.css +33 -85
  3. package/build/css/pds-design-tokens.css +10 -3
  4. package/build/figma/pds-design-tokens-figma.json +6593 -9358
  5. package/build/json/pds-design-tokens-dark-mode.json +2477 -4022
  6. package/build/json/pds-design-tokens-light-mode.json +3217 -4613
  7. package/build/json/pds-design-tokens.json +181 -18
  8. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -33,23 +33,6 @@
33
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
34
34
  --pds-color-badge-indicator-warning-background: #cf9f02;
35
35
  --pds-color-badge-indicator-warning-foreground: #ffffff;
36
- --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
37
- --pds-color-badge-status-dot-default: #858299;
38
- --pds-color-badge-status-dot-disabled: #858299;
39
- --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
40
- --pds-color-badge-status-dot-frozen: #ad9bff;
41
- --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
42
- --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
43
- --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
44
- --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
45
- --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
46
- --pds-color-badge-status-neutral-label: var(--pds-color-foreground-default-secondary);
47
- --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
48
- --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
49
- --pds-color-badge-status-reverse-label: var(--pds-color-foreground-reverse);
50
- --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
51
- --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
52
- --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
53
36
  --pds-color-banner-critical-background: #d34431;
54
37
  --pds-color-banner-critical-foreground: #ffffff;
55
38
  --pds-color-banner-info-background: #3575d0;
@@ -83,13 +66,13 @@
83
66
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
84
67
  --pds-color-button-critical-background-active: #4b2d28;
85
68
  --pds-color-button-critical-background-default: var(--pds-color-background-default);
86
- --pds-color-button-critical-background-hover: var(--pds-color-semantic-critical-background);
87
- --pds-color-button-critical-border-active: var(--pds-color-semantic-critical-foreground);
88
- --pds-color-button-critical-border-default: var(--pds-color-semantic-critical-foreground);
89
- --pds-color-button-critical-border-hover: var(--pds-color-semantic-critical-foreground);
90
- --pds-color-button-critical-foreground-active: var(--pds-color-semantic-critical-foreground);
91
- --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
92
- --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
69
+ --pds-color-button-critical-background-hover: var(--pds-color-status-critical-background);
70
+ --pds-color-button-critical-border-active: var(--pds-color-status-critical-foreground);
71
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
72
+ --pds-color-button-critical-border-hover: var(--pds-color-status-critical-foreground);
73
+ --pds-color-button-critical-foreground-active: var(--pds-color-status-critical-foreground);
74
+ --pds-color-button-critical-foreground-default: var(--pds-color-status-critical-foreground);
75
+ --pds-color-button-critical-foreground-hover: var(--pds-color-status-critical-foreground);
93
76
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
94
77
  --pds-color-button-navbar-foreground-default: #ffffff;
95
78
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
@@ -124,28 +107,10 @@
124
107
  --pds-color-foreground-default: #ffffff;
125
108
  --pds-color-foreground-default-secondary: #a6a3b4;
126
109
  --pds-color-foreground-reverse: #1d1d29;
127
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
128
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
129
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
130
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
131
- --pds-color-input-action-background-hover: #504e62;
132
- --pds-color-input-background-critical: #1d1d29;
133
- --pds-color-input-background-default: #1d1d29;
134
- --pds-color-input-background-hover: #282839;
135
- --pds-color-input-border-critical: #ef5c48;
136
- --pds-color-input-border-default: #858299;
137
- --pds-color-input-border-success: #2abb7f;
138
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
139
- --pds-color-input-checked-foreground: #ffffff;
110
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
140
111
  --pds-color-input-file-upload-button-background-default: #504e62;
141
112
  --pds-color-input-file-upload-button-background-hover: #3d3c4d;
142
- --pds-color-input-foreground-critical: #ef5c48;
143
- --pds-color-input-foreground-default: #ffffff;
144
- --pds-color-input-foreground-success: #2abb7f;
145
- --pds-color-input-placeholder-text: #a6a3b4;
146
113
  --pds-color-input-switch-icon: #ffffff;
147
- --pds-color-input-switch-off: #504e62;
148
- --pds-color-input-switch-on: var(--pds-color-interactive-focus);
149
114
  --pds-color-interactive-focus: #36a3ff;
150
115
  --pds-color-interactive-link-active: #ad9bff;
151
116
  --pds-color-interactive-link-default: #36a3ff;
@@ -168,22 +133,6 @@
168
133
  --pds-color-partner-gitlab: #ffedfb;
169
134
  --pds-color-partner-nextjs: #000000;
170
135
  --pds-color-partner-wordpress: #0073aa;
171
- --pds-color-progress-complete: #2abb7f;
172
- --pds-color-progress-empty: #a6a3b4;
173
- --pds-color-progress-partial: #388bff;
174
- --pds-color-semantic-critical-background: #391813;
175
- --pds-color-semantic-critical-foreground: #ef5c48;
176
- --pds-color-semantic-discovery-background: #231c3f;
177
- --pds-color-semantic-discovery-foreground: #8f7ee7;
178
- --pds-color-semantic-info-background: #082145;
179
- --pds-color-semantic-info-foreground: #388bff;
180
- --pds-color-semantic-neutral-background: #1d1d29;
181
- --pds-color-semantic-neutral-foreground: #a6a3b4;
182
- --pds-color-semantic-neutral-utility: #858299;
183
- --pds-color-semantic-success-background: #133527;
184
- --pds-color-semantic-success-foreground: #2abb7f;
185
- --pds-color-semantic-warning-background: #3d2e00;
186
- --pds-color-semantic-warning-foreground: #cf9f02;
187
136
  --pds-color-social-rss: #f3763a;
188
137
  --pds-color-status-critical-background: #391813;
189
138
  --pds-color-status-critical-foreground: #ef5c48;
@@ -195,11 +144,6 @@
195
144
  --pds-color-status-success-foreground: #2abb7f;
196
145
  --pds-color-status-warning-background: #3d2e00;
197
146
  --pds-color-status-warning-foreground: #cf9f02;
198
- --pds-color-strength-fair: #cf9f02;
199
- --pds-color-strength-strong: #2abb7f;
200
- --pds-color-strength-very-weak: #a6a3b4;
201
- --pds-color-strength-weak: #ef5c48;
202
- --pds-color-tabs-accent: #8a70ff;
203
147
  --pds-color-tag-1-background: #ded8fa;
204
148
  --pds-color-tag-1-foreground: #5c4fac;
205
149
  --pds-color-tag-10-background: #d0dffc;
@@ -243,7 +187,6 @@
243
187
  --pds-color-text-default: #ffffff;
244
188
  --pds-color-text-default-secondary: #a6a3b4;
245
189
  --pds-color-text-reverse: #1d1d29;
246
- --pds-color-utility-neutral: #858299;
247
190
  --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
248
191
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
249
192
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -15,13 +15,13 @@
15
15
  --pds-color-background-reverse: #23232d;
16
16
  --pds-color-badge-indicator-brand-background: #4f32ce;
17
17
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
- --pds-color-badge-indicator-critical-background: #ca3521;
18
+ --pds-color-badge-indicator-critical-background: #bc1c11;
19
19
  --pds-color-badge-indicator-critical-foreground: #ffffff;
20
- --pds-color-badge-indicator-diamond-background: #cfe1fc;
21
- --pds-color-badge-indicator-diamond-foreground: #035ad3;
20
+ --pds-color-badge-indicator-diamond-background: #d7edff;
21
+ --pds-color-badge-indicator-diamond-foreground: #0766c5;
22
22
  --pds-color-badge-indicator-gold-background: #ffe668;
23
23
  --pds-color-badge-indicator-gold-foreground: #726009;
24
- --pds-color-badge-indicator-info-background: #0074e8;
24
+ --pds-color-badge-indicator-info-background: #0875e1;
25
25
  --pds-color-badge-indicator-info-foreground: #ffffff;
26
26
  --pds-color-badge-indicator-neutral-background: #6a6e7a;
27
27
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
@@ -29,32 +29,15 @@
29
29
  --pds-color-badge-indicator-platinum-foreground: #4f32ce;
30
30
  --pds-color-badge-indicator-silver-background: #c3c5c9;
31
31
  --pds-color-badge-indicator-silver-foreground: #23232d;
32
- --pds-color-badge-indicator-success-background: #005f3e;
32
+ --pds-color-badge-indicator-success-background: #217a37;
33
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
34
- --pds-color-badge-indicator-warning-background: #bd5b00;
34
+ --pds-color-badge-indicator-warning-background: #b06300;
35
35
  --pds-color-badge-indicator-warning-foreground: #ffffff;
36
- --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
37
- --pds-color-badge-status-dot-default: #c3c5c9;
38
- --pds-color-badge-status-dot-disabled: #c3c5c9;
39
- --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
40
- --pds-color-badge-status-dot-frozen: #cbc2f0;
41
- --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
42
- --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
43
- --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
44
- --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
45
- --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
46
- --pds-color-badge-status-neutral-label: var(--pds-color-foreground-default-secondary);
47
- --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
48
- --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
49
- --pds-color-badge-status-reverse-label: var(--pds-color-foreground-reverse);
50
- --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
51
- --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
52
- --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
53
- --pds-color-banner-critical-background: #d34431;
36
+ --pds-color-banner-critical-background: #de2e21;
54
37
  --pds-color-banner-critical-foreground: #ffffff;
55
- --pds-color-banner-info-background: #3575d0;
38
+ --pds-color-banner-info-background: #0875e1;
56
39
  --pds-color-banner-info-foreground: #ffffff;
57
- --pds-color-banner-warning-background: #f5b730;
40
+ --pds-color-banner-warning-background: #ffa126;
58
41
  --pds-color-banner-warning-foreground: #23232d;
59
42
  --pds-color-border-brand: #e5e0f8;
60
43
  --pds-color-border-default: #e3e4e5;
@@ -101,13 +84,13 @@
101
84
  --pds-color-button-brand-secondary-foreground-hover: #23232d;
102
85
  --pds-color-button-critical-background-active: #ffdcd8;
103
86
  --pds-color-button-critical-background-default: var(--pds-color-background-default);
104
- --pds-color-button-critical-background-hover: var(--pds-color-semantic-critical-background);
87
+ --pds-color-button-critical-background-hover: var(--pds-color-status-critical-background);
105
88
  --pds-color-button-critical-border-active: #b52f1d;
106
- --pds-color-button-critical-border-default: var(--pds-color-semantic-critical-foreground);
107
- --pds-color-button-critical-border-hover: var(--pds-color-semantic-critical-foreground);
89
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
90
+ --pds-color-button-critical-border-hover: var(--pds-color-status-critical-foreground);
108
91
  --pds-color-button-critical-foreground-active: #b52f1d;
109
- --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
110
- --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
92
+ --pds-color-button-critical-foreground-default: var(--pds-color-status-critical-foreground);
93
+ --pds-color-button-critical-foreground-hover: var(--pds-color-status-critical-foreground);
111
94
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
112
95
  --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
113
96
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
@@ -160,7 +143,6 @@
160
143
  --pds-color-foreground-default: #23232d;
161
144
  --pds-color-foreground-default-secondary: #6a6e7a;
162
145
  --pds-color-foreground-reverse: #ffffff;
163
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
164
146
  --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
165
147
  --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
166
148
  --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
@@ -183,26 +165,10 @@
183
165
  --pds-color-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
184
166
  --pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
185
167
  --pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
186
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
187
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
188
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
189
- --pds-color-input-background-critical: #ffedeb;
190
- --pds-color-input-background-default: #ffffff;
191
- --pds-color-input-background-hover: #fffbe9;
192
- --pds-color-input-border-critical: #ca3521;
193
- --pds-color-input-border-default: #c3c5c9;
194
- --pds-color-input-border-success: #005f3e;
195
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
196
- --pds-color-input-checked-foreground: #ffffff;
168
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
197
169
  --pds-color-input-file-upload-button-background-default: #f4f4f4;
198
170
  --pds-color-input-file-upload-button-background-hover: #e3e4e5;
199
- --pds-color-input-foreground-critical: #ca3521;
200
- --pds-color-input-foreground-default: #23232d;
201
- --pds-color-input-foreground-success: #005f3e;
202
- --pds-color-input-placeholder-text: #6a6e7a;
203
- --pds-color-input-switch-icon: var(--pds-color-foreground-reverse);
204
- --pds-color-input-switch-off: #6a6e7a;
205
- --pds-color-input-switch-on: var(--pds-color-semantic-info-foreground);
171
+ --pds-color-input-switch-icon: #ffffff;
206
172
  --pds-color-interactive-background-active: #e3e4e5;
207
173
  --pds-color-interactive-background-hover: #f4f4f4;
208
174
  --pds-color-interactive-focus: #0f62fe;
@@ -240,47 +206,30 @@
240
206
  --pds-color-partner-gitlab: #ffedfb;
241
207
  --pds-color-partner-nextjs: #000000;
242
208
  --pds-color-partner-wordpress: #0073aa;
243
- --pds-color-progress-complete: #005f3e;
244
- --pds-color-progress-empty: #c3c5c9;
245
- --pds-color-progress-partial: #0074e8;
246
209
  --pds-color-segmented-button-background-active: #f4f3fc;
247
210
  --pds-color-segmented-button-background-default: #ffffff;
248
211
  --pds-color-segmented-button-border-active: #4f32ce;
249
212
  --pds-color-segmented-button-foreground-active: #4f32ce;
250
213
  --pds-color-segmented-button-foreground-default: #6a6e7a;
251
- --pds-color-semantic-critical-background: #ffedeb;
252
- --pds-color-semantic-critical-foreground: #ca3521;
253
- --pds-color-semantic-critical-utility: #f35945;
254
- --pds-color-semantic-discovery-background: #eae6ff;
255
- --pds-color-semantic-discovery-foreground: #8270db;
256
- --pds-color-semantic-info-background: #d7edff;
257
- --pds-color-semantic-info-foreground: #0074e8;
258
- --pds-color-semantic-neutral-background: #c3c5c9;
259
- --pds-color-semantic-neutral-foreground: #23232d;
260
- --pds-color-semantic-neutral-utility: #6a6e7a;
261
- --pds-color-semantic-success-background: #c3f9c2;
262
- --pds-color-semantic-success-foreground: #005f3e;
263
- --pds-color-semantic-success-utility: #35ae7b;
264
- --pds-color-semantic-warning-background: #ffe4c1;
265
- --pds-color-semantic-warning-foreground: #bd5b00;
266
214
  --pds-color-social-rss: #f26522;
267
- --pds-color-status-critical-background: #ffedeb;
268
- --pds-color-status-critical-foreground: #ca3521;
269
- --pds-color-status-critical-utility: #f35945;
270
- --pds-color-status-discovery-background: #eae6ff;
271
- --pds-color-status-discovery-foreground: #8270db;
215
+ --pds-color-status-critical-background: #ffefee;
216
+ --pds-color-status-critical-foreground: #bc1c11;
217
+ --pds-color-status-critical-utility: #de2e21;
218
+ --pds-color-status-discovery-background: #f0edff;
219
+ --pds-color-status-discovery-foreground: #8e74ff;
220
+ --pds-color-status-discovery-utility: #cfc5ff;
272
221
  --pds-color-status-info-background: #d7edff;
273
- --pds-color-status-info-foreground: #0074e8;
274
- --pds-color-status-success-background: #c3f9c2;
275
- --pds-color-status-success-foreground: #005f3e;
276
- --pds-color-status-success-utility: #35ae7b;
277
- --pds-color-status-warning-background: #ffe4c1;
278
- --pds-color-status-warning-foreground: #bd5b00;
279
- --pds-color-strength-fair: #bd5b00;
280
- --pds-color-strength-strong: #005f3e;
281
- --pds-color-strength-very-weak: #c3c5c9;
282
- --pds-color-strength-weak: #ca3521;
283
- --pds-color-tabs-accent: #4f32ce;
222
+ --pds-color-status-info-foreground: #0875e1;
223
+ --pds-color-status-info-utility: #a6d2ff;
224
+ --pds-color-status-neutral-background: #c3c5c9;
225
+ --pds-color-status-neutral-foreground: #23232d;
226
+ --pds-color-status-neutral-utility: #6a6e7a;
227
+ --pds-color-status-success-background: #ebfff0;
228
+ --pds-color-status-success-foreground: #217a37;
229
+ --pds-color-status-success-utility: #43c463;
230
+ --pds-color-status-warning-background: #ffeed9;
231
+ --pds-color-status-warning-foreground: #b06300;
232
+ --pds-color-status-warning-utility: #ffa126;
284
233
  --pds-color-tag-1-background: #ded8fa;
285
234
  --pds-color-tag-1-foreground: #5c4fac;
286
235
  --pds-color-tag-10-background: #d0dffc;
@@ -324,7 +273,6 @@
324
273
  --pds-color-text-default: #23232d;
325
274
  --pds-color-text-default-secondary: #6a6e7a;
326
275
  --pds-color-text-reverse: #ffffff;
327
- --pds-color-utility-neutral: #c3c5c9;
328
276
  --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
329
277
  --pds-elevation-card-default: var(--pds-elevation-raised);
330
278
  --pds-elevation-card-hover: var(--pds-elevation-active);
package/build/css/pds-design-tokens.css CHANGED
@@ -21,12 +21,19 @@
21
21
  --pds-animation-transition-default-timing-function: ease-in-out;
22
22
  --pds-animation-transition-dropdown-duration: 300ms;
23
23
  --pds-animation-transition-reveal-duration: 300ms;
24
+ --pds-border-offset-default: 1px;
25
+ --pds-border-offset-double: 2px;
26
+ --pds-border-offset-triple: 3px;
24
27
  --pds-border-radius-bar: 3.5rem;
28
+ --pds-border-radius-button: 0.1875rem;
25
29
  --pds-border-radius-container: 0.375rem;
26
30
  --pds-border-radius-default: 0.1875rem;
27
- --pds-border-width-default: 0.0625rem;
28
- --pds-border-width-outline: 0.125rem;
29
- --pds-border-width-stepper: 0.1875rem;
31
+ --pds-border-radius-input: 0.25rem;
32
+ --pds-border-width-default: 1px;
33
+ --pds-border-width-double: 2px;
34
+ --pds-border-width-outline: 1px;
35
+ --pds-border-width-stepper: 3px;
36
+ --pds-border-width-triple: 3px;
30
37
  --pds-container-max-width-narrow: 1024px;
31
38
  --pds-container-max-width-standard: 1200px;
32
39
  --pds-container-max-width-wide: 1440px;