@sb1/ffe-core 29.3.0 → 29.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/css/colors-semantic.css +782 -0
  2. package/css/ffe.css +773 -0
  3. package/less/colors-semantic-storybook.less +256 -0
  4. package/less/colors-semantic.less +782 -0
  5. package/less/ffe.less +1 -0
  6. package/less/theme.less +1 -0
  7. package/package.json +4 -3
package/css/colors-semantic.css ADDED
@@ -0,0 +1,782 @@
1
+ // Generated from Figma tokens
2
+
3
+ // Context accent
4
+ .ffe-accent-mode {
5
+ --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
6
+ --ffe-color-background-subtle: var(--ffe-color-accent-neutral-sublest);
7
+ --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
8
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
9
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
10
+ --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-default);
11
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtle);
12
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtler);
13
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
14
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
15
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
16
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
17
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
18
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
19
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
20
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
21
+ --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
22
+ --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
23
+ --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-stronger);
24
+ --ffe-color-fill-primary-selected: var(--ffe-color-accent-brand-primary-strongest);
25
+ --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtlest);
26
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtler);
27
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-subtle);
28
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
29
+ --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
30
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
31
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
32
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtle);
33
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-default);
34
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-strongest);
35
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
36
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
37
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
38
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
39
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
40
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
41
+ --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
42
+ --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
43
+ --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
44
+ --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
45
+ --ffe-color-fill-feedback-tip: var(--ffe-color-accent-brand-tertiary-stronger);
46
+ --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
47
+ --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
48
+ --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
49
+ --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
50
+ --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
51
+ --ffe-color-border-primary-selected: var(--ffe-color-speciality-static-accent-medium);
52
+ --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
53
+ --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
54
+ --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
55
+ --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
56
+ --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
57
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
58
+ --ffe-color-border-interactive-focus: var(--ffe-color-gray-white);
59
+ --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
60
+ --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
61
+ --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
62
+ --ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
63
+ --ffe-color-border-feedback-tip: var(--ffe-color-accent-brand-tertiary-strong);
64
+ --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
65
+ --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-stronger);
66
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
67
+ --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
68
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
69
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
70
+ --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
71
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
72
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
73
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
74
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
75
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
76
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
77
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
78
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
79
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
80
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
81
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-strong);
82
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-stronger);
83
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-strongest);
84
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-accent-neutral-inverted);
85
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-accent-neutral-inverted);
86
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-primary-medium);
87
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-default);
88
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-stronger);
89
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-accent-brand-primary-strong);
90
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
91
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-accent-brand-primary-strongest);
92
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-accent-neutral-inverted);
93
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-accent-neutral-inverted);
94
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-accent-brand-primary-strong);
95
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-accent-brand-primary-stronger);
96
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-accent-brand-primary-strongest);
97
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
98
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
99
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
100
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
101
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
102
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-speciality-background-accent);
103
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
104
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
105
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-fill-primary-invisible);
106
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
107
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
108
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
109
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
110
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
111
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
112
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
113
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-accent-neutral-strongest);
114
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-accent-neutral-strongest);
115
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-accent-brand-primary-strongest);
116
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-accent-brand-primary-stronger);
117
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-accent-brand-primary-strong);
118
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-accent-brand-primary-strongest);
119
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
120
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-accent-brand-primary-strong);
121
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-accent-neutral-inverted);
122
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-accent-neutral-inverted);
123
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-speciality-static-accent-subtler);
124
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-speciality-static-accent-medium);
125
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-speciality-static-accent-medium);
126
+ --ffe-color-component-form-input-border-default: var(--ffe-color-accent-neutral-default);
127
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-accent-neutral-stronger);
128
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-accent-neutral-stronger);
129
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-accent-neutral-subtle);
130
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-accent-neutral-strongest);
131
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-accent-neutral-strongest);
132
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-accent-neutral-sublest);
133
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-accent-brand-primary-subtle);
134
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-accent-brand-primary-default);
135
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-accent-brand-primary-subtler);
136
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
137
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-accent-brand-primary-medium);
138
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-accent-brand-primary-default);
139
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-accent-brand-primary-medium);
140
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strong);
141
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-accent-feedback-critical-strongest);
142
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-accent-neutral-strongest);
143
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-accent-neutral-stronger);
144
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-accent-neutral-strongest);
145
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
146
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
147
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
148
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
149
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
150
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
151
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
152
+ --ffe-color-component-logo-name: var(--ffe-color-gray-white);
153
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
154
+ --ffe-color-component-logo-circle-dark-red: #af0000;
155
+ --ffe-color-component-logo-circle-light-red: #e60000;}
156
+
157
+
158
+ // Context
159
+ :root,
160
+ :host {
161
+ --ffe-color-background-default: var(--ffe-color-speciality-background-default);
162
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
163
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
164
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
165
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
166
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
167
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
168
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
169
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
170
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
171
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
172
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
173
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
174
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
175
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
176
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
177
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
178
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
179
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
180
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
181
+ --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
182
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
183
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
184
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
185
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
186
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
187
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
188
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
189
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
190
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
191
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
192
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
193
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
194
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
195
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
196
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
197
+ --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
198
+ --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
199
+ --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
200
+ --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
201
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
202
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
203
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
204
+ --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
205
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
206
+ --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
207
+ --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
208
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
209
+ --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
210
+ --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
211
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
212
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
213
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
214
+ --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
215
+ --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
216
+ --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
217
+ --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
218
+ --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
219
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
220
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
221
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
222
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
223
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
224
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
225
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
226
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
227
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
228
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
229
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
230
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
231
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
232
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
233
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
234
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
235
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
236
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
237
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
238
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
239
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
240
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
241
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
242
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
243
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
244
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
245
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
246
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
247
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
248
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
249
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
250
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
251
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
252
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
253
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
254
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
255
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
256
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
257
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
258
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
259
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
260
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
261
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
262
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
263
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
264
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
265
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
266
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
267
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
268
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
269
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
270
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
271
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
272
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
273
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
274
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
275
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
276
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
277
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
278
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
279
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
280
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
281
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
282
+ --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
283
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
284
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
285
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
286
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
287
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
288
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
289
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
290
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
291
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
292
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
293
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
294
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
295
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
296
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
297
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
298
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
299
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
300
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
301
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
302
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
303
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
304
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
305
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
306
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
307
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
308
+ --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
309
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
310
+ --ffe-color-component-logo-circle-dark-red: #af0000;
311
+ --ffe-color-component-logo-circle-light-red: #e60000;}
312
+
313
+
314
+ // Semantic
315
+ :root,
316
+ :host {
317
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-50);
318
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-150);
319
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-250);
320
+ --ffe-color-default-brand-primary-default: var(--ffe-color-vann-350);
321
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-vann-500);
322
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
323
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
324
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
325
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-25);
326
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
327
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
328
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
329
+ --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
330
+ --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
331
+ --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
332
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
333
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
334
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
335
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
336
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
337
+ --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
338
+ --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-300);
339
+ --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-400);
340
+ --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
341
+ --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
342
+ --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
343
+ --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
344
+ --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
345
+ --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
346
+ --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
347
+ --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
348
+ --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
349
+ --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
350
+ --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
351
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
352
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
353
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
354
+ --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
355
+ --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
356
+ --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
357
+ --ffe-color-default-neutral-sublest: var(--ffe-color-gray-white);
358
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
359
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
360
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-300);
361
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
362
+ --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
363
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
364
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-white);
365
+ --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
366
+ --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
367
+ --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
368
+ --ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
369
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-alpha-white-15);
370
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-alpha-white-20);
371
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-alpha-white-30);
372
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-alpha-white-50);
373
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-alpha-white-60);
374
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-alpha-white-70);
375
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-alpha-white-80);
376
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-alpha-white-90);
377
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
378
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
379
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
380
+ --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
381
+ --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
382
+ --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-25);
383
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-500);
384
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-400);
385
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
386
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
387
+ --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
388
+ --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
389
+ --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
390
+ --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
391
+ --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
392
+ --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
393
+ --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
394
+ --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
395
+ --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
396
+ --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
397
+ --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
398
+ --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
399
+ --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
400
+ --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
401
+ --ffe-color-accent-neutral-default: var(--ffe-color-vann-150);
402
+ --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
403
+ --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
404
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
405
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
406
+ --ffe-color-speciality-background-default: var(--ffe-default-neutral-sublest);
407
+ --ffe-color-speciality-background-subtle: var(--ffe-default-brand-subtle-subtler);
408
+ --ffe-color-speciality-background-accent: var(--ffe-color-vann-600);
409
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-white);
410
+ --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
411
+ --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
412
+ --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
413
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
414
+ --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
415
+ --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
416
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
417
+ --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
418
+ }
419
+
420
+ // Semantic dark
421
+ @media (prefers-color-scheme: dark) {
422
+ :where(.regard-color-scheme-preference){
423
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
424
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
425
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
426
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
427
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
428
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
429
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
430
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
431
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
432
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
433
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
434
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
435
+ --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
436
+ --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
437
+ --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
438
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
439
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
440
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
441
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
442
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
443
+ --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
444
+ --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-600);
445
+ --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-500);
446
+ --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
447
+ --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
448
+ --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
449
+ --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
450
+ --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
451
+ --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
452
+ --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
453
+ --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
454
+ --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
455
+ --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
456
+ --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
457
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
458
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
459
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
460
+ --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
461
+ --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
462
+ --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
463
+ --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
464
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
465
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
466
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
467
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
468
+ --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
469
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
470
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
471
+ --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
472
+ --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
473
+ --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
474
+ --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
475
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
476
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
477
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
478
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
479
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
480
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
481
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
482
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
483
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
484
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
485
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
486
+ --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
487
+ --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
488
+ --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
489
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
490
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
491
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
492
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
493
+ --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
494
+ --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
495
+ --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
496
+ --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
497
+ --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
498
+ --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
499
+ --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
500
+ --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
501
+ --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
502
+ --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
503
+ --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
504
+ --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
505
+ --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
506
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
507
+ --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
508
+ --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
509
+ --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
510
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
511
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
512
+ --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
513
+ --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
514
+ --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
515
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
516
+ --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
517
+ --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
518
+ --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
519
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
520
+ --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
521
+ --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
522
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
523
+ --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
524
+ //inlined context to make darkmode work
525
+ --ffe-color-background-default: var(--ffe-color-speciality-background-default);
526
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
527
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
528
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
529
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
530
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
531
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
532
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
533
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
534
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
535
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
536
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
537
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
538
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
539
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
540
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
541
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
542
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
543
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
544
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
545
+ --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
546
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
547
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
548
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
549
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
550
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
551
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
552
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
553
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
554
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
555
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
556
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
557
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
558
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
559
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
560
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
561
+ --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
562
+ --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
563
+ --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
564
+ --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
565
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
566
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
567
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
568
+ --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
569
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
570
+ --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
571
+ --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
572
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
573
+ --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
574
+ --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
575
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
576
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
577
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
578
+ --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
579
+ --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
580
+ --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
581
+ --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
582
+ --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
583
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
584
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
585
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
586
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
587
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
588
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
589
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
590
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
591
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
592
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
593
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
594
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
595
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
596
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
597
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
598
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
599
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
600
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
601
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
602
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
603
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
604
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
605
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
606
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
607
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
608
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
609
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
610
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
611
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
612
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
613
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
614
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
615
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
616
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
617
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
618
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
619
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
620
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
621
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
622
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
623
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
624
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
625
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
626
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
627
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
628
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
629
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
630
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
631
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
632
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
633
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
634
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
635
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
636
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
637
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
638
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
639
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
640
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
641
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
642
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
643
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
644
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
645
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
646
+ --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
647
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
648
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
649
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
650
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
651
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
652
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
653
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
654
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
655
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
656
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
657
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
658
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
659
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
660
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
661
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
662
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
663
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
664
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
665
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
666
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
667
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
668
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
669
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
670
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
671
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
672
+ --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
673
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
674
+ --ffe-color-component-logo-circle-dark-red: #af0000;
675
+ --ffe-color-component-logo-circle-light-red: #e60000;}
676
+ }
677
+
678
+ :root,
679
+ :host {
680
+ --ffe-color-vann-25: #e7f1f9;
681
+ --ffe-color-vann-50: #d7e7f4;
682
+ --ffe-color-vann-75: #cfe2f2;
683
+ --ffe-color-vann-150: #b6d1ec;
684
+ --ffe-color-vann-250: #8eb8e1;
685
+ --ffe-color-vann-300: #7dabd9;
686
+ --ffe-color-vann-350: #6ba1d6;
687
+ --ffe-color-vann-400: #5494d4;
688
+ --ffe-color-vann-500: #2975c2;
689
+ --ffe-color-vann-550: #1566b2;
690
+ --ffe-color-vann-600: #005aa4;
691
+ --ffe-color-vann-700: #073f83;
692
+ --ffe-color-vann-800: #022d74;
693
+ --ffe-color-vann-1000: #070d27;
694
+ --ffe-color-natt-50: #dfe6f1;
695
+ --ffe-color-natt-100: #c9d5e8;
696
+ --ffe-color-natt-200: #acbfdc;
697
+ --ffe-color-natt-300: #90a9d0;
698
+ --ffe-color-natt-400: #748db4;
699
+ --ffe-color-natt-500: #55709b;
700
+ --ffe-color-natt-600: #3e5579;
701
+ --ffe-color-natt-700: #2e405c;
702
+ --ffe-color-frost-25: #e5f0f5;
703
+ --ffe-color-frost-50: #dceaef;
704
+ --ffe-color-frost-75: #cbe2eb;
705
+ --ffe-color-frost-100: #c3dfea;
706
+ --ffe-color-frost-150: #b6d7e7;
707
+ --ffe-color-frost-200: #a6cee2;
708
+ --ffe-color-frost-250: #95c3db;
709
+ --ffe-color-frost-300: #7eb5d2;
710
+ --ffe-color-frost-350: #73a5c4;
711
+ --ffe-color-frost-400: #6795b6;
712
+ --ffe-color-frost-450: #5988ab;
713
+ --ffe-color-frost-500: #4a799c;
714
+ --ffe-color-frost-550: #406e91;
715
+ --ffe-color-frost-600: #386485;
716
+ --ffe-color-frost-700: #284e6c;
717
+ --ffe-color-frost-800: #193850;
718
+ --ffe-color-syrin-50: #e6e6f4;
719
+ --ffe-color-syrin-75: #dcdcef;
720
+ --ffe-color-syrin-100: #d3d3ea;
721
+ --ffe-color-syrin-150: #cacae3;
722
+ --ffe-color-syrin-200: #c3c3da;
723
+ --ffe-color-syrin-250: #b6b6cd;
724
+ --ffe-color-syrin-300: #aaaac0;
725
+ --ffe-color-syrin-350: #a2a2b9;
726
+ --ffe-color-syrin-400: #9996ab;
727
+ --ffe-color-syrin-450: #8c88a0;
728
+ --ffe-color-syrin-500: #79748b;
729
+ --ffe-color-syrin-550: #686477;
730
+ --ffe-color-syrin-700: #474457;
731
+ --ffe-color-baer-50: #ffd7d1;
732
+ --ffe-color-baer-100: #ffaea8;
733
+ --ffe-color-baer-200: #ff7f7a;
734
+ --ffe-color-baer-300: #ff5e5c;
735
+ --ffe-color-baer-500: #c62a2f;
736
+ --ffe-color-baer-700: #7c1214;
737
+ --ffe-color-baer-800: #640e10;
738
+ --ffe-color-skog-50: #cbf0df;
739
+ --ffe-color-skog-100: #b2e6cd;
740
+ --ffe-color-skog-200: #8fd1b1;
741
+ --ffe-color-skog-300: #6abe97;
742
+ --ffe-color-skog-400: #48a781;
743
+ --ffe-color-skog-500: #2e8b64;
744
+ --ffe-color-skog-550: #2a7e5b;
745
+ --ffe-color-skog-600: #00754e;
746
+ --ffe-color-skog-650: #0d6346;
747
+ --ffe-color-skog-750: #0a4d37;
748
+ --ffe-color-skog-800: #0a4330;
749
+ --ffe-color-sol-50: #ffe0b2;
750
+ --ffe-color-sol-100: #ffc675;
751
+ --ffe-color-sol-150: #ffb64d;
752
+ --ffe-color-sol-200: #f6ac3c;
753
+ --ffe-color-sol-250: #f49f1f;
754
+ --ffe-color-sol-500: #a95704;
755
+ --ffe-color-sol-700: #682c00;
756
+ --ffe-color-sol-750: #582400;
757
+ --ffe-color-gray-100: #cccccc;
758
+ --ffe-color-gray-150: #c2c2c2;
759
+ --ffe-color-gray-200: #b8b8b8;
760
+ --ffe-color-gray-250: #adadad;
761
+ --ffe-color-gray-300: #a4a4a4;
762
+ --ffe-color-gray-450: #858585;
763
+ --ffe-color-gray-550: #707070;
764
+ --ffe-color-gray-600: #666666;
765
+ --ffe-color-gray-650: #5c5c5c;
766
+ --ffe-color-gray-700: #525252;
767
+ --ffe-color-gray-750: #474747;
768
+ --ffe-color-gray-850: #333333;
769
+ --ffe-color-gray-900: #292929;
770
+ --ffe-color-gray-950: #1f1f1f;
771
+ --ffe-color-gray-1000: #141414;
772
+ --ffe-color-gray-white: #ffffff;
773
+ --ffe-color-alpha-white-0: #ffffff00;
774
+ --ffe-color-alpha-white-15: #ffffff26;
775
+ --ffe-color-alpha-white-20: #ffffff33;
776
+ --ffe-color-alpha-white-30: #ffffff4d;
777
+ --ffe-color-alpha-white-50: #ffffff80;
778
+ --ffe-color-alpha-white-60: #ffffff99;
779
+ --ffe-color-alpha-white-70: #ffffffb2;
780
+ --ffe-color-alpha-white-80: #ffffffcc;
781
+ --ffe-color-alpha-white-90: #ffffffe5;
782
+ }