genesys-spark 4.78.1 → 4.80.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 (10) hide show
  1. package/dist/css/flare/global.css +626 -412
  2. package/dist/css/flare/global.css.map +1 -1
  3. package/dist/css/flare/ui.css +492 -320
  4. package/dist/css/flare/ui.css.map +1 -1
  5. package/dist/css/legacy/global.css +325 -219
  6. package/dist/css/legacy/global.css.map +1 -1
  7. package/dist/css/legacy/ui.css +470 -384
  8. package/dist/css/legacy/ui.css.map +1 -1
  9. package/dist/index.js +2 -2
  10. package/package.json +1 -1
package/dist/css/legacy/global.css CHANGED
@@ -111,6 +111,8 @@
111
111
  --gse-core-colorLegacy-yellow-80: #fcd276;
112
112
  --gse-core-colorLegacy-yellow-90: #fce5b1;
113
113
  --gse-core-colorLegacy-yellow-100: #fdf8ec;
114
+ --gse-core-colorLegacy-yellow-110: #fff793;
115
+ --gse-core-colorLegacy-yellow-120: #ffef27;
114
116
  --gse-core-colorLegacy-secondary-yellowGreen: #ddd933;
115
117
  --gse-core-colorLegacy-secondary-oliveGreen: #868c1e;
116
118
  --gse-core-colorLegacy-secondary-aquaGreen: #1da8b3;
@@ -144,175 +146,230 @@
144
146
  --gse-core-opacity-50: 0.5;
145
147
  --gse-core-opacity-80: 0.8;
146
148
  --gse-core-letterSpacing-1: 1px;
147
- --gse-semantic-borderRadius-interactive-large: 4px;
148
- --gse-semantic-borderRadius-interactive-small: 4px;
149
- --gse-semantic-borderRadius-container-large: 16px;
150
- --gse-semantic-borderRadius-container-medium: 8px;
151
- --gse-semantic-borderRadius-container-small: 4px;
152
- --gse-semantic-borderRadius-formControl-input-large: 4px;
153
- --gse-semantic-borderRadius-formControl-input-medium: 8px;
154
- --gse-semantic-borderRadius-formControl-input-small: 4px;
155
- --gse-semantic-borderRadius-focus-full: 100%;
156
- --gse-semantic-borderRadius-focus-xlarge: 16px;
157
- --gse-semantic-borderRadius-focus-large: 8px;
158
- --gse-semantic-borderRadius-focus-medium: 8px;
159
- --gse-semantic-borderRadius-focus-small: 4px;
160
- --gse-semantic-borderRadius-focus-xsmall: 2px;
161
- --gse-semantic-fontFamily-headings: Roboto; /* The font family we use for headings and subheadings in this theme. */
162
149
  --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
163
- --gse-semantic-background-container-primary-10: #ffffff;
164
- --gse-semantic-background-container-primary-20: #fdfdfd;
165
- --gse-semantic-background-container-primary-30: #f6f7f9;
166
- --gse-semantic-background-container-primary-40: #e8ecf2;
167
- --gse-semantic-background-container-primary-50: #d7dce5;
168
- --gse-semantic-background-container-primary-60: #e2e6ee;
169
- --gse-semantic-background-container-secondary-10: #2a60c8;
170
- --gse-semantic-background-container-secondary-20: #2754ac;
171
- --gse-semantic-background-container-secondary-30: #23478f;
172
- --gse-semantic-background-container-tertiary-10: rgba(0, 0, 0, 0);
173
- --gse-semantic-background-container-tertiary-20: #6b7585;
174
- --gse-semantic-background-container-highContrast-10: #283243;
175
- --gse-semantic-background-container-highContrast-20: #1c3363;
176
- --gse-semantic-background-container-highContrast-30: #172b52;
177
- --gse-semantic-background-container-highContrast-40: #000000;
150
+ --gse-semantic-opacity-shroud: 0.8; /* The default opacity for shroud elements like the one on modals. */
151
+ --gse-semantic-theme-fontFamily-headings: Roboto; /* The font family we use for headings and subheadings in this theme. */
152
+ --gse-semantic-theme-fontFamily-body: Roboto; /* The font family we use for body and labels in this theme. */
153
+ --gse-semantic-theme-background-container-primary-10: #ffffff;
154
+ --gse-semantic-theme-background-container-primary-20: #fdfdfd;
155
+ --gse-semantic-theme-background-container-primary-30: #f6f7f9;
156
+ --gse-semantic-theme-background-container-primary-40: #e8ecf2;
157
+ --gse-semantic-theme-background-container-primary-50: #deeaff;
158
+ --gse-semantic-theme-background-container-primary-60: #e2e6ee;
159
+ --gse-semantic-theme-background-container-secondary-10: #2a60c8;
160
+ --gse-semantic-theme-background-container-secondary-20: #2754ac;
161
+ --gse-semantic-theme-background-container-secondary-30: #23478f;
162
+ --gse-semantic-theme-background-container-tertiary-10: rgba(0, 0, 0, 0);
163
+ --gse-semantic-theme-background-container-tertiary-20: #6b7585;
164
+ --gse-semantic-theme-background-container-highContrast-10: #283243;
165
+ --gse-semantic-theme-background-container-highContrast-20: #1c3363;
166
+ --gse-semantic-theme-background-container-highContrast-30: #172b52;
167
+ --gse-semantic-theme-background-container-highContrast-40: #000000;
168
+ --gse-semantic-theme-background-formControl-input-10: #f6f7f9;
169
+ --gse-semantic-theme-background-formControl-input-20: #6b7585;
170
+ --gse-semantic-theme-background-overlay-10: rgb(12.5% 16.1% 21.6% / 0.8);
171
+ --gse-semantic-theme-background-system-primary-10: #deeaff;
172
+ --gse-semantic-theme-background-system-primary-20: #75a8ff;
173
+ --gse-semantic-theme-background-system-primary-30: #2a60c8;
174
+ --gse-semantic-theme-background-system-primary-40: #2754ac;
175
+ --gse-semantic-theme-background-system-primary-50: #203b73;
176
+ --gse-semantic-theme-background-system-info-5: #deeaff;
177
+ --gse-semantic-theme-background-system-info-10: #deeaff;
178
+ --gse-semantic-theme-background-system-info-20: #75a8ff;
179
+ --gse-semantic-theme-background-system-info-30: #2a60c8;
180
+ --gse-semantic-theme-background-system-info-40: #203b73;
181
+ --gse-semantic-theme-background-system-info-50: #172b52;
182
+ --gse-semantic-theme-background-system-success-5: #eefcea;
183
+ --gse-semantic-theme-background-system-success-10: #eefcea;
184
+ --gse-semantic-theme-background-system-success-20: #95c189;
185
+ --gse-semantic-theme-background-system-success-30: #3c8527;
186
+ --gse-semantic-theme-background-system-success-40: #205a10;
187
+ --gse-semantic-theme-background-system-success-50: #0d3d00;
188
+ --gse-semantic-theme-background-system-warning-5: #fdf8ec;
189
+ --gse-semantic-theme-background-system-warning-10: #fdf8ec;
190
+ --gse-semantic-theme-background-system-warning-20: #fcd276;
191
+ --gse-semantic-theme-background-system-warning-30: #ffae00;
192
+ --gse-semantic-theme-background-system-warning-40: #976700;
193
+ --gse-semantic-theme-background-system-warning-50: #523800;
194
+ --gse-semantic-theme-background-system-error-5: #fceaea;
195
+ --gse-semantic-theme-background-system-error-10: #fceaea;
196
+ --gse-semantic-theme-background-system-error-20: #f37a7a;
197
+ --gse-semantic-theme-background-system-error-30: #ea0b0b;
198
+ --gse-semantic-theme-background-system-error-40: #8f0707;
199
+ --gse-semantic-theme-background-system-error-50: #520404;
200
+ --gse-semantic-theme-background-customAccents-bold-10: #203b73;
201
+ --gse-semantic-theme-background-customAccents-bold-20: #23478f;
202
+ --gse-semantic-theme-background-customAccents-bold-30: #b5b5eb;
203
+ --gse-semantic-theme-background-customAccents-bold-40: #205a10;
204
+ --gse-semantic-theme-background-customAccents-bold-50: #151d28;
205
+ --gse-semantic-theme-background-customAccents-bold-60: #75a8ff;
206
+ --gse-semantic-theme-background-customAccents-bold-70: #8452cf;
207
+ --gse-semantic-theme-background-customAccents-bold-80: #5e5782;
208
+ --gse-semantic-theme-background-customAccents-bold-90: #ff8fdd;
209
+ --gse-semantic-theme-background-customAccents-bold-100: #755000;
210
+ --gse-semantic-theme-background-customAccents-bold-110: #ddd933;
211
+ --gse-semantic-theme-background-customAccents-bold-120: #ffef27;
212
+ --gse-semantic-theme-background-customAccents-bold-130: #75a8ff;
213
+ --gse-semantic-theme-background-customAccents-subtle-10: lch(77.6 10.9 279);
214
+ --gse-semantic-theme-background-customAccents-subtle-20: lch(90.4 14.8 272);
215
+ --gse-semantic-theme-background-customAccents-subtle-30: lch(92.5 8.53 288);
216
+ --gse-semantic-theme-background-customAccents-subtle-40: #c2deb9;
217
+ --gse-semantic-theme-background-customAccents-subtle-50: #c8cfda;
218
+ --gse-semantic-theme-background-customAccents-subtle-60: lch(90.4 14.8 272);
219
+ --gse-semantic-theme-background-customAccents-subtle-70: lch(83.7 21.4 305);
220
+ --gse-semantic-theme-background-customAccents-subtle-80: lch(81.7 7.69 295);
221
+ --gse-semantic-theme-background-customAccents-subtle-90: lch(92.1 16.4 338);
222
+ --gse-semantic-theme-background-customAccents-subtle-100: #fcd276;
223
+ --gse-semantic-theme-background-customAccents-subtle-110: lch(95.5 22.7 98.8);
224
+ --gse-semantic-theme-background-customAccents-subtle-120: #fff793;
225
+ --gse-semantic-theme-background-customAccents-status-10: #09b581;
226
+ --gse-semantic-theme-background-customAccents-status-20: #e22245;
227
+ --gse-semantic-theme-background-customAccents-status-30: #f8c73e;
228
+ --gse-semantic-theme-background-customAccents-status-40: #4856cb;
229
+ --gse-semantic-theme-background-customAccents-status-50: #626e84;
230
+ --gse-semantic-theme-background-customAccents-status-60: #b74ba4;
231
+ --gse-semantic-theme-background-customAccents-status-70: #fe624d;
232
+ --gse-semantic-theme-foreground-primary-10: #3e4a5b;
233
+ --gse-semantic-theme-foreground-primary-20: #2e394c;
234
+ --gse-semantic-theme-foreground-primary-30: #2e394c;
235
+ --gse-semantic-theme-foreground-secondary-10: #ffffff;
236
+ --gse-semantic-theme-foreground-secondary-20: #596373;
237
+ --gse-semantic-theme-foreground-secondary-30: #4c5667;
238
+ --gse-semantic-theme-foreground-tertiary-10: #2e394c;
239
+ --gse-semantic-theme-foreground-tertiary-20: #2e394c;
240
+ --gse-semantic-theme-foreground-tertiary-30: #2e394c;
241
+ --gse-semantic-theme-foreground-tertiary-05: #75a8ff;
242
+ --gse-semantic-theme-foreground-highContrast-10: #ffffff;
243
+ --gse-semantic-theme-foreground-highContrast-20: #eff1f5;
244
+ --gse-semantic-theme-foreground-highContrast-30: #b4bccb;
245
+ --gse-semantic-theme-foreground-system-primary-10: #2a60c8;
246
+ --gse-semantic-theme-foreground-system-info-10: #2a60c8;
247
+ --gse-semantic-theme-foreground-system-success-10: #3c8527;
248
+ --gse-semantic-theme-foreground-system-warning-10: #ffae00;
249
+ --gse-semantic-theme-foreground-system-error-10: #ea0b0b;
250
+ --gse-semantic-theme-foreground-specialAccents-brand-10: #ff4f1f;
251
+ --gse-semantic-theme-foreground-specialAccents-ai-10: #8a5ecc;
252
+ --gse-semantic-theme-foreground-link-10: #2a60c8;
253
+ --gse-semantic-theme-foreground-link-20: #2754ac;
254
+ --gse-semantic-theme-foreground-link-30: #23478f;
255
+ --gse-semantic-theme-foreground-link-40: #8452cf;
256
+ --gse-semantic-theme-foreground-icon-10: #2e394c;
257
+ --gse-semantic-theme-foreground-formControl-clickInput-10: #2a60c8;
258
+ --gse-semantic-theme-foreground-formControl-clickInput-20: #2754ac;
259
+ --gse-semantic-theme-foreground-formControl-clickInput-30: #23478f;
260
+ --gse-semantic-theme-foreground-formControl-clickInput-50: #6b7585;
261
+ --gse-semantic-theme-border-focus-10: #aac9ff;
262
+ --gse-semantic-theme-border-divider-10: #ffffff;
263
+ --gse-semantic-theme-border-divider-20: #b4bccb;
264
+ --gse-semantic-theme-border-divider-30: #2a60c8;
265
+ --gse-semantic-theme-border-system-primary-10: #75a8ff;
266
+ --gse-semantic-theme-border-system-info-10: #75a8ff;
267
+ --gse-semantic-theme-border-system-success-10: #95c189;
268
+ --gse-semantic-theme-border-system-warning-10: #fcd276;
269
+ --gse-semantic-theme-border-system-error-10: #f37a7a;
270
+ --gse-semantic-theme-border-system-error-20: #ea0b0b;
271
+ --gse-semantic-theme-border-inputs-default-10: #6b7585;
272
+ --gse-semantic-theme-border-inputs-hover-10: #2754ac;
273
+ --gse-semantic-theme-border-inputs-active-10: #2a60c8;
274
+ --gse-semantic-theme-border-edges-default-10: #b4bccb;
275
+ --gse-semantic-theme-border-edges-default-20: #4c5667;
276
+ --gse-semantic-theme-border-edges-default-30: #2e394c;
277
+ --gse-semantic-theme-border-edges-default-05: #e2e6ee;
278
+ --gse-semantic-theme-border-edges-enabled-10: #2a60c8;
279
+ --gse-semantic-theme-border-edges-hover-10: #75a8ff;
280
+ --gse-semantic-theme-border-edges-hover-20: #23478f;
281
+ --gse-semantic-theme-border-edges-active-10: #2a60c8;
282
+ --gse-semantic-theme-borderRadius-interactive-xlarge: 100%;
283
+ --gse-semantic-theme-borderRadius-interactive-large: 4px;
284
+ --gse-semantic-theme-borderRadius-interactive-small: 4px;
285
+ --gse-semantic-theme-borderRadius-container-large: 4px;
286
+ --gse-semantic-theme-borderRadius-container-medium: 4px;
287
+ --gse-semantic-theme-borderRadius-container-small: 4px;
288
+ --gse-semantic-theme-borderRadius-formControl-input-large: 4px;
289
+ --gse-semantic-theme-borderRadius-formControl-input-medium: 4px;
290
+ --gse-semantic-theme-borderRadius-formControl-input-small: 4px;
291
+ --gse-semantic-theme-borderRadius-focus-full: 100%;
292
+ --gse-semantic-theme-borderRadius-focus-xlarge: 16px;
293
+ --gse-semantic-theme-borderRadius-focus-large: 8px;
294
+ --gse-semantic-theme-borderRadius-focus-medium: 8px;
295
+ --gse-semantic-theme-borderRadius-focus-small: 4px;
296
+ --gse-semantic-theme-borderRadius-focus-xsmall: 4px;
297
+ --gse-semantic-background-interactive-primary-default: #2a60c8; /* The background color of primary actions in the default state. */
298
+ --gse-semantic-background-interactive-primary-hover: #2754ac; /* The background color of primary actions in the hover state. */
299
+ --gse-semantic-background-interactive-primary-active: #23478f; /* The background color of primary actions in the active state. */
300
+ --gse-semantic-background-interactive-secondary-default: #e8ecf2; /* The background color of secondary actions in the default state. */
301
+ --gse-semantic-background-interactive-secondary-hover: #deeaff; /* The background color of secondary actions in the hover state. */
302
+ --gse-semantic-background-interactive-secondary-active: #e2e6ee; /* The background color of secondary actions in the active state. */
303
+ --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
304
+ --gse-semantic-background-interactive-tertiary-hover: #2754ac; /* The background color of tertiary actions in the hover state. */
305
+ --gse-semantic-background-interactive-tertiary-active: #23478f; /* The background color of tertiary actions in the active state. */
306
+ --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
307
+ --gse-semantic-background-interactive-ghost-hover: #deeaff; /* The background color of dismissal actions in the hover state. */
308
+ --gse-semantic-background-interactive-ghost-active: #e2e6ee; /* The background color of dismissal actions in the active state. */
309
+ --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
310
+ --gse-semantic-background-interactive-subtle-hover: #deeaff; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
311
+ --gse-semantic-background-interactive-subtle-active: #e2e6ee; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
312
+ --gse-semantic-background-interactive-danger-default: #ea0b0b; /* The background color of danger actions in the default state. */
313
+ --gse-semantic-background-interactive-danger-hover: #8f0707; /* The background color of danger actions in the hover state. */
314
+ --gse-semantic-background-interactive-danger-active: #520404; /* The background color of danger actions in the active state. */
315
+ --gse-semantic-background-overlay-shroud-default: rgb(12.5% 16.1% 21.6% / 0.8); /* The default color for modals overlays. */
178
316
  --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
179
317
  --gse-semantic-background-container-page-tonalSubtle: #fdfdfd; /* A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels. */
180
318
  --gse-semantic-background-container-page-tonalMedium: #f6f7f9; /* The background color to highlight elements in the background, for example, the row of a table. */
319
+ --gse-semantic-background-container-page-tonalHigh: #deeaff; /* The background color to highlight elements in the background, for example, the alternated row of a table. */
181
320
  --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
182
321
  --gse-semantic-background-container-elevated-hover: #e8ecf2; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
183
322
  --gse-semantic-background-container-elevated-active: #e2e6ee; /* The background color for the active state of an elevated surface like modals, popovers, cards, etc. */
323
+ --gse-semantic-background-container-elevated-error: #fceaea; /* The color of surfaces that are in an error state. */
184
324
  --gse-semantic-background-container-highConstrast-default: #283243; /* The background color for the default state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
185
325
  --gse-semantic-background-container-highConstrast-hover: #172b52; /* The background color for the hover state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
186
326
  --gse-semantic-background-container-highConstrast-active: #1c3363; /* The background color for the active state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
187
- --gse-semantic-background-formControl-input-10: #ffffff;
188
- --gse-semantic-background-formControl-input-20: #6b7585;
189
- --gse-semantic-background-formControl-clickInput-track: #6b7585; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
190
- --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
191
- --gse-semantic-background-overlay-10: rgb(12.5% 16.1% 21.6% / 0.8);
192
- --gse-semantic-background-overlay-shroud-default: rgb(12.5% 16.1% 21.6% / 0.8); /* The default color for modals overlays. */
193
- --gse-semantic-background-system-primary: #deeaff; /* The default background color for neutral feedback elements like alerts. */
194
- --gse-semantic-background-system-info: #deeaff; /* The default background color for info elements like alerts. */
195
- --gse-semantic-background-system-success: #eefcea; /* The default background color for success elements like alerts. */
196
- --gse-semantic-background-system-warning: #fdf8ec; /* The default background color for warning elements like alerts. */
197
- --gse-semantic-background-system-error: #fceaea; /* The default background color for error elements like alerts. */
327
+ --gse-semantic-background-system-error-tonalMedium: #fceaea; /* The default background color for smaller error elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
328
+ --gse-semantic-background-system-error-tonalSubtle: #fceaea; /* The default background color for error elements like alerts. */
329
+ --gse-semantic-background-system-warning-tonalMedium: #fdf8ec; /* The default background color for smaller warning elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
330
+ --gse-semantic-background-system-warning-tonalSubtle: #fdf8ec; /* The default background color for warning elements like alerts. */
331
+ --gse-semantic-background-system-success-tonalMedium: #eefcea; /* The default background color for smaller success elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
332
+ --gse-semantic-background-system-success-tonalSubtle: #eefcea; /* The default background color for success elements like alerts. */
333
+ --gse-semantic-background-system-info-tonalMedium: #deeaff; /* The default background color for smaller info elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
334
+ --gse-semantic-background-system-info-tonalSubtle: #deeaff; /* The default background color for info elements like alerts. */
335
+ --gse-semantic-background-system-primary-tonalMedium: #deeaff; /* Although this tokens has the same value as tonal_subtle, it is needed to match the structure of the other statuses. */
336
+ --gse-semantic-background-system-primary-tonalSubtle: #deeaff; /* The default background color for neutral feedback elements like alerts. */
198
337
  --gse-semantic-background-system-customAccents-bold-accent_1: #203b73; /* A custom accent used mostly for tags. */
199
- --gse-semantic-background-system-customAccents-bold-accent_2: #75a8ff; /* A custom accent used mostly for tags. */
338
+ --gse-semantic-background-system-customAccents-bold-accent_2: #23478f; /* A custom accent used mostly for tags. */
200
339
  --gse-semantic-background-system-customAccents-bold-accent_3: #b5b5eb; /* A custom accent used mostly for tags. */
201
- --gse-semantic-background-system-customAccents-bold-accent_4: #1da8b3; /* A custom accent used mostly for tags. */
202
- --gse-semantic-background-system-customAccents-bold-accent_5: #868c1e; /* A custom accent used mostly for tags. */
340
+ --gse-semantic-background-system-customAccents-bold-accent_4: #205a10; /* A custom accent used mostly for tags. */
341
+ --gse-semantic-background-system-customAccents-bold-accent_5: #151d28; /* A custom accent used mostly for tags. */
203
342
  --gse-semantic-background-system-customAccents-bold-accent_6: #75a8ff; /* A custom accent used mostly for tags. */
204
343
  --gse-semantic-background-system-customAccents-bold-accent_7: #8452cf; /* A custom accent used mostly for tags. */
205
344
  --gse-semantic-background-system-customAccents-bold-accent_8: #5e5782; /* A custom accent used mostly for tags. */
206
345
  --gse-semantic-background-system-customAccents-bold-accent_9: #ff8fdd; /* A custom accent used mostly for tags. */
207
- --gse-semantic-background-system-customAccents-bold-accent_10: #cc3ebe; /* A custom accent used mostly for tags. */
346
+ --gse-semantic-background-system-customAccents-bold-accent_10: #755000; /* A custom accent used mostly for tags. */
208
347
  --gse-semantic-background-system-customAccents-bold-accent_11: #ddd933; /* A custom accent used mostly for tags. */
348
+ --gse-semantic-background-system-customAccents-bold-accent_12: #ffef27; /* A custom accent used in search component */
349
+ --gse-semantic-background-system-customAccents-bold-accent_13: #75a8ff;
209
350
  --gse-semantic-background-system-customAccents-subtle-accent_1: lch(77.6 10.9 279); /* A custom accent used mostly for tags. */
210
351
  --gse-semantic-background-system-customAccents-subtle-accent_2: lch(90.4 14.8 272); /* A custom accent used mostly for tags. */
211
352
  --gse-semantic-background-system-customAccents-subtle-accent_3: lch(92.5 8.53 288); /* A custom accent used mostly for tags. */
212
- --gse-semantic-background-system-customAccents-subtle-accent_4: lch(88.8 11 206); /* A custom accent used mostly for tags. */
213
- --gse-semantic-background-system-customAccents-subtle-accent_5: lch(86.9 16.3 103); /* A custom accent used mostly for tags. */
353
+ --gse-semantic-background-system-customAccents-subtle-accent_4: #c2deb9; /* A custom accent used mostly for tags. */
354
+ --gse-semantic-background-system-customAccents-subtle-accent_5: #c8cfda; /* A custom accent used mostly for tags. */
214
355
  --gse-semantic-background-system-customAccents-subtle-accent_6: lch(90.4 14.8 272); /* A custom accent used mostly for tags. */
215
356
  --gse-semantic-background-system-customAccents-subtle-accent_7: lch(83.7 21.4 305); /* A custom accent used mostly for tags. */
216
357
  --gse-semantic-background-system-customAccents-subtle-accent_8: lch(81.7 7.69 295); /* A custom accent used mostly for tags. */
217
358
  --gse-semantic-background-system-customAccents-subtle-accent_9: lch(92.1 16.4 338); /* A custom accent used mostly for tags. */
218
- --gse-semantic-background-system-customAccents-subtle-accent_10: lch(85.6 22.8 330);
359
+ --gse-semantic-background-system-customAccents-subtle-accent_10: #fcd276;
219
360
  --gse-semantic-background-system-customAccents-subtle-accent_11: lch(95.5 22.7 98.8); /* A custom accent used mostly for tags. */
361
+ --gse-semantic-background-system-customAccents-subtle-accent_12: #fff793; /* A custom accent used in search component */
220
362
  --gse-semantic-background-system-progressAndLoading-default: #deeaff; /* The color to indicate that this progress has not been achieved. */
221
363
  --gse-semantic-background-system-progressAndLoading-progressed: #2a60c8; /* The color to indicate that this progress in a component. */
222
- --gse-semantic-background-customAccents-bold-10: #203b73;
223
- --gse-semantic-background-customAccents-bold-20: #75a8ff;
224
- --gse-semantic-background-customAccents-bold-30: #b5b5eb;
225
- --gse-semantic-background-customAccents-bold-40: #1da8b3;
226
- --gse-semantic-background-customAccents-bold-50: #868c1e;
227
- --gse-semantic-background-customAccents-bold-60: #75a8ff;
228
- --gse-semantic-background-customAccents-bold-70: #8452cf;
229
- --gse-semantic-background-customAccents-bold-80: #5e5782;
230
- --gse-semantic-background-customAccents-bold-90: #ff8fdd;
231
- --gse-semantic-background-customAccents-bold-100: #cc3ebe;
232
- --gse-semantic-background-customAccents-bold-110: #ddd933;
233
- --gse-semantic-background-customAccents-subtle-10: lch(77.6 10.9 279);
234
- --gse-semantic-background-customAccents-subtle-20: lch(90.4 14.8 272);
235
- --gse-semantic-background-customAccents-subtle-30: lch(92.5 8.53 288);
236
- --gse-semantic-background-customAccents-subtle-40: lch(88.8 11 206);
237
- --gse-semantic-background-customAccents-subtle-50: lch(86.9 16.3 103);
238
- --gse-semantic-background-customAccents-subtle-60: lch(90.4 14.8 272);
239
- --gse-semantic-background-customAccents-subtle-70: lch(83.7 21.4 305);
240
- --gse-semantic-background-customAccents-subtle-80: lch(81.7 7.69 295);
241
- --gse-semantic-background-customAccents-subtle-90: lch(92.1 16.4 338);
242
- --gse-semantic-background-customAccents-subtle-100: lch(85.6 22.8 330);
243
- --gse-semantic-background-customAccents-subtle-110: lch(95.5 22.7 98.8);
244
- --gse-semantic-background-interactive-primary-default: #2a60c8; /* The background color of primary actions in the default state. */
245
- --gse-semantic-background-interactive-primary-hover: #2754ac; /* The background color of primary actions in the hover state. */
246
- --gse-semantic-background-interactive-primary-active: #23478f; /* The background color of primary actions in the active state. */
247
- --gse-semantic-background-interactive-secondary-default: #e8ecf2; /* The background color of secondary actions in the default state. */
248
- --gse-semantic-background-interactive-secondary-hover: #d7dce5; /* The background color of secondary actions in the hover state. */
249
- --gse-semantic-background-interactive-secondary-active: #e2e6ee; /* The background color of secondary actions in the active state. */
250
- --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
251
- --gse-semantic-background-interactive-tertiary-hover: #2754ac; /* The background color of tertiary actions in the hover state. */
252
- --gse-semantic-background-interactive-tertiary-active: #23478f; /* The background color of tertiary actions in the active state. */
253
- --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
254
- --gse-semantic-background-interactive-ghost-hover: #d7dce5; /* The background color of dismissal actions in the hover state. */
255
- --gse-semantic-background-interactive-ghost-active: #e2e6ee; /* The background color of dismissal actions in the active state. */
256
- --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
257
- --gse-semantic-background-interactive-subtle-hover: #d7dce5; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
258
- --gse-semantic-background-interactive-subtle-active: #e2e6ee; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
259
- --gse-semantic-background-interactive-danger-default: #ea0b0b; /* The background color of danger actions in the default state. */
260
- --gse-semantic-background-interactive-danger-hover: #8f0707; /* The background color of danger actions in the hover state. */
261
- --gse-semantic-background-interactive-danger-active: #520404; /* The background color of danger actions in the active state. */
262
- --gse-semantic-foreground-primary-10: #3e4a5b;
263
- --gse-semantic-foreground-primary-20: #2e394c;
264
- --gse-semantic-foreground-primary-30: #2e394c;
265
- --gse-semantic-foreground-secondary-10: #ffffff;
266
- --gse-semantic-foreground-secondary-20: #596373;
267
- --gse-semantic-foreground-secondary-30: #4c5667;
268
- --gse-semantic-foreground-tertiary-10: #2e394c;
269
- --gse-semantic-foreground-tertiary-20: #2e394c;
270
- --gse-semantic-foreground-tertiary-30: #2e394c;
271
- --gse-semantic-foreground-highContrast-10: #ffffff;
272
- --gse-semantic-foreground-highContrast-20: #eff1f5;
273
- --gse-semantic-foreground-highContrast-30: #b4bccb;
274
- --gse-semantic-foreground-system-primary-10: #2a60c8;
275
- --gse-semantic-foreground-system-info-10: #2a60c8;
276
- --gse-semantic-foreground-system-info-highEmphasis: #2e394c; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
277
- --gse-semantic-foreground-system-info-accent: #2a60c8; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
278
- --gse-semantic-foreground-system-success-10: #3c8527;
279
- --gse-semantic-foreground-system-success-highEmphasis: #2e394c; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
280
- --gse-semantic-foreground-system-success-accent: #3c8527; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
281
- --gse-semantic-foreground-system-warning-10: #ffae00;
282
- --gse-semantic-foreground-system-warning-highEmphasis: #2e394c; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
283
- --gse-semantic-foreground-system-warning-accent: #ffae00; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
284
- --gse-semantic-foreground-system-error-10: #ea0b0b;
285
- --gse-semantic-foreground-system-error-highEmphasis: #2e394c; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
286
- --gse-semantic-foreground-system-error-accent: #ea0b0b; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
287
- --gse-semantic-foreground-system-customAccents-light: #ffffff; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color. */
288
- --gse-semantic-foreground-system-customAccents-dark: #2e394c; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
289
- --gse-semantic-foreground-system-progressAndLoading-default: #2e394c; /* The color for foreground content on progress_and_loading/default backgrounds. */
290
- --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
291
- --gse-semantic-foreground-system-icon-default: #2e394c; /* The color for foreground content on progress_and_loading/default backgrounds. */
292
- --gse-semantic-foreground-specialAccents-brand-10: #ff4f1f;
293
- --gse-semantic-foreground-specialAccents-ai-10: #8a5ecc;
294
- --gse-semantic-foreground-link-10: #2a60c8;
295
- --gse-semantic-foreground-link-20: #2754ac;
296
- --gse-semantic-foreground-link-30: #23478f;
297
- --gse-semantic-foreground-link-40: #8452cf;
298
- --gse-semantic-foreground-icon-10: #2e394c;
299
- --gse-semantic-foreground-formControl-clickInput-10: #2a60c8;
300
- --gse-semantic-foreground-formControl-clickInput-20: #2754ac;
301
- --gse-semantic-foreground-formControl-clickInput-30: #23478f;
302
- --gse-semantic-foreground-formControl-clickInput-50: #6b7585;
303
- --gse-semantic-foreground-formControl-clickInput-enabled: #6b7585; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
304
- --gse-semantic-foreground-formControl-clickInput-selected: #2a60c8; /* The color we use for foreground elements on click-based inputs when they are selected. */
305
- --gse-semantic-foreground-formControl-clickInput-hover: #2754ac; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
306
- --gse-semantic-foreground-formControl-clickInput-active: #23478f; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
307
- --gse-semantic-foreground-formControl-clickInput-error: #ea0b0b;
308
- --gse-semantic-foreground-formControl-helpText-default: #4c5667; /* The color we used for the default helper text. */
309
- --gse-semantic-foreground-formControl-helpText-error: #ea0b0b; /* The color we used for the error helper text. */
310
- --gse-semantic-foreground-formControl-textInput-placeholder: #4c5667; /* The default color of placeholder content on an input. */
311
- --gse-semantic-foreground-formControl-textInput-populated: #2e394c; /* The default color of populated content on an input. */
312
- --gse-semantic-foreground-formControl-textInput-icon: #4c5667; /* The default color of icons on an input. */
313
- --gse-semantic-foreground-formControl-label-default: #2e394c; /* The color for the content of input labels. */
314
- --gse-semantic-foreground-formControl-label-requiredAccent: #ea0b0b; /* The color we used for the required indicator. */
315
- --gse-semantic-foreground-formControl-label-optionalAccent: #3e4a5b; /* The color we used for the optional indicator. */
364
+ --gse-semantic-background-system-status-available: #09b581;
365
+ --gse-semantic-background-system-status-busy: #e22245;
366
+ --gse-semantic-background-system-status-away: #f8c73e;
367
+ --gse-semantic-background-system-status-onQueue: #4856cb;
368
+ --gse-semantic-background-system-status-offline: #626e84;
369
+ --gse-semantic-background-system-status-outOfOffice: #b74ba4;
370
+ --gse-semantic-background-system-status-notification: #fe624d;
371
+ --gse-semantic-background-formControl-clickInput-track: #6b7585; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
372
+ --gse-semantic-background-formControl-textInput-track: #f6f7f9; /* The default background color for inputs. */
316
373
  --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
317
374
  --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
318
375
  --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
@@ -335,6 +392,7 @@
335
392
  --gse-semantic-foreground-interactive-link-active: #23478f; /* The active color of links. */
336
393
  --gse-semantic-foreground-interactive-link-hover: #2754ac; /* The hover color of links. */
337
394
  --gse-semantic-foreground-interactive-link-visited: #8452cf; /* The color of links when they were already visited. */
395
+ --gse-semantic-foreground-interactive-indicator-default: #75a8ff; /* this is used to the selected indicator for the data table headers */
338
396
  --gse-semantic-foreground-container-highEmphasis: #2e394c; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
339
397
  --gse-semantic-foreground-container-midEmphasis: #3e4a5b; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
340
398
  --gse-semantic-foreground-container-lowEmphasis: #4c5667; /* The default color for low emphasis content on surfaces, like captions or fine print. */
@@ -343,35 +401,51 @@
343
401
  --gse-semantic-foreground-container-highContrast-lowEmphasis: #b4bccb; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
344
402
  --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
345
403
  --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f; /* The brand color, mostly used for logos on surfaces. */
404
+ --gse-semantic-foreground-system-customAccents-light: #ffffff; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color. */
405
+ --gse-semantic-foreground-system-customAccents-dark: #2e394c; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
406
+ --gse-semantic-foreground-system-progressAndLoading-default: #2e394c; /* The color for foreground content on progress_and_loading/default backgrounds. */
407
+ --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
408
+ --gse-semantic-foreground-system-info-highEmphasis: #2e394c; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
409
+ --gse-semantic-foreground-system-info-accent: #2a60c8; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
410
+ --gse-semantic-foreground-system-success-highEmphasis: #2e394c; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
411
+ --gse-semantic-foreground-system-success-accent: #3c8527; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
412
+ --gse-semantic-foreground-system-warning-highEmphasis: #2e394c; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
413
+ --gse-semantic-foreground-system-warning-accent: #ffae00; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
414
+ --gse-semantic-foreground-system-error-highEmphasis: #2e394c; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
415
+ --gse-semantic-foreground-system-error-accent: #ea0b0b; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
416
+ --gse-semantic-foreground-system-icon-default: #2e394c; /* The color for foreground content on progress_and_loading/default backgrounds. */
417
+ --gse-semantic-foreground-formControl-helpText-default: #4c5667; /* The color we used for the default helper text. */
418
+ --gse-semantic-foreground-formControl-helpText-error: #ea0b0b; /* The color we used for the error helper text. */
419
+ --gse-semantic-foreground-formControl-textInput-placeholder: #4c5667; /* The default color of placeholder content on an input. */
420
+ --gse-semantic-foreground-formControl-textInput-populated: #2e394c; /* The default color of populated content on an input. */
421
+ --gse-semantic-foreground-formControl-textInput-icon: #4c5667; /* The default color of icons on an input. */
422
+ --gse-semantic-foreground-formControl-clickInput-enabled: #6b7585; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
423
+ --gse-semantic-foreground-formControl-clickInput-selected: #2a60c8; /* The color we use for foreground elements on click-based inputs when they are selected. */
424
+ --gse-semantic-foreground-formControl-clickInput-hover: #2754ac; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
425
+ --gse-semantic-foreground-formControl-clickInput-active: #23478f; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
426
+ --gse-semantic-foreground-formControl-clickInput-error: #ea0b0b;
427
+ --gse-semantic-foreground-formControl-label-default: #2e394c; /* The color for the content of input labels. */
428
+ --gse-semantic-foreground-formControl-label-requiredAccent: #ea0b0b; /* The color we used for the required indicator. */
429
+ --gse-semantic-foreground-formControl-label-optionalAccent: #3e4a5b; /* The color we used for optional indicator in labels */
430
+ --gse-semantic-foreground-formControl-label-tooltip: #3e4a5b; /* The color we used for tooltip in labels */
346
431
  --gse-semantic-border-focus: #aac9ff; /* The color we use for focus outlines. */
347
- --gse-semantic-border-divider-10: #ffffff;
348
- --gse-semantic-border-divider-20: #b4bccb;
349
- --gse-semantic-border-divider-30: #2a60c8;
350
- --gse-semantic-border-system-primary: #75a8ff; /* The default borders for elements that have a feedback/primary background. */
351
- --gse-semantic-border-system-info: #75a8ff; /* The default borders for elements that have a feedback/info background. */
352
- --gse-semantic-border-system-success: #eefcea; /* The default borders for elements that have a feedback/success background. */
353
- --gse-semantic-border-system-warning: #fcd276; /* The default borders for elements that have a feedback/warning background. */
354
- --gse-semantic-border-system-error: #f37a7a; /* The default borders for elements that have a feedback/error background. */
355
- --gse-semantic-border-inputs-default-10: #6b7585;
356
- --gse-semantic-border-inputs-hover-10: #2754ac;
357
- --gse-semantic-border-inputs-active-10: #2a60c8;
358
- --gse-semantic-border-edges-default-10: #b4bccb;
359
- --gse-semantic-border-edges-default-20: #4c5667;
360
- --gse-semantic-border-edges-default-30: #2e394c;
361
- --gse-semantic-border-edges-enabled-10: #2a60c8;
362
- --gse-semantic-border-edges-hover-10: #75a8ff;
363
- --gse-semantic-border-edges-hover-20: #23478f;
364
- --gse-semantic-border-edges-active-10: #2a60c8;
365
432
  --gse-semantic-border-container-divider: #b4bccb; /* The default color for dividers inside surfaces. */
366
433
  --gse-semantic-border-container-edges-default: #b4bccb; /* The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards. */
367
434
  --gse-semantic-border-container-edges-hover: #75a8ff; /* The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab. */
435
+ --gse-semantic-border-container-edges-error: #ea0b0b; /* The color for the edge borders of surfaces that are on the error state, like the border of a card in an error state. */
368
436
  --gse-semantic-border-container-edges-enabled: #2a60c8; /* The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab. */
369
437
  --gse-semantic-border-container-edges-active: #2a60c8; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab. */
370
438
  --gse-semantic-border-container-edges-highEmphasis: #2e394c; /* The default color for the edge borders of high-emphasis surfaces e.g dark tooltip */
439
+ --gse-semantic-border-container-edges-dataTable-default: #e2e6ee; /* This is used for default border for datatables */
371
440
  --gse-semantic-border-container-highConstrast-default: #4c5667; /* The default color for the edge borders of high contrast surfaces. */
372
441
  --gse-semantic-border-container-highConstrast-enabled: #2a60c8; /* The color for the edge borders of high contrast surfaces that are enabled. */
373
442
  --gse-semantic-border-container-highConstrast-hover: #23478f; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
374
443
  --gse-semantic-border-container-highConstrast-active: #2a60c8; /* The color for the edge borders of high contrast surfaces that are on the active state. */
444
+ --gse-semantic-border-system-info: #75a8ff; /* The default borders for elements that have a feedback/info background. */
445
+ --gse-semantic-border-system-warning: #fcd276; /* The default borders for elements that have a feedback/warning background. */
446
+ --gse-semantic-border-system-success: #95c189; /* The default borders for elements that have a feedback/success background. */
447
+ --gse-semantic-border-system-error: #f37a7a; /* The default borders for elements that have a feedback/error background. */
448
+ --gse-semantic-border-system-primary: #75a8ff; /* The default borders for elements that have a feedback/primary background. */
375
449
  --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary elements. */
376
450
  --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
377
451
  --gse-semantic-border-interactive-tertiary-divider: #2a60c8; /* The color for dividers inside interactive/tertiary elements. */
@@ -380,18 +454,18 @@
380
454
  --gse-semantic-border-formControl-textInput-hover: #2754ac; /* The border for inputs edges in the hover state. */
381
455
  --gse-semantic-border-formControl-textInput-active: #2a60c8; /* The border for inputs edges in the active state. */
382
456
  --gse-semantic-border-formControl-textInput-error: #ea0b0b; /* The border for inputs edges in the error state. */
383
- --gse-semantic-body-sm-regular: 400 12px/16px "Noto Sans"; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
384
- --gse-semantic-body-sm-link: 600 12px/18px "Noto Sans"; /* This is the typography style we use for hyperlinks in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with link colors. */
385
- --gse-semantic-body-sm-bold: 700 12px/18px "Noto Sans"; /* This is the typography style we use to add great emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with high emphasis colors. */
386
- --gse-semantic-body-sm-semiBold: 600 12px/18px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or high emphasis colors. */
387
- --gse-semantic-body-md-regular: 400 14px/20px "Noto Sans"; /* This is the typography style we use in most of our bodies of text like paragraphs; we usually pair it with medium emphasis colors. */
388
- --gse-semantic-body-md-link: 600 14px/20px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like paragraphs; we usually pair it with link colors. */
389
- --gse-semantic-body-md-bold: 700 14px/20px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like paragraphs; we usually pair it with high emphasis colors. */
390
- --gse-semantic-body-md-semiBold: 600 14px/20px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like paragraphs, we usually pair it with medium or high emphasis colors. */
391
- --gse-semantic-body-lg-regular: 400 16px/24px "Noto Sans"; /* This is the typography style we use in most of our high emphasis bodies of text like introductory paragraphs after a heading; we usually pair it with medium emphasis colors. */
392
- --gse-semantic-body-lg-link: 600 16px/24px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like introductory paragraphs after a heading; we usually pair it with link colors. */
393
- --gse-semantic-body-lg-bold: 700 16px/24px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with high emphasis colors. */
394
- --gse-semantic-body-lg-semiBold: 600 16px/24px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with medium or high emphasis colors. */
457
+ --gse-semantic-body-sm-regular: 400 12px/18px Roboto; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
458
+ --gse-semantic-body-sm-link: 600 12px/18px Roboto; /* This is the typography style we use for hyperlinks in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with link colors. */
459
+ --gse-semantic-body-sm-bold: 700 12px/18px Roboto; /* This is the typography style we use to add great emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with high emphasis colors. */
460
+ --gse-semantic-body-sm-semiBold: 600 12px/18px Roboto; /* This is the typography style we use to add moderate emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or high emphasis colors. */
461
+ --gse-semantic-body-md-regular: 400 14px/20px Roboto; /* This is the typography style we use in most of our bodies of text like paragraphs; we usually pair it with medium emphasis colors. */
462
+ --gse-semantic-body-md-link: 600 14px/20px Roboto; /* This is the typography style we use for hyperlinks in bodies of text, like paragraphs; we usually pair it with link colors. */
463
+ --gse-semantic-body-md-bold: 700 14px/20px Roboto; /* This is the typography style we use to add great emphasis in bodies of text, like paragraphs; we usually pair it with high emphasis colors. */
464
+ --gse-semantic-body-md-semiBold: 600 14px/20px Roboto; /* This is the typography style we use to add moderate emphasis in bodies of text, like paragraphs, we usually pair it with medium or high emphasis colors. */
465
+ --gse-semantic-body-lg-regular: 400 16px/24px Roboto; /* This is the typography style we use in most of our high emphasis bodies of text like introductory paragraphs after a heading; we usually pair it with medium emphasis colors. */
466
+ --gse-semantic-body-lg-link: 600 16px/24px Roboto; /* This is the typography style we use for hyperlinks in bodies of text, like introductory paragraphs after a heading; we usually pair it with link colors. */
467
+ --gse-semantic-body-lg-bold: 700 16px/24px Roboto; /* This is the typography style we use to add great emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with high emphasis colors. */
468
+ --gse-semantic-body-lg-semiBold: 600 16px/24px Roboto; /* This is the typography style we use to add moderate emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with medium or high emphasis colors. */
395
469
  /**
396
470
  * We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
397
471
  * We usually pair it with high emphasis colors.
@@ -463,64 +537,96 @@
463
537
  * We usually pair it with medium emphasis colors.
464
538
  */
465
539
  --gse-semantic-subheading-regular: 400 14px/20px Roboto;
466
- --gse-semantic-interactive-medium-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
467
- --gse-semantic-interactive-medium-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
468
- --gse-semantic-interactive-medium-padding-horizontal: 8px; /* The recommended horizontal padding for medium-sized components. */
469
- --gse-semantic-interactive-small-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
470
- --gse-semantic-interactive-small-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
471
- --gse-semantic-interactive-small-padding-horizontal: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
472
- --gse-semantic-interactive-small-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
473
- --gse-semantic-interactive-large-borderRadius: 4px; /* The recommended large border-radius for interactive component. Eg Tags */
474
- --gse-semantic-interactive-large-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
475
- --gse-semantic-interactive-large-padding-horizontal: 12px; /* The recommended horizontal padding for large-sized components. */
540
+ --gse-semantic-interactive-md-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
541
+ --gse-semantic-interactive-md-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
542
+ --gse-semantic-interactive-md-padding: 8px; /* The recommended horizontal padding for medium-sized components. */
543
+ --gse-semantic-interactive-sm-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
544
+ --gse-semantic-interactive-sm-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
545
+ --gse-semantic-interactive-sm-padding: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
546
+ --gse-semantic-interactive-sm-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
547
+ --gse-semantic-interactive-lg-borderRadius: 4px; /* The recommended large border-radius for interactive component. Eg Tags */
548
+ --gse-semantic-interactive-lg-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
549
+ --gse-semantic-interactive-lg-padding: 12px; /* The recommended horizontal padding for large-sized components. */
476
550
  --gse-semantic-interactive-edges-borderWidth: 1px; /* The default border width for the edges of interactive components, like the ones on a tertiary(or outlined) button. */
477
- --gse-semantic-interactive-divider-small-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
478
- --gse-semantic-interactive-divider-large-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
479
- --gse-semantic-interactive-xlarge-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
480
- --gse-semantic-interactive-xlarge-padding-horizontal: 16px; /* The recommended horizontal padding for xlarge-sized components. */
551
+ --gse-semantic-interactive-divider-sm-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
552
+ --gse-semantic-interactive-divider-lg-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
553
+ --gse-semantic-interactive-xl-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
554
+ --gse-semantic-interactive-xl-padding: 16px; /* The recommended horizontal padding for xlarge-sized components. */
555
+ --gse-semantic-interactive-xl-size: 40px; /* The recommended size for extra-large-sized interactive components. For example a large button height. */
556
+ --gse-semantic-interactive-xl-borderRadius: 100%; /* The recommended xlarge border-radius for interactive component. Eg handle of the slider */
557
+ --gse-semantic-interactive-xs-size: 20px; /* The recommended size for small-sized interactive components. For example small link. */
558
+ --gse-semantic-interactive-xs-padding: 2px; /* The recommended padding for extra-small-sized interactive components. */
481
559
  --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
482
- --gse-semantic-focusOutline-xlarge-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
483
- --gse-semantic-focusOutline-large-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
484
- --gse-semantic-focusOutline-medium-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
485
- --gse-semantic-focusOutline-small-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
486
- --gse-semantic-focusOutline-small-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
487
- --gse-semantic-focusOutline-xsmall-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
488
- --gse-semantic-container-large-borderRadius: 4px; /* The recommended large border-radius for large containers, like modals. */
489
- --gse-semantic-container-large-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
490
- --gse-semantic-container-large-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
491
- --gse-semantic-container-small-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
492
- --gse-semantic-container-small-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
493
- --gse-semantic-container-small-horizontalPadding: 12px; /* The default padding of a small-sized container, like a tooltip. */
494
- --gse-semantic-container-small-verticalPadding: 8px; /* The default vertical padding of a small-sized container, like a tooltip. */
495
- --gse-semantic-container-small-minHeight: 20px; /* The minimum height recommended for a small container, like a tag. */
496
- --gse-semantic-container-small-height: 32px; /* The average recommended height for a small container, like a tag. */
497
- --gse-semantic-container-medium-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
498
- --gse-semantic-container-medium-horizontalPadding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
499
- --gse-semantic-container-medium-verticalPadding: 24px; /* The default vertical padding of a medium-sized container, like a tooltip. */
500
- --gse-semantic-container-medium-minHeight: 32px; /* The minimmum recommended height for a medium container, like a tag. */
560
+ --gse-semantic-focusOutline-xl-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
561
+ --gse-semantic-focusOutline-lg-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
562
+ --gse-semantic-focusOutline-md-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
563
+ --gse-semantic-focusOutline-md-borderWidth: 2px; /* The recommended width of the focus outline fo medium-sized components, like the stars on a checkbox */
564
+ --gse-semantic-focusOutline-sm-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
565
+ --gse-semantic-focusOutline-sm-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
566
+ --gse-semantic-focusOutline-xs-borderRadius: 4px; /* The recommended xsmall border-radius for focus. Eg icons */
567
+ --gse-semantic-focusOutline-offset: 1px;
568
+ --gse-semantic-container-lg-borderRadius: 4px; /* The recommended large border-radius for large containers, like modals. */
569
+ --gse-semantic-container-lg-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
570
+ --gse-semantic-container-lg-padding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
571
+ --gse-semantic-container-lg-height: 40px; /* The average recommended height for a cell in the datatable */
572
+ --gse-semantic-container-md-gap: 12px; /* The recommended medium gap between items inside a container, like the gap between elements inisde a modal. */
573
+ --gse-semantic-container-md-borderRadius: 4px; /* The recommended medium border-radius for containers. Eg cards */
574
+ --gse-semantic-container-md-height: 32px; /* The minimmum recommended height for a medium container, like a button bar. */
575
+ --gse-semantic-container-md-padding: 16px; /* The default horizontal padding of a medium-sized container, like an alert. */
576
+ --gse-semantic-container-xl-gap: 24px; /* The recommended gap between items inside a xlarge container, like progress and loading. */
577
+ --gse-semantic-container-xl-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
578
+ --gse-semantic-container-xl-height: 48px; /* The average recommended height for the header of a calendar */
579
+ --gse-semantic-container-sm-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
580
+ --gse-semantic-container-sm-gap: 8px; /* The recommended medium gap between items inside a container, like the gap between elements inisde an alert. */
581
+ --gse-semantic-container-sm-padding: 12px; /* The default padding of a small-sized container, like a tooltip. */
582
+ --gse-semantic-container-sm-minHeight: 20px; /* The minimum height recommended for a small container, like a tooltip. */
583
+ --gse-semantic-container-sm-height: 32px; /* The average recommended height for a small container, like a tooltip. */
584
+ --gse-semantic-container-xs-gap: 4px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
585
+ --gse-semantic-container-xs-padding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
586
+ --gse-semantic-container-xs-minHeight: 16px; /* The minimum height recommended for a small container, like a tag. */
587
+ --gse-semantic-container-xs-height: 20px; /* The average recommended height for a small container, like a tag. */
501
588
  --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
502
589
  --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
503
- --gse-semantic-container-xsmall-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
504
- --gse-semantic-container-xsmall-horizontalPadding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
505
- --gse-semantic-container-xsmall-verticalPadding: 4px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
506
- --gse-semantic-formControl-textInput-large-borderRadius: 4px; /* The recommended large border-radius for inputs */
507
- --gse-semantic-formControl-textInput-small-borderRadius: 4px; /* The recommended small border-radius for inputs */
508
- --gse-semantic-formControl-textInput-medium-borderRadius: 8px; /* The recommended medium border-radius for inputs */
509
- --gse-semantic-formControl-textInput-padding: 8px 12px; /* The default padding for inputs inside a form control. */
510
- --gse-semantic-formControl-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
590
+ --gse-semantic-container-2xs-gap: 2px; /* The recommended xsmall gap between items inside a container, like the gap between elements inside a tag. */
591
+ --gse-semantic-container-2xs-padding: 2px; /* The default padding of a our smallest containers, like the container of an tag. */
592
+ --gse-semantic-container-2xs-size: 12px; /* The average recommended height for a small container, like a tag. */
593
+ --gse-semantic-container-full-borderRadius: 100%; /* The recomended border radius for circle-shaped containers. */
594
+ --gse-semantic-container-3xs-size: 8px;
595
+ --gse-semantic-container-4xs-size: 4px;
596
+ --gse-semantic-formControl-textInput-lg-borderRadius: 4px; /* The recommended large border-radius for inputs */
597
+ --gse-semantic-formControl-textInput-sm-borderRadius: 4px; /* The recommended small border-radius for inputs */
598
+ --gse-semantic-formControl-textInput-md-borderRadius: 4px; /* The recommended medium border-radius for inputs */
511
599
  --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
512
600
  --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
513
- --gse-semantic-contanier-large-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
514
- --gse-semantic-contanier-medium-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards. */
515
- --gse-semantic-contanier-small-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
516
- --gse-semantic-assets-large-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
517
- --gse-semantic-assets-medium-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
518
- --gse-semantic-assets-small-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
601
+ --gse-semantic-formControl-field-textInput-small-padding: 8px; /* The default vertical padding for inputs inside a form control. */
602
+ --gse-semantic-formControl-field-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
603
+ --gse-semantic-formControl-field-textInput-md-height: 32px;
604
+ --gse-semantic-formControl-field-textInput-medium-padding: 12px; /* The recommended horizontal padding for text inputs. */
605
+ --gse-semantic-formControl-field-textInput-minWidth: 48px;
606
+ --gse-semantic-formControl-field-textInput-lg-height: 98px;
607
+ --gse-semantic-formControl-field-gap: 4px; /* The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text. */
608
+ --gse-semantic-formControl-field-padding: 8px; /* The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text. */
609
+ --gse-semantic-formControl-field-clickInput-gap: 8px; /* The default gap for between elements inside a form group, like checkboxes, radio buttons. */
610
+ --gse-semantic-formControl-field-clickInput-padding: 4px; /* The default padding for between elements inside a form group, like checkboxes, radio buttons. */
611
+ --gse-semantic-formControl-field-clickInput-md-size: 32px; /* The recommended height form medium-size click inputs, like checkboxes or radio buttons. */
612
+ --gse-semantic-formControl-field-clickInput-sm-size: 16px; /* The recommended height for leaner click inputs, like toggles. */
613
+ --gse-semantic-formControl-field-groupedInput-gap: 8px; /* The recommended gap between groped inputs, like the sapce inbetween checkboxes or radio buttons. */
614
+ --gse-semantic-formControl-clickInput-handle-borderWidth: 2px; /* The recommended border width for handles on click inputs, like the habdle of a toggle. */
615
+ --gse-semantic-contanier-lg-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
616
+ --gse-semantic-contanier-md-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards or menus. */
617
+ --gse-semantic-contanier-sm-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
618
+ --gse-semantic-assets-lg-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
619
+ --gse-semantic-assets-md-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
620
+ --gse-semantic-assets-sm-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
621
+ --gse-semantic-assets-xl-size: 48px; /* The recommended size of xlarge-sized for styles, for example avatar */
622
+ --gse-semantic-assets-xs-size: 8px; /* The recommended size of small-sized for assets, for example super small icons. */
519
623
  --gse-semantic-divider-width: 1px; /* The default width of our divider, we usually represent dividers as rectangles on Figma instead of a single line layer. */
520
624
  --gse-semantic-divider-xs-margin: 1px;
521
625
  --gse-semantic-divider-sm-margin: 2px;
522
626
  --gse-semantic-divider-md-margin: 4px;
523
627
  --gse-semantic-divider-lg-margin: 8px;
628
+ --gse-semantic-divider-track-height: 4px; /* The heioght for track elements, like the track of the slider. */
629
+ --gse-semantic-divider-indicator-width: 2px; /* The recommended divider indicator width, used for the indicators of active tabs, for example */
524
630
  }
525
631
 
526
632
  /*# sourceMappingURL=global.css.map */