@pantheon-systems/pds-design-tokens 2.0.0-alpha.48 → 2.0.0-alpha.49

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 (4) hide show
  1. package/build/css/variables.dark.css +28 -17
  2. package/build/css/variables.light.css +32 -21
  3. package/build/figma/tokens.json +647 -391
  4. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -85,18 +85,14 @@
85
85
  --pds-color-datepicker-accent-foreground: oklch(0.6496 0.1590 270.95);
86
86
  --pds-color-datepicker-range-background: oklch(0.2000 0.0400 268.00);
87
87
  --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
88
- --pds-color-datepicker-selected-background: oklch(0.6496 0.1590 270.95);
88
+ --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
89
89
  --pds-color-datepicker-selected-foreground: oklch(0.2178 0 0);
90
- --pds-color-log-row-standard-background-default: oklch(0.9702 0 0);
91
- --pds-color-log-row-standard-background-hover: oklch(0.8452 0 0);
92
- --pds-color-log-row-warning-background-default: oklch(0.3111 0.0678 55.70);
93
- --pds-color-log-row-error-background-default: oklch(0.2550 0.0814 25.05);
94
90
  --pds-color-pagination-foreground-hover: oklch(1 0 0);
95
91
  --pds-color-pagination-foreground-active: oklch(0.9702 0 0);
96
92
  --pds-color-pagination-foreground-current: oklch(1 0 0);
97
93
  --pds-color-pagination-background-hover: oklch(0.2603 0 0);
98
94
  --pds-color-pagination-background-active: oklch(0.2000 0.0400 268.00);
99
- --pds-color-pagination-background-current: oklch(0.6496 0.1590 270.95);
95
+ --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
100
96
  --pds-color-panel-sunken-background: oklch(0.2603 0 0);
101
97
  --pds-color-expansion-panel-hover: oklch(0.2931 0 0);
102
98
  --pds-color-expansion-panel-open: oklch(0.2931 0 0);
@@ -169,6 +165,16 @@
169
165
  --pds-color-tag-info-solid-foreground: oklch(0.2178 0 0);
170
166
  --pds-color-tag-discovery-solid-background: oklch(0.7268 0.0778 307.70);
171
167
  --pds-color-tag-discovery-solid-foreground: oklch(0.2178 0 0);
168
+ --pds-color-tally-success-background: oklch(0.6402 0.1224 130.73);
169
+ --pds-color-tally-success-foreground: oklch(1.0000 0 0);
170
+ --pds-color-tally-warning-background: oklch(0.6419 0.1457 55.55);
171
+ --pds-color-tally-warning-foreground: oklch(1.0000 0 0);
172
+ --pds-color-tally-critical-background: oklch(0.5338 0.1771 25.54);
173
+ --pds-color-tally-critical-foreground: oklch(1.0000 0 0);
174
+ --pds-color-tally-info-background: oklch(0.5510 0.1014 242.56);
175
+ --pds-color-tally-info-foreground: oklch(1.0000 0 0);
176
+ --pds-color-tally-discovery-background: oklch(0.5200 0.1177 303.12);
177
+ --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
172
178
  --pds-color-surface-default: oklch(0.2178 0 0);
173
179
  --pds-color-surface-default-secondary: oklch(0.2603 0 0);
174
180
  --pds-color-surface-reverse: oklch(0.9702 0 0);
@@ -239,7 +245,7 @@
239
245
  --pds-color-split-button-primary-separator: oklch(0.8452 0 0);
240
246
  --pds-color-split-button-secondary-separator: oklch(0.4091 0 0);
241
247
  --pds-color-segmented-button-background-inactive: oklch(0.2931 0 0);
242
- --pds-color-segmented-button-background-active: oklch(0.8452 0 0);
248
+ --pds-color-segmented-button-background-active: oklch(0.5256 0.1988 268.04);
243
249
  --pds-color-segmented-button-foreground-inactive: var(--pds-color-foreground-default-secondary);
244
250
  --pds-color-segmented-button-foreground-active: var(--pds-color-foreground-reverse);
245
251
  --pds-color-category-ai-foreground: oklch(0.9559 0.0143 308.29);
@@ -323,26 +329,26 @@
323
329
  --pds-color-input-tag-foreground-hover: oklch(0.9702 0 0);
324
330
  --pds-color-input-tag-foreground-active: oklch(0.9702 0 0);
325
331
  --pds-color-input-tag-outline-active: oklch(0.6496 0.1590 270.95);
326
- --pds-color-interactive-background-hover: oklch(0.2603 0 0);
327
- --pds-color-interactive-background-active: oklch(0.2931 0 0);
328
332
  --pds-color-interactive-focus: oklch(0.6496 0.1590 270.95);
329
333
  --pds-color-interactive-link-default: oklch(0.6496 0.1590 270.95);
330
334
  --pds-color-interactive-link-hover: oklch(0.6707 0.1296 32.99);
331
335
  --pds-color-interactive-link-active: oklch(0.7480 0.1030 37.44);
332
336
  --pds-color-interactive-link-visited: oklch(0.6496 0.1590 270.95);
333
- --pds-color-interactive-ui-hover: oklch(0.6496 0.1590 270.95);
334
- --pds-color-interactive-ui-active: oklch(0.6496 0.1590 270.95);
335
- --pds-color-interactive-ui-current: oklch(0.6496 0.1590 270.95);
336
- --pds-color-interactive-ui-inactive: oklch(0.5991 0 0);
337
- --pds-color-interactive-ui-background-hover: oklch(0.2603 0 0);
338
- --pds-color-interactive-ui-background-active: oklch(0.2931 0 0);
339
- --pds-color-interactive-ui-background-selected: oklch(0.2000 0.0400 268.00);
337
+ --pds-color-interactive-foreground-current: oklch(0.6496 0.1590 270.95);
338
+ --pds-color-interactive-foreground-hover: oklch(0.6496 0.1590 270.95);
339
+ --pds-color-interactive-foreground-active: oklch(0.6496 0.1590 270.95);
340
+ --pds-color-interactive-foreground-inactive: oklch(0.5991 0 0);
341
+ --pds-color-interactive-background-current: oklch(0.5256 0.1988 268.04);
342
+ --pds-color-interactive-background-current-foreground: oklch(1.0000 0 0);
343
+ --pds-color-interactive-background-hover: oklch(0.2603 0 0);
344
+ --pds-color-interactive-background-active: oklch(0.2931 0 0);
345
+ --pds-color-interactive-background-selected: oklch(0.2000 0.0400 268.00);
340
346
  --pds-color-interactive-reverse-focus: oklch(0.5256 0.1988 268.04);
341
347
  --pds-color-interactive-reverse-link-default: oklch(0.5256 0.1988 268.04);
342
348
  --pds-color-interactive-reverse-link-hover: oklch(0.6015 0.1484 35.70);
343
349
  --pds-color-interactive-reverse-link-active: oklch(0.5093 0.1241 35.58);
344
350
  --pds-color-interactive-reverse-link-visited: oklch(0.5256 0.1988 268.04);
345
- --pds-color-interactive-reverse-ui-hover: oklch(0.5256 0.1988 268.04);
351
+ --pds-color-interactive-reverse-foreground-hover: oklch(0.5256 0.1988 268.04);
346
352
  --pds-color-nav-item-reverse-foreground-hover: oklch(0.5200 0.1177 303.12);
347
353
  --pds-color-nav-item-reverse-foreground-active: oklch(0.5200 0.1177 303.12);
348
354
  --pds-color-overlay: rgba(0, 0, 0, 0.45);
@@ -360,22 +366,27 @@
360
366
  --pds-color-status-success-fill: oklch(0.6402 0.1224 130.73);
361
367
  --pds-color-status-success-border: oklch(0.5670 0.1201 132.73);
362
368
  --pds-color-status-success-background: oklch(0.3746 0.0812 134.16);
369
+ --pds-color-status-success-background-hover: oklch(0.4733 0.1035 134.24);
363
370
  --pds-color-status-warning-foreground: oklch(0.8603 0.0782 67.73);
364
371
  --pds-color-status-warning-fill: oklch(0.7116 0.1405 61.04);
365
372
  --pds-color-status-warning-border: oklch(0.5428 0.1292 52.61);
366
373
  --pds-color-status-warning-background: oklch(0.3111 0.0678 55.70);
374
+ --pds-color-status-warning-background-hover: oklch(0.4323 0.1012 53.56);
367
375
  --pds-color-status-critical-foreground: oklch(0.8022 0.0731 18.80);
368
376
  --pds-color-status-critical-fill: oklch(0.5954 0.1582 23.19);
369
377
  --pds-color-status-critical-border: oklch(0.4501 0.1581 26.35);
370
378
  --pds-color-status-critical-background: oklch(0.2550 0.0814 25.05);
379
+ --pds-color-status-critical-background-hover: oklch(0.3541 0.1230 26.18);
371
380
  --pds-color-status-info-foreground: oklch(0.8372 0.0459 236.03);
372
381
  --pds-color-status-info-fill: oklch(0.6392 0.0968 238.41);
373
382
  --pds-color-status-info-border: oklch(0.4662 0.0924 245.48);
374
383
  --pds-color-status-info-background: oklch(0.2906 0.0644 249.78);
384
+ --pds-color-status-info-background-hover: oklch(0.3751 0.0783 246.74);
375
385
  --pds-color-status-discovery-foreground: oklch(0.8272 0.0507 309.02);
376
386
  --pds-color-status-discovery-fill: oklch(0.6127 0.1092 305.74);
377
387
  --pds-color-status-discovery-border: oklch(0.4277 0.1065 303.89);
378
388
  --pds-color-status-discovery-background: oklch(0.2671 0.0855 295.38);
389
+ --pds-color-status-discovery-background-hover: oklch(0.3388 0.0952 301.67);
379
390
  --pds-color-status-neutral-background: oklch(0.3329 0 0);
380
391
  --pds-color-status-neutral-indicator: oklch(0.8452 0 0);
381
392
  --pds-color-status-frozen-fill: oklch(0.6392 0.0968 238.41);
package/build/css/variables.light.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --pds-color-badge-rose-muted-background: oklch(0.9106 0.0331 351.20);
29
29
  --pds-color-badge-rose-muted-foreground: oklch(0.3361 0.1343 13.26);
30
30
  --pds-color-badge-orange-background: oklch(0.5874 0.1832 40.31);
31
- --pds-color-badge-orange-foreground: oklch(1 0 0);
31
+ --pds-color-badge-orange-foreground: oklch(1.0000 0 0);
32
32
  --pds-color-badge-orange-muted-background: oklch(0.9175 0.0328 49.33);
33
33
  --pds-color-badge-orange-muted-foreground: oklch(0.3445 0.1414 29.23);
34
34
  --pds-color-badge-lime-background: oklch(0.5540 0.1620 135.05);
@@ -40,7 +40,7 @@
40
40
  --pds-color-badge-sky-muted-background: oklch(0.9144 0.0264 224.25);
41
41
  --pds-color-badge-sky-muted-foreground: oklch(0.3083 0.1049 255.90);
42
42
  --pds-color-badge-indigo-background: oklch(0.4574 0.1942 275.52);
43
- --pds-color-badge-indigo-foreground: oklch(1 0 0);
43
+ --pds-color-badge-indigo-foreground: oklch(1.0000 0 0);
44
44
  --pds-color-badge-indigo-muted-background: oklch(0.9364 0.0311 281.82);
45
45
  --pds-color-badge-indigo-muted-foreground: oklch(0.3152 0.1990 274.45);
46
46
  --pds-color-badge-ink-background: oklch(0.2178 0 0);
@@ -87,13 +87,9 @@
87
87
  --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
88
88
  --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
89
89
  --pds-color-datepicker-selected-foreground: oklch(1.0000 0 0);
90
- --pds-color-log-row-standard-background-default: oklch(0.2178 0 0);
91
- --pds-color-log-row-standard-background-hover: oklch(0.5173 0 0);
92
- --pds-color-log-row-warning-background-default: oklch(0.9665 0.0199 70.00);
93
- --pds-color-log-row-error-background-default: oklch(0.9740 0.0075 17.42);
94
90
  --pds-color-pagination-foreground-hover: oklch(0.2178 0 0);
95
91
  --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
96
- --pds-color-pagination-foreground-current: oklch(1 0 0);
92
+ --pds-color-pagination-foreground-current: var(--pds-color-interactive-background-current-foreground);
97
93
  --pds-color-pagination-background-hover: oklch(0.9702 0 0);
98
94
  --pds-color-pagination-background-active: oklch(0.9500 0.0300 268.00);
99
95
  --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
@@ -113,7 +109,7 @@
113
109
  --pds-color-spinner-mono-1: #171717;
114
110
  --pds-color-spinner-mono-2: #66666680;
115
111
  --pds-color-spinner-mono-3: transparent;
116
- --pds-color-spinner-mono-reverse-1: #FFFFFF;
112
+ --pds-color-spinner-mono-reverse-1: var(--pds-color-foreground-reverse);
117
113
  --pds-color-spinner-mono-reverse-2: #ffffff80;
118
114
  --pds-color-spinner-mono-reverse-3: transparent;
119
115
  --pds-color-spinner-critical-secondary-1: #DE2E21;
@@ -169,6 +165,16 @@
169
165
  --pds-color-tag-info-solid-foreground: oklch(1.0000 0 0);
170
166
  --pds-color-tag-discovery-solid-background: oklch(0.4277 0.1065 303.89);
171
167
  --pds-color-tag-discovery-solid-foreground: oklch(1.0000 0 0);
168
+ --pds-color-tally-success-background: oklch(0.5670 0.1201 132.73);
169
+ --pds-color-tally-success-foreground: oklch(1.0000 0 0);
170
+ --pds-color-tally-warning-background: oklch(0.5658 0.1338 53.43);
171
+ --pds-color-tally-warning-foreground: oklch(1.0000 0 0);
172
+ --pds-color-tally-critical-background: oklch(0.4501 0.1581 26.35);
173
+ --pds-color-tally-critical-foreground: oklch(1.0000 0 0);
174
+ --pds-color-tally-info-background: oklch(0.4662 0.0924 245.48);
175
+ --pds-color-tally-info-foreground: oklch(1.0000 0 0);
176
+ --pds-color-tally-discovery-background: oklch(0.4277 0.1065 303.89);
177
+ --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
172
178
  --pds-color-surface-default: oklch(1.0000 0 0);
173
179
  --pds-color-surface-default-secondary: oklch(0.9702 0 0);
174
180
  --pds-color-surface-reverse: oklch(0.2178 0 0);
@@ -198,7 +204,7 @@
198
204
  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
199
205
  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
200
206
  --pds-color-button-highlight-background-active: oklch(0.3864 0.1703 266.63);
201
- --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
207
+ --pds-color-button-highlight-foreground: var(--pds-color-foreground-reverse);
202
208
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
203
209
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
204
210
  --pds-color-button-critical-background-active: oklch(0.4051 0.1423 26.35);
@@ -239,9 +245,9 @@
239
245
  --pds-color-split-button-primary-separator: oklch(0.5173 0 0);
240
246
  --pds-color-split-button-secondary-separator: oklch(0.8761 0 0);
241
247
  --pds-color-segmented-button-background-inactive: oklch(0.9702 0 0);
242
- --pds-color-segmented-button-background-active: oklch(1.0000 0 0);
248
+ --pds-color-segmented-button-background-active: oklch(0.5256 0.1988 268.04);
243
249
  --pds-color-segmented-button-foreground-inactive: var(--pds-color-foreground-default-secondary);
244
- --pds-color-segmented-button-foreground-active: var(--pds-color-foreground-default);
250
+ --pds-color-segmented-button-foreground-active: var(--pds-color-foreground-reverse);
245
251
  --pds-color-category-ai-foreground: oklch(0.5200 0.1177 303.12);
246
252
  --pds-color-category-ai-utility: oklch(0.6777 0.0966 309.02);
247
253
  --pds-color-category-ai-background: oklch(0.9559 0.0143 308.29);
@@ -323,26 +329,26 @@
323
329
  --pds-color-input-tag-foreground-hover: oklch(0.2178 0 0);
324
330
  --pds-color-input-tag-foreground-active: oklch(0.5256 0.1988 268.04);
325
331
  --pds-color-input-tag-outline-active: oklch(0.5256 0.1988 268.04);
326
- --pds-color-interactive-background-hover: oklch(0.9702 0 0);
327
- --pds-color-interactive-background-active: oklch(0.9430 0 0);
328
332
  --pds-color-interactive-focus: oklch(0.5256 0.1988 268.04);
329
333
  --pds-color-interactive-link-default: oklch(0.5256 0.1988 268.04);
330
334
  --pds-color-interactive-link-hover: oklch(0.6015 0.1484 35.70);
331
335
  --pds-color-interactive-link-active: oklch(0.5093 0.1241 35.58);
332
336
  --pds-color-interactive-link-visited: oklch(0.5256 0.1988 268.04);
333
- --pds-color-interactive-ui-hover: oklch(0.5256 0.1988 268.04);
334
- --pds-color-interactive-ui-active: oklch(0.5256 0.1988 268.04);
335
- --pds-color-interactive-ui-current: oklch(0.5256 0.1988 268.04);
336
- --pds-color-interactive-ui-inactive: oklch(0.8047 0 0);
337
- --pds-color-interactive-ui-background-hover: oklch(0.9702 0 0);
338
- --pds-color-interactive-ui-background-active: oklch(0.9430 0 0);
339
- --pds-color-interactive-ui-background-selected: oklch(0.9500 0.0300 268.00);
337
+ --pds-color-interactive-foreground-current: oklch(0.5256 0.1988 268.04);
338
+ --pds-color-interactive-foreground-hover: oklch(0.5256 0.1988 268.04);
339
+ --pds-color-interactive-foreground-active: oklch(0.5256 0.1988 268.04);
340
+ --pds-color-interactive-foreground-inactive: oklch(0.8047 0 0);
341
+ --pds-color-interactive-background-current: oklch(0.5256 0.1988 268.04);
342
+ --pds-color-interactive-background-current-foreground: oklch(1.0000 0 0);
343
+ --pds-color-interactive-background-hover: oklch(0.9702 0 0);
344
+ --pds-color-interactive-background-active: oklch(0.9430 0 0);
345
+ --pds-color-interactive-background-selected: oklch(0.9500 0.0300 268.00);
340
346
  --pds-color-interactive-reverse-focus: oklch(0.6496 0.1590 270.95);
341
347
  --pds-color-interactive-reverse-link-default: oklch(0.6496 0.1590 270.95);
342
348
  --pds-color-interactive-reverse-link-hover: oklch(0.6707 0.1296 32.99);
343
349
  --pds-color-interactive-reverse-link-active: oklch(0.7480 0.1030 37.44);
344
350
  --pds-color-interactive-reverse-link-visited: oklch(0.6496 0.1590 270.95);
345
- --pds-color-interactive-reverse-ui-hover: oklch(0.6496 0.1590 270.95);
351
+ --pds-color-interactive-reverse-foreground-hover: oklch(0.6496 0.1590 270.95);
346
352
  --pds-color-nav-item-reverse-foreground-hover: oklch(0.8272 0.0507 309.02);
347
353
  --pds-color-nav-item-reverse-foreground-active: oklch(0.8272 0.0507 309.02);
348
354
  --pds-color-overlay: rgba(0, 0, 0, 0.45);
@@ -360,22 +366,27 @@
360
366
  --pds-color-status-success-fill: oklch(0.5670 0.1201 132.73);
361
367
  --pds-color-status-success-border: oklch(0.8774 0.0659 125.63);
362
368
  --pds-color-status-success-background: oklch(0.9656 0.0192 122.83);
369
+ --pds-color-status-success-background-hover: oklch(0.9301 0.0402 124.12);
363
370
  --pds-color-status-warning-foreground: oklch(0.5658 0.1338 53.43);
364
371
  --pds-color-status-warning-fill: oklch(0.6419 0.1457 55.55);
365
372
  --pds-color-status-warning-border: oklch(0.8603 0.0782 67.73);
366
373
  --pds-color-status-warning-background: oklch(0.9665 0.0199 70.00);
374
+ --pds-color-status-warning-background-hover: oklch(0.9208 0.0469 69.27);
367
375
  --pds-color-status-critical-foreground: oklch(0.4501 0.1581 26.35);
368
376
  --pds-color-status-critical-fill: oklch(0.5338 0.1771 25.54);
369
377
  --pds-color-status-critical-border: oklch(0.7978 0.0754 20.67);
370
378
  --pds-color-status-critical-background: oklch(0.9740 0.0075 17.42);
379
+ --pds-color-status-critical-background-hover: oklch(0.8859 0.0414 19.05);
371
380
  --pds-color-status-info-foreground: oklch(0.4662 0.0924 245.48);
372
381
  --pds-color-status-info-fill: oklch(0.5510 0.1014 242.56);
373
382
  --pds-color-status-info-border: oklch(0.8372 0.0459 236.03);
374
383
  --pds-color-status-info-background: oklch(0.9584 0.0134 233.74);
384
+ --pds-color-status-info-background-hover: oklch(0.9123 0.0286 231.46);
375
385
  --pds-color-status-discovery-foreground: oklch(0.4277 0.1065 303.89);
376
386
  --pds-color-status-discovery-fill: oklch(0.5200 0.1177 303.12);
377
387
  --pds-color-status-discovery-border: oklch(0.8272 0.0507 309.02);
378
388
  --pds-color-status-discovery-background: oklch(0.9559 0.0143 308.29);
389
+ --pds-color-status-discovery-background-hover: oklch(0.9077 0.0264 310.39);
379
390
  --pds-color-status-neutral-background: oklch(0.8761 0 0);
380
391
  --pds-color-status-neutral-indicator: oklch(0.5173 0 0);
381
392
  --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);