@sb1/ffe-core 33.1.0 → 33.2.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 (5) hide show
  1. package/css/colors-semantic.css +651 -354
  2. package/css/ffe.css +690 -398
  3. package/less/colors-semantic.less +651 -354
  4. package/package.json +3 -3
  5. package/less/colors-semantic-storybook.less +0 -290
package/css/colors-semantic.css CHANGED
@@ -1,193 +1,198 @@
1
1
 
2
2
  /* Generated from Figma tokens */
3
3
 
4
- /* Default context */
5
- :root,
6
- :host,
7
- .ffe-default-mode {
8
- --ffe-color-background-default: #ffffff;
9
- --ffe-color-background-subtle: #fdf8f5;
10
- --ffe-color-surface-primary-default: #ffffff;
11
- --ffe-color-surface-primary-default-hover: #e7f1f9;
12
- --ffe-color-surface-primary-default-pressed: #d7e7f4;
13
- --ffe-color-surface-secondary-default: #e5f0f5;
14
- --ffe-color-surface-secondary-default-hover: #dceaef;
15
- --ffe-color-surface-secondary-default-pressed: #cbe2eb;
16
- --ffe-color-surface-tertiary-default: #eaeaf6;
17
- --ffe-color-surface-tertiary-default-hover: #e6e6f4;
18
- --ffe-color-surface-tertiary-default-pressed: #dcdcef;
19
- --ffe-color-surface-neutral-default: #f0f0f0;
20
- --ffe-color-surface-neutral-default-hover: #e5e5e5;
21
- --ffe-color-surface-neutral-default-pressed: #dbdbdb;
22
- --ffe-color-surface-feedback-info: #e5f0f5;
23
- --ffe-color-surface-feedback-success: #dff6eb;
24
- --ffe-color-surface-feedback-warning: #fdeed3;
25
- --ffe-color-surface-feedback-critical: #ffe3e0;
26
- --ffe-color-surface-feedback-tip: #eaeaf6;
27
- --ffe-color-fill-primary-default: #9ec2e5;
28
- --ffe-color-fill-primary-default-hover: #7dabd9;
29
- --ffe-color-fill-primary-default-pressed: #5494d4;
30
- --ffe-color-fill-primary-selected-default: #005aa4;
31
- --ffe-color-fill-primary-selected-hover: #073f83;
32
- --ffe-color-fill-primary-selected-pressed: #082868;
33
- --ffe-color-fill-primary-subtle: #e7f1f9;
34
- --ffe-color-fill-primary-subtle-hover: #d7e7f4;
35
- --ffe-color-fill-primary-subtle-pressed: #c3d9ef;
4
+
5
+
6
+ /* dark mode default context */
7
+ @media (prefers-color-scheme: dark) {
8
+ .regard-color-scheme-preference,
9
+ .regard-color-scheme-preference .ffe-default-mode {
10
+ --ffe-color-background-default: #020a0a;
11
+ --ffe-color-background-subtle: #1f1f1f;
12
+ --ffe-color-surface-primary-default: #292929;
13
+ --ffe-color-surface-primary-default-hover: #333333;
14
+ --ffe-color-surface-primary-default-pressed: #3d3d3d;
15
+ --ffe-color-surface-secondary-default: #0c2232;
16
+ --ffe-color-surface-secondary-default-hover: #102d43;
17
+ --ffe-color-surface-secondary-default-pressed: #163853;
18
+ --ffe-color-surface-tertiary-default: #1d192f;
19
+ --ffe-color-surface-tertiary-default-hover: #27223a;
20
+ --ffe-color-surface-tertiary-default-pressed: #312c44;
21
+ --ffe-color-surface-neutral-default: #3d3d3d;
22
+ --ffe-color-surface-neutral-default-hover: #474747;
23
+ --ffe-color-surface-neutral-default-pressed: #525252;
24
+ --ffe-color-surface-feedback-info: #163853;
25
+ --ffe-color-surface-feedback-success: #0a4330;
26
+ --ffe-color-surface-feedback-warning: #491c00;
27
+ --ffe-color-surface-feedback-critical: #640e10;
28
+ --ffe-color-surface-feedback-tip: #312c44;
29
+ --ffe-color-fill-primary-default: #55709b;
30
+ --ffe-color-fill-primary-default-hover: #748db4;
31
+ --ffe-color-fill-primary-default-pressed: #90a9d0;
32
+ --ffe-color-fill-primary-selected-default: #f7fafd;
33
+ --ffe-color-fill-primary-selected-hover: #d7e7f4;
34
+ --ffe-color-fill-primary-selected-pressed: #c3d9ef;
35
+ --ffe-color-fill-primary-subtle: #2e405c;
36
+ --ffe-color-fill-primary-subtle-hover: #374b6c;
37
+ --ffe-color-fill-primary-subtle-pressed: #3e5579;
36
38
  --ffe-color-fill-primary-invisible: #ffffff00;
37
- --ffe-color-fill-secondary-default: #a6cee2;
38
- --ffe-color-fill-secondary-default-hover: #7eb5d2;
39
- --ffe-color-fill-secondary-default-pressed: #6096bd;
40
- --ffe-color-fill-secondary-subtle: #dceaef;
41
- --ffe-color-fill-secondary-subtle-hover: #c3dfea;
42
- --ffe-color-fill-secondary-subtle-pressed: #b6d7e7;
43
- --ffe-color-fill-tertiary-default: #c1c1dc;
44
- --ffe-color-fill-tertiary-default-hover: #b4aecb;
45
- --ffe-color-fill-tertiary-default-pressed: #a39db9;
46
- --ffe-color-fill-tertiary-subtle: #e6e6f4;
47
- --ffe-color-fill-tertiary-subtle-hover: #d3d3ea;
48
- --ffe-color-fill-tertiary-subtle-pressed: #cacae3;
49
- --ffe-color-fill-neutral-default: #020a0a33;
50
- --ffe-color-fill-neutral-default-hover: #020a0a40;
51
- --ffe-color-fill-neutral-default-pressed: #020a0a4d;
52
- --ffe-color-fill-neutral-subtle: #020a0a13;
53
- --ffe-color-fill-neutral-subtle-hover: #020a0a1a;
54
- --ffe-color-fill-neutral-subtle-pressed: #020a0a26;
55
- --ffe-color-fill-neutral-extra-subtle: #020a0a06;
56
- --ffe-color-fill-neutral-extra-subtle-hover: #020a0a0d;
57
- --ffe-color-fill-neutral-extra-subtle-pressed: #020a0a13;
58
- --ffe-color-fill-feedback-info: #457aa1;
59
- --ffe-color-fill-feedback-info-subtle: #cbe2eb;
60
- --ffe-color-fill-feedback-success: #2a7e5b;
61
- --ffe-color-fill-feedback-success-subtle: #bbedd5;
62
- --ffe-color-fill-feedback-warning: #a95704;
63
- --ffe-color-fill-feedback-warning-subtle: #ffd394;
64
- --ffe-color-fill-feedback-critical: #c62a2f;
65
- --ffe-color-fill-feedback-critical-subtle: #ffbeb8;
66
- --ffe-color-fill-feedback-tip: #5a5671;
67
- --ffe-color-fill-feedback-tip-subtle: #dcdcef;
68
- --ffe-color-foreground-default: #1f1f1f;
69
- --ffe-color-foreground-subtle: #525252;
70
- --ffe-color-foreground-emphasis: #08235e;
71
- --ffe-color-foreground-inverse: #ffffff;
72
- --ffe-color-foreground-interactive-link: #005aa4;
73
- --ffe-color-foreground-interactive-link-hover: #073f83;
74
- --ffe-color-foreground-interactive-link-pressed: #082868;
75
- --ffe-color-foreground-interactive-link-active: #005aa4;
76
- --ffe-color-foreground-feedback-info: #234f71;
77
- --ffe-color-foreground-feedback-success: #0a4d37;
78
- --ffe-color-foreground-feedback-warning: #682c00;
79
- --ffe-color-foreground-feedback-critical: #7c1214;
80
- --ffe-color-foreground-feedback-tip: #45415a;
81
- --ffe-color-component-form-input-foreground-default: #1f1f1f;
82
- --ffe-color-component-form-input-foreground-subtle: #525252;
83
- --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
84
- --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
85
- --ffe-color-component-form-input-foreground-read-only: #525252;
86
- --ffe-color-component-form-input-foreground-error: #7c1214;
87
- --ffe-color-component-form-input-border-active: #08235e;
88
- --ffe-color-component-form-input-fill-default: #ffffff;
89
- --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
90
- --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
91
- --ffe-color-component-form-input-fill-disabled: #d6d6d6;
92
- --ffe-color-component-form-input-fill-read-only: #e5e5e5;
93
- --ffe-color-component-form-input-fill-error: #ffe3e0;
39
+ --ffe-color-fill-secondary-default: #457aa1;
40
+ --ffe-color-fill-secondary-default-hover: #6096bd;
41
+ --ffe-color-fill-secondary-default-pressed: #7eb5d2;
42
+ --ffe-color-fill-secondary-subtle: #2b5a7c;
43
+ --ffe-color-fill-secondary-subtle-hover: #356488;
44
+ --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
45
+ --ffe-color-fill-tertiary-default: #7b718e;
46
+ --ffe-color-fill-tertiary-default-hover: #a39db9;
47
+ --ffe-color-fill-tertiary-default-pressed: #b4aecb;
48
+ --ffe-color-fill-tertiary-subtle: #4e4a64;
49
+ --ffe-color-fill-tertiary-subtle-hover: #5a5671;
50
+ --ffe-color-fill-tertiary-subtle-pressed: #665d79;
51
+ --ffe-color-fill-neutral-default: #ffffff33;
52
+ --ffe-color-fill-neutral-default-hover: #ffffff40;
53
+ --ffe-color-fill-neutral-default-pressed: #ffffff4d;
54
+ --ffe-color-fill-neutral-subtle: #ffffff13;
55
+ --ffe-color-fill-neutral-subtle-hover: #ffffff1a;
56
+ --ffe-color-fill-neutral-subtle-pressed: #ffffff26;
57
+ --ffe-color-fill-neutral-extra-subtle: #ffffff06;
58
+ --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
59
+ --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
60
+ --ffe-color-fill-feedback-info: #7eb5d2;
61
+ --ffe-color-fill-feedback-info-subtle: #234f71;
62
+ --ffe-color-fill-feedback-success: #6abe97;
63
+ --ffe-color-fill-feedback-success-subtle: #09583b;
64
+ --ffe-color-fill-feedback-warning: #ea910b;
65
+ --ffe-color-fill-feedback-warning-subtle: #682c00;
66
+ --ffe-color-fill-feedback-critical: #ff5e5c;
67
+ --ffe-color-fill-feedback-critical-subtle: #7c1214;
68
+ --ffe-color-fill-feedback-tip: #c1c1dc;
69
+ --ffe-color-fill-feedback-tip-subtle: #45415a;
70
+ --ffe-color-foreground-default: #ffffff;
71
+ --ffe-color-foreground-subtle: #c2c2c2;
72
+ --ffe-color-foreground-emphasis: #d7e7f4;
73
+ --ffe-color-foreground-inverse: #020a0a;
74
+ --ffe-color-foreground-interactive-link: #c3d9ef;
75
+ --ffe-color-foreground-interactive-link-hover: #b6d1ec;
76
+ --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
77
+ --ffe-color-foreground-interactive-link-active: #f7fafd;
78
+ --ffe-color-foreground-feedback-info: #c3dfea;
79
+ --ffe-color-foreground-feedback-success: #b2e6cd;
80
+ --ffe-color-foreground-feedback-warning: #ffc675;
81
+ --ffe-color-foreground-feedback-critical: #ffaea8;
82
+ --ffe-color-foreground-feedback-tip: #d3d3ea;
83
+ --ffe-color-component-form-input-foreground-default: #ffffff;
84
+ --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
85
+ --ffe-color-component-form-input-foreground-placeholder: #adadad;
86
+ --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
87
+ --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
88
+ --ffe-color-component-form-input-foreground-error: #ffaea8;
89
+ --ffe-color-component-form-input-border-active: #d7e7f4;
90
+ --ffe-color-component-form-input-fill-default: #292929;
91
+ --ffe-color-component-form-input-fill-default-hover: #333333;
92
+ --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
93
+ --ffe-color-component-form-input-fill-disabled: #5c5c5c;
94
+ --ffe-color-component-form-input-fill-read-only: #474747;
95
+ --ffe-color-component-form-input-fill-error: #640e10;
94
96
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
95
- --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
96
- --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
97
- --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
97
+ --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
98
+ --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
99
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
98
100
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
99
- --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
100
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
101
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
102
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
101
103
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
102
104
  --ffe-color-component-button-action-border-default: #48a781;
103
- --ffe-color-component-button-action-border-hover: #2a7e5b;
104
- --ffe-color-component-button-action-border-pressed: #0d6346;
105
- --ffe-color-component-button-action-fill-default: #2a7e5b;
106
- --ffe-color-component-button-action-fill-hover: #0d6346;
107
- --ffe-color-component-button-action-fill-pressed: #0a4d37;
105
+ --ffe-color-component-button-action-border-hover: #6abe97;
106
+ --ffe-color-component-button-action-border-pressed: #8fd1b1;
107
+ --ffe-color-component-button-action-fill-default: #00754e;
108
+ --ffe-color-component-button-action-fill-hover: #2a7e5b;
109
+ --ffe-color-component-button-action-fill-pressed: #409674;
108
110
  --ffe-color-component-button-action-foreground-default: #ffffff;
109
111
  --ffe-color-component-button-action-foreground-hover: #ffffff;
110
- --ffe-color-component-button-primary-border-default: #084f91;
111
- --ffe-color-component-button-primary-border-hover: #04347c;
112
- --ffe-color-component-button-primary-border-pressed: #08235e;
113
- --ffe-color-component-button-primary-fill-default: #084f91;
114
- --ffe-color-component-button-primary-fill-hover: #073f83;
115
- --ffe-color-component-button-primary-fill-pressed: #082868;
112
+ --ffe-color-component-button-primary-border-default: #9ec2e5;
113
+ --ffe-color-component-button-primary-border-hover: #c3d9ef;
114
+ --ffe-color-component-button-primary-border-pressed: #d7e7f4;
115
+ --ffe-color-component-button-primary-fill-default: #005aa4;
116
+ --ffe-color-component-button-primary-fill-hover: #1566b2;
117
+ --ffe-color-component-button-primary-fill-pressed: #2975c2;
116
118
  --ffe-color-component-button-primary-foreground-default: #ffffff;
117
119
  --ffe-color-component-button-primary-foreground-hover: #ffffff;
118
- --ffe-color-component-button-secondary-border-default: #08235e;
119
- --ffe-color-component-button-secondary-border-hover: #08235e;
120
- --ffe-color-component-button-secondary-border-pressed: #08235e;
120
+ --ffe-color-component-button-secondary-border-default: #f7fafd;
121
+ --ffe-color-component-button-secondary-border-hover: #f7fafd;
122
+ --ffe-color-component-button-secondary-border-pressed: #f7fafd;
121
123
  --ffe-color-component-button-secondary-fill-default: #ffffff00;
122
- --ffe-color-component-button-secondary-fill-hover: #d7e7f4;
123
- --ffe-color-component-button-secondary-fill-pressed: #c3d9ef;
124
- --ffe-color-component-button-secondary-foreground-default: #08235e;
125
- --ffe-color-component-button-secondary-foreground-hover: #08235e;
124
+ --ffe-color-component-button-secondary-fill-hover: #333333;
125
+ --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
126
+ --ffe-color-component-button-secondary-foreground-default: #ffffff;
127
+ --ffe-color-component-button-secondary-foreground-hover: #ffffff;
126
128
  --ffe-color-component-button-tertiary-fill-default: #ffffff00;
127
- --ffe-color-component-button-tertiary-fill-hover: #d7e7f4;
128
- --ffe-color-component-button-tertiary-fill-pressed: #c3d9ef;
129
- --ffe-color-component-button-tertiary-foreground-default: #08235e;
130
- --ffe-color-component-button-tertiary-foreground-hover: #08235e;
131
- --ffe-color-component-logo-name: #082868;
129
+ --ffe-color-component-button-tertiary-fill-hover: #333333;
130
+ --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
131
+ --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
132
+ --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
133
+ --ffe-color-component-logo-name: #ffffff;
132
134
  --ffe-color-component-logo-number1: #ffffff;
133
135
  --ffe-color-component-logo-circle-dark-red: #af0000;
134
136
  --ffe-color-component-logo-circle-light-red: #e60000;
135
- --ffe-color-border-primary-default: #020a0a26;
136
- --ffe-color-border-primary-default-hover: #020a0a33;
137
- --ffe-color-border-primary-default-pressed: #020a0a40;
138
- --ffe-color-border-primary-subtle: #020a0a13;
139
- --ffe-color-border-primary-subtle-hover: #020a0a1a;
140
- --ffe-color-border-primary-subtle-pressed: #020a0a26;
141
- --ffe-color-border-primary-emphasis: #084f91;
137
+ --ffe-color-border-primary-default: #ffffff26;
138
+ --ffe-color-border-primary-default-hover: #ffffff33;
139
+ --ffe-color-border-primary-default-pressed: #ffffff40;
140
+ --ffe-color-border-primary-subtle: #ffffff13;
141
+ --ffe-color-border-primary-subtle-hover: #ffffff1a;
142
+ --ffe-color-border-primary-subtle-pressed: #ffffff26;
143
+ --ffe-color-border-primary-emphasis: #9ec2e5;
142
144
  --ffe-color-border-feedback-info: #6096bd;
143
145
  --ffe-color-border-feedback-success: #48a781;
144
146
  --ffe-color-border-feedback-warning: #cc7205;
145
147
  --ffe-color-border-feedback-critical: #e44244;
146
148
  --ffe-color-border-feedback-tip: #a39db9;
147
- --ffe-color-border-interactive-focus: #dc8000;
148
- --ffe-color-border-interactive-selected: #084f91;
149
+ --ffe-color-border-interactive-focus: #ea910b;
150
+ --ffe-color-border-interactive-selected: #9ec2e5;
151
+ }
149
152
  }
150
153
 
151
- /* Accent context */
152
- .ffe-accent-mode {
153
- --ffe-color-background-default: #084f91;
154
- --ffe-color-background-subtle: #073f83;
155
- --ffe-color-surface-primary-default: #005aa4;
156
- --ffe-color-surface-primary-default-hover: #1566b2;
157
- --ffe-color-surface-primary-default-pressed: #2975c2;
158
- --ffe-color-surface-secondary-default: #234f71;
159
- --ffe-color-surface-secondary-default-hover: #1b4462;
154
+
155
+ /* dark mode accent når en overstyrer os/nettleser light/dark preferanse*/
156
+ .ffe-dark,
157
+ .ffe-dark .ffe-default-mode {
158
+ --ffe-color-background-default: #020a0a;
159
+ --ffe-color-background-subtle: #1f1f1f;
160
+ --ffe-color-surface-primary-default: #292929;
161
+ --ffe-color-surface-primary-default-hover: #333333;
162
+ --ffe-color-surface-primary-default-pressed: #3d3d3d;
163
+ --ffe-color-surface-secondary-default: #0c2232;
164
+ --ffe-color-surface-secondary-default-hover: #102d43;
160
165
  --ffe-color-surface-secondary-default-pressed: #163853;
161
- --ffe-color-surface-tertiary-default: #45415a;
162
- --ffe-color-surface-tertiary-default-hover: #3c374e;
166
+ --ffe-color-surface-tertiary-default: #1d192f;
167
+ --ffe-color-surface-tertiary-default-hover: #27223a;
163
168
  --ffe-color-surface-tertiary-default-pressed: #312c44;
164
- --ffe-color-surface-neutral-default: #04347c;
165
- --ffe-color-surface-neutral-default-hover: #073f83;
166
- --ffe-color-surface-neutral-default-pressed: #084f91;
167
- --ffe-color-surface-feedback-info: #234f71;
168
- --ffe-color-surface-feedback-success: #09583b;
169
- --ffe-color-surface-feedback-warning: #682c00;
170
- --ffe-color-surface-feedback-critical: #7c1214;
171
- --ffe-color-surface-feedback-tip: #45415a;
172
- --ffe-color-fill-primary-default: #2975c2;
173
- --ffe-color-fill-primary-default-hover: #9ec2e5;
174
- --ffe-color-fill-primary-default-pressed: #c3d9ef;
175
- --ffe-color-fill-primary-selected-default: #ffffff;
169
+ --ffe-color-surface-neutral-default: #3d3d3d;
170
+ --ffe-color-surface-neutral-default-hover: #474747;
171
+ --ffe-color-surface-neutral-default-pressed: #525252;
172
+ --ffe-color-surface-feedback-info: #163853;
173
+ --ffe-color-surface-feedback-success: #0a4330;
174
+ --ffe-color-surface-feedback-warning: #491c00;
175
+ --ffe-color-surface-feedback-critical: #640e10;
176
+ --ffe-color-surface-feedback-tip: #312c44;
177
+ --ffe-color-fill-primary-default: #55709b;
178
+ --ffe-color-fill-primary-default-hover: #748db4;
179
+ --ffe-color-fill-primary-default-pressed: #90a9d0;
180
+ --ffe-color-fill-primary-selected-default: #f7fafd;
176
181
  --ffe-color-fill-primary-selected-hover: #d7e7f4;
177
182
  --ffe-color-fill-primary-selected-pressed: #c3d9ef;
178
- --ffe-color-fill-primary-subtle: #ffffff1a;
179
- --ffe-color-fill-primary-subtle-hover: #ffffff26;
180
- --ffe-color-fill-primary-subtle-pressed: #ffffff33;
183
+ --ffe-color-fill-primary-subtle: #2e405c;
184
+ --ffe-color-fill-primary-subtle-hover: #374b6c;
185
+ --ffe-color-fill-primary-subtle-pressed: #3e5579;
181
186
  --ffe-color-fill-primary-invisible: #ffffff00;
182
187
  --ffe-color-fill-secondary-default: #457aa1;
183
- --ffe-color-fill-secondary-default-hover: #a6cee2;
184
- --ffe-color-fill-secondary-default-pressed: #c3dfea;
188
+ --ffe-color-fill-secondary-default-hover: #6096bd;
189
+ --ffe-color-fill-secondary-default-pressed: #7eb5d2;
185
190
  --ffe-color-fill-secondary-subtle: #2b5a7c;
186
191
  --ffe-color-fill-secondary-subtle-hover: #356488;
187
192
  --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
188
193
  --ffe-color-fill-tertiary-default: #7b718e;
189
- --ffe-color-fill-tertiary-default-hover: #c1c1dc;
190
- --ffe-color-fill-tertiary-default-pressed: #d3d3ea;
194
+ --ffe-color-fill-tertiary-default-hover: #a39db9;
195
+ --ffe-color-fill-tertiary-default-pressed: #b4aecb;
191
196
  --ffe-color-fill-tertiary-subtle: #4e4a64;
192
197
  --ffe-color-fill-tertiary-subtle-hover: #5a5671;
193
198
  --ffe-color-fill-tertiary-subtle-pressed: #665d79;
@@ -200,79 +205,225 @@
200
205
  --ffe-color-fill-neutral-extra-subtle: #ffffff06;
201
206
  --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
202
207
  --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
203
- --ffe-color-fill-feedback-info: #a6cee2;
204
- --ffe-color-fill-feedback-info-subtle: #356488;
205
- --ffe-color-fill-feedback-success: #8fd1b1;
206
- --ffe-color-fill-feedback-success-subtle: #00754e;
207
- --ffe-color-fill-feedback-warning: #f6ac3c;
208
- --ffe-color-fill-feedback-warning-subtle: #853f00;
209
- --ffe-color-fill-feedback-critical: #ff7f7a;
210
- --ffe-color-fill-feedback-critical-subtle: #a01c1f;
211
- --ffe-color-fill-feedback-tip: #d3d3ea;
212
- --ffe-color-fill-feedback-tip-subtle: #5a5671;
208
+ --ffe-color-fill-feedback-info: #7eb5d2;
209
+ --ffe-color-fill-feedback-info-subtle: #234f71;
210
+ --ffe-color-fill-feedback-success: #6abe97;
211
+ --ffe-color-fill-feedback-success-subtle: #09583b;
212
+ --ffe-color-fill-feedback-warning: #ea910b;
213
+ --ffe-color-fill-feedback-warning-subtle: #682c00;
214
+ --ffe-color-fill-feedback-critical: #ff5e5c;
215
+ --ffe-color-fill-feedback-critical-subtle: #7c1214;
216
+ --ffe-color-fill-feedback-tip: #c1c1dc;
217
+ --ffe-color-fill-feedback-tip-subtle: #45415a;
213
218
  --ffe-color-foreground-default: #ffffff;
214
- --ffe-color-foreground-subtle: #ffffffcc;
219
+ --ffe-color-foreground-subtle: #c2c2c2;
220
+ --ffe-color-foreground-emphasis: #d7e7f4;
221
+ --ffe-color-foreground-inverse: #020a0a;
222
+ --ffe-color-foreground-interactive-link: #c3d9ef;
223
+ --ffe-color-foreground-interactive-link-hover: #b6d1ec;
224
+ --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
225
+ --ffe-color-foreground-interactive-link-active: #f7fafd;
226
+ --ffe-color-foreground-feedback-info: #c3dfea;
227
+ --ffe-color-foreground-feedback-success: #b2e6cd;
228
+ --ffe-color-foreground-feedback-warning: #ffc675;
229
+ --ffe-color-foreground-feedback-critical: #ffaea8;
230
+ --ffe-color-foreground-feedback-tip: #d3d3ea;
231
+ --ffe-color-component-form-input-foreground-default: #ffffff;
232
+ --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
233
+ --ffe-color-component-form-input-foreground-placeholder: #adadad;
234
+ --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
235
+ --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
236
+ --ffe-color-component-form-input-foreground-error: #ffaea8;
237
+ --ffe-color-component-form-input-border-active: #d7e7f4;
238
+ --ffe-color-component-form-input-fill-default: #292929;
239
+ --ffe-color-component-form-input-fill-default-hover: #333333;
240
+ --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
241
+ --ffe-color-component-form-input-fill-disabled: #5c5c5c;
242
+ --ffe-color-component-form-input-fill-read-only: #474747;
243
+ --ffe-color-component-form-input-fill-error: #640e10;
244
+ --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
245
+ --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
246
+ --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
247
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
248
+ --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
249
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
250
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
251
+ --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
252
+ --ffe-color-component-button-action-border-default: #48a781;
253
+ --ffe-color-component-button-action-border-hover: #6abe97;
254
+ --ffe-color-component-button-action-border-pressed: #8fd1b1;
255
+ --ffe-color-component-button-action-fill-default: #00754e;
256
+ --ffe-color-component-button-action-fill-hover: #2a7e5b;
257
+ --ffe-color-component-button-action-fill-pressed: #409674;
258
+ --ffe-color-component-button-action-foreground-default: #ffffff;
259
+ --ffe-color-component-button-action-foreground-hover: #ffffff;
260
+ --ffe-color-component-button-primary-border-default: #9ec2e5;
261
+ --ffe-color-component-button-primary-border-hover: #c3d9ef;
262
+ --ffe-color-component-button-primary-border-pressed: #d7e7f4;
263
+ --ffe-color-component-button-primary-fill-default: #005aa4;
264
+ --ffe-color-component-button-primary-fill-hover: #1566b2;
265
+ --ffe-color-component-button-primary-fill-pressed: #2975c2;
266
+ --ffe-color-component-button-primary-foreground-default: #ffffff;
267
+ --ffe-color-component-button-primary-foreground-hover: #ffffff;
268
+ --ffe-color-component-button-secondary-border-default: #f7fafd;
269
+ --ffe-color-component-button-secondary-border-hover: #f7fafd;
270
+ --ffe-color-component-button-secondary-border-pressed: #f7fafd;
271
+ --ffe-color-component-button-secondary-fill-default: #ffffff00;
272
+ --ffe-color-component-button-secondary-fill-hover: #333333;
273
+ --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
274
+ --ffe-color-component-button-secondary-foreground-default: #ffffff;
275
+ --ffe-color-component-button-secondary-foreground-hover: #ffffff;
276
+ --ffe-color-component-button-tertiary-fill-default: #ffffff00;
277
+ --ffe-color-component-button-tertiary-fill-hover: #333333;
278
+ --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
279
+ --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
280
+ --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
281
+ --ffe-color-component-logo-name: #ffffff;
282
+ --ffe-color-component-logo-number1: #ffffff;
283
+ --ffe-color-component-logo-circle-dark-red: #af0000;
284
+ --ffe-color-component-logo-circle-light-red: #e60000;
285
+ --ffe-color-border-primary-default: #ffffff26;
286
+ --ffe-color-border-primary-default-hover: #ffffff33;
287
+ --ffe-color-border-primary-default-pressed: #ffffff40;
288
+ --ffe-color-border-primary-subtle: #ffffff13;
289
+ --ffe-color-border-primary-subtle-hover: #ffffff1a;
290
+ --ffe-color-border-primary-subtle-pressed: #ffffff26;
291
+ --ffe-color-border-primary-emphasis: #9ec2e5;
292
+ --ffe-color-border-feedback-info: #6096bd;
293
+ --ffe-color-border-feedback-success: #48a781;
294
+ --ffe-color-border-feedback-warning: #cc7205;
295
+ --ffe-color-border-feedback-critical: #e44244;
296
+ --ffe-color-border-feedback-tip: #a39db9;
297
+ --ffe-color-border-interactive-focus: #ea910b;
298
+ --ffe-color-border-interactive-selected: #9ec2e5;
299
+ }
300
+
301
+ /* dark mode accent context */
302
+ @media (prefers-color-scheme: dark) {
303
+ .regard-color-scheme-preference .ffe-accent-mode {
304
+ --ffe-color-background-default: #141414;
305
+ --ffe-color-background-subtle: #1f1f1f;
306
+ --ffe-color-surface-primary-default: #292929;
307
+ --ffe-color-surface-primary-default-hover: #333333;
308
+ --ffe-color-surface-primary-default-pressed: #3d3d3d;
309
+ --ffe-color-surface-secondary-default: #0c2232;
310
+ --ffe-color-surface-secondary-default-hover: #102d43;
311
+ --ffe-color-surface-secondary-default-pressed: #163853;
312
+ --ffe-color-surface-tertiary-default: #1d192f;
313
+ --ffe-color-surface-tertiary-default-hover: #27223a;
314
+ --ffe-color-surface-tertiary-default-pressed: #312c44;
315
+ --ffe-color-surface-neutral-default: #3d3d3d;
316
+ --ffe-color-surface-neutral-default-hover: #474747;
317
+ --ffe-color-surface-neutral-default-pressed: #525252;
318
+ --ffe-color-surface-feedback-info: #163853;
319
+ --ffe-color-surface-feedback-success: #0a4330;
320
+ --ffe-color-surface-feedback-warning: #491c00;
321
+ --ffe-color-surface-feedback-critical: #640e10;
322
+ --ffe-color-surface-feedback-tip: #312c44;
323
+ --ffe-color-fill-primary-default: #55709b;
324
+ --ffe-color-fill-primary-default-hover: #748db4;
325
+ --ffe-color-fill-primary-default-pressed: #90a9d0;
326
+ --ffe-color-fill-primary-selected-default: #f7fafd;
327
+ --ffe-color-fill-primary-selected-hover: #d7e7f4;
328
+ --ffe-color-fill-primary-selected-pressed: #c3d9ef;
329
+ --ffe-color-fill-primary-subtle: #374b6c;
330
+ --ffe-color-fill-primary-subtle-hover: #3e5579;
331
+ --ffe-color-fill-primary-subtle-pressed: #47618a;
332
+ --ffe-color-fill-primary-invisible: #ffffff00;
333
+ --ffe-color-fill-secondary-default: #457aa1;
334
+ --ffe-color-fill-secondary-default-hover: #6096bd;
335
+ --ffe-color-fill-secondary-default-pressed: #7eb5d2;
336
+ --ffe-color-fill-secondary-subtle: #2b5a7c;
337
+ --ffe-color-fill-secondary-subtle-hover: #356488;
338
+ --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
339
+ --ffe-color-fill-tertiary-default: #7b718e;
340
+ --ffe-color-fill-tertiary-default-hover: #a39db9;
341
+ --ffe-color-fill-tertiary-default-pressed: #b4aecb;
342
+ --ffe-color-fill-tertiary-subtle: #4e4a64;
343
+ --ffe-color-fill-tertiary-subtle-hover: #5a5671;
344
+ --ffe-color-fill-tertiary-subtle-pressed: #665d79;
345
+ --ffe-color-fill-neutral-default: #ffffff33;
346
+ --ffe-color-fill-neutral-default-hover: #ffffff40;
347
+ --ffe-color-fill-neutral-default-pressed: #ffffff4d;
348
+ --ffe-color-fill-neutral-subtle: #ffffff13;
349
+ --ffe-color-fill-neutral-subtle-hover: #ffffff1a;
350
+ --ffe-color-fill-neutral-subtle-pressed: #ffffff26;
351
+ --ffe-color-fill-neutral-extra-subtle: #ffffff06;
352
+ --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
353
+ --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
354
+ --ffe-color-fill-feedback-info: #7eb5d2;
355
+ --ffe-color-fill-feedback-info-subtle: #234f71;
356
+ --ffe-color-fill-feedback-success: #6abe97;
357
+ --ffe-color-fill-feedback-success-subtle: #09583b;
358
+ --ffe-color-fill-feedback-warning: #ea910b;
359
+ --ffe-color-fill-feedback-warning-subtle: #682c00;
360
+ --ffe-color-fill-feedback-critical: #ff5e5c;
361
+ --ffe-color-fill-feedback-critical-subtle: #7c1214;
362
+ --ffe-color-fill-feedback-tip: #c1c1dc;
363
+ --ffe-color-fill-feedback-tip-subtle: #45415a;
364
+ --ffe-color-foreground-default: #ffffff;
365
+ --ffe-color-foreground-subtle: #c2c2c2;
215
366
  --ffe-color-foreground-emphasis: #d7e7f4;
216
367
  --ffe-color-foreground-inverse: #020a0a;
217
- --ffe-color-foreground-interactive-link: #f7fafd;
218
- --ffe-color-foreground-interactive-link-hover: #e7f1f9;
219
- --ffe-color-foreground-interactive-link-pressed: #d7e7f4;
220
- --ffe-color-foreground-interactive-link-active: #ffffff;
221
- --ffe-color-foreground-feedback-info: #dceaef;
222
- --ffe-color-foreground-feedback-success: #cbf0df;
223
- --ffe-color-foreground-feedback-warning: #ffe0b2;
224
- --ffe-color-foreground-feedback-critical: #ffd5d1;
225
- --ffe-color-foreground-feedback-tip: #e6e6f4;
226
- --ffe-color-component-form-input-foreground-default: #1f1f1f;
227
- --ffe-color-component-form-input-foreground-subtle: #525252;
228
- --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
229
- --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
230
- --ffe-color-component-form-input-foreground-read-only: #525252;
231
- --ffe-color-component-form-input-foreground-error: #7c1214;
232
- --ffe-color-component-form-input-border-active: #7dabd9;
233
- --ffe-color-component-form-input-fill-default: #ffffff;
234
- --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
235
- --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
236
- --ffe-color-component-form-input-fill-disabled: #d6d6d6;
237
- --ffe-color-component-form-input-fill-read-only: #e5e5e5;
238
- --ffe-color-component-form-input-fill-error: #ffe3e0;
368
+ --ffe-color-foreground-interactive-link: #c3d9ef;
369
+ --ffe-color-foreground-interactive-link-hover: #b6d1ec;
370
+ --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
371
+ --ffe-color-foreground-interactive-link-active: #f7fafd;
372
+ --ffe-color-foreground-feedback-info: #c3dfea;
373
+ --ffe-color-foreground-feedback-success: #b2e6cd;
374
+ --ffe-color-foreground-feedback-warning: #ffc675;
375
+ --ffe-color-foreground-feedback-critical: #ffaea8;
376
+ --ffe-color-foreground-feedback-tip: #d3d3ea;
377
+ --ffe-color-component-form-input-foreground-default: #ffffff;
378
+ --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
379
+ --ffe-color-component-form-input-foreground-placeholder: #adadad;
380
+ --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
381
+ --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
382
+ --ffe-color-component-form-input-foreground-error: #ffaea8;
383
+ --ffe-color-component-form-input-border-active: #d7e7f4;
384
+ --ffe-color-component-form-input-fill-default: #292929;
385
+ --ffe-color-component-form-input-fill-default-hover: #333333;
386
+ --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
387
+ --ffe-color-component-form-input-fill-disabled: #5c5c5c;
388
+ --ffe-color-component-form-input-fill-read-only: #474747;
389
+ --ffe-color-component-form-input-fill-error: #640e10;
239
390
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
240
- --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
241
- --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
242
- --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
391
+ --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
392
+ --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
393
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
243
394
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
244
- --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
245
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
246
- --ffe-color-component-form-toggleswitch-fill-critical: #ff5e5c;
395
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
396
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
397
+ --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
247
398
  --ffe-color-component-button-action-border-default: #48a781;
248
- --ffe-color-component-button-action-border-hover: #2a7e5b;
249
- --ffe-color-component-button-action-border-pressed: #0d6346;
399
+ --ffe-color-component-button-action-border-hover: #6abe97;
400
+ --ffe-color-component-button-action-border-pressed: #8fd1b1;
250
401
  --ffe-color-component-button-action-fill-default: #00754e;
251
402
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
252
403
  --ffe-color-component-button-action-fill-pressed: #409674;
253
404
  --ffe-color-component-button-action-foreground-default: #ffffff;
254
405
  --ffe-color-component-button-action-foreground-hover: #ffffff;
255
- --ffe-color-component-button-primary-border-default: #c3d9ef;
256
- --ffe-color-component-button-primary-border-hover: #cfe2f2;
406
+ --ffe-color-component-button-primary-border-default: #9ec2e5;
407
+ --ffe-color-component-button-primary-border-hover: #c3d9ef;
257
408
  --ffe-color-component-button-primary-border-pressed: #d7e7f4;
258
- --ffe-color-component-button-primary-fill-default: #f7fafd;
259
- --ffe-color-component-button-primary-fill-hover: #d7e7f4;
260
- --ffe-color-component-button-primary-fill-pressed: #c3d9ef;
261
- --ffe-color-component-button-primary-foreground-default: #08235e;
262
- --ffe-color-component-button-primary-foreground-hover: #08235e;
263
- --ffe-color-component-button-secondary-border-default: #ffffff;
264
- --ffe-color-component-button-secondary-border-hover: #ffffff;
265
- --ffe-color-component-button-secondary-border-pressed: #ffffff;
409
+ --ffe-color-component-button-primary-fill-default: #005aa4;
410
+ --ffe-color-component-button-primary-fill-hover: #1566b2;
411
+ --ffe-color-component-button-primary-fill-pressed: #2975c2;
412
+ --ffe-color-component-button-primary-foreground-default: #ffffff;
413
+ --ffe-color-component-button-primary-foreground-hover: #ffffff;
414
+ --ffe-color-component-button-secondary-border-default: #f7fafd;
415
+ --ffe-color-component-button-secondary-border-hover: #f7fafd;
416
+ --ffe-color-component-button-secondary-border-pressed: #f7fafd;
266
417
  --ffe-color-component-button-secondary-fill-default: #ffffff00;
267
- --ffe-color-component-button-secondary-fill-hover: #1566b2;
268
- --ffe-color-component-button-secondary-fill-pressed: #2975c2;
418
+ --ffe-color-component-button-secondary-fill-hover: #333333;
419
+ --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
269
420
  --ffe-color-component-button-secondary-foreground-default: #ffffff;
270
421
  --ffe-color-component-button-secondary-foreground-hover: #ffffff;
271
422
  --ffe-color-component-button-tertiary-fill-default: #ffffff00;
272
- --ffe-color-component-button-tertiary-fill-hover: #1566b2;
273
- --ffe-color-component-button-tertiary-fill-pressed: #2975c2;
274
- --ffe-color-component-button-tertiary-foreground-default: #ffffff;
275
- --ffe-color-component-button-tertiary-foreground-hover: #ffffff;
423
+ --ffe-color-component-button-tertiary-fill-hover: #333333;
424
+ --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
425
+ --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
426
+ --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
276
427
  --ffe-color-component-logo-name: #ffffff;
277
428
  --ffe-color-component-logo-number1: #ffffff;
278
429
  --ffe-color-component-logo-circle-dark-red: #af0000;
@@ -283,21 +434,20 @@
283
434
  --ffe-color-border-primary-subtle: #ffffff13;
284
435
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
285
436
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
286
- --ffe-color-border-primary-emphasis: #c3d9ef;
287
- --ffe-color-border-feedback-info: #7eb5d2;
288
- --ffe-color-border-feedback-success: #6abe97;
289
- --ffe-color-border-feedback-warning: #ea910b;
290
- --ffe-color-border-feedback-critical: #ff5e5c;
291
- --ffe-color-border-feedback-tip: #b4aecb;
292
- --ffe-color-border-interactive-focus: #f6ac3c;
293
- --ffe-color-border-interactive-selected: #c3d9ef;
437
+ --ffe-color-border-primary-emphasis: #9ec2e5;
438
+ --ffe-color-border-feedback-info: #6096bd;
439
+ --ffe-color-border-feedback-success: #48a781;
440
+ --ffe-color-border-feedback-warning: #cc7205;
441
+ --ffe-color-border-feedback-critical: #e44244;
442
+ --ffe-color-border-feedback-tip: #a39db9;
443
+ --ffe-color-border-interactive-focus: #f49f1f;
444
+ --ffe-color-border-interactive-selected: #9ec2e5;
445
+ }
294
446
  }
295
447
 
296
- /* dark mode default context */
297
- @media (prefers-color-scheme: dark) {
298
- .regard-color-scheme-preference,
299
- .regard-color-scheme-preference .ffe-default-mode {
300
- --ffe-color-background-default: #020a0a;
448
+ /* dark mode accent når en overstyrer os/nettleser light/dark preferanser*/
449
+ .ffe-dark .ffe-accent-mode {
450
+ --ffe-color-background-default: #141414;
301
451
  --ffe-color-background-subtle: #1f1f1f;
302
452
  --ffe-color-surface-primary-default: #292929;
303
453
  --ffe-color-surface-primary-default-hover: #333333;
@@ -322,9 +472,9 @@
322
472
  --ffe-color-fill-primary-selected-default: #f7fafd;
323
473
  --ffe-color-fill-primary-selected-hover: #d7e7f4;
324
474
  --ffe-color-fill-primary-selected-pressed: #c3d9ef;
325
- --ffe-color-fill-primary-subtle: #2e405c;
326
- --ffe-color-fill-primary-subtle-hover: #374b6c;
327
- --ffe-color-fill-primary-subtle-pressed: #3e5579;
475
+ --ffe-color-fill-primary-subtle: #374b6c;
476
+ --ffe-color-fill-primary-subtle-hover: #3e5579;
477
+ --ffe-color-fill-primary-subtle-pressed: #47618a;
328
478
  --ffe-color-fill-primary-invisible: #ffffff00;
329
479
  --ffe-color-fill-secondary-default: #457aa1;
330
480
  --ffe-color-fill-secondary-default-hover: #6096bd;
@@ -399,89 +549,237 @@
399
549
  --ffe-color-component-button-action-fill-pressed: #409674;
400
550
  --ffe-color-component-button-action-foreground-default: #ffffff;
401
551
  --ffe-color-component-button-action-foreground-hover: #ffffff;
402
- --ffe-color-component-button-primary-border-default: #9ec2e5;
403
- --ffe-color-component-button-primary-border-hover: #c3d9ef;
404
- --ffe-color-component-button-primary-border-pressed: #d7e7f4;
405
- --ffe-color-component-button-primary-fill-default: #005aa4;
406
- --ffe-color-component-button-primary-fill-hover: #1566b2;
407
- --ffe-color-component-button-primary-fill-pressed: #2975c2;
552
+ --ffe-color-component-button-primary-border-default: #9ec2e5;
553
+ --ffe-color-component-button-primary-border-hover: #c3d9ef;
554
+ --ffe-color-component-button-primary-border-pressed: #d7e7f4;
555
+ --ffe-color-component-button-primary-fill-default: #005aa4;
556
+ --ffe-color-component-button-primary-fill-hover: #1566b2;
557
+ --ffe-color-component-button-primary-fill-pressed: #2975c2;
558
+ --ffe-color-component-button-primary-foreground-default: #ffffff;
559
+ --ffe-color-component-button-primary-foreground-hover: #ffffff;
560
+ --ffe-color-component-button-secondary-border-default: #f7fafd;
561
+ --ffe-color-component-button-secondary-border-hover: #f7fafd;
562
+ --ffe-color-component-button-secondary-border-pressed: #f7fafd;
563
+ --ffe-color-component-button-secondary-fill-default: #ffffff00;
564
+ --ffe-color-component-button-secondary-fill-hover: #333333;
565
+ --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
566
+ --ffe-color-component-button-secondary-foreground-default: #ffffff;
567
+ --ffe-color-component-button-secondary-foreground-hover: #ffffff;
568
+ --ffe-color-component-button-tertiary-fill-default: #ffffff00;
569
+ --ffe-color-component-button-tertiary-fill-hover: #333333;
570
+ --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
571
+ --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
572
+ --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
573
+ --ffe-color-component-logo-name: #ffffff;
574
+ --ffe-color-component-logo-number1: #ffffff;
575
+ --ffe-color-component-logo-circle-dark-red: #af0000;
576
+ --ffe-color-component-logo-circle-light-red: #e60000;
577
+ --ffe-color-border-primary-default: #ffffff26;
578
+ --ffe-color-border-primary-default-hover: #ffffff33;
579
+ --ffe-color-border-primary-default-pressed: #ffffff40;
580
+ --ffe-color-border-primary-subtle: #ffffff13;
581
+ --ffe-color-border-primary-subtle-hover: #ffffff1a;
582
+ --ffe-color-border-primary-subtle-pressed: #ffffff26;
583
+ --ffe-color-border-primary-emphasis: #9ec2e5;
584
+ --ffe-color-border-feedback-info: #6096bd;
585
+ --ffe-color-border-feedback-success: #48a781;
586
+ --ffe-color-border-feedback-warning: #cc7205;
587
+ --ffe-color-border-feedback-critical: #e44244;
588
+ --ffe-color-border-feedback-tip: #a39db9;
589
+ --ffe-color-border-interactive-focus: #f49f1f;
590
+ --ffe-color-border-interactive-selected: #9ec2e5;
591
+ }
592
+
593
+ /* Default context */
594
+ :root,
595
+ :host,
596
+ .ffe-default-mode,
597
+ .ffe-light,
598
+ .ffe-light .ffe-default-mode {
599
+ --ffe-color-background-default: #ffffff;
600
+ --ffe-color-background-subtle: #fdf8f5;
601
+ --ffe-color-surface-primary-default: #ffffff;
602
+ --ffe-color-surface-primary-default-hover: #e7f1f9;
603
+ --ffe-color-surface-primary-default-pressed: #d7e7f4;
604
+ --ffe-color-surface-secondary-default: #e5f0f5;
605
+ --ffe-color-surface-secondary-default-hover: #dceaef;
606
+ --ffe-color-surface-secondary-default-pressed: #cbe2eb;
607
+ --ffe-color-surface-tertiary-default: #eaeaf6;
608
+ --ffe-color-surface-tertiary-default-hover: #e6e6f4;
609
+ --ffe-color-surface-tertiary-default-pressed: #dcdcef;
610
+ --ffe-color-surface-neutral-default: #f0f0f0;
611
+ --ffe-color-surface-neutral-default-hover: #e5e5e5;
612
+ --ffe-color-surface-neutral-default-pressed: #dbdbdb;
613
+ --ffe-color-surface-feedback-info: #e5f0f5;
614
+ --ffe-color-surface-feedback-success: #dff6eb;
615
+ --ffe-color-surface-feedback-warning: #fdeed3;
616
+ --ffe-color-surface-feedback-critical: #ffe3e0;
617
+ --ffe-color-surface-feedback-tip: #eaeaf6;
618
+ --ffe-color-fill-primary-default: #9ec2e5;
619
+ --ffe-color-fill-primary-default-hover: #7dabd9;
620
+ --ffe-color-fill-primary-default-pressed: #5494d4;
621
+ --ffe-color-fill-primary-selected-default: #005aa4;
622
+ --ffe-color-fill-primary-selected-hover: #073f83;
623
+ --ffe-color-fill-primary-selected-pressed: #082868;
624
+ --ffe-color-fill-primary-subtle: #e7f1f9;
625
+ --ffe-color-fill-primary-subtle-hover: #d7e7f4;
626
+ --ffe-color-fill-primary-subtle-pressed: #c3d9ef;
627
+ --ffe-color-fill-primary-invisible: #ffffff00;
628
+ --ffe-color-fill-secondary-default: #a6cee2;
629
+ --ffe-color-fill-secondary-default-hover: #7eb5d2;
630
+ --ffe-color-fill-secondary-default-pressed: #6096bd;
631
+ --ffe-color-fill-secondary-subtle: #dceaef;
632
+ --ffe-color-fill-secondary-subtle-hover: #c3dfea;
633
+ --ffe-color-fill-secondary-subtle-pressed: #b6d7e7;
634
+ --ffe-color-fill-tertiary-default: #c1c1dc;
635
+ --ffe-color-fill-tertiary-default-hover: #b4aecb;
636
+ --ffe-color-fill-tertiary-default-pressed: #a39db9;
637
+ --ffe-color-fill-tertiary-subtle: #e6e6f4;
638
+ --ffe-color-fill-tertiary-subtle-hover: #d3d3ea;
639
+ --ffe-color-fill-tertiary-subtle-pressed: #cacae3;
640
+ --ffe-color-fill-neutral-default: #020a0a33;
641
+ --ffe-color-fill-neutral-default-hover: #020a0a40;
642
+ --ffe-color-fill-neutral-default-pressed: #020a0a4d;
643
+ --ffe-color-fill-neutral-subtle: #020a0a13;
644
+ --ffe-color-fill-neutral-subtle-hover: #020a0a1a;
645
+ --ffe-color-fill-neutral-subtle-pressed: #020a0a26;
646
+ --ffe-color-fill-neutral-extra-subtle: #020a0a06;
647
+ --ffe-color-fill-neutral-extra-subtle-hover: #020a0a0d;
648
+ --ffe-color-fill-neutral-extra-subtle-pressed: #020a0a13;
649
+ --ffe-color-fill-feedback-info: #457aa1;
650
+ --ffe-color-fill-feedback-info-subtle: #cbe2eb;
651
+ --ffe-color-fill-feedback-success: #2a7e5b;
652
+ --ffe-color-fill-feedback-success-subtle: #bbedd5;
653
+ --ffe-color-fill-feedback-warning: #a95704;
654
+ --ffe-color-fill-feedback-warning-subtle: #ffd394;
655
+ --ffe-color-fill-feedback-critical: #c62a2f;
656
+ --ffe-color-fill-feedback-critical-subtle: #ffbeb8;
657
+ --ffe-color-fill-feedback-tip: #5a5671;
658
+ --ffe-color-fill-feedback-tip-subtle: #dcdcef;
659
+ --ffe-color-foreground-default: #1f1f1f;
660
+ --ffe-color-foreground-subtle: #525252;
661
+ --ffe-color-foreground-emphasis: #08235e;
662
+ --ffe-color-foreground-inverse: #ffffff;
663
+ --ffe-color-foreground-interactive-link: #005aa4;
664
+ --ffe-color-foreground-interactive-link-hover: #073f83;
665
+ --ffe-color-foreground-interactive-link-pressed: #082868;
666
+ --ffe-color-foreground-interactive-link-active: #005aa4;
667
+ --ffe-color-foreground-feedback-info: #234f71;
668
+ --ffe-color-foreground-feedback-success: #0a4d37;
669
+ --ffe-color-foreground-feedback-warning: #682c00;
670
+ --ffe-color-foreground-feedback-critical: #7c1214;
671
+ --ffe-color-foreground-feedback-tip: #45415a;
672
+ --ffe-color-component-form-input-foreground-default: #1f1f1f;
673
+ --ffe-color-component-form-input-foreground-subtle: #525252;
674
+ --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
675
+ --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
676
+ --ffe-color-component-form-input-foreground-read-only: #525252;
677
+ --ffe-color-component-form-input-foreground-error: #7c1214;
678
+ --ffe-color-component-form-input-border-active: #08235e;
679
+ --ffe-color-component-form-input-fill-default: #ffffff;
680
+ --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
681
+ --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
682
+ --ffe-color-component-form-input-fill-disabled: #d6d6d6;
683
+ --ffe-color-component-form-input-fill-read-only: #e5e5e5;
684
+ --ffe-color-component-form-input-fill-error: #ffe3e0;
685
+ --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
686
+ --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
687
+ --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
688
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
689
+ --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
690
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
691
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
692
+ --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
693
+ --ffe-color-component-button-action-border-default: #48a781;
694
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
695
+ --ffe-color-component-button-action-border-pressed: #0d6346;
696
+ --ffe-color-component-button-action-fill-default: #2a7e5b;
697
+ --ffe-color-component-button-action-fill-hover: #0d6346;
698
+ --ffe-color-component-button-action-fill-pressed: #0a4d37;
699
+ --ffe-color-component-button-action-foreground-default: #ffffff;
700
+ --ffe-color-component-button-action-foreground-hover: #ffffff;
701
+ --ffe-color-component-button-primary-border-default: #084f91;
702
+ --ffe-color-component-button-primary-border-hover: #04347c;
703
+ --ffe-color-component-button-primary-border-pressed: #08235e;
704
+ --ffe-color-component-button-primary-fill-default: #084f91;
705
+ --ffe-color-component-button-primary-fill-hover: #073f83;
706
+ --ffe-color-component-button-primary-fill-pressed: #082868;
408
707
  --ffe-color-component-button-primary-foreground-default: #ffffff;
409
708
  --ffe-color-component-button-primary-foreground-hover: #ffffff;
410
- --ffe-color-component-button-secondary-border-default: #f7fafd;
411
- --ffe-color-component-button-secondary-border-hover: #f7fafd;
412
- --ffe-color-component-button-secondary-border-pressed: #f7fafd;
709
+ --ffe-color-component-button-secondary-border-default: #08235e;
710
+ --ffe-color-component-button-secondary-border-hover: #08235e;
711
+ --ffe-color-component-button-secondary-border-pressed: #08235e;
413
712
  --ffe-color-component-button-secondary-fill-default: #ffffff00;
414
- --ffe-color-component-button-secondary-fill-hover: #333333;
415
- --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
416
- --ffe-color-component-button-secondary-foreground-default: #ffffff;
417
- --ffe-color-component-button-secondary-foreground-hover: #ffffff;
713
+ --ffe-color-component-button-secondary-fill-hover: #d7e7f4;
714
+ --ffe-color-component-button-secondary-fill-pressed: #c3d9ef;
715
+ --ffe-color-component-button-secondary-foreground-default: #08235e;
716
+ --ffe-color-component-button-secondary-foreground-hover: #08235e;
418
717
  --ffe-color-component-button-tertiary-fill-default: #ffffff00;
419
- --ffe-color-component-button-tertiary-fill-hover: #333333;
420
- --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
421
- --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
422
- --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
423
- --ffe-color-component-logo-name: #ffffff;
718
+ --ffe-color-component-button-tertiary-fill-hover: #d7e7f4;
719
+ --ffe-color-component-button-tertiary-fill-pressed: #c3d9ef;
720
+ --ffe-color-component-button-tertiary-foreground-default: #08235e;
721
+ --ffe-color-component-button-tertiary-foreground-hover: #08235e;
722
+ --ffe-color-component-logo-name: #082868;
424
723
  --ffe-color-component-logo-number1: #ffffff;
425
724
  --ffe-color-component-logo-circle-dark-red: #af0000;
426
725
  --ffe-color-component-logo-circle-light-red: #e60000;
427
- --ffe-color-border-primary-default: #ffffff26;
428
- --ffe-color-border-primary-default-hover: #ffffff33;
429
- --ffe-color-border-primary-default-pressed: #ffffff40;
430
- --ffe-color-border-primary-subtle: #ffffff13;
431
- --ffe-color-border-primary-subtle-hover: #ffffff1a;
432
- --ffe-color-border-primary-subtle-pressed: #ffffff26;
433
- --ffe-color-border-primary-emphasis: #9ec2e5;
726
+ --ffe-color-border-primary-default: #020a0a26;
727
+ --ffe-color-border-primary-default-hover: #020a0a33;
728
+ --ffe-color-border-primary-default-pressed: #020a0a40;
729
+ --ffe-color-border-primary-subtle: #020a0a13;
730
+ --ffe-color-border-primary-subtle-hover: #020a0a1a;
731
+ --ffe-color-border-primary-subtle-pressed: #020a0a26;
732
+ --ffe-color-border-primary-emphasis: #084f91;
434
733
  --ffe-color-border-feedback-info: #6096bd;
435
734
  --ffe-color-border-feedback-success: #48a781;
436
735
  --ffe-color-border-feedback-warning: #cc7205;
437
736
  --ffe-color-border-feedback-critical: #e44244;
438
737
  --ffe-color-border-feedback-tip: #a39db9;
439
- --ffe-color-border-interactive-focus: #ea910b;
440
- --ffe-color-border-interactive-selected: #9ec2e5;
441
- }
738
+ --ffe-color-border-interactive-focus: #dc8000;
739
+ --ffe-color-border-interactive-selected: #084f91;
442
740
  }
443
741
 
444
- /* dark mode accent context */
445
- @media (prefers-color-scheme: dark) {
446
- .regard-color-scheme-preference .ffe-accent-mode {
447
- --ffe-color-background-default: #141414;
448
- --ffe-color-background-subtle: #1f1f1f;
449
- --ffe-color-surface-primary-default: #292929;
450
- --ffe-color-surface-primary-default-hover: #333333;
451
- --ffe-color-surface-primary-default-pressed: #3d3d3d;
452
- --ffe-color-surface-secondary-default: #0c2232;
453
- --ffe-color-surface-secondary-default-hover: #102d43;
742
+ /* Accent context */
743
+ .ffe-light .ffe-accent-mode,
744
+ .ffe-accent-mode {
745
+ --ffe-color-background-default: #084f91;
746
+ --ffe-color-background-subtle: #073f83;
747
+ --ffe-color-surface-primary-default: #005aa4;
748
+ --ffe-color-surface-primary-default-hover: #1566b2;
749
+ --ffe-color-surface-primary-default-pressed: #2975c2;
750
+ --ffe-color-surface-secondary-default: #234f71;
751
+ --ffe-color-surface-secondary-default-hover: #1b4462;
454
752
  --ffe-color-surface-secondary-default-pressed: #163853;
455
- --ffe-color-surface-tertiary-default: #1d192f;
456
- --ffe-color-surface-tertiary-default-hover: #27223a;
753
+ --ffe-color-surface-tertiary-default: #45415a;
754
+ --ffe-color-surface-tertiary-default-hover: #3c374e;
457
755
  --ffe-color-surface-tertiary-default-pressed: #312c44;
458
- --ffe-color-surface-neutral-default: #3d3d3d;
459
- --ffe-color-surface-neutral-default-hover: #474747;
460
- --ffe-color-surface-neutral-default-pressed: #525252;
461
- --ffe-color-surface-feedback-info: #163853;
462
- --ffe-color-surface-feedback-success: #0a4330;
463
- --ffe-color-surface-feedback-warning: #491c00;
464
- --ffe-color-surface-feedback-critical: #640e10;
465
- --ffe-color-surface-feedback-tip: #312c44;
466
- --ffe-color-fill-primary-default: #55709b;
467
- --ffe-color-fill-primary-default-hover: #748db4;
468
- --ffe-color-fill-primary-default-pressed: #90a9d0;
469
- --ffe-color-fill-primary-selected-default: #f7fafd;
756
+ --ffe-color-surface-neutral-default: #04347c;
757
+ --ffe-color-surface-neutral-default-hover: #073f83;
758
+ --ffe-color-surface-neutral-default-pressed: #084f91;
759
+ --ffe-color-surface-feedback-info: #234f71;
760
+ --ffe-color-surface-feedback-success: #09583b;
761
+ --ffe-color-surface-feedback-warning: #682c00;
762
+ --ffe-color-surface-feedback-critical: #7c1214;
763
+ --ffe-color-surface-feedback-tip: #45415a;
764
+ --ffe-color-fill-primary-default: #2975c2;
765
+ --ffe-color-fill-primary-default-hover: #9ec2e5;
766
+ --ffe-color-fill-primary-default-pressed: #c3d9ef;
767
+ --ffe-color-fill-primary-selected-default: #ffffff;
470
768
  --ffe-color-fill-primary-selected-hover: #d7e7f4;
471
769
  --ffe-color-fill-primary-selected-pressed: #c3d9ef;
472
- --ffe-color-fill-primary-subtle: #374b6c;
473
- --ffe-color-fill-primary-subtle-hover: #3e5579;
474
- --ffe-color-fill-primary-subtle-pressed: #47618a;
770
+ --ffe-color-fill-primary-subtle: #ffffff1a;
771
+ --ffe-color-fill-primary-subtle-hover: #ffffff26;
772
+ --ffe-color-fill-primary-subtle-pressed: #ffffff33;
475
773
  --ffe-color-fill-primary-invisible: #ffffff00;
476
774
  --ffe-color-fill-secondary-default: #457aa1;
477
- --ffe-color-fill-secondary-default-hover: #6096bd;
478
- --ffe-color-fill-secondary-default-pressed: #7eb5d2;
775
+ --ffe-color-fill-secondary-default-hover: #a6cee2;
776
+ --ffe-color-fill-secondary-default-pressed: #c3dfea;
479
777
  --ffe-color-fill-secondary-subtle: #2b5a7c;
480
778
  --ffe-color-fill-secondary-subtle-hover: #356488;
481
779
  --ffe-color-fill-secondary-subtle-pressed: #3b6f96;
482
780
  --ffe-color-fill-tertiary-default: #7b718e;
483
- --ffe-color-fill-tertiary-default-hover: #a39db9;
484
- --ffe-color-fill-tertiary-default-pressed: #b4aecb;
781
+ --ffe-color-fill-tertiary-default-hover: #c1c1dc;
782
+ --ffe-color-fill-tertiary-default-pressed: #d3d3ea;
485
783
  --ffe-color-fill-tertiary-subtle: #4e4a64;
486
784
  --ffe-color-fill-tertiary-subtle-hover: #5a5671;
487
785
  --ffe-color-fill-tertiary-subtle-pressed: #665d79;
@@ -494,79 +792,79 @@
494
792
  --ffe-color-fill-neutral-extra-subtle: #ffffff06;
495
793
  --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
496
794
  --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
497
- --ffe-color-fill-feedback-info: #7eb5d2;
498
- --ffe-color-fill-feedback-info-subtle: #234f71;
499
- --ffe-color-fill-feedback-success: #6abe97;
500
- --ffe-color-fill-feedback-success-subtle: #09583b;
501
- --ffe-color-fill-feedback-warning: #ea910b;
502
- --ffe-color-fill-feedback-warning-subtle: #682c00;
503
- --ffe-color-fill-feedback-critical: #ff5e5c;
504
- --ffe-color-fill-feedback-critical-subtle: #7c1214;
505
- --ffe-color-fill-feedback-tip: #c1c1dc;
506
- --ffe-color-fill-feedback-tip-subtle: #45415a;
795
+ --ffe-color-fill-feedback-info: #a6cee2;
796
+ --ffe-color-fill-feedback-info-subtle: #356488;
797
+ --ffe-color-fill-feedback-success: #8fd1b1;
798
+ --ffe-color-fill-feedback-success-subtle: #00754e;
799
+ --ffe-color-fill-feedback-warning: #f6ac3c;
800
+ --ffe-color-fill-feedback-warning-subtle: #853f00;
801
+ --ffe-color-fill-feedback-critical: #ff7f7a;
802
+ --ffe-color-fill-feedback-critical-subtle: #a01c1f;
803
+ --ffe-color-fill-feedback-tip: #d3d3ea;
804
+ --ffe-color-fill-feedback-tip-subtle: #5a5671;
507
805
  --ffe-color-foreground-default: #ffffff;
508
- --ffe-color-foreground-subtle: #c2c2c2;
806
+ --ffe-color-foreground-subtle: #ffffffcc;
509
807
  --ffe-color-foreground-emphasis: #d7e7f4;
510
808
  --ffe-color-foreground-inverse: #020a0a;
511
- --ffe-color-foreground-interactive-link: #c3d9ef;
512
- --ffe-color-foreground-interactive-link-hover: #b6d1ec;
513
- --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
514
- --ffe-color-foreground-interactive-link-active: #f7fafd;
515
- --ffe-color-foreground-feedback-info: #c3dfea;
516
- --ffe-color-foreground-feedback-success: #b2e6cd;
517
- --ffe-color-foreground-feedback-warning: #ffc675;
518
- --ffe-color-foreground-feedback-critical: #ffaea8;
519
- --ffe-color-foreground-feedback-tip: #d3d3ea;
520
- --ffe-color-component-form-input-foreground-default: #ffffff;
521
- --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
522
- --ffe-color-component-form-input-foreground-placeholder: #adadad;
523
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
524
- --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
525
- --ffe-color-component-form-input-foreground-error: #ffaea8;
526
- --ffe-color-component-form-input-border-active: #d7e7f4;
527
- --ffe-color-component-form-input-fill-default: #292929;
528
- --ffe-color-component-form-input-fill-default-hover: #333333;
529
- --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
530
- --ffe-color-component-form-input-fill-disabled: #5c5c5c;
531
- --ffe-color-component-form-input-fill-read-only: #474747;
532
- --ffe-color-component-form-input-fill-error: #640e10;
809
+ --ffe-color-foreground-interactive-link: #f7fafd;
810
+ --ffe-color-foreground-interactive-link-hover: #e7f1f9;
811
+ --ffe-color-foreground-interactive-link-pressed: #d7e7f4;
812
+ --ffe-color-foreground-interactive-link-active: #ffffff;
813
+ --ffe-color-foreground-feedback-info: #dceaef;
814
+ --ffe-color-foreground-feedback-success: #cbf0df;
815
+ --ffe-color-foreground-feedback-warning: #ffe0b2;
816
+ --ffe-color-foreground-feedback-critical: #ffd5d1;
817
+ --ffe-color-foreground-feedback-tip: #e6e6f4;
818
+ --ffe-color-component-form-input-foreground-default: #1f1f1f;
819
+ --ffe-color-component-form-input-foreground-subtle: #525252;
820
+ --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
821
+ --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
822
+ --ffe-color-component-form-input-foreground-read-only: #525252;
823
+ --ffe-color-component-form-input-foreground-error: #7c1214;
824
+ --ffe-color-component-form-input-border-active: #7dabd9;
825
+ --ffe-color-component-form-input-fill-default: #ffffff;
826
+ --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
827
+ --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
828
+ --ffe-color-component-form-input-fill-disabled: #d6d6d6;
829
+ --ffe-color-component-form-input-fill-read-only: #e5e5e5;
830
+ --ffe-color-component-form-input-fill-error: #ffe3e0;
533
831
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
534
- --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
535
- --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
536
- --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
832
+ --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
833
+ --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
834
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
537
835
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
538
- --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
539
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
540
- --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
836
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
837
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
838
+ --ffe-color-component-form-toggleswitch-fill-critical: #ff5e5c;
541
839
  --ffe-color-component-button-action-border-default: #48a781;
542
- --ffe-color-component-button-action-border-hover: #6abe97;
543
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
840
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
841
+ --ffe-color-component-button-action-border-pressed: #0d6346;
544
842
  --ffe-color-component-button-action-fill-default: #00754e;
545
843
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
546
844
  --ffe-color-component-button-action-fill-pressed: #409674;
547
845
  --ffe-color-component-button-action-foreground-default: #ffffff;
548
846
  --ffe-color-component-button-action-foreground-hover: #ffffff;
549
- --ffe-color-component-button-primary-border-default: #9ec2e5;
550
- --ffe-color-component-button-primary-border-hover: #c3d9ef;
847
+ --ffe-color-component-button-primary-border-default: #c3d9ef;
848
+ --ffe-color-component-button-primary-border-hover: #cfe2f2;
551
849
  --ffe-color-component-button-primary-border-pressed: #d7e7f4;
552
- --ffe-color-component-button-primary-fill-default: #005aa4;
553
- --ffe-color-component-button-primary-fill-hover: #1566b2;
554
- --ffe-color-component-button-primary-fill-pressed: #2975c2;
555
- --ffe-color-component-button-primary-foreground-default: #ffffff;
556
- --ffe-color-component-button-primary-foreground-hover: #ffffff;
557
- --ffe-color-component-button-secondary-border-default: #f7fafd;
558
- --ffe-color-component-button-secondary-border-hover: #f7fafd;
559
- --ffe-color-component-button-secondary-border-pressed: #f7fafd;
850
+ --ffe-color-component-button-primary-fill-default: #f7fafd;
851
+ --ffe-color-component-button-primary-fill-hover: #d7e7f4;
852
+ --ffe-color-component-button-primary-fill-pressed: #c3d9ef;
853
+ --ffe-color-component-button-primary-foreground-default: #08235e;
854
+ --ffe-color-component-button-primary-foreground-hover: #08235e;
855
+ --ffe-color-component-button-secondary-border-default: #ffffff;
856
+ --ffe-color-component-button-secondary-border-hover: #ffffff;
857
+ --ffe-color-component-button-secondary-border-pressed: #ffffff;
560
858
  --ffe-color-component-button-secondary-fill-default: #ffffff00;
561
- --ffe-color-component-button-secondary-fill-hover: #333333;
562
- --ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
859
+ --ffe-color-component-button-secondary-fill-hover: #1566b2;
860
+ --ffe-color-component-button-secondary-fill-pressed: #2975c2;
563
861
  --ffe-color-component-button-secondary-foreground-default: #ffffff;
564
862
  --ffe-color-component-button-secondary-foreground-hover: #ffffff;
565
863
  --ffe-color-component-button-tertiary-fill-default: #ffffff00;
566
- --ffe-color-component-button-tertiary-fill-hover: #333333;
567
- --ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
568
- --ffe-color-component-button-tertiary-foreground-default: #f7fafd;
569
- --ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
864
+ --ffe-color-component-button-tertiary-fill-hover: #1566b2;
865
+ --ffe-color-component-button-tertiary-fill-pressed: #2975c2;
866
+ --ffe-color-component-button-tertiary-foreground-default: #ffffff;
867
+ --ffe-color-component-button-tertiary-foreground-hover: #ffffff;
570
868
  --ffe-color-component-logo-name: #ffffff;
571
869
  --ffe-color-component-logo-number1: #ffffff;
572
870
  --ffe-color-component-logo-circle-dark-red: #af0000;
@@ -577,13 +875,12 @@
577
875
  --ffe-color-border-primary-subtle: #ffffff13;
578
876
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
579
877
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
580
- --ffe-color-border-primary-emphasis: #9ec2e5;
581
- --ffe-color-border-feedback-info: #6096bd;
582
- --ffe-color-border-feedback-success: #48a781;
583
- --ffe-color-border-feedback-warning: #cc7205;
584
- --ffe-color-border-feedback-critical: #e44244;
585
- --ffe-color-border-feedback-tip: #a39db9;
586
- --ffe-color-border-interactive-focus: #f49f1f;
587
- --ffe-color-border-interactive-selected: #9ec2e5;
588
- }
878
+ --ffe-color-border-primary-emphasis: #c3d9ef;
879
+ --ffe-color-border-feedback-info: #7eb5d2;
880
+ --ffe-color-border-feedback-success: #6abe97;
881
+ --ffe-color-border-feedback-warning: #ea910b;
882
+ --ffe-color-border-feedback-critical: #ff5e5c;
883
+ --ffe-color-border-feedback-tip: #b4aecb;
884
+ --ffe-color-border-interactive-focus: #f6ac3c;
885
+ --ffe-color-border-interactive-selected: #c3d9ef;
589
886
  }