@pantheon-systems/pds-design-tokens 1.0.0-dev.98 → 1.0.0-rc.0

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 (9) hide show
  1. package/README.md +1 -1
  2. package/build/css/pds-design-tokens-dark-mode.css +173 -172
  3. package/build/css/pds-design-tokens-light-mode.css +280 -180
  4. package/build/css/pds-design-tokens.css +71 -30
  5. package/build/figma/pds-design-tokens-figma.json +14339 -10260
  6. package/build/json/pds-design-tokens-dark-mode.json +3581 -3855
  7. package/build/json/pds-design-tokens-light-mode.json +4943 -2874
  8. package/build/json/pds-design-tokens.json +1251 -394
  9. package/package.json +7 -5
package/README.md CHANGED
@@ -30,4 +30,4 @@ We typically only designate tokens as public when they need to be available to o
30
30
 
31
31
  ## Color Modes
32
32
 
33
- Each color or elevation token is designated as light-mode or dark-mode. All non-color tokens are considered to be global tokens.
33
+ Each color or elevation token is designated as light-mode or dark-mode and will be assigned accordingly using a data-theme attribute. All non-color tokens are considered to be global tokens.
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -9,210 +9,211 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-brand-secondary: #4e39a8;
14
- --pds-color-background-default: #1d1d29;
15
- --pds-color-background-default-secondary: #282839;
16
- --pds-color-background-reverse: #e7e7eb;
17
- --pds-color-badge-border: #a6a3b4;
18
- --pds-color-badge-indicator-diamond-background: #f0fdff;
19
- --pds-color-badge-indicator-diamond-foreground: #388bff;
20
- --pds-color-badge-indicator-early-access-background: #2abb7f;
21
- --pds-color-badge-indicator-early-access-foreground: #133527;
22
- --pds-color-badge-indicator-gold-background: #fff1a9;
12
+ [data-theme="dark"] {
13
+ --pds-color-badge-indicator-brand-background: #745dd8;
14
+ --pds-color-badge-indicator-brand-foreground: #ffffff;
15
+ --pds-color-badge-indicator-critical-background: #a70000;
16
+ --pds-color-badge-indicator-critical-foreground: #ffffff;
17
+ --pds-color-badge-indicator-diamond-background: #d3e7fd;
18
+ --pds-color-badge-indicator-diamond-foreground: #005cc8;
19
+ --pds-color-badge-indicator-gold-background: #ffe668;
23
20
  --pds-color-badge-indicator-gold-foreground: #705e00;
24
- --pds-color-badge-indicator-platinum-background: #d0c6ff;
25
- --pds-color-badge-indicator-platinum-foreground: #4e39a8;
21
+ --pds-color-badge-indicator-info-background: #005cc8;
22
+ --pds-color-badge-indicator-info-foreground: #ffffff;
23
+ --pds-color-badge-indicator-neutral-background: #6d6d78;
24
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
25
+ --pds-color-badge-indicator-platinum-background: #cbc2f0;
26
+ --pds-color-badge-indicator-platinum-foreground: #42318d;
26
27
  --pds-color-badge-indicator-silver-background: #e7e7eb;
27
- --pds-color-badge-indicator-silver-foreground: #504e62;
28
- --pds-color-badge-label: #e7e7eb;
29
- --pds-color-badge-status-critical: var(--pds-color-semantic-critical-foreground);
30
- --pds-color-badge-status-default: #858299;
31
- --pds-color-badge-status-discovery: var(--pds-color-semantic-discovery-foreground);
32
- --pds-color-badge-status-frozen: #d0c6ff;
33
- --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
34
- --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
35
- --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
36
- --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
28
+ --pds-color-badge-indicator-silver-foreground: #2f323d;
29
+ --pds-color-badge-indicator-success-background: #00710f;
30
+ --pds-color-badge-indicator-success-foreground: #ffffff;
31
+ --pds-color-badge-indicator-warning-background: #bd5b00;
32
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
33
+ --pds-color-banner-critical-background: #a70000;
37
34
  --pds-color-banner-critical-foreground: #ffffff;
38
- --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
35
+ --pds-color-banner-info-background: #005cc8;
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
- --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
41
- --pds-color-banner-warning-foreground: #121219;
42
- --pds-color-border-default: #504e62;
37
+ --pds-color-banner-warning-background: #bd5b00;
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);
48
+ --pds-color-border-brand: #9786e2;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
50
+ --pds-color-border-default: #6d6d78;
51
+ --pds-color-border-input: #6d6d78;
52
+ --pds-color-border-separator: #6d6d78;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
43
54
  --pds-color-brand-accent-default: #de0093;
44
- --pds-color-brand-primary-default: #ffdc28;
45
- --pds-color-brand-secondary-default: #8a70ff;
46
- --pds-color-breadcrumb-link: var(--pds-color-link-default);
47
- --pds-color-breadcrumb-separator: #858299;
48
- --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
49
- --pds-color-button-brand-background-active: #ddbd16;
50
- --pds-color-button-brand-background-default: #ffdc28;
51
- --pds-color-button-brand-background-hover: #ffe668;
52
- --pds-color-button-brand-border-active: #ddbd16;
53
- --pds-color-button-brand-border-default: #ffdc28;
54
- --pds-color-button-brand-border-hover: #ffe668;
55
+ --pds-color-brand-primary-default: #745dd8;
56
+ --pds-color-brand-secondary-default: #ffdc28;
57
+ --pds-color-button-brand-background-active: #ffe668;
58
+ --pds-color-button-brand-background-default: #ddbd16;
59
+ --pds-color-button-brand-background-hover: #ffdc28;
60
+ --pds-color-button-brand-border-active: #ffe668;
61
+ --pds-color-button-brand-border-default: #ddbd16;
62
+ --pds-color-button-brand-border-hover: #ffdc28;
55
63
  --pds-color-button-brand-foreground-active: #121219;
56
64
  --pds-color-button-brand-foreground-default: #121219;
57
65
  --pds-color-button-brand-foreground-hover: #121219;
58
- --pds-color-button-brand-secondary-background-active: #282839;
66
+ --pds-color-button-brand-secondary-background-active: #1a1b20;
59
67
  --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
60
- --pds-color-button-brand-secondary-background-hover: #504e62;
61
- --pds-color-button-brand-secondary-border-active: #504e62;
62
- --pds-color-button-brand-secondary-border-default: #a6a3b4;
68
+ --pds-color-button-brand-secondary-background-hover: #20232c;
69
+ --pds-color-button-brand-secondary-border-active: #20232c;
70
+ --pds-color-button-brand-secondary-border-default: #6d6d78;
63
71
  --pds-color-button-brand-secondary-border-hover: #ffffff;
64
72
  --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
65
73
  --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
66
74
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
67
- --pds-color-button-critical-background-active: #a22a1a;
68
- --pds-color-button-critical-background-default: #ca3521;
69
- --pds-color-button-critical-background-hover: #b6301e;
70
- --pds-color-button-critical-border-active: #a22a1a;
71
- --pds-color-button-critical-border-default: #ca3521;
72
- --pds-color-button-critical-border-hover: #b6301e;
75
+ --pds-color-button-critical-background-active: #e00000;
76
+ --pds-color-button-critical-background-default: var(--pds-color-status-critical-utility);
77
+ --pds-color-button-critical-background-hover: #c70000;
78
+ --pds-color-button-critical-border-active: #e00000;
79
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-utility);
80
+ --pds-color-button-critical-border-hover: #c70000;
73
81
  --pds-color-button-critical-foreground-active: #ffffff;
74
82
  --pds-color-button-critical-foreground-default: #ffffff;
75
83
  --pds-color-button-critical-foreground-hover: #ffffff;
76
- --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
84
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
77
85
  --pds-color-button-navbar-foreground-default: #ffffff;
78
- --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
79
- --pds-color-button-primary-background-active: #4e39a8;
80
- --pds-color-button-primary-background-default: #8a70ff;
81
- --pds-color-button-primary-background-hover: #ad9bff;
82
- --pds-color-button-primary-border-active: #4e39a8;
83
- --pds-color-button-primary-border-default: #8a70ff;
84
- --pds-color-button-primary-border-hover: #ad9bff;
86
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
87
+ --pds-color-button-primary-background-active: #8a78de;
88
+ --pds-color-button-primary-background-default: #42318d;
89
+ --pds-color-button-primary-background-hover: #745dd8;
90
+ --pds-color-button-primary-border-active: #8a78de;
91
+ --pds-color-button-primary-border-default: #42318d;
92
+ --pds-color-button-primary-border-hover: #745dd8;
85
93
  --pds-color-button-primary-foreground-active: #ffffff;
86
94
  --pds-color-button-primary-foreground-default: #ffffff;
87
95
  --pds-color-button-primary-foreground-hover: #ffffff;
88
- --pds-color-button-secondary-background-active: #282839;
96
+ --pds-color-button-secondary-background-active: #1a1b20;
89
97
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
90
- --pds-color-button-secondary-background-hover: #504e62;
91
- --pds-color-button-secondary-border-active: #504e62;
92
- --pds-color-button-secondary-border-default: #a6a3b4;
98
+ --pds-color-button-secondary-background-hover: #20232c;
99
+ --pds-color-button-secondary-border-active: #20232c;
100
+ --pds-color-button-secondary-border-default: #6d6d78;
93
101
  --pds-color-button-secondary-border-hover: #ffffff;
94
102
  --pds-color-button-secondary-foreground-active: #e7e7eb;
95
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);
99
- --pds-color-button-subtle-foreground-active: var(--pds-color-link-active);
100
- --pds-color-button-subtle-foreground-default: #d0c6ff;
101
- --pds-color-button-subtle-foreground-hover: var(--pds-color-link-hover);
102
- --pds-color-card-border: #504e62;
103
- --pds-color-code-inline-background: #282839;
104
- --pds-color-code-inline-border: #504e62;
107
+ --pds-color-button-subtle-foreground-active: #745dd8;
108
+ --pds-color-button-subtle-foreground-default: #cbc2f0;
109
+ --pds-color-button-subtle-foreground-hover: #745dd8;
110
+ --pds-color-card-background: #1f2026;
111
+ --pds-color-code-inline-background: #1a1b20;
112
+ --pds-color-code-inline-border: #20232c;
105
113
  --pds-color-code-inline-text: #ffffff;
106
- --pds-color-expansion-panel-hover: #282839;
107
- --pds-color-expansion-panel-open: #282839;
108
- --pds-color-foreground-default: #ffffff;
109
- --pds-color-foreground-reverse: #1d1d29;
110
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
111
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
112
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
113
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
114
- --pds-color-icon-button-critical-background-active: var(--pds-color-button-critical-background-active);
115
- --pds-color-icon-button-critical-background-default: var(--pds-color-button-critical-background-default);
116
- --pds-color-icon-button-critical-background-hover: var(--pds-color-button-critical-background-hover);
117
- --pds-color-icon-button-critical-foreground-default: var(--pds-color-button-critical-foreground-default);
118
- --pds-color-icon-button-standard-background-active: #858299;
119
- --pds-color-icon-button-standard-background-default: rgba(0, 0, 0, 0);
120
- --pds-color-icon-button-standard-background-hover: #a6a3b4;
121
- --pds-color-icon-button-standard-foreground-default: #ffffff;
122
- --pds-color-input-action-background-hover: #504e62;
123
- --pds-color-input-background-critical: #1d1d29;
124
- --pds-color-input-background-default: #1d1d29;
125
- --pds-color-input-background-hover: #282839;
126
- --pds-color-input-border-critical: #ca3521;
127
- --pds-color-input-border-default: #858299;
128
- --pds-color-input-border-hover: #ad9bff;
129
- --pds-color-input-border-success: #2abb7f;
130
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
131
- --pds-color-input-checked-foreground: #ffffff;
132
- --pds-color-input-foreground-critical: #ca3521;
133
- --pds-color-input-foreground-default: #ffffff;
134
- --pds-color-input-foreground-success: #2abb7f;
135
- --pds-color-input-placeholder-text: #a6a3b4;
136
- --pds-color-input-toggle-switch-icon: #ffffff;
137
- --pds-color-input-toggle-switch-off: #504e62;
138
- --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
139
- --pds-color-interactive-focus: #36a3ff;
140
- --pds-color-interactive-link: #36a3ff;
141
- --pds-color-interactive-reverse-focus: #36a3ff;
142
- --pds-color-interactive-reverse-link: #36a3ff;
143
- --pds-color-link-active: #8a70ff;
144
- --pds-color-link-cta-active: #d0c6ff;
145
- --pds-color-link-cta-default: #8a70ff;
146
- --pds-color-link-cta-hover: #ad9bff;
147
- --pds-color-link-default: #36a3ff;
148
- --pds-color-link-hover: #8a70ff;
149
- --pds-color-link-visited: #8a70ff;
150
- --pds-color-menu-background: #282839;
151
- --pds-color-menu-item-background-active: #858299;
152
- --pds-color-menu-item-background-default: #282839;
153
- --pds-color-menu-item-background-hover: #504e62;
154
- --pds-color-menu-item-description-text: #a6a3b4;
155
- --pds-color-menu-item-foreground: #ffffff;
156
- --pds-color-menu-item-heading-text: #a6a3b4;
114
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
115
+ --pds-color-dashboard-nav-background-admin: #252038;
116
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
117
+ --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
118
+ --pds-color-dashboard-nav-item-background-hover: #6d6d78;
119
+ --pds-color-dashboard-nav-item-background-hover-admin: #121219;
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);
125
+ --pds-color-dropdown-background: #20232c;
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);
129
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
130
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
131
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
132
+ --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
133
+ --pds-color-expansion-panel-hover: #20232c;
134
+ --pds-color-expansion-panel-open: #20232c;
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);
143
+ --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
144
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
145
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
146
+ --pds-color-icon-button-reverse-background-hover: #474954;
147
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
148
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
149
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
150
+ --pds-color-input-file-upload-button-background-default: #2f323d;
151
+ --pds-color-input-file-upload-button-background-hover: #3d3c4d;
152
+ --pds-color-input-switch-icon: #ffffff;
153
+ --pds-color-interactive-background-active: #2f323d;
154
+ --pds-color-interactive-background-hover: #20232c;
155
+ --pds-color-interactive-focus: #4888fe;
156
+ --pds-color-interactive-link-active: #836fdc;
157
+ --pds-color-interactive-link-default: #4888fe;
158
+ --pds-color-interactive-link-hover: #9584e1;
159
+ --pds-color-interactive-link-visited: #9584e1;
160
+ --pds-color-interactive-reverse-focus: #0f62fe;
161
+ --pds-color-interactive-reverse-link-active: #3017a1;
162
+ --pds-color-interactive-reverse-link-default: #0f62fe;
163
+ --pds-color-interactive-reverse-link-hover: #4f32ce;
164
+ --pds-color-interactive-reverse-link-visited: #4f32ce;
165
+ --pds-color-nav-item-default-foreground-active: #9786e2;
166
+ --pds-color-nav-item-default-foreground-hover: #9786e2;
167
+ --pds-color-nav-item-default-foreground-trigger: #6d6d78;
168
+ --pds-color-nav-item-reverse-foreground-active: #42318d;
169
+ --pds-color-nav-item-reverse-foreground-hover: #42318d;
157
170
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
158
- --pds-color-panel-default-background: var(--pds-color-background-default);
159
- --pds-color-panel-default-border: var(--pds-color-border-default);
171
+ --pds-color-pagination-background-active: #2c205e;
172
+ --pds-color-pagination-background-hover: #42318d;
173
+ --pds-color-pagination-foreground-active: #eeebfa;
174
+ --pds-color-pagination-foreground-hover: #ffffff;
175
+ --pds-color-panel-overlay-background: #1f2026;
176
+ --pds-color-panel-raised-background: #1f2026;
160
177
  --pds-color-panel-sunken-background: #121219;
161
178
  --pds-color-partner-bitbucket: #004dc0;
162
179
  --pds-color-partner-drupal: #009cde;
163
180
  --pds-color-partner-gatsby: #663399;
164
- --pds-color-partner-gitlab: #ffedfb;
165
- --pds-color-partner-nextjs: #000000;
181
+ --pds-color-partner-github: #2da44e;
182
+ --pds-color-partner-gitlab: #fc6d26;
183
+ --pds-color-partner-google: #4285f4;
184
+ --pds-color-partner-nextjs: #ffffff;
166
185
  --pds-color-partner-wordpress: #0073aa;
167
- --pds-color-progress-complete: #2abb7f;
168
- --pds-color-progress-empty: #a6a3b4;
169
- --pds-color-progress-partial: #388bff;
170
- --pds-color-semantic-critical-background: #391813;
171
- --pds-color-semantic-critical-foreground: #ca3521;
172
- --pds-color-semantic-discovery-background: #231c3f;
173
- --pds-color-semantic-discovery-foreground: #8f7ee7;
174
- --pds-color-semantic-info-background: #082145;
175
- --pds-color-semantic-info-foreground: #388bff;
176
- --pds-color-semantic-success-background: #133527;
177
- --pds-color-semantic-success-foreground: #2abb7f;
178
- --pds-color-semantic-warning-background: #3d2e00;
179
- --pds-color-semantic-warning-foreground: #cf9f02;
180
- --pds-color-strength-fair: #cf9f02;
181
- --pds-color-strength-strong: #2abb7f;
182
- --pds-color-strength-very-weak: #a6a3b4;
183
- --pds-color-strength-weak: #ca3521;
184
- --pds-color-table-sort-arrow-active: #8a70ff;
185
- --pds-color-table-sort-arrow-inactive: #a6a3b4;
186
- --pds-color-tabs-accent: #ad9bff;
187
- --pds-color-tag-1-background: #705e00;
188
- --pds-color-tag-1-foreground: #fffbe9;
189
- --pds-color-tag-2-background: #4e39a8;
190
- --pds-color-tag-2-foreground: #f3f0ff;
191
- --pds-color-tag-3-background: #560039;
192
- --pds-color-tag-3-foreground: #ffe5f6;
193
- --pds-color-tag-4-background: #504e62;
194
- --pds-color-tag-4-foreground: #e7e7eb;
195
- --pds-color-tag-5-background: #700000;
196
- --pds-color-tag-5-foreground: #ffebeb;
197
- --pds-color-tag-6-background: #b15902;
198
- --pds-color-tag-6-foreground: #fffae6;
199
- --pds-color-tag-7-background: #164b35;
200
- --pds-color-tag-7-foreground: #dffcf0;
201
- --pds-color-tag-8-background: #0f5f6a;
202
- --pds-color-tag-8-foreground: #f0fdff;
203
- --pds-color-text-default: var(--pds-color-foreground-default);
204
- --pds-color-text-default-secondary: #a6a3b4;
205
- --pds-color-text-reverse: var(--pds-color-foreground-reverse);
206
- --pds-color-tile-background-active: #858299;
207
- --pds-color-tile-background-hover: #504e62;
208
- --pds-color-tile-separator: #504e62;
209
- --pds-color-toggle-button-background-off: #504e62;
210
- --pds-color-toggle-button-foreground-off: #e7e7eb;
211
- --pds-color-tooltip-background: #a6a3b4;
212
- --pds-color-tooltip-text: #121219;
213
- --pds-color-tooltip-trigger-icon-critical: #ca3521;
214
- --pds-color-tooltip-trigger-icon-default: #e7e7eb;
215
- --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
216
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
217
- --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
186
+ --pds-color-segmented-button-background-active: #121219;
187
+ --pds-color-segmented-button-background-default: #1a1b20;
188
+ --pds-color-segmented-button-background-hover: #121219;
189
+ --pds-color-segmented-button-border-active: #9786e2;
190
+ --pds-color-segmented-button-foreground-active: #9786e2;
191
+ --pds-color-segmented-button-foreground-default: #e7e7eb;
192
+ --pds-color-segmented-button-foreground-hover: #9786e2;
193
+ --pds-color-social-rss: #f3763a;
194
+ --pds-color-status-critical-background: #570000;
195
+ --pds-color-status-critical-foreground: #f9634c;
196
+ --pds-color-status-critical-utility: #a70000;
197
+ --pds-color-status-discovery-background: #321068;
198
+ --pds-color-status-discovery-foreground: #c08ffc;
199
+ --pds-color-status-discovery-utility: #a25ef6;
200
+ --pds-color-status-info-background: #002651;
201
+ --pds-color-status-info-foreground: #4096f3;
202
+ --pds-color-status-info-utility: #005cc8;
203
+ --pds-color-status-neutral-background: #6d6d78;
204
+ --pds-color-status-neutral-foreground: #ffffff;
205
+ --pds-color-status-neutral-utility: #e7e7eb;
206
+ --pds-color-status-success-background: #002f07;
207
+ --pds-color-status-success-foreground: #0dab25;
208
+ --pds-color-status-success-utility: #00710f;
209
+ --pds-color-status-warning-background: #481801;
210
+ --pds-color-status-warning-foreground: #ffa23b;
211
+ --pds-color-status-warning-utility: #bd5b00;
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);
215
+ --pds-color-tile-background: #1f2026;
216
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
217
+ --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
218
+ --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
218
219
  }