@sb1/ffe-core 29.5.1 → 30.0.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 (19) hide show
  1. package/css/colors-semantic.css +211 -278
  2. package/css/colors.css +1 -0
  3. package/css/ffe.css +256 -367
  4. package/es/index.js +0 -1
  5. package/less/body.less +2 -13
  6. package/less/colors-semantic-storybook.less +68 -84
  7. package/less/colors-semantic.less +211 -278
  8. package/less/colors.less +1 -0
  9. package/less/theme.less +24 -29
  10. package/less/typography.less +26 -46
  11. package/lib/index.js +0 -1
  12. package/lib/semanticColors.js +121 -0
  13. package/package.json +3 -3
  14. package/types/index.d.ts +0 -1
  15. package/css/colors-deprecated.css +0 -39
  16. package/es/colors-deprecated.js +0 -36
  17. package/less/colors-deprecated.less +0 -59
  18. package/lib/colors-deprecated.js +0 -39
  19. package/types/colors-deprecated.d.ts +0 -36
package/css/colors-semantic.css CHANGED
@@ -3,21 +3,21 @@
3
3
  // Context accent
4
4
  .ffe-accent-mode {
5
5
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
6
- --ffe-color-background-subtle: var(--ffe-color-accent-neutral-sublest);
6
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent);
7
7
  --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
8
8
  --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
9
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);
10
+ --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-subtlest);
11
+ --ffe-color-surface-secondary-hover: var(--ffe-color-accent-brand-secondary-subtler);
12
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-accent-brand-secondary-subtle);
13
+ --ffe-color-surface-tertiary-default: var(--ffe-color-accent-brand-tertiary-subtlest);
14
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-accent-brand-tertiary-subtler);
15
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
16
+ --ffe-color-surface-feedback-info: var(--ffe-color-accent-feedback-info-subtlest);
17
+ --ffe-color-surface-feedback-success: var(--ffe-color-accent-feedback-success-subtlest);
18
+ --ffe-color-surface-feedback-warning: var(--ffe-color-accent-feedback-warning-subtlest);
19
+ --ffe-color-surface-feedback-critical: var(--ffe-color-accent-feedback-critical-subtlest);
20
+ --ffe-color-surface-feedback-tip: var(--ffe-color-accent-feedback-tip-sublest);
21
21
  --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
22
22
  --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
23
23
  --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-stronger);
@@ -42,39 +42,39 @@
42
42
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
43
43
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
44
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);
45
+ --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
46
+ --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
47
+ --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strongest);
48
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
49
+ --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
50
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
51
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
52
+ --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
53
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
54
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
55
+ --ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
56
+ --ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
57
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
58
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
59
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
46
60
  --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
47
61
  --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
48
62
  --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
49
63
  --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
50
64
  --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);
65
+ --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
52
66
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
53
67
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
54
68
  --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
55
69
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
56
70
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
57
71
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
58
- --ffe-color-border-interactive-focus: var(--ffe-color-gray-white);
72
+ --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
59
73
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
60
74
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
61
75
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
62
76
  --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);
77
+ --ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
78
78
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
79
79
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
80
80
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
@@ -107,50 +107,16 @@
107
107
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
108
108
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
109
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);
110
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
111
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
112
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
113
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
114
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
115
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
116
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
117
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
118
+ --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
119
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
154
120
  --ffe-color-component-logo-circle-dark-red: #af0000;
155
121
  --ffe-color-component-logo-circle-light-red: #e60000;}
156
122
 
@@ -163,17 +129,17 @@
163
129
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
164
130
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
165
131
  --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);
132
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
133
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
134
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
135
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
136
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
137
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
172
138
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
173
139
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
174
140
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
175
141
  --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);
142
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
177
143
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
178
144
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
179
145
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
@@ -198,7 +164,21 @@
198
164
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
199
165
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
200
166
  --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);
167
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
168
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
169
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
170
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
171
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
172
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
173
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
174
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
175
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
176
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
177
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
178
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
179
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
180
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
181
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
202
182
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
203
183
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
204
184
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -216,21 +196,7 @@
216
196
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
217
197
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
218
198
  --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);
199
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
234
200
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
235
201
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
236
202
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -263,50 +229,16 @@
263
229
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
264
230
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
265
231
  --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);
232
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
233
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
234
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
235
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
236
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
237
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
238
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
239
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
240
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
241
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
310
242
  --ffe-color-component-logo-circle-dark-red: #af0000;
311
243
  --ffe-color-component-logo-circle-light-red: #e60000;}
312
244
 
@@ -322,21 +254,22 @@
322
254
  --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
323
255
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
324
256
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
325
- --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-25);
257
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
258
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
326
259
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
327
260
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
328
261
  --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
329
262
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
330
263
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
331
264
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
265
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
266
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
332
267
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
333
268
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
334
269
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
335
270
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
336
271
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
337
272
  --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
273
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
341
274
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
342
275
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
@@ -348,73 +281,90 @@
348
281
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
349
282
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
350
283
  --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
284
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
355
285
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
356
286
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
357
- --ffe-color-default-neutral-sublest: var(--ffe-color-gray-white);
287
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
288
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
289
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
290
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
291
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
292
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
293
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
294
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
295
+ --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
358
296
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
359
297
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
360
- --ffe-color-default-neutral-default: var(--ffe-color-gray-300);
361
298
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
362
299
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
363
300
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
364
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-white);
301
+ --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
365
302
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
366
303
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
367
304
  --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
368
305
  --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);
306
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-vann-600);
307
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-500);
308
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-400);
309
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-vann-250);
310
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-150);
311
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-75);
312
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-25);
313
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
314
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
377
315
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
378
316
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
379
317
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
380
318
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
381
319
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
382
320
  --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);
321
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-600);
322
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-500);
323
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-400);
324
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
325
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
326
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
387
327
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
328
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
388
329
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
330
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
331
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
389
332
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
390
333
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
391
334
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
392
335
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
336
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
337
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
393
338
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
394
339
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
340
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
395
341
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
396
342
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
343
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
344
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
345
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
346
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
347
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
397
348
  --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
398
349
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
399
350
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
400
351
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
401
- --ffe-color-accent-neutral-default: var(--ffe-color-vann-150);
402
352
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
403
353
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
404
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
354
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
405
355
  --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);
356
+ --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
357
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
358
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
359
+ --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
360
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
410
361
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
411
362
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
412
363
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
413
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
364
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
414
365
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
415
366
  --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);
367
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
418
368
  }
419
369
 
420
370
  // Semantic dark
@@ -428,6 +378,7 @@
428
378
  --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
429
379
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
430
380
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
381
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
431
382
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
432
383
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
433
384
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
@@ -435,14 +386,14 @@
435
386
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
436
387
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
437
388
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
389
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
390
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
438
391
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
439
392
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
440
393
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
441
394
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
442
395
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
443
396
  --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
397
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
447
398
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
448
399
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
@@ -454,90 +405,107 @@
454
405
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
455
406
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
456
407
  --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
408
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
461
409
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
462
410
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
411
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
412
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
413
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
414
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
415
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
416
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
417
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
418
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
463
419
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
464
420
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
465
421
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
466
- --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
467
422
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
468
423
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
469
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
424
+ --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
470
425
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
471
426
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
472
427
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
473
428
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
474
- --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
429
+ --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-100);
475
430
  --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
476
431
  --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
477
432
  --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
478
- --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
479
433
  --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
480
434
  --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
481
435
  --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
482
436
  --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
437
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
438
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
483
439
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
484
440
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
485
441
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
486
442
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
487
443
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
488
444
  --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
445
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
446
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-650);
447
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-550);
489
448
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
490
449
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
491
450
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
492
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
493
451
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
452
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
494
453
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
454
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
455
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
495
456
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
496
457
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
497
458
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
498
459
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
460
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
461
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
499
462
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
500
463
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
464
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
501
465
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
502
466
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
467
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
468
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
469
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
470
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
471
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
503
472
  --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
504
473
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
505
474
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
506
475
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
507
- --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
508
476
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
509
477
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
510
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
478
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
511
479
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
512
- --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
480
+ --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
481
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
513
482
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
514
- --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
483
+ --ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
515
484
  --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
516
485
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
517
486
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
518
487
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
519
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
488
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
520
489
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
521
490
  --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);
491
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
524
492
  //inlined context to make darkmode work
525
493
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
526
494
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
527
495
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
528
496
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
529
497
  --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);
498
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
499
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
500
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
501
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
502
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
503
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
536
504
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
537
505
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
538
506
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
539
507
  --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);
508
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
541
509
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
542
510
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
543
511
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
@@ -562,7 +530,21 @@
562
530
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
563
531
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
564
532
  --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);
533
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
534
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
535
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
536
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
537
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
538
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
539
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
540
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
541
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
542
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
543
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
544
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
545
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
546
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
547
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
566
548
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
567
549
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
568
550
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -580,21 +562,7 @@
580
562
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
581
563
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
582
564
  --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);
565
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
598
566
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
599
567
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
600
568
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -627,50 +595,16 @@
627
595
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
628
596
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
629
597
  --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);
598
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
599
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
600
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
601
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
602
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
603
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
604
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
605
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
606
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
607
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
674
608
  --ffe-color-component-logo-circle-dark-red: #af0000;
675
609
  --ffe-color-component-logo-circle-light-red: #e60000;}
676
610
  }
@@ -682,14 +616,14 @@
682
616
  --ffe-color-vann-75: #cfe2f2;
683
617
  --ffe-color-vann-150: #b6d1ec;
684
618
  --ffe-color-vann-250: #8eb8e1;
685
- --ffe-color-vann-300: #7dabd9;
686
619
  --ffe-color-vann-350: #6ba1d6;
687
620
  --ffe-color-vann-400: #5494d4;
688
621
  --ffe-color-vann-500: #2975c2;
689
622
  --ffe-color-vann-550: #1566b2;
690
623
  --ffe-color-vann-600: #005aa4;
624
+ --ffe-color-vann-650: #084f91;
691
625
  --ffe-color-vann-700: #073f83;
692
- --ffe-color-vann-800: #022d74;
626
+ --ffe-color-vann-800: #002776;
693
627
  --ffe-color-vann-1000: #070d27;
694
628
  --ffe-color-natt-50: #dfe6f1;
695
629
  --ffe-color-natt-100: #c9d5e8;
@@ -699,6 +633,7 @@
699
633
  --ffe-color-natt-500: #55709b;
700
634
  --ffe-color-natt-600: #3e5579;
701
635
  --ffe-color-natt-700: #2e405c;
636
+ --ffe-color-natt-950: #101622;
702
637
  --ffe-color-frost-25: #e5f0f5;
703
638
  --ffe-color-frost-50: #dceaef;
704
639
  --ffe-color-frost-75: #cbe2eb;
@@ -707,14 +642,16 @@
707
642
  --ffe-color-frost-200: #a6cee2;
708
643
  --ffe-color-frost-250: #95c3db;
709
644
  --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;
645
+ --ffe-color-frost-350: #6ea6c9;
646
+ --ffe-color-frost-400: #6096bd;
647
+ --ffe-color-frost-450: #5489b0;
648
+ --ffe-color-frost-500: #457aa1;
649
+ --ffe-color-frost-550: #3b6f96;
650
+ --ffe-color-frost-600: #356488;
651
+ --ffe-color-frost-700: #234f71;
652
+ --ffe-color-frost-800: #163853;
653
+ --ffe-color-sand-25: #fcf4ee;
654
+ --ffe-color-syrin-25: #eaeaf6;
718
655
  --ffe-color-syrin-50: #e6e6f4;
719
656
  --ffe-color-syrin-75: #dcdcef;
720
657
  --ffe-color-syrin-100: #d3d3ea;
@@ -727,11 +664,16 @@
727
664
  --ffe-color-syrin-450: #8c88a0;
728
665
  --ffe-color-syrin-500: #79748b;
729
666
  --ffe-color-syrin-550: #686477;
667
+ --ffe-color-syrin-600: #5d5a6d;
668
+ --ffe-color-syrin-650: #514e5f;
730
669
  --ffe-color-syrin-700: #474457;
731
- --ffe-color-baer-50: #ffd7d1;
670
+ --ffe-color-syrin-750: #3d394c;
671
+ --ffe-color-syrin-800: #332f41;
672
+ --ffe-color-baer-50: #ffd5d1;
732
673
  --ffe-color-baer-100: #ffaea8;
733
674
  --ffe-color-baer-200: #ff7f7a;
734
675
  --ffe-color-baer-300: #ff5e5c;
676
+ --ffe-color-baer-400: #e44244;
735
677
  --ffe-color-baer-500: #c62a2f;
736
678
  --ffe-color-baer-700: #7c1214;
737
679
  --ffe-color-baer-800: #640e10;
@@ -744,6 +686,7 @@
744
686
  --ffe-color-skog-550: #2a7e5b;
745
687
  --ffe-color-skog-600: #00754e;
746
688
  --ffe-color-skog-650: #0d6346;
689
+ --ffe-color-skog-700: #09583b;
747
690
  --ffe-color-skog-750: #0a4d37;
748
691
  --ffe-color-skog-800: #0a4330;
749
692
  --ffe-color-sol-50: #ffe0b2;
@@ -758,8 +701,6 @@
758
701
  --ffe-color-gray-150: #c2c2c2;
759
702
  --ffe-color-gray-200: #b8b8b8;
760
703
  --ffe-color-gray-250: #adadad;
761
- --ffe-color-gray-300: #a4a4a4;
762
- --ffe-color-gray-450: #858585;
763
704
  --ffe-color-gray-550: #707070;
764
705
  --ffe-color-gray-600: #666666;
765
706
  --ffe-color-gray-650: #5c5c5c;
@@ -768,15 +709,7 @@
768
709
  --ffe-color-gray-850: #333333;
769
710
  --ffe-color-gray-900: #292929;
770
711
  --ffe-color-gray-950: #1f1f1f;
771
- --ffe-color-gray-1000: #141414;
772
- --ffe-color-gray-white: #ffffff;
773
712
  --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;
713
+ --ffe-color-alpha-white-100: #ffffff;
714
+ --ffe-color-alpha-black-100: #020a0a;
782
715
  }