@sb1/ffe-core 29.5.2 → 30.0.1

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