@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/styles/components/_links.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../variables/semantic-tokens';
1
+ @use '../variables/system-tokens';
2
2
  @use '../variables/si-vars';
3
3
 
4
4
  @use 'sass:math';
@@ -10,7 +10,7 @@ $si-link-icon-line-height: math.div(14em, 16);
10
10
  $si-link-icon-spacing: math.div(4em, 16);
11
11
 
12
12
  a:active {
13
- color: semantic-tokens.$element-action-primary-active;
13
+ color: system-tokens.$si-sys-text-accent-active;
14
14
  text-decoration: underline;
15
15
  }
16
16
 
package/src/styles/components/_list-item.scss CHANGED
@@ -49,7 +49,7 @@ ol:has(.list-item) {
49
49
 
50
50
  .list-item-timestamp {
51
51
  grid-area: timestamp;
52
- color: variables.$element-text-secondary;
52
+ color: variables.$si-sys-text-secondary;
53
53
  margin-block-end: 0;
54
54
  }
55
55
 
@@ -79,7 +79,7 @@ ol:has(.list-item) {
79
79
  block-size: 0.375rem;
80
80
  inline-size: 0.375rem;
81
81
  border-radius: 50%;
82
- background-color: variables.$element-ui-1;
82
+ background-color: variables.$si-sys-background-inverse;
83
83
  inset-inline-start: -0.625rem;
84
84
  inset-block-start: 50%;
85
85
  translate: 0 -50%;
@@ -102,11 +102,11 @@ ol:has(.list-item) {
102
102
  display: flex;
103
103
  flex-direction: row;
104
104
  align-items: center;
105
- color: variables.$element-text-secondary;
105
+ color: variables.$si-sys-text-secondary;
106
106
  margin-block-end: map.get(variables.$spacers, 4);
107
107
 
108
108
  a:not(:hover) {
109
- color: variables.$element-text-secondary;
109
+ color: variables.$si-sys-text-secondary;
110
110
  }
111
111
 
112
112
  .badge {
@@ -117,7 +117,7 @@ ol:has(.list-item) {
117
117
  inline-size: 0.125rem;
118
118
  block-size: 0.125rem;
119
119
  border-radius: 50%;
120
- background-color: variables.$element-text-secondary;
120
+ background-color: variables.$si-sys-text-secondary;
121
121
  margin-inline: map.get(variables.$spacers, 2);
122
122
  }
123
123
  }
@@ -134,11 +134,11 @@ ol:has(.list-item) {
134
134
  color: inherit;
135
135
 
136
136
  &:hover {
137
- background-color: variables.$element-base-1-hover;
137
+ background-color: variables.$si-sys-background-hover;
138
138
  }
139
139
 
140
140
  &:active {
141
- background-color: variables.$element-base-1-selected;
141
+ background-color: variables.$si-sys-background-selected;
142
142
  }
143
143
 
144
144
  &:focus-visible {
package/src/styles/components/_markdown.scss CHANGED
@@ -1,6 +1,5 @@
1
- @use '../variables';
2
-
3
1
  @use 'sass:map';
2
+ @use '../variables';
4
3
 
5
4
  .markdown-content {
6
5
  max-inline-size: 100%;
@@ -8,13 +7,13 @@
8
7
  word-wrap: break-word;
9
8
  overflow-wrap: break-word;
10
9
  word-break: break-word;
10
+ line-height: variables.px-to-ratio(variables.$si-font-size-body, 20px);
11
11
 
12
12
  strong {
13
13
  font-weight: variables.$si-font-weight-semibold;
14
14
  }
15
15
 
16
- ul,
17
- ol {
16
+ :is(ul, ol) {
18
17
  max-inline-size: 100%;
19
18
  overflow-wrap: break-word;
20
19
 
@@ -33,11 +32,24 @@
33
32
  overflow-wrap: break-word;
34
33
  }
35
34
 
35
+ .task-list-item {
36
+ list-style: none;
37
+
38
+ .form-check-input {
39
+ margin-inline-start: calc(-1rem - map.get(variables.$spacers, 2));
40
+ margin-inline-end: map.get(variables.$spacers, 2);
41
+ vertical-align: text-bottom;
42
+ pointer-events: none;
43
+ }
44
+ }
45
+
36
46
  pre {
37
47
  code {
48
+ color: inherit;
38
49
  background-color: transparent;
39
50
  padding-block: 0;
40
51
  padding-inline: 0;
52
+ border: 0;
41
53
  border-radius: 0;
42
54
  }
43
55
 
@@ -51,7 +63,7 @@
51
63
  }
52
64
 
53
65
  blockquote {
54
- border-inline-start: 4px solid variables.$element-ui-3;
66
+ border-inline-start: 4px solid variables.$si-sys-border-4;
55
67
  padding-inline-start: map.get(variables.$spacers, 4);
56
68
 
57
69
  p {
@@ -72,24 +84,26 @@
72
84
  table {
73
85
  inline-size: max-content;
74
86
  max-inline-size: 100%;
75
- // stylelint-disable-next-line declaration-no-important
76
- margin-block-start: map.get(variables.$spacers, 6) !important;
77
- // stylelint-disable-next-line declaration-no-important
78
- margin-block-end: 0 !important;
79
- overflow: auto;
80
- display: block;
87
+ align-self: stretch;
88
+ margin-block-start: 0;
89
+ margin-block-end: 0;
90
+ display: table;
91
+ table-layout: auto;
81
92
  white-space: nowrap;
82
93
 
83
- ul,
84
- ol {
94
+ :is(ul, ol) {
85
95
  // stylelint-disable-next-line declaration-no-important
86
96
  padding-inline-start: map.get(variables.$spacers, 6) !important;
87
97
  }
98
+
99
+ td:last-child,
100
+ th:last-child {
101
+ inline-size: 100%;
102
+ }
88
103
  }
89
104
 
90
105
  table td,
91
106
  table th {
92
- max-inline-size: 200px;
93
107
  overflow: hidden;
94
108
  text-overflow: ellipsis;
95
109
 
package/src/styles/components/_pills.scss CHANGED
@@ -6,19 +6,19 @@
6
6
  display: flex;
7
7
  align-items: center;
8
8
  border-radius: 0.75rem;
9
- background: var(--filter-pill-background-color, variables.$element-base-0);
9
+ background: var(--filter-pill-background-color, variables.$si-sys-background-0);
10
10
  padding-inline: map.get(variables.$spacers, 4);
11
11
  max-inline-size: 100%;
12
12
 
13
13
  &.active {
14
- background: variables.$element-base-1-selected;
14
+ background: variables.$si-sys-background-selected;
15
15
  }
16
16
 
17
17
  &.pill-interactive {
18
18
  cursor: pointer;
19
19
 
20
20
  &:hover {
21
- background: variables.$element-action-secondary-hover;
21
+ background: variables.$si-sys-background-accent-secondary-hover;
22
22
  }
23
23
  }
24
24
 
package/src/styles/components/_scrollbar.scss CHANGED
@@ -1,10 +1,10 @@
1
- @use '../variables/semantic-tokens';
1
+ @use '../variables/system-tokens';
2
2
 
3
3
  html {
4
4
  scrollbar-color: color-mix(
5
5
  in srgb,
6
- semantic-tokens.$element-ui-2 60%,
7
- semantic-tokens.$element-base-1
6
+ system-tokens.$si-sys-border-2 60%,
7
+ system-tokens.$si-sys-background-1
8
8
  )
9
- semantic-tokens.$element-base-1;
9
+ system-tokens.$si-sys-background-1;
10
10
  }
package/src/styles/components/_skeleton.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../variables/animations';
2
2
  @use '../variables/semantic-tokens';
3
+ @use '../variables/system-tokens';
3
4
 
4
5
  @keyframes shimmer {
5
6
  to {
@@ -12,9 +13,9 @@
12
13
  min-block-size: 1em;
13
14
  background: linear-gradient(
14
15
  90deg,
15
- semantic-tokens.$element-base-1-hover 0%,
16
- semantic-tokens.$element-base-1-selected 25%,
17
- semantic-tokens.$element-base-1-hover 50%
16
+ system-tokens.$si-sys-background-hover 0%,
17
+ system-tokens.$si-sys-background-selected 25%,
18
+ system-tokens.$si-sys-background-hover 50%
18
19
  );
19
20
  background-size: 200% 100%;
20
21
  background-position-x: 100%;
package/src/styles/components/_switch.scss CHANGED
@@ -5,12 +5,10 @@
5
5
  $si-switch-size: 1.25rem !default;
6
6
  $si-switch-inline-size: calc(2 * #{$si-switch-size});
7
7
  $si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
8
- $si-switch-background-off-color: variables.$element-ui-4 !default;
9
- $si-switch-background-on-color: variables.$element-ui-0 !default;
10
- $si-switch-background-disabled-color: variables.$element-ui-3 !default;
8
+ $si-switch-background-off-color: variables.$si-sys-background-1 !default;
9
+ $si-switch-background-on-color: variables.$si-sys-background-accent !default;
11
10
  $si-switch-slider-margin: 0.25rem !default;
12
- $si-switch-slider-off-color: variables.$element-ui-2 !default;
13
- $si-switch-slider-on-color: variables.$element-ui-5 !default;
11
+ $si-switch-slider-on-color: variables.$si-sys-text-on-accent !default;
14
12
  $si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
15
13
 
16
14
  $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin});
@@ -26,9 +24,9 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
26
24
  margin-inline-start: calc(-1 * $si-switch-inline-spacing);
27
25
  inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
28
26
  block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
29
- background-color: variables.$element-base-1;
27
+ background-color: variables.$si-sys-background-1;
30
28
  transition: $si-switch-transition-length;
31
- border: 1px solid variables.$element-ui-2;
29
+ border: 1px solid variables.$si-sys-border-2;
32
30
  border-radius: #{$si-switch-size};
33
31
  appearance: none;
34
32
 
@@ -39,7 +37,7 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
39
37
  inline-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
40
38
  inset-inline-start: calc(#{$si-switch-slider-margin} - 1px);
41
39
  inset-block-end: calc(#{$si-switch-slider-margin} - 1px);
42
- background-color: variables.$element-text-secondary;
40
+ background-color: variables.$si-sys-text-secondary;
43
41
  transition: $si-switch-transition-length;
44
42
  border-radius: 50%;
45
43
  }
@@ -49,23 +47,23 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
49
47
  }
50
48
 
51
49
  &:hover {
52
- background-color: variables.$element-base-1-hover;
50
+ background-color: variables.$si-sys-background-hover;
53
51
  }
54
52
 
55
53
  &:is(:checked, .checked) {
56
- background-color: variables.$element-action-primary;
54
+ background-color: variables.$si-sys-background-accent;
57
55
 
58
56
  &:hover {
59
- background-color: variables.$element-action-primary-hover;
57
+ background-color: variables.$si-sys-background-accent-hover;
60
58
  }
61
59
 
62
60
  &:active {
63
- background-color: variables.$element-action-primary-active;
61
+ background-color: variables.$si-sys-background-accent-active;
64
62
  }
65
63
 
66
64
  &:is(:disabled, .disabled) {
67
- background-color: variables.$element-action-primary;
68
- border-color: variables.$element-action-primary;
65
+ background-color: variables.$si-sys-background-accent;
66
+ border-color: variables.$si-sys-border-accent;
69
67
  }
70
68
  }
71
69
 
package/src/styles/components/_widgets.scss CHANGED
@@ -54,5 +54,5 @@
54
54
  .si-timeline-widget-item-lower-line {
55
55
  inline-size: 1px;
56
56
  block-size: 100%;
57
- background-color: variables.$element-ui-4;
57
+ background-color: variables.$si-sys-border-4;
58
58
  }
package/src/styles/variables/_focus.scss CHANGED
@@ -1,8 +1,9 @@
1
+ @use 'system-tokens';
1
2
  @use 'semantic-tokens';
2
3
 
3
4
  // Building focus< with outline
4
5
  $focus-style-outline: semantic-tokens.$element-button-focus-width solid
5
- semantic-tokens.$element-focus-default;
6
+ system-tokens.$si-sys-effects-focus;
6
7
  $focus-style-outline-offset: semantic-tokens.$element-button-focus-overlay-width;
7
8
  $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-focus-width});
8
9
 
@@ -51,5 +52,5 @@ $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-
51
52
  @return inset 0 0 0 semantic-tokens.$element-button-focus-width $focus-color;
52
53
  }
53
54
 
54
- $si-focus-styling-box-shadow: make-focus(semantic-tokens.$element-focus-default);
55
- $si-focus-styling-inside-box-shadow: make-focus-inside(semantic-tokens.$element-focus-default);
55
+ $si-focus-styling-box-shadow: make-focus(system-tokens.$si-sys-effects-focus);
56
+ $si-focus-styling-inside-box-shadow: make-focus-inside(system-tokens.$si-sys-effects-focus);
package/src/styles/variables/_system-tokens.scss ADDED
@@ -0,0 +1,180 @@
1
+ $si-sys-background-0: var(--si-sys-background-0);
2
+ $si-sys-background-1: var(--si-sys-background-1);
3
+ $si-sys-background-2: var(--si-sys-background-2);
4
+ $si-sys-background-3: var(--si-sys-background-3);
5
+ $si-sys-background-4: var(--si-sys-background-4);
6
+ $si-sys-background-accent: var(--si-sys-background-accent);
7
+ $si-sys-background-accent-active: var(--si-sys-background-accent-active);
8
+ $si-sys-background-accent-hover: var(--si-sys-background-accent-hover);
9
+ $si-sys-background-accent-secondary: var(--si-sys-background-accent-secondary);
10
+ $si-sys-background-accent-secondary-active: var(--si-sys-background-accent-secondary-active);
11
+ $si-sys-background-accent-secondary-hover: var(--si-sys-background-accent-secondary-hover);
12
+ $si-sys-background-caution: var(--si-sys-background-caution);
13
+ $si-sys-background-caution-active: var(--si-sys-background-caution-active);
14
+ $si-sys-background-caution-hover: var(--si-sys-background-caution-hover);
15
+ $si-sys-background-caution-subtle: var(--si-sys-background-caution-subtle);
16
+ $si-sys-background-critical: var(--si-sys-background-critical);
17
+ $si-sys-background-critical-active: var(--si-sys-background-critical-active);
18
+ $si-sys-background-critical-hover: var(--si-sys-background-critical-hover);
19
+ $si-sys-background-critical-subtle: var(--si-sys-background-critical-subtle);
20
+ $si-sys-background-danger: var(--si-sys-background-danger);
21
+ $si-sys-background-danger-active: var(--si-sys-background-danger-active);
22
+ $si-sys-background-danger-hover: var(--si-sys-background-danger-hover);
23
+ $si-sys-background-danger-secondary: var(--si-sys-background-danger-secondary);
24
+ $si-sys-background-danger-subtle: var(--si-sys-background-danger-subtle);
25
+ $si-sys-background-hover: var(--si-sys-background-hover);
26
+ $si-sys-background-information: var(--si-sys-background-information);
27
+ $si-sys-background-information-active: var(--si-sys-background-information-active);
28
+ $si-sys-background-information-hover: var(--si-sys-background-information-hover);
29
+ $si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
30
+ $si-sys-background-inverse: var(--si-sys-background-inverse);
31
+ $si-sys-background-neutral: var(--si-sys-background-neutral);
32
+ $si-sys-background-selected: var(--si-sys-background-selected);
33
+ $si-sys-background-success: var(--si-sys-background-success);
34
+ $si-sys-background-success-active: var(--si-sys-background-success-active);
35
+ $si-sys-background-success-hover: var(--si-sys-background-success-hover);
36
+ $si-sys-background-success-subtle: var(--si-sys-background-success-subtle);
37
+ $si-sys-background-warning: var(--si-sys-background-warning);
38
+ $si-sys-background-warning-active: var(--si-sys-background-warning-active);
39
+ $si-sys-background-warning-hover: var(--si-sys-background-warning-hover);
40
+ $si-sys-background-warning-secondary: var(--si-sys-background-warning-secondary);
41
+ $si-sys-background-warning-subtle: var(--si-sys-background-warning-subtle);
42
+ $si-sys-border-1: var(--si-sys-border-1);
43
+ $si-sys-border-2: var(--si-sys-border-2);
44
+ $si-sys-border-3: var(--si-sys-border-3);
45
+ $si-sys-border-4: var(--si-sys-border-4);
46
+ $si-sys-border-accent: var(--si-sys-border-accent);
47
+ $si-sys-border-accent-active: var(--si-sys-border-accent-active);
48
+ $si-sys-border-accent-hover: var(--si-sys-border-accent-hover);
49
+ $si-sys-border-caution: var(--si-sys-border-caution);
50
+ $si-sys-border-critical: var(--si-sys-border-critical);
51
+ $si-sys-border-danger: var(--si-sys-border-danger);
52
+ $si-sys-border-danger-secondary: var(--si-sys-border-danger-secondary);
53
+ $si-sys-border-information: var(--si-sys-border-information);
54
+ $si-sys-border-inverse: var(--si-sys-border-inverse);
55
+ $si-sys-border-neutral: var(--si-sys-border-neutral);
56
+ $si-sys-border-success: var(--si-sys-border-success);
57
+ $si-sys-border-warning: var(--si-sys-border-warning);
58
+ $si-sys-border-warning-secondary: var(--si-sys-border-warning-secondary);
59
+ $si-sys-code-1: var(--si-sys-code-1);
60
+ $si-sys-code-10: var(--si-sys-code-10);
61
+ $si-sys-code-11: var(--si-sys-code-11);
62
+ $si-sys-code-12: var(--si-sys-code-12);
63
+ $si-sys-code-2: var(--si-sys-code-2);
64
+ $si-sys-code-3: var(--si-sys-code-3);
65
+ $si-sys-code-4: var(--si-sys-code-4);
66
+ $si-sys-code-5: var(--si-sys-code-5);
67
+ $si-sys-code-6: var(--si-sys-code-6);
68
+ $si-sys-code-7: var(--si-sys-code-7);
69
+ $si-sys-code-8: var(--si-sys-code-8);
70
+ $si-sys-code-9: var(--si-sys-code-9);
71
+ $si-sys-data-categorial-1: var(--si-sys-data-categorial-1);
72
+ $si-sys-data-categorial-10: var(--si-sys-data-categorial-10);
73
+ $si-sys-data-categorial-11: var(--si-sys-data-categorial-11);
74
+ $si-sys-data-categorial-12: var(--si-sys-data-categorial-12);
75
+ $si-sys-data-categorial-13: var(--si-sys-data-categorial-13);
76
+ $si-sys-data-categorial-14: var(--si-sys-data-categorial-14);
77
+ $si-sys-data-categorial-15: var(--si-sys-data-categorial-15);
78
+ $si-sys-data-categorial-16: var(--si-sys-data-categorial-16);
79
+ $si-sys-data-categorial-17: var(--si-sys-data-categorial-17);
80
+ $si-sys-data-categorial-2: var(--si-sys-data-categorial-2);
81
+ $si-sys-data-categorial-3: var(--si-sys-data-categorial-3);
82
+ $si-sys-data-categorial-4: var(--si-sys-data-categorial-4);
83
+ $si-sys-data-categorial-5: var(--si-sys-data-categorial-5);
84
+ $si-sys-data-categorial-6: var(--si-sys-data-categorial-6);
85
+ $si-sys-data-categorial-7: var(--si-sys-data-categorial-7);
86
+ $si-sys-data-categorial-8: var(--si-sys-data-categorial-8);
87
+ $si-sys-data-categorial-9: var(--si-sys-data-categorial-9);
88
+ $si-sys-data-rating-average: var(--si-sys-data-rating-average);
89
+ $si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
90
+ $si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);
91
+ $si-sys-data-rating-good: var(--si-sys-data-rating-good);
92
+ $si-sys-data-rating-poor: var(--si-sys-data-rating-poor);
93
+ $si-sys-data-sequential-avocado-1: var(--si-sys-data-sequential-avocado-1);
94
+ $si-sys-data-sequential-avocado-2: var(--si-sys-data-sequential-avocado-2);
95
+ $si-sys-data-sequential-avocado-3: var(--si-sys-data-sequential-avocado-3);
96
+ $si-sys-data-sequential-avocado-4: var(--si-sys-data-sequential-avocado-4);
97
+ $si-sys-data-sequential-blue-1: var(--si-sys-data-sequential-blue-1);
98
+ $si-sys-data-sequential-blue-2: var(--si-sys-data-sequential-blue-2);
99
+ $si-sys-data-sequential-blue-3: var(--si-sys-data-sequential-blue-3);
100
+ $si-sys-data-sequential-blue-4: var(--si-sys-data-sequential-blue-4);
101
+ $si-sys-data-sequential-deep-blue-1: var(--si-sys-data-sequential-deep-blue-1);
102
+ $si-sys-data-sequential-deep-blue-2: var(--si-sys-data-sequential-deep-blue-2);
103
+ $si-sys-data-sequential-deep-blue-3: var(--si-sys-data-sequential-deep-blue-3);
104
+ $si-sys-data-sequential-deep-blue-4: var(--si-sys-data-sequential-deep-blue-4);
105
+ $si-sys-data-sequential-green-1: var(--si-sys-data-sequential-green-1);
106
+ $si-sys-data-sequential-green-2: var(--si-sys-data-sequential-green-2);
107
+ $si-sys-data-sequential-green-3: var(--si-sys-data-sequential-green-3);
108
+ $si-sys-data-sequential-green-4: var(--si-sys-data-sequential-green-4);
109
+ $si-sys-data-sequential-interactive-coral-1: var(--si-sys-data-sequential-interactive-coral-1);
110
+ $si-sys-data-sequential-interactive-coral-2: var(--si-sys-data-sequential-interactive-coral-2);
111
+ $si-sys-data-sequential-interactive-coral-3: var(--si-sys-data-sequential-interactive-coral-3);
112
+ $si-sys-data-sequential-interactive-coral-4: var(--si-sys-data-sequential-interactive-coral-4);
113
+ $si-sys-data-sequential-orange-1: var(--si-sys-data-sequential-orange-1);
114
+ $si-sys-data-sequential-orange-2: var(--si-sys-data-sequential-orange-2);
115
+ $si-sys-data-sequential-orange-3: var(--si-sys-data-sequential-orange-3);
116
+ $si-sys-data-sequential-orange-4: var(--si-sys-data-sequential-orange-4);
117
+ $si-sys-data-sequential-orchid-1: var(--si-sys-data-sequential-orchid-1);
118
+ $si-sys-data-sequential-orchid-2: var(--si-sys-data-sequential-orchid-2);
119
+ $si-sys-data-sequential-orchid-3: var(--si-sys-data-sequential-orchid-3);
120
+ $si-sys-data-sequential-orchid-4: var(--si-sys-data-sequential-orchid-4);
121
+ $si-sys-data-sequential-plum-1: var(--si-sys-data-sequential-plum-1);
122
+ $si-sys-data-sequential-plum-2: var(--si-sys-data-sequential-plum-2);
123
+ $si-sys-data-sequential-plum-3: var(--si-sys-data-sequential-plum-3);
124
+ $si-sys-data-sequential-plum-4: var(--si-sys-data-sequential-plum-4);
125
+ $si-sys-data-sequential-purple-1: var(--si-sys-data-sequential-purple-1);
126
+ $si-sys-data-sequential-purple-2: var(--si-sys-data-sequential-purple-2);
127
+ $si-sys-data-sequential-purple-3: var(--si-sys-data-sequential-purple-3);
128
+ $si-sys-data-sequential-purple-4: var(--si-sys-data-sequential-purple-4);
129
+ $si-sys-data-sequential-red-1: var(--si-sys-data-sequential-red-1);
130
+ $si-sys-data-sequential-red-2: var(--si-sys-data-sequential-red-2);
131
+ $si-sys-data-sequential-red-3: var(--si-sys-data-sequential-red-3);
132
+ $si-sys-data-sequential-red-4: var(--si-sys-data-sequential-red-4);
133
+ $si-sys-data-sequential-royal-blue-1: var(--si-sys-data-sequential-royal-blue-1);
134
+ $si-sys-data-sequential-royal-blue-2: var(--si-sys-data-sequential-royal-blue-2);
135
+ $si-sys-data-sequential-royal-blue-3: var(--si-sys-data-sequential-royal-blue-3);
136
+ $si-sys-data-sequential-royal-blue-4: var(--si-sys-data-sequential-royal-blue-4);
137
+ $si-sys-data-sequential-sand-1: var(--si-sys-data-sequential-sand-1);
138
+ $si-sys-data-sequential-sand-2: var(--si-sys-data-sequential-sand-2);
139
+ $si-sys-data-sequential-sand-3: var(--si-sys-data-sequential-sand-3);
140
+ $si-sys-data-sequential-sand-4: var(--si-sys-data-sequential-sand-4);
141
+ $si-sys-data-sequential-turquoise-1: var(--si-sys-data-sequential-turquoise-1);
142
+ $si-sys-data-sequential-turquoise-2: var(--si-sys-data-sequential-turquoise-2);
143
+ $si-sys-data-sequential-turquoise-3: var(--si-sys-data-sequential-turquoise-3);
144
+ $si-sys-data-sequential-turquoise-4: var(--si-sys-data-sequential-turquoise-4);
145
+ $si-sys-data-sequential-yellow-1: var(--si-sys-data-sequential-yellow-1);
146
+ $si-sys-data-sequential-yellow-2: var(--si-sys-data-sequential-yellow-2);
147
+ $si-sys-data-sequential-yellow-3: var(--si-sys-data-sequential-yellow-3);
148
+ $si-sys-data-sequential-yellow-4: var(--si-sys-data-sequential-yellow-4);
149
+ $si-sys-effects-backdrop: var(--si-sys-effects-backdrop);
150
+ $si-sys-effects-focus: var(--si-sys-effects-focus);
151
+ $si-sys-effects-logo: var(--si-sys-effects-logo);
152
+ $si-sys-effects-shadow-1: var(--si-sys-effects-shadow-1);
153
+ $si-sys-effects-shadow-2: var(--si-sys-effects-shadow-2);
154
+ $si-sys-effects-shadow-3: var(--si-sys-effects-shadow-3);
155
+ $si-sys-effects-shadow-4: var(--si-sys-effects-shadow-4);
156
+ $si-sys-text-accent: var(--si-sys-text-accent);
157
+ $si-sys-text-accent-active: var(--si-sys-text-accent-active);
158
+ $si-sys-text-accent-hover: var(--si-sys-text-accent-hover);
159
+ $si-sys-text-caution: var(--si-sys-text-caution);
160
+ $si-sys-text-critical: var(--si-sys-text-critical);
161
+ $si-sys-text-danger: var(--si-sys-text-danger);
162
+ $si-sys-text-disabled: var(--si-sys-text-disabled);
163
+ $si-sys-text-information: var(--si-sys-text-information);
164
+ $si-sys-text-inverse: var(--si-sys-text-inverse);
165
+ $si-sys-text-on-accent: var(--si-sys-text-on-accent);
166
+ $si-sys-text-on-accent-secondary: var(--si-sys-text-on-accent-secondary);
167
+ $si-sys-text-on-accent-secondary-active: var(--si-sys-text-on-accent-secondary-active);
168
+ $si-sys-text-on-accent-secondary-hover: var(--si-sys-text-on-accent-secondary-hover);
169
+ $si-sys-text-on-caution: var(--si-sys-text-on-caution);
170
+ $si-sys-text-on-critical: var(--si-sys-text-on-critical);
171
+ $si-sys-text-on-danger: var(--si-sys-text-on-danger);
172
+ $si-sys-text-on-danger-secondary: var(--si-sys-text-on-danger-secondary);
173
+ $si-sys-text-on-information: var(--si-sys-text-on-information);
174
+ $si-sys-text-on-success: var(--si-sys-text-on-success);
175
+ $si-sys-text-on-warning: var(--si-sys-text-on-warning);
176
+ $si-sys-text-on-warning-secondary: var(--si-sys-text-on-warning-secondary);
177
+ $si-sys-text-primary: var(--si-sys-text-primary);
178
+ $si-sys-text-secondary: var(--si-sys-text-secondary);
179
+ $si-sys-text-success: var(--si-sys-text-success);
180
+ $si-sys-text-warning: var(--si-sys-text-warning);