@progressio_resources/gravity-design-system 1.1.13 → 1.1.15

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 (37) hide show
  1. package/esm2020/lib/components/gravity-attach-file/gravity-attach-file.component.mjs +2 -2
  2. package/esm2020/lib/components/gravity-button/gravity-button.component.mjs +2 -2
  3. package/esm2020/lib/components/gravity-calendar/gravity-calendar.component.mjs +35 -23
  4. package/esm2020/lib/components/gravity-checkbox/gravity-checkbox.component.mjs +2 -2
  5. package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +3 -3
  6. package/esm2020/lib/components/gravity-icon/gravity-icon.component.mjs +3 -3
  7. package/esm2020/lib/components/gravity-notification/gravity-notification.component.mjs +3 -3
  8. package/esm2020/lib/components/gravity-notification-instant/gravity-notification-instant-container.component.mjs +3 -3
  9. package/esm2020/lib/components/gravity-radio-button/gravity-radio-button.component.mjs +2 -2
  10. package/esm2020/lib/components/gravity-switch/gravity-switch.component.mjs +2 -2
  11. package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +4 -3
  12. package/fesm2015/progressio_resources-gravity-design-system.mjs +55 -42
  13. package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
  14. package/fesm2020/progressio_resources-gravity-design-system.mjs +55 -42
  15. package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
  16. package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +15 -23
  17. package/package.json +1 -1
  18. package/src/lib/assets/icons/lock.svg +2 -2
  19. package/src/lib/assets/json/icons.json +3 -11
  20. package/src/lib/styles/_responsive.scss +1 -1
  21. package/src/lib/styles/components/_card_highlight.scss +3 -3
  22. package/src/lib/styles/components/_datepicker.scss +3 -3
  23. package/src/lib/styles/{fundamentals → foundations}/colors/primitives/_hero.primitives.scss +26 -24
  24. package/src/lib/styles/{fundamentals → foundations}/colors/themes/_hero.theme.scss +348 -347
  25. package/src/lib/styles/{fundamentals → foundations}/colors/tokens/_hero.tokens.scss +372 -371
  26. package/src/lib/styles/foundations/elevation/_hero.elevation.scss +22 -0
  27. package/src/lib/styles/foundations/grids/_grids.scss +158 -0
  28. package/src/lib/styles/gravity-design-system.scss +14 -7
  29. package/src/lib/styles/overwrite/bootstrap/_modal.scss +1 -1
  30. package/src/lib/styles/themes/_hero.scss +4 -0
  31. package/src/lib/assets/icons/radio-off.svg +0 -3
  32. package/src/lib/assets/icons/radio-on.svg +0 -3
  33. package/src/lib/styles/fundamentals/grids/grids.scss +0 -6
  34. /package/src/lib/styles/{fundamentals → foundations}/border-radius/_hero.border-radius.scss +0 -0
  35. /package/src/lib/styles/{fundamentals/breakpoints/breakpoints.scss → foundations/breakpoints/_breakpoints.scss} +0 -0
  36. /package/src/lib/styles/{fundamentals/spacing/spacing.scss → foundations/spacing/_spacing.scss} +0 -0
  37. /package/src/lib/styles/{fundamentals → foundations}/typography/_hero.typography.scss +0 -0
@@ -1,458 +1,459 @@
1
1
  @import "../themes/hero.theme";
2
2
 
3
3
  .hero-light-theme {
4
- // text-field
5
- --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
6
- --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
7
- --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
8
- --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
9
- --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-light};
10
- --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-light};
11
- --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-light};
12
- --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
13
- --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
14
- --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
15
- --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-light};
16
- --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-light};
17
- --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-light};
18
- --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-light};
19
- --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
20
- --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
21
- --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
22
- --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
23
- --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
24
- --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-light};
25
- --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
26
- --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
27
- --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
4
+ // button-primary
5
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-light};
6
+ --bg-button-active-primary: #{$bg-button-active-primary-light};
7
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
8
+ --bg-button-hover-primary: #{$bg-button-hover-primary-light};
9
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
10
+ --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
28
11
 
29
- // dialog
30
- --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
31
- --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
32
- --bg-dialog-primary: #{$bg-dialog-primary-light};
33
- --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
34
- --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
35
- --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
36
- --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
37
- --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
12
+ // button-secondary
13
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
14
+ --outline-button-active-secondary: #{$outline-button-active-secondary-light};
15
+ --bg-button-active-secondary: #{$bg-button-active-secondary-light};
16
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
17
+ --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
18
+ --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
19
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
20
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
21
+ --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
38
22
 
39
- // divider
40
- --divider-primary: #{$divider-primary-light};
23
+ // button-tertiary
24
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
25
+ --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
26
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
27
+ --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
28
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
29
+ --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
41
30
 
42
- // menu
43
- --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
44
- --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
45
- --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
46
- --divider-menu-primary: #{$divider-menu-primary-light};
47
- --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
48
- --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
49
- --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
50
- --bg-menu-primary: #{$bg-menu-primary-light};
51
- --on-bg-menu-primary: #{$on-bg-menu-primary-light};
31
+ // button-positive
32
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
33
+ --bg-button-active-positive: #{$bg-button-active-positive-light};
34
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
35
+ --bg-button-hover-positive: #{$bg-button-hover-positive-light};
36
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
37
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
38
+
39
+ // button-negative
40
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
41
+ --bg-button-active-negative: #{$bg-button-active-negative-light};
42
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
43
+ --bg-button-hover-negative: #{$bg-button-hover-negative-light};
44
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
45
+ --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
46
+
47
+ // button-alternative
48
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
49
+ --bg-button-active-alternative: #{$bg-button-active-alternative-light};
50
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
51
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
52
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
53
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
54
+
55
+ // disabled-status
56
+ --on-bg-disabled: #{$on-bg-disabled-light};
57
+ --bg-disabled: #{$bg-disabled-light};
58
+ --outline-disabled: #{$outline-disabled-light};
52
59
 
53
60
  // surface
54
- --surface-secondary: #{$surface-secondary-light};
55
61
  --surface-primary: #{$surface-primary-light};
62
+ --surface-secondary: #{$surface-secondary-light};
56
63
 
57
- // button-primary
58
- --on-bg-button-active-primary: #{$on-bg-button-active-primary-light};
59
- --bg-button-active-primary: #{$bg-button-active-primary-light};
60
- --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
61
- --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
62
- --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
63
- --bg-button-hover-primary: #{$bg-button-hover-primary-light};
64
+ // text
65
+ --text-primary: #{$text-primary-light};
64
66
 
65
- // link
66
- --link-pressed-primary: #{$link-pressed-primary-light};
67
- --link-disabled-primary: #{$link-disabled-primary-light};
68
- --bg-link-hover-primary: #{$bg-link-hover-primary-light};
69
- --link-hover-primary: #{$link-hover-primary-light};
70
- --link-active-primary: #{$link-active-primary-light};
67
+ // divider
68
+ --divider-primary: #{$divider-primary-light};
69
+
70
+ // logo
71
+ --logo-primary: #{$logo-primary-light};
72
+
73
+ // highlight
74
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
75
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
76
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
77
+ --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
78
+
79
+ // system
80
+ --positive-primary: #{$positive-primary-light};
81
+ --negative-primary: #{$negative-primary-light};
82
+ --cta-primary: #{$bg-button-active-primary-light};
83
+ --alternative-primary: #{$alternative-primary-light};
71
84
 
72
85
  // calendar
86
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
73
87
  --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-light};
74
- --bg-calender-primary: #{$bg-calender-primary-light};
75
- --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
76
- --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
77
88
  --on-bg-calender-primary: #{$on-bg-calender-primary-light};
78
- --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
79
- --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
89
+ --bg-calender-primary: #{$bg-calender-primary-light};
90
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
91
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
80
92
  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
93
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
81
94
  --number-calender-active-primary: #{$number-calender-active-primary-light};
95
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
82
96
  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
97
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
83
98
  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
84
- --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
85
- --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
86
99
  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
87
100
 
88
- // switch
89
- --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
90
- --bg-switch-on-primary: #{$bg-switch-on-primary-light};
91
- --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
92
- --bg-switch-off-primary: #{$bg-switch-off-primary-light};
93
- --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
94
- --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
101
+ // checkbox
102
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
103
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
104
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
95
105
 
96
- // dropdown-list
97
- --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
98
- --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
99
- --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
100
- --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
101
- --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-light};
102
- --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
103
- --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
106
+ // radio button
107
+ --radio-button-off-primary: #{$radio-button-off-primary-light};
108
+ --radio-button-on-primary: #{$radio-button-on-primary-light};
104
109
 
105
- // notification
106
- --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
107
- --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
108
- --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
109
- --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
110
- --notification-success-highlight-primary: #{$notification-success-highlight-primary-light};
111
- --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
112
- --on-bg-notification-primary: #{$on-bg-notification-primary-light};
113
- --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
114
- --bg-notification-primary: #{$bg-notification-primary-light};
115
- --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
116
- --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
110
+ // stepper
111
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
112
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
113
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
114
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
115
+ --text-stepper-current-primary: #{$text-stepper-current-primary-light};
116
+ --line-stepper-current-primary: #{$line-stepper-current-primary-light};
117
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
118
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
119
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
120
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
121
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
122
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
117
123
 
118
124
  // table
119
- --bg-table-header-secondary: #{$bg-table-header-secondary-light};
120
- --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
121
- --bg-table-hover-primary: #{$bg-table-hover-primary-light};
122
- --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
123
- --bg-table-active-primary: #{$bg-table-active-primary-light};
124
- --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
125
- --bg-table-header-primary: #{$bg-table-header-primary-light};
126
125
  --on-bg-table-header-primary: #{$on-bg-table-header-primary-light};
127
-
128
- // highlight
129
- --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
130
- --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
131
- --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
132
- --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
126
+ --bg-table-header-primary: #{$bg-table-header-primary-light};
127
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
128
+ --bg-table-active-primary: #{$bg-table-active-primary-light};
129
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
130
+ --bg-table-hover-primary: #{$bg-table-hover-primary-light};
131
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
132
+ --bg-table-header-secondary: #{$bg-table-header-secondary-light};
133
133
 
134
134
  // tooltip
135
- --bg-tooltip-primary: #{$bg-tooltip-primary-light};
136
135
  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
136
+ --bg-tooltip-primary: #{$bg-tooltip-primary-light};
137
137
 
138
- // stepper
139
- --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
140
- --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
141
- --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
142
- --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
143
- --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
144
- --line-stepper-current-primary: #{$line-stepper-current-primary-light};
145
- --text-stepper-current-primary: #{$text-stepper-current-primary-light};
146
- --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
147
- --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
148
- --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
149
- --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
150
- --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
151
-
152
- // button-tertiary
153
- --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
154
- --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
155
- --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
156
- --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
157
- --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
158
- --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
138
+ // text-field
139
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
140
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
141
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
142
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-light};
143
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-light};
144
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-light};
145
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-light};
146
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
147
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
148
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
149
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
150
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
151
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
152
+ --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-light};
153
+ --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-light};
154
+ --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-light};
155
+ --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-light};
156
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
157
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
158
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
159
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
160
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
161
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
159
162
 
160
163
  // icons
161
- --icon-hover-primary: #{$icon-hover-primary-light};
162
164
  --icon-active-primary: #{$icon-active-primary-light};
165
+ --icon-hover-primary: #{$icon-hover-primary-light};
163
166
 
164
- // system
165
- --alternative-primary: #{$alternative-primary-light};
166
- --negative-primary: #{$negative-primary-light};
167
- --positive-primary: #{$positive-primary-light};
168
- --cta-primary: #{$bg-button-active-primary-light};
169
-
170
- // checkbox
171
- --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
172
- --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
173
- --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
167
+ // dropdown-list
168
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
169
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
170
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
171
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-light};
172
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
173
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
174
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
174
175
 
175
176
  // loading
176
177
  --loading-primary: #{$loading-primary-light};
177
178
 
178
- // disabled-status
179
- --outline-disabled: #{$outline-disabled-light};
180
- --bg-button-disabled: #{$bg-button-disabled-light};
181
- --on-bg-button-disabled: #{$on-bg-button-disabled-light};
182
-
183
- // button-secondary
184
- --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
185
- --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
186
- --bg-button-active-secondary: #{$bg-button-active-secondary-light};
187
- --outline-button-active-secondary: #{$outline-button-active-secondary-light};
188
- --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
189
- --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
190
- --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
191
- --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
192
- --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
193
-
194
- // button-positive
195
- --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
196
- --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
197
- --bg-button-hover-positive: #{$bg-button-hover-positive-light};
198
- --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
199
- --bg-button-active-positive: #{$bg-button-active-positive-light};
200
- --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
179
+ // switch
180
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
181
+ --bg-switch-on-primary: #{$bg-switch-on-primary-light};
182
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
183
+ --bg-switch-off-primary: #{$bg-switch-off-primary-light};
184
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
185
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
201
186
 
202
- // button-alternative
203
- --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
204
- --bg-button-active-alternative: #{$bg-button-active-alternative-light};
205
- --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
206
- --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
207
- --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
208
- --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
187
+ // notification
188
+ --on-bg-notification-primary: #{$on-bg-notification-primary-light};
189
+ --bg-notification-primary: #{$bg-notification-primary-light};
190
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
191
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
192
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
193
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
194
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
195
+ --notification-success-highlight-primary: #{$notification-success-highlight-primary-light};
196
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
197
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
198
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
209
199
 
210
- // logo
211
- --logo-primary: #{$logo-primary-light};
200
+ // dialog
201
+ --bg-dialog-primary: #{$bg-dialog-primary-light};
202
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
203
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
204
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
205
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
206
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
207
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
208
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
212
209
 
213
- // button-negative
214
- --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
215
- --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
216
- --bg-button-hover-negative: #{$bg-button-hover-negative-light};
217
- --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
218
- --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
219
- --bg-button-active-negative: #{$bg-button-active-negative-light};
210
+ // link
211
+ --link-active-primary: #{$link-active-primary-light};
212
+ --link-hover-primary: #{$link-hover-primary-light};
213
+ --bg-link-hover-primary: #{$bg-link-hover-primary-light};
214
+ --link-disabled-primary: #{$link-disabled-primary-light};
215
+ --link-pressed-primary: #{$link-pressed-primary-light};
220
216
 
221
- // radio button
222
- --radio-button-on-primary: #{$radio-button-on-primary-light};
223
- --radio-button-off-primary: #{$radio-button-off-primary-light};
217
+ // menu
218
+ --divider-menu-primary: #{$divider-menu-primary-light};
219
+ --bg-menu-primary: #{$bg-menu-primary-light};
220
+ --on-bg-menu-primary: #{$on-bg-menu-primary-light};
221
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
222
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
223
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
224
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
225
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
226
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
224
227
 
225
- // text
226
- --text-primary: #{$text-primary-light};
228
+ // shadow
229
+ --shadow-primary: #{$shadow-primary-light};
227
230
  }
228
231
 
229
232
  .hero-dark-theme {
230
- // text-field
231
- --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
232
- --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
233
- --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
234
- --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
235
- --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-dark};
236
- --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-dark};
237
- --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-dark};
238
- --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
239
- --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
240
- --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
241
- --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-dark};
242
- --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-dark};
243
- --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-dark};
244
- --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-dark};
245
- --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
246
- --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
247
- --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
248
- --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
249
- --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
250
- --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-dark};
251
- --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
252
- --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
253
- --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
233
+ // button-primary
234
+ --on-bg-button-active-primary: #{$on-bg-button-active-primary-dark};
235
+ --bg-button-active-primary: #{$bg-button-active-primary-dark};
236
+ --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
237
+ --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
238
+ --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
239
+ --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
254
240
 
255
- // dialog
256
- --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
257
- --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
258
- --bg-dialog-primary: #{$bg-dialog-primary-dark};
259
- --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
260
- --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
261
- --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
262
- --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
263
- --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
241
+ // button-secondary
242
+ --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
243
+ --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
244
+ --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
245
+ --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
246
+ --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
247
+ --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
248
+ --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
249
+ --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
250
+ --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
264
251
 
265
- // divider
266
- --divider-primary: #{$divider-primary-dark};
252
+ // button-tertiary
253
+ --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
254
+ --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
255
+ --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
256
+ --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
257
+ --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
258
+ --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
267
259
 
268
- // menu
269
- --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
270
- --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
271
- --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
272
- --divider-menu-primary: #{$divider-menu-primary-dark};
273
- --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
274
- --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
275
- --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
276
- --bg-menu-primary: #{$bg-menu-primary-dark};
277
- --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
260
+ // button-positive
261
+ --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
262
+ --bg-button-active-positive: #{$bg-button-active-positive-dark};
263
+ --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
264
+ --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
265
+ --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
266
+ --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
267
+
268
+ // button-negative
269
+ --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
270
+ --bg-button-active-negative: #{$bg-button-active-negative-dark};
271
+ --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
272
+ --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
273
+ --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
274
+ --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
275
+
276
+ // button-alternative
277
+ --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
278
+ --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
279
+ --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
280
+ --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
281
+ --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
282
+ --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
283
+
284
+ // disabled-status
285
+ --on-bg-disabled: #{$on-bg-disabled-dark};
286
+ --bg-disabled: #{$bg-disabled-dark};
287
+ --outline-disabled: #{$outline-disabled-dark};
278
288
 
279
289
  // surface
280
- --surface-secondary: #{$surface-secondary-dark};
281
290
  --surface-primary: #{$surface-primary-dark};
291
+ --surface-secondary: #{$surface-secondary-dark};
282
292
 
283
- // button-primary
284
- --on-bg-button-active-primary: #{$on-bg-button-active-primary-dark};
285
- --bg-button-active-primary: #{$bg-button-active-primary-dark};
286
- --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
287
- --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
288
- --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
289
- --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
293
+ // text
294
+ --text-primary: #{$text-primary-dark};
295
+
296
+ // divider
297
+ --divider-primary: #{$divider-primary-dark};
290
298
 
291
- // link
292
- --link-pressed-primary: #{$link-pressed-primary-dark};
293
- --link-disabled-primary: #{$link-disabled-primary-dark};
294
- --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
295
- --link-hover-primary: #{$link-hover-primary-dark};
296
- --link-active-primary: #{$link-active-primary-dark};
299
+ // logo
300
+ --logo-primary: #{$logo-primary-dark};
301
+
302
+ // highlight
303
+ --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
304
+ --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
305
+ --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
306
+ --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
307
+
308
+ // system
309
+ --positive-primary: #{$positive-primary-dark};
310
+ --negative-primary: #{$negative-primary-dark};
311
+ --cta-primary: #{$bg-button-active-primary-dark};
312
+ --alternative-primary: #{$alternative-primary-dark};
297
313
 
298
314
  // calendar
315
+ --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
299
316
  --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
300
- --bg-calender-primary: #{$bg-calender-primary-dark};
301
- --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
302
- --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
303
317
  --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
304
- --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
305
- --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
318
+ --bg-calender-primary: #{$bg-calender-primary-dark};
319
+ --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
320
+ --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
306
321
  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
322
+ --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
307
323
  --number-calender-active-primary: #{$number-calender-active-primary-dark};
324
+ --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
308
325
  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
326
+ --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
309
327
  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
310
- --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
311
- --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
312
328
  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
313
329
 
314
- // switch
315
- --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
316
- --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
317
- --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
318
- --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
319
- --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
320
- --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
330
+ // checkbox
331
+ --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
332
+ --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
333
+ --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
321
334
 
322
- // dropdown-list
323
- --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
324
- --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
325
- --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
326
- --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
327
- --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-dark};
328
- --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
329
- --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
335
+ // radio button
336
+ --radio-button-off-primary: #{$radio-button-off-primary-dark};
337
+ --radio-button-on-primary: #{$radio-button-on-primary-dark};
330
338
 
331
- // notification
332
- --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
333
- --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
334
- --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
335
- --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
336
- --notification-success-highlight-primary: #{$notification-success-highlight-primary-dark};
337
- --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
338
- --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
339
- --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
340
- --bg-notification-primary: #{$bg-notification-primary-dark};
341
- --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
342
- --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
339
+ // stepper
340
+ --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
341
+ --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
342
+ --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
343
+ --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
344
+ --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
345
+ --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
346
+ --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
347
+ --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
348
+ --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
349
+ --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
350
+ --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
351
+ --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
343
352
 
344
353
  // table
345
- --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
346
- --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
347
- --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
348
- --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
349
- --bg-table-active-primary: #{$bg-table-active-primary-dark};
350
- --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
351
- --bg-table-header-primary: #{$bg-table-header-primary-dark};
352
354
  --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
353
-
354
- // highlight
355
- --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
356
- --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
357
- --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
358
- --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
355
+ --bg-table-header-primary: #{$bg-table-header-primary-dark};
356
+ --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
357
+ --bg-table-active-primary: #{$bg-table-active-primary-dark};
358
+ --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
359
+ --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
360
+ --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
361
+ --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
359
362
 
360
363
  // tooltip
361
- --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
362
364
  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
365
+ --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
363
366
 
364
- // stepper
365
- --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
366
- --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
367
- --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
368
- --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
369
- --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
370
- --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
371
- --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
372
- --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
373
- --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
374
- --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
375
- --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
376
- --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
377
-
378
- // button-tertiary
379
- --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
380
- --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
381
- --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
382
- --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
383
- --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
384
- --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
367
+ // text-field
368
+ --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
369
+ --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
370
+ --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
371
+ --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-dark};
372
+ --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-dark};
373
+ --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-dark};
374
+ --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-dark};
375
+ --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
376
+ --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
377
+ --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
378
+ --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
379
+ --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
380
+ --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
381
+ --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-dark};
382
+ --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-dark};
383
+ --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-dark};
384
+ --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-dark};
385
+ --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
386
+ --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
387
+ --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
388
+ --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
389
+ --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
390
+ --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
385
391
 
386
392
  // icons
387
- --icon-hover-primary: #{$icon-hover-primary-dark};
388
393
  --icon-active-primary: #{$icon-active-primary-dark};
394
+ --icon-hover-primary: #{$icon-hover-primary-dark};
389
395
 
390
- // system
391
- --alternative-primary: #{$alternative-primary-dark};
392
- --negative-primary: #{$negative-primary-dark};
393
- --positive-primary: #{$positive-primary-dark};
394
- --cta-primary: #{$bg-button-active-primary-dark};
395
-
396
- // checkbox
397
- --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
398
- --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
399
- --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
396
+ // dropdown-list
397
+ --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
398
+ --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
399
+ --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
400
+ --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-dark};
401
+ --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
402
+ --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
403
+ --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
400
404
 
401
405
  // loading
402
406
  --loading-primary: #{$loading-primary-dark};
403
407
 
404
- // disabled-status
405
- --outline-disabled: #{$outline-disabled-dark};
406
- --bg-button-disabled: #{$bg-button-disabled-dark};
407
- --on-bg-button-disabled: #{$on-bg-button-disabled-dark};
408
-
409
- // button-secondary
410
- --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
411
- --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
412
- --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
413
- --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
414
- --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
415
- --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
416
- --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
417
- --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
418
- --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
419
-
420
- // button-positive
421
- --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
422
- --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
423
- --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
424
- --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
425
- --bg-button-active-positive: #{$bg-button-active-positive-dark};
426
- --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
427
-
428
- // button-alternative
429
- --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
430
- --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
431
- --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
432
- --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
433
- --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
434
- --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
408
+ // switch
409
+ --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
410
+ --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
411
+ --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
412
+ --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
413
+ --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
414
+ --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
435
415
 
436
- // logo
437
- --logo-primary: #{$logo-primary-dark};
416
+ // notification
417
+ --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
418
+ --bg-notification-primary: #{$bg-notification-primary-dark};
419
+ --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
420
+ --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
421
+ --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
422
+ --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
423
+ --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
424
+ --notification-success-highlight-primary: #{$notification-success-highlight-primary-dark};
425
+ --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
426
+ --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
427
+ --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
438
428
 
439
- // button-negative
440
- --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
441
- --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
442
- --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
443
- --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
444
- --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
445
- --bg-button-active-negative: #{$bg-button-active-negative-dark};
429
+ // dialog
430
+ --bg-dialog-primary: #{$bg-dialog-primary-dark};
431
+ --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
432
+ --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
433
+ --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
434
+ --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
435
+ --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
436
+ --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
437
+ --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
446
438
 
447
- // radio button
448
- --radio-button-on-primary: #{$radio-button-on-primary-dark};
449
- --radio-button-off-primary: #{$radio-button-off-primary-dark};
439
+ // link
440
+ --link-active-primary: #{$link-active-primary-dark};
441
+ --link-hover-primary: #{$link-hover-primary-dark};
442
+ --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
443
+ --link-disabled-primary: #{$link-disabled-primary-dark};
444
+ --link-pressed-primary: #{$link-pressed-primary-dark};
450
445
 
451
- // text
452
- --text-primary: #{$text-primary-dark};
446
+ // menu
447
+ --divider-menu-primary: #{$divider-menu-primary-dark};
448
+ --bg-menu-primary: #{$bg-menu-primary-dark};
449
+ --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
450
+ --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
451
+ --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
452
+ --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
453
+ --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
454
+ --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
455
+ --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
453
456
 
454
- //
455
- //@each $name, $value in $hero-dark-theme {
456
- // --#{$name}: #{$value};
457
- //}
457
+ // shadow
458
+ --shadow-primary: #{$shadow-primary-dark};
458
459
  }