@sb1/ffe-core 29.3.0 → 29.4.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 (6) hide show
  1. package/css/colors-semantic.css +782 -0
  2. package/css/ffe.css +772 -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/package.json +4 -3
package/less/colors-semantic-storybook.less ADDED
@@ -0,0 +1,256 @@
1
+ // Semantic dark class
2
+ .dark-mode {
3
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
4
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
5
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
6
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
7
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
8
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
9
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
10
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
11
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
12
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
13
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
14
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
15
+ --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
16
+ --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
17
+ --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
18
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
19
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
20
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
21
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
22
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
23
+ --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
24
+ --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-600);
25
+ --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-500);
26
+ --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
27
+ --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
28
+ --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
29
+ --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
30
+ --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
31
+ --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
32
+ --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
33
+ --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
34
+ --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
35
+ --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
36
+ --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
37
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
38
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
39
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
40
+ --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
41
+ --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
42
+ --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
43
+ --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
44
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
45
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
46
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
47
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
48
+ --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
49
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
50
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
51
+ --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
52
+ --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
53
+ --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
54
+ --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
55
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
56
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
57
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
58
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
59
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
60
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
61
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
62
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
63
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
64
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
65
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
66
+ --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
67
+ --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
68
+ --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
69
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
70
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
71
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
72
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
73
+ --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
74
+ --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
75
+ --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
76
+ --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
77
+ --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
78
+ --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
79
+ --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
80
+ --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
81
+ --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
82
+ --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
83
+ --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
84
+ --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
85
+ --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
86
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
87
+ --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
88
+ --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
89
+ --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
90
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
91
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
92
+ --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
93
+ --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
94
+ --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
95
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
96
+ --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
97
+ --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
98
+ --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
99
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
100
+ --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
101
+ --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
102
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
103
+ --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
104
+ //inlined context to make darkmode work
105
+ --ffe-color-background-default: var(--ffe-color-speciality-background-default);
106
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
107
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
108
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
109
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
110
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
111
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
112
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
113
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
114
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
115
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
116
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
117
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
118
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
119
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
120
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
121
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
122
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
123
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
124
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
125
+ --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
126
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
127
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
128
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
129
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
130
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
131
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
132
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
133
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
134
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
135
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
136
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
137
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
138
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
139
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
140
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
141
+ --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
142
+ --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
143
+ --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
144
+ --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
145
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
146
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
147
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
148
+ --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
149
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
150
+ --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
151
+ --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
152
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
153
+ --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
154
+ --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
155
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
156
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
157
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
158
+ --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
159
+ --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
160
+ --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
161
+ --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
162
+ --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
163
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
164
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
165
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
166
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
167
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
168
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
169
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
170
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
171
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
172
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
173
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
174
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
175
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
176
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
177
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
178
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
179
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
180
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
181
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
182
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
183
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
184
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
185
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
186
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
187
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
188
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
189
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
190
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
191
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
192
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
193
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
194
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
195
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
196
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
197
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
198
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
199
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
200
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
201
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
202
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
203
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
204
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
205
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
206
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
207
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
208
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
209
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
210
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
211
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
212
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
213
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
214
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
215
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
216
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
217
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
218
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
219
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
220
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
221
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
222
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
223
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
224
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
225
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
226
+ --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
227
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
228
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
229
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
230
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
231
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
232
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
233
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
234
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
235
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
236
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
237
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
238
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
239
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
240
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
241
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
242
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
243
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
244
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
245
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
246
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
247
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
248
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
249
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
250
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
251
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
252
+ --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
253
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
254
+ --ffe-color-component-logo-circle-dark-red: #af0000;
255
+ --ffe-color-component-logo-circle-light-red: #e60000;
256
+ }