@pantheon-systems/pds-toolkit-react 2.0.0-alpha.35 → 2.0.0-alpha.37

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 (82) hide show
  1. package/codemods/v1-to-v2/mappings.json +144 -19
  2. package/dist/components/Callout/Callout.d.ts +6 -2
  3. package/dist/components/CodeBlock/CodeBlock.d.ts +10 -5
  4. package/dist/components/CodeBlock/code-examples.d.ts +1 -0
  5. package/dist/components/CodeBlock/themes/index.d.ts +1 -2
  6. package/dist/components/CodeBlock/themes/{pdsDark.d.ts → pds.d.ts} +1 -1
  7. package/dist/components/PantheonLogo/PantheonLogo.d.ts +5 -4
  8. package/dist/components/Tabs/Tabs.d.ts +1 -6
  9. package/dist/components/badges/StatusBadge/StatusBadge.d.ts +2 -1
  10. package/dist/components/buttons/Button/Button.d.ts +15 -0
  11. package/dist/components/buttons/MenuButton/MenuButton.d.ts +19 -6
  12. package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +25 -7
  13. package/dist/components/icons/Icon/generated-icon-data.d.ts +9 -2
  14. package/dist/components/inputs/Combobox/Combobox.d.ts +1 -1
  15. package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +1 -1
  16. package/dist/components/inputs/Datepicker/Datepicker.d.ts +22 -13
  17. package/dist/components/inputs/Select/Select.d.ts +1 -1
  18. package/dist/components/inputs/TagsInput/TagsInput.d.ts +1 -1
  19. package/dist/components/inputs/TextInput/TextInput.d.ts +1 -1
  20. package/dist/components/inputs/Textarea/Textarea.d.ts +1 -1
  21. package/dist/components/loading-indicators/Spinner/Spinner.d.ts +5 -4
  22. package/dist/components/navigation/ButtonNav/ButtonNav.d.ts +1 -5
  23. package/dist/components/navigation/Navbar/Navbar.d.ts +2 -23
  24. package/dist/components/navigation/TabMenu/TabMenu.d.ts +1 -6
  25. package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +0 -11
  26. package/dist/components/panels/Panel/Panel.d.ts +1 -1
  27. package/dist/css/component-css/pds-avatar.css +1 -1
  28. package/dist/css/component-css/pds-button-nav.css +1 -1
  29. package/dist/css/component-css/pds-button.css +6 -6
  30. package/dist/css/component-css/pds-callout.css +1 -1
  31. package/dist/css/component-css/pds-card-select.css +1 -1
  32. package/dist/css/component-css/pds-code-block.css +1 -1
  33. package/dist/css/component-css/pds-combobox-multiselect.css +1 -2
  34. package/dist/css/component-css/pds-combobox.css +1 -1
  35. package/dist/css/component-css/pds-datepicker.css +5 -3
  36. package/dist/css/component-css/pds-index.css +50 -44
  37. package/dist/css/component-css/pds-input-utilities.css +1 -1
  38. package/dist/css/component-css/pds-menu-button.css +4 -1
  39. package/dist/css/component-css/pds-nav-menu.css +1 -1
  40. package/dist/css/component-css/pds-navbar.css +2 -2
  41. package/dist/css/component-css/pds-panel.css +1 -1
  42. package/dist/css/component-css/pds-pantheon-logo.css +1 -1
  43. package/dist/css/component-css/pds-popover.css +1 -1
  44. package/dist/css/component-css/pds-segmented-button.css +2 -1
  45. package/dist/css/component-css/pds-select.css +1 -1
  46. package/dist/css/component-css/pds-side-nav-global.css +1 -1
  47. package/dist/css/component-css/pds-side-nav.css +1 -1
  48. package/dist/css/component-css/pds-spinner.css +1 -1
  49. package/dist/css/component-css/pds-split-button.css +1 -1
  50. package/dist/css/component-css/pds-status-badge.css +1 -1
  51. package/dist/css/component-css/pds-status-indicator.css +1 -1
  52. package/dist/css/component-css/pds-stepper.css +1 -1
  53. package/dist/css/component-css/pds-tab-menu.css +1 -1
  54. package/dist/css/component-css/pds-tabs.css +1 -1
  55. package/dist/css/component-css/pds-tags-input.css +1 -1
  56. package/dist/css/component-css/pds-tally.css +1 -1
  57. package/dist/css/component-css/pds-text-input.css +1 -1
  58. package/dist/css/component-css/pds-textarea.css +1 -1
  59. package/dist/css/component-css/pds-toaster.css +1 -1
  60. package/dist/css/component-css/pds-user-menu.css +6 -3
  61. package/dist/css/component-css/pds-utility-button.css +1 -1
  62. package/dist/css/component-css/pds-vertical-stepper.css +1 -1
  63. package/dist/css/component-css/pds-workspace-selector.css +13 -3
  64. package/dist/css/design-tokens/variables.dark.css +46 -41
  65. package/dist/css/design-tokens/variables.light.css +27 -22
  66. package/dist/css/design-tokens/variables.typography.css +0 -1
  67. package/dist/css/pds-components.css +50 -44
  68. package/dist/css/pds-core.css +2 -2
  69. package/dist/index.css +1 -1
  70. package/dist/index.d.ts +2 -2
  71. package/dist/index.js +2832 -1608
  72. package/dist/index.js.map +1 -1
  73. package/dist/index.source.d.ts +0 -2
  74. package/dist/libs/components/NavAccordion/NavAccordion.d.ts +1 -1
  75. package/dist/libs/components/StatusDot/StatusDot.d.ts +15 -0
  76. package/dist/svg/userSolid.svg +3 -0
  77. package/package.json +2 -2
  78. package/dist/components/CodeBlock/themes/pdsLight.d.ts +0 -2
  79. package/dist/components/notifications/NotificationHubIcon/NotificationHubIcon.d.ts +0 -38
  80. package/dist/components/notifications/NotificationsPopover/NotificationsPopover.d.ts +0 -113
  81. package/dist/css/component-css/pds-notification-hub-icon.css +0 -1
  82. package/dist/css/component-css/pds-notifications-popover.css +0 -13
package/dist/css/design-tokens/variables.dark.css CHANGED
@@ -74,25 +74,26 @@
74
74
  --pds-color-banner-neutral-background: oklch(0.5103 0 0);
75
75
  --pds-color-banner-neutral-foreground: oklch(0.9702 0 0);
76
76
  --pds-color-card-background: oklch(0.2178 0 0);
77
- --pds-color-code-block-dark-background: oklch(1.0000 0 0);
78
- --pds-color-code-block-dark-foreground: oklch(1.0000 0 0);
79
- --pds-color-code-block-dark-line-prefix: #9699A1;
80
- --pds-color-code-block-dark-highlight: #474954;
81
- --pds-color-code-block-light-background: #EFF0F0;
82
- --pds-color-code-block-light-foreground: #3B3D45;
83
- --pds-color-code-block-light-line-prefix: #686D78;
84
- --pds-color-code-block-light-highlight: #DEDFE0;
85
- --pds-color-datepicker-accent-foreground: oklch(0.6496 0.1590 270.95);
86
- --pds-color-datepicker-range-background: oklch(0.2000 0.0400 268.00);
87
- --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
88
- --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
77
+ --pds-color-code-block-background: oklch(0.2931 0 0);
78
+ --pds-color-code-block-foreground: oklch(1 0 0);
79
+ --pds-color-code-block-line-prefix: #9699a1;
80
+ --pds-color-code-block-syntax-punctuation: #c3c5c9;
81
+ --pds-color-code-block-syntax-function: #f5c43a;
82
+ --pds-color-code-block-syntax-keyword: #72c4ff;
83
+ --pds-color-code-block-syntax-string: #a0f76e;
84
+ --pds-color-code-block-syntax-boolean: #d18fff;
85
+ --pds-color-code-block-syntax-tag: #ff61ca;
86
+ --pds-color-code-block-syntax-deleted: #f8495d;
87
+ --pds-color-code-block-syntax-inserted: #a0f76e;
88
+ --pds-color-datepicker-accent-foreground: oklch(0.7049 0.1468 258.30);
89
+ --pds-color-datepicker-selected-background: oklch(0.7049 0.1468 258.30);
89
90
  --pds-color-datepicker-selected-foreground: oklch(0.2178 0 0);
90
91
  --pds-color-pagination-foreground-hover: oklch(1 0 0);
91
92
  --pds-color-pagination-foreground-active: oklch(0.9702 0 0);
92
93
  --pds-color-pagination-foreground-current: oklch(1 0 0);
93
94
  --pds-color-pagination-background-hover: oklch(0.2603 0 0);
94
- --pds-color-pagination-background-active: oklch(0.2000 0.0400 268.00);
95
- --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
95
+ --pds-color-pagination-background-active: oklch(0.2800 0.0500 268.00);
96
+ --pds-color-pagination-background-current: oklch(0.7049 0.1468 258.30);
96
97
  --pds-color-panel-sunken-background: oklch(0.2603 0 0);
97
98
  --pds-color-expansion-panel-hover: oklch(0.2931 0 0);
98
99
  --pds-color-expansion-panel-open: oklch(0.2931 0 0);
@@ -116,7 +117,7 @@
116
117
  --pds-color-spinner-critical-secondary-2: #de2e21;
117
118
  --pds-color-spinner-critical-secondary-3: transparent;
118
119
  --pds-color-table-sort-icon-inactive: oklch(0.5 0 0);
119
- --pds-color-tabs-border: oklch(0.3329 0 0);
120
+ --pds-color-tabs-border: oklch(0.5991 0 0);
120
121
  --pds-color-tag-orange-background: oklch(0.3382 0.1012 42.43);
121
122
  --pds-color-tag-orange-foreground: oklch(0.9175 0.0328 49.33);
122
123
  --pds-color-tag-stone-background: oklch(0.4022 0.0071 84.59);
@@ -175,6 +176,7 @@
175
176
  --pds-color-tally-info-foreground: oklch(1.0000 0 0);
176
177
  --pds-color-tally-discovery-background: oklch(0.5200 0.1177 303.12);
177
178
  --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
179
+ --pds-color-brand-default: oklch(0.8622 0.1681 88.31);
178
180
  --pds-color-surface-default: oklch(0.2178 0 0);
179
181
  --pds-color-surface-default-secondary: oklch(0.2603 0 0);
180
182
  --pds-color-surface-reverse: oklch(0.9702 0 0);
@@ -201,10 +203,10 @@
201
203
  --pds-color-button-brand-background-hover: oklch(0.7640 0.1510 84.30);
202
204
  --pds-color-button-brand-background-active: oklch(0.6723 0.1329 84.30);
203
205
  --pds-color-button-brand-foreground: oklch(0.2178 0 0);
204
- --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
205
- --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
206
- --pds-color-button-highlight-background-active: oklch(0.3778 0.1665 266.63);
207
- --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
206
+ --pds-color-button-highlight-background-default: oklch(0.7049 0.1468 258.30);
207
+ --pds-color-button-highlight-background-hover: oklch(0.6049 0.1468 258.30);
208
+ --pds-color-button-highlight-background-active: oklch(0.5549 0.1468 258.30);
209
+ --pds-color-button-highlight-foreground: oklch(0.2178 0 0);
208
210
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
209
211
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
210
212
  --pds-color-button-critical-background-active: oklch(0.3961 0.1391 26.35);
@@ -242,10 +244,10 @@
242
244
  --pds-color-icon-button-reverse-border-default: oklch(0.8047 0 0);
243
245
  --pds-color-icon-button-reverse-border-hover: oklch(0.8047 0 0);
244
246
  --pds-color-icon-button-reverse-foreground: oklch(0.3791 0 0);
245
- --pds-color-split-button-primary-separator: oklch(0.8452 0 0);
247
+ --pds-color-split-button-primary-separator: oklch(0.2178 0 0);
246
248
  --pds-color-split-button-secondary-separator: oklch(0.4091 0 0);
247
249
  --pds-color-segmented-button-background-inactive: oklch(0.2931 0 0);
248
- --pds-color-segmented-button-background-active: oklch(0.5256 0.1988 268.04);
250
+ --pds-color-segmented-button-background-active: oklch(0.7049 0.1468 258.30);
249
251
  --pds-color-segmented-button-foreground-inactive: var(--pds-color-foreground-default-secondary);
250
252
  --pds-color-segmented-button-foreground-active: var(--pds-color-foreground-reverse);
251
253
  --pds-color-category-ai-foreground: oklch(0.9559 0.0143 308.29);
@@ -319,30 +321,31 @@
319
321
  --pds-color-input-placeholder: oklch(0.6830 0 0);
320
322
  --pds-color-input-file-upload-button-background-default: oklch(0.2931 0 0);
321
323
  --pds-color-input-file-upload-button-background-hover: oklch(0.3329 0 0);
322
- --pds-color-input-selected-background: oklch(0.6496 0.1590 270.95);
324
+ --pds-color-input-selected-background: oklch(0.7049 0.1468 258.30);
323
325
  --pds-color-input-selected-foreground: oklch(1.0000 0 0);
324
326
  --pds-color-input-switch-icon: oklch(0.8452 0 0);
325
327
  --pds-color-input-tag-background-default: oklch(0.38 0 0);
326
328
  --pds-color-input-tag-background-hover: oklch(0.32 0 0);
327
- --pds-color-input-tag-background-active: oklch(0.6496 0.1590 270.95);
329
+ --pds-color-input-tag-background-active: oklch(0.7049 0.1468 258.30);
328
330
  --pds-color-input-tag-foreground-default: oklch(0.9702 0 0);
329
331
  --pds-color-input-tag-foreground-hover: oklch(0.9702 0 0);
330
332
  --pds-color-input-tag-foreground-active: oklch(0.9702 0 0);
331
- --pds-color-input-tag-outline-active: oklch(0.6496 0.1590 270.95);
332
- --pds-color-interactive-focus: oklch(0.6496 0.1590 270.95);
333
- --pds-color-interactive-link-default: oklch(0.6496 0.1590 270.95);
333
+ --pds-color-input-tag-outline-active: oklch(0.7049 0.1468 258.30);
334
+ --pds-color-interactive-focus: oklch(0.7049 0.1468 258.30);
335
+ --pds-color-interactive-link-default: oklch(0.6478 0.1736 258.63);
334
336
  --pds-color-interactive-link-hover: oklch(0.6707 0.1296 32.99);
335
337
  --pds-color-interactive-link-active: oklch(0.7480 0.1030 37.44);
336
- --pds-color-interactive-link-visited: oklch(0.6496 0.1590 270.95);
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);
338
+ --pds-color-interactive-link-visited: oklch(0.6478 0.1736 258.63);
339
+ --pds-color-interactive-foreground-current: oklch(0.7049 0.1468 258.30);
340
+ --pds-color-interactive-foreground-hover: oklch(0.7049 0.1468 258.30);
341
+ --pds-color-interactive-foreground-active: oklch(0.7049 0.1468 258.30);
340
342
  --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-current: oklch(0.7049 0.1468 258.30);
344
+ --pds-color-interactive-background-current-foreground: oklch(0.2178 0 0);
343
345
  --pds-color-interactive-background-hover: oklch(0.2603 0 0);
344
346
  --pds-color-interactive-background-active: oklch(0.2931 0 0);
345
- --pds-color-interactive-background-selected: oklch(0.2000 0.0400 268.00);
347
+ --pds-color-interactive-background-selected: oklch(0.2800 0.0500 268.00);
348
+ --pds-color-interactive-background-selected-foreground: oklch(0.9702 0 0);
346
349
  --pds-color-interactive-reverse-focus: oklch(0.5256 0.1988 268.04);
347
350
  --pds-color-interactive-reverse-link-default: oklch(0.5256 0.1988 268.04);
348
351
  --pds-color-interactive-reverse-link-hover: oklch(0.6015 0.1484 35.70);
@@ -361,35 +364,37 @@
361
364
  --pds-color-partner-google: #4285F4;
362
365
  --pds-color-partner-nextjs: #ffffff;
363
366
  --pds-color-partner-wordpress: #0073AA;
367
+ --pds-color-segmented-control-track-background: oklch(0.2603 0 0);
368
+ --pds-color-segmented-control-selected-background: oklch(0.4091 0 0);
364
369
  --pds-color-social-rss: #f3763a;
365
370
  --pds-color-status-success-foreground: oklch(0.8774 0.0659 125.63);
366
371
  --pds-color-status-success-fill: oklch(0.6402 0.1224 130.73);
367
- --pds-color-status-success-border: oklch(0.5670 0.1201 132.73);
372
+ --pds-color-status-success-border: oklch(0.6402 0.1224 130.73);
368
373
  --pds-color-status-success-background: oklch(0.3746 0.0812 134.16);
369
374
  --pds-color-status-success-background-hover: oklch(0.4733 0.1035 134.24);
370
375
  --pds-color-status-warning-foreground: oklch(0.8603 0.0782 67.73);
371
376
  --pds-color-status-warning-fill: oklch(0.7116 0.1405 61.04);
372
- --pds-color-status-warning-border: oklch(0.5428 0.1292 52.61);
377
+ --pds-color-status-warning-border: oklch(0.7116 0.1405 61.04);
373
378
  --pds-color-status-warning-background: oklch(0.3111 0.0678 55.70);
374
379
  --pds-color-status-warning-background-hover: oklch(0.4323 0.1012 53.56);
375
380
  --pds-color-status-critical-foreground: oklch(0.8022 0.0731 18.80);
376
381
  --pds-color-status-critical-fill: oklch(0.5954 0.1582 23.19);
377
- --pds-color-status-critical-border: oklch(0.4501 0.1581 26.35);
382
+ --pds-color-status-critical-border: oklch(0.5954 0.1582 23.19);
378
383
  --pds-color-status-critical-background: oklch(0.2550 0.0814 25.05);
379
384
  --pds-color-status-critical-background-hover: oklch(0.3541 0.1230 26.18);
380
385
  --pds-color-status-info-foreground: oklch(0.8372 0.0459 236.03);
381
386
  --pds-color-status-info-fill: oklch(0.6392 0.0968 238.41);
382
- --pds-color-status-info-border: oklch(0.4662 0.0924 245.48);
387
+ --pds-color-status-info-border: oklch(0.6392 0.0968 238.41);
383
388
  --pds-color-status-info-background: oklch(0.2906 0.0644 249.78);
384
389
  --pds-color-status-info-background-hover: oklch(0.3751 0.0783 246.74);
385
390
  --pds-color-status-discovery-foreground: oklch(0.8272 0.0507 309.02);
386
391
  --pds-color-status-discovery-fill: oklch(0.6127 0.1092 305.74);
387
- --pds-color-status-discovery-border: oklch(0.4277 0.1065 303.89);
392
+ --pds-color-status-discovery-border: oklch(0.6127 0.1092 305.74);
388
393
  --pds-color-status-discovery-background: oklch(0.2671 0.0855 295.38);
389
394
  --pds-color-status-discovery-background-hover: oklch(0.3388 0.0952 301.67);
390
395
  --pds-color-status-neutral-background: oklch(0.3329 0 0);
391
396
  --pds-color-status-neutral-indicator: oklch(0.8452 0 0);
392
- --pds-color-status-frozen-fill: oklch(0.6392 0.0968 238.41);
397
+ --pds-color-status-frozen-fill: oklch(0.6598 0.0403 232.31);
393
398
  --pds-color-status-disabled-fill: oklch(0.5103 0 0);
394
399
  --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
395
400
  --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
@@ -404,9 +409,9 @@
404
409
  --pds-elevation-drawer-right: -2px 0px 32px 0px rgba(0, 0, 0, 0.8), -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
405
410
  --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(255, 255, 255, 0.06);
406
411
  --pds-elevation-sortable-hover: 0px 0px 3px 1px rgba(58, 93, 251, 0.35);
407
- --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
412
+ --pds-elevation-raised: 0px 0px 0px 1px rgba(130, 130, 130, 0.1), 0px 5px 10px 0px rgba(18, 18, 25, 0.6);
408
413
  --pds-elevation-draggable: 0px 2px 6px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.2);
409
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
414
+ --pds-elevation-overlay: 0px 0px 0px 1px oklch(0.31 0.005 258), 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
410
415
  --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
411
416
  --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
412
417
  --pds-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
package/dist/css/design-tokens/variables.light.css CHANGED
@@ -74,17 +74,18 @@
74
74
  --pds-color-banner-neutral-background: oklch(0.2178 0 0);
75
75
  --pds-color-banner-neutral-foreground: oklch(1.0000 0 0);
76
76
  --pds-color-card-background: oklch(1.0000 0 0);
77
- --pds-color-code-block-dark-background: var(--pds-color-surface-reverse);
78
- --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
79
- --pds-color-code-block-dark-line-prefix: #9699A1;
80
- --pds-color-code-block-dark-highlight: #474954;
81
- --pds-color-code-block-light-background: #EFF0F0;
82
- --pds-color-code-block-light-foreground: #3B3D45;
83
- --pds-color-code-block-light-line-prefix: #686D78;
84
- --pds-color-code-block-light-highlight: #DEDFE0;
77
+ --pds-color-code-block-background: oklch(0.31 0 0);
78
+ --pds-color-code-block-foreground: oklch(1 0 0);
79
+ --pds-color-code-block-line-prefix: #9699a1;
80
+ --pds-color-code-block-syntax-punctuation: #c3c5c9;
81
+ --pds-color-code-block-syntax-function: #f5c43a;
82
+ --pds-color-code-block-syntax-keyword: #72c4ff;
83
+ --pds-color-code-block-syntax-string: #a0f76e;
84
+ --pds-color-code-block-syntax-boolean: #d18fff;
85
+ --pds-color-code-block-syntax-tag: #ff61ca;
86
+ --pds-color-code-block-syntax-deleted: #f8495d;
87
+ --pds-color-code-block-syntax-inserted: #a0f76e;
85
88
  --pds-color-datepicker-accent-foreground: oklch(0.5256 0.1988 268.04);
86
- --pds-color-datepicker-range-background: oklch(0.9500 0.0300 268.00);
87
- --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
88
89
  --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
89
90
  --pds-color-datepicker-selected-foreground: oklch(1.0000 0 0);
90
91
  --pds-color-pagination-foreground-hover: oklch(0.2178 0 0);
@@ -116,7 +117,7 @@
116
117
  --pds-color-spinner-critical-secondary-2: #F5B6B0;
117
118
  --pds-color-spinner-critical-secondary-3: transparent;
118
119
  --pds-color-table-sort-icon-inactive: oklch(0.78 0 0);
119
- --pds-color-tabs-border: oklch(0.8761 0 0);
120
+ --pds-color-tabs-border: oklch(0.8047 0 0);
120
121
  --pds-color-tag-orange-background: oklch(0.9175 0.0328 49.33);
121
122
  --pds-color-tag-orange-foreground: oklch(0.3445 0.1414 29.23);
122
123
  --pds-color-tag-stone-background: oklch(0.9261 0.0144 84.58);
@@ -175,6 +176,7 @@
175
176
  --pds-color-tally-info-foreground: oklch(1.0000 0 0);
176
177
  --pds-color-tally-discovery-background: oklch(0.4277 0.1065 303.89);
177
178
  --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
179
+ --pds-color-brand-default: oklch(0.8622 0.1681 88.31);
178
180
  --pds-color-surface-default: oklch(1.0000 0 0);
179
181
  --pds-color-surface-default-secondary: oklch(0.9702 0 0);
180
182
  --pds-color-surface-reverse: oklch(0.2178 0 0);
@@ -224,14 +226,14 @@
224
226
  --pds-color-button-reverse-secondary-background-active: oklch(0.3638 0 0);
225
227
  --pds-color-button-reverse-secondary-border: oklch(0.5103 0 0);
226
228
  --pds-color-button-reverse-secondary-foreground: oklch(1.0000 0 0);
227
- --pds-color-close-button-foreground: oklch(0.5173 0 0);
229
+ --pds-color-close-button-foreground: oklch(0.5550 0.0020 247.86);
228
230
  --pds-color-close-button-background-default: rgba(255, 255, 255, 0.00);
229
231
  --pds-color-close-button-background-hover: #1717171a;
230
232
  --pds-color-icon-button-standard-background-default: rgba(255, 255, 255, 0.00);
231
233
  --pds-color-icon-button-standard-background-hover: #1717170d;
232
234
  --pds-color-icon-button-standard-border-default: #1717171f;
233
235
  --pds-color-icon-button-standard-border-hover: #17171726;
234
- --pds-color-icon-button-standard-foreground: oklch(0.3791 0 0);
236
+ --pds-color-icon-button-standard-foreground: oklch(0.31 0 0);
235
237
  --pds-color-icon-button-critical-background-default: rgba(255, 255, 255, 0.00);
236
238
  --pds-color-icon-button-critical-background-hover: oklch(0.9740 0.0075 17.42);
237
239
  --pds-color-icon-button-critical-border-default: oklch(0.8859 0.0414 19.05);
@@ -242,7 +244,7 @@
242
244
  --pds-color-icon-button-reverse-border-default: oklch(0.5103 0 0);
243
245
  --pds-color-icon-button-reverse-border-hover: oklch(0.5103 0 0);
244
246
  --pds-color-icon-button-reverse-foreground: oklch(0.9430 0 0);
245
- --pds-color-split-button-primary-separator: oklch(0.5173 0 0);
247
+ --pds-color-split-button-primary-separator: oklch(1.0000 0 0);
246
248
  --pds-color-split-button-secondary-separator: oklch(0.8761 0 0);
247
249
  --pds-color-segmented-button-background-inactive: oklch(0.9702 0 0);
248
250
  --pds-color-segmented-button-background-active: oklch(0.5256 0.1988 268.04);
@@ -313,7 +315,7 @@
313
315
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
314
316
  --pds-color-dropdown-top-border: #dfdfdf;
315
317
  --pds-color-foreground-default: oklch(0.2178 0 0);
316
- --pds-color-foreground-default-secondary: oklch(0.5173 0 0);
318
+ --pds-color-foreground-default-secondary: oklch(0.5550 0.0020 247.86);
317
319
  --pds-color-foreground-reverse: oklch(1.0000 0 0);
318
320
  --pds-color-foreground-reverse-secondary: oklch(0.8452 0 0);
319
321
  --pds-color-input-placeholder: oklch(0.8047 0 0);
@@ -343,6 +345,7 @@
343
345
  --pds-color-interactive-background-hover: oklch(0.9702 0 0);
344
346
  --pds-color-interactive-background-active: oklch(0.9430 0 0);
345
347
  --pds-color-interactive-background-selected: oklch(0.9500 0.0300 268.00);
348
+ --pds-color-interactive-background-selected-foreground: oklch(0.2178 0 0);
346
349
  --pds-color-interactive-reverse-focus: oklch(0.6496 0.1590 270.95);
347
350
  --pds-color-interactive-reverse-link-default: oklch(0.6496 0.1590 270.95);
348
351
  --pds-color-interactive-reverse-link-hover: oklch(0.6707 0.1296 32.99);
@@ -361,35 +364,37 @@
361
364
  --pds-color-partner-google: #4285F4;
362
365
  --pds-color-partner-nextjs: #000000;
363
366
  --pds-color-partner-wordpress: #0073AA;
367
+ --pds-color-segmented-control-track-background: oklch(0.9430 0 0);
368
+ --pds-color-segmented-control-selected-background: oklch(1.0000 0 0);
364
369
  --pds-color-social-rss: #f26522;
365
370
  --pds-color-status-success-foreground: oklch(0.5670 0.1201 132.73);
366
371
  --pds-color-status-success-fill: oklch(0.5670 0.1201 132.73);
367
- --pds-color-status-success-border: oklch(0.8774 0.0659 125.63);
372
+ --pds-color-status-success-border: oklch(0.5670 0.1201 132.73);
368
373
  --pds-color-status-success-background: oklch(0.9656 0.0192 122.83);
369
374
  --pds-color-status-success-background-hover: oklch(0.9301 0.0402 124.12);
370
375
  --pds-color-status-warning-foreground: oklch(0.5658 0.1338 53.43);
371
376
  --pds-color-status-warning-fill: oklch(0.6419 0.1457 55.55);
372
- --pds-color-status-warning-border: oklch(0.8603 0.0782 67.73);
377
+ --pds-color-status-warning-border: oklch(0.6419 0.1457 55.55);
373
378
  --pds-color-status-warning-background: oklch(0.9665 0.0199 70.00);
374
379
  --pds-color-status-warning-background-hover: oklch(0.9208 0.0469 69.27);
375
380
  --pds-color-status-critical-foreground: oklch(0.4501 0.1581 26.35);
376
381
  --pds-color-status-critical-fill: oklch(0.5338 0.1771 25.54);
377
- --pds-color-status-critical-border: oklch(0.7978 0.0754 20.67);
382
+ --pds-color-status-critical-border: oklch(0.5338 0.1771 25.54);
378
383
  --pds-color-status-critical-background: oklch(0.9740 0.0075 17.42);
379
384
  --pds-color-status-critical-background-hover: oklch(0.8859 0.0414 19.05);
380
385
  --pds-color-status-info-foreground: oklch(0.4662 0.0924 245.48);
381
386
  --pds-color-status-info-fill: oklch(0.5510 0.1014 242.56);
382
- --pds-color-status-info-border: oklch(0.8372 0.0459 236.03);
387
+ --pds-color-status-info-border: oklch(0.5510 0.1014 242.56);
383
388
  --pds-color-status-info-background: oklch(0.9584 0.0134 233.74);
384
389
  --pds-color-status-info-background-hover: oklch(0.9123 0.0286 231.46);
385
390
  --pds-color-status-discovery-foreground: oklch(0.4277 0.1065 303.89);
386
391
  --pds-color-status-discovery-fill: oklch(0.5200 0.1177 303.12);
387
- --pds-color-status-discovery-border: oklch(0.8272 0.0507 309.02);
392
+ --pds-color-status-discovery-border: oklch(0.5200 0.1177 303.12);
388
393
  --pds-color-status-discovery-background: oklch(0.9559 0.0143 308.29);
389
394
  --pds-color-status-discovery-background-hover: oklch(0.9077 0.0264 310.39);
390
395
  --pds-color-status-neutral-background: oklch(0.8761 0 0);
391
- --pds-color-status-neutral-indicator: oklch(0.5173 0 0);
392
- --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);
396
+ --pds-color-status-neutral-indicator: oklch(0.5550 0.0020 247.86);
397
+ --pds-color-status-frozen-fill: oklch(0.7411 0.0377 231.33);
393
398
  --pds-color-status-disabled-fill: oklch(0.8047 0 0);
394
399
  --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
395
400
  --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
package/dist/css/design-tokens/variables.typography.css CHANGED
@@ -18,7 +18,6 @@
18
18
  --pds-typography-lh-m: 150%;
19
19
  --pds-typography-lh-s: 130%;
20
20
  --pds-typography-lh-xs: 120%;
21
- --pds-typography-lh-code: 180%;
22
21
  --pds-typography-size-2xs: 0.625rem;
23
22
  --pds-typography-size-xs: 0.75rem;
24
23
  --pds-typography-size-s: 0.875rem;