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

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 +9 -5
  2. package/build/css/pds-design-tokens-light-mode.css +43 -43
  3. package/build/figma/pds-design-tokens-figma.json +1398 -1263
  4. package/build/json/pds-design-tokens-dark-mode.json +469 -474
  5. package/build/json/pds-design-tokens-light-mode.json +742 -870
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -50,11 +50,11 @@
50
50
  --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
51
51
  --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
52
52
  --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
53
- --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
53
+ --pds-color-banner-critical-background: #d34431;
54
54
  --pds-color-banner-critical-foreground: #ffffff;
55
- --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
55
+ --pds-color-banner-info-background: #3575d0;
56
56
  --pds-color-banner-info-foreground: #ffffff;
57
- --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
+ --pds-color-banner-warning-background: #f5b730;
58
58
  --pds-color-banner-warning-foreground: #121219;
59
59
  --pds-color-border-brand: #ad9bff;
60
60
  --pds-color-border-default: #504e62;
@@ -95,10 +95,10 @@
95
95
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
96
96
  --pds-color-button-primary-background-active: #4e39a8;
97
97
  --pds-color-button-primary-background-default: #4e39a8;
98
- --pds-color-button-primary-background-hover: #2a1a8a;
98
+ --pds-color-button-primary-background-hover: #2e1d78;
99
99
  --pds-color-button-primary-border-active: #4e39a8;
100
100
  --pds-color-button-primary-border-default: #4e39a8;
101
- --pds-color-button-primary-border-hover: #2a1a8a;
101
+ --pds-color-button-primary-border-hover: #2e1d78;
102
102
  --pds-color-button-primary-foreground-active: #ffffff;
103
103
  --pds-color-button-primary-foreground-default: #ffffff;
104
104
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -157,6 +157,10 @@
157
157
  --pds-color-interactive-reverse-link-hover: #4f32ce;
158
158
  --pds-color-interactive-reverse-link-visited: #4f32ce;
159
159
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
160
+ --pds-color-pagination-background-active: #2e1d78;
161
+ --pds-color-pagination-background-hover: #4e39a8;
162
+ --pds-color-pagination-foreground-active: #f3f0ff;
163
+ --pds-color-pagination-foreground-hover: #ffffff;
160
164
  --pds-color-panel-sunken-background: #121219;
161
165
  --pds-color-partner-bitbucket: #004dc0;
162
166
  --pds-color-partner-drupal: #009cde;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -21,23 +21,23 @@
21
21
  --pds-color-badge-indicator-diamond-foreground: #035ad3;
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: #1d7afc;
24
+ --pds-color-badge-indicator-info-background: #0074e8;
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;
28
- --pds-color-badge-indicator-platinum-background: #e2dff5;
28
+ --pds-color-badge-indicator-platinum-background: #e5e0f8;
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: #218c5f;
32
+ --pds-color-badge-indicator-success-background: #005f3e;
33
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
34
- --pds-color-badge-indicator-warning-background: #d97008;
34
+ --pds-color-badge-indicator-warning-background: #bd5b00;
35
35
  --pds-color-badge-indicator-warning-foreground: #ffffff;
36
36
  --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
37
37
  --pds-color-badge-status-dot-default: #c3c5c9;
38
38
  --pds-color-badge-status-dot-disabled: #c3c5c9;
39
39
  --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
40
- --pds-color-badge-status-dot-frozen: #c1b9ec;
40
+ --pds-color-badge-status-dot-frozen: #cbc2f0;
41
41
  --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
42
42
  --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
43
43
  --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
@@ -50,13 +50,13 @@
50
50
  --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
51
51
  --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
52
52
  --pds-color-badge-status-transparent-label: var(--pds-color-foreground-default-secondary);
53
- --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
53
+ --pds-color-banner-critical-background: #d34431;
54
54
  --pds-color-banner-critical-foreground: #ffffff;
55
- --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
55
+ --pds-color-banner-info-background: #3575d0;
56
56
  --pds-color-banner-info-foreground: #ffffff;
57
- --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
+ --pds-color-banner-warning-background: #f5b730;
58
58
  --pds-color-banner-warning-foreground: #23232d;
59
- --pds-color-border-brand: #e2dff5;
59
+ --pds-color-border-brand: #e5e0f8;
60
60
  --pds-color-border-default: #e3e4e5;
61
61
  --pds-color-border-input: #c3c5c9;
62
62
  --pds-color-border-separator: #c3c5c9;
@@ -67,9 +67,9 @@
67
67
  --pds-color-brand-accent-500: #9a0066;
68
68
  --pds-color-brand-accent-600: #560039;
69
69
  --pds-color-brand-accent-default: #de0093;
70
- --pds-color-brand-primary-100: #f5f5fa;
71
- --pds-color-brand-primary-200: #e2dff5;
72
- --pds-color-brand-primary-300: #c1b9ec;
70
+ --pds-color-brand-primary-100: #f4f3fc;
71
+ --pds-color-brand-primary-200: #e5e0f8;
72
+ --pds-color-brand-primary-300: #cbc2f0;
73
73
  --pds-color-brand-primary-400: #4f32ce;
74
74
  --pds-color-brand-primary-500: #3017a1;
75
75
  --pds-color-brand-primary-600: #12026f;
@@ -120,9 +120,9 @@
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: #f5f5fa;
123
+ --pds-color-button-secondary-background-active: #f4f3fc;
124
124
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
125
- --pds-color-button-secondary-background-hover: #f5f5fa;
125
+ --pds-color-button-secondary-background-hover: #f4f3fc;
126
126
  --pds-color-button-secondary-border-active: #3017a1;
127
127
  --pds-color-button-secondary-border-default: #4f32ce;
128
128
  --pds-color-button-secondary-border-hover: #4f32ce;
@@ -134,8 +134,8 @@
134
134
  --pds-color-button-subtle-foreground-active: #12026f;
135
135
  --pds-color-button-subtle-foreground-default: #4f32ce;
136
136
  --pds-color-button-subtle-foreground-hover: #3017a1;
137
- --pds-color-code-inline-background: #f5f5fa;
138
- --pds-color-code-inline-border: #e2dff5;
137
+ --pds-color-code-inline-background: #f4f3fc;
138
+ --pds-color-code-inline-border: #e5e0f8;
139
139
  --pds-color-code-inline-text: #000000;
140
140
  --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
141
141
  --pds-color-dashboard-nav-background-admin: #edecf8;
@@ -184,7 +184,6 @@
184
184
  --pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
185
185
  --pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
186
186
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
187
- --pds-color-gradient-pastel-1: linear-gradient(175deg, #DFD8F55C 15%, #FFFFFF00 80%);
188
187
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
189
188
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
190
189
  --pds-color-input-background-critical: #ffedeb;
@@ -192,14 +191,14 @@
192
191
  --pds-color-input-background-hover: #fffbe9;
193
192
  --pds-color-input-border-critical: #ca3521;
194
193
  --pds-color-input-border-default: #c3c5c9;
195
- --pds-color-input-border-success: #218c5f;
194
+ --pds-color-input-border-success: #005f3e;
196
195
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
197
196
  --pds-color-input-checked-foreground: #ffffff;
198
197
  --pds-color-input-file-upload-button-background-default: #f4f4f4;
199
198
  --pds-color-input-file-upload-button-background-hover: #e3e4e5;
200
199
  --pds-color-input-foreground-critical: #ca3521;
201
200
  --pds-color-input-foreground-default: #23232d;
202
- --pds-color-input-foreground-success: #218c5f;
201
+ --pds-color-input-foreground-success: #005f3e;
203
202
  --pds-color-input-placeholder-text: #6a6e7a;
204
203
  --pds-color-input-switch-icon: var(--pds-color-foreground-reverse);
205
204
  --pds-color-input-switch-off: #6a6e7a;
@@ -218,8 +217,8 @@
218
217
  --pds-color-interactive-reverse-link-visited: #8a70ff;
219
218
  --pds-color-nav-item-default-foreground-active: #4f32ce;
220
219
  --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;
220
+ --pds-color-nav-item-reverse-foreground-active: #e5e0f8;
221
+ --pds-color-nav-item-reverse-foreground-hover: #e5e0f8;
223
222
  --pds-color-nav-trigger-default: #6a6e7a;
224
223
  --pds-color-nav-trigger-open: #4f32ce;
225
224
  --pds-color-neutral-000: #ffffff;
@@ -230,10 +229,10 @@
230
229
  --pds-color-neutral-500: #23232d;
231
230
  --pds-color-neutral-600: #000000;
232
231
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
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);
232
+ --pds-color-pagination-background-active: #e5e0f8;
233
+ --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
234
+ --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
235
+ --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
237
236
  --pds-color-panel-sunken-background: #f4f4f4;
238
237
  --pds-color-partner-bitbucket: #004dc0;
239
238
  --pds-color-partner-drupal: #009cde;
@@ -241,10 +240,10 @@
241
240
  --pds-color-partner-gitlab: #ffedfb;
242
241
  --pds-color-partner-nextjs: #000000;
243
242
  --pds-color-partner-wordpress: #0073aa;
244
- --pds-color-progress-complete: #218c5f;
243
+ --pds-color-progress-complete: #005f3e;
245
244
  --pds-color-progress-empty: #c3c5c9;
246
- --pds-color-progress-partial: #1d7afc;
247
- --pds-color-segmented-button-background-active: #f5f5fa;
245
+ --pds-color-progress-partial: #0074e8;
246
+ --pds-color-segmented-button-background-active: #f4f3fc;
248
247
  --pds-color-segmented-button-background-default: #ffffff;
249
248
  --pds-color-segmented-button-border-active: #4f32ce;
250
249
  --pds-color-segmented-button-foreground-active: #4f32ce;
@@ -252,34 +251,33 @@
252
251
  --pds-color-semantic-critical-background: #ffedeb;
253
252
  --pds-color-semantic-critical-foreground: #ca3521;
254
253
  --pds-color-semantic-critical-utility: #f35945;
255
- --pds-color-semantic-critical-utility-light: #fcc5be;
256
254
  --pds-color-semantic-discovery-background: #eae6ff;
257
255
  --pds-color-semantic-discovery-foreground: #8270db;
258
- --pds-color-semantic-info-background: #e9f2ff;
259
- --pds-color-semantic-info-foreground: #1d7afc;
256
+ --pds-color-semantic-info-background: #d7edff;
257
+ --pds-color-semantic-info-foreground: #0074e8;
260
258
  --pds-color-semantic-neutral-background: #c3c5c9;
261
259
  --pds-color-semantic-neutral-foreground: #23232d;
262
260
  --pds-color-semantic-neutral-utility: #6a6e7a;
263
- --pds-color-semantic-success-background: #e3fcef;
264
- --pds-color-semantic-success-foreground: #218c5f;
261
+ --pds-color-semantic-success-background: #c3f9c2;
262
+ --pds-color-semantic-success-foreground: #005f3e;
265
263
  --pds-color-semantic-success-utility: #35ae7b;
266
- --pds-color-semantic-warning-background: #fff7d6;
267
- --pds-color-semantic-warning-foreground: #d97008;
264
+ --pds-color-semantic-warning-background: #ffe4c1;
265
+ --pds-color-semantic-warning-foreground: #bd5b00;
268
266
  --pds-color-social-rss: #f26522;
269
267
  --pds-color-status-critical-background: #ffedeb;
270
268
  --pds-color-status-critical-foreground: #ca3521;
271
269
  --pds-color-status-critical-utility: #f35945;
272
270
  --pds-color-status-discovery-background: #eae6ff;
273
271
  --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;
272
+ --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;
278
276
  --pds-color-status-success-utility: #35ae7b;
279
- --pds-color-status-warning-background: #fff7d6;
280
- --pds-color-status-warning-foreground: #d97008;
281
- --pds-color-strength-fair: #d97008;
282
- --pds-color-strength-strong: #218c5f;
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;
283
281
  --pds-color-strength-very-weak: #c3c5c9;
284
282
  --pds-color-strength-weak: #ca3521;
285
283
  --pds-color-tabs-accent: #4f32ce;
@@ -328,6 +326,8 @@
328
326
  --pds-color-text-reverse: #ffffff;
329
327
  --pds-color-utility-neutral: #c3c5c9;
330
328
  --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
329
+ --pds-elevation-card-default: var(--pds-elevation-raised);
330
+ --pds-elevation-card-hover: var(--pds-elevation-active);
331
331
  --pds-elevation-dropdown: 0px 1px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
332
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);
333
333
  --pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);