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