@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.9

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 (53) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_density.scss +144 -0
  3. package/src/styles/_utilities.scss +5 -0
  4. package/src/styles/_variables.scss +1 -0
  5. package/src/styles/bootstrap/_badges.scss +3 -3
  6. package/src/styles/bootstrap/_button-group.scss +3 -3
  7. package/src/styles/bootstrap/_buttons.scss +5 -6
  8. package/src/styles/bootstrap/_card.scss +19 -12
  9. package/src/styles/bootstrap/_dropdowns.scss +13 -13
  10. package/src/styles/bootstrap/_images.scss +4 -2
  11. package/src/styles/bootstrap/_list-group.scss +1 -1
  12. package/src/styles/bootstrap/_modals.scss +11 -10
  13. package/src/styles/bootstrap/_nav.scss +3 -3
  14. package/src/styles/bootstrap/_pagination.scss +4 -4
  15. package/src/styles/bootstrap/_popovers.scss +3 -2
  16. package/src/styles/bootstrap/_reboot.scss +4 -4
  17. package/src/styles/bootstrap/_tables.scss +8 -6
  18. package/src/styles/bootstrap/_type.scss +69 -1
  19. package/src/styles/bootstrap/_utilities.scss +2 -7
  20. package/src/styles/bootstrap/_variables.scss +78 -64
  21. package/src/styles/bootstrap/forms/_form-check.scss +12 -14
  22. package/src/styles/bootstrap/forms/_form-control.scss +19 -13
  23. package/src/styles/bootstrap/forms/_form-file.scss +2 -2
  24. package/src/styles/bootstrap/forms/_form-label.scss +1 -1
  25. package/src/styles/bootstrap/forms/_form-layout.scss +2 -2
  26. package/src/styles/bootstrap/forms/_form-range.scss +0 -1
  27. package/src/styles/bootstrap/forms/_validation.scss +3 -3
  28. package/src/styles/bootstrap/mixins/_badge-text.scss +3 -3
  29. package/src/styles/bootstrap/mixins/_form-layout.scss +4 -4
  30. package/src/styles/bootstrap/mixins/_grid.scss +3 -3
  31. package/src/styles/bootstrap/mixins/_utilities.scss +14 -3
  32. package/src/styles/components/_application-header.scss +8 -9
  33. package/src/styles/components/_datatable.scss +23 -11
  34. package/src/styles/components/_drag_drop.scss +1 -1
  35. package/src/styles/components/_elevation.scss +11 -6
  36. package/src/styles/components/_layout.scss +12 -12
  37. package/src/styles/components/_list-item.scss +48 -18
  38. package/src/styles/components/_markdown.scss +8 -8
  39. package/src/styles/components/_pills.scss +4 -4
  40. package/src/styles/components/_search-bar.scss +67 -0
  41. package/src/styles/components/_skeleton.scss +1 -1
  42. package/src/styles/components/_switch.scss +4 -4
  43. package/src/styles/components/_widgets.scss +11 -9
  44. package/src/styles/mixins/_utilities.scss +259 -0
  45. package/src/styles/variables/_elevation.scss +14 -12
  46. package/src/styles/variables/_si-vars.scss +13 -7
  47. package/src/styles/variables/_sizing.scss +22 -0
  48. package/src/styles/variables/_spacers.scss +53 -25
  49. package/src/styles/variables/_system-tokens.scss +18 -18
  50. package/src/styles/variables/_typography.scss +91 -53
  51. package/src/styles/variables/_utilities.scss +64 -51
  52. package/src/theme/_theme-element.scss +36 -36
  53. package/src/theme.scss +3 -0
package/src/theme/_theme-element.scss CHANGED
@@ -255,7 +255,7 @@ $theme-element-light: (
255
255
  si-sys-background-3: base.$color-white,
256
256
  si-sys-background-4: base.$color-experimental-deep-blue-25,
257
257
  si-sys-background-hover: base.$color-light-sand,
258
- si-sys-background-selected: base.$color-sand,
258
+ si-sys-background-active: base.$color-sand,
259
259
  si-sys-background-accent: base.$color-interactive-blue-500,
260
260
  si-sys-background-accent-hover: base.$color-teal,
261
261
  si-sys-background-accent-active: base.$color-interactive-blue-700,
@@ -327,23 +327,23 @@ $theme-element-light: (
327
327
  si-sys-effects-shadow-1: base.$color-white,
328
328
  si-sys-effects-shadow-2: base.$color-light-sand,
329
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,
330
+ si-sys-data-categorical-1: data.$color-data-petrol,
331
+ si-sys-data-categorical-2: data.$color-data-turquoise-900,
332
+ si-sys-data-categorical-3: data.$color-data-green-700,
333
+ si-sys-data-categorical-4: data.$color-data-turquoise-700,
334
+ si-sys-data-categorical-5: data.$color-data-royal-blue-500,
335
+ si-sys-data-categorical-6: data.$color-data-interactive-coral-900,
336
+ si-sys-data-categorical-7: data.$color-data-purple-700,
337
+ si-sys-data-categorical-8: data.$color-data-purple-900,
338
+ si-sys-data-categorical-9: data.$color-data-orchid-700,
339
+ si-sys-data-categorical-10: data.$color-data-red-700,
340
+ si-sys-data-categorical-11: data.$color-data-plum-900,
341
+ si-sys-data-categorical-12: data.$color-data-plum-500,
342
+ si-sys-data-categorical-13: data.$color-data-royal-blue-700,
343
+ si-sys-data-categorical-14: data.$color-data-orange-900,
344
+ si-sys-data-categorical-15: data.$color-data-yellow-900,
345
+ si-sys-data-categorical-16: data.$color-data-sand-700,
346
+ si-sys-data-categorical-17: data.$color-data-deep-blue-700,
347
347
  si-sys-data-sequential-avocado-1: data.$color-data-avocado-400,
348
348
  si-sys-data-sequential-avocado-2: data.$color-data-avocado-500,
349
349
  si-sys-data-sequential-avocado-3: data.$color-data-avocado-700,
@@ -586,7 +586,7 @@ $theme-element-dark: (
586
586
  si-sys-background-3: base.$color-grayish-navy,
587
587
  si-sys-background-4: base.$color-experimental-deep-blue-850,
588
588
  si-sys-background-hover: base.$color-dark-grayish-navy,
589
- si-sys-background-selected: base.$color-grayish-navy,
589
+ si-sys-background-active: base.$color-grayish-navy,
590
590
  si-sys-background-accent: base.$color-interactive-coral,
591
591
  si-sys-background-accent-hover: base.$color-bold-green,
592
592
  si-sys-background-accent-active: base.$color-interactive-blue-700,
@@ -658,23 +658,23 @@ $theme-element-dark: (
658
658
  si-sys-effects-shadow-1: base.$color-deep-blue-800,
659
659
  si-sys-effects-shadow-2: base.$color-deep-blue-700,
660
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,
661
+ si-sys-data-categorical-1: data.$color-data-light-petrol,
662
+ si-sys-data-categorical-2: data.$color-data-bold-green,
663
+ si-sys-data-categorical-3: data.$color-data-green-400,
664
+ si-sys-data-categorical-4: data.$color-data-turquoise-100,
665
+ si-sys-data-categorical-5: data.$color-data-royal-blue-400,
666
+ si-sys-data-categorical-6: data.$color-data-interactive-coral-100,
667
+ si-sys-data-categorical-7: data.$color-data-purple-500,
668
+ si-sys-data-categorical-8: data.$color-data-purple-200,
669
+ si-sys-data-categorical-9: data.$color-data-orchid-400,
670
+ si-sys-data-categorical-10: data.$color-data-red-500,
671
+ si-sys-data-categorical-11: data.$color-data-plum-400,
672
+ si-sys-data-categorical-12: data.$color-data-plum-200,
673
+ si-sys-data-categorical-13: data.$color-data-royal-blue-200,
674
+ si-sys-data-categorical-14: data.$color-data-orange-400,
675
+ si-sys-data-categorical-15: data.$color-data-yellow-400,
676
+ si-sys-data-categorical-16: data.$color-data-sand-500,
677
+ si-sys-data-categorical-17: data.$color-data-deep-blue-500,
678
678
  si-sys-data-sequential-avocado-1: data.$color-data-avocado-200,
679
679
  si-sys-data-sequential-avocado-2: data.$color-data-avocado-400,
680
680
  si-sys-data-sequential-avocado-3: data.$color-data-avocado-500,
package/src/theme.scss CHANGED
@@ -21,6 +21,7 @@ $_themes: () !default;
21
21
 
22
22
  // Load Bootstrap
23
23
  @use 'styles/bootstrap';
24
+ @use 'styles/utilities';
24
25
 
25
26
  // Component extensions
26
27
  @use 'styles/components/application-header';
@@ -35,6 +36,7 @@ $_themes: () !default;
35
36
  @use 'styles/components/list-item';
36
37
  @use 'styles/components/pills';
37
38
  @use 'styles/components/scrollbar';
39
+ @use 'styles/components/search-bar';
38
40
  @use 'styles/components/skeleton';
39
41
  @use 'styles/components/switch';
40
42
  @use 'styles/components/system-banner';
@@ -48,6 +50,7 @@ $_themes: () !default;
48
50
  // theming
49
51
  @use 'styles/themes';
50
52
  @use 'theme/theme-element';
53
+ @use 'styles/density';
51
54
 
52
55
  @include themes.configure($element-theme-default, $element-themes, $element-theme-root-selector);
53
56
  @include themes.make-theme(theme-element.$theme-element-light, 'element');