genesys-spark 4.79.0 → 4.80.1

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 +744 -664
  2. package/dist/css/flare/global.css.map +1 -1
  3. package/dist/css/flare/ui.css +1242 -436
  4. package/dist/css/flare/ui.css.map +1 -1
  5. package/dist/css/legacy/global.css +380 -339
  6. package/dist/css/legacy/global.css.map +1 -1
  7. package/dist/css/legacy/ui.css +632 -229
  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/flare/global.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gse-core-spacing-5xs: 2px;
3
- --gse-core-spacing-6xs: 1px; /* Used mostly for the foucs offset. */
3
+ --gse-core-spacing-6xs: 1px;
4
4
  --gse-core-borderRadius-xs: 2px;
5
5
  --gse-core-color-pepper-100: #f9d3da;
6
6
  --gse-core-color-pepper-200: #f3a7b5;
@@ -123,16 +123,16 @@
123
123
  --gse-core-colorLegacy-secondary-electricPurple: #8452cf;
124
124
  --gse-core-colorLegacy-secondary-genesysBlue: #75a8ff;
125
125
  --gse-core-colorLegacy-secondary-navy: #203b73;
126
- --gse-core-colorLegacy-dataVisualization-yellowGreen: lch(95.5 22.7 98.8);
127
- --gse-core-colorLegacy-dataVisualization-oliveGreen: lch(86.9 16.3 103);
128
- --gse-core-colorLegacy-dataVisualization-aquaGreen: lch(88.8 11 206);
129
- --gse-core-colorLegacy-dataVisualization-pink: lch(92.1 16.4 338);
130
- --gse-core-colorLegacy-dataVisualization-fuchsia: lch(85.6 22.8 330);
131
- --gse-core-colorLegacy-dataVisualization-lilac: lch(92.5 8.53 288);
132
- --gse-core-colorLegacy-dataVisualization-plum: lch(81.7 7.69 295);
133
- --gse-core-colorLegacy-dataVisualization-electricPurple: lch(83.7 21.4 305);
134
- --gse-core-colorLegacy-dataVisualization-genesysBlue: lch(90.4 14.8 272);
135
- --gse-core-colorLegacy-dataVisualization-navy: lch(77.6 10.9 279);
126
+ --gse-core-colorLegacy-dataVisualization-yellowGreen: #f8f3c6;
127
+ --gse-core-colorLegacy-dataVisualization-oliveGreen: #dcdbbb;
128
+ --gse-core-colorLegacy-dataVisualization-aquaGreen: #c7e5e8;
129
+ --gse-core-colorLegacy-dataVisualization-pink: #ffdff5;
130
+ --gse-core-colorLegacy-dataVisualization-fuchsia: #f4c9ec;
131
+ --gse-core-colorLegacy-dataVisualization-lilac: #e9e8f9;
132
+ --gse-core-colorLegacy-dataVisualization-plum: #cdc9d8;
133
+ --gse-core-colorLegacy-dataVisualization-electricPurple: #dcc9f2;
134
+ --gse-core-colorLegacy-dataVisualization-genesysBlue: #d9e4ff;
135
+ --gse-core-colorLegacy-dataVisualization-navy: #bbbfd4;
136
136
  --gse-core-colorLegacy-brand-brandOrange: #ff4f1f;
137
137
  --gse-core-colorLegacy-brand-brandTeal: #00ae9e;
138
138
  --gse-core-colorLegacy-brand-brandNavy: #23395d;
@@ -143,13 +143,13 @@
143
143
  --gse-core-borderWidth-3: 3px;
144
144
  --gse-core-textCase-uppercase: uppercase;
145
145
  --gse-core-opacity-0: 0;
146
- --gse-core-opacity-50: 0.5;
147
- --gse-core-opacity-80: 0.8;
146
+ --gse-core-opacity-50: .5;
147
+ --gse-core-opacity-80: .8;
148
148
  --gse-core-letterSpacing-1: 1px;
149
- --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
150
- --gse-semantic-opacity-shroud: 0.8; /* The default opacity for shroud elements like the one on modals. */
151
- --gse-semantic-theme-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
152
- --gse-semantic-theme-fontFamily-body: "Noto Sans"; /* The font family we use for body and labels in this theme. */
149
+ --gse-semantic-opacity-disabled: .5;
150
+ --gse-semantic-opacity-shroud: .8;
151
+ --gse-semantic-theme-fontFamily-headings: Urbanist;
152
+ --gse-semantic-theme-fontFamily-body: "Noto Sans";
153
153
  --gse-semantic-theme-background-container-primary-10: #ffffff;
154
154
  --gse-semantic-theme-background-container-primary-20: #fbfcfe;
155
155
  --gse-semantic-theme-background-container-primary-30: #f3f5fb;
@@ -167,7 +167,7 @@
167
167
  --gse-semantic-theme-background-container-highContrast-40: #000000;
168
168
  --gse-semantic-theme-background-formControl-input-10: #ffffff;
169
169
  --gse-semantic-theme-background-formControl-input-20: #c6c8ce;
170
- --gse-semantic-theme-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
170
+ --gse-semantic-theme-background-overlay-10: #3e5374cc;
171
171
  --gse-semantic-theme-background-system-primary-10: #dee1fd;
172
172
  --gse-semantic-theme-background-system-primary-20: #9ca6f9;
173
173
  --gse-semantic-theme-background-system-primary-30: #5a6af5;
@@ -280,7 +280,6 @@
280
280
  --gse-semantic-theme-border-inputs-hover-10: #3742a2;
281
281
  --gse-semantic-theme-border-inputs-active-10: #252e78;
282
282
  --gse-semantic-theme-borderRadius-interactive-xlarge: 100%;
283
- --gse-semantic-theme-borderRadius-interactive-xlargeCopy: 100%;
284
283
  --gse-semantic-theme-borderRadius-interactive-large: 16px;
285
284
  --gse-semantic-theme-borderRadius-interactive-small: 4px;
286
285
  --gse-semantic-theme-borderRadius-container-large: 16px;
@@ -295,73 +294,73 @@
295
294
  --gse-semantic-theme-borderRadius-focus-medium: 8px;
296
295
  --gse-semantic-theme-borderRadius-focus-small: 4px;
297
296
  --gse-semantic-theme-borderRadius-focus-xsmall: 2px;
298
- --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
299
- --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
300
- --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
301
- --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
302
- --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
303
- --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
304
- --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
305
- --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
306
- --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
307
- --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
308
- --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
309
- --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
310
- --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
311
- --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
312
- --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
313
- --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
314
- --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
315
- --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
316
- --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
317
- --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
318
- --gse-semantic-background-container-page-tonalSubtle: #fbfcfe; /* A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels. */
319
- --gse-semantic-background-container-page-tonalMedium: #f3f5fb; /* The background color to highlight elements in the background, for example, the row of a table. */
320
- --gse-semantic-background-container-page-tonalHigh: #dee1fd; /* The background color to highlight elements in the background, for example, the alternated row of a table. */
321
- --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
322
- --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
323
- --gse-semantic-background-container-elevated-active: #ced2fc; /* The background color for the active state of an elevated surface like modals, popovers, cards, etc. */
324
- --gse-semantic-background-container-elevated-error: #f3a7b5; /* The color of surfaces that are in an error state. */
325
- --gse-semantic-background-container-highConstrast-default: #1b2c48; /* 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. */
326
- --gse-semantic-background-container-highConstrast-hover: #141a4f; /* 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. */
327
- --gse-semantic-background-container-highConstrast-active: #1c2463; /* 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. */
328
- --gse-semantic-background-system-error-tonalMedium: #f3a7b5; /* The default background color for smaller error elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
329
- --gse-semantic-background-system-error-tonalSubtle: #f9d3da; /* The default background color for error elements like alerts. */
330
- --gse-semantic-background-system-warning-tonalMedium: #fce9b2; /* The default background color for smaller warning elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
331
- --gse-semantic-background-system-warning-tonalSubtle: #fef4d8; /* The default background color for warning elements like alerts. */
332
- --gse-semantic-background-system-success-tonalMedium: #9de1cd; /* The default background color for smaller success elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
333
- --gse-semantic-background-system-success-tonalSubtle: #cef0e6; /* The default background color for success elements like alerts. */
334
- --gse-semantic-background-system-info-tonalMedium: #c5bef1; /* The default background color for smaller info elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
335
- --gse-semantic-background-system-info-tonalSubtle: #e2dff8; /* The default background color for info elements like alerts. */
336
- --gse-semantic-background-system-primary-tonalMedium: #dee1fd; /* Although this tokens has the same value as tonal_subtle, it is needed to match the structure of the other statuses. */
337
- --gse-semantic-background-system-primary-tonalSubtle: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
338
- --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
339
- --gse-semantic-background-system-customAccents-bold-accent_2: #626d97; /* A custom accent used mostly for tags. */
340
- --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
341
- --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
342
- --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
343
- --gse-semantic-background-system-customAccents-bold-accent_6: #467aae; /* A custom accent used mostly for tags. */
344
- --gse-semantic-background-system-customAccents-bold-accent_7: #8a5ecc; /* A custom accent used mostly for tags. */
345
- --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
346
- --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
347
- --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
348
- --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650; /* A custom accent used mostly for tags. */
349
- --gse-semantic-background-system-customAccents-bold-accent_12: #b5e2e8; /* A custom accent used in search component */
297
+ --gse-semantic-background-interactive-primary-default: #4856cb;
298
+ --gse-semantic-background-interactive-primary-hover: #3742a2;
299
+ --gse-semantic-background-interactive-primary-active: #252e78;
300
+ --gse-semantic-background-interactive-secondary-default: #eff0fe;
301
+ --gse-semantic-background-interactive-secondary-hover: #dee1fd;
302
+ --gse-semantic-background-interactive-secondary-active: #ced2fc;
303
+ --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0);
304
+ --gse-semantic-background-interactive-tertiary-hover: #3742a2;
305
+ --gse-semantic-background-interactive-tertiary-active: #252e78;
306
+ --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0);
307
+ --gse-semantic-background-interactive-ghost-hover: #dee1fd;
308
+ --gse-semantic-background-interactive-ghost-active: #ced2fc;
309
+ --gse-semantic-background-interactive-subtle-default: #ffffff;
310
+ --gse-semantic-background-interactive-subtle-hover: #dee1fd;
311
+ --gse-semantic-background-interactive-subtle-active: #ced2fc;
312
+ --gse-semantic-background-interactive-danger-default: #e22245;
313
+ --gse-semantic-background-interactive-danger-hover: #881429;
314
+ --gse-semantic-background-interactive-danger-active: #440a15;
315
+ --gse-semantic-background-overlay-shroud-default: #3e5374cc;
316
+ --gse-semantic-background-container-page-default: #ffffff;
317
+ --gse-semantic-background-container-page-tonalSubtle: #fbfcfe;
318
+ --gse-semantic-background-container-page-tonalMedium: #f3f5fb;
319
+ --gse-semantic-background-container-page-tonalHigh: #dee1fd;
320
+ --gse-semantic-background-container-elevated-default: #ffffff;
321
+ --gse-semantic-background-container-elevated-hover: #eff0fe;
322
+ --gse-semantic-background-container-elevated-active: #ced2fc;
323
+ --gse-semantic-background-container-elevated-error: #f3a7b5;
324
+ --gse-semantic-background-container-highConstrast-default: #1b2c48;
325
+ --gse-semantic-background-container-highConstrast-hover: #141a4f;
326
+ --gse-semantic-background-container-highConstrast-active: #1c2463;
327
+ --gse-semantic-background-system-error-tonalMedium: #f3a7b5;
328
+ --gse-semantic-background-system-error-tonalSubtle: #f9d3da;
329
+ --gse-semantic-background-system-warning-tonalMedium: #fce9b2;
330
+ --gse-semantic-background-system-warning-tonalSubtle: #fef4d8;
331
+ --gse-semantic-background-system-success-tonalMedium: #9de1cd;
332
+ --gse-semantic-background-system-success-tonalSubtle: #cef0e6;
333
+ --gse-semantic-background-system-info-tonalMedium: #c5bef1;
334
+ --gse-semantic-background-system-info-tonalSubtle: #e2dff8;
335
+ --gse-semantic-background-system-primary-tonalMedium: #dee1fd;
336
+ --gse-semantic-background-system-primary-tonalSubtle: #dee1fd;
337
+ --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374;
338
+ --gse-semantic-background-system-customAccents-bold-accent_2: #626d97;
339
+ --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a;
340
+ --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e;
341
+ --gse-semantic-background-system-customAccents-bold-accent_5: #607732;
342
+ --gse-semantic-background-system-customAccents-bold-accent_6: #467aae;
343
+ --gse-semantic-background-system-customAccents-bold-accent_7: #8a5ecc;
344
+ --gse-semantic-background-system-customAccents-bold-accent_8: #89387b;
345
+ --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77;
346
+ --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b;
347
+ --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650;
348
+ --gse-semantic-background-system-customAccents-bold-accent_12: #b5e2e8;
350
349
  --gse-semantic-background-system-customAccents-bold-accent_13: #5798d9;
351
- --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
352
- --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
353
- --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
354
- --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd; /* A custom accent used mostly for tags. */
355
- --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98; /* A custom accent used mostly for tags. */
356
- --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8; /* A custom accent used mostly for tags. */
357
- --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff; /* A custom accent used mostly for tags. */
358
- --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1; /* A custom accent used mostly for tags. */
359
- --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
350
+ --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce;
351
+ --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef;
352
+ --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd;
353
+ --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd;
354
+ --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98;
355
+ --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8;
356
+ --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff;
357
+ --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1;
358
+ --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad;
360
359
  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
361
- --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96; /* A custom accent used mostly for tags. */
362
- --gse-semantic-background-system-customAccents-subtle-accent_12: #daf0f4; /* A custom accent used in search component */
363
- --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
364
- --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
360
+ --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96;
361
+ --gse-semantic-background-system-customAccents-subtle-accent_12: #daf0f4;
362
+ --gse-semantic-background-system-progressAndLoading-default: #dee1fd;
363
+ --gse-semantic-background-system-progressAndLoading-progressed: #4856cb;
365
364
  --gse-semantic-background-system-status-available: #09b581;
366
365
  --gse-semantic-background-system-status-busy: #e22245;
367
366
  --gse-semantic-background-system-status-away: #f8c73e;
@@ -369,270 +368,311 @@
369
368
  --gse-semantic-background-system-status-offline: #626e84;
370
369
  --gse-semantic-background-system-status-outOfOffice: #b74ba4;
371
370
  --gse-semantic-background-system-status-notification: #fe624d;
372
- --gse-semantic-background-formControl-clickInput-track: #c6c8ce; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
373
- --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
374
- --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
375
- --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
376
- --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
377
- --gse-semantic-foreground-interactive-secondary-default: #4856cb; /* The color for foreground elements that are over a secondary/default background. */
378
- --gse-semantic-foreground-interactive-secondary-active: #252e78; /* The color for foreground elements that are over a secondary/active background. */
379
- --gse-semantic-foreground-interactive-secondary-hover: #3742a2; /* The color for foreground elements that are over a secondary/hover background. */
380
- --gse-semantic-foreground-interactive-tertiary-default: #4856cb; /* The color for foreground elements that are over a tertiary/default background. */
381
- --gse-semantic-foreground-interactive-tertiary-active: #ffffff; /* The color for foreground elements that are over a tertiary/active background. */
382
- --gse-semantic-foreground-interactive-tertiary-hover: #ffffff; /* The color for foreground elements that are over a tertiary/hover background. */
383
- --gse-semantic-foreground-interactive-ghost-default: #4856cb; /* The color for foreground elements that are over a ghost/default background. */
384
- --gse-semantic-foreground-interactive-ghost-active: #252e78; /* The color for foreground elements that are over a ghost/active background. */
385
- --gse-semantic-foreground-interactive-ghost-hover: #3742a2; /* The color for foreground elements that are over a ghost/hover background. */
386
- --gse-semantic-foreground-interactive-subtle-default: #3e5374; /* The color for foreground elements that are over a subtle/default background. */
387
- --gse-semantic-foreground-interactive-subtle-active: #1b2c48; /* The color for foreground elements that are over a subtle/active background. */
388
- --gse-semantic-foreground-interactive-subtle-hover: #23395d; /* The color for foreground elements that are over a subtle/hover background. */
389
- --gse-semantic-foreground-interactive-danger-default: #ffffff; /* The color for foreground elements that are over a danger/default background. */
390
- --gse-semantic-foreground-interactive-danger-active: #ffffff; /* The color for foreground elements that are over a danger/active background. */
391
- --gse-semantic-foreground-interactive-danger-hover: #ffffff; /* The color for foreground elements that are over a danger/hover background. */
392
- --gse-semantic-foreground-interactive-link-default: #4856cb; /* The default color of links. */
393
- --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
394
- --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
395
- --gse-semantic-foreground-interactive-link-visited: #8a5ecc; /* The color of links when they were already visited. */
396
- --gse-semantic-foreground-interactive-indicator-default: #9ca6f9; /* this is used to the selected indicator for the data table headers */
397
- --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
398
- --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
399
- --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
400
- --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff; /* The default color for high emphasis content on high contrast surfaces, like headings, subheadings, quotes or bold text. */
401
- --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7; /* The default color for medium emphasis content on high contrast surfaces, like normal paragraphs. */
402
- --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
403
- --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
404
- --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f; /* The brand color, mostly used for logos on surfaces. */
405
- --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. */
406
- --gse-semantic-foreground-system-customAccents-dark: #1b2c48; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
407
- --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
408
- --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
409
- --gse-semantic-foreground-system-info-highEmphasis: #1b2c48; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
410
- --gse-semantic-foreground-system-info-accent: #6e5ddb; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
411
- --gse-semantic-foreground-system-success-highEmphasis: #1b2c48; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
412
- --gse-semantic-foreground-system-success-accent: #09b581; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
413
- --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
414
- --gse-semantic-foreground-system-warning-accent: #f8c73e; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
415
- --gse-semantic-foreground-system-error-highEmphasis: #1b2c48; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
416
- --gse-semantic-foreground-system-error-accent: #e22245; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
417
- --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
418
- --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
419
- --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
420
- --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
421
- --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
422
- --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
423
- --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
424
- --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
425
- --gse-semantic-foreground-formControl-clickInput-hover: #3742a2; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
426
- --gse-semantic-foreground-formControl-clickInput-active: #252e78; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
371
+ --gse-semantic-background-formControl-clickInput-track: #c6c8ce;
372
+ --gse-semantic-background-formControl-textInput-track: #ffffff;
373
+ --gse-semantic-foreground-interactive-primary-default: #ffffff;
374
+ --gse-semantic-foreground-interactive-primary-active: #ffffff;
375
+ --gse-semantic-foreground-interactive-primary-hover: #ffffff;
376
+ --gse-semantic-foreground-interactive-secondary-default: #4856cb;
377
+ --gse-semantic-foreground-interactive-secondary-active: #252e78;
378
+ --gse-semantic-foreground-interactive-secondary-hover: #3742a2;
379
+ --gse-semantic-foreground-interactive-tertiary-default: #4856cb;
380
+ --gse-semantic-foreground-interactive-tertiary-active: #ffffff;
381
+ --gse-semantic-foreground-interactive-tertiary-hover: #ffffff;
382
+ --gse-semantic-foreground-interactive-ghost-default: #4856cb;
383
+ --gse-semantic-foreground-interactive-ghost-active: #252e78;
384
+ --gse-semantic-foreground-interactive-ghost-hover: #3742a2;
385
+ --gse-semantic-foreground-interactive-subtle-default: #3e5374;
386
+ --gse-semantic-foreground-interactive-subtle-active: #1b2c48;
387
+ --gse-semantic-foreground-interactive-subtle-hover: #23395d;
388
+ --gse-semantic-foreground-interactive-danger-default: #ffffff;
389
+ --gse-semantic-foreground-interactive-danger-active: #ffffff;
390
+ --gse-semantic-foreground-interactive-danger-hover: #ffffff;
391
+ --gse-semantic-foreground-interactive-link-default: #4856cb;
392
+ --gse-semantic-foreground-interactive-link-active: #252e78;
393
+ --gse-semantic-foreground-interactive-link-hover: #3742a2;
394
+ --gse-semantic-foreground-interactive-link-visited: #8a5ecc;
395
+ --gse-semantic-foreground-interactive-indicator-default: #9ca6f9;
396
+ --gse-semantic-foreground-container-highEmphasis: #1b2c48;
397
+ --gse-semantic-foreground-container-midEmphasis: #3e5374;
398
+ --gse-semantic-foreground-container-lowEmphasis: #626e84;
399
+ --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff;
400
+ --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7;
401
+ --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec;
402
+ --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc;
403
+ --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f;
404
+ --gse-semantic-foreground-system-customAccents-light: #ffffff;
405
+ --gse-semantic-foreground-system-customAccents-dark: #1b2c48;
406
+ --gse-semantic-foreground-system-progressAndLoading-default: #23395d;
407
+ --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff;
408
+ --gse-semantic-foreground-system-info-highEmphasis: #1b2c48;
409
+ --gse-semantic-foreground-system-info-accent: #6e5ddb;
410
+ --gse-semantic-foreground-system-success-highEmphasis: #1b2c48;
411
+ --gse-semantic-foreground-system-success-accent: #09b581;
412
+ --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48;
413
+ --gse-semantic-foreground-system-warning-accent: #f8c73e;
414
+ --gse-semantic-foreground-system-error-highEmphasis: #1b2c48;
415
+ --gse-semantic-foreground-system-error-accent: #e22245;
416
+ --gse-semantic-foreground-system-icon-default: #3e5374;
417
+ --gse-semantic-foreground-formControl-helpText-default: #626e84;
418
+ --gse-semantic-foreground-formControl-helpText-error: #e22245;
419
+ --gse-semantic-foreground-formControl-textInput-placeholder: #626e84;
420
+ --gse-semantic-foreground-formControl-textInput-populated: #1b2c48;
421
+ --gse-semantic-foreground-formControl-textInput-icon: #626e84;
422
+ --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d;
423
+ --gse-semantic-foreground-formControl-clickInput-selected: #4856cb;
424
+ --gse-semantic-foreground-formControl-clickInput-hover: #3742a2;
425
+ --gse-semantic-foreground-formControl-clickInput-active: #252e78;
427
426
  --gse-semantic-foreground-formControl-clickInput-error: #e22245;
428
- --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
429
- --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
430
- --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for optional indicator in labels */
431
- --gse-semantic-foreground-formControl-label-tooltip: #3e5374; /* The color we used for tooltip in labels */
432
- --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
433
- --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
434
- --gse-semantic-border-container-edges-default: #c6c8ce; /* The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards. */
435
- --gse-semantic-border-container-edges-hover: #7b88f7; /* The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab. */
436
- --gse-semantic-border-container-edges-error: #e22245; /* The color for the edge borders of surfaces that are on the error state, like the border of a card in an error state. */
437
- --gse-semantic-border-container-edges-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab. */
438
- --gse-semantic-border-container-edges-active: #3742a2; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab. */
439
- --gse-semantic-border-container-edges-highEmphasis: #1b2c48; /* The default color for the edge borders of high-emphasis surfaces e.g dark tooltip */
440
- --gse-semantic-border-container-edges-dataTable-default: #e8ebf7; /* This is used for default border for datatables */
441
- --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
442
- --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
443
- --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
444
- --gse-semantic-border-container-highConstrast-active: #3742a2; /* The color for the edge borders of high contrast surfaces that are on the active state. */
445
- --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
446
- --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
447
- --gse-semantic-border-system-success: #9de1cd; /* The default borders for elements that have a feedback/success background. */
448
- --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
449
- --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
450
- --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary elements. */
451
- --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
452
- --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
453
- --gse-semantic-border-interactive-danger-divider: #ffffff; /* The color for dividers inside interactive/danger elements. */
454
- --gse-semantic-border-formControl-textInput-default: #a3a7b0; /* The border for inputs edges in the default state. */
455
- --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
456
- --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
457
- --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
458
- --gse-semantic-body-sm-regular: 400 12px/18px "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. */
459
- --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. */
460
- --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. */
461
- --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. */
462
- --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. */
463
- --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. */
464
- --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. */
465
- --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. */
466
- --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. */
467
- --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. */
468
- --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. */
469
- --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. */
470
- /**
471
- * We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
472
- * We usually pair it with high emphasis colors.
473
- */
474
- --gse-semantic-heading-xs-bold: 700 14px/24px Urbanist;
475
- /**
476
- * We use this typography style for moderate emphasis headers nested on a 5th-6th level, h5's or h6's.
477
- * We usually pair it with high emphasis colors.
478
- */
479
- --gse-semantic-heading-xs-semiBold: 600 14px/24px Urbanist;
480
- /**
481
- * We use this typography style for high emphasis headers nested on a 4th level, h4's.
482
- * We usually pair it with high emphasis colors.
483
- */
484
- --gse-semantic-heading-sm-bold: 700 16px/24px Urbanist;
485
- /**
486
- * We use this typography style for moderate emphasis headers nested on a 4th level, h4's.
487
- * We usually pair it with high emphasis colors.
488
- */
489
- --gse-semantic-heading-sm-semiBold: 600 16px/24px Urbanist;
490
- /**
491
- * We use this typography style for high emphasis headers nested on a 3rd level, h3's.
492
- * We usually pair it with high emphasis colors.
493
- */
494
- --gse-semantic-heading-md-bold: 700 18px/27px Urbanist;
495
- /**
496
- * We use this typography style for moderate emphasis headers nested on a 3rd level, h3's.
497
- * We usually pair it with high emphasis colors.
498
- */
499
- --gse-semantic-heading-md-semiBold: 600 18px/27px Urbanist;
500
- /**
501
- * We use this typography style for high emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
502
- * We usually pair it with high emphasis colors.
503
- */
504
- --gse-semantic-heading-lg-bold: 700 24px/32px Urbanist;
505
- /**
506
- * We use this typography style for moderate emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
507
- * We usually pair it with high emphasis colors.
508
- */
509
- --gse-semantic-heading-lg-semiBold: 600 24px/32px Urbanist;
510
- /**
511
- * We use this typography style for high emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
512
- * We usually pair it with high emphasis colors.
513
- */
514
- --gse-semantic-heading-xl-bold: 700 36px/44px Urbanist;
515
- /**
516
- * We use this typography style for moderate emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
517
- * We usually pair it with high emphasis colors.We usually pair it with high emphasis colors.
518
- */
519
- --gse-semantic-heading-xl-semiBold: 600 36px/44px Urbanist;
520
- /**
521
- * We use this typography style for header's eyebrows, meaning a little text that go just above the header that can give more context on the header below.Eyebrows a re meant to be concise and not full sentences, if you need to give more context try using an subheading.
522
- *
523
- * We usually pair it with low emphasis colors.
524
- */
525
- --gse-semantic-heading-overline: 600 12px/16px Urbanist;
526
- /**
527
- * We use this typography style for high emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
528
- * We usually pair it with medium emphasis colors.
529
- */
530
- --gse-semantic-subheading-bold: 700 14px/20px Urbanist;
531
- /**
532
- * We use this typography style for moderate emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
533
- * We usually pair it with medium emphasis colors.
534
- */
535
- --gse-semantic-subheading-semiBold: 600 14px/20px Urbanist;
536
- /**
537
- * We use this typography style for low emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
538
- * We usually pair it with medium emphasis colors.
539
- */
540
- --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
541
- --gse-semantic-interactive-md-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
542
- --gse-semantic-interactive-md-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
543
- --gse-semantic-interactive-md-padding: 8px; /* The recommended horizontal padding for medium-sized components. */
544
- --gse-semantic-interactive-sm-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
545
- --gse-semantic-interactive-sm-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
546
- --gse-semantic-interactive-sm-padding: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
547
- --gse-semantic-interactive-sm-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
548
- --gse-semantic-interactive-lg-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
549
- --gse-semantic-interactive-lg-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
550
- --gse-semantic-interactive-lg-padding: 12px; /* The recommended horizontal padding for large-sized components. */
551
- --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. */
552
- --gse-semantic-interactive-divider-sm-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
553
- --gse-semantic-interactive-divider-lg-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
554
- --gse-semantic-interactive-xl-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
555
- --gse-semantic-interactive-xl-padding: 16px; /* The recommended horizontal padding for xlarge-sized components. */
556
- --gse-semantic-interactive-xl-size: 40px; /* The recommended size for extra-large-sized interactive components. For example a large button height. */
557
- --gse-semantic-interactive-xl-borderRadius: 100%; /* The recommended xlarge border-radius for interactive component. Eg handle of the slider */
558
- --gse-semantic-interactive-xs-size: 20px; /* The recommended size for small-sized interactive components. For example small link. */
559
- --gse-semantic-interactive-xs-padding: 2px; /* The recommended padding for extra-small-sized interactive components. */
560
- --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
561
- --gse-semantic-focusOutline-xl-borderRadius: 20px; /* The recommended xlarge border-radius for focus. Eg toggle */
562
- --gse-semantic-focusOutline-lg-borderRadius: 16px; /* The recommended large border-radius for focus. Eg segmented control */
563
- --gse-semantic-focusOutline-md-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
564
- --gse-semantic-focusOutline-md-borderWidth: 2px; /* The recommended width of the focus outline fo medium-sized components, like the stars on a checkbox */
565
- --gse-semantic-focusOutline-sm-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
566
- --gse-semantic-focusOutline-sm-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
567
- --gse-semantic-focusOutline-xs-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
427
+ --gse-semantic-foreground-formControl-label-default: #1b2c48;
428
+ --gse-semantic-foreground-formControl-label-requiredAccent: #e22245;
429
+ --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374;
430
+ --gse-semantic-foreground-formControl-label-tooltip: #3e5374;
431
+ --gse-semantic-border-focus: #7b88f7;
432
+ --gse-semantic-border-container-divider: #c6c8ce;
433
+ --gse-semantic-border-container-edges-default: #c6c8ce;
434
+ --gse-semantic-border-container-edges-hover: #7b88f7;
435
+ --gse-semantic-border-container-edges-error: #e22245;
436
+ --gse-semantic-border-container-edges-enabled: #4856cb;
437
+ --gse-semantic-border-container-edges-active: #3742a2;
438
+ --gse-semantic-border-container-edges-highEmphasis: #1b2c48;
439
+ --gse-semantic-border-container-edges-dataTable-default: #e8ebf7;
440
+ --gse-semantic-border-container-highConstrast-default: #3e5374;
441
+ --gse-semantic-border-container-highConstrast-enabled: #4856cb;
442
+ --gse-semantic-border-container-highConstrast-hover: #252e78;
443
+ --gse-semantic-border-container-highConstrast-active: #3742a2;
444
+ --gse-semantic-border-system-info: #c5bef1;
445
+ --gse-semantic-border-system-warning: #fce9b2;
446
+ --gse-semantic-border-system-success: #9de1cd;
447
+ --gse-semantic-border-system-error: #f3a7b5;
448
+ --gse-semantic-border-system-primary: #9ca6f9;
449
+ --gse-semantic-border-interactive-primary-divider: #ffffff;
450
+ --gse-semantic-border-interactive-secondary-divider: #ffffff;
451
+ --gse-semantic-border-interactive-tertiary-divider: #4856cb;
452
+ --gse-semantic-border-interactive-danger-divider: #ffffff;
453
+ --gse-semantic-border-formControl-textInput-default: #a3a7b0;
454
+ --gse-semantic-border-formControl-textInput-hover: #3742a2;
455
+ --gse-semantic-border-formControl-textInput-active: #252e78;
456
+ --gse-semantic-border-formControl-textInput-error: #e22245;
457
+ --gse-semantic-body-sm-regular-fontFamily: "Noto Sans";
458
+ --gse-semantic-body-sm-regular-fontWeight: 400;
459
+ --gse-semantic-body-sm-regular-fontSize: 12px;
460
+ --gse-semantic-body-sm-regular-lineHeight: 18px;
461
+ --gse-semantic-body-sm-link-fontFamily: "Noto Sans";
462
+ --gse-semantic-body-sm-link-fontWeight: 600;
463
+ --gse-semantic-body-sm-link-fontSize: 12px;
464
+ --gse-semantic-body-sm-link-lineHeight: 18px;
465
+ --gse-semantic-body-sm-link-textDecoration: underline;
466
+ --gse-semantic-body-sm-bold-fontFamily: "Noto Sans";
467
+ --gse-semantic-body-sm-bold-fontWeight: 700;
468
+ --gse-semantic-body-sm-bold-fontSize: 12px;
469
+ --gse-semantic-body-sm-bold-lineHeight: 18px;
470
+ --gse-semantic-body-sm-semiBold-fontFamily: "Noto Sans";
471
+ --gse-semantic-body-sm-semiBold-fontWeight: 600;
472
+ --gse-semantic-body-sm-semiBold-fontSize: 12px;
473
+ --gse-semantic-body-sm-semiBold-lineHeight: 18px;
474
+ --gse-semantic-body-md-regular-fontFamily: "Noto Sans";
475
+ --gse-semantic-body-md-regular-fontWeight: 400;
476
+ --gse-semantic-body-md-regular-fontSize: 14px;
477
+ --gse-semantic-body-md-regular-lineHeight: 20px;
478
+ --gse-semantic-body-md-link-fontFamily: "Noto Sans";
479
+ --gse-semantic-body-md-link-fontWeight: 600;
480
+ --gse-semantic-body-md-link-fontSize: 14px;
481
+ --gse-semantic-body-md-link-lineHeight: 20px;
482
+ --gse-semantic-body-md-link-textDecoration: underline;
483
+ --gse-semantic-body-md-bold-fontFamily: "Noto Sans";
484
+ --gse-semantic-body-md-bold-fontWeight: 700;
485
+ --gse-semantic-body-md-bold-fontSize: 14px;
486
+ --gse-semantic-body-md-bold-lineHeight: 20px;
487
+ --gse-semantic-body-md-semiBold-fontFamily: "Noto Sans";
488
+ --gse-semantic-body-md-semiBold-fontWeight: 600;
489
+ --gse-semantic-body-md-semiBold-fontSize: 14px;
490
+ --gse-semantic-body-md-semiBold-lineHeight: 20px;
491
+ --gse-semantic-body-lg-regular-fontFamily: "Noto Sans";
492
+ --gse-semantic-body-lg-regular-fontWeight: 400;
493
+ --gse-semantic-body-lg-regular-fontSize: 16px;
494
+ --gse-semantic-body-lg-regular-lineHeight: 24px;
495
+ --gse-semantic-body-lg-link-fontFamily: "Noto Sans";
496
+ --gse-semantic-body-lg-link-fontWeight: 600;
497
+ --gse-semantic-body-lg-link-fontSize: 16px;
498
+ --gse-semantic-body-lg-link-lineHeight: 24px;
499
+ --gse-semantic-body-lg-link-textDecoration: underline;
500
+ --gse-semantic-body-lg-bold-fontFamily: "Noto Sans";
501
+ --gse-semantic-body-lg-bold-fontWeight: 700;
502
+ --gse-semantic-body-lg-bold-fontSize: 16px;
503
+ --gse-semantic-body-lg-bold-lineHeight: 24px;
504
+ --gse-semantic-body-lg-semiBold-fontFamily: "Noto Sans";
505
+ --gse-semantic-body-lg-semiBold-fontWeight: 600;
506
+ --gse-semantic-body-lg-semiBold-fontSize: 16px;
507
+ --gse-semantic-body-lg-semiBold-lineHeight: 24px;
508
+ --gse-semantic-heading-xs-bold-fontFamily: Urbanist;
509
+ --gse-semantic-heading-xs-bold-fontWeight: 700;
510
+ --gse-semantic-heading-xs-bold-fontSize: 14px;
511
+ --gse-semantic-heading-xs-bold-lineHeight: 24px;
512
+ --gse-semantic-heading-xs-semiBold-fontFamily: Urbanist;
513
+ --gse-semantic-heading-xs-semiBold-fontWeight: 600;
514
+ --gse-semantic-heading-xs-semiBold-fontSize: 14px;
515
+ --gse-semantic-heading-xs-semiBold-lineHeight: 24px;
516
+ --gse-semantic-heading-sm-bold-fontFamily: Urbanist;
517
+ --gse-semantic-heading-sm-bold-fontWeight: 700;
518
+ --gse-semantic-heading-sm-bold-fontSize: 16px;
519
+ --gse-semantic-heading-sm-bold-lineHeight: 24px;
520
+ --gse-semantic-heading-sm-semiBold-fontFamily: Urbanist;
521
+ --gse-semantic-heading-sm-semiBold-fontWeight: 600;
522
+ --gse-semantic-heading-sm-semiBold-fontSize: 16px;
523
+ --gse-semantic-heading-sm-semiBold-lineHeight: 24px;
524
+ --gse-semantic-heading-md-bold-fontFamily: Urbanist;
525
+ --gse-semantic-heading-md-bold-fontWeight: 700;
526
+ --gse-semantic-heading-md-bold-fontSize: 18px;
527
+ --gse-semantic-heading-md-bold-lineHeight: 27px;
528
+ --gse-semantic-heading-md-semiBold-fontFamily: Urbanist;
529
+ --gse-semantic-heading-md-semiBold-fontWeight: 600;
530
+ --gse-semantic-heading-md-semiBold-fontSize: 18px;
531
+ --gse-semantic-heading-md-semiBold-lineHeight: 27px;
532
+ --gse-semantic-heading-lg-bold-fontFamily: Urbanist;
533
+ --gse-semantic-heading-lg-bold-fontWeight: 700;
534
+ --gse-semantic-heading-lg-bold-fontSize: 24px;
535
+ --gse-semantic-heading-lg-bold-lineHeight: 32px;
536
+ --gse-semantic-heading-lg-semiBold-fontFamily: Urbanist;
537
+ --gse-semantic-heading-lg-semiBold-fontWeight: 600;
538
+ --gse-semantic-heading-lg-semiBold-fontSize: 24px;
539
+ --gse-semantic-heading-lg-semiBold-lineHeight: 32px;
540
+ --gse-semantic-heading-xl-bold-fontFamily: Urbanist;
541
+ --gse-semantic-heading-xl-bold-fontWeight: 700;
542
+ --gse-semantic-heading-xl-bold-fontSize: 36px;
543
+ --gse-semantic-heading-xl-bold-lineHeight: 44px;
544
+ --gse-semantic-heading-xl-semiBold-fontFamily: Urbanist;
545
+ --gse-semantic-heading-xl-semiBold-fontWeight: 600;
546
+ --gse-semantic-heading-xl-semiBold-fontSize: 36px;
547
+ --gse-semantic-heading-xl-semiBold-lineHeight: 44px;
548
+ --gse-semantic-heading-overline-fontFamily: Urbanist;
549
+ --gse-semantic-heading-overline-fontWeight: 600;
550
+ --gse-semantic-heading-overline-fontSize: 12px;
551
+ --gse-semantic-heading-overline-lineHeight: 16px;
552
+ --gse-semantic-heading-overline-textCase: uppercase;
553
+ --gse-semantic-heading-overline-letterSpacing: 1px;
554
+ --gse-semantic-subheading-bold-fontFamily: Urbanist;
555
+ --gse-semantic-subheading-bold-fontWeight: 700;
556
+ --gse-semantic-subheading-bold-fontSize: 14px;
557
+ --gse-semantic-subheading-bold-lineHeight: 20px;
558
+ --gse-semantic-subheading-semiBold-fontFamily: Urbanist;
559
+ --gse-semantic-subheading-semiBold-fontWeight: 600;
560
+ --gse-semantic-subheading-semiBold-fontSize: 14px;
561
+ --gse-semantic-subheading-semiBold-lineHeight: 20px;
562
+ --gse-semantic-subheading-regular-fontFamily: Urbanist;
563
+ --gse-semantic-subheading-regular-fontWeight: 400;
564
+ --gse-semantic-subheading-regular-fontSize: 14px;
565
+ --gse-semantic-subheading-regular-lineHeight: 20px;
566
+ --gse-semantic-interactive-md-size: 32px;
567
+ --gse-semantic-interactive-md-gap: 4px;
568
+ --gse-semantic-interactive-md-padding: 8px;
569
+ --gse-semantic-interactive-sm-size: 24px;
570
+ --gse-semantic-interactive-sm-gap: 2px;
571
+ --gse-semantic-interactive-sm-padding: 4px;
572
+ --gse-semantic-interactive-sm-borderRadius: 4px;
573
+ --gse-semantic-interactive-lg-borderRadius: 16px;
574
+ --gse-semantic-interactive-lg-gap: 8px;
575
+ --gse-semantic-interactive-lg-padding: 12px;
576
+ --gse-semantic-interactive-edges-borderWidth: 1px;
577
+ --gse-semantic-interactive-divider-sm-borderWidth: 1px;
578
+ --gse-semantic-interactive-divider-lg-borderWidth: 2px;
579
+ --gse-semantic-interactive-xl-gap: 12px;
580
+ --gse-semantic-interactive-xl-padding: 16px;
581
+ --gse-semantic-interactive-xl-size: 40px;
582
+ --gse-semantic-interactive-xl-borderRadius: 100%;
583
+ --gse-semantic-interactive-xs-size: 20px;
584
+ --gse-semantic-interactive-xs-padding: 2px;
585
+ --gse-semantic-focusOutline-full-borderRadius: 100%;
586
+ --gse-semantic-focusOutline-xl-borderRadius: 20px;
587
+ --gse-semantic-focusOutline-lg-borderRadius: 16px;
588
+ --gse-semantic-focusOutline-md-borderRadius: 8px;
589
+ --gse-semantic-focusOutline-md-borderWidth: 2px;
590
+ --gse-semantic-focusOutline-sm-borderRadius: 4px;
591
+ --gse-semantic-focusOutline-sm-borderWidth: 1px;
592
+ --gse-semantic-focusOutline-xs-borderRadius: 2px;
568
593
  --gse-semantic-focusOutline-offset: 1px;
569
- --gse-semantic-container-lg-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
570
- --gse-semantic-container-lg-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
571
- --gse-semantic-container-lg-padding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
572
- --gse-semantic-container-lg-height: 40px; /* The average recommended height for a cell in the datatable */
573
- --gse-semantic-container-md-gap: 12px; /* The recommended medium gap between items inside a container, like the gap between elements inisde a modal. */
574
- --gse-semantic-container-md-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
575
- --gse-semantic-container-md-height: 32px; /* The minimmum recommended height for a medium container, like a button bar. */
576
- --gse-semantic-container-md-padding: 16px; /* The default horizontal padding of a medium-sized container, like an alert. */
577
- --gse-semantic-container-xl-gap: 24px; /* The recommended gap between items inside a xlarge container, like progress and loading. */
578
- --gse-semantic-container-xl-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
579
- --gse-semantic-container-xl-height: 48px; /* The average recommended height for the header of a calendar */
580
- --gse-semantic-container-sm-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
581
- --gse-semantic-container-sm-gap: 8px; /* The recommended medium gap between items inside a container, like the gap between elements inisde an alert. */
582
- --gse-semantic-container-sm-padding: 12px; /* The default padding of a small-sized container, like a tooltip. */
583
- --gse-semantic-container-sm-minHeight: 20px; /* The minimum height recommended for a small container, like a tooltip. */
584
- --gse-semantic-container-sm-height: 32px; /* The average recommended height for a small container, like a tooltip. */
585
- --gse-semantic-container-xs-gap: 4px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
586
- --gse-semantic-container-xs-padding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
587
- --gse-semantic-container-xs-minHeight: 16px; /* The minimum height recommended for a small container, like a tag. */
588
- --gse-semantic-container-xs-height: 20px; /* The average recommended height for a small container, like a tag. */
589
- --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
590
- --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
591
- --gse-semantic-container-2xs-gap: 2px; /* The recommended xsmall gap between items inside a container, like the gap between elements inside a tag. */
592
- --gse-semantic-container-2xs-padding: 2px; /* The default padding of a our smallest containers, like the container of an tag. */
593
- --gse-semantic-container-2xs-size: 12px; /* The average recommended height for a small container, like a tag. */
594
- --gse-semantic-container-full-borderRadius: 100%; /* The recomended border radius for circle-shaped containers. */
594
+ --gse-semantic-container-lg-boxShadow-blur: 8px;
595
+ --gse-semantic-container-lg-boxShadow-spread: 1px;
596
+ --gse-semantic-container-lg-boxShadow-color: rgba(35, 57, 92, 0.15);
597
+ --gse-semantic-container-lg-boxShadow-type: dropShadow;
598
+ --gse-semantic-container-lg-boxShadow-offsetX: 0;
599
+ --gse-semantic-container-lg-boxShadow-offsetY: 0;
600
+ --gse-semantic-container-lg-borderRadius: 16px;
601
+ --gse-semantic-container-lg-gap: 16px;
602
+ --gse-semantic-container-lg-padding: 24px;
603
+ --gse-semantic-container-lg-height: 40px;
604
+ --gse-semantic-container-md-boxShadow-blur: 6px;
605
+ --gse-semantic-container-md-boxShadow-spread: 1px;
606
+ --gse-semantic-container-md-boxShadow-color: rgba(35, 57, 92, 0.12);
607
+ --gse-semantic-container-md-boxShadow-type: dropShadow;
608
+ --gse-semantic-container-md-boxShadow-offsetX: 0;
609
+ --gse-semantic-container-md-boxShadow-offsetY: 0;
610
+ --gse-semantic-container-md-gap: 12px;
611
+ --gse-semantic-container-md-borderRadius: 8px;
612
+ --gse-semantic-container-md-height: 32px;
613
+ --gse-semantic-container-md-padding: 16px;
614
+ --gse-semantic-container-xl-gap: 24px;
615
+ --gse-semantic-container-xl-padding: 32px;
616
+ --gse-semantic-container-xl-height: 48px;
617
+ --gse-semantic-container-sm-boxShadow-blur: 4px;
618
+ --gse-semantic-container-sm-boxShadow-spread: 1px;
619
+ --gse-semantic-container-sm-boxShadow-color: rgba(35, 57, 92, 0.1);
620
+ --gse-semantic-container-sm-boxShadow-type: dropShadow;
621
+ --gse-semantic-container-sm-boxShadow-offsetX: 0;
622
+ --gse-semantic-container-sm-boxShadow-offsetY: 0;
623
+ --gse-semantic-container-sm-borderRadius: 4px;
624
+ --gse-semantic-container-sm-gap: 8px;
625
+ --gse-semantic-container-sm-padding: 12px;
626
+ --gse-semantic-container-sm-minHeight: 20px;
627
+ --gse-semantic-container-sm-height: 32px;
628
+ --gse-semantic-container-xs-gap: 4px;
629
+ --gse-semantic-container-xs-padding: 8px;
630
+ --gse-semantic-container-xs-minHeight: 16px;
631
+ --gse-semantic-container-xs-height: 20px;
632
+ --gse-semantic-container-edges-borderWidth: 1px;
633
+ --gse-semantic-container-divider-borderWidth: 1px;
634
+ --gse-semantic-container-2xs-gap: 2px;
635
+ --gse-semantic-container-2xs-padding: 2px;
636
+ --gse-semantic-container-2xs-size: 12px;
637
+ --gse-semantic-container-full-borderRadius: 100%;
595
638
  --gse-semantic-container-3xs-size: 8px;
596
639
  --gse-semantic-container-4xs-size: 4px;
597
- --gse-semantic-formControl-textInput-lg-borderRadius: 8px; /* The recommended large border-radius for inputs */
598
- --gse-semantic-formControl-textInput-sm-borderRadius: 2px; /* The recommended small border-radius for inputs */
599
- --gse-semantic-formControl-textInput-md-borderRadius: 4px; /* The recommended medium border-radius for inputs */
600
- --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
601
- --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
602
- --gse-semantic-formControl-field-textInput-small-padding: 8px; /* The default vertical padding for inputs inside a form control. */
603
- --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. */
640
+ --gse-semantic-formControl-textInput-lg-borderRadius: 8px;
641
+ --gse-semantic-formControl-textInput-sm-borderRadius: 2px;
642
+ --gse-semantic-formControl-textInput-md-borderRadius: 4px;
643
+ --gse-semantic-formControl-textInput-edges-borderWidth: 1px;
644
+ --gse-semantic-formControl-textInput-divider-borderWidth: 1px;
645
+ --gse-semantic-formControl-field-textInput-small-padding: 8px;
646
+ --gse-semantic-formControl-field-textInput-gap: 12px;
604
647
  --gse-semantic-formControl-field-textInput-md-height: 32px;
605
- --gse-semantic-formControl-field-textInput-medium-padding: 12px; /* The recommended horizontal padding for text inputs. */
648
+ --gse-semantic-formControl-field-textInput-medium-padding: 12px;
606
649
  --gse-semantic-formControl-field-textInput-minWidth: 48px;
607
650
  --gse-semantic-formControl-field-textInput-lg-height: 98px;
608
- --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. */
609
- --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. */
610
- --gse-semantic-formControl-field-clickInput-gap: 8px; /* The default gap for between elements inside a form group, like checkboxes, radio buttons. */
611
- --gse-semantic-formControl-field-clickInput-padding: 4px; /* The default padding for between elements inside a form group, like checkboxes, radio buttons. */
612
- --gse-semantic-formControl-field-clickInput-md-size: 32px; /* The recommended height form medium-size click inputs, like checkboxes or radio buttons. */
613
- --gse-semantic-formControl-field-clickInput-sm-size: 16px; /* The recommended height for leaner click inputs, like toggles. */
614
- --gse-semantic-formControl-field-groupedInput-gap: 8px; /* The recommended gap between groped inputs, like the sapce inbetween checkboxes or radio buttons. */
615
- --gse-semantic-formControl-clickInput-handle-borderWidth: 2px; /* The recommended border width for handles on click inputs, like the habdle of a toggle. */
616
- --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. */
617
- --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. */
618
- --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. */
619
- --gse-semantic-assets-lg-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
620
- --gse-semantic-assets-md-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
621
- --gse-semantic-assets-sm-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
622
- --gse-semantic-assets-xl-size: 48px; /* The recommended size of xlarge-sized for styles, for example avatar */
623
- --gse-semantic-assets-xs-size: 8px; /* The recommended size of small-sized for assets, for example super small icons. */
624
- --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. */
651
+ --gse-semantic-formControl-field-gap: 4px;
652
+ --gse-semantic-formControl-field-padding: 8px;
653
+ --gse-semantic-formControl-field-clickInput-gap: 8px;
654
+ --gse-semantic-formControl-field-clickInput-padding: 4px;
655
+ --gse-semantic-formControl-field-clickInput-md-size: 32px;
656
+ --gse-semantic-formControl-field-clickInput-sm-size: 16px;
657
+ --gse-semantic-formControl-field-groupedInput-gap: 8px;
658
+ --gse-semantic-formControl-clickInput-handle-borderWidth: 2px;
659
+ --gse-semantic-assets-lg-size: 32px;
660
+ --gse-semantic-assets-md-size: 24px;
661
+ --gse-semantic-assets-sm-size: 16px;
662
+ --gse-semantic-assets-xl-size: 48px;
663
+ --gse-semantic-assets-xs-size: 8px;
664
+ --gse-semantic-divider-width: 1px;
625
665
  --gse-semantic-divider-xs-margin: 1px;
626
666
  --gse-semantic-divider-sm-margin: 2px;
627
667
  --gse-semantic-divider-md-margin: 4px;
628
668
  --gse-semantic-divider-lg-margin: 8px;
629
- --gse-semantic-divider-track-height: 4px; /* The heioght for track elements, like the track of the slider. */
630
- --gse-semantic-divider-indicator-width: 2px; /* The recommended divider indicator width, used for the indicators of active tabs, for example */
669
+ --gse-semantic-divider-track-height: 4px;
670
+ --gse-semantic-divider-indicator-width: 2px;
631
671
  }
632
672
 
633
673
  [flare-mode=dark] {
634
674
  --gse-core-spacing-5xs: 2px;
635
- --gse-core-spacing-6xs: 1px; /* Used mostly for the foucs offset. */
675
+ --gse-core-spacing-6xs: 1px;
636
676
  --gse-core-borderRadius-xs: 2px;
637
677
  --gse-core-color-pepper-100: #f9d3da;
638
678
  --gse-core-color-pepper-200: #f3a7b5;
@@ -755,16 +795,16 @@
755
795
  --gse-core-colorLegacy-secondary-electricPurple: #8452cf;
756
796
  --gse-core-colorLegacy-secondary-genesysBlue: #75a8ff;
757
797
  --gse-core-colorLegacy-secondary-navy: #203b73;
758
- --gse-core-colorLegacy-dataVisualization-yellowGreen: lch(95.5 22.7 98.8);
759
- --gse-core-colorLegacy-dataVisualization-oliveGreen: lch(86.9 16.3 103);
760
- --gse-core-colorLegacy-dataVisualization-aquaGreen: lch(88.8 11 206);
761
- --gse-core-colorLegacy-dataVisualization-pink: lch(92.1 16.4 338);
762
- --gse-core-colorLegacy-dataVisualization-fuchsia: lch(85.6 22.8 330);
763
- --gse-core-colorLegacy-dataVisualization-lilac: lch(92.5 8.53 288);
764
- --gse-core-colorLegacy-dataVisualization-plum: lch(81.7 7.69 295);
765
- --gse-core-colorLegacy-dataVisualization-electricPurple: lch(83.7 21.4 305);
766
- --gse-core-colorLegacy-dataVisualization-genesysBlue: lch(90.4 14.8 272);
767
- --gse-core-colorLegacy-dataVisualization-navy: lch(77.6 10.9 279);
798
+ --gse-core-colorLegacy-dataVisualization-yellowGreen: #f8f3c6;
799
+ --gse-core-colorLegacy-dataVisualization-oliveGreen: #dcdbbb;
800
+ --gse-core-colorLegacy-dataVisualization-aquaGreen: #c7e5e8;
801
+ --gse-core-colorLegacy-dataVisualization-pink: #ffdff5;
802
+ --gse-core-colorLegacy-dataVisualization-fuchsia: #f4c9ec;
803
+ --gse-core-colorLegacy-dataVisualization-lilac: #e9e8f9;
804
+ --gse-core-colorLegacy-dataVisualization-plum: #cdc9d8;
805
+ --gse-core-colorLegacy-dataVisualization-electricPurple: #dcc9f2;
806
+ --gse-core-colorLegacy-dataVisualization-genesysBlue: #d9e4ff;
807
+ --gse-core-colorLegacy-dataVisualization-navy: #bbbfd4;
768
808
  --gse-core-colorLegacy-brand-brandOrange: #ff4f1f;
769
809
  --gse-core-colorLegacy-brand-brandTeal: #00ae9e;
770
810
  --gse-core-colorLegacy-brand-brandNavy: #23395d;
@@ -775,13 +815,13 @@
775
815
  --gse-core-borderWidth-3: 3px;
776
816
  --gse-core-textCase-uppercase: uppercase;
777
817
  --gse-core-opacity-0: 0;
778
- --gse-core-opacity-50: 0.5;
779
- --gse-core-opacity-80: 0.8;
818
+ --gse-core-opacity-50: .5;
819
+ --gse-core-opacity-80: .8;
780
820
  --gse-core-letterSpacing-1: 1px;
781
- --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
782
- --gse-semantic-opacity-shroud: 0.8; /* The default opacity for shroud elements like the one on modals. */
783
- --gse-semantic-theme-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
784
- --gse-semantic-theme-fontFamily-body: "Noto Sans"; /* The font family we use for body and labels in this theme. */
821
+ --gse-semantic-opacity-disabled: .5;
822
+ --gse-semantic-opacity-shroud: .8;
823
+ --gse-semantic-theme-fontFamily-headings: Urbanist;
824
+ --gse-semantic-theme-fontFamily-body: "Noto Sans";
785
825
  --gse-semantic-theme-background-container-primary-10: #ffffff;
786
826
  --gse-semantic-theme-background-container-primary-20: #fbfcfe;
787
827
  --gse-semantic-theme-background-container-primary-30: #f3f5fb;
@@ -799,7 +839,7 @@
799
839
  --gse-semantic-theme-background-container-highContrast-40: #000000;
800
840
  --gse-semantic-theme-background-formControl-input-10: #ffffff;
801
841
  --gse-semantic-theme-background-formControl-input-20: #c6c8ce;
802
- --gse-semantic-theme-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
842
+ --gse-semantic-theme-background-overlay-10: #3e5374cc;
803
843
  --gse-semantic-theme-background-system-primary-10: #dee1fd;
804
844
  --gse-semantic-theme-background-system-primary-20: #9ca6f9;
805
845
  --gse-semantic-theme-background-system-primary-30: #5a6af5;
@@ -912,7 +952,6 @@
912
952
  --gse-semantic-theme-border-inputs-hover-10: #3742a2;
913
953
  --gse-semantic-theme-border-inputs-active-10: #252e78;
914
954
  --gse-semantic-theme-borderRadius-interactive-xlarge: 100%;
915
- --gse-semantic-theme-borderRadius-interactive-xlargeCopy: 100%;
916
955
  --gse-semantic-theme-borderRadius-interactive-large: 16px;
917
956
  --gse-semantic-theme-borderRadius-interactive-small: 4px;
918
957
  --gse-semantic-theme-borderRadius-container-large: 16px;
@@ -927,73 +966,73 @@
927
966
  --gse-semantic-theme-borderRadius-focus-medium: 8px;
928
967
  --gse-semantic-theme-borderRadius-focus-small: 4px;
929
968
  --gse-semantic-theme-borderRadius-focus-xsmall: 2px;
930
- --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
931
- --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
932
- --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
933
- --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
934
- --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
935
- --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
936
- --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
937
- --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
938
- --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
939
- --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
940
- --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
941
- --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
942
- --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
943
- --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
944
- --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
945
- --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
946
- --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
947
- --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
948
- --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
949
- --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
950
- --gse-semantic-background-container-page-tonalSubtle: #fbfcfe; /* A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels. */
951
- --gse-semantic-background-container-page-tonalMedium: #f3f5fb; /* The background color to highlight elements in the background, for example, the row of a table. */
952
- --gse-semantic-background-container-page-tonalHigh: #dee1fd; /* The background color to highlight elements in the background, for example, the alternated row of a table. */
953
- --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
954
- --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
955
- --gse-semantic-background-container-elevated-active: #ced2fc; /* The background color for the active state of an elevated surface like modals, popovers, cards, etc. */
956
- --gse-semantic-background-container-elevated-error: #f3a7b5; /* The color of surfaces that are in an error state. */
957
- --gse-semantic-background-container-highConstrast-default: #1b2c48; /* 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. */
958
- --gse-semantic-background-container-highConstrast-hover: #141a4f; /* 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. */
959
- --gse-semantic-background-container-highConstrast-active: #1c2463; /* 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. */
960
- --gse-semantic-background-system-error-tonalMedium: #f3a7b5; /* The default background color for smaller error elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
961
- --gse-semantic-background-system-error-tonalSubtle: #f9d3da; /* The default background color for error elements like alerts. */
962
- --gse-semantic-background-system-warning-tonalMedium: #fce9b2; /* The default background color for smaller warning elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
963
- --gse-semantic-background-system-warning-tonalSubtle: #fef4d8; /* The default background color for warning elements like alerts. */
964
- --gse-semantic-background-system-success-tonalMedium: #9de1cd; /* The default background color for smaller success elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
965
- --gse-semantic-background-system-success-tonalSubtle: #cef0e6; /* The default background color for success elements like alerts. */
966
- --gse-semantic-background-system-info-tonalMedium: #c5bef1; /* The default background color for smaller info elements like badges that need a slightly more saturated color that tonal_subtle because of their size. */
967
- --gse-semantic-background-system-info-tonalSubtle: #e2dff8; /* The default background color for info elements like alerts. */
968
- --gse-semantic-background-system-primary-tonalMedium: #dee1fd; /* Although this tokens has the same value as tonal_subtle, it is needed to match the structure of the other statuses. */
969
- --gse-semantic-background-system-primary-tonalSubtle: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
970
- --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
971
- --gse-semantic-background-system-customAccents-bold-accent_2: #626d97; /* A custom accent used mostly for tags. */
972
- --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
973
- --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
974
- --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
975
- --gse-semantic-background-system-customAccents-bold-accent_6: #467aae; /* A custom accent used mostly for tags. */
976
- --gse-semantic-background-system-customAccents-bold-accent_7: #8a5ecc; /* A custom accent used mostly for tags. */
977
- --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
978
- --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
979
- --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
980
- --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650; /* A custom accent used mostly for tags. */
981
- --gse-semantic-background-system-customAccents-bold-accent_12: #b5e2e8; /* A custom accent used in search component */
969
+ --gse-semantic-background-interactive-primary-default: #4856cb;
970
+ --gse-semantic-background-interactive-primary-hover: #3742a2;
971
+ --gse-semantic-background-interactive-primary-active: #252e78;
972
+ --gse-semantic-background-interactive-secondary-default: #eff0fe;
973
+ --gse-semantic-background-interactive-secondary-hover: #dee1fd;
974
+ --gse-semantic-background-interactive-secondary-active: #ced2fc;
975
+ --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0);
976
+ --gse-semantic-background-interactive-tertiary-hover: #3742a2;
977
+ --gse-semantic-background-interactive-tertiary-active: #252e78;
978
+ --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0);
979
+ --gse-semantic-background-interactive-ghost-hover: #dee1fd;
980
+ --gse-semantic-background-interactive-ghost-active: #ced2fc;
981
+ --gse-semantic-background-interactive-subtle-default: #ffffff;
982
+ --gse-semantic-background-interactive-subtle-hover: #dee1fd;
983
+ --gse-semantic-background-interactive-subtle-active: #ced2fc;
984
+ --gse-semantic-background-interactive-danger-default: #e22245;
985
+ --gse-semantic-background-interactive-danger-hover: #881429;
986
+ --gse-semantic-background-interactive-danger-active: #440a15;
987
+ --gse-semantic-background-overlay-shroud-default: #3e5374cc;
988
+ --gse-semantic-background-container-page-default: #ffffff;
989
+ --gse-semantic-background-container-page-tonalSubtle: #fbfcfe;
990
+ --gse-semantic-background-container-page-tonalMedium: #f3f5fb;
991
+ --gse-semantic-background-container-page-tonalHigh: #dee1fd;
992
+ --gse-semantic-background-container-elevated-default: #ffffff;
993
+ --gse-semantic-background-container-elevated-hover: #eff0fe;
994
+ --gse-semantic-background-container-elevated-active: #ced2fc;
995
+ --gse-semantic-background-container-elevated-error: #f3a7b5;
996
+ --gse-semantic-background-container-highConstrast-default: #1b2c48;
997
+ --gse-semantic-background-container-highConstrast-hover: #141a4f;
998
+ --gse-semantic-background-container-highConstrast-active: #1c2463;
999
+ --gse-semantic-background-system-error-tonalMedium: #f3a7b5;
1000
+ --gse-semantic-background-system-error-tonalSubtle: #f9d3da;
1001
+ --gse-semantic-background-system-warning-tonalMedium: #fce9b2;
1002
+ --gse-semantic-background-system-warning-tonalSubtle: #fef4d8;
1003
+ --gse-semantic-background-system-success-tonalMedium: #9de1cd;
1004
+ --gse-semantic-background-system-success-tonalSubtle: #cef0e6;
1005
+ --gse-semantic-background-system-info-tonalMedium: #c5bef1;
1006
+ --gse-semantic-background-system-info-tonalSubtle: #e2dff8;
1007
+ --gse-semantic-background-system-primary-tonalMedium: #dee1fd;
1008
+ --gse-semantic-background-system-primary-tonalSubtle: #dee1fd;
1009
+ --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374;
1010
+ --gse-semantic-background-system-customAccents-bold-accent_2: #626d97;
1011
+ --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a;
1012
+ --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e;
1013
+ --gse-semantic-background-system-customAccents-bold-accent_5: #607732;
1014
+ --gse-semantic-background-system-customAccents-bold-accent_6: #467aae;
1015
+ --gse-semantic-background-system-customAccents-bold-accent_7: #8a5ecc;
1016
+ --gse-semantic-background-system-customAccents-bold-accent_8: #89387b;
1017
+ --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77;
1018
+ --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b;
1019
+ --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650;
1020
+ --gse-semantic-background-system-customAccents-bold-accent_12: #b5e2e8;
982
1021
  --gse-semantic-background-system-customAccents-bold-accent_13: #5798d9;
983
- --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
984
- --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
985
- --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
986
- --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd; /* A custom accent used mostly for tags. */
987
- --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98; /* A custom accent used mostly for tags. */
988
- --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8; /* A custom accent used mostly for tags. */
989
- --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff; /* A custom accent used mostly for tags. */
990
- --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1; /* A custom accent used mostly for tags. */
991
- --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
1022
+ --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce;
1023
+ --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef;
1024
+ --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd;
1025
+ --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd;
1026
+ --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98;
1027
+ --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8;
1028
+ --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff;
1029
+ --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1;
1030
+ --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad;
992
1031
  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
993
- --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96; /* A custom accent used mostly for tags. */
994
- --gse-semantic-background-system-customAccents-subtle-accent_12: #daf0f4; /* A custom accent used in search component */
995
- --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
996
- --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
1032
+ --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96;
1033
+ --gse-semantic-background-system-customAccents-subtle-accent_12: #daf0f4;
1034
+ --gse-semantic-background-system-progressAndLoading-default: #dee1fd;
1035
+ --gse-semantic-background-system-progressAndLoading-progressed: #4856cb;
997
1036
  --gse-semantic-background-system-status-available: #09b581;
998
1037
  --gse-semantic-background-system-status-busy: #e22245;
999
1038
  --gse-semantic-background-system-status-away: #f8c73e;
@@ -1001,265 +1040,306 @@
1001
1040
  --gse-semantic-background-system-status-offline: #626e84;
1002
1041
  --gse-semantic-background-system-status-outOfOffice: #b74ba4;
1003
1042
  --gse-semantic-background-system-status-notification: #fe624d;
1004
- --gse-semantic-background-formControl-clickInput-track: #c6c8ce; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
1005
- --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
1006
- --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
1007
- --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
1008
- --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
1009
- --gse-semantic-foreground-interactive-secondary-default: #4856cb; /* The color for foreground elements that are over a secondary/default background. */
1010
- --gse-semantic-foreground-interactive-secondary-active: #252e78; /* The color for foreground elements that are over a secondary/active background. */
1011
- --gse-semantic-foreground-interactive-secondary-hover: #3742a2; /* The color for foreground elements that are over a secondary/hover background. */
1012
- --gse-semantic-foreground-interactive-tertiary-default: #4856cb; /* The color for foreground elements that are over a tertiary/default background. */
1013
- --gse-semantic-foreground-interactive-tertiary-active: #ffffff; /* The color for foreground elements that are over a tertiary/active background. */
1014
- --gse-semantic-foreground-interactive-tertiary-hover: #ffffff; /* The color for foreground elements that are over a tertiary/hover background. */
1015
- --gse-semantic-foreground-interactive-ghost-default: #4856cb; /* The color for foreground elements that are over a ghost/default background. */
1016
- --gse-semantic-foreground-interactive-ghost-active: #252e78; /* The color for foreground elements that are over a ghost/active background. */
1017
- --gse-semantic-foreground-interactive-ghost-hover: #3742a2; /* The color for foreground elements that are over a ghost/hover background. */
1018
- --gse-semantic-foreground-interactive-subtle-default: #3e5374; /* The color for foreground elements that are over a subtle/default background. */
1019
- --gse-semantic-foreground-interactive-subtle-active: #1b2c48; /* The color for foreground elements that are over a subtle/active background. */
1020
- --gse-semantic-foreground-interactive-subtle-hover: #23395d; /* The color for foreground elements that are over a subtle/hover background. */
1021
- --gse-semantic-foreground-interactive-danger-default: #ffffff; /* The color for foreground elements that are over a danger/default background. */
1022
- --gse-semantic-foreground-interactive-danger-active: #ffffff; /* The color for foreground elements that are over a danger/active background. */
1023
- --gse-semantic-foreground-interactive-danger-hover: #ffffff; /* The color for foreground elements that are over a danger/hover background. */
1024
- --gse-semantic-foreground-interactive-link-default: #4856cb; /* The default color of links. */
1025
- --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
1026
- --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
1027
- --gse-semantic-foreground-interactive-link-visited: #8a5ecc; /* The color of links when they were already visited. */
1028
- --gse-semantic-foreground-interactive-indicator-default: #9ca6f9; /* this is used to the selected indicator for the data table headers */
1029
- --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
1030
- --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
1031
- --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
1032
- --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff; /* The default color for high emphasis content on high contrast surfaces, like headings, subheadings, quotes or bold text. */
1033
- --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7; /* The default color for medium emphasis content on high contrast surfaces, like normal paragraphs. */
1034
- --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
1035
- --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
1036
- --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f; /* The brand color, mostly used for logos on surfaces. */
1037
- --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. */
1038
- --gse-semantic-foreground-system-customAccents-dark: #1b2c48; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
1039
- --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
1040
- --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
1041
- --gse-semantic-foreground-system-info-highEmphasis: #1b2c48; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
1042
- --gse-semantic-foreground-system-info-accent: #6e5ddb; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
1043
- --gse-semantic-foreground-system-success-highEmphasis: #1b2c48; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
1044
- --gse-semantic-foreground-system-success-accent: #09b581; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
1045
- --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
1046
- --gse-semantic-foreground-system-warning-accent: #f8c73e; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
1047
- --gse-semantic-foreground-system-error-highEmphasis: #1b2c48; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
1048
- --gse-semantic-foreground-system-error-accent: #e22245; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
1049
- --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
1050
- --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
1051
- --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
1052
- --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
1053
- --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
1054
- --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
1055
- --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
1056
- --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
1057
- --gse-semantic-foreground-formControl-clickInput-hover: #3742a2; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
1058
- --gse-semantic-foreground-formControl-clickInput-active: #252e78; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
1043
+ --gse-semantic-background-formControl-clickInput-track: #c6c8ce;
1044
+ --gse-semantic-background-formControl-textInput-track: #ffffff;
1045
+ --gse-semantic-foreground-interactive-primary-default: #ffffff;
1046
+ --gse-semantic-foreground-interactive-primary-active: #ffffff;
1047
+ --gse-semantic-foreground-interactive-primary-hover: #ffffff;
1048
+ --gse-semantic-foreground-interactive-secondary-default: #4856cb;
1049
+ --gse-semantic-foreground-interactive-secondary-active: #252e78;
1050
+ --gse-semantic-foreground-interactive-secondary-hover: #3742a2;
1051
+ --gse-semantic-foreground-interactive-tertiary-default: #4856cb;
1052
+ --gse-semantic-foreground-interactive-tertiary-active: #ffffff;
1053
+ --gse-semantic-foreground-interactive-tertiary-hover: #ffffff;
1054
+ --gse-semantic-foreground-interactive-ghost-default: #4856cb;
1055
+ --gse-semantic-foreground-interactive-ghost-active: #252e78;
1056
+ --gse-semantic-foreground-interactive-ghost-hover: #3742a2;
1057
+ --gse-semantic-foreground-interactive-subtle-default: #3e5374;
1058
+ --gse-semantic-foreground-interactive-subtle-active: #1b2c48;
1059
+ --gse-semantic-foreground-interactive-subtle-hover: #23395d;
1060
+ --gse-semantic-foreground-interactive-danger-default: #ffffff;
1061
+ --gse-semantic-foreground-interactive-danger-active: #ffffff;
1062
+ --gse-semantic-foreground-interactive-danger-hover: #ffffff;
1063
+ --gse-semantic-foreground-interactive-link-default: #4856cb;
1064
+ --gse-semantic-foreground-interactive-link-active: #252e78;
1065
+ --gse-semantic-foreground-interactive-link-hover: #3742a2;
1066
+ --gse-semantic-foreground-interactive-link-visited: #8a5ecc;
1067
+ --gse-semantic-foreground-interactive-indicator-default: #9ca6f9;
1068
+ --gse-semantic-foreground-container-highEmphasis: #1b2c48;
1069
+ --gse-semantic-foreground-container-midEmphasis: #3e5374;
1070
+ --gse-semantic-foreground-container-lowEmphasis: #626e84;
1071
+ --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff;
1072
+ --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7;
1073
+ --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec;
1074
+ --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc;
1075
+ --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f;
1076
+ --gse-semantic-foreground-system-customAccents-light: #ffffff;
1077
+ --gse-semantic-foreground-system-customAccents-dark: #1b2c48;
1078
+ --gse-semantic-foreground-system-progressAndLoading-default: #23395d;
1079
+ --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff;
1080
+ --gse-semantic-foreground-system-info-highEmphasis: #1b2c48;
1081
+ --gse-semantic-foreground-system-info-accent: #6e5ddb;
1082
+ --gse-semantic-foreground-system-success-highEmphasis: #1b2c48;
1083
+ --gse-semantic-foreground-system-success-accent: #09b581;
1084
+ --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48;
1085
+ --gse-semantic-foreground-system-warning-accent: #f8c73e;
1086
+ --gse-semantic-foreground-system-error-highEmphasis: #1b2c48;
1087
+ --gse-semantic-foreground-system-error-accent: #e22245;
1088
+ --gse-semantic-foreground-system-icon-default: #3e5374;
1089
+ --gse-semantic-foreground-formControl-helpText-default: #626e84;
1090
+ --gse-semantic-foreground-formControl-helpText-error: #e22245;
1091
+ --gse-semantic-foreground-formControl-textInput-placeholder: #626e84;
1092
+ --gse-semantic-foreground-formControl-textInput-populated: #1b2c48;
1093
+ --gse-semantic-foreground-formControl-textInput-icon: #626e84;
1094
+ --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d;
1095
+ --gse-semantic-foreground-formControl-clickInput-selected: #4856cb;
1096
+ --gse-semantic-foreground-formControl-clickInput-hover: #3742a2;
1097
+ --gse-semantic-foreground-formControl-clickInput-active: #252e78;
1059
1098
  --gse-semantic-foreground-formControl-clickInput-error: #e22245;
1060
- --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
1061
- --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
1062
- --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for optional indicator in labels */
1063
- --gse-semantic-foreground-formControl-label-tooltip: #3e5374; /* The color we used for tooltip in labels */
1064
- --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
1065
- --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
1066
- --gse-semantic-border-container-edges-default: #c6c8ce; /* The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards. */
1067
- --gse-semantic-border-container-edges-hover: #7b88f7; /* The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab. */
1068
- --gse-semantic-border-container-edges-error: #e22245; /* The color for the edge borders of surfaces that are on the error state, like the border of a card in an error state. */
1069
- --gse-semantic-border-container-edges-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab. */
1070
- --gse-semantic-border-container-edges-active: #3742a2; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab. */
1071
- --gse-semantic-border-container-edges-highEmphasis: #1b2c48; /* The default color for the edge borders of high-emphasis surfaces e.g dark tooltip */
1072
- --gse-semantic-border-container-edges-dataTable-default: #e8ebf7; /* This is used for default border for datatables */
1073
- --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
1074
- --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
1075
- --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
1076
- --gse-semantic-border-container-highConstrast-active: #3742a2; /* The color for the edge borders of high contrast surfaces that are on the active state. */
1077
- --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
1078
- --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
1079
- --gse-semantic-border-system-success: #9de1cd; /* The default borders for elements that have a feedback/success background. */
1080
- --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
1081
- --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
1082
- --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary elements. */
1083
- --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
1084
- --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
1085
- --gse-semantic-border-interactive-danger-divider: #ffffff; /* The color for dividers inside interactive/danger elements. */
1086
- --gse-semantic-border-formControl-textInput-default: #a3a7b0; /* The border for inputs edges in the default state. */
1087
- --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
1088
- --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
1089
- --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
1090
- --gse-semantic-body-sm-regular: 400 12px/18px "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. */
1091
- --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. */
1092
- --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. */
1093
- --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. */
1094
- --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. */
1095
- --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. */
1096
- --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. */
1097
- --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. */
1098
- --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. */
1099
- --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. */
1100
- --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. */
1101
- --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. */
1102
- /**
1103
- * We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
1104
- * We usually pair it with high emphasis colors.
1105
- */
1106
- --gse-semantic-heading-xs-bold: 700 14px/24px Urbanist;
1107
- /**
1108
- * We use this typography style for moderate emphasis headers nested on a 5th-6th level, h5's or h6's.
1109
- * We usually pair it with high emphasis colors.
1110
- */
1111
- --gse-semantic-heading-xs-semiBold: 600 14px/24px Urbanist;
1112
- /**
1113
- * We use this typography style for high emphasis headers nested on a 4th level, h4's.
1114
- * We usually pair it with high emphasis colors.
1115
- */
1116
- --gse-semantic-heading-sm-bold: 700 16px/24px Urbanist;
1117
- /**
1118
- * We use this typography style for moderate emphasis headers nested on a 4th level, h4's.
1119
- * We usually pair it with high emphasis colors.
1120
- */
1121
- --gse-semantic-heading-sm-semiBold: 600 16px/24px Urbanist;
1122
- /**
1123
- * We use this typography style for high emphasis headers nested on a 3rd level, h3's.
1124
- * We usually pair it with high emphasis colors.
1125
- */
1126
- --gse-semantic-heading-md-bold: 700 18px/27px Urbanist;
1127
- /**
1128
- * We use this typography style for moderate emphasis headers nested on a 3rd level, h3's.
1129
- * We usually pair it with high emphasis colors.
1130
- */
1131
- --gse-semantic-heading-md-semiBold: 600 18px/27px Urbanist;
1132
- /**
1133
- * We use this typography style for high emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
1134
- * We usually pair it with high emphasis colors.
1135
- */
1136
- --gse-semantic-heading-lg-bold: 700 24px/32px Urbanist;
1137
- /**
1138
- * We use this typography style for moderate emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
1139
- * We usually pair it with high emphasis colors.
1140
- */
1141
- --gse-semantic-heading-lg-semiBold: 600 24px/32px Urbanist;
1142
- /**
1143
- * We use this typography style for high emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
1144
- * We usually pair it with high emphasis colors.
1145
- */
1146
- --gse-semantic-heading-xl-bold: 700 36px/44px Urbanist;
1147
- /**
1148
- * We use this typography style for moderate emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
1149
- * We usually pair it with high emphasis colors.We usually pair it with high emphasis colors.
1150
- */
1151
- --gse-semantic-heading-xl-semiBold: 600 36px/44px Urbanist;
1152
- /**
1153
- * We use this typography style for header's eyebrows, meaning a little text that go just above the header that can give more context on the header below.Eyebrows a re meant to be concise and not full sentences, if you need to give more context try using an subheading.
1154
- *
1155
- * We usually pair it with low emphasis colors.
1156
- */
1157
- --gse-semantic-heading-overline: 600 12px/16px Urbanist;
1158
- /**
1159
- * We use this typography style for high emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
1160
- * We usually pair it with medium emphasis colors.
1161
- */
1162
- --gse-semantic-subheading-bold: 700 14px/20px Urbanist;
1163
- /**
1164
- * We use this typography style for moderate emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
1165
- * We usually pair it with medium emphasis colors.
1166
- */
1167
- --gse-semantic-subheading-semiBold: 600 14px/20px Urbanist;
1168
- /**
1169
- * We use this typography style for low emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
1170
- * We usually pair it with medium emphasis colors.
1171
- */
1172
- --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
1173
- --gse-semantic-interactive-md-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
1174
- --gse-semantic-interactive-md-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
1175
- --gse-semantic-interactive-md-padding: 8px; /* The recommended horizontal padding for medium-sized components. */
1176
- --gse-semantic-interactive-sm-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
1177
- --gse-semantic-interactive-sm-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
1178
- --gse-semantic-interactive-sm-padding: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
1179
- --gse-semantic-interactive-sm-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
1180
- --gse-semantic-interactive-lg-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
1181
- --gse-semantic-interactive-lg-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
1182
- --gse-semantic-interactive-lg-padding: 12px; /* The recommended horizontal padding for large-sized components. */
1183
- --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. */
1184
- --gse-semantic-interactive-divider-sm-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
1185
- --gse-semantic-interactive-divider-lg-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
1186
- --gse-semantic-interactive-xl-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
1187
- --gse-semantic-interactive-xl-padding: 16px; /* The recommended horizontal padding for xlarge-sized components. */
1188
- --gse-semantic-interactive-xl-size: 40px; /* The recommended size for extra-large-sized interactive components. For example a large button height. */
1189
- --gse-semantic-interactive-xl-borderRadius: 100%; /* The recommended xlarge border-radius for interactive component. Eg handle of the slider */
1190
- --gse-semantic-interactive-xs-size: 20px; /* The recommended size for small-sized interactive components. For example small link. */
1191
- --gse-semantic-interactive-xs-padding: 2px; /* The recommended padding for extra-small-sized interactive components. */
1192
- --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
1193
- --gse-semantic-focusOutline-xl-borderRadius: 20px; /* The recommended xlarge border-radius for focus. Eg toggle */
1194
- --gse-semantic-focusOutline-lg-borderRadius: 16px; /* The recommended large border-radius for focus. Eg segmented control */
1195
- --gse-semantic-focusOutline-md-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
1196
- --gse-semantic-focusOutline-md-borderWidth: 2px; /* The recommended width of the focus outline fo medium-sized components, like the stars on a checkbox */
1197
- --gse-semantic-focusOutline-sm-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
1198
- --gse-semantic-focusOutline-sm-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
1199
- --gse-semantic-focusOutline-xs-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
1099
+ --gse-semantic-foreground-formControl-label-default: #1b2c48;
1100
+ --gse-semantic-foreground-formControl-label-requiredAccent: #e22245;
1101
+ --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374;
1102
+ --gse-semantic-foreground-formControl-label-tooltip: #3e5374;
1103
+ --gse-semantic-border-focus: #7b88f7;
1104
+ --gse-semantic-border-container-divider: #c6c8ce;
1105
+ --gse-semantic-border-container-edges-default: #c6c8ce;
1106
+ --gse-semantic-border-container-edges-hover: #7b88f7;
1107
+ --gse-semantic-border-container-edges-error: #e22245;
1108
+ --gse-semantic-border-container-edges-enabled: #4856cb;
1109
+ --gse-semantic-border-container-edges-active: #3742a2;
1110
+ --gse-semantic-border-container-edges-highEmphasis: #1b2c48;
1111
+ --gse-semantic-border-container-edges-dataTable-default: #e8ebf7;
1112
+ --gse-semantic-border-container-highConstrast-default: #3e5374;
1113
+ --gse-semantic-border-container-highConstrast-enabled: #4856cb;
1114
+ --gse-semantic-border-container-highConstrast-hover: #252e78;
1115
+ --gse-semantic-border-container-highConstrast-active: #3742a2;
1116
+ --gse-semantic-border-system-info: #c5bef1;
1117
+ --gse-semantic-border-system-warning: #fce9b2;
1118
+ --gse-semantic-border-system-success: #9de1cd;
1119
+ --gse-semantic-border-system-error: #f3a7b5;
1120
+ --gse-semantic-border-system-primary: #9ca6f9;
1121
+ --gse-semantic-border-interactive-primary-divider: #ffffff;
1122
+ --gse-semantic-border-interactive-secondary-divider: #ffffff;
1123
+ --gse-semantic-border-interactive-tertiary-divider: #4856cb;
1124
+ --gse-semantic-border-interactive-danger-divider: #ffffff;
1125
+ --gse-semantic-border-formControl-textInput-default: #a3a7b0;
1126
+ --gse-semantic-border-formControl-textInput-hover: #3742a2;
1127
+ --gse-semantic-border-formControl-textInput-active: #252e78;
1128
+ --gse-semantic-border-formControl-textInput-error: #e22245;
1129
+ --gse-semantic-body-sm-regular-fontFamily: "Noto Sans";
1130
+ --gse-semantic-body-sm-regular-fontWeight: 400;
1131
+ --gse-semantic-body-sm-regular-fontSize: 12px;
1132
+ --gse-semantic-body-sm-regular-lineHeight: 18px;
1133
+ --gse-semantic-body-sm-link-fontFamily: "Noto Sans";
1134
+ --gse-semantic-body-sm-link-fontWeight: 600;
1135
+ --gse-semantic-body-sm-link-fontSize: 12px;
1136
+ --gse-semantic-body-sm-link-lineHeight: 18px;
1137
+ --gse-semantic-body-sm-link-textDecoration: underline;
1138
+ --gse-semantic-body-sm-bold-fontFamily: "Noto Sans";
1139
+ --gse-semantic-body-sm-bold-fontWeight: 700;
1140
+ --gse-semantic-body-sm-bold-fontSize: 12px;
1141
+ --gse-semantic-body-sm-bold-lineHeight: 18px;
1142
+ --gse-semantic-body-sm-semiBold-fontFamily: "Noto Sans";
1143
+ --gse-semantic-body-sm-semiBold-fontWeight: 600;
1144
+ --gse-semantic-body-sm-semiBold-fontSize: 12px;
1145
+ --gse-semantic-body-sm-semiBold-lineHeight: 18px;
1146
+ --gse-semantic-body-md-regular-fontFamily: "Noto Sans";
1147
+ --gse-semantic-body-md-regular-fontWeight: 400;
1148
+ --gse-semantic-body-md-regular-fontSize: 14px;
1149
+ --gse-semantic-body-md-regular-lineHeight: 20px;
1150
+ --gse-semantic-body-md-link-fontFamily: "Noto Sans";
1151
+ --gse-semantic-body-md-link-fontWeight: 600;
1152
+ --gse-semantic-body-md-link-fontSize: 14px;
1153
+ --gse-semantic-body-md-link-lineHeight: 20px;
1154
+ --gse-semantic-body-md-link-textDecoration: underline;
1155
+ --gse-semantic-body-md-bold-fontFamily: "Noto Sans";
1156
+ --gse-semantic-body-md-bold-fontWeight: 700;
1157
+ --gse-semantic-body-md-bold-fontSize: 14px;
1158
+ --gse-semantic-body-md-bold-lineHeight: 20px;
1159
+ --gse-semantic-body-md-semiBold-fontFamily: "Noto Sans";
1160
+ --gse-semantic-body-md-semiBold-fontWeight: 600;
1161
+ --gse-semantic-body-md-semiBold-fontSize: 14px;
1162
+ --gse-semantic-body-md-semiBold-lineHeight: 20px;
1163
+ --gse-semantic-body-lg-regular-fontFamily: "Noto Sans";
1164
+ --gse-semantic-body-lg-regular-fontWeight: 400;
1165
+ --gse-semantic-body-lg-regular-fontSize: 16px;
1166
+ --gse-semantic-body-lg-regular-lineHeight: 24px;
1167
+ --gse-semantic-body-lg-link-fontFamily: "Noto Sans";
1168
+ --gse-semantic-body-lg-link-fontWeight: 600;
1169
+ --gse-semantic-body-lg-link-fontSize: 16px;
1170
+ --gse-semantic-body-lg-link-lineHeight: 24px;
1171
+ --gse-semantic-body-lg-link-textDecoration: underline;
1172
+ --gse-semantic-body-lg-bold-fontFamily: "Noto Sans";
1173
+ --gse-semantic-body-lg-bold-fontWeight: 700;
1174
+ --gse-semantic-body-lg-bold-fontSize: 16px;
1175
+ --gse-semantic-body-lg-bold-lineHeight: 24px;
1176
+ --gse-semantic-body-lg-semiBold-fontFamily: "Noto Sans";
1177
+ --gse-semantic-body-lg-semiBold-fontWeight: 600;
1178
+ --gse-semantic-body-lg-semiBold-fontSize: 16px;
1179
+ --gse-semantic-body-lg-semiBold-lineHeight: 24px;
1180
+ --gse-semantic-heading-xs-bold-fontFamily: Urbanist;
1181
+ --gse-semantic-heading-xs-bold-fontWeight: 700;
1182
+ --gse-semantic-heading-xs-bold-fontSize: 14px;
1183
+ --gse-semantic-heading-xs-bold-lineHeight: 24px;
1184
+ --gse-semantic-heading-xs-semiBold-fontFamily: Urbanist;
1185
+ --gse-semantic-heading-xs-semiBold-fontWeight: 600;
1186
+ --gse-semantic-heading-xs-semiBold-fontSize: 14px;
1187
+ --gse-semantic-heading-xs-semiBold-lineHeight: 24px;
1188
+ --gse-semantic-heading-sm-bold-fontFamily: Urbanist;
1189
+ --gse-semantic-heading-sm-bold-fontWeight: 700;
1190
+ --gse-semantic-heading-sm-bold-fontSize: 16px;
1191
+ --gse-semantic-heading-sm-bold-lineHeight: 24px;
1192
+ --gse-semantic-heading-sm-semiBold-fontFamily: Urbanist;
1193
+ --gse-semantic-heading-sm-semiBold-fontWeight: 600;
1194
+ --gse-semantic-heading-sm-semiBold-fontSize: 16px;
1195
+ --gse-semantic-heading-sm-semiBold-lineHeight: 24px;
1196
+ --gse-semantic-heading-md-bold-fontFamily: Urbanist;
1197
+ --gse-semantic-heading-md-bold-fontWeight: 700;
1198
+ --gse-semantic-heading-md-bold-fontSize: 18px;
1199
+ --gse-semantic-heading-md-bold-lineHeight: 27px;
1200
+ --gse-semantic-heading-md-semiBold-fontFamily: Urbanist;
1201
+ --gse-semantic-heading-md-semiBold-fontWeight: 600;
1202
+ --gse-semantic-heading-md-semiBold-fontSize: 18px;
1203
+ --gse-semantic-heading-md-semiBold-lineHeight: 27px;
1204
+ --gse-semantic-heading-lg-bold-fontFamily: Urbanist;
1205
+ --gse-semantic-heading-lg-bold-fontWeight: 700;
1206
+ --gse-semantic-heading-lg-bold-fontSize: 24px;
1207
+ --gse-semantic-heading-lg-bold-lineHeight: 32px;
1208
+ --gse-semantic-heading-lg-semiBold-fontFamily: Urbanist;
1209
+ --gse-semantic-heading-lg-semiBold-fontWeight: 600;
1210
+ --gse-semantic-heading-lg-semiBold-fontSize: 24px;
1211
+ --gse-semantic-heading-lg-semiBold-lineHeight: 32px;
1212
+ --gse-semantic-heading-xl-bold-fontFamily: Urbanist;
1213
+ --gse-semantic-heading-xl-bold-fontWeight: 700;
1214
+ --gse-semantic-heading-xl-bold-fontSize: 36px;
1215
+ --gse-semantic-heading-xl-bold-lineHeight: 44px;
1216
+ --gse-semantic-heading-xl-semiBold-fontFamily: Urbanist;
1217
+ --gse-semantic-heading-xl-semiBold-fontWeight: 600;
1218
+ --gse-semantic-heading-xl-semiBold-fontSize: 36px;
1219
+ --gse-semantic-heading-xl-semiBold-lineHeight: 44px;
1220
+ --gse-semantic-heading-overline-fontFamily: Urbanist;
1221
+ --gse-semantic-heading-overline-fontWeight: 600;
1222
+ --gse-semantic-heading-overline-fontSize: 12px;
1223
+ --gse-semantic-heading-overline-lineHeight: 16px;
1224
+ --gse-semantic-heading-overline-textCase: uppercase;
1225
+ --gse-semantic-heading-overline-letterSpacing: 1px;
1226
+ --gse-semantic-subheading-bold-fontFamily: Urbanist;
1227
+ --gse-semantic-subheading-bold-fontWeight: 700;
1228
+ --gse-semantic-subheading-bold-fontSize: 14px;
1229
+ --gse-semantic-subheading-bold-lineHeight: 20px;
1230
+ --gse-semantic-subheading-semiBold-fontFamily: Urbanist;
1231
+ --gse-semantic-subheading-semiBold-fontWeight: 600;
1232
+ --gse-semantic-subheading-semiBold-fontSize: 14px;
1233
+ --gse-semantic-subheading-semiBold-lineHeight: 20px;
1234
+ --gse-semantic-subheading-regular-fontFamily: Urbanist;
1235
+ --gse-semantic-subheading-regular-fontWeight: 400;
1236
+ --gse-semantic-subheading-regular-fontSize: 14px;
1237
+ --gse-semantic-subheading-regular-lineHeight: 20px;
1238
+ --gse-semantic-interactive-md-size: 32px;
1239
+ --gse-semantic-interactive-md-gap: 4px;
1240
+ --gse-semantic-interactive-md-padding: 8px;
1241
+ --gse-semantic-interactive-sm-size: 24px;
1242
+ --gse-semantic-interactive-sm-gap: 2px;
1243
+ --gse-semantic-interactive-sm-padding: 4px;
1244
+ --gse-semantic-interactive-sm-borderRadius: 4px;
1245
+ --gse-semantic-interactive-lg-borderRadius: 16px;
1246
+ --gse-semantic-interactive-lg-gap: 8px;
1247
+ --gse-semantic-interactive-lg-padding: 12px;
1248
+ --gse-semantic-interactive-edges-borderWidth: 1px;
1249
+ --gse-semantic-interactive-divider-sm-borderWidth: 1px;
1250
+ --gse-semantic-interactive-divider-lg-borderWidth: 2px;
1251
+ --gse-semantic-interactive-xl-gap: 12px;
1252
+ --gse-semantic-interactive-xl-padding: 16px;
1253
+ --gse-semantic-interactive-xl-size: 40px;
1254
+ --gse-semantic-interactive-xl-borderRadius: 100%;
1255
+ --gse-semantic-interactive-xs-size: 20px;
1256
+ --gse-semantic-interactive-xs-padding: 2px;
1257
+ --gse-semantic-focusOutline-full-borderRadius: 100%;
1258
+ --gse-semantic-focusOutline-xl-borderRadius: 20px;
1259
+ --gse-semantic-focusOutline-lg-borderRadius: 16px;
1260
+ --gse-semantic-focusOutline-md-borderRadius: 8px;
1261
+ --gse-semantic-focusOutline-md-borderWidth: 2px;
1262
+ --gse-semantic-focusOutline-sm-borderRadius: 4px;
1263
+ --gse-semantic-focusOutline-sm-borderWidth: 1px;
1264
+ --gse-semantic-focusOutline-xs-borderRadius: 2px;
1200
1265
  --gse-semantic-focusOutline-offset: 1px;
1201
- --gse-semantic-container-lg-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
1202
- --gse-semantic-container-lg-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
1203
- --gse-semantic-container-lg-padding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
1204
- --gse-semantic-container-lg-height: 40px; /* The average recommended height for a cell in the datatable */
1205
- --gse-semantic-container-md-gap: 12px; /* The recommended medium gap between items inside a container, like the gap between elements inisde a modal. */
1206
- --gse-semantic-container-md-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
1207
- --gse-semantic-container-md-height: 32px; /* The minimmum recommended height for a medium container, like a button bar. */
1208
- --gse-semantic-container-md-padding: 16px; /* The default horizontal padding of a medium-sized container, like an alert. */
1209
- --gse-semantic-container-xl-gap: 24px; /* The recommended gap between items inside a xlarge container, like progress and loading. */
1210
- --gse-semantic-container-xl-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
1211
- --gse-semantic-container-xl-height: 48px; /* The average recommended height for the header of a calendar */
1212
- --gse-semantic-container-sm-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
1213
- --gse-semantic-container-sm-gap: 8px; /* The recommended medium gap between items inside a container, like the gap between elements inisde an alert. */
1214
- --gse-semantic-container-sm-padding: 12px; /* The default padding of a small-sized container, like a tooltip. */
1215
- --gse-semantic-container-sm-minHeight: 20px; /* The minimum height recommended for a small container, like a tooltip. */
1216
- --gse-semantic-container-sm-height: 32px; /* The average recommended height for a small container, like a tooltip. */
1217
- --gse-semantic-container-xs-gap: 4px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
1218
- --gse-semantic-container-xs-padding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
1219
- --gse-semantic-container-xs-minHeight: 16px; /* The minimum height recommended for a small container, like a tag. */
1220
- --gse-semantic-container-xs-height: 20px; /* The average recommended height for a small container, like a tag. */
1221
- --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
1222
- --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
1223
- --gse-semantic-container-2xs-gap: 2px; /* The recommended xsmall gap between items inside a container, like the gap between elements inside a tag. */
1224
- --gse-semantic-container-2xs-padding: 2px; /* The default padding of a our smallest containers, like the container of an tag. */
1225
- --gse-semantic-container-2xs-size: 12px; /* The average recommended height for a small container, like a tag. */
1226
- --gse-semantic-container-full-borderRadius: 100%; /* The recomended border radius for circle-shaped containers. */
1266
+ --gse-semantic-container-lg-boxShadow-blur: 8px;
1267
+ --gse-semantic-container-lg-boxShadow-spread: 1px;
1268
+ --gse-semantic-container-lg-boxShadow-color: rgba(35, 57, 92, 0.15);
1269
+ --gse-semantic-container-lg-boxShadow-type: dropShadow;
1270
+ --gse-semantic-container-lg-boxShadow-offsetX: 0;
1271
+ --gse-semantic-container-lg-boxShadow-offsetY: 0;
1272
+ --gse-semantic-container-lg-borderRadius: 16px;
1273
+ --gse-semantic-container-lg-gap: 16px;
1274
+ --gse-semantic-container-lg-padding: 24px;
1275
+ --gse-semantic-container-lg-height: 40px;
1276
+ --gse-semantic-container-md-boxShadow-blur: 6px;
1277
+ --gse-semantic-container-md-boxShadow-spread: 1px;
1278
+ --gse-semantic-container-md-boxShadow-color: rgba(35, 57, 92, 0.12);
1279
+ --gse-semantic-container-md-boxShadow-type: dropShadow;
1280
+ --gse-semantic-container-md-boxShadow-offsetX: 0;
1281
+ --gse-semantic-container-md-boxShadow-offsetY: 0;
1282
+ --gse-semantic-container-md-gap: 12px;
1283
+ --gse-semantic-container-md-borderRadius: 8px;
1284
+ --gse-semantic-container-md-height: 32px;
1285
+ --gse-semantic-container-md-padding: 16px;
1286
+ --gse-semantic-container-xl-gap: 24px;
1287
+ --gse-semantic-container-xl-padding: 32px;
1288
+ --gse-semantic-container-xl-height: 48px;
1289
+ --gse-semantic-container-sm-boxShadow-blur: 4px;
1290
+ --gse-semantic-container-sm-boxShadow-spread: 1px;
1291
+ --gse-semantic-container-sm-boxShadow-color: rgba(35, 57, 92, 0.1);
1292
+ --gse-semantic-container-sm-boxShadow-type: dropShadow;
1293
+ --gse-semantic-container-sm-boxShadow-offsetX: 0;
1294
+ --gse-semantic-container-sm-boxShadow-offsetY: 0;
1295
+ --gse-semantic-container-sm-borderRadius: 4px;
1296
+ --gse-semantic-container-sm-gap: 8px;
1297
+ --gse-semantic-container-sm-padding: 12px;
1298
+ --gse-semantic-container-sm-minHeight: 20px;
1299
+ --gse-semantic-container-sm-height: 32px;
1300
+ --gse-semantic-container-xs-gap: 4px;
1301
+ --gse-semantic-container-xs-padding: 8px;
1302
+ --gse-semantic-container-xs-minHeight: 16px;
1303
+ --gse-semantic-container-xs-height: 20px;
1304
+ --gse-semantic-container-edges-borderWidth: 1px;
1305
+ --gse-semantic-container-divider-borderWidth: 1px;
1306
+ --gse-semantic-container-2xs-gap: 2px;
1307
+ --gse-semantic-container-2xs-padding: 2px;
1308
+ --gse-semantic-container-2xs-size: 12px;
1309
+ --gse-semantic-container-full-borderRadius: 100%;
1227
1310
  --gse-semantic-container-3xs-size: 8px;
1228
1311
  --gse-semantic-container-4xs-size: 4px;
1229
- --gse-semantic-formControl-textInput-lg-borderRadius: 8px; /* The recommended large border-radius for inputs */
1230
- --gse-semantic-formControl-textInput-sm-borderRadius: 2px; /* The recommended small border-radius for inputs */
1231
- --gse-semantic-formControl-textInput-md-borderRadius: 4px; /* The recommended medium border-radius for inputs */
1232
- --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
1233
- --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
1234
- --gse-semantic-formControl-field-textInput-small-padding: 8px; /* The default vertical padding for inputs inside a form control. */
1235
- --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. */
1312
+ --gse-semantic-formControl-textInput-lg-borderRadius: 8px;
1313
+ --gse-semantic-formControl-textInput-sm-borderRadius: 2px;
1314
+ --gse-semantic-formControl-textInput-md-borderRadius: 4px;
1315
+ --gse-semantic-formControl-textInput-edges-borderWidth: 1px;
1316
+ --gse-semantic-formControl-textInput-divider-borderWidth: 1px;
1317
+ --gse-semantic-formControl-field-textInput-small-padding: 8px;
1318
+ --gse-semantic-formControl-field-textInput-gap: 12px;
1236
1319
  --gse-semantic-formControl-field-textInput-md-height: 32px;
1237
- --gse-semantic-formControl-field-textInput-medium-padding: 12px; /* The recommended horizontal padding for text inputs. */
1320
+ --gse-semantic-formControl-field-textInput-medium-padding: 12px;
1238
1321
  --gse-semantic-formControl-field-textInput-minWidth: 48px;
1239
1322
  --gse-semantic-formControl-field-textInput-lg-height: 98px;
1240
- --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. */
1241
- --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. */
1242
- --gse-semantic-formControl-field-clickInput-gap: 8px; /* The default gap for between elements inside a form group, like checkboxes, radio buttons. */
1243
- --gse-semantic-formControl-field-clickInput-padding: 4px; /* The default padding for between elements inside a form group, like checkboxes, radio buttons. */
1244
- --gse-semantic-formControl-field-clickInput-md-size: 32px; /* The recommended height form medium-size click inputs, like checkboxes or radio buttons. */
1245
- --gse-semantic-formControl-field-clickInput-sm-size: 16px; /* The recommended height for leaner click inputs, like toggles. */
1246
- --gse-semantic-formControl-field-groupedInput-gap: 8px; /* The recommended gap between groped inputs, like the sapce inbetween checkboxes or radio buttons. */
1247
- --gse-semantic-formControl-clickInput-handle-borderWidth: 2px; /* The recommended border width for handles on click inputs, like the habdle of a toggle. */
1248
- --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. */
1249
- --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. */
1250
- --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. */
1251
- --gse-semantic-assets-lg-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
1252
- --gse-semantic-assets-md-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
1253
- --gse-semantic-assets-sm-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
1254
- --gse-semantic-assets-xl-size: 48px; /* The recommended size of xlarge-sized for styles, for example avatar */
1255
- --gse-semantic-assets-xs-size: 8px; /* The recommended size of small-sized for assets, for example super small icons. */
1256
- --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. */
1323
+ --gse-semantic-formControl-field-gap: 4px;
1324
+ --gse-semantic-formControl-field-padding: 8px;
1325
+ --gse-semantic-formControl-field-clickInput-gap: 8px;
1326
+ --gse-semantic-formControl-field-clickInput-padding: 4px;
1327
+ --gse-semantic-formControl-field-clickInput-md-size: 32px;
1328
+ --gse-semantic-formControl-field-clickInput-sm-size: 16px;
1329
+ --gse-semantic-formControl-field-groupedInput-gap: 8px;
1330
+ --gse-semantic-formControl-clickInput-handle-borderWidth: 2px;
1331
+ --gse-semantic-assets-lg-size: 32px;
1332
+ --gse-semantic-assets-md-size: 24px;
1333
+ --gse-semantic-assets-sm-size: 16px;
1334
+ --gse-semantic-assets-xl-size: 48px;
1335
+ --gse-semantic-assets-xs-size: 8px;
1336
+ --gse-semantic-divider-width: 1px;
1257
1337
  --gse-semantic-divider-xs-margin: 1px;
1258
1338
  --gse-semantic-divider-sm-margin: 2px;
1259
1339
  --gse-semantic-divider-md-margin: 4px;
1260
1340
  --gse-semantic-divider-lg-margin: 8px;
1261
- --gse-semantic-divider-track-height: 4px; /* The heioght for track elements, like the track of the slider. */
1262
- --gse-semantic-divider-indicator-width: 2px; /* The recommended divider indicator width, used for the indicators of active tabs, for example */
1341
+ --gse-semantic-divider-track-height: 4px;
1342
+ --gse-semantic-divider-indicator-width: 2px;
1263
1343
  }
1264
1344
 
1265
1345
  /*# sourceMappingURL=global.css.map */