@pantheon-systems/pds-design-tokens 1.0.0-dev.12 → 1.0.0-dev.120

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 (12) hide show
  1. package/README.md +2 -3
  2. package/build/css/pds-design-tokens-dark-mode.css +288 -96
  3. package/build/css/pds-design-tokens-light-mode.css +197 -54
  4. package/build/css/pds-design-tokens.css +81 -1
  5. package/build/figma/pds-design-tokens-figma.json +12479 -5372
  6. package/build/json/pds-design-tokens-dark-mode.json +4652 -1708
  7. package/build/json/pds-design-tokens-light-mode.json +4929 -1657
  8. package/build/json/pds-design-tokens.json +1266 -235
  9. package/package.json +1 -1
  10. package/build/scss/_pds-design-tokens-dark-mode.scss +0 -103
  11. package/build/scss/_pds-design-tokens-light-mode.scss +0 -103
  12. package/build/scss/_pds-design-tokens.scss +0 -17
package/README.md CHANGED
@@ -11,7 +11,6 @@ Compiled tokens can be found in the `build` directory.
11
11
  PDS Design Tokens are provided in the following formats:
12
12
 
13
13
  - CSS Custom Properties
14
- - SASS Variables
15
14
  - JSON
16
15
  - Figma (formatted to sync to Figma styles)
17
16
 
@@ -21,11 +20,11 @@ Design tokens are specifically intended for the purpose of design and will be tr
21
20
 
22
21
  By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.
23
22
 
24
- For example, CSS and SCSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
23
+ For example, CSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
25
24
 
26
25
  ## Public and Private Tokens
27
26
 
28
- All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS and SCSS stylesheets.
27
+ All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS stylesheets.
29
28
 
30
29
  We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.
31
30
 
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -1,106 +1,298 @@
1
1
  /**
2
- *
2
+ *
3
3
  * Pantheon Systems
4
- *
4
+ *
5
5
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
6
  * !! DO NOT EDIT THIS FILE DIRECTLY !!
7
7
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- *
8
+ *
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-background-default: #1d1d29;
14
- --pds-color-border-default: #504e62;
15
- --pds-color-brand-accent-default: #de0093;
16
- --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #6947ff;
18
- --pds-color-button-brand-background-active: #ddbd16;
19
- --pds-color-button-brand-background-default: #ffdc28;
20
- --pds-color-button-brand-background-hover: #ffe668;
21
- --pds-color-button-brand-border-active: #ddbd16;
22
- --pds-color-button-brand-border-default: #ffdc28;
23
- --pds-color-button-brand-border-hover: #ffe668;
24
- --pds-color-button-brand-foreground-active: #121219;
25
- --pds-color-button-brand-foreground-default: #121219;
26
- --pds-color-button-brand-foreground-hover: #121219;
27
- --pds-color-button-critical-background-active: #9c2f2f;
28
- --pds-color-button-critical-background-default: #e05757;
29
- --pds-color-button-critical-background-hover: #be4242;
30
- --pds-color-button-critical-border-active: #9c2f2f;
31
- --pds-color-button-critical-border-default: #e05757;
32
- --pds-color-button-critical-border-hover: #be4242;
33
- --pds-color-button-critical-foreground-active: #ffffff;
34
- --pds-color-button-critical-foreground-default: #ffffff;
35
- --pds-color-button-critical-foreground-hover: #ffffff;
36
- --pds-color-button-primary-background-active: #4b32bb;
37
- --pds-color-button-primary-background-default: #6947ff;
38
- --pds-color-button-primary-background-hover: #7657ff;
39
- --pds-color-button-primary-border-active: #4b32bb;
40
- --pds-color-button-primary-border-default: #6947ff;
41
- --pds-color-button-primary-border-hover: #7657ff;
42
- --pds-color-button-primary-foreground-active: #ffffff;
43
- --pds-color-button-primary-foreground-default: #ffffff;
44
- --pds-color-button-primary-foreground-hover: #ffffff;
45
- --pds-color-button-secondary-background-active: #282839;
46
- --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
47
- --pds-color-button-secondary-background-hover: #504e62;
48
- --pds-color-button-secondary-border-active: #504e62;
49
- --pds-color-button-secondary-border-default: #a6a3b4;
50
- --pds-color-button-secondary-border-hover: #ffffff;
51
- --pds-color-button-secondary-foreground-active: #e7e7eb;
52
- --pds-color-button-secondary-foreground-default: #e7e7eb;
53
- --pds-color-button-secondary-foreground-hover: #ffffff;
54
- --pds-color-button-subtle-background-active: #282839;
55
- --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #504e62;
57
- --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
- --pds-color-button-subtle-foreground-active: #e7e7eb;
59
- --pds-color-button-subtle-foreground-default: #e7e7eb;
60
- --pds-color-button-subtle-foreground-hover: #ffffff;
61
- --pds-color-foreground-default: #ffffff;
62
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
66
- --pds-color-input-background-critical: #1d1d29;
67
- --pds-color-input-background-default: #1d1d29;
68
- --pds-color-input-border-critical: #e05757;
69
- --pds-color-input-border-default: #a6a3b4;
70
- --pds-color-input-border-hover: var(--pds-color-interactive-focus);
71
- --pds-color-input-border-success: #22a06b;
72
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
73
- --pds-color-input-checked-foreground: #ffffff;
74
- --pds-color-input-foreground-critical: #e05757;
75
- --pds-color-input-foreground-default: #ffffff;
76
- --pds-color-input-foreground-success: #22a06b;
77
- --pds-color-input-placeholder-text: #a6a3b4;
78
- --pds-color-interactive-focus: #36a3ff;
79
- --pds-color-link-active: #2776b9;
80
- --pds-color-link-default: #36a3ff;
81
- --pds-color-link-hover: #2776b9;
82
- --pds-color-link-visited: #967fff;
83
- --pds-color-menu-background: #282839;
84
- --pds-color-menu-item-background-active: #858299;
85
- --pds-color-menu-item-background-default: #282839;
86
- --pds-color-menu-item-background-hover: #504e62;
87
- --pds-color-menu-item-description-text: #a6a3b4;
88
- --pds-color-menu-item-foreground: #ffffff;
89
- --pds-color-menu-item-heading-text: #a6a3b4;
90
- --pds-color-panel-default-background: var(--pds-color-background-default);
91
- --pds-color-panel-default-border: var(--pds-color-border-default);
92
- --pds-color-panel-overlay-background: #282839;
93
- --pds-color-panel-overlay-border: #282839;
94
- --pds-color-panel-raised-background: #282839;
95
- --pds-color-panel-raised-border: var(--pds-color-border-default);
96
- --pds-color-panel-sunken-background: #121219;
97
- --pds-color-panel-sunken-border: #121219;
98
- --pds-color-text-default: #ffffff;
99
- --pds-color-text-headings: var(--pds-color-text-default);
100
- --pds-color-text-lead: #a6a3b4;
101
- --pds-color-text-overline: #a6a3b4;
102
- --pds-color-text-paragraph: var(--pds-color-text-default);
103
- --pds-color-text-quote: #a6a3b4;
104
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
105
- --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
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-indicator-diamond-background: #f0fdff;
18
+ --pds-color-badge-indicator-diamond-foreground: #388bff;
19
+ --pds-color-badge-indicator-gold-background: #fff1a9;
20
+ --pds-color-badge-indicator-gold-foreground: #705e00;
21
+ --pds-color-badge-indicator-info-background: #388bff;
22
+ --pds-color-badge-indicator-info-foreground: #ffffff;
23
+ --pds-color-badge-indicator-neutral-background: #504e62;
24
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
25
+ --pds-color-badge-indicator-platinum-background: #d0c6ff;
26
+ --pds-color-badge-indicator-platinum-foreground: #4e39a8;
27
+ --pds-color-badge-indicator-silver-background: #a6a3b4;
28
+ --pds-color-badge-indicator-silver-foreground: var(
29
+ --pds-color-text-default-secondary
30
+ );
31
+ --pds-color-badge-indicator-success-background: #2abb7f;
32
+ --pds-color-badge-indicator-success-foreground: #ffffff;
33
+ --pds-color-badge-status-dot-critical: var(
34
+ --pds-color-semantic-critical-foreground
35
+ );
36
+ --pds-color-badge-status-dot-default: #858299;
37
+ --pds-color-badge-status-dot-disabled: #858299;
38
+ --pds-color-badge-status-dot-discovery: var(
39
+ --pds-color-semantic-discovery-foreground
40
+ );
41
+ --pds-color-badge-status-dot-frozen: #d0c6ff;
42
+ --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
43
+ --pds-color-badge-status-dot-success: var(
44
+ --pds-color-semantic-success-foreground
45
+ );
46
+ --pds-color-badge-status-dot-warning: var(
47
+ --pds-color-semantic-warning-foreground
48
+ );
49
+ --pds-color-badge-status-neutral-background: var(
50
+ --pds-color-background-default
51
+ );
52
+ --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
53
+ --pds-color-badge-status-neutral-label: var(
54
+ --pds-color-text-default-secondary
55
+ );
56
+ --pds-color-badge-status-reverse-background: var(
57
+ --pds-color-background-reverse
58
+ );
59
+ --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
60
+ --pds-color-badge-status-reverse-label: var(--pds-color-text-reverse);
61
+ --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
62
+ --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
63
+ --pds-color-badge-status-transparent-label: var(
64
+ --pds-color-text-default-secondary
65
+ );
66
+ --pds-color-banner-critical-background: linear-gradient(
67
+ 135deg,
68
+ #ca3521 0%,
69
+ #b95898 100%
70
+ );
71
+ --pds-color-banner-critical-foreground: #ffffff;
72
+ --pds-color-banner-info-background: linear-gradient(
73
+ 315deg,
74
+ #1265da 0%,
75
+ #5f41e5 100%
76
+ );
77
+ --pds-color-banner-info-foreground: #ffffff;
78
+ --pds-color-banner-warning-background: linear-gradient(
79
+ 135deg,
80
+ #ddbd16 0%,
81
+ #db7612 100%
82
+ );
83
+ --pds-color-banner-warning-foreground: #121219;
84
+ --pds-color-border-default: #504e62;
85
+ --pds-color-brand-accent-default: #de0093;
86
+ --pds-color-brand-primary-default: #ffdc28;
87
+ --pds-color-brand-secondary-default: #8a70ff;
88
+ --pds-color-breadcrumb-link: var(--pds-color-link-default);
89
+ --pds-color-breadcrumb-separator: #858299;
90
+ --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
91
+ --pds-color-button-brand-background-active: #ddbd16;
92
+ --pds-color-button-brand-background-default: #ffdc28;
93
+ --pds-color-button-brand-background-hover: #ffe668;
94
+ --pds-color-button-brand-border-active: #ddbd16;
95
+ --pds-color-button-brand-border-default: #ffdc28;
96
+ --pds-color-button-brand-border-hover: #ffe668;
97
+ --pds-color-button-brand-foreground-active: #121219;
98
+ --pds-color-button-brand-foreground-default: #121219;
99
+ --pds-color-button-brand-foreground-hover: #121219;
100
+ --pds-color-button-brand-secondary-background-active: #282839;
101
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
102
+ --pds-color-button-brand-secondary-background-hover: #504e62;
103
+ --pds-color-button-brand-secondary-border-active: #504e62;
104
+ --pds-color-button-brand-secondary-border-default: #a6a3b4;
105
+ --pds-color-button-brand-secondary-border-hover: #ffffff;
106
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
107
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
108
+ --pds-color-button-brand-secondary-foreground-hover: #ffffff;
109
+ --pds-color-button-critical-background-active: #4b2d28;
110
+ --pds-color-button-critical-background-default: var(
111
+ --pds-color-background-default
112
+ );
113
+ --pds-color-button-critical-background-hover: var(
114
+ --pds-color-semantic-critical-background
115
+ );
116
+ --pds-color-button-critical-border-active: var(
117
+ --pds-color-semantic-critical-foreground
118
+ );
119
+ --pds-color-button-critical-border-default: var(
120
+ --pds-color-semantic-critical-foreground
121
+ );
122
+ --pds-color-button-critical-border-hover: var(
123
+ --pds-color-semantic-critical-foreground
124
+ );
125
+ --pds-color-button-critical-foreground-active: var(
126
+ --pds-color-semantic-critical-foreground
127
+ );
128
+ --pds-color-button-critical-foreground-default: var(
129
+ --pds-color-semantic-critical-foreground
130
+ );
131
+ --pds-color-button-critical-foreground-hover: var(
132
+ --pds-color-semantic-critical-foreground
133
+ );
134
+ --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
135
+ --pds-color-button-navbar-foreground-default: #ffffff;
136
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
137
+ --pds-color-button-primary-background-active: #4e39a8;
138
+ --pds-color-button-primary-background-default: #8a70ff;
139
+ --pds-color-button-primary-background-hover: #ad9bff;
140
+ --pds-color-button-primary-border-active: #4e39a8;
141
+ --pds-color-button-primary-border-default: #8a70ff;
142
+ --pds-color-button-primary-border-hover: #ad9bff;
143
+ --pds-color-button-primary-foreground-active: #ffffff;
144
+ --pds-color-button-primary-foreground-default: #ffffff;
145
+ --pds-color-button-primary-foreground-hover: #ffffff;
146
+ --pds-color-button-secondary-background-active: #282839;
147
+ --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
148
+ --pds-color-button-secondary-background-hover: #504e62;
149
+ --pds-color-button-secondary-border-active: #504e62;
150
+ --pds-color-button-secondary-border-default: #a6a3b4;
151
+ --pds-color-button-secondary-border-hover: #ffffff;
152
+ --pds-color-button-secondary-foreground-active: #e7e7eb;
153
+ --pds-color-button-secondary-foreground-default: #e7e7eb;
154
+ --pds-color-button-secondary-foreground-hover: #ffffff;
155
+ --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
156
+ --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
157
+ --pds-color-button-subtle-foreground-active: var(--pds-color-link-active);
158
+ --pds-color-button-subtle-foreground-default: #d0c6ff;
159
+ --pds-color-button-subtle-foreground-hover: var(--pds-color-link-hover);
160
+ --pds-color-card-border: #504e62;
161
+ --pds-color-code-inline-background: #282839;
162
+ --pds-color-code-inline-border: #504e62;
163
+ --pds-color-code-inline-text: #ffffff;
164
+ --pds-color-expansion-panel-hover: #282839;
165
+ --pds-color-expansion-panel-open: #282839;
166
+ --pds-color-foreground-default: #ffffff;
167
+ --pds-color-foreground-reverse: #1d1d29;
168
+ --pds-color-gradient-after-hours: linear-gradient(
169
+ 228.64deg,
170
+ #1b0874 41.87%,
171
+ #29b2ff 100%
172
+ );
173
+ --pds-color-gradient-midnight: linear-gradient(
174
+ 228.64deg,
175
+ #1b0874 46.34%,
176
+ #00e0c3 100%
177
+ );
178
+ --pds-color-gradient-sunrise: linear-gradient(
179
+ 227.79deg,
180
+ #1b0874 38.28%,
181
+ #e65f35 100%
182
+ );
183
+ --pds-color-gradient-sunset: linear-gradient(
184
+ 48.24deg,
185
+ #ef13ad 0%,
186
+ #1b0874 66.25%
187
+ );
188
+ --pds-color-icon-button-background-active: #858299;
189
+ --pds-color-icon-button-background-default: rgba(0, 0, 0, 0);
190
+ --pds-color-icon-button-background-hover: #a6a3b4;
191
+ --pds-color-icon-button-foreground-default: #ffffff;
192
+ --pds-color-input-action-background-hover: #504e62;
193
+ --pds-color-input-background-critical: #1d1d29;
194
+ --pds-color-input-background-default: #1d1d29;
195
+ --pds-color-input-background-hover: #282839;
196
+ --pds-color-input-border-critical: #ef5c48;
197
+ --pds-color-input-border-default: #858299;
198
+ --pds-color-input-border-hover: #ad9bff;
199
+ --pds-color-input-border-success: #2abb7f;
200
+ --pds-color-input-checked-background: var(--pds-color-interactive-focus);
201
+ --pds-color-input-checked-foreground: #ffffff;
202
+ --pds-color-input-foreground-critical: #ef5c48;
203
+ --pds-color-input-foreground-default: #ffffff;
204
+ --pds-color-input-foreground-success: #2abb7f;
205
+ --pds-color-input-placeholder-text: #a6a3b4;
206
+ --pds-color-input-toggle-switch-icon: #ffffff;
207
+ --pds-color-input-toggle-switch-off: #504e62;
208
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
209
+ --pds-color-interactive-focus: #36a3ff;
210
+ --pds-color-interactive-link: #36a3ff;
211
+ --pds-color-interactive-reverse-focus: #36a3ff;
212
+ --pds-color-interactive-reverse-link: #36a3ff;
213
+ --pds-color-link-active: #8a70ff;
214
+ --pds-color-link-cta-active: #d0c6ff;
215
+ --pds-color-link-cta-default: #8a70ff;
216
+ --pds-color-link-cta-hover: #ad9bff;
217
+ --pds-color-link-default: #36a3ff;
218
+ --pds-color-link-hover: #8a70ff;
219
+ --pds-color-link-visited: #8a70ff;
220
+ --pds-color-menu-background: #282839;
221
+ --pds-color-menu-item-background-active: #858299;
222
+ --pds-color-menu-item-background-default: #282839;
223
+ --pds-color-menu-item-background-hover: #504e62;
224
+ --pds-color-menu-item-description-text: #a6a3b4;
225
+ --pds-color-menu-item-foreground: #ffffff;
226
+ --pds-color-menu-item-heading-text: #a6a3b4;
227
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
228
+ --pds-color-panel-default-background: var(--pds-color-background-default);
229
+ --pds-color-panel-default-border: var(--pds-color-border-default);
230
+ --pds-color-panel-sunken-background: #121219;
231
+ --pds-color-partner-bitbucket: #004dc0;
232
+ --pds-color-partner-drupal: #009cde;
233
+ --pds-color-partner-gatsby: #663399;
234
+ --pds-color-partner-gitlab: #ffedfb;
235
+ --pds-color-partner-nextjs: #000000;
236
+ --pds-color-partner-wordpress: #0073aa;
237
+ --pds-color-progress-complete: #2abb7f;
238
+ --pds-color-progress-empty: #a6a3b4;
239
+ --pds-color-progress-partial: #388bff;
240
+ --pds-color-semantic-critical-background: #391813;
241
+ --pds-color-semantic-critical-foreground: #ef5c48;
242
+ --pds-color-semantic-discovery-background: #231c3f;
243
+ --pds-color-semantic-discovery-foreground: #8f7ee7;
244
+ --pds-color-semantic-info-background: #082145;
245
+ --pds-color-semantic-info-foreground: #388bff;
246
+ --pds-color-semantic-success-background: #133527;
247
+ --pds-color-semantic-success-foreground: #2abb7f;
248
+ --pds-color-semantic-warning-background: #3d2e00;
249
+ --pds-color-semantic-warning-foreground: #cf9f02;
250
+ --pds-color-side-nav-background-hover: #282839;
251
+ --pds-color-stepper-completed: #8a70ff;
252
+ --pds-color-stepper-current: #8a70ff;
253
+ --pds-color-stepper-default: #858299;
254
+ --pds-color-stepper-error: #ef5c48;
255
+ --pds-color-strength-fair: #cf9f02;
256
+ --pds-color-strength-strong: #2abb7f;
257
+ --pds-color-strength-very-weak: #a6a3b4;
258
+ --pds-color-strength-weak: #ef5c48;
259
+ --pds-color-table-sort-arrow-active: #8a70ff;
260
+ --pds-color-table-sort-arrow-inactive: #a6a3b4;
261
+ --pds-color-tabs-accent: #ad9bff;
262
+ --pds-color-tag-1-background: #705e00;
263
+ --pds-color-tag-1-foreground: #fffbe9;
264
+ --pds-color-tag-10-background: #5b440a;
265
+ --pds-color-tag-10-foreground: #efeadf;
266
+ --pds-color-tag-2-background: #4e39a8;
267
+ --pds-color-tag-2-foreground: #f3f0ff;
268
+ --pds-color-tag-3-background: #560039;
269
+ --pds-color-tag-3-foreground: #ffe5f6;
270
+ --pds-color-tag-4-background: #504e62;
271
+ --pds-color-tag-4-foreground: #e7e7eb;
272
+ --pds-color-tag-5-background: #700000;
273
+ --pds-color-tag-5-foreground: #ffebeb;
274
+ --pds-color-tag-6-background: #b15902;
275
+ --pds-color-tag-6-foreground: #fffae6;
276
+ --pds-color-tag-7-background: #164b35;
277
+ --pds-color-tag-7-foreground: #dffcf0;
278
+ --pds-color-tag-8-background: #0f5f6a;
279
+ --pds-color-tag-8-foreground: #f0fdff;
280
+ --pds-color-tag-9-background: #0155cc;
281
+ --pds-color-tag-9-foreground: #082145;
282
+ --pds-color-tag-remove-button: #a6a3b4;
283
+ --pds-color-text-default: var(--pds-color-foreground-default);
284
+ --pds-color-text-default-secondary: #a6a3b4;
285
+ --pds-color-text-reverse: var(--pds-color-foreground-reverse);
286
+ --pds-color-tile-background-active: #858299;
287
+ --pds-color-tile-background-hover: #504e62;
288
+ --pds-color-tile-separator: #504e62;
289
+ --pds-color-toggle-button-background-off: #504e62;
290
+ --pds-color-toggle-button-foreground-off: #e7e7eb;
291
+ --pds-color-tooltip-background: #a6a3b4;
292
+ --pds-color-tooltip-text: #121219;
293
+ --pds-color-tooltip-trigger-icon-critical: #ef5c48;
294
+ --pds-color-tooltip-trigger-icon-default: #e7e7eb;
295
+ --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
296
+ --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
297
+ --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
106
298
  }