genesys-spark 4.78.0 → 4.79.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/css/flare/global.css +626 -412
  2. package/dist/css/flare/global.css.map +1 -1
  3. package/dist/css/flare/ui.css +492 -320
  4. package/dist/css/flare/ui.css.map +1 -1
  5. package/dist/css/legacy/global.css +325 -219
  6. package/dist/css/legacy/global.css.map +1 -1
  7. package/dist/css/legacy/ui.css +470 -384
  8. package/dist/css/legacy/ui.css.map +1 -1
  9. package/dist/index.js +2 -2
  10. package/package.json +1 -1
package/dist/css/flare/global.css CHANGED
@@ -111,6 +111,8 @@
111
111
  --gse-core-colorLegacy-yellow-80: #fcd276;
112
112
  --gse-core-colorLegacy-yellow-90: #fce5b1;
113
113
  --gse-core-colorLegacy-yellow-100: #fdf8ec;
114
+ --gse-core-colorLegacy-yellow-110: #fff793;
115
+ --gse-core-colorLegacy-yellow-120: #ffef27;
114
116
  --gse-core-colorLegacy-secondary-yellowGreen: #ddd933;
115
117
  --gse-core-colorLegacy-secondary-oliveGreen: #868c1e;
116
118
  --gse-core-colorLegacy-secondary-aquaGreen: #1da8b3;
@@ -144,68 +146,208 @@
144
146
  --gse-core-opacity-50: 0.5;
145
147
  --gse-core-opacity-80: 0.8;
146
148
  --gse-core-letterSpacing-1: 1px;
147
- --gse-semantic-borderRadius-interactive-large: 16px;
148
- --gse-semantic-borderRadius-interactive-small: 4px;
149
- --gse-semantic-borderRadius-container-large: 16px;
150
- --gse-semantic-borderRadius-container-medium: 8px;
151
- --gse-semantic-borderRadius-container-small: 4px;
152
- --gse-semantic-borderRadius-formControl-input-large: 8px;
153
- --gse-semantic-borderRadius-formControl-input-medium: 4px;
154
- --gse-semantic-borderRadius-formControl-input-small: 2px;
155
- --gse-semantic-borderRadius-focus-full: 100%;
156
- --gse-semantic-borderRadius-focus-xlarge: 16px;
157
- --gse-semantic-borderRadius-focus-large: 8px;
158
- --gse-semantic-borderRadius-focus-medium: 8px;
159
- --gse-semantic-borderRadius-focus-small: 4px;
160
- --gse-semantic-borderRadius-focus-xsmall: 2px;
161
- --gse-semantic-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
162
149
  --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
163
- --gse-semantic-background-container-primary-10: #ffffff;
164
- --gse-semantic-background-container-primary-20: #fbfcfe;
165
- --gse-semantic-background-container-primary-30: #f3f5fb;
166
- --gse-semantic-background-container-primary-40: #eff0fe;
167
- --gse-semantic-background-container-primary-50: #dee1fd;
168
- --gse-semantic-background-container-primary-60: #ced2fc;
169
- --gse-semantic-background-container-secondary-10: #4856cb;
170
- --gse-semantic-background-container-secondary-20: #3742a2;
171
- --gse-semantic-background-container-secondary-30: #252e78;
172
- --gse-semantic-background-container-tertiary-10: rgba(0, 0, 0, 0);
173
- --gse-semantic-background-container-tertiary-20: #c6c8ce;
174
- --gse-semantic-background-container-highContrast-10: #1b2c48;
175
- --gse-semantic-background-container-highContrast-20: #1c2463;
176
- --gse-semantic-background-container-highContrast-30: #141a4f;
177
- --gse-semantic-background-container-highContrast-40: #000000;
150
+ --gse-semantic-opacity-shroud: 0.8; /* The default opacity for shroud elements like the one on modals. */
151
+ --gse-semantic-theme-fontFamily-headings: 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. */
153
+ --gse-semantic-theme-background-container-primary-10: #ffffff;
154
+ --gse-semantic-theme-background-container-primary-20: #fbfcfe;
155
+ --gse-semantic-theme-background-container-primary-30: #f3f5fb;
156
+ --gse-semantic-theme-background-container-primary-40: #eff0fe;
157
+ --gse-semantic-theme-background-container-primary-50: #dee1fd;
158
+ --gse-semantic-theme-background-container-primary-60: #ced2fc;
159
+ --gse-semantic-theme-background-container-secondary-10: #4856cb;
160
+ --gse-semantic-theme-background-container-secondary-20: #3742a2;
161
+ --gse-semantic-theme-background-container-secondary-30: #252e78;
162
+ --gse-semantic-theme-background-container-tertiary-10: rgba(0, 0, 0, 0);
163
+ --gse-semantic-theme-background-container-tertiary-20: #c6c8ce;
164
+ --gse-semantic-theme-background-container-highContrast-10: #1b2c48;
165
+ --gse-semantic-theme-background-container-highContrast-20: #1c2463;
166
+ --gse-semantic-theme-background-container-highContrast-30: #141a4f;
167
+ --gse-semantic-theme-background-container-highContrast-40: #000000;
168
+ --gse-semantic-theme-background-formControl-input-10: #ffffff;
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);
171
+ --gse-semantic-theme-background-system-primary-10: #dee1fd;
172
+ --gse-semantic-theme-background-system-primary-20: #9ca6f9;
173
+ --gse-semantic-theme-background-system-primary-30: #5a6af5;
174
+ --gse-semantic-theme-background-system-primary-40: #3742a2;
175
+ --gse-semantic-theme-background-system-primary-50: #1c2463;
176
+ --gse-semantic-theme-background-system-info-5: #e2dff8;
177
+ --gse-semantic-theme-background-system-info-10: #c5bef1;
178
+ --gse-semantic-theme-background-system-info-20: #a89ee9;
179
+ --gse-semantic-theme-background-system-info-30: #6e5ddb;
180
+ --gse-semantic-theme-background-system-info-40: #443989;
181
+ --gse-semantic-theme-background-system-info-50: #241e4b;
182
+ --gse-semantic-theme-background-system-success-5: #cef0e6;
183
+ --gse-semantic-theme-background-system-success-10: #9de1cd;
184
+ --gse-semantic-theme-background-system-success-20: #6bd3b3;
185
+ --gse-semantic-theme-background-system-success-30: #09b581;
186
+ --gse-semantic-theme-background-system-success-40: #056d4d;
187
+ --gse-semantic-theme-background-system-success-50: #033627;
188
+ --gse-semantic-theme-background-system-warning-5: #fef4d8;
189
+ --gse-semantic-theme-background-system-warning-10: #fce9b2;
190
+ --gse-semantic-theme-background-system-warning-20: #fbdd8b;
191
+ --gse-semantic-theme-background-system-warning-30: #f8c73e;
192
+ --gse-semantic-theme-background-system-warning-40: #9a7b25;
193
+ --gse-semantic-theme-background-system-warning-50: #3d300c;
194
+ --gse-semantic-theme-background-system-error-5: #f9d3da;
195
+ --gse-semantic-theme-background-system-error-10: #f3a7b5;
196
+ --gse-semantic-theme-background-system-error-20: #ee7a8f;
197
+ --gse-semantic-theme-background-system-error-30: #e22245;
198
+ --gse-semantic-theme-background-system-error-40: #881429;
199
+ --gse-semantic-theme-background-system-error-50: #440a15;
200
+ --gse-semantic-theme-background-customAccents-bold-10: #3e5374;
201
+ --gse-semantic-theme-background-customAccents-bold-20: #626d97;
202
+ --gse-semantic-theme-background-customAccents-bold-30: #3ac49a;
203
+ --gse-semantic-theme-background-customAccents-bold-40: #0c6d7e;
204
+ --gse-semantic-theme-background-customAccents-bold-50: #607732;
205
+ --gse-semantic-theme-background-customAccents-bold-60: #467aae;
206
+ --gse-semantic-theme-background-customAccents-bold-70: #8a5ecc;
207
+ --gse-semantic-theme-background-customAccents-bold-80: #89387b;
208
+ --gse-semantic-theme-background-customAccents-bold-90: #ff5c77;
209
+ --gse-semantic-theme-background-customAccents-bold-100: #c44b3b;
210
+ --gse-semantic-theme-background-customAccents-bold-110: #ffc650;
211
+ --gse-semantic-theme-background-customAccents-bold-120: #b5e2e8;
212
+ --gse-semantic-theme-background-customAccents-bold-130: #5798d9;
213
+ --gse-semantic-theme-background-customAccents-subtle-10: #c6c8ce;
214
+ --gse-semantic-theme-background-customAccents-subtle-20: #d1d7ef;
215
+ --gse-semantic-theme-background-customAccents-subtle-30: #9de1cd;
216
+ --gse-semantic-theme-background-customAccents-subtle-40: #90d3dd;
217
+ --gse-semantic-theme-background-customAccents-subtle-50: #c6dd98;
218
+ --gse-semantic-theme-background-customAccents-subtle-60: #9ac1e8;
219
+ --gse-semantic-theme-background-customAccents-subtle-70: #cdacff;
220
+ --gse-semantic-theme-background-customAccents-subtle-80: #ef9ee1;
221
+ --gse-semantic-theme-background-customAccents-subtle-90: #ff9dad;
222
+ --gse-semantic-theme-background-customAccents-subtle-100: #feb2ab;
223
+ --gse-semantic-theme-background-customAccents-subtle-110: #ffdd96;
224
+ --gse-semantic-theme-background-customAccents-subtle-120: #daf0f4;
225
+ --gse-semantic-theme-background-customAccents-status-10: #09b581;
226
+ --gse-semantic-theme-background-customAccents-status-20: #e22245;
227
+ --gse-semantic-theme-background-customAccents-status-30: #f8c73e;
228
+ --gse-semantic-theme-background-customAccents-status-40: #4856cb;
229
+ --gse-semantic-theme-background-customAccents-status-50: #626e84;
230
+ --gse-semantic-theme-background-customAccents-status-60: #b74ba4;
231
+ --gse-semantic-theme-background-customAccents-status-70: #fe624d;
232
+ --gse-semantic-theme-foreground-primary-10: #3e5374;
233
+ --gse-semantic-theme-foreground-primary-20: #23395d;
234
+ --gse-semantic-theme-foreground-primary-30: #1b2c48;
235
+ --gse-semantic-theme-foreground-secondary-10: #ffffff;
236
+ --gse-semantic-theme-foreground-secondary-20: #767c8d;
237
+ --gse-semantic-theme-foreground-secondary-30: #626e84;
238
+ --gse-semantic-theme-foreground-tertiary-10: #4856cb;
239
+ --gse-semantic-theme-foreground-tertiary-20: #3742a2;
240
+ --gse-semantic-theme-foreground-tertiary-30: #252e78;
241
+ --gse-semantic-theme-foreground-tertiary-05: #9ca6f9;
242
+ --gse-semantic-theme-foreground-highContrast-10: #ffffff;
243
+ --gse-semantic-theme-foreground-highContrast-20: #e8ebf7;
244
+ --gse-semantic-theme-foreground-highContrast-30: #c6ceec;
245
+ --gse-semantic-theme-foreground-system-primary-10: #5a6af5;
246
+ --gse-semantic-theme-foreground-system-info-10: #6e5ddb;
247
+ --gse-semantic-theme-foreground-system-success-10: #09b581;
248
+ --gse-semantic-theme-foreground-system-warning-10: #f8c73e;
249
+ --gse-semantic-theme-foreground-system-error-10: #e22245;
250
+ --gse-semantic-theme-foreground-specialAccents-brand-10: #ff4f1f;
251
+ --gse-semantic-theme-foreground-specialAccents-ai-10: #8a5ecc;
252
+ --gse-semantic-theme-foreground-link-10: #4856cb;
253
+ --gse-semantic-theme-foreground-link-20: #3742a2;
254
+ --gse-semantic-theme-foreground-link-30: #252e78;
255
+ --gse-semantic-theme-foreground-link-40: #8a5ecc;
256
+ --gse-semantic-theme-foreground-icon-10: #3e5374;
257
+ --gse-semantic-theme-foreground-formControl-clickInput-10: #4856cb;
258
+ --gse-semantic-theme-foreground-formControl-clickInput-20: #3742a2;
259
+ --gse-semantic-theme-foreground-formControl-clickInput-30: #252e78;
260
+ --gse-semantic-theme-foreground-formControl-clickInput-50: #767c8d;
261
+ --gse-semantic-theme-border-focus-10: #7b88f7;
262
+ --gse-semantic-theme-border-divider-10: #ffffff;
263
+ --gse-semantic-theme-border-divider-20: #c6c8ce;
264
+ --gse-semantic-theme-border-divider-30: #4856cb;
265
+ --gse-semantic-theme-border-edges-default-10: #c6c8ce;
266
+ --gse-semantic-theme-border-edges-default-20: #3e5374;
267
+ --gse-semantic-theme-border-edges-default-30: #1b2c48;
268
+ --gse-semantic-theme-border-edges-default-05: #e8ebf7;
269
+ --gse-semantic-theme-border-edges-enabled-10: #4856cb;
270
+ --gse-semantic-theme-border-edges-hover-10: #7b88f7;
271
+ --gse-semantic-theme-border-edges-hover-20: #252e78;
272
+ --gse-semantic-theme-border-edges-active-10: #3742a2;
273
+ --gse-semantic-theme-border-system-primary-10: #9ca6f9;
274
+ --gse-semantic-theme-border-system-info-10: #c5bef1;
275
+ --gse-semantic-theme-border-system-success-10: #9de1cd;
276
+ --gse-semantic-theme-border-system-warning-10: #fce9b2;
277
+ --gse-semantic-theme-border-system-error-10: #f3a7b5;
278
+ --gse-semantic-theme-border-system-error-20: #e22245;
279
+ --gse-semantic-theme-border-inputs-default-10: #a3a7b0;
280
+ --gse-semantic-theme-border-inputs-hover-10: #3742a2;
281
+ --gse-semantic-theme-border-inputs-active-10: #252e78;
282
+ --gse-semantic-theme-borderRadius-interactive-xlarge: 100%;
283
+ --gse-semantic-theme-borderRadius-interactive-xlargeCopy: 100%;
284
+ --gse-semantic-theme-borderRadius-interactive-large: 16px;
285
+ --gse-semantic-theme-borderRadius-interactive-small: 4px;
286
+ --gse-semantic-theme-borderRadius-container-large: 16px;
287
+ --gse-semantic-theme-borderRadius-container-medium: 8px;
288
+ --gse-semantic-theme-borderRadius-container-small: 4px;
289
+ --gse-semantic-theme-borderRadius-formControl-input-large: 8px;
290
+ --gse-semantic-theme-borderRadius-formControl-input-medium: 4px;
291
+ --gse-semantic-theme-borderRadius-formControl-input-small: 2px;
292
+ --gse-semantic-theme-borderRadius-focus-full: 100%;
293
+ --gse-semantic-theme-borderRadius-focus-xlarge: 20px;
294
+ --gse-semantic-theme-borderRadius-focus-large: 16px;
295
+ --gse-semantic-theme-borderRadius-focus-medium: 8px;
296
+ --gse-semantic-theme-borderRadius-focus-small: 4px;
297
+ --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. */
178
317
  --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
179
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. */
180
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. */
181
321
  --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
182
322
  --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
183
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. */
184
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. */
185
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. */
186
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. */
187
- --gse-semantic-background-formControl-input-10: #ffffff;
188
- --gse-semantic-background-formControl-input-20: #c6c8ce;
189
- --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. */
190
- --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
191
- --gse-semantic-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
192
- --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
193
- --gse-semantic-background-system-primary: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
194
- --gse-semantic-background-system-info: #e2dff8; /* The default background color for info elements like alerts. */
195
- --gse-semantic-background-system-success: #cef0e6; /* The default background color for success elements like alerts. */
196
- --gse-semantic-background-system-warning: #fef4d8; /* The default background color for warning elements like alerts. */
197
- --gse-semantic-background-system-error: #f9d3da; /* The default background color for error elements like alerts. */
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. */
198
338
  --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
199
- --gse-semantic-background-system-customAccents-bold-accent_2: #626e84; /* A custom accent used mostly for tags. */
339
+ --gse-semantic-background-system-customAccents-bold-accent_2: #626d97; /* A custom accent used mostly for tags. */
200
340
  --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
201
341
  --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
202
342
  --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
203
- --gse-semantic-background-system-customAccents-bold-accent_6: #5798d9; /* A custom accent used mostly for tags. */
204
- --gse-semantic-background-system-customAccents-bold-accent_7: #ac75ff; /* 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. */
205
345
  --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
206
346
  --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
207
347
  --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
208
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 */
350
+ --gse-semantic-background-system-customAccents-bold-accent_13: #5798d9;
209
351
  --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
210
352
  --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
211
353
  --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
@@ -217,102 +359,18 @@
217
359
  --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
218
360
  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
219
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 */
220
363
  --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
221
364
  --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
222
- --gse-semantic-background-customAccents-bold-10: #3e5374;
223
- --gse-semantic-background-customAccents-bold-20: #626e84;
224
- --gse-semantic-background-customAccents-bold-30: #3ac49a;
225
- --gse-semantic-background-customAccents-bold-40: #0c6d7e;
226
- --gse-semantic-background-customAccents-bold-50: #607732;
227
- --gse-semantic-background-customAccents-bold-60: #5798d9;
228
- --gse-semantic-background-customAccents-bold-70: #ac75ff;
229
- --gse-semantic-background-customAccents-bold-80: #89387b;
230
- --gse-semantic-background-customAccents-bold-90: #ff5c77;
231
- --gse-semantic-background-customAccents-bold-100: #c44b3b;
232
- --gse-semantic-background-customAccents-bold-110: #ffc650;
233
- --gse-semantic-background-customAccents-subtle-10: #c6c8ce;
234
- --gse-semantic-background-customAccents-subtle-20: #d1d7ef;
235
- --gse-semantic-background-customAccents-subtle-30: #9de1cd;
236
- --gse-semantic-background-customAccents-subtle-40: #90d3dd;
237
- --gse-semantic-background-customAccents-subtle-50: #c6dd98;
238
- --gse-semantic-background-customAccents-subtle-60: #9ac1e8;
239
- --gse-semantic-background-customAccents-subtle-70: #cdacff;
240
- --gse-semantic-background-customAccents-subtle-80: #ef9ee1;
241
- --gse-semantic-background-customAccents-subtle-90: #ff9dad;
242
- --gse-semantic-background-customAccents-subtle-100: #feb2ab;
243
- --gse-semantic-background-customAccents-subtle-110: #ffdd96;
244
- --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
245
- --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
246
- --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
247
- --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
248
- --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
249
- --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
250
- --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
251
- --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
252
- --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
253
- --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
254
- --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
255
- --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
256
- --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
257
- --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
258
- --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
259
- --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
260
- --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
261
- --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
262
- --gse-semantic-foreground-primary-10: #3e5374;
263
- --gse-semantic-foreground-primary-20: #23395d;
264
- --gse-semantic-foreground-primary-30: #1b2c48;
265
- --gse-semantic-foreground-secondary-10: #ffffff;
266
- --gse-semantic-foreground-secondary-20: #767c8d;
267
- --gse-semantic-foreground-secondary-30: #626e84;
268
- --gse-semantic-foreground-tertiary-10: #4856cb;
269
- --gse-semantic-foreground-tertiary-20: #3742a2;
270
- --gse-semantic-foreground-tertiary-30: #252e78;
271
- --gse-semantic-foreground-highContrast-10: #ffffff;
272
- --gse-semantic-foreground-highContrast-20: #e8ebf7;
273
- --gse-semantic-foreground-highContrast-30: #c6ceec;
274
- --gse-semantic-foreground-system-primary-10: #5a6af5;
275
- --gse-semantic-foreground-system-info-10: #6e5ddb;
276
- --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. */
277
- --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. */
278
- --gse-semantic-foreground-system-success-10: #09b581;
279
- --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. */
280
- --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. */
281
- --gse-semantic-foreground-system-warning-10: #f8c73e;
282
- --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. */
283
- --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. */
284
- --gse-semantic-foreground-system-error-10: #e22245;
285
- --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. */
286
- --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. */
287
- --gse-semantic-foreground-system-customAccents-light: #ffffff; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color. */
288
- --gse-semantic-foreground-system-customAccents-dark: #1b2c48; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
289
- --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
290
- --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
291
- --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
292
- --gse-semantic-foreground-specialAccents-brand-10: #ff4f1f;
293
- --gse-semantic-foreground-specialAccents-ai-10: #8a5ecc;
294
- --gse-semantic-foreground-link-10: #4856cb;
295
- --gse-semantic-foreground-link-20: #3742a2;
296
- --gse-semantic-foreground-link-30: #252e78;
297
- --gse-semantic-foreground-link-40: #8a5ecc;
298
- --gse-semantic-foreground-icon-10: #3e5374;
299
- --gse-semantic-foreground-formControl-clickInput-10: #4856cb;
300
- --gse-semantic-foreground-formControl-clickInput-20: #3742a2;
301
- --gse-semantic-foreground-formControl-clickInput-30: #252e78;
302
- --gse-semantic-foreground-formControl-clickInput-50: #767c8d;
303
- --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. */
304
- --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
305
- --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. */
306
- --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. */
307
- --gse-semantic-foreground-formControl-clickInput-error: #e22245;
308
- --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
309
- --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
310
- --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
311
- --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
312
- --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
313
- --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
314
- --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
315
- --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for the optional indicator. */
365
+ --gse-semantic-background-system-status-available: #09b581;
366
+ --gse-semantic-background-system-status-busy: #e22245;
367
+ --gse-semantic-background-system-status-away: #f8c73e;
368
+ --gse-semantic-background-system-status-onQueue: #4856cb;
369
+ --gse-semantic-background-system-status-offline: #626e84;
370
+ --gse-semantic-background-system-status-outOfOffice: #b74ba4;
371
+ --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. */
316
374
  --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
317
375
  --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
318
376
  --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
@@ -335,6 +393,7 @@
335
393
  --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
336
394
  --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
337
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 */
338
397
  --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
339
398
  --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
340
399
  --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
@@ -343,35 +402,51 @@
343
402
  --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
344
403
  --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
345
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. */
427
+ --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 */
346
432
  --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
347
- --gse-semantic-border-divider-10: #ffffff;
348
- --gse-semantic-border-divider-20: #c6c8ce;
349
- --gse-semantic-border-divider-30: #4856cb;
350
- --gse-semantic-border-edges-default-10: #c6c8ce;
351
- --gse-semantic-border-edges-default-20: #3e5374;
352
- --gse-semantic-border-edges-default-30: #1b2c48;
353
- --gse-semantic-border-edges-enabled-10: #4856cb;
354
- --gse-semantic-border-edges-hover-10: #7b88f7;
355
- --gse-semantic-border-edges-hover-20: #252e78;
356
- --gse-semantic-border-edges-active-10: #4856cb;
357
- --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
358
- --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
359
- --gse-semantic-border-system-success: #cef0e6; /* The default borders for elements that have a feedback/success background. */
360
- --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
361
- --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
362
- --gse-semantic-border-inputs-default-10: #a3a7b0;
363
- --gse-semantic-border-inputs-hover-10: #3742a2;
364
- --gse-semantic-border-inputs-active-10: #252e78;
365
433
  --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
366
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. */
367
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. */
368
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. */
369
- --gse-semantic-border-container-edges-active: #4856cb; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a 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. */
370
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 */
371
441
  --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
372
442
  --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
373
443
  --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
374
- --gse-semantic-border-container-highConstrast-active: #4856cb; /* The color for the edge borders of high contrast surfaces that are on the active 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. */
375
450
  --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary elements. */
376
451
  --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
377
452
  --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
@@ -380,7 +455,7 @@
380
455
  --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
381
456
  --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
382
457
  --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
383
- --gse-semantic-body-sm-regular: 400 12px/16px "Noto Sans"; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
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. */
384
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. */
385
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. */
386
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. */
@@ -463,64 +538,96 @@
463
538
  * We usually pair it with medium emphasis colors.
464
539
  */
465
540
  --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
466
- --gse-semantic-interactive-medium-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
467
- --gse-semantic-interactive-medium-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
468
- --gse-semantic-interactive-medium-padding-horizontal: 8px; /* The recommended horizontal padding for medium-sized components. */
469
- --gse-semantic-interactive-small-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
470
- --gse-semantic-interactive-small-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
471
- --gse-semantic-interactive-small-padding-horizontal: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
472
- --gse-semantic-interactive-small-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
473
- --gse-semantic-interactive-large-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
474
- --gse-semantic-interactive-large-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
475
- --gse-semantic-interactive-large-padding-horizontal: 12px; /* The recommended horizontal padding for large-sized components. */
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. */
476
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. */
477
- --gse-semantic-interactive-divider-small-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
478
- --gse-semantic-interactive-divider-large-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
479
- --gse-semantic-interactive-xlarge-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
480
- --gse-semantic-interactive-xlarge-padding-horizontal: 16px; /* The recommended horizontal padding for xlarge-sized components. */
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. */
481
560
  --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
482
- --gse-semantic-focusOutline-xlarge-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
483
- --gse-semantic-focusOutline-large-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
484
- --gse-semantic-focusOutline-medium-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
485
- --gse-semantic-focusOutline-small-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
486
- --gse-semantic-focusOutline-small-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
487
- --gse-semantic-focusOutline-xsmall-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
488
- --gse-semantic-container-large-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
489
- --gse-semantic-container-large-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
490
- --gse-semantic-container-large-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
491
- --gse-semantic-container-small-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
492
- --gse-semantic-container-small-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
493
- --gse-semantic-container-small-horizontalPadding: 12px; /* The default padding of a small-sized container, like a tooltip. */
494
- --gse-semantic-container-small-verticalPadding: 8px; /* The default vertical padding of a small-sized container, like a tooltip. */
495
- --gse-semantic-container-small-minHeight: 20px; /* The minimum height recommended for a small container, like a tag. */
496
- --gse-semantic-container-small-height: 32px; /* The average recommended height for a small container, like a tag. */
497
- --gse-semantic-container-medium-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
498
- --gse-semantic-container-medium-horizontalPadding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
499
- --gse-semantic-container-medium-verticalPadding: 24px; /* The default vertical padding of a medium-sized container, like a tooltip. */
500
- --gse-semantic-container-medium-minHeight: 32px; /* The minimmum recommended height for a medium container, like a tag. */
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 */
568
+ --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. */
501
589
  --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
502
590
  --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
503
- --gse-semantic-container-xsmall-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
504
- --gse-semantic-container-xsmall-horizontalPadding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
505
- --gse-semantic-container-xsmall-verticalPadding: 4px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
506
- --gse-semantic-formControl-textInput-large-borderRadius: 8px; /* The recommended large border-radius for inputs */
507
- --gse-semantic-formControl-textInput-small-borderRadius: 2px; /* The recommended small border-radius for inputs */
508
- --gse-semantic-formControl-textInput-medium-borderRadius: 4px; /* The recommended medium border-radius for inputs */
509
- --gse-semantic-formControl-textInput-padding: 8px 12px; /* The default padding for inputs inside a form control. */
510
- --gse-semantic-formControl-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
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. */
595
+ --gse-semantic-container-3xs-size: 8px;
596
+ --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 */
511
600
  --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
512
601
  --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
513
- --gse-semantic-contanier-large-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
514
- --gse-semantic-contanier-medium-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards. */
515
- --gse-semantic-contanier-small-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
516
- --gse-semantic-assets-large-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
517
- --gse-semantic-assets-medium-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
518
- --gse-semantic-assets-small-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
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. */
604
+ --gse-semantic-formControl-field-textInput-md-height: 32px;
605
+ --gse-semantic-formControl-field-textInput-medium-padding: 12px; /* The recommended horizontal padding for text inputs. */
606
+ --gse-semantic-formControl-field-textInput-minWidth: 48px;
607
+ --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. */
519
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. */
520
625
  --gse-semantic-divider-xs-margin: 1px;
521
626
  --gse-semantic-divider-sm-margin: 2px;
522
627
  --gse-semantic-divider-md-margin: 4px;
523
628
  --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 */
524
631
  }
525
632
 
526
633
  [flare-mode=dark] {
@@ -636,6 +743,8 @@
636
743
  --gse-core-colorLegacy-yellow-80: #fcd276;
637
744
  --gse-core-colorLegacy-yellow-90: #fce5b1;
638
745
  --gse-core-colorLegacy-yellow-100: #fdf8ec;
746
+ --gse-core-colorLegacy-yellow-110: #fff793;
747
+ --gse-core-colorLegacy-yellow-120: #ffef27;
639
748
  --gse-core-colorLegacy-secondary-yellowGreen: #ddd933;
640
749
  --gse-core-colorLegacy-secondary-oliveGreen: #868c1e;
641
750
  --gse-core-colorLegacy-secondary-aquaGreen: #1da8b3;
@@ -669,68 +778,208 @@
669
778
  --gse-core-opacity-50: 0.5;
670
779
  --gse-core-opacity-80: 0.8;
671
780
  --gse-core-letterSpacing-1: 1px;
672
- --gse-semantic-borderRadius-interactive-large: 16px;
673
- --gse-semantic-borderRadius-interactive-small: 4px;
674
- --gse-semantic-borderRadius-container-large: 16px;
675
- --gse-semantic-borderRadius-container-medium: 8px;
676
- --gse-semantic-borderRadius-container-small: 4px;
677
- --gse-semantic-borderRadius-formControl-input-large: 8px;
678
- --gse-semantic-borderRadius-formControl-input-medium: 4px;
679
- --gse-semantic-borderRadius-formControl-input-small: 2px;
680
- --gse-semantic-borderRadius-focus-full: 100%;
681
- --gse-semantic-borderRadius-focus-xlarge: 16px;
682
- --gse-semantic-borderRadius-focus-large: 8px;
683
- --gse-semantic-borderRadius-focus-medium: 8px;
684
- --gse-semantic-borderRadius-focus-small: 4px;
685
- --gse-semantic-borderRadius-focus-xsmall: 2px;
686
- --gse-semantic-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
687
781
  --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
688
- --gse-semantic-background-container-primary-10: #ffffff;
689
- --gse-semantic-background-container-primary-20: #fbfcfe;
690
- --gse-semantic-background-container-primary-30: #f3f5fb;
691
- --gse-semantic-background-container-primary-40: #eff0fe;
692
- --gse-semantic-background-container-primary-50: #dee1fd;
693
- --gse-semantic-background-container-primary-60: #ced2fc;
694
- --gse-semantic-background-container-secondary-10: #4856cb;
695
- --gse-semantic-background-container-secondary-20: #3742a2;
696
- --gse-semantic-background-container-secondary-30: #252e78;
697
- --gse-semantic-background-container-tertiary-10: rgba(0, 0, 0, 0);
698
- --gse-semantic-background-container-tertiary-20: #c6c8ce;
699
- --gse-semantic-background-container-highContrast-10: #1b2c48;
700
- --gse-semantic-background-container-highContrast-20: #1c2463;
701
- --gse-semantic-background-container-highContrast-30: #141a4f;
702
- --gse-semantic-background-container-highContrast-40: #000000;
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. */
785
+ --gse-semantic-theme-background-container-primary-10: #ffffff;
786
+ --gse-semantic-theme-background-container-primary-20: #fbfcfe;
787
+ --gse-semantic-theme-background-container-primary-30: #f3f5fb;
788
+ --gse-semantic-theme-background-container-primary-40: #eff0fe;
789
+ --gse-semantic-theme-background-container-primary-50: #dee1fd;
790
+ --gse-semantic-theme-background-container-primary-60: #ced2fc;
791
+ --gse-semantic-theme-background-container-secondary-10: #4856cb;
792
+ --gse-semantic-theme-background-container-secondary-20: #3742a2;
793
+ --gse-semantic-theme-background-container-secondary-30: #252e78;
794
+ --gse-semantic-theme-background-container-tertiary-10: rgba(0, 0, 0, 0);
795
+ --gse-semantic-theme-background-container-tertiary-20: #c6c8ce;
796
+ --gse-semantic-theme-background-container-highContrast-10: #1b2c48;
797
+ --gse-semantic-theme-background-container-highContrast-20: #1c2463;
798
+ --gse-semantic-theme-background-container-highContrast-30: #141a4f;
799
+ --gse-semantic-theme-background-container-highContrast-40: #000000;
800
+ --gse-semantic-theme-background-formControl-input-10: #ffffff;
801
+ --gse-semantic-theme-background-formControl-input-20: #c6c8ce;
802
+ --gse-semantic-theme-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
803
+ --gse-semantic-theme-background-system-primary-10: #dee1fd;
804
+ --gse-semantic-theme-background-system-primary-20: #9ca6f9;
805
+ --gse-semantic-theme-background-system-primary-30: #5a6af5;
806
+ --gse-semantic-theme-background-system-primary-40: #3742a2;
807
+ --gse-semantic-theme-background-system-primary-50: #1c2463;
808
+ --gse-semantic-theme-background-system-info-5: #e2dff8;
809
+ --gse-semantic-theme-background-system-info-10: #c5bef1;
810
+ --gse-semantic-theme-background-system-info-20: #a89ee9;
811
+ --gse-semantic-theme-background-system-info-30: #6e5ddb;
812
+ --gse-semantic-theme-background-system-info-40: #443989;
813
+ --gse-semantic-theme-background-system-info-50: #241e4b;
814
+ --gse-semantic-theme-background-system-success-5: #cef0e6;
815
+ --gse-semantic-theme-background-system-success-10: #9de1cd;
816
+ --gse-semantic-theme-background-system-success-20: #6bd3b3;
817
+ --gse-semantic-theme-background-system-success-30: #09b581;
818
+ --gse-semantic-theme-background-system-success-40: #056d4d;
819
+ --gse-semantic-theme-background-system-success-50: #033627;
820
+ --gse-semantic-theme-background-system-warning-5: #fef4d8;
821
+ --gse-semantic-theme-background-system-warning-10: #fce9b2;
822
+ --gse-semantic-theme-background-system-warning-20: #fbdd8b;
823
+ --gse-semantic-theme-background-system-warning-30: #f8c73e;
824
+ --gse-semantic-theme-background-system-warning-40: #9a7b25;
825
+ --gse-semantic-theme-background-system-warning-50: #3d300c;
826
+ --gse-semantic-theme-background-system-error-5: #f9d3da;
827
+ --gse-semantic-theme-background-system-error-10: #f3a7b5;
828
+ --gse-semantic-theme-background-system-error-20: #ee7a8f;
829
+ --gse-semantic-theme-background-system-error-30: #e22245;
830
+ --gse-semantic-theme-background-system-error-40: #881429;
831
+ --gse-semantic-theme-background-system-error-50: #440a15;
832
+ --gse-semantic-theme-background-customAccents-bold-10: #3e5374;
833
+ --gse-semantic-theme-background-customAccents-bold-20: #626d97;
834
+ --gse-semantic-theme-background-customAccents-bold-30: #3ac49a;
835
+ --gse-semantic-theme-background-customAccents-bold-40: #0c6d7e;
836
+ --gse-semantic-theme-background-customAccents-bold-50: #607732;
837
+ --gse-semantic-theme-background-customAccents-bold-60: #467aae;
838
+ --gse-semantic-theme-background-customAccents-bold-70: #8a5ecc;
839
+ --gse-semantic-theme-background-customAccents-bold-80: #89387b;
840
+ --gse-semantic-theme-background-customAccents-bold-90: #ff5c77;
841
+ --gse-semantic-theme-background-customAccents-bold-100: #c44b3b;
842
+ --gse-semantic-theme-background-customAccents-bold-110: #ffc650;
843
+ --gse-semantic-theme-background-customAccents-bold-120: #b5e2e8;
844
+ --gse-semantic-theme-background-customAccents-bold-130: #5798d9;
845
+ --gse-semantic-theme-background-customAccents-subtle-10: #c6c8ce;
846
+ --gse-semantic-theme-background-customAccents-subtle-20: #d1d7ef;
847
+ --gse-semantic-theme-background-customAccents-subtle-30: #9de1cd;
848
+ --gse-semantic-theme-background-customAccents-subtle-40: #90d3dd;
849
+ --gse-semantic-theme-background-customAccents-subtle-50: #c6dd98;
850
+ --gse-semantic-theme-background-customAccents-subtle-60: #9ac1e8;
851
+ --gse-semantic-theme-background-customAccents-subtle-70: #cdacff;
852
+ --gse-semantic-theme-background-customAccents-subtle-80: #ef9ee1;
853
+ --gse-semantic-theme-background-customAccents-subtle-90: #ff9dad;
854
+ --gse-semantic-theme-background-customAccents-subtle-100: #feb2ab;
855
+ --gse-semantic-theme-background-customAccents-subtle-110: #ffdd96;
856
+ --gse-semantic-theme-background-customAccents-subtle-120: #daf0f4;
857
+ --gse-semantic-theme-background-customAccents-status-10: #09b581;
858
+ --gse-semantic-theme-background-customAccents-status-20: #e22245;
859
+ --gse-semantic-theme-background-customAccents-status-30: #f8c73e;
860
+ --gse-semantic-theme-background-customAccents-status-40: #4856cb;
861
+ --gse-semantic-theme-background-customAccents-status-50: #626e84;
862
+ --gse-semantic-theme-background-customAccents-status-60: #b74ba4;
863
+ --gse-semantic-theme-background-customAccents-status-70: #fe624d;
864
+ --gse-semantic-theme-foreground-primary-10: #3e5374;
865
+ --gse-semantic-theme-foreground-primary-20: #23395d;
866
+ --gse-semantic-theme-foreground-primary-30: #1b2c48;
867
+ --gse-semantic-theme-foreground-secondary-10: #ffffff;
868
+ --gse-semantic-theme-foreground-secondary-20: #767c8d;
869
+ --gse-semantic-theme-foreground-secondary-30: #626e84;
870
+ --gse-semantic-theme-foreground-tertiary-10: #4856cb;
871
+ --gse-semantic-theme-foreground-tertiary-20: #3742a2;
872
+ --gse-semantic-theme-foreground-tertiary-30: #252e78;
873
+ --gse-semantic-theme-foreground-tertiary-05: #9ca6f9;
874
+ --gse-semantic-theme-foreground-highContrast-10: #ffffff;
875
+ --gse-semantic-theme-foreground-highContrast-20: #e8ebf7;
876
+ --gse-semantic-theme-foreground-highContrast-30: #c6ceec;
877
+ --gse-semantic-theme-foreground-system-primary-10: #5a6af5;
878
+ --gse-semantic-theme-foreground-system-info-10: #6e5ddb;
879
+ --gse-semantic-theme-foreground-system-success-10: #09b581;
880
+ --gse-semantic-theme-foreground-system-warning-10: #f8c73e;
881
+ --gse-semantic-theme-foreground-system-error-10: #e22245;
882
+ --gse-semantic-theme-foreground-specialAccents-brand-10: #ff4f1f;
883
+ --gse-semantic-theme-foreground-specialAccents-ai-10: #8a5ecc;
884
+ --gse-semantic-theme-foreground-link-10: #4856cb;
885
+ --gse-semantic-theme-foreground-link-20: #3742a2;
886
+ --gse-semantic-theme-foreground-link-30: #252e78;
887
+ --gse-semantic-theme-foreground-link-40: #8a5ecc;
888
+ --gse-semantic-theme-foreground-icon-10: #3e5374;
889
+ --gse-semantic-theme-foreground-formControl-clickInput-10: #4856cb;
890
+ --gse-semantic-theme-foreground-formControl-clickInput-20: #3742a2;
891
+ --gse-semantic-theme-foreground-formControl-clickInput-30: #252e78;
892
+ --gse-semantic-theme-foreground-formControl-clickInput-50: #767c8d;
893
+ --gse-semantic-theme-border-focus-10: #7b88f7;
894
+ --gse-semantic-theme-border-divider-10: #ffffff;
895
+ --gse-semantic-theme-border-divider-20: #c6c8ce;
896
+ --gse-semantic-theme-border-divider-30: #4856cb;
897
+ --gse-semantic-theme-border-edges-default-10: #c6c8ce;
898
+ --gse-semantic-theme-border-edges-default-20: #3e5374;
899
+ --gse-semantic-theme-border-edges-default-30: #1b2c48;
900
+ --gse-semantic-theme-border-edges-default-05: #e8ebf7;
901
+ --gse-semantic-theme-border-edges-enabled-10: #4856cb;
902
+ --gse-semantic-theme-border-edges-hover-10: #7b88f7;
903
+ --gse-semantic-theme-border-edges-hover-20: #252e78;
904
+ --gse-semantic-theme-border-edges-active-10: #3742a2;
905
+ --gse-semantic-theme-border-system-primary-10: #9ca6f9;
906
+ --gse-semantic-theme-border-system-info-10: #c5bef1;
907
+ --gse-semantic-theme-border-system-success-10: #9de1cd;
908
+ --gse-semantic-theme-border-system-warning-10: #fce9b2;
909
+ --gse-semantic-theme-border-system-error-10: #f3a7b5;
910
+ --gse-semantic-theme-border-system-error-20: #e22245;
911
+ --gse-semantic-theme-border-inputs-default-10: #a3a7b0;
912
+ --gse-semantic-theme-border-inputs-hover-10: #3742a2;
913
+ --gse-semantic-theme-border-inputs-active-10: #252e78;
914
+ --gse-semantic-theme-borderRadius-interactive-xlarge: 100%;
915
+ --gse-semantic-theme-borderRadius-interactive-xlargeCopy: 100%;
916
+ --gse-semantic-theme-borderRadius-interactive-large: 16px;
917
+ --gse-semantic-theme-borderRadius-interactive-small: 4px;
918
+ --gse-semantic-theme-borderRadius-container-large: 16px;
919
+ --gse-semantic-theme-borderRadius-container-medium: 8px;
920
+ --gse-semantic-theme-borderRadius-container-small: 4px;
921
+ --gse-semantic-theme-borderRadius-formControl-input-large: 8px;
922
+ --gse-semantic-theme-borderRadius-formControl-input-medium: 4px;
923
+ --gse-semantic-theme-borderRadius-formControl-input-small: 2px;
924
+ --gse-semantic-theme-borderRadius-focus-full: 100%;
925
+ --gse-semantic-theme-borderRadius-focus-xlarge: 20px;
926
+ --gse-semantic-theme-borderRadius-focus-large: 16px;
927
+ --gse-semantic-theme-borderRadius-focus-medium: 8px;
928
+ --gse-semantic-theme-borderRadius-focus-small: 4px;
929
+ --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. */
703
949
  --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
704
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. */
705
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. */
706
953
  --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
707
954
  --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
708
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. */
709
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. */
710
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. */
711
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. */
712
- --gse-semantic-background-formControl-input-10: #ffffff;
713
- --gse-semantic-background-formControl-input-20: #c6c8ce;
714
- --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. */
715
- --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
716
- --gse-semantic-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
717
- --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
718
- --gse-semantic-background-system-primary: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
719
- --gse-semantic-background-system-info: #e2dff8; /* The default background color for info elements like alerts. */
720
- --gse-semantic-background-system-success: #cef0e6; /* The default background color for success elements like alerts. */
721
- --gse-semantic-background-system-warning: #fef4d8; /* The default background color for warning elements like alerts. */
722
- --gse-semantic-background-system-error: #f9d3da; /* The default background color for error elements like alerts. */
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. */
723
970
  --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
724
- --gse-semantic-background-system-customAccents-bold-accent_2: #626e84; /* A custom accent used mostly for tags. */
971
+ --gse-semantic-background-system-customAccents-bold-accent_2: #626d97; /* A custom accent used mostly for tags. */
725
972
  --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
726
973
  --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
727
974
  --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
728
- --gse-semantic-background-system-customAccents-bold-accent_6: #5798d9; /* A custom accent used mostly for tags. */
729
- --gse-semantic-background-system-customAccents-bold-accent_7: #ac75ff; /* 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. */
730
977
  --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
731
978
  --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
732
979
  --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
733
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 */
982
+ --gse-semantic-background-system-customAccents-bold-accent_13: #5798d9;
734
983
  --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
735
984
  --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
736
985
  --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
@@ -742,102 +991,18 @@
742
991
  --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
743
992
  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
744
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 */
745
995
  --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
746
996
  --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
747
- --gse-semantic-background-customAccents-bold-10: #3e5374;
748
- --gse-semantic-background-customAccents-bold-20: #626e84;
749
- --gse-semantic-background-customAccents-bold-30: #3ac49a;
750
- --gse-semantic-background-customAccents-bold-40: #0c6d7e;
751
- --gse-semantic-background-customAccents-bold-50: #607732;
752
- --gse-semantic-background-customAccents-bold-60: #5798d9;
753
- --gse-semantic-background-customAccents-bold-70: #ac75ff;
754
- --gse-semantic-background-customAccents-bold-80: #89387b;
755
- --gse-semantic-background-customAccents-bold-90: #ff5c77;
756
- --gse-semantic-background-customAccents-bold-100: #c44b3b;
757
- --gse-semantic-background-customAccents-bold-110: #ffc650;
758
- --gse-semantic-background-customAccents-subtle-10: #c6c8ce;
759
- --gse-semantic-background-customAccents-subtle-20: #d1d7ef;
760
- --gse-semantic-background-customAccents-subtle-30: #9de1cd;
761
- --gse-semantic-background-customAccents-subtle-40: #90d3dd;
762
- --gse-semantic-background-customAccents-subtle-50: #c6dd98;
763
- --gse-semantic-background-customAccents-subtle-60: #9ac1e8;
764
- --gse-semantic-background-customAccents-subtle-70: #cdacff;
765
- --gse-semantic-background-customAccents-subtle-80: #ef9ee1;
766
- --gse-semantic-background-customAccents-subtle-90: #ff9dad;
767
- --gse-semantic-background-customAccents-subtle-100: #feb2ab;
768
- --gse-semantic-background-customAccents-subtle-110: #ffdd96;
769
- --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
770
- --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
771
- --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
772
- --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
773
- --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
774
- --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
775
- --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
776
- --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
777
- --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
778
- --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
779
- --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
780
- --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
781
- --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
782
- --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
783
- --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
784
- --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
785
- --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
786
- --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
787
- --gse-semantic-foreground-primary-10: #3e5374;
788
- --gse-semantic-foreground-primary-20: #23395d;
789
- --gse-semantic-foreground-primary-30: #1b2c48;
790
- --gse-semantic-foreground-secondary-10: #ffffff;
791
- --gse-semantic-foreground-secondary-20: #767c8d;
792
- --gse-semantic-foreground-secondary-30: #626e84;
793
- --gse-semantic-foreground-tertiary-10: #4856cb;
794
- --gse-semantic-foreground-tertiary-20: #3742a2;
795
- --gse-semantic-foreground-tertiary-30: #252e78;
796
- --gse-semantic-foreground-highContrast-10: #ffffff;
797
- --gse-semantic-foreground-highContrast-20: #e8ebf7;
798
- --gse-semantic-foreground-highContrast-30: #c6ceec;
799
- --gse-semantic-foreground-system-primary-10: #5a6af5;
800
- --gse-semantic-foreground-system-info-10: #6e5ddb;
801
- --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. */
802
- --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. */
803
- --gse-semantic-foreground-system-success-10: #09b581;
804
- --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. */
805
- --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. */
806
- --gse-semantic-foreground-system-warning-10: #f8c73e;
807
- --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. */
808
- --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. */
809
- --gse-semantic-foreground-system-error-10: #e22245;
810
- --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. */
811
- --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. */
812
- --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. */
813
- --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. */
814
- --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
815
- --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
816
- --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
817
- --gse-semantic-foreground-specialAccents-brand-10: #ff4f1f;
818
- --gse-semantic-foreground-specialAccents-ai-10: #8a5ecc;
819
- --gse-semantic-foreground-link-10: #4856cb;
820
- --gse-semantic-foreground-link-20: #3742a2;
821
- --gse-semantic-foreground-link-30: #252e78;
822
- --gse-semantic-foreground-link-40: #8a5ecc;
823
- --gse-semantic-foreground-icon-10: #3e5374;
824
- --gse-semantic-foreground-formControl-clickInput-10: #4856cb;
825
- --gse-semantic-foreground-formControl-clickInput-20: #3742a2;
826
- --gse-semantic-foreground-formControl-clickInput-30: #252e78;
827
- --gse-semantic-foreground-formControl-clickInput-50: #767c8d;
828
- --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. */
829
- --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
830
- --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. */
831
- --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. */
832
- --gse-semantic-foreground-formControl-clickInput-error: #e22245;
833
- --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
834
- --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
835
- --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
836
- --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
837
- --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
838
- --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
839
- --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
840
- --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for the optional indicator. */
997
+ --gse-semantic-background-system-status-available: #09b581;
998
+ --gse-semantic-background-system-status-busy: #e22245;
999
+ --gse-semantic-background-system-status-away: #f8c73e;
1000
+ --gse-semantic-background-system-status-onQueue: #4856cb;
1001
+ --gse-semantic-background-system-status-offline: #626e84;
1002
+ --gse-semantic-background-system-status-outOfOffice: #b74ba4;
1003
+ --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. */
841
1006
  --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
842
1007
  --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
843
1008
  --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
@@ -860,6 +1025,7 @@
860
1025
  --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
861
1026
  --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
862
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 */
863
1029
  --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
864
1030
  --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
865
1031
  --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
@@ -868,35 +1034,51 @@
868
1034
  --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
869
1035
  --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
870
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. */
1059
+ --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 */
871
1064
  --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
872
- --gse-semantic-border-divider-10: #ffffff;
873
- --gse-semantic-border-divider-20: #c6c8ce;
874
- --gse-semantic-border-divider-30: #4856cb;
875
- --gse-semantic-border-edges-default-10: #c6c8ce;
876
- --gse-semantic-border-edges-default-20: #3e5374;
877
- --gse-semantic-border-edges-default-30: #1b2c48;
878
- --gse-semantic-border-edges-enabled-10: #4856cb;
879
- --gse-semantic-border-edges-hover-10: #7b88f7;
880
- --gse-semantic-border-edges-hover-20: #252e78;
881
- --gse-semantic-border-edges-active-10: #4856cb;
882
- --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
883
- --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
884
- --gse-semantic-border-system-success: #cef0e6; /* The default borders for elements that have a feedback/success background. */
885
- --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
886
- --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
887
- --gse-semantic-border-inputs-default-10: #a3a7b0;
888
- --gse-semantic-border-inputs-hover-10: #3742a2;
889
- --gse-semantic-border-inputs-active-10: #252e78;
890
1065
  --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
891
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. */
892
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. */
893
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. */
894
- --gse-semantic-border-container-edges-active: #4856cb; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a 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. */
895
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 */
896
1073
  --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
897
1074
  --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
898
1075
  --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
899
- --gse-semantic-border-container-highConstrast-active: #4856cb; /* The color for the edge borders of high contrast surfaces that are on the active 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. */
900
1082
  --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary elements. */
901
1083
  --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
902
1084
  --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
@@ -905,7 +1087,7 @@
905
1087
  --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
906
1088
  --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
907
1089
  --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
908
- --gse-semantic-body-sm-regular: 400 12px/16px "Noto Sans"; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
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. */
909
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. */
910
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. */
911
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. */
@@ -988,64 +1170,96 @@
988
1170
  * We usually pair it with medium emphasis colors.
989
1171
  */
990
1172
  --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
991
- --gse-semantic-interactive-medium-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
992
- --gse-semantic-interactive-medium-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
993
- --gse-semantic-interactive-medium-padding-horizontal: 8px; /* The recommended horizontal padding for medium-sized components. */
994
- --gse-semantic-interactive-small-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
995
- --gse-semantic-interactive-small-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
996
- --gse-semantic-interactive-small-padding-horizontal: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
997
- --gse-semantic-interactive-small-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
998
- --gse-semantic-interactive-large-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
999
- --gse-semantic-interactive-large-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
1000
- --gse-semantic-interactive-large-padding-horizontal: 12px; /* The recommended horizontal padding for large-sized components. */
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. */
1001
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. */
1002
- --gse-semantic-interactive-divider-small-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
1003
- --gse-semantic-interactive-divider-large-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
1004
- --gse-semantic-interactive-xlarge-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
1005
- --gse-semantic-interactive-xlarge-padding-horizontal: 16px; /* The recommended horizontal padding for xlarge-sized components. */
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. */
1006
1192
  --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
1007
- --gse-semantic-focusOutline-xlarge-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
1008
- --gse-semantic-focusOutline-large-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
1009
- --gse-semantic-focusOutline-medium-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
1010
- --gse-semantic-focusOutline-small-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
1011
- --gse-semantic-focusOutline-small-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
1012
- --gse-semantic-focusOutline-xsmall-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
1013
- --gse-semantic-container-large-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
1014
- --gse-semantic-container-large-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
1015
- --gse-semantic-container-large-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
1016
- --gse-semantic-container-small-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
1017
- --gse-semantic-container-small-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
1018
- --gse-semantic-container-small-horizontalPadding: 12px; /* The default padding of a small-sized container, like a tooltip. */
1019
- --gse-semantic-container-small-verticalPadding: 8px; /* The default vertical padding of a small-sized container, like a tooltip. */
1020
- --gse-semantic-container-small-minHeight: 20px; /* The minimum height recommended for a small container, like a tag. */
1021
- --gse-semantic-container-small-height: 32px; /* The average recommended height for a small container, like a tag. */
1022
- --gse-semantic-container-medium-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
1023
- --gse-semantic-container-medium-horizontalPadding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
1024
- --gse-semantic-container-medium-verticalPadding: 24px; /* The default vertical padding of a medium-sized container, like a tooltip. */
1025
- --gse-semantic-container-medium-minHeight: 32px; /* The minimmum recommended height for a medium container, like a tag. */
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 */
1200
+ --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. */
1026
1221
  --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
1027
1222
  --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
1028
- --gse-semantic-container-xsmall-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
1029
- --gse-semantic-container-xsmall-horizontalPadding: 8px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
1030
- --gse-semantic-container-xsmall-verticalPadding: 4px; /* The default padding of a extra small-sized container, like the container of an eyebrow title. */
1031
- --gse-semantic-formControl-textInput-large-borderRadius: 8px; /* The recommended large border-radius for inputs */
1032
- --gse-semantic-formControl-textInput-small-borderRadius: 2px; /* The recommended small border-radius for inputs */
1033
- --gse-semantic-formControl-textInput-medium-borderRadius: 4px; /* The recommended medium border-radius for inputs */
1034
- --gse-semantic-formControl-textInput-padding: 8px 12px; /* The default padding for inputs inside a form control. */
1035
- --gse-semantic-formControl-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
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. */
1227
+ --gse-semantic-container-3xs-size: 8px;
1228
+ --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 */
1036
1232
  --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
1037
1233
  --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
1038
- --gse-semantic-contanier-large-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
1039
- --gse-semantic-contanier-medium-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards. */
1040
- --gse-semantic-contanier-small-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
1041
- --gse-semantic-assets-large-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
1042
- --gse-semantic-assets-medium-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
1043
- --gse-semantic-assets-small-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
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. */
1236
+ --gse-semantic-formControl-field-textInput-md-height: 32px;
1237
+ --gse-semantic-formControl-field-textInput-medium-padding: 12px; /* The recommended horizontal padding for text inputs. */
1238
+ --gse-semantic-formControl-field-textInput-minWidth: 48px;
1239
+ --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. */
1044
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. */
1045
1257
  --gse-semantic-divider-xs-margin: 1px;
1046
1258
  --gse-semantic-divider-sm-margin: 2px;
1047
1259
  --gse-semantic-divider-md-margin: 4px;
1048
1260
  --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 */
1049
1263
  }
1050
1264
 
1051
1265
  /*# sourceMappingURL=global.css.map */