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