@siemens/element-theme 51.0.0-rc.4 → 51.0.0-rc.6

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 (32) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_variables.scss +1 -0
  3. package/src/styles/bootstrap/_alert.scss +19 -19
  4. package/src/styles/bootstrap/_badges.scss +38 -38
  5. package/src/styles/bootstrap/_button-group.scss +9 -8
  6. package/src/styles/bootstrap/_buttons.scss +83 -82
  7. package/src/styles/bootstrap/_card.scss +13 -14
  8. package/src/styles/bootstrap/_dropdowns.scss +6 -6
  9. package/src/styles/bootstrap/_list-group.scss +13 -13
  10. package/src/styles/bootstrap/_nav.scss +7 -7
  11. package/src/styles/bootstrap/_pagination.scss +3 -2
  12. package/src/styles/bootstrap/_tables.scss +2 -2
  13. package/src/styles/bootstrap/_variables.scss +74 -71
  14. package/src/styles/bootstrap/forms/_form-check.scss +32 -62
  15. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  16. package/src/styles/bootstrap/forms/_form-file.scss +7 -7
  17. package/src/styles/bootstrap/forms/_form-range.scss +13 -13
  18. package/src/styles/components/_application-header.scss +23 -22
  19. package/src/styles/components/_datatable.scss +13 -12
  20. package/src/styles/components/_drag_drop.scss +4 -4
  21. package/src/styles/components/_layout.scss +14 -1
  22. package/src/styles/components/_links.scss +2 -2
  23. package/src/styles/components/_list-item.scss +7 -7
  24. package/src/styles/components/_markdown.scss +28 -14
  25. package/src/styles/components/_pills.scss +3 -3
  26. package/src/styles/components/_scrollbar.scss +4 -4
  27. package/src/styles/components/_skeleton.scss +4 -3
  28. package/src/styles/components/_switch.scss +12 -14
  29. package/src/styles/components/_widgets.scss +1 -1
  30. package/src/styles/variables/_focus.scss +4 -3
  31. package/src/styles/variables/_system-tokens.scss +180 -0
  32. package/src/theme/_theme-element.scss +362 -2
package/src/theme/_theme-element.scss CHANGED
@@ -219,7 +219,187 @@ $theme-element-light: (
219
219
  element-launchpad-app-background: base.$color-blue-300,
220
220
  element-launchpad-app-color: base.$color-black,
221
221
  element-ai-key-visual:
222
- url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='black'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='black'/></svg>")
222
+ url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='black'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='black'/></svg>"),
223
+ element-action-primary-active: base.$color-interactive-blue-700,
224
+ element-action-secondary-active: base.$color-light-bold-green,
225
+ element-action-warning-active: base.$color-orange-700,
226
+ element-action-danger-active: base.$color-red-700,
227
+ element-action-secondary-border-active: base.$color-interactive-blue-700,
228
+ element-data-avocado-1: data.$color-data-avocado-400,
229
+ element-data-avocado-2: data.$color-data-avocado-500,
230
+ element-data-avocado-3: data.$color-data-avocado-700,
231
+ element-data-avocado-4: data.$color-data-avocado-900,
232
+ element-data-blue-1: data.$color-data-blue-400,
233
+ element-data-blue-2: data.$color-data-blue-500,
234
+ element-data-blue-3: data.$color-data-blue-700,
235
+ element-data-blue-4: data.$color-data-blue-900,
236
+ element-data-royal-blue-1: data.$color-data-royal-blue-200,
237
+ element-data-royal-blue-2: data.$color-data-royal-blue-400,
238
+ element-data-royal-blue-3: data.$color-data-royal-blue-500,
239
+ element-data-royal-blue-4: data.$color-data-royal-blue-700,
240
+ element-data-orchid-1: data.$color-data-orchid-400,
241
+ element-data-orchid-2: data.$color-data-orchid-500,
242
+ element-data-orchid-3: data.$color-data-orchid-700,
243
+ element-data-orchid-4: data.$color-data-orchid-900,
244
+ element-data-yellow-1: data.$color-data-yellow-400,
245
+ element-data-yellow-2: data.$color-data-yellow-500,
246
+ element-data-yellow-3: data.$color-data-yellow-700,
247
+ element-data-yellow-4: data.$color-data-yellow-900,
248
+ element-data-deep-blue-1: data.$color-data-deep-blue-400,
249
+ element-data-deep-blue-2: data.$color-data-deep-blue-500,
250
+ element-data-deep-blue-3: data.$color-data-deep-blue-700,
251
+ element-data-deep-blue-4: data.$color-data-deep-blue-900,
252
+ si-sys-background-0: base.$color-light-sand,
253
+ si-sys-background-1: base.$color-white,
254
+ si-sys-background-2: base.$color-light-sand,
255
+ si-sys-background-3: base.$color-white,
256
+ si-sys-background-4: base.$color-experimental-deep-blue-25,
257
+ si-sys-background-hover: base.$color-light-sand,
258
+ si-sys-background-selected: base.$color-sand,
259
+ si-sys-background-accent: base.$color-interactive-blue-500,
260
+ si-sys-background-accent-hover: base.$color-teal,
261
+ si-sys-background-accent-active: base.$color-interactive-blue-700,
262
+ si-sys-background-accent-secondary: transparent,
263
+ si-sys-background-accent-secondary-hover: base.$color-light-bold-green,
264
+ si-sys-background-accent-secondary-active: base.$color-light-bold-green,
265
+ si-sys-background-information: base.$color-blue-500,
266
+ si-sys-background-information-subtle: base.$color-blue-100,
267
+ si-sys-background-success: base.$color-green-700,
268
+ si-sys-background-success-subtle: base.$color-green-100,
269
+ si-sys-background-caution: base.$color-yellow-500,
270
+ si-sys-background-caution-subtle: base.$color-yellow-100,
271
+ si-sys-background-warning: base.$color-orange-700,
272
+ si-sys-background-warning-subtle: base.$color-orange-100,
273
+ si-sys-background-warning-hover: base.$color-orange-900,
274
+ si-sys-background-warning-active: base.$color-orange-700,
275
+ si-sys-background-warning-secondary: transparent,
276
+ si-sys-background-danger: base.$color-red-500,
277
+ si-sys-background-danger-subtle: base.$color-red-100,
278
+ si-sys-background-danger-hover: base.$color-red-700,
279
+ si-sys-background-danger-active: base.$color-red-700,
280
+ si-sys-background-danger-secondary: transparent,
281
+ si-sys-background-critical: data.$color-data-orchid-500,
282
+ si-sys-background-critical-subtle: data.$color-data-orchid-100,
283
+ si-sys-text-primary: base.$color-deep-blue-900,
284
+ si-sys-text-secondary: base.$color-deep-blue-700,
285
+ si-sys-text-disabled: base.$color-deep-blue-500,
286
+ si-sys-text-inverse: base.$color-white,
287
+ si-sys-text-accent: base.$color-interactive-blue-500,
288
+ si-sys-text-accent-hover: base.$color-teal,
289
+ si-sys-text-accent-active: base.$color-interactive-blue-700,
290
+ si-sys-text-on-accent: base.$color-white,
291
+ si-sys-text-on-accent-secondary: base.$color-interactive-blue-500,
292
+ si-sys-text-on-accent-secondary-hover: base.$color-teal,
293
+ si-sys-text-on-accent-secondary-active: base.$color-interactive-blue-700,
294
+ si-sys-text-information: base.$color-blue-700,
295
+ si-sys-text-on-information: base.$color-white,
296
+ si-sys-text-success: base.$color-green-700,
297
+ si-sys-text-on-success: base.$color-white,
298
+ si-sys-text-caution: base.$color-yellow-900,
299
+ si-sys-text-on-caution: base.$color-deep-blue-900,
300
+ si-sys-text-warning: base.$color-orange-900,
301
+ si-sys-text-on-warning: base.$color-white,
302
+ si-sys-text-on-warning-secondary: base.$color-orange-900,
303
+ si-sys-text-danger: base.$color-red-700,
304
+ si-sys-text-on-danger: base.$color-white,
305
+ si-sys-text-on-danger-secondary: base.$color-red-500,
306
+ si-sys-text-critical: data.$color-data-orchid-700,
307
+ si-sys-text-on-critical: base.$color-white,
308
+ si-sys-border-1: base.$color-deep-blue-900,
309
+ si-sys-border-2: base.$color-deep-blue-600,
310
+ si-sys-border-3: base.$color-deep-blue-400,
311
+ si-sys-border-4: base.$color-deep-blue-100,
312
+ si-sys-border-accent: base.$color-interactive-blue-500,
313
+ si-sys-border-accent-hover: base.$color-teal,
314
+ si-sys-border-accent-active: base.$color-interactive-blue-700,
315
+ si-sys-border-information: base.$color-blue-500,
316
+ si-sys-border-success: base.$color-green-700,
317
+ si-sys-border-caution: base.$color-yellow-500,
318
+ si-sys-border-warning: base.$color-orange-700,
319
+ si-sys-border-warning-secondary: base.$color-orange-900,
320
+ si-sys-border-danger: base.$color-red-500,
321
+ si-sys-border-danger-secondary: base.$color-red-500,
322
+ si-sys-border-critical: data.$color-data-orchid-500,
323
+ si-sys-effects-logo: base.$color-deep-blue-900,
324
+ si-sys-effects-backdrop: rgba(base.$color-black, 0.3),
325
+ si-sys-effects-focus: base.$color-focus,
326
+ si-sys-effects-shadow-0: base.$color-light-sand,
327
+ si-sys-effects-shadow-1: base.$color-white,
328
+ si-sys-effects-shadow-2: base.$color-light-sand,
329
+ si-sys-effects-shadow-3: base.$color-white,
330
+ si-sys-data-categorial-1: data.$color-data-petrol,
331
+ si-sys-data-categorial-2: data.$color-data-turquoise-900,
332
+ si-sys-data-categorial-3: data.$color-data-green-700,
333
+ si-sys-data-categorial-4: data.$color-data-turquoise-700,
334
+ si-sys-data-categorial-5: data.$color-data-royal-blue-500,
335
+ si-sys-data-categorial-6: data.$color-data-interactive-coral-900,
336
+ si-sys-data-categorial-7: data.$color-data-purple-700,
337
+ si-sys-data-categorial-8: data.$color-data-purple-900,
338
+ si-sys-data-categorial-9: data.$color-data-orchid-700,
339
+ si-sys-data-categorial-10: data.$color-data-red-700,
340
+ si-sys-data-categorial-11: data.$color-data-plum-900,
341
+ si-sys-data-categorial-12: data.$color-data-plum-500,
342
+ si-sys-data-categorial-13: data.$color-data-royal-blue-700,
343
+ si-sys-data-categorial-14: data.$color-data-orange-900,
344
+ si-sys-data-categorial-15: data.$color-data-yellow-900,
345
+ si-sys-data-categorial-16: data.$color-data-sand-700,
346
+ si-sys-data-categorial-17: data.$color-data-deep-blue-700,
347
+ si-sys-data-sequential-avocado-1: data.$color-data-avocado-400,
348
+ si-sys-data-sequential-avocado-2: data.$color-data-avocado-500,
349
+ si-sys-data-sequential-avocado-3: data.$color-data-avocado-700,
350
+ si-sys-data-sequential-avocado-4: data.$color-data-avocado-900,
351
+ si-sys-data-sequential-green-1: data.$color-data-green-400,
352
+ si-sys-data-sequential-green-2: data.$color-data-green-500,
353
+ si-sys-data-sequential-green-3: data.$color-data-green-700,
354
+ si-sys-data-sequential-green-4: data.$color-data-green-900,
355
+ si-sys-data-sequential-turquoise-1: data.$color-data-turquoise-400,
356
+ si-sys-data-sequential-turquoise-2: data.$color-data-turquoise-500,
357
+ si-sys-data-sequential-turquoise-3: data.$color-data-turquoise-700,
358
+ si-sys-data-sequential-turquoise-4: data.$color-data-turquoise-900,
359
+ si-sys-data-sequential-interactive-coral-1: data.$color-data-interactive-coral-400,
360
+ si-sys-data-sequential-interactive-coral-2: data.$color-data-interactive-coral-500,
361
+ si-sys-data-sequential-interactive-coral-3: data.$color-data-interactive-coral-700,
362
+ si-sys-data-sequential-interactive-coral-4: data.$color-data-interactive-coral-900,
363
+ si-sys-data-sequential-blue-1: data.$color-data-blue-400,
364
+ si-sys-data-sequential-blue-2: data.$color-data-blue-500,
365
+ si-sys-data-sequential-blue-3: data.$color-data-blue-700,
366
+ si-sys-data-sequential-blue-4: data.$color-data-blue-900,
367
+ si-sys-data-sequential-royal-blue-1: data.$color-data-royal-blue-200,
368
+ si-sys-data-sequential-royal-blue-2: data.$color-data-royal-blue-400,
369
+ si-sys-data-sequential-royal-blue-3: data.$color-data-royal-blue-500,
370
+ si-sys-data-sequential-royal-blue-4: data.$color-data-royal-blue-700,
371
+ si-sys-data-sequential-purple-1: data.$color-data-purple-400,
372
+ si-sys-data-sequential-purple-2: data.$color-data-purple-500,
373
+ si-sys-data-sequential-purple-3: data.$color-data-purple-700,
374
+ si-sys-data-sequential-purple-4: data.$color-data-purple-900,
375
+ si-sys-data-sequential-orchid-1: data.$color-data-orchid-400,
376
+ si-sys-data-sequential-orchid-2: data.$color-data-orchid-500,
377
+ si-sys-data-sequential-orchid-3: data.$color-data-orchid-700,
378
+ si-sys-data-sequential-orchid-4: data.$color-data-orchid-900,
379
+ si-sys-data-sequential-plum-1: data.$color-data-plum-400,
380
+ si-sys-data-sequential-plum-2: data.$color-data-plum-500,
381
+ si-sys-data-sequential-plum-3: data.$color-data-plum-700,
382
+ si-sys-data-sequential-plum-4: data.$color-data-plum-900,
383
+ si-sys-data-sequential-red-1: data.$color-data-red-400,
384
+ si-sys-data-sequential-red-2: data.$color-data-red-500,
385
+ si-sys-data-sequential-red-3: data.$color-data-red-700,
386
+ si-sys-data-sequential-red-4: data.$color-data-red-900,
387
+ si-sys-data-sequential-orange-1: data.$color-data-orange-200,
388
+ si-sys-data-sequential-orange-2: data.$color-data-orange-400,
389
+ si-sys-data-sequential-orange-3: data.$color-data-orange-500,
390
+ si-sys-data-sequential-orange-4: data.$color-data-orange-700,
391
+ si-sys-data-sequential-yellow-1: data.$color-data-yellow-400,
392
+ si-sys-data-sequential-yellow-2: data.$color-data-yellow-500,
393
+ si-sys-data-sequential-yellow-3: data.$color-data-yellow-700,
394
+ si-sys-data-sequential-yellow-4: data.$color-data-yellow-900,
395
+ si-sys-data-sequential-sand-1: data.$color-data-sand-400,
396
+ si-sys-data-sequential-sand-2: data.$color-data-sand-500,
397
+ si-sys-data-sequential-sand-3: data.$color-data-sand-700,
398
+ si-sys-data-sequential-sand-4: data.$color-data-sand-900,
399
+ si-sys-data-sequential-deep-blue-1: data.$color-data-deep-blue-400,
400
+ si-sys-data-sequential-deep-blue-2: data.$color-data-deep-blue-500,
401
+ si-sys-data-sequential-deep-blue-3: data.$color-data-deep-blue-700,
402
+ si-sys-data-sequential-deep-blue-4: data.$color-data-deep-blue-900
223
403
  );
224
404
 
225
405
  $theme-element-dark: (
@@ -370,5 +550,185 @@ $theme-element-dark: (
370
550
  element-launchpad-app-background: base.$color-blue-300,
371
551
  element-launchpad-app-color: base.$color-black,
372
552
  element-ai-key-visual:
373
- url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='white'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='white'/></svg>")
553
+ url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='white'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='white'/></svg>"),
554
+ element-action-primary-active: base.$color-interactive-blue-700,
555
+ element-action-secondary-active: base.$color-dark-bold-green,
556
+ element-action-warning-active: base.$color-orange-700,
557
+ element-action-danger-active: base.$color-red-700,
558
+ element-action-secondary-border-active: base.$color-interactive-blue-700,
559
+ element-data-avocado-1: data.$color-data-avocado-200,
560
+ element-data-avocado-2: data.$color-data-avocado-400,
561
+ element-data-avocado-3: data.$color-data-avocado-500,
562
+ element-data-avocado-4: data.$color-data-avocado-700,
563
+ element-data-blue-1: data.$color-data-blue-200,
564
+ element-data-blue-2: data.$color-data-blue-400,
565
+ element-data-blue-3: data.$color-data-blue-500,
566
+ element-data-blue-4: data.$color-data-blue-700,
567
+ element-data-royal-blue-1: data.$color-data-royal-blue-100,
568
+ element-data-royal-blue-2: data.$color-data-royal-blue-200,
569
+ element-data-royal-blue-3: data.$color-data-royal-blue-400,
570
+ element-data-royal-blue-4: data.$color-data-royal-blue-500,
571
+ element-data-orchid-1: data.$color-data-orchid-200,
572
+ element-data-orchid-2: data.$color-data-orchid-400,
573
+ element-data-orchid-3: data.$color-data-orchid-500,
574
+ element-data-orchid-4: data.$color-data-orchid-700,
575
+ element-data-yellow-1: data.$color-data-yellow-200,
576
+ element-data-yellow-2: data.$color-data-yellow-400,
577
+ element-data-yellow-3: data.$color-data-yellow-500,
578
+ element-data-yellow-4: data.$color-data-yellow-700,
579
+ element-data-deep-blue-1: data.$color-data-deep-blue-200,
580
+ element-data-deep-blue-2: data.$color-data-deep-blue-400,
581
+ element-data-deep-blue-3: data.$color-data-deep-blue-500,
582
+ element-data-deep-blue-4: data.$color-data-deep-blue-700,
583
+ si-sys-background-0: base.$color-deep-blue-900,
584
+ si-sys-background-1: base.$color-deep-blue-800,
585
+ si-sys-background-2: base.$color-deep-blue-700,
586
+ si-sys-background-3: base.$color-grayish-navy,
587
+ si-sys-background-4: base.$color-experimental-deep-blue-850,
588
+ si-sys-background-hover: base.$color-dark-grayish-navy,
589
+ si-sys-background-selected: base.$color-grayish-navy,
590
+ si-sys-background-accent: base.$color-interactive-coral,
591
+ si-sys-background-accent-hover: base.$color-bold-green,
592
+ si-sys-background-accent-active: base.$color-interactive-blue-700,
593
+ si-sys-background-accent-secondary: transparent,
594
+ si-sys-background-accent-secondary-hover: base.$color-dark-bold-green,
595
+ si-sys-background-accent-secondary-active: base.$color-dark-bold-green,
596
+ si-sys-background-information: base.$color-blue-500,
597
+ si-sys-background-information-subtle: base.$color-blue-900,
598
+ si-sys-background-success: base.$color-green-500,
599
+ si-sys-background-success-subtle: base.$color-green-900,
600
+ si-sys-background-caution: base.$color-yellow-300,
601
+ si-sys-background-caution-subtle: base.$color-yellow-900,
602
+ si-sys-background-warning: base.$color-orange-500,
603
+ si-sys-background-warning-subtle: base.$color-orange-900,
604
+ si-sys-background-warning-hover: base.$color-orange-700,
605
+ si-sys-background-warning-active: base.$color-orange-700,
606
+ si-sys-background-warning-secondary: transparent,
607
+ si-sys-background-danger: base.$color-red-500,
608
+ si-sys-background-danger-subtle: base.$color-red-900,
609
+ si-sys-background-danger-hover: base.$color-red-700,
610
+ si-sys-background-danger-active: base.$color-red-700,
611
+ si-sys-background-danger-secondary: transparent,
612
+ si-sys-background-critical: data.$color-data-orchid-500,
613
+ si-sys-background-critical-subtle: data.$color-data-orchid-700,
614
+ si-sys-text-primary: base.$color-white,
615
+ si-sys-text-secondary: base.$color-deep-blue-300,
616
+ si-sys-text-disabled: base.$color-deep-blue-600,
617
+ si-sys-text-inverse: base.$color-deep-blue-900,
618
+ si-sys-text-accent: base.$color-interactive-coral,
619
+ si-sys-text-accent-hover: base.$color-bold-green,
620
+ si-sys-text-accent-active: base.$color-interactive-blue-700,
621
+ si-sys-text-on-accent: base.$color-deep-blue-900,
622
+ si-sys-text-on-accent-secondary: base.$color-interactive-coral,
623
+ si-sys-text-on-accent-secondary-hover: base.$color-bold-green,
624
+ si-sys-text-on-accent-secondary-active: base.$color-interactive-blue-700,
625
+ si-sys-text-information: base.$color-blue-100,
626
+ si-sys-text-on-information: base.$color-white,
627
+ si-sys-text-success: base.$color-green-100,
628
+ si-sys-text-on-success: base.$color-deep-blue-900,
629
+ si-sys-text-caution: base.$color-yellow-100,
630
+ si-sys-text-on-caution: base.$color-deep-blue-900,
631
+ si-sys-text-warning: base.$color-orange-100,
632
+ si-sys-text-on-warning: base.$color-deep-blue-900,
633
+ si-sys-text-on-warning-secondary: base.$color-orange-500,
634
+ si-sys-text-danger: base.$color-red-100,
635
+ si-sys-text-on-danger: base.$color-white,
636
+ si-sys-text-on-danger-secondary: base.$color-red-300,
637
+ si-sys-text-critical: data.$color-data-orchid-100,
638
+ si-sys-text-on-critical: base.$color-white,
639
+ si-sys-border-1: base.$color-white,
640
+ si-sys-border-2: base.$color-deep-blue-400,
641
+ si-sys-border-3: base.$color-deep-blue-600,
642
+ si-sys-border-4: base.$color-deep-blue-700,
643
+ si-sys-border-accent: base.$color-interactive-coral,
644
+ si-sys-border-accent-hover: base.$color-bold-green,
645
+ si-sys-border-accent-active: base.$color-interactive-blue-700,
646
+ si-sys-border-information: base.$color-blue-500,
647
+ si-sys-border-success: base.$color-green-500,
648
+ si-sys-border-caution: base.$color-yellow-300,
649
+ si-sys-border-warning: base.$color-orange-500,
650
+ si-sys-border-warning-secondary: base.$color-orange-500,
651
+ si-sys-border-danger: base.$color-red-500,
652
+ si-sys-border-danger-secondary: base.$color-red-300,
653
+ si-sys-border-critical: data.$color-data-orchid-500,
654
+ si-sys-effects-logo: base.$color-white,
655
+ si-sys-effects-backdrop: rgba(base.$color-black, 0.7),
656
+ si-sys-effects-focus: base.$color-focus,
657
+ si-sys-effects-shadow-0: base.$color-deep-blue-900,
658
+ si-sys-effects-shadow-1: base.$color-deep-blue-800,
659
+ si-sys-effects-shadow-2: base.$color-deep-blue-700,
660
+ si-sys-effects-shadow-3: base.$color-grayish-navy,
661
+ si-sys-data-categorial-1: data.$color-data-light-petrol,
662
+ si-sys-data-categorial-2: data.$color-data-bold-green,
663
+ si-sys-data-categorial-3: data.$color-data-green-400,
664
+ si-sys-data-categorial-4: data.$color-data-turquoise-100,
665
+ si-sys-data-categorial-5: data.$color-data-royal-blue-400,
666
+ si-sys-data-categorial-6: data.$color-data-interactive-coral-100,
667
+ si-sys-data-categorial-7: data.$color-data-purple-500,
668
+ si-sys-data-categorial-8: data.$color-data-purple-200,
669
+ si-sys-data-categorial-9: data.$color-data-orchid-400,
670
+ si-sys-data-categorial-10: data.$color-data-red-500,
671
+ si-sys-data-categorial-11: data.$color-data-plum-400,
672
+ si-sys-data-categorial-12: data.$color-data-plum-200,
673
+ si-sys-data-categorial-13: data.$color-data-royal-blue-200,
674
+ si-sys-data-categorial-14: data.$color-data-orange-400,
675
+ si-sys-data-categorial-15: data.$color-data-yellow-400,
676
+ si-sys-data-categorial-16: data.$color-data-sand-500,
677
+ si-sys-data-categorial-17: data.$color-data-deep-blue-500,
678
+ si-sys-data-sequential-avocado-1: data.$color-data-avocado-200,
679
+ si-sys-data-sequential-avocado-2: data.$color-data-avocado-400,
680
+ si-sys-data-sequential-avocado-3: data.$color-data-avocado-500,
681
+ si-sys-data-sequential-avocado-4: data.$color-data-avocado-700,
682
+ si-sys-data-sequential-green-1: data.$color-data-green-200,
683
+ si-sys-data-sequential-green-2: data.$color-data-green-400,
684
+ si-sys-data-sequential-green-3: data.$color-data-green-500,
685
+ si-sys-data-sequential-green-4: data.$color-data-green-700,
686
+ si-sys-data-sequential-turquoise-1: data.$color-data-turquoise-200,
687
+ si-sys-data-sequential-turquoise-2: data.$color-data-turquoise-400,
688
+ si-sys-data-sequential-turquoise-3: data.$color-data-turquoise-500,
689
+ si-sys-data-sequential-turquoise-4: data.$color-data-turquoise-700,
690
+ si-sys-data-sequential-interactive-coral-1: data.$color-data-interactive-coral-200,
691
+ si-sys-data-sequential-interactive-coral-2: data.$color-data-interactive-coral-400,
692
+ si-sys-data-sequential-interactive-coral-3: data.$color-data-interactive-coral-500,
693
+ si-sys-data-sequential-interactive-coral-4: data.$color-data-interactive-coral-700,
694
+ si-sys-data-sequential-blue-1: data.$color-data-blue-200,
695
+ si-sys-data-sequential-blue-2: data.$color-data-blue-400,
696
+ si-sys-data-sequential-blue-3: data.$color-data-blue-500,
697
+ si-sys-data-sequential-blue-4: data.$color-data-blue-700,
698
+ si-sys-data-sequential-royal-blue-1: data.$color-data-royal-blue-100,
699
+ si-sys-data-sequential-royal-blue-2: data.$color-data-royal-blue-200,
700
+ si-sys-data-sequential-royal-blue-3: data.$color-data-royal-blue-400,
701
+ si-sys-data-sequential-royal-blue-4: data.$color-data-royal-blue-500,
702
+ si-sys-data-sequential-purple-1: data.$color-data-purple-200,
703
+ si-sys-data-sequential-purple-2: data.$color-data-purple-400,
704
+ si-sys-data-sequential-purple-3: data.$color-data-purple-500,
705
+ si-sys-data-sequential-purple-4: data.$color-data-purple-700,
706
+ si-sys-data-sequential-orchid-1: data.$color-data-orchid-200,
707
+ si-sys-data-sequential-orchid-2: data.$color-data-orchid-400,
708
+ si-sys-data-sequential-orchid-3: data.$color-data-orchid-500,
709
+ si-sys-data-sequential-orchid-4: data.$color-data-orchid-700,
710
+ si-sys-data-sequential-plum-1: data.$color-data-plum-200,
711
+ si-sys-data-sequential-plum-2: data.$color-data-plum-400,
712
+ si-sys-data-sequential-plum-3: data.$color-data-plum-500,
713
+ si-sys-data-sequential-plum-4: data.$color-data-plum-700,
714
+ si-sys-data-sequential-red-1: data.$color-data-red-200,
715
+ si-sys-data-sequential-red-2: data.$color-data-red-400,
716
+ si-sys-data-sequential-red-3: data.$color-data-red-500,
717
+ si-sys-data-sequential-red-4: data.$color-data-red-700,
718
+ si-sys-data-sequential-orange-1: data.$color-data-orange-200,
719
+ si-sys-data-sequential-orange-2: data.$color-data-orange-400,
720
+ si-sys-data-sequential-orange-3: data.$color-data-orange-500,
721
+ si-sys-data-sequential-orange-4: data.$color-data-orange-700,
722
+ si-sys-data-sequential-yellow-1: data.$color-data-yellow-200,
723
+ si-sys-data-sequential-yellow-2: data.$color-data-yellow-400,
724
+ si-sys-data-sequential-yellow-3: data.$color-data-yellow-500,
725
+ si-sys-data-sequential-yellow-4: data.$color-data-yellow-700,
726
+ si-sys-data-sequential-sand-1: data.$color-data-sand-200,
727
+ si-sys-data-sequential-sand-2: data.$color-data-sand-400,
728
+ si-sys-data-sequential-sand-3: data.$color-data-sand-500,
729
+ si-sys-data-sequential-sand-4: data.$color-data-sand-700,
730
+ si-sys-data-sequential-deep-blue-1: data.$color-data-deep-blue-200,
731
+ si-sys-data-sequential-deep-blue-2: data.$color-data-deep-blue-400,
732
+ si-sys-data-sequential-deep-blue-3: data.$color-data-deep-blue-500,
733
+ si-sys-data-sequential-deep-blue-4: data.$color-data-deep-blue-700
374
734
  );