@sb1/ffe-core 31.1.2 → 32.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/colors-semantic.css +502 -358
  2. package/css/ffe.css +503 -358
  3. package/less/colors-semantic-storybook.less +197 -137
  4. package/less/colors-semantic.less +502 -358
  5. package/less/variables.less +1 -0
  6. package/lib/semanticColors.js +17 -8
  7. package/lib/semanticColorsTailwind.js +17 -8
  8. package/package.json +2 -2
package/css/colors-semantic.css CHANGED
@@ -4,42 +4,51 @@
4
4
  .ffe-accent-mode {
5
5
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
6
6
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
7
- --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-subtlest);
8
- --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
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-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);
7
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-accent-accent);
8
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
9
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
10
+ --ffe-color-surface-secondary-default: #005aa4;
11
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
12
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
13
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-accent-accent);
14
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
15
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
16
16
  --ffe-color-surface-feedback-info: var(--ffe-color-accent-feedback-info-subtlest);
17
17
  --ffe-color-surface-feedback-success: var(--ffe-color-accent-feedback-success-subtlest);
18
18
  --ffe-color-surface-feedback-warning: var(--ffe-color-accent-feedback-warning-subtlest);
19
19
  --ffe-color-surface-feedback-critical: var(--ffe-color-accent-feedback-critical-subtlest);
20
20
  --ffe-color-surface-feedback-tip: var(--ffe-color-accent-feedback-tip-sublest);
21
- --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
22
- --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
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-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);
27
- --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtlest);
28
- --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtler);
29
- --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-subtle);
21
+ --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-strong);
22
+ --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-stronger);
23
+ --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-strongest);
24
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-accent-interactive-selected-default);
25
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-accent-interactive-selected-hover);
26
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-accent-interactive-selected-pressed);
27
+ --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtler);
28
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
29
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-default);
30
30
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
31
- --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
32
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
33
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
34
- --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtlest);
35
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtler);
36
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-subtle);
37
- --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
38
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
39
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-strongest);
40
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtlest);
41
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtler);
42
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
31
+ --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
32
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-strong);
33
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-stronger);
34
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
35
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
36
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
37
+ --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
38
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-strong);
39
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
40
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtle);
41
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-default);
42
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-medium);
43
+ --ffe-color-fill-neutral-default: var(--ffe-color-accent-neutral-alpha-strong);
44
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-accent-neutral-alpha-stronger);
45
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-accent-neutral-alpha-strongest);
46
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-accent-neutral-alpha-default);
47
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-accent-neutral-alpha-medium);
48
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-accent-neutral-alpha-strong);
49
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-accent-neutral-alpha-subtlest);
50
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-accent-neutral-alpha-subtler);
51
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-accent-neutral-alpha-subtle);
43
52
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
44
53
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
45
54
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
@@ -52,68 +61,68 @@
52
61
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
53
62
  --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
54
63
  --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
55
- --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
64
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-stronger);
56
65
  --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
57
66
  --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
58
67
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
59
- --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
60
- --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
61
- --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
68
+ --ffe-color-foreground-interactive-link: var(--ffe-color-accent-interactive-default);
69
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-accent-interactive-hover);
70
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-accent-interactive-pressed);
71
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-accent-interactive-selected-default);
62
72
  --ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
63
73
  --ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
64
74
  --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
65
75
  --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
66
76
  --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
67
- --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-medium);
68
- --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strong);
69
- --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-strongest);
70
- --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtler);
77
+ --ffe-color-border-primary-default: var(--ffe-color-speciality-static-alpha-white-stronger);
78
+ --ffe-color-border-primary-default-hover: var(--ffe-color-speciality-static-alpha-white-strong);
79
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-speciality-static-alpha-white-medium);
80
+ --ffe-color-border-primary-subtle: var(--ffe-color-speciality-static-alpha-white-default);
81
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-speciality-static-alpha-white-medium);
82
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-speciality-static-alpha-white-strong);
71
83
  --ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
72
- --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
73
- --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
74
- --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
75
- --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
76
- --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
77
- --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
78
- --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
84
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
85
+ --ffe-color-border-secondary-hover: var(--ffe-color-accent-brand-secondary-strong);
86
+ --ffe-color-border-secondary-pressed: var(--ffe-color-accent-brand-secondary-stronger);
87
+ --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
88
+ --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-strong);
89
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
79
90
  --ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
91
+ --ffe-color-border-interactive-selected: var(--ffe-color-accent-brand-primary-stronger);
80
92
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
81
93
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
82
94
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
83
95
  --ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
84
96
  --ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
85
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
86
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
87
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
88
- --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-strong);
89
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-stronger);
90
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-strongest);
91
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-accent-neutral-inverted);
92
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-accent-neutral-inverted);
93
- --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-primary-medium);
94
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-default);
95
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-stronger);
96
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-accent-brand-primary-strong);
97
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
98
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-accent-brand-primary-strongest);
99
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-accent-neutral-inverted);
100
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-accent-neutral-inverted);
101
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-accent-brand-primary-strong);
102
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-accent-brand-primary-stronger);
103
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-accent-brand-primary-strongest);
104
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
105
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
106
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
107
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
108
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
109
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-speciality-background-accent);
110
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
111
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
112
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-fill-primary-invisible);
113
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
114
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
115
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
116
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
97
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
98
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
99
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
100
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
101
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
102
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
103
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
104
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
105
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-emphasis-strong);
106
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-accent-brand-emphasis-stronger);
107
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-accent-brand-emphasis-strongest);
108
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-accent-fill-default);
109
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-accent-fill-hover);
110
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-accent-fill-pressed);
111
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
112
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
113
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
114
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
115
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
116
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-accent-fill-default);
117
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-accent-fill-hover);
118
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-accent-fill-pressed);
119
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
120
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
121
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-accent-fill-default);
122
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-accent-fill-hover);
123
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-accent-fill-pressed);
124
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
125
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
117
126
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
118
127
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
119
128
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -122,8 +131,8 @@
122
131
  --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
123
132
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
124
133
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
125
- --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
126
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
134
+ --ffe-color-component-logo-name: var(--ffe-color-alpha-white-1000);
135
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
127
136
  --ffe-color-component-logo-circle-dark-red: #af0000;
128
137
  --ffe-color-component-logo-circle-light-red: #e60000;}
129
138
 
@@ -134,42 +143,51 @@
134
143
  .ffe-default-mode {
135
144
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
136
145
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
137
- --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
138
- --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
139
- --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
140
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
141
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
142
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
143
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
144
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
145
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
146
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
147
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
148
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
149
+ --ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
150
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
151
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
152
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
153
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
154
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
146
155
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
147
156
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
148
157
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
149
158
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
150
159
  --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
151
- --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
152
- --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
153
- --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
154
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
155
- --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
156
- --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
160
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
161
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
162
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
163
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
164
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
165
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
157
166
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
158
167
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
159
168
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
160
169
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
161
- --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
162
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
163
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
164
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
165
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
166
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
167
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
168
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
169
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
170
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
171
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
172
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
170
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
171
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
172
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
173
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
174
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
175
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
176
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
177
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
178
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
179
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
180
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
181
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
182
+ --ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
183
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
184
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
185
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
186
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
187
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
188
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
189
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
190
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
173
191
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
174
192
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
175
193
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
@@ -182,68 +200,68 @@
182
200
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
183
201
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
184
202
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
185
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
186
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
203
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
204
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
187
205
  --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
188
206
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
189
207
  --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
190
208
  --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
191
209
  --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
210
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
192
211
  --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
193
212
  --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
194
213
  --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
195
214
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
196
215
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
197
- --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
198
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
199
- --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
216
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
217
+ --ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
218
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
200
219
  --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
220
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
221
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
201
222
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
202
- --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
203
- --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
223
+ --ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
204
224
  --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
205
225
  --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
206
- --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
207
- --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
208
- --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
226
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
227
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
228
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
209
229
  --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
230
+ --ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
210
231
  --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
211
232
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
212
233
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
213
234
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
214
235
  --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
215
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
216
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
217
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
218
- --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
219
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
220
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
221
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
222
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
223
- --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
224
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
225
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
226
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
227
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
228
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
229
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
230
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
231
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
232
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
233
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
234
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
235
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
236
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
237
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
238
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
239
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
240
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
241
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
242
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
243
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
244
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
245
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
246
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
236
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
237
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
238
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
239
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
240
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
241
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
242
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
243
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
244
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
245
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
246
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
247
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
248
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
249
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
250
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
251
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
252
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
253
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
254
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
255
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
256
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
257
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
258
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
259
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
260
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
261
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
262
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
263
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
264
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
247
265
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
248
266
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
249
267
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -253,7 +271,7 @@
253
271
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
254
272
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
255
273
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
256
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
274
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
257
275
  --ffe-color-component-logo-circle-dark-red: #af0000;
258
276
  --ffe-color-component-logo-circle-light-red: #e60000;}
259
277
 
@@ -264,23 +282,22 @@
264
282
  --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-50);
265
283
  --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-150);
266
284
  --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-250);
267
- --ffe-color-default-brand-primary-default: var(--ffe-color-vann-350);
268
- --ffe-color-default-brand-primary-medium: var(--ffe-color-vann-500);
269
285
  --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
270
286
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
271
287
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
272
- --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
273
288
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
274
289
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
290
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
291
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
275
292
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
276
293
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
277
- --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
278
- --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
279
- --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
280
294
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
295
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
296
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-250);
281
297
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
282
298
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
283
- --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
299
+ --ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-550);
300
+ --ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-650);
284
301
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
285
302
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
286
303
  --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
@@ -288,8 +305,6 @@
288
305
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
289
306
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
290
307
  --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
291
- --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
292
- --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
293
308
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
294
309
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
295
310
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
@@ -306,40 +321,50 @@
306
321
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
307
322
  --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
308
323
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
309
- --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
310
324
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
311
- --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
325
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
326
+ --ffe-color-default-neutral-subtlest: var(--ffe-color-gray-25);
312
327
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
313
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
314
- --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
328
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
329
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-150);
330
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-300);
331
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-400);
315
332
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
316
- --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
333
+ --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-1000);
334
+ --ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-black-25);
335
+ --ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-black-50);
336
+ --ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-black-75);
337
+ --ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-black-100);
338
+ --ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-black-200);
339
+ --ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-black-300);
340
+ --ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-black-400);
341
+ --ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-black-500);
317
342
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
318
343
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
319
344
  --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
320
345
  --ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
321
- --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-vann-600);
322
- --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-500);
323
- --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-400);
324
- --ffe-color-accent-brand-primary-medium: var(--ffe-color-vann-250);
325
- --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-150);
326
- --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-75);
327
- --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-25);
328
- --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
329
- --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
330
- --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
331
- --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
346
+ --ffe-color-default-interactive-selected-default: var(--ffe-color-vann-600);
347
+ --ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-700);
348
+ --ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-800);
349
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-600);
350
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-500);
351
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-vann-400);
352
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-200);
353
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-100);
354
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-50);
355
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-650);
356
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
357
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-550);
358
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
332
359
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
333
360
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
334
- --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-25);
335
- --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-600);
336
- --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-500);
337
- --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-400);
338
- --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
339
- --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
340
- --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
361
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-650);
362
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-600);
363
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
364
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-150);
341
365
  --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
342
- --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
366
+ --ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-100);
367
+ --ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-75);
343
368
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
344
369
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
345
370
  --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
@@ -347,10 +372,9 @@
347
372
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
348
373
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
349
374
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
350
- --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-500);
375
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
351
376
  --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
352
377
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
353
- --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
354
378
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
355
379
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
356
380
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
@@ -366,52 +390,96 @@
366
390
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
367
391
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
368
392
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
369
- --ffe-color-accent-neutral-subtlest: var(--ffe-color-vann-600);
370
- --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
371
- --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
372
- --ffe-color-accent-neutral-medium: var(--ffe-color-vann-150);
373
- --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
374
- --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
393
+ --ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
394
+ --ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
395
+ --ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
396
+ --ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
397
+ --ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
398
+ --ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
399
+ --ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
400
+ --ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
401
+ --ffe-color-accent-neutral-strong: var(--ffe-color-alpha-white-500);
402
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
375
403
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
376
- --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
404
+ --ffe-color-accent-interactive-default: var(--ffe-color-vann-0);
405
+ --ffe-color-accent-interactive-hover: var(--ffe-color-vann-25);
406
+ --ffe-color-accent-interactive-pressed: var(--ffe-color-vann-50);
407
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
408
+ --ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
409
+ --ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
410
+ --ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
377
411
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
378
- --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
379
- --ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
412
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-1000);
413
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
380
414
  --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
381
- --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-850);
382
- --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
383
- --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
384
- --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
415
+ --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-700);
385
416
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
386
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
387
- --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
388
- --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
389
- --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
417
+ --ffe-color-speciality-background-surface-primary-default: var(--ffe-color-alpha-white-1000);
418
+ --ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-25);
419
+ --ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-50);
420
+ --ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-frost-25);
421
+ --ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-frost-50);
422
+ --ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-frost-75);
423
+ --ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-syrin-25);
424
+ --ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-syrin-50);
425
+ --ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-syrin-75);
426
+ --ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-vann-600);
427
+ --ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-vann-500);
428
+ --ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-vann-400);
429
+ --ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-600);
430
+ --ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-700);
431
+ --ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-800);
432
+ --ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-25);
433
+ --ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-75);
434
+ --ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-100);
435
+ --ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-vann-850);
436
+ --ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-600);
437
+ --ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
438
+ --ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-water-100);
439
+ --ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-water-200);
440
+ --ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-700);
441
+ --ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-alpha-white-1000);
442
+ --ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
443
+ --ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
444
+ --ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
445
+ --ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
446
+ --ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
447
+ --ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-water-100);
448
+ --ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-water-200);
449
+ --ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-700);
450
+ --ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
451
+ --ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
452
+ --ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
453
+ --ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
454
+ --ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
455
+ --ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
456
+ --ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
457
+ --ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
458
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
390
459
  }
391
460
 
392
461
  // Semantic dark
393
462
  @media (prefers-color-scheme: dark) {
394
463
  :where(.regard-color-scheme-preference){
395
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
396
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
397
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
398
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
399
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
400
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
401
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
402
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
403
- --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
404
- --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
405
- --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
464
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-800);
465
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-700);
466
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-600);
467
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-300);
468
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-200);
469
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-100);
470
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-800);
471
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-700);
472
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-600);
473
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-500);
406
474
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
407
475
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
408
- --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
409
- --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
410
- --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
411
- --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
412
- --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
413
- --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
414
- --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
476
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-750);
477
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-650);
478
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-550);
479
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-300);
480
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-200);
481
+ --ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-300);
482
+ --ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-150);
415
483
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
416
484
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
417
485
  --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
@@ -419,8 +487,6 @@
419
487
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
420
488
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
421
489
  --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
422
- --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
423
- --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
424
490
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
425
491
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
426
492
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
@@ -437,40 +503,50 @@
437
503
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
438
504
  --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
439
505
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
440
- --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
441
506
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
442
- --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
507
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
508
+ --ffe-color-default-neutral-subtlest: var(--ffe-color-gray-900);
443
509
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
510
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
511
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-500);
444
512
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
445
513
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
446
- --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
447
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
448
- --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
449
- --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
450
- --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
451
- --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-100);
452
- --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
453
- --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
454
- --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
455
- --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
456
- --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
457
- --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
458
- --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
459
- --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
460
- --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
461
- --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
462
- --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
514
+ --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-1000);
515
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-1000);
516
+ --ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
517
+ --ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
518
+ --ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
519
+ --ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-white-100);
520
+ --ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
521
+ --ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
522
+ --ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
523
+ --ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
524
+ --ffe-color-default-interactive-default: var(--ffe-color-vann-400);
525
+ --ffe-color-default-interactive-hover: var(--ffe-color-vann-300);
526
+ --ffe-color-default-interactive-pressed: var(--ffe-color-vann-200);
527
+ --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-1000);
528
+ --ffe-color-default-interactive-selected-default: var(--ffe-color-alpha-white-1000);
529
+ --ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-50);
530
+ --ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-100);
531
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-700);
532
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-600);
533
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-vann-500);
534
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-300);
535
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-200);
536
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-100);
537
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-800);
538
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-700);
539
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-600);
540
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
463
541
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
464
542
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
465
- --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
466
- --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
467
- --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-650);
468
- --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-550);
469
- --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
470
- --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
471
- --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
472
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
473
- --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
543
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-750);
544
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-650);
545
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
546
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
547
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
548
+ --ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-300);
549
+ --ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-150);
474
550
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
475
551
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
476
552
  --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
@@ -478,10 +554,9 @@
478
554
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
479
555
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
480
556
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
481
- --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
557
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
482
558
  --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
483
559
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
484
- --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
485
560
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
486
561
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
487
562
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
@@ -497,66 +572,120 @@
497
572
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
498
573
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
499
574
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
500
- --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
501
- --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
502
- --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
503
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
575
+ --ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
576
+ --ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
577
+ --ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
578
+ --ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
579
+ --ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
580
+ --ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
581
+ --ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
582
+ --ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
504
583
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
505
- --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
584
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
506
585
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
507
- --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
508
- --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
509
- --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
586
+ --ffe-color-accent-interactive-default: var(--ffe-color-vann-300);
587
+ --ffe-color-accent-interactive-hover: var(--ffe-color-vann-400);
588
+ --ffe-color-accent-interactive-pressed: var(--ffe-color-vann-500);
589
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
590
+ --ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
591
+ --ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
592
+ --ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
593
+ --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-1000);
594
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-1000);
510
595
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
511
- --ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
512
- --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
513
- --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
514
- --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
515
- --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
596
+ --ffe-color-speciality-background-accent: var(--ffe-color-gray-1000);
597
+ --ffe-color-speciality-background-accent-subtle: var(--ffe-color-gray-950);
516
598
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
517
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
518
- --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
519
- --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
520
- --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
599
+ --ffe-color-speciality-background-surface-primary-default: var(--ffe-color-gray-900);
600
+ --ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-800);
601
+ --ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-700);
602
+ --ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-gray-900);
603
+ --ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-gray-800);
604
+ --ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-gray-700);
605
+ --ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-gray-900);
606
+ --ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-gray-800);
607
+ --ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-gray-700);
608
+ --ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-gray-900);
609
+ --ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-gray-800);
610
+ --ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-gray-700);
611
+ --ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-550);
612
+ --ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-500);
613
+ --ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-400);
614
+ --ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-550);
615
+ --ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-500);
616
+ --ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-400);
617
+ --ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
618
+ --ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-300);
619
+ --ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
620
+ --ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-white-100);
621
+ --ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-white-200);
622
+ --ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-100);
623
+ --ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-vann-300);
624
+ --ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
625
+ --ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
626
+ --ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
627
+ --ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-vann-100);
628
+ --ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
629
+ --ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-white-100);
630
+ --ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-white-200);
631
+ --ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-100);
632
+ --ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
633
+ --ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
634
+ --ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
635
+ --ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-vann-100);
636
+ --ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
637
+ --ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
638
+ --ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
639
+ --ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
640
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
521
641
  //inlined context to make darkmode work
522
642
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
523
643
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
524
- --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
525
- --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
526
- --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
527
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
528
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
529
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
530
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
531
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
532
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
644
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
645
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
646
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
647
+ --ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
648
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
649
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
650
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
651
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
652
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
533
653
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
534
654
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
535
655
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
536
656
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
537
657
  --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
538
- --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
539
- --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
540
- --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
541
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
542
- --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
543
- --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
658
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
659
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
660
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
661
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
662
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
663
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
544
664
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
545
665
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
546
666
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
547
667
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
548
- --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
549
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
550
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
551
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
552
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
553
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
554
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
555
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
556
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
557
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
558
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
559
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
668
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
669
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
670
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
671
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
672
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
673
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
674
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
675
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
676
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
677
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
678
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
679
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
680
+ --ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
681
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
682
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
683
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
684
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
685
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
686
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
687
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
688
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
560
689
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
561
690
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
562
691
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
@@ -569,68 +698,68 @@
569
698
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
570
699
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
571
700
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
572
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
573
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
701
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
702
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
574
703
  --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
575
704
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
576
705
  --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
577
706
  --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
578
707
  --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
708
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
579
709
  --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
580
710
  --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
581
711
  --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
582
712
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
583
713
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
584
- --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
585
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
586
- --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
714
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
715
+ --ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
716
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
587
717
  --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
718
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
719
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
588
720
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
589
- --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
590
- --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
721
+ --ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
591
722
  --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
592
723
  --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
593
- --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
594
- --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
595
- --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
724
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
725
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
726
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
596
727
  --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
728
+ --ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
597
729
  --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
598
730
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
599
731
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
600
732
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
601
733
  --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
602
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
603
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
604
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
605
- --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
606
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
607
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
608
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
609
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
610
- --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
611
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
612
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
613
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
614
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
615
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
616
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
617
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
618
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
619
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
620
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
621
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
622
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
623
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
624
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
625
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
626
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
627
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
628
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
629
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
630
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
631
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
632
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
633
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
734
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
735
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
736
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
737
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
738
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
739
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
740
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
741
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
742
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
743
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
744
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
745
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
746
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
747
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
748
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
749
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
750
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
751
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
752
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
753
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
754
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
755
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
756
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
757
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
758
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
759
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
760
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
761
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
762
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
634
763
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
635
764
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
636
765
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -640,19 +769,22 @@
640
769
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
641
770
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
642
771
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
643
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
772
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
644
773
  --ffe-color-component-logo-circle-dark-red: #af0000;
645
774
  --ffe-color-component-logo-circle-light-red: #e60000;}
646
775
  }
647
776
 
648
777
  :root,
649
778
  :host {
779
+ --ffe-color-vann-0: #f7fafd;
650
780
  --ffe-color-vann-25: #e7f1f9;
651
781
  --ffe-color-vann-50: #d7e7f4;
652
782
  --ffe-color-vann-75: #cfe2f2;
783
+ --ffe-color-vann-100: #c3d9ef;
653
784
  --ffe-color-vann-150: #b6d1ec;
785
+ --ffe-color-vann-200: #9ec2e5;
654
786
  --ffe-color-vann-250: #8eb8e1;
655
- --ffe-color-vann-350: #6ba1d6;
787
+ --ffe-color-vann-300: #7dabd9;
656
788
  --ffe-color-vann-400: #5494d4;
657
789
  --ffe-color-vann-500: #2975c2;
658
790
  --ffe-color-vann-550: #1566b2;
@@ -662,32 +794,23 @@
662
794
  --ffe-color-vann-800: #002776;
663
795
  --ffe-color-vann-850: #08235e;
664
796
  --ffe-color-vann-1000: #070d27;
665
- --ffe-color-natt-50: #dfe6f1;
666
- --ffe-color-natt-100: #c9d5e8;
667
- --ffe-color-natt-200: #acbfdc;
668
- --ffe-color-natt-300: #90a9d0;
669
- --ffe-color-natt-400: #748db4;
670
- --ffe-color-natt-500: #55709b;
671
- --ffe-color-natt-600: #3e5579;
672
- --ffe-color-natt-700: #2e405c;
673
- --ffe-color-natt-800: #202c3f;
674
- --ffe-color-natt-950: #101622;
675
797
  --ffe-color-frost-25: #e5f0f5;
676
798
  --ffe-color-frost-50: #dceaef;
677
799
  --ffe-color-frost-75: #cbe2eb;
678
800
  --ffe-color-frost-100: #c3dfea;
679
801
  --ffe-color-frost-150: #b6d7e7;
680
802
  --ffe-color-frost-200: #a6cee2;
803
+ --ffe-color-frost-250: #95c3db;
681
804
  --ffe-color-frost-300: #7eb5d2;
682
805
  --ffe-color-frost-350: #6ea6c9;
683
- --ffe-color-frost-400: #6096bd;
684
806
  --ffe-color-frost-450: #5489b0;
685
807
  --ffe-color-frost-500: #457aa1;
686
808
  --ffe-color-frost-550: #3b6f96;
687
809
  --ffe-color-frost-600: #356488;
810
+ --ffe-color-frost-650: #2b5a7c;
688
811
  --ffe-color-frost-700: #234f71;
689
812
  --ffe-color-frost-800: #163853;
690
- --ffe-color-sand-0: #fdf8f5;
813
+ --ffe-color-sand-25: #fcf4ee;
691
814
  --ffe-color-syrin-25: #eaeaf6;
692
815
  --ffe-color-syrin-50: #e6e6f4;
693
816
  --ffe-color-syrin-75: #dcdcef;
@@ -696,8 +819,6 @@
696
819
  --ffe-color-syrin-200: #c1c1dc;
697
820
  --ffe-color-syrin-250: #bcb8d5;
698
821
  --ffe-color-syrin-300: #b4aecb;
699
- --ffe-color-syrin-350: #a9a4c1;
700
- --ffe-color-syrin-400: #a39db9;
701
822
  --ffe-color-syrin-450: #948ba7;
702
823
  --ffe-color-syrin-500: #817792;
703
824
  --ffe-color-syrin-550: #6a627f;
@@ -737,19 +858,42 @@
737
858
  --ffe-color-sol-650: #753500;
738
859
  --ffe-color-sol-700: #682c00;
739
860
  --ffe-color-sol-750: #582400;
861
+ --ffe-color-gray-25: #f0f0f0;
740
862
  --ffe-color-gray-50: #e5e5e5;
863
+ --ffe-color-gray-100: #d6d6d6;
864
+ --ffe-color-gray-150: #c2c2c2;
741
865
  --ffe-color-gray-250: #adadad;
742
- --ffe-color-gray-350: #999999;
866
+ --ffe-color-gray-300: #a4a4a4;
743
867
  --ffe-color-gray-400: #8f8f8f;
744
- --ffe-color-gray-600: #666666;
868
+ --ffe-color-gray-500: #7a7a7a;
745
869
  --ffe-color-gray-650: #5c5c5c;
746
870
  --ffe-color-gray-700: #525252;
747
871
  --ffe-color-gray-750: #474747;
748
- --ffe-color-gray-850: #333333;
872
+ --ffe-color-gray-800: #3d3d3d;
749
873
  --ffe-color-gray-900: #292929;
750
874
  --ffe-color-gray-950: #1f1f1f;
751
875
  --ffe-color-gray-1000: #141414;
752
876
  --ffe-color-alpha-white-0: #ffffff00;
753
- --ffe-color-alpha-white-100: #ffffff;
754
- --ffe-color-alpha-black-100: #020a0a;
877
+ --ffe-color-alpha-white-25: #ffffff06;
878
+ --ffe-color-alpha-white-50: #ffffff0d;
879
+ --ffe-color-alpha-white-75: #ffffff13;
880
+ --ffe-color-alpha-white-100: #ffffff1a;
881
+ --ffe-color-alpha-white-200: #ffffff33;
882
+ --ffe-color-alpha-white-300: #ffffff4d;
883
+ --ffe-color-alpha-white-400: #ffffff66;
884
+ --ffe-color-alpha-white-500: #ffffff80;
885
+ --ffe-color-alpha-white-600: #ffffff99;
886
+ --ffe-color-alpha-white-700: #ffffffb2;
887
+ --ffe-color-alpha-white-1000: #ffffff;
888
+ --ffe-color-alpha-black-25: #020a0a06;
889
+ --ffe-color-alpha-black-50: #020a0a0d;
890
+ --ffe-color-alpha-black-75: #020a0a13;
891
+ --ffe-color-alpha-black-100: #020a0a1a;
892
+ --ffe-color-alpha-black-200: #020a0a33;
893
+ --ffe-color-alpha-black-300: #020a0a4d;
894
+ --ffe-color-alpha-black-400: #020a0a66;
895
+ --ffe-color-alpha-black-500: #020a0a80;
896
+ --ffe-color-alpha-black-1000: #020a0a;
897
+ --ffe-color-alpha-water-100: #005aa41a;
898
+ --ffe-color-alpha-water-200: #005aa433;
755
899
  }