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