@pantheon-systems/pds-toolkit-react 1.0.0-dev.271 → 1.0.0-dev.274

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 (83) hide show
  1. package/_dist/components/CodeBlock/code-examples.d.ts +1 -1
  2. package/_dist/components/steppers/VerticalStepper/VerticalStep.d.ts +52 -0
  3. package/_dist/components/steppers/VerticalStepper/VerticalStepper.d.ts +28 -0
  4. package/_dist/components/steppers/VerticalStepper/vertical-stepper-sample-data.d.ts +27 -0
  5. package/_dist/css/component-css/pds-avatar-tile-list.css +1 -1
  6. package/_dist/css/component-css/pds-avatar.css +1 -1
  7. package/_dist/css/component-css/pds-callout.css +1 -1
  8. package/_dist/css/component-css/pds-card-heading.css +1 -1
  9. package/_dist/css/component-css/pds-card-select-group.css +1 -1
  10. package/_dist/css/component-css/pds-card.css +1 -1
  11. package/_dist/css/component-css/pds-checkbox.css +1 -1
  12. package/_dist/css/component-css/pds-close-button.css +1 -1
  13. package/_dist/css/component-css/pds-combobox-multiselect.css +2 -2
  14. package/_dist/css/component-css/pds-combobox.css +1 -1
  15. package/_dist/css/component-css/pds-compact-empty-state.css +1 -1
  16. package/_dist/css/component-css/pds-comparison-list.css +1 -1
  17. package/_dist/css/component-css/pds-cta-slice.css +1 -1
  18. package/_dist/css/component-css/pds-dashboard-search.css +1 -1
  19. package/_dist/css/component-css/pds-dashboard-stat.css +1 -1
  20. package/_dist/css/component-css/pds-dropdown-menu.css +2 -2
  21. package/_dist/css/component-css/pds-expansion-panel.css +1 -1
  22. package/_dist/css/component-css/pds-file-diff.css +1 -1
  23. package/_dist/css/component-css/pds-file-upload.css +3 -3
  24. package/_dist/css/component-css/pds-flow-steps.css +1 -1
  25. package/_dist/css/component-css/pds-footer-heading.css +1 -1
  26. package/_dist/css/component-css/pds-footer-links.css +1 -1
  27. package/_dist/css/component-css/pds-icon-button.css +2 -2
  28. package/_dist/css/component-css/pds-index.css +14 -14
  29. package/_dist/css/component-css/pds-inline-message.css +1 -1
  30. package/_dist/css/component-css/pds-input-utilities.css +1 -1
  31. package/_dist/css/component-css/pds-menu-button.css +1 -1
  32. package/_dist/css/component-css/pds-modal.css +1 -1
  33. package/_dist/css/component-css/pds-nav-menu.css +1 -1
  34. package/_dist/css/component-css/pds-navbar.css +1 -1
  35. package/_dist/css/component-css/pds-new-site-card.css +1 -1
  36. package/_dist/css/component-css/pds-panel-list.css +1 -1
  37. package/_dist/css/component-css/pds-panel.css +1 -1
  38. package/_dist/css/component-css/pds-pantheon-logo.css +1 -1
  39. package/_dist/css/component-css/pds-popover.css +1 -1
  40. package/_dist/css/component-css/pds-pricing-card.css +1 -1
  41. package/_dist/css/component-css/pds-progress-bar.css +1 -1
  42. package/_dist/css/component-css/pds-progress-ring.css +1 -1
  43. package/_dist/css/component-css/pds-pull-quote.css +1 -1
  44. package/_dist/css/component-css/pds-refresh-checker.css +1 -1
  45. package/_dist/css/component-css/pds-section-message.css +1 -1
  46. package/_dist/css/component-css/pds-select.css +1 -1
  47. package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
  48. package/_dist/css/component-css/pds-side-nav.css +1 -1
  49. package/_dist/css/component-css/pds-site-card.css +1 -1
  50. package/_dist/css/component-css/pds-site-footer.css +1 -1
  51. package/_dist/css/component-css/pds-social-links.css +1 -1
  52. package/_dist/css/component-css/pds-split-button.css +1 -1
  53. package/_dist/css/component-css/pds-status-badge.css +1 -1
  54. package/_dist/css/component-css/pds-status-indicator.css +1 -1
  55. package/_dist/css/component-css/pds-stepper.css +1 -1
  56. package/_dist/css/component-css/pds-switch.css +1 -1
  57. package/_dist/css/component-css/pds-tab-menu.css +2 -2
  58. package/_dist/css/component-css/pds-table-of-contents.css +1 -1
  59. package/_dist/css/component-css/pds-tabs.css +1 -1
  60. package/_dist/css/component-css/pds-tally.css +1 -1
  61. package/_dist/css/component-css/pds-text-input.css +1 -1
  62. package/_dist/css/component-css/pds-textarea.css +1 -1
  63. package/_dist/css/component-css/pds-tile.css +1 -1
  64. package/_dist/css/component-css/pds-tiles-common.css +1 -1
  65. package/_dist/css/component-css/pds-toaster.css +1 -1
  66. package/_dist/css/component-css/pds-tooltip.css +1 -1
  67. package/_dist/css/component-css/pds-user-menu.css +1 -1
  68. package/_dist/css/component-css/pds-utility-button.css +1 -1
  69. package/_dist/css/component-css/pds-vertical-stepper.css +1 -0
  70. package/_dist/css/component-css/pds-workspace-selector.css +1 -1
  71. package/_dist/css/design-tokens/pds-design-tokens-dark-mode.css +40 -27
  72. package/_dist/css/design-tokens/pds-design-tokens-light-mode.css +37 -24
  73. package/_dist/css/pds-components.css +14 -14
  74. package/_dist/css/pds-core.css +3 -5
  75. package/_dist/css/pds-layouts.css +1 -1
  76. package/_dist/index.css +1 -1
  77. package/_dist/index.d.ts +2 -1
  78. package/_dist/index.js +2950 -2879
  79. package/_dist/index.js.map +1 -1
  80. package/_dist/mocks/markup/panel-row-content.d.ts +3 -0
  81. package/_dist/utilities/color/color-preview-swatches.d.ts +13 -0
  82. package/package.json +3 -16
  83. /package/_dist/components/{Stepper → steppers/Stepper}/Stepper.d.ts +0 -0
package/_dist/css/component-css/pds-workspace-selector.css CHANGED
@@ -1 +1 @@
1
- .pds-workspace-selector{display:inline-block;position:relative}.pds-workspace-selector__trigger{align-items:center;background-color:transparent;border:none;color:var(--pds-color-foreground-default);column-gap:.64rem;display:flex;position:relative}.pds-workspace-selector__trigger:hover{color:var(--pds-color-interactive-link-hover);cursor:pointer}.pds-workspace-selector__trigger:hover .pds-workspace-selector__avatar{outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.03125rem}.pds-workspace-selector__trigger:hover .pds-workspace-selector__trigger-icon{color:var(--pds-color-interactive-link-hover)}.pds-workspace-selector__trigger:focus-visible{border-radius:.375rem;outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px;transition:outline .2s ease-in-out 0s}.pds-workspace-selector__trigger .pds-workspace-selector__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s ease-in-out 0s}.pds-workspace-selector__toggle[aria-expanded=true],.pds-workspace-selector__trigger[aria-expanded=true]{color:var(--pds-color-interactive-link-hover)}.pds-workspace-selector__toggle[aria-expanded=true] .pds-workspace-selector__avatar,.pds-workspace-selector__trigger[aria-expanded=true] .pds-workspace-selector__avatar{outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.03125rem}.pds-workspace-selector__toggle[aria-expanded=true] .pds-workspace-selector__trigger-icon,.pds-workspace-selector__trigger[aria-expanded=true] .pds-workspace-selector__trigger-icon{color:var(--pds-color-interactive-link-hover);transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-workspace-selector__button-content{align-items:center;column-gap:.64rem;display:flex}.pds-workspace-selector__name{font-family:Poppins,sans-serif;font-size:1rem;font-weight:400}.pds-workspace-selector__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);left:0;position:absolute;top:2.5rem;width:21rem}.pds-workspace-selector__dropdown:focus{outline:none}.pds-workspace-selector__menu{display:flex;flex-direction:column;list-style:none;margin:0;padding:.512rem .64rem;row-gap:.328rem}.pds-workspace-selector__menu--scroll{max-height:23.25rem;overflow-y:auto}.pds-workspace-selector__item{background-color:transparent;border-radius:.375rem;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:1rem;line-height:120%;margin:0}.pds-workspace-selector__item:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.03125rem}.pds-workspace-selector__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-workspace-selector__item a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-workspace-selector__item a{align-items:center;border-radius:.375rem;column-gap:.64rem;display:flex;justify-content:space-between;padding:.64rem .8rem;text-decoration:none}.pds-workspace-selector__item a,.pds-workspace-selector__item a:hover{color:var(--pds-color-dropdown-foreground)}.pds-workspace-selector__item-heading{color:var(--pds-color-dropdown-heading);font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;line-height:120%;padding:.64rem .8rem .328rem}.pds-workspace-selector__item--active{background-color:var(--pds-color-dropdown-item-background-selected);border-radius:.375rem}.pds-workspace-selector__item--unprivileged{opacity:.5}.pds-workspace-selector__item--unprivileged:hover{background-color:transparent}.pds-workspace-selector__item--unprivileged a{cursor:not-allowed}.pds-workspace-selector__active-icon{color:var(--pds-color-status-success-foreground);flex-shrink:0;margin-inline-start:.8rem}.pds-workspace-selector__item-content{align-items:center;column-gap:.64rem;display:flex}.pds-workspace-selector__no-results{color:var(--pds-color-foreground-default);font-size:1rem;margin-block-end:.512rem;padding-inline:.8rem}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter{border-block-end:1px solid var(--pds-color-border-default);box-shadow:0 1px 9px -7px rgba(0,0,0,.2);padding:.41rem .64rem}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter .pds-text-input__input-wrapper{border-color:transparent}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter .pds-text-input__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus)}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-input-field--text{border-color:transparent}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-input-field--text:focus-within{border-color:var(--pds-color-interactive-focus)}.pds-workspace-selector__create-link{border-block-start:1px solid var(--pds-color-border-default);box-shadow:0 -1px 9px -7px rgba(0,0,0,.2);padding:.41rem .8rem}.pds-workspace-selector__create-link a{display:flex;justify-content:space-between}.pds-workspace-selector__create-link a:focus-visible{outline-width:1px}.pds-workspace-selector--isMobile{background-color:var(--pds-color-background-default);border-bottom:1px solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;position:relative;width:100vw}.pds-workspace-selector__toggle{align-items:center;background-color:var(--pds-color-background-default);border:none;display:flex;justify-content:space-between;min-height:3.815rem;padding-inline:1.563rem;width:100%}.pds-workspace-selector__toggle>*{pointer-events:none}.pds-workspace-selector__toggle .pds-workspace-selector__trigger-icon{margin-inline-end:.328rem}.pds-workspace-selector__mobile-menu{display:none;padding-inline:.25rem}.pds-workspace-selector__mobile-menu .pds-workspace-selector__filter{padding-block:.512rem;padding-inline:1.25rem}.pds-workspace-selector__mobile-menu .pds-workspace-selector__create-link{border-block-start:none;box-shadow:none;padding-block:.41rem;padding-inline:1.25rem}.pds-workspace-selector__mobile-menu--expanded{display:flex;flex-direction:column}
1
+ .pds-workspace-selector{display:inline-block;position:relative}.pds-workspace-selector__trigger{align-items:center;background-color:transparent;border:none;color:var(--pds-color-fg-default);column-gap:.64rem;display:flex;position:relative}.pds-workspace-selector__trigger:hover{color:var(--pds-color-interactive-link-hover);cursor:pointer}.pds-workspace-selector__trigger:hover .pds-workspace-selector__avatar{outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.03125rem}.pds-workspace-selector__trigger:hover .pds-workspace-selector__trigger-icon{color:var(--pds-color-interactive-link-hover)}.pds-workspace-selector__trigger:focus-visible{border-radius:.375rem;outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px;transition:outline .2s ease-in-out 0s}.pds-workspace-selector__trigger .pds-workspace-selector__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s ease-in-out 0s}.pds-workspace-selector__toggle[aria-expanded=true],.pds-workspace-selector__trigger[aria-expanded=true]{color:var(--pds-color-interactive-link-hover)}.pds-workspace-selector__toggle[aria-expanded=true] .pds-workspace-selector__avatar,.pds-workspace-selector__trigger[aria-expanded=true] .pds-workspace-selector__avatar{outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.03125rem}.pds-workspace-selector__toggle[aria-expanded=true] .pds-workspace-selector__trigger-icon,.pds-workspace-selector__trigger[aria-expanded=true] .pds-workspace-selector__trigger-icon{color:var(--pds-color-interactive-link-hover);transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-workspace-selector__button-content{align-items:center;column-gap:.64rem;display:flex}.pds-workspace-selector__name{font-family:Poppins,sans-serif;font-size:1rem;font-weight:400}.pds-workspace-selector__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);left:0;position:absolute;top:2.5rem;width:21rem}.pds-workspace-selector__dropdown:focus{outline:none}.pds-workspace-selector__menu{display:flex;flex-direction:column;list-style:none;margin:0;padding:.512rem .64rem;row-gap:.328rem}.pds-workspace-selector__menu--scroll{max-height:23.25rem;overflow-y:auto}.pds-workspace-selector__item{background-color:transparent;border-radius:.375rem;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:1rem;line-height:120%;margin:0}.pds-workspace-selector__item:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.03125rem}.pds-workspace-selector__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-workspace-selector__item a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-workspace-selector__item a{align-items:center;border-radius:.375rem;column-gap:.64rem;display:flex;justify-content:space-between;padding:.64rem .8rem;text-decoration:none}.pds-workspace-selector__item a,.pds-workspace-selector__item a:hover{color:var(--pds-color-dropdown-foreground)}.pds-workspace-selector__item-heading{color:var(--pds-color-dropdown-heading);font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;line-height:120%;padding:.64rem .8rem .328rem}.pds-workspace-selector__item--active{background-color:var(--pds-color-dropdown-item-background-selected);border-radius:.375rem}.pds-workspace-selector__item--unprivileged{opacity:.5}.pds-workspace-selector__item--unprivileged:hover{background-color:transparent}.pds-workspace-selector__item--unprivileged a{cursor:not-allowed}.pds-workspace-selector__active-icon{color:var(--pds-color-status-success-foreground);flex-shrink:0;margin-inline-start:.8rem}.pds-workspace-selector__item-content{align-items:center;column-gap:.64rem;display:flex}.pds-workspace-selector__no-results{color:var(--pds-color-fg-default);font-size:1rem;margin-block-end:.512rem;padding-inline:.8rem}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter{border-block-end:1px solid var(--pds-color-border-default);box-shadow:0 1px 9px -7px rgba(0,0,0,.2);padding:.41rem .64rem}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter .pds-text-input__input-wrapper{border-color:transparent}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-workspace-selector__filter .pds-text-input__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus)}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-input-field--text{border-color:transparent}.pds-workspace-selector:not(.pds-workspace-selector--isMobile) .pds-input-field--text:focus-within{border-color:var(--pds-color-interactive-focus)}.pds-workspace-selector__create-link{border-block-start:1px solid var(--pds-color-border-default);box-shadow:0 -1px 9px -7px rgba(0,0,0,.2);padding:.41rem .8rem}.pds-workspace-selector__create-link a{display:flex;justify-content:space-between}.pds-workspace-selector__create-link a:focus-visible{outline-width:1px}.pds-workspace-selector--isMobile{background-color:var(--pds-color-bg-default);border-bottom:1px solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;position:relative;width:100vw}.pds-workspace-selector__toggle{align-items:center;background-color:var(--pds-color-bg-default);border:none;display:flex;justify-content:space-between;min-height:3.815rem;padding-inline:1.563rem;width:100%}.pds-workspace-selector__toggle>*{pointer-events:none}.pds-workspace-selector__toggle .pds-workspace-selector__trigger-icon{margin-inline-end:.328rem}.pds-workspace-selector__mobile-menu{display:none;padding-inline:.25rem}.pds-workspace-selector__mobile-menu .pds-workspace-selector__filter{padding-block:.512rem;padding-inline:1.25rem}.pds-workspace-selector__mobile-menu .pds-workspace-selector__create-link{border-block-start:none;box-shadow:none;padding-block:.41rem;padding-inline:1.25rem}.pds-workspace-selector__mobile-menu--expanded{display:flex;flex-direction:column}
package/_dist/css/design-tokens/pds-design-tokens-dark-mode.css CHANGED
@@ -9,10 +9,7 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-default: #1a1b20;
14
- --pds-color-background-default-secondary: #121219;
15
- --pds-color-background-reverse: #b5b5bc;
12
+ [data-theme="dark"] {
16
13
  --pds-color-badge-indicator-brand-background: #745dd8;
17
14
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
15
  --pds-color-badge-indicator-critical-background: #a70000;
@@ -27,7 +24,7 @@
27
24
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
28
25
  --pds-color-badge-indicator-platinum-background: #cbc2f0;
29
26
  --pds-color-badge-indicator-platinum-foreground: #42318d;
30
- --pds-color-badge-indicator-silver-background: #b5b5bc;
27
+ --pds-color-badge-indicator-silver-background: #e7e7eb;
31
28
  --pds-color-badge-indicator-silver-foreground: #2f323d;
32
29
  --pds-color-badge-indicator-success-background: #00710f;
33
30
  --pds-color-badge-indicator-success-foreground: #ffffff;
@@ -39,10 +36,21 @@
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
37
  --pds-color-banner-warning-background: #bd5b00;
41
38
  --pds-color-banner-warning-foreground: #ffffff;
39
+ --pds-color-bg-critical: var(--pds-color-status-critical-background);
40
+ --pds-color-bg-default: #1a1b20;
41
+ --pds-color-bg-default-secondary: #121219;
42
+ --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
43
+ --pds-color-bg-info: var(--pds-color-status-info-background);
44
+ --pds-color-bg-reverse: #e7e7eb;
45
+ --pds-color-bg-success: var(--pds-color-status-success-background);
46
+ --pds-color-bg-transparent: rgba(0, 0, 0, 0);
47
+ --pds-color-bg-warning: var(--pds-color-status-warning-background);
42
48
  --pds-color-border-brand: #9786e2;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
43
50
  --pds-color-border-default: #6d6d78;
44
51
  --pds-color-border-input: #6d6d78;
45
52
  --pds-color-border-separator: #6d6d78;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
46
54
  --pds-color-brand-accent-default: #de0093;
47
55
  --pds-color-brand-primary-default: #745dd8;
48
56
  --pds-color-brand-secondary-default: #ffdc28;
@@ -61,8 +69,8 @@
61
69
  --pds-color-button-brand-secondary-border-active: #20232c;
62
70
  --pds-color-button-brand-secondary-border-default: #6d6d78;
63
71
  --pds-color-button-brand-secondary-border-hover: #ffffff;
64
- --pds-color-button-brand-secondary-foreground-active: #b5b5bc;
65
- --pds-color-button-brand-secondary-foreground-default: #b5b5bc;
72
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
73
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
66
74
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
67
75
  --pds-color-button-critical-background-active: #e00000;
68
76
  --pds-color-button-critical-background-default: var(--pds-color-status-critical-utility);
@@ -91,8 +99,8 @@
91
99
  --pds-color-button-secondary-border-active: #20232c;
92
100
  --pds-color-button-secondary-border-default: #6d6d78;
93
101
  --pds-color-button-secondary-border-hover: #ffffff;
94
- --pds-color-button-secondary-foreground-active: #b5b5bc;
95
- --pds-color-button-secondary-foreground-default: #b5b5bc;
102
+ --pds-color-button-secondary-foreground-active: #e7e7eb;
103
+ --pds-color-button-secondary-foreground-default: #e7e7eb;
96
104
  --pds-color-button-secondary-foreground-hover: #ffffff;
97
105
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
98
106
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
@@ -103,30 +111,35 @@
103
111
  --pds-color-code-inline-background: #1a1b20;
104
112
  --pds-color-code-inline-border: #20232c;
105
113
  --pds-color-code-inline-text: #ffffff;
106
- --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
114
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
107
115
  --pds-color-dashboard-nav-background-admin: #252038;
108
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
116
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
109
117
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
110
118
  --pds-color-dashboard-nav-item-background-hover: #6d6d78;
111
119
  --pds-color-dashboard-nav-item-background-hover-admin: #121219;
112
- --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
113
- --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
114
- --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
115
- --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
116
- --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
120
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
121
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
122
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
123
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
124
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
117
125
  --pds-color-dropdown-background: #20232c;
118
- --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
119
- --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
120
- --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
126
+ --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
127
+ --pds-color-dropdown-foreground: var(--pds-color-fg-default);
128
+ --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
121
129
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
122
130
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
123
131
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
124
132
  --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
125
133
  --pds-color-expansion-panel-hover: #20232c;
126
134
  --pds-color-expansion-panel-open: #20232c;
127
- --pds-color-foreground-default: #ffffff;
128
- --pds-color-foreground-default-secondary: #b5b5bc;
129
- --pds-color-foreground-reverse: #121219;
135
+ --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
136
+ --pds-color-fg-default: #ffffff;
137
+ --pds-color-fg-default-secondary: #e7e7eb;
138
+ --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
139
+ --pds-color-fg-info: var(--pds-color-status-info-foreground);
140
+ --pds-color-fg-reverse: #121219;
141
+ --pds-color-fg-success: var(--pds-color-status-success-foreground);
142
+ --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
130
143
  --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
131
144
  --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
132
145
  --pds-color-icon-button-reverse-background-active: #6a6e7a;
@@ -175,7 +188,7 @@
175
188
  --pds-color-segmented-button-background-hover: #121219;
176
189
  --pds-color-segmented-button-border-active: #9786e2;
177
190
  --pds-color-segmented-button-foreground-active: #9786e2;
178
- --pds-color-segmented-button-foreground-default: #b5b5bc;
191
+ --pds-color-segmented-button-foreground-default: #e7e7eb;
179
192
  --pds-color-segmented-button-foreground-hover: #9786e2;
180
193
  --pds-color-social-rss: #f3763a;
181
194
  --pds-color-status-critical-background: #570000;
@@ -189,16 +202,16 @@
189
202
  --pds-color-status-info-utility: #005cc8;
190
203
  --pds-color-status-neutral-background: #6d6d78;
191
204
  --pds-color-status-neutral-foreground: #ffffff;
192
- --pds-color-status-neutral-utility: #b5b5bc;
205
+ --pds-color-status-neutral-utility: #e7e7eb;
193
206
  --pds-color-status-success-background: #002f07;
194
207
  --pds-color-status-success-foreground: #0dab25;
195
208
  --pds-color-status-success-utility: #00710f;
196
209
  --pds-color-status-warning-background: #481801;
197
210
  --pds-color-status-warning-foreground: #ffa23b;
198
211
  --pds-color-status-warning-utility: #bd5b00;
199
- --pds-color-text-default: #ffffff;
200
- --pds-color-text-default-secondary: #b5b5bc;
201
- --pds-color-text-reverse: #121219;
212
+ --pds-color-text-default: var(--pds-color-fg-default);
213
+ --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
214
+ --pds-color-text-reverse: var(--pds-color-fg-reverse);
202
215
  --pds-color-tile-background: #1f2026;
203
216
  --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
204
217
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
package/_dist/css/design-tokens/pds-design-tokens-light-mode.css CHANGED
@@ -9,10 +9,7 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-default: #ffffff;
14
- --pds-color-background-default-secondary: #f4f4f4;
15
- --pds-color-background-reverse: #23232d;
12
+ :root, [data-theme="light"] {
16
13
  --pds-color-badge-indicator-brand-background: #4f32ce;
17
14
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
15
  --pds-color-badge-indicator-critical-background: #bc1c11;
@@ -39,10 +36,21 @@
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
37
  --pds-color-banner-warning-background: #ffa126;
41
38
  --pds-color-banner-warning-foreground: #23232d;
39
+ --pds-color-bg-critical: var(--pds-color-status-critical-background);
40
+ --pds-color-bg-default: #ffffff;
41
+ --pds-color-bg-default-secondary: #f4f4f4;
42
+ --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
43
+ --pds-color-bg-info: var(--pds-color-status-info-background);
44
+ --pds-color-bg-reverse: #23232d;
45
+ --pds-color-bg-success: var(--pds-color-status-success-background);
46
+ --pds-color-bg-transparent: rgba(0, 0, 0, 0);
47
+ --pds-color-bg-warning: var(--pds-color-status-warning-background);
42
48
  --pds-color-border-brand: #e5e0f8;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
43
50
  --pds-color-border-default: #e3e4e5;
44
51
  --pds-color-border-input: #c3c5c9;
45
52
  --pds-color-border-separator: #c3c5c9;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
46
54
  --pds-color-brand-accent-100: #ffe5f6;
47
55
  --pds-color-brand-accent-200: #ff99dc;
48
56
  --pds-color-brand-accent-300: #ff4cc3;
@@ -101,7 +109,7 @@
101
109
  --pds-color-button-critical-secondary-foreground-default: var(--pds-color-status-critical-foreground);
102
110
  --pds-color-button-critical-secondary-foreground-hover: var(--pds-color-status-critical-foreground);
103
111
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
104
- --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
112
+ --pds-color-button-navbar-foreground-default: var(--pds-color-fg-default);
105
113
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
106
114
  --pds-color-button-primary-background-active: #12026f;
107
115
  --pds-color-button-primary-background-default: #4f32ce;
@@ -127,8 +135,8 @@
127
135
  --pds-color-button-subtle-foreground-default: #4f32ce;
128
136
  --pds-color-button-subtle-foreground-hover: #3017a1;
129
137
  --pds-color-card-background: #ffffff;
130
- --pds-color-code-block-dark-background: var(--pds-color-background-reverse);
131
- --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
138
+ --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
139
+ --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
132
140
  --pds-color-code-block-dark-highlight: #474954;
133
141
  --pds-color-code-block-dark-line-prefix: #9699a1;
134
142
  --pds-color-code-block-light-background: #eff0f0;
@@ -138,35 +146,40 @@
138
146
  --pds-color-code-inline-background: #f4f3fc;
139
147
  --pds-color-code-inline-border: #e5e0f8;
140
148
  --pds-color-code-inline-text: #000000;
141
- --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
149
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
142
150
  --pds-color-dashboard-nav-background-admin: #edecf8;
143
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
151
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
144
152
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
145
153
  --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
146
154
  --pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
147
- --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
148
- --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
149
- --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
150
- --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
151
- --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
155
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
156
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
157
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
158
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
159
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
152
160
  --pds-color-datavis-1: #003f5c;
153
161
  --pds-color-datavis-2: #006779;
154
162
  --pds-color-datavis-3: #008d6f;
155
163
  --pds-color-datavis-4: #62ad43;
156
164
  --pds-color-datavis-5: #ddbd16;
157
- --pds-color-dropdown-background: var(--pds-color-background-default);
158
- --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
159
- --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
160
- --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
165
+ --pds-color-dropdown-background: var(--pds-color-bg-default);
166
+ --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
167
+ --pds-color-dropdown-foreground: var(--pds-color-fg-default);
168
+ --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
161
169
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
162
170
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
163
171
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
164
172
  --pds-color-dropdown-top-border: #dfdfdf;
165
173
  --pds-color-expansion-panel-hover: #f4f4f4;
166
174
  --pds-color-expansion-panel-open: #f4f4f4;
167
- --pds-color-foreground-default: #23232d;
168
- --pds-color-foreground-default-secondary: #6a6e7a;
169
- --pds-color-foreground-reverse: #ffffff;
175
+ --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
176
+ --pds-color-fg-default: #23232d;
177
+ --pds-color-fg-default-secondary: #6a6e7a;
178
+ --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
179
+ --pds-color-fg-info: var(--pds-color-status-info-foreground);
180
+ --pds-color-fg-reverse: #ffffff;
181
+ --pds-color-fg-success: var(--pds-color-status-success-foreground);
182
+ --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
170
183
  --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
171
184
  --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
172
185
  --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
@@ -305,9 +318,9 @@
305
318
  --pds-color-tag-8-foreground: #9a4e1c;
306
319
  --pds-color-tag-9-background: #ceecf9;
307
320
  --pds-color-tag-9-foreground: #366880;
308
- --pds-color-text-default: #23232d;
309
- --pds-color-text-default-secondary: #6a6e7a;
310
- --pds-color-text-reverse: #ffffff;
321
+ --pds-color-text-default: var(--pds-color-fg-default);
322
+ --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
323
+ --pds-color-text-reverse: var(--pds-color-fg-reverse);
311
324
  --pds-color-tile-background: #ffffff;
312
325
  --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
313
326
  --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);