@pantheon-systems/pds-design-tokens 1.0.0-dev.13 → 1.0.0-dev.130

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 +180 -45
  3. package/build/css/pds-design-tokens-light-mode.css +226 -55
  4. package/build/css/pds-design-tokens.css +84 -1
  5. package/build/figma/pds-design-tokens-figma.json +14011 -5450
  6. package/build/json/pds-design-tokens-dark-mode.json +4845 -1750
  7. package/build/json/pds-design-tokens-light-mode.json +5665 -1561
  8. package/build/json/pds-design-tokens.json +1340 -238
  9. package/package.json +1 -1
  10. package/build/scss/_pds-design-tokens-dark-mode.scss +0 -104
  11. package/build/scss/_pds-design-tokens-light-mode.scss +0 -104
  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
@@ -10,11 +10,58 @@
10
10
  */
11
11
 
12
12
  :root {
13
+ --pds-color-background-brand-secondary: #4e39a8;
13
14
  --pds-color-background-default: #1d1d29;
15
+ --pds-color-background-default-secondary: #282839;
16
+ --pds-color-background-reverse: #e7e7eb;
17
+ --pds-color-badge-indicator-critical-background: #ef5c48;
18
+ --pds-color-badge-indicator-critical-foreground: #ffffff;
19
+ --pds-color-badge-indicator-diamond-background: #f0fdff;
20
+ --pds-color-badge-indicator-diamond-foreground: #388bff;
21
+ --pds-color-badge-indicator-gold-background: #fff1a9;
22
+ --pds-color-badge-indicator-gold-foreground: #705e00;
23
+ --pds-color-badge-indicator-info-background: #388bff;
24
+ --pds-color-badge-indicator-info-foreground: #ffffff;
25
+ --pds-color-badge-indicator-neutral-background: #504e62;
26
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
27
+ --pds-color-badge-indicator-platinum-background: #d0c6ff;
28
+ --pds-color-badge-indicator-platinum-foreground: #4e39a8;
29
+ --pds-color-badge-indicator-silver-background: #a6a3b4;
30
+ --pds-color-badge-indicator-silver-foreground: var(--pds-color-text-default-secondary);
31
+ --pds-color-badge-indicator-success-background: #2abb7f;
32
+ --pds-color-badge-indicator-success-foreground: #ffffff;
33
+ --pds-color-badge-indicator-warning-background: #cf9f02;
34
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
35
+ --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
36
+ --pds-color-badge-status-dot-default: #858299;
37
+ --pds-color-badge-status-dot-disabled: #858299;
38
+ --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
39
+ --pds-color-badge-status-dot-frozen: #d0c6ff;
40
+ --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
41
+ --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
42
+ --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
43
+ --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
44
+ --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
45
+ --pds-color-badge-status-neutral-label: var(--pds-color-text-default-secondary);
46
+ --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
47
+ --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
48
+ --pds-color-badge-status-reverse-label: var(--pds-color-text-reverse);
49
+ --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
50
+ --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
51
+ --pds-color-badge-status-transparent-label: var(--pds-color-text-default-secondary);
52
+ --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
53
+ --pds-color-banner-critical-foreground: #ffffff;
54
+ --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
55
+ --pds-color-banner-info-foreground: #ffffff;
56
+ --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
+ --pds-color-banner-warning-foreground: #121219;
14
58
  --pds-color-border-default: #504e62;
15
59
  --pds-color-brand-accent-default: #de0093;
16
60
  --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #6947ff;
61
+ --pds-color-brand-secondary-default: #8a70ff;
62
+ --pds-color-breadcrumb-link: var(--pds-color-link-default);
63
+ --pds-color-breadcrumb-separator: #858299;
64
+ --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
18
65
  --pds-color-button-brand-background-active: #ddbd16;
19
66
  --pds-color-button-brand-background-default: #ffdc28;
20
67
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,21 +71,33 @@
24
71
  --pds-color-button-brand-foreground-active: #121219;
25
72
  --pds-color-button-brand-foreground-default: #121219;
26
73
  --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;
74
+ --pds-color-button-brand-secondary-background-active: #282839;
75
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
76
+ --pds-color-button-brand-secondary-background-hover: #504e62;
77
+ --pds-color-button-brand-secondary-border-active: #504e62;
78
+ --pds-color-button-brand-secondary-border-default: #a6a3b4;
79
+ --pds-color-button-brand-secondary-border-hover: #ffffff;
80
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
81
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
82
+ --pds-color-button-brand-secondary-foreground-hover: #ffffff;
83
+ --pds-color-button-critical-background-active: #4b2d28;
84
+ --pds-color-button-critical-background-default: var(--pds-color-background-default);
85
+ --pds-color-button-critical-background-hover: var(--pds-color-semantic-critical-background);
86
+ --pds-color-button-critical-border-active: var(--pds-color-semantic-critical-foreground);
87
+ --pds-color-button-critical-border-default: var(--pds-color-semantic-critical-foreground);
88
+ --pds-color-button-critical-border-hover: var(--pds-color-semantic-critical-foreground);
89
+ --pds-color-button-critical-foreground-active: var(--pds-color-semantic-critical-foreground);
90
+ --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
91
+ --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
92
+ --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
93
+ --pds-color-button-navbar-foreground-default: #ffffff;
94
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
95
+ --pds-color-button-primary-background-active: #4e39a8;
96
+ --pds-color-button-primary-background-default: #8a70ff;
97
+ --pds-color-button-primary-background-hover: #ad9bff;
98
+ --pds-color-button-primary-border-active: #4e39a8;
99
+ --pds-color-button-primary-border-default: #8a70ff;
100
+ --pds-color-button-primary-border-hover: #ad9bff;
42
101
  --pds-color-button-primary-foreground-active: #ffffff;
43
102
  --pds-color-button-primary-foreground-default: #ffffff;
44
103
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -51,35 +110,55 @@
51
110
  --pds-color-button-secondary-foreground-active: #e7e7eb;
52
111
  --pds-color-button-secondary-foreground-default: #e7e7eb;
53
112
  --pds-color-button-secondary-foreground-hover: #ffffff;
54
- --pds-color-button-subtle-background-active: #282839;
55
113
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #504e62;
57
114
  --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;
115
+ --pds-color-button-subtle-foreground-active: var(--pds-color-link-active);
116
+ --pds-color-button-subtle-foreground-default: #d0c6ff;
117
+ --pds-color-button-subtle-foreground-hover: var(--pds-color-link-hover);
118
+ --pds-color-card-border: #504e62;
119
+ --pds-color-code-inline-background: #282839;
120
+ --pds-color-code-inline-border: #504e62;
121
+ --pds-color-code-inline-text: #ffffff;
122
+ --pds-color-expansion-panel-hover: #282839;
123
+ --pds-color-expansion-panel-open: #282839;
61
124
  --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%);
125
+ --pds-color-foreground-reverse: #1d1d29;
126
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
127
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
128
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
129
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
130
+ --pds-color-icon-button-background-active: #858299;
131
+ --pds-color-icon-button-background-default: rgba(0, 0, 0, 0);
132
+ --pds-color-icon-button-background-hover: #a6a3b4;
133
+ --pds-color-icon-button-foreground-default: #ffffff;
134
+ --pds-color-input-action-background-hover: #504e62;
66
135
  --pds-color-input-background-critical: #1d1d29;
67
136
  --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;
137
+ --pds-color-input-background-hover: #282839;
138
+ --pds-color-input-border-critical: #ef5c48;
139
+ --pds-color-input-border-default: #858299;
140
+ --pds-color-input-border-hover: #ad9bff;
141
+ --pds-color-input-border-success: #2abb7f;
72
142
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
73
143
  --pds-color-input-checked-foreground: #ffffff;
74
- --pds-color-input-foreground-critical: #e05757;
144
+ --pds-color-input-foreground-critical: #ef5c48;
75
145
  --pds-color-input-foreground-default: #ffffff;
76
- --pds-color-input-foreground-success: #22a06b;
146
+ --pds-color-input-foreground-success: #2abb7f;
77
147
  --pds-color-input-placeholder-text: #a6a3b4;
148
+ --pds-color-input-toggle-switch-icon: #ffffff;
149
+ --pds-color-input-toggle-switch-off: #504e62;
150
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
78
151
  --pds-color-interactive-focus: #36a3ff;
79
- --pds-color-link-active: #2776b9;
152
+ --pds-color-interactive-link: #36a3ff;
153
+ --pds-color-interactive-reverse-focus: #36a3ff;
154
+ --pds-color-interactive-reverse-link: #36a3ff;
155
+ --pds-color-link-active: #8a70ff;
156
+ --pds-color-link-cta-active: #d0c6ff;
157
+ --pds-color-link-cta-default: #8a70ff;
158
+ --pds-color-link-cta-hover: #ad9bff;
80
159
  --pds-color-link-default: #36a3ff;
81
- --pds-color-link-hover: #2776b9;
82
- --pds-color-link-visited: #967fff;
160
+ --pds-color-link-hover: #8a70ff;
161
+ --pds-color-link-visited: #8a70ff;
83
162
  --pds-color-menu-background: #282839;
84
163
  --pds-color-menu-item-background-active: #858299;
85
164
  --pds-color-menu-item-background-default: #282839;
@@ -87,21 +166,77 @@
87
166
  --pds-color-menu-item-description-text: #a6a3b4;
88
167
  --pds-color-menu-item-foreground: #ffffff;
89
168
  --pds-color-menu-item-heading-text: #a6a3b4;
169
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
170
+ --pds-color-panel-critical-border: #ef5c48;
90
171
  --pds-color-panel-default-background: var(--pds-color-background-default);
91
172
  --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
173
  --pds-color-panel-sunken-background: #121219;
97
- --pds-color-panel-sunken-border: #121219;
98
- --pds-color-text-default: #ffffff;
174
+ --pds-color-partner-bitbucket: #004dc0;
175
+ --pds-color-partner-drupal: #009cde;
176
+ --pds-color-partner-gatsby: #663399;
177
+ --pds-color-partner-gitlab: #ffedfb;
178
+ --pds-color-partner-nextjs: #000000;
179
+ --pds-color-partner-wordpress: #0073aa;
180
+ --pds-color-progress-complete: #2abb7f;
181
+ --pds-color-progress-empty: #a6a3b4;
182
+ --pds-color-progress-partial: #388bff;
183
+ --pds-color-semantic-critical-background: #391813;
184
+ --pds-color-semantic-critical-foreground: #ef5c48;
185
+ --pds-color-semantic-discovery-background: #231c3f;
186
+ --pds-color-semantic-discovery-foreground: #8f7ee7;
187
+ --pds-color-semantic-info-background: #082145;
188
+ --pds-color-semantic-info-foreground: #388bff;
189
+ --pds-color-semantic-success-background: #133527;
190
+ --pds-color-semantic-success-foreground: #2abb7f;
191
+ --pds-color-semantic-warning-background: #3d2e00;
192
+ --pds-color-semantic-warning-foreground: #cf9f02;
193
+ --pds-color-side-nav-background-hover: #282839;
194
+ --pds-color-social-rss: #f3763a;
195
+ --pds-color-stepper-completed: #8a70ff;
196
+ --pds-color-stepper-current: #8a70ff;
197
+ --pds-color-stepper-default: #858299;
198
+ --pds-color-stepper-error: #ef5c48;
199
+ --pds-color-strength-fair: #cf9f02;
200
+ --pds-color-strength-strong: #2abb7f;
201
+ --pds-color-strength-very-weak: #a6a3b4;
202
+ --pds-color-strength-weak: #ef5c48;
203
+ --pds-color-table-sort-arrow-active: #8a70ff;
204
+ --pds-color-table-sort-arrow-inactive: #a6a3b4;
205
+ --pds-color-tabs-accent: #ad9bff;
206
+ --pds-color-tag-1-background: #705e00;
207
+ --pds-color-tag-1-foreground: #fffbe9;
208
+ --pds-color-tag-10-background: #5b440a;
209
+ --pds-color-tag-10-foreground: #efeadf;
210
+ --pds-color-tag-2-background: #4e39a8;
211
+ --pds-color-tag-2-foreground: #f3f0ff;
212
+ --pds-color-tag-3-background: #560039;
213
+ --pds-color-tag-3-foreground: #ffe5f6;
214
+ --pds-color-tag-4-background: #504e62;
215
+ --pds-color-tag-4-foreground: #e7e7eb;
216
+ --pds-color-tag-5-background: #700000;
217
+ --pds-color-tag-5-foreground: #ffebeb;
218
+ --pds-color-tag-6-background: #b15902;
219
+ --pds-color-tag-6-foreground: #fffae6;
220
+ --pds-color-tag-7-background: #164b35;
221
+ --pds-color-tag-7-foreground: #dffcf0;
222
+ --pds-color-tag-8-background: #0f5f6a;
223
+ --pds-color-tag-8-foreground: #f0fdff;
224
+ --pds-color-tag-9-background: #0155cc;
225
+ --pds-color-tag-9-foreground: #082145;
226
+ --pds-color-tag-remove-button: #a6a3b4;
227
+ --pds-color-text-default: var(--pds-color-foreground-default);
99
228
  --pds-color-text-default-secondary: #a6a3b4;
100
- --pds-color-text-headings: var(--pds-color-text-default);
101
- --pds-color-text-lead: var(--pds-color-text-default-secondary);
102
- --pds-color-text-overline: var(--pds-color-text-default-secondary);
103
- --pds-color-text-paragraph: var(--pds-color-text-default);
104
- --pds-color-text-quote: var(--pds-color-text-default-secondary);
229
+ --pds-color-text-reverse: var(--pds-color-foreground-reverse);
230
+ --pds-color-tile-background-active: #858299;
231
+ --pds-color-tile-background-hover: #504e62;
232
+ --pds-color-tile-separator: #504e62;
233
+ --pds-color-toggle-button-background-off: #504e62;
234
+ --pds-color-toggle-button-foreground-off: #e7e7eb;
235
+ --pds-color-tooltip-background: #a6a3b4;
236
+ --pds-color-tooltip-text: #121219;
237
+ --pds-color-tooltip-trigger-icon-critical: #ef5c48;
238
+ --pds-color-tooltip-trigger-icon-default: #e7e7eb;
239
+ --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
105
240
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
106
241
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
107
242
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -10,11 +10,58 @@
10
10
  */
11
11
 
12
12
  :root {
13
+ --pds-color-background-brand-secondary: #dfd8f5;
13
14
  --pds-color-background-default: #ffffff;
14
- --pds-color-border-default: #cfcfd3;
15
+ --pds-color-background-default-secondary: #f8f8f8;
16
+ --pds-color-background-reverse: #23232d;
17
+ --pds-color-badge-indicator-critical-background: #ca3521;
18
+ --pds-color-badge-indicator-critical-foreground: #ffffff;
19
+ --pds-color-badge-indicator-diamond-background: #cfe1fc;
20
+ --pds-color-badge-indicator-diamond-foreground: #035ad3;
21
+ --pds-color-badge-indicator-gold-background: #ffe668;
22
+ --pds-color-badge-indicator-gold-foreground: #705e00;
23
+ --pds-color-badge-indicator-info-background: #1d7afc;
24
+ --pds-color-badge-indicator-info-foreground: #ffffff;
25
+ --pds-color-badge-indicator-neutral-background: #6d6d78;
26
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
27
+ --pds-color-badge-indicator-platinum-background: #dfd8f5;
28
+ --pds-color-badge-indicator-platinum-foreground: #3017a1;
29
+ --pds-color-badge-indicator-silver-background: #cfcfd3;
30
+ --pds-color-badge-indicator-silver-foreground: #23232d;
31
+ --pds-color-badge-indicator-success-background: #218c5f;
32
+ --pds-color-badge-indicator-success-foreground: #ffffff;
33
+ --pds-color-badge-indicator-warning-background: #d97008;
34
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
35
+ --pds-color-badge-status-dot-critical: var(--pds-color-semantic-critical-foreground);
36
+ --pds-color-badge-status-dot-default: #cfcfd3;
37
+ --pds-color-badge-status-dot-disabled: #cfcfd3;
38
+ --pds-color-badge-status-dot-discovery: var(--pds-color-semantic-discovery-foreground);
39
+ --pds-color-badge-status-dot-frozen: #dfd8f5;
40
+ --pds-color-badge-status-dot-info: var(--pds-color-semantic-info-foreground);
41
+ --pds-color-badge-status-dot-success: var(--pds-color-semantic-success-foreground);
42
+ --pds-color-badge-status-dot-warning: var(--pds-color-semantic-warning-foreground);
43
+ --pds-color-badge-status-neutral-background: var(--pds-color-background-default);
44
+ --pds-color-badge-status-neutral-border: var(--pds-color-border-default);
45
+ --pds-color-badge-status-neutral-label: var(--pds-color-text-default-secondary);
46
+ --pds-color-badge-status-reverse-background: var(--pds-color-background-reverse);
47
+ --pds-color-badge-status-reverse-border: var(--pds-color-background-reverse);
48
+ --pds-color-badge-status-reverse-label: var(--pds-color-text-reverse);
49
+ --pds-color-badge-status-transparent-background: rgba(0, 0, 0, 0);
50
+ --pds-color-badge-status-transparent-border: var(--pds-color-border-default);
51
+ --pds-color-badge-status-transparent-label: var(--pds-color-text-default-secondary);
52
+ --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
53
+ --pds-color-banner-critical-foreground: #ffffff;
54
+ --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
55
+ --pds-color-banner-info-foreground: #ffffff;
56
+ --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
+ --pds-color-banner-warning-foreground: #23232d;
58
+ --pds-color-border-default: rgba(0, 0, 0, 0.11);
15
59
  --pds-color-brand-accent-default: #de0093;
16
60
  --pds-color-brand-primary-default: #ffdc28;
17
61
  --pds-color-brand-secondary-default: #3017a1;
62
+ --pds-color-breadcrumb-link: var(--pds-color-link-default);
63
+ --pds-color-breadcrumb-separator: #cfcfd3;
64
+ --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
18
65
  --pds-color-button-brand-background-active: #ddbd16;
19
66
  --pds-color-button-brand-background-default: #ffdc28;
20
67
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,84 +71,208 @@
24
71
  --pds-color-button-brand-foreground-active: #23232d;
25
72
  --pds-color-button-brand-foreground-default: #23232d;
26
73
  --pds-color-button-brand-foreground-hover: #23232d;
27
- --pds-color-button-critical-background-active: #700000;
28
- --pds-color-button-critical-background-default: #d61f1f;
29
- --pds-color-button-critical-background-hover: #f83333;
30
- --pds-color-button-critical-border-active: #700000;
31
- --pds-color-button-critical-border-default: #d61f1f;
32
- --pds-color-button-critical-border-hover: #f83333;
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: #11005d;
74
+ --pds-color-button-brand-secondary-background-active: #f1f1f1;
75
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
76
+ --pds-color-button-brand-secondary-background-hover: #f8f8f8;
77
+ --pds-color-button-brand-secondary-border-active: #23232d;
78
+ --pds-color-button-brand-secondary-border-default: #6d6d78;
79
+ --pds-color-button-brand-secondary-border-hover: #23232d;
80
+ --pds-color-button-brand-secondary-foreground-active: #23232d;
81
+ --pds-color-button-brand-secondary-foreground-default: #23232d;
82
+ --pds-color-button-brand-secondary-foreground-hover: #23232d;
83
+ --pds-color-button-critical-background-active: #ffdcd8;
84
+ --pds-color-button-critical-background-default: var(--pds-color-background-default);
85
+ --pds-color-button-critical-background-hover: var(--pds-color-semantic-critical-background);
86
+ --pds-color-button-critical-border-active: #b52f1d;
87
+ --pds-color-button-critical-border-default: var(--pds-color-semantic-critical-foreground);
88
+ --pds-color-button-critical-border-hover: var(--pds-color-semantic-critical-foreground);
89
+ --pds-color-button-critical-foreground-active: #b52f1d;
90
+ --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
91
+ --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
92
+ --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
93
+ --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
94
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
95
+ --pds-color-button-primary-background-active: #1b0874;
37
96
  --pds-color-button-primary-background-default: #3017a1;
38
- --pds-color-button-primary-background-hover: #5f41e5;
39
- --pds-color-button-primary-border-active: #11005d;
97
+ --pds-color-button-primary-background-hover: #654bd5;
98
+ --pds-color-button-primary-border-active: #1b0874;
40
99
  --pds-color-button-primary-border-default: #3017a1;
41
- --pds-color-button-primary-border-hover: #5f41e5;
100
+ --pds-color-button-primary-border-hover: #654bd5;
42
101
  --pds-color-button-primary-foreground-active: #ffffff;
43
102
  --pds-color-button-primary-foreground-default: #ffffff;
44
103
  --pds-color-button-primary-foreground-hover: #ffffff;
45
- --pds-color-button-secondary-background-active: #e5dbff;
104
+ --pds-color-button-secondary-background-active: #dfd8f5;
46
105
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
47
- --pds-color-button-secondary-background-hover: #f0ecff;
48
- --pds-color-button-secondary-border-active: #11005d;
106
+ --pds-color-button-secondary-background-hover: #f0edfb;
107
+ --pds-color-button-secondary-border-active: #1b0874;
49
108
  --pds-color-button-secondary-border-default: #3017a1;
50
- --pds-color-button-secondary-border-hover: #5f41e5;
51
- --pds-color-button-secondary-foreground-active: #11005d;
109
+ --pds-color-button-secondary-border-hover: #654bd5;
110
+ --pds-color-button-secondary-foreground-active: #1b0874;
52
111
  --pds-color-button-secondary-foreground-default: #3017a1;
53
112
  --pds-color-button-secondary-foreground-hover: #3017a1;
54
- --pds-color-button-subtle-background-active: #e5dbff;
55
113
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #f0ecff;
57
114
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
- --pds-color-button-subtle-foreground-active: #11005d;
115
+ --pds-color-button-subtle-foreground-active: #1b0874;
59
116
  --pds-color-button-subtle-foreground-default: #3017a1;
60
- --pds-color-button-subtle-foreground-hover: #3017a1;
117
+ --pds-color-button-subtle-foreground-hover: #654bd5;
118
+ --pds-color-card-border: var(--pds-color-border-default);
119
+ --pds-color-code-inline-background: #f0edfb;
120
+ --pds-color-code-inline-border: #dfd8f5;
121
+ --pds-color-code-inline-text: #000000;
122
+ --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
123
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
124
+ --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
125
+ --pds-color-dashboard-nav-item-background-hover: #e8e8e9;
126
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
127
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
128
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
129
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
130
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
131
+ --pds-color-expansion-panel-hover: #f1f1f1;
132
+ --pds-color-expansion-panel-open: #f1f1f1;
61
133
  --pds-color-foreground-default: #23232d;
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: #ffebeb;
134
+ --pds-color-foreground-reverse: #ffffff;
135
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
136
+ --pds-color-gradient-avatar-g01: var(--pds-color-gradient-sunrise);
137
+ --pds-color-gradient-avatar-g02: var(--pds-color-gradient-sunset);
138
+ --pds-color-gradient-avatar-g03: var(--pds-color-gradient-after-hours);
139
+ --pds-color-gradient-avatar-g04: var(--pds-color-gradient-midnight);
140
+ --pds-color-gradient-avatar-g05: linear-gradient(138deg, #E65F35 13.12%, #1B0874 93.73%);
141
+ --pds-color-gradient-avatar-g06: linear-gradient(138deg, #EF13AD 12.78%, #1B0874 97.85%);
142
+ --pds-color-gradient-avatar-g07: linear-gradient(139deg, #29B2FF 9.79%, #2365C0 50.54%, #1B0874 99.32%);
143
+ --pds-color-gradient-avatar-g08: linear-gradient(139deg, #00E0C3 6.57%, #0C7D9F 51.07%, #1B0874 97.18%);
144
+ --pds-color-gradient-avatar-g09: linear-gradient(319deg, #FFD808 8.18%, #DA8E32 38.74%, #9A0066 96.11%);
145
+ --pds-color-gradient-avatar-g10: linear-gradient(319deg, #FF99DC 13.01%, #6D41B4 72.52%, #371EA3 92.89%);
146
+ --pds-color-gradient-avatar-g11: linear-gradient(319deg, #FFF1A9 10.33%, #F0829F 53.22%, #DE0093 97.18%);
147
+ --pds-color-gradient-avatar-g12: linear-gradient(319deg, #96DAB7 14.62%, #1DACFC 53.22%, #1666D6 97.18%);
148
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
149
+ --pds-color-gradient-pastel-1: linear-gradient(175deg, #DFD8F55C 15%, #FFFFFF00 80%);
150
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
151
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
152
+ --pds-color-icon-button-background-active: #cfcfd3;
153
+ --pds-color-icon-button-background-default: rgba(0, 0, 0, 0);
154
+ --pds-color-icon-button-background-hover: #f1f1f1;
155
+ --pds-color-icon-button-foreground-default: #23232d;
156
+ --pds-color-input-action-background-hover: #f8f8f8;
157
+ --pds-color-input-background-critical: #ffedeb;
67
158
  --pds-color-input-background-default: #ffffff;
68
- --pds-color-input-border-critical: #d61f1f;
69
- --pds-color-input-border-default: #8f8f99;
70
- --pds-color-input-border-hover: var(--pds-color-interactive-focus);
71
- --pds-color-input-border-success: #1f845a;
159
+ --pds-color-input-background-hover: #f0edfb;
160
+ --pds-color-input-border-critical: #ca3521;
161
+ --pds-color-input-border-default: #cfcfd3;
162
+ --pds-color-input-border-hover: #654bd5;
163
+ --pds-color-input-border-success: #218c5f;
72
164
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
73
165
  --pds-color-input-checked-foreground: #ffffff;
74
- --pds-color-input-foreground-critical: #d61f1f;
166
+ --pds-color-input-foreground-critical: #ca3521;
75
167
  --pds-color-input-foreground-default: #23232d;
76
- --pds-color-input-foreground-success: #1f845a;
77
- --pds-color-input-placeholder-text: #71717c;
168
+ --pds-color-input-foreground-success: #218c5f;
169
+ --pds-color-input-placeholder-text: #6d6d78;
170
+ --pds-color-input-toggle-switch-icon: #ffffff;
171
+ --pds-color-input-toggle-switch-off: #6d6d78;
172
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
78
173
  --pds-color-interactive-focus: #0f62fe;
79
- --pds-color-link-active: #003cac;
174
+ --pds-color-interactive-link: #0f62fe;
175
+ --pds-color-interactive-reverse-focus: #36a3ff;
176
+ --pds-color-interactive-reverse-link: #36a3ff;
177
+ --pds-color-link-active: #654bd5;
178
+ --pds-color-link-cta-active: #1b0874;
179
+ --pds-color-link-cta-default: #3017a1;
180
+ --pds-color-link-cta-hover: #654bd5;
80
181
  --pds-color-link-default: #0f62fe;
81
- --pds-color-link-hover: #003cac;
82
- --pds-color-link-visited: #967fff;
182
+ --pds-color-link-hover: #654bd5;
183
+ --pds-color-link-visited: #654bd5;
184
+ --pds-color-logo-carousel-background: #654bd5;
185
+ --pds-color-logo-carousel-foreground: var(--pds-color-foreground-reverse);
83
186
  --pds-color-menu-background: #ffffff;
84
- --pds-color-menu-item-background-active: #cfcfd3;
187
+ --pds-color-menu-item-background-active: #f1f1f1;
85
188
  --pds-color-menu-item-background-default: #ffffff;
86
189
  --pds-color-menu-item-background-hover: #f1f1f1;
87
- --pds-color-menu-item-description-text: #71717c;
190
+ --pds-color-menu-item-description-text: #6d6d78;
88
191
  --pds-color-menu-item-foreground: #23232d;
89
- --pds-color-menu-item-heading-text: #71717c;
192
+ --pds-color-menu-item-heading-text: #6d6d78;
193
+ --pds-color-neutral-000: #ffffff;
194
+ --pds-color-neutral-100: #f8f8f8;
195
+ --pds-color-neutral-200: #f1f1f1;
196
+ --pds-color-neutral-300: #cfcfd3;
197
+ --pds-color-neutral-400: #6d6d78;
198
+ --pds-color-neutral-500: #23232d;
199
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
200
+ --pds-color-pager-background-active: #f0edfb;
201
+ --pds-color-pager-background-hover: #f1f1f1;
202
+ --pds-color-pager-foreground-active: #654bd5;
203
+ --pds-color-panel-critical-border: #ca3521;
90
204
  --pds-color-panel-default-background: var(--pds-color-background-default);
91
205
  --pds-color-panel-default-border: var(--pds-color-border-default);
92
- --pds-color-panel-overlay-background: var(--pds-color-background-default);
93
- --pds-color-panel-overlay-border: var(--pds-color-border-default);
94
- --pds-color-panel-raised-background: var(--pds-color-background-default);
95
- --pds-color-panel-raised-border: var(--pds-color-border-default);
96
206
  --pds-color-panel-sunken-background: #f1f1f1;
97
- --pds-color-panel-sunken-border: #f1f1f1;
98
- --pds-color-text-default: #23232d;
99
- --pds-color-text-default-secondary: #71717c;
100
- --pds-color-text-headings: var(--pds-color-text-default);
101
- --pds-color-text-lead: var(--pds-color-text-default-secondary);
102
- --pds-color-text-overline: var(--pds-color-text-default-secondary);
103
- --pds-color-text-paragraph: #23232d;
104
- --pds-color-text-quote: var(--pds-color-text-default-secondary);
105
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
106
- --pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
207
+ --pds-color-partner-bitbucket: #004dc0;
208
+ --pds-color-partner-drupal: #009cde;
209
+ --pds-color-partner-gatsby: #663399;
210
+ --pds-color-partner-gitlab: #ffedfb;
211
+ --pds-color-partner-nextjs: #000000;
212
+ --pds-color-partner-wordpress: #0073aa;
213
+ --pds-color-progress-complete: #218c5f;
214
+ --pds-color-progress-empty: #cfcfd3;
215
+ --pds-color-progress-partial: #1d7afc;
216
+ --pds-color-semantic-critical-background: #ffedeb;
217
+ --pds-color-semantic-critical-foreground: #ca3521;
218
+ --pds-color-semantic-critical-utility: #000000;
219
+ --pds-color-semantic-discovery-background: #eae6ff;
220
+ --pds-color-semantic-discovery-foreground: #8270db;
221
+ --pds-color-semantic-info-background: #e9f2ff;
222
+ --pds-color-semantic-info-foreground: #1d7afc;
223
+ --pds-color-semantic-success-background: #e3fcef;
224
+ --pds-color-semantic-success-foreground: #218c5f;
225
+ --pds-color-semantic-success-utility: #35ae7b;
226
+ --pds-color-semantic-warning-background: #fff7d6;
227
+ --pds-color-semantic-warning-foreground: #d97008;
228
+ --pds-color-side-nav-background-hover: #f0edfb;
229
+ --pds-color-social-rss: #f26522;
230
+ --pds-color-stepper-completed: #3017a1;
231
+ --pds-color-stepper-current: #3017a1;
232
+ --pds-color-stepper-default: #cfcfd3;
233
+ --pds-color-stepper-error: #ca3521;
234
+ --pds-color-strength-fair: #d97008;
235
+ --pds-color-strength-strong: #218c5f;
236
+ --pds-color-strength-very-weak: #cfcfd3;
237
+ --pds-color-strength-weak: #ca3521;
238
+ --pds-color-table-sort-arrow-active: #654bd5;
239
+ --pds-color-table-sort-arrow-inactive: #cfcfd3;
240
+ --pds-color-tabs-accent: #654bd5;
241
+ --pds-color-tag-1-background: #fffbe9;
242
+ --pds-color-tag-1-foreground: #705e00;
243
+ --pds-color-tag-10-background: #efeadf;
244
+ --pds-color-tag-10-foreground: #5b440a;
245
+ --pds-color-tag-2-background: #f0edfb;
246
+ --pds-color-tag-2-foreground: #3017a1;
247
+ --pds-color-tag-3-background: #ffe5f6;
248
+ --pds-color-tag-3-foreground: #9a0066;
249
+ --pds-color-tag-4-background: #f1f1f1;
250
+ --pds-color-tag-4-foreground: #4c4c4d;
251
+ --pds-color-tag-5-background: #fff0f0;
252
+ --pds-color-tag-5-foreground: #700000;
253
+ --pds-color-tag-6-background: #fff6eb;
254
+ --pds-color-tag-6-foreground: #ae5401;
255
+ --pds-color-tag-7-background: #dffcf0;
256
+ --pds-color-tag-7-foreground: #164b35;
257
+ --pds-color-tag-8-background: #dffbff;
258
+ --pds-color-tag-8-foreground: #036e7d;
259
+ --pds-color-tag-9-background: #e9f2ff;
260
+ --pds-color-tag-9-foreground: #0155cc;
261
+ --pds-color-tag-remove-button: #61616b;
262
+ --pds-color-text-default: var(--pds-color-foreground-default);
263
+ --pds-color-text-default-secondary: #6d6d78;
264
+ --pds-color-text-reverse: var(--pds-color-foreground-reverse);
265
+ --pds-color-tile-background-active: #f1f1f1;
266
+ --pds-color-tile-background-hover: #f8f8f8;
267
+ --pds-color-tile-separator: #cfcfd3;
268
+ --pds-color-toggle-button-background-off: #f1f1f1;
269
+ --pds-color-toggle-button-foreground-off: #6d6d78;
270
+ --pds-color-tooltip-background: #23232d;
271
+ --pds-color-tooltip-text: #ffffff;
272
+ --pds-color-tooltip-trigger-icon-critical: #ca3521;
273
+ --pds-color-tooltip-trigger-icon-default: #23232d;
274
+ --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
275
+ --pds-elevation-dropdown: 0px 1px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
276
+ --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);
277
+ --pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
107
278
  }