@sb1/ffe-buttons 19.1.5 → 20.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/buttons.css +192 -150
  2. package/less/base-button.less +124 -63
  3. package/less/inline-base-button.less +72 -29
  4. package/less/theme.less +173 -49
  5. package/package.json +4 -4
package/css/buttons.css CHANGED
@@ -2,73 +2,83 @@
2
2
  :host {
3
3
  /** Buttons */
4
4
  /* Common button text color */
5
- --ffe-v-button-text-color: var(--ffe-farge-hvit);
5
+ --ffe-v-button-text-color: var(--ffe-color-component-button-primary-foreground-default);
6
6
  /* Button border radius renders as 50% */
7
7
  --ffe-v-buttons-border-radius: 6em;
8
8
  /* Button box shadow */
9
- --ffe-v-button-shadow-color: var(--ffe-farge-vann);
9
+ --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
10
10
  /** Action button */
11
- --ffe-v-button-action-color: var(--ffe-farge-skog);
12
- --ffe-v-button-action-color-hover: #095139;
13
- --ffe-v-button-action-color-text: var(--ffe-farge-hvit);
11
+ --ffe-v-button-action-color: var(--ffe-color-component-button-action-fill-default);
12
+ --ffe-v-button-action-color-hover: var(--ffe-color-component-button-action-fill-hover);
13
+ --ffe-v-button-action-color-pressed: var(--ffe-color-component-button-action-fill-pressed);
14
+ --ffe-v-button-action-color-text: var(--ffe-color-component-button-action-foreground-default);
14
15
  /** Primary button */
15
- --ffe-v-button-primary-color: var(--ffe-farge-vann);
16
- --ffe-v-button-primary-color-hover: var(--ffe-farge-fjell);
17
- --ffe-v-button-primary-color-text: var(--ffe-farge-hvit);
16
+ --ffe-v-button-primary-color: var(--ffe-color-component-button-primary-fill-default);
17
+ --ffe-v-button-primary-color-hover: var(--ffe-color-component-button-primary-fill-hover);
18
+ --ffe-v-button-primary-color-pressed: var(--ffe-color-component-button-primary-fill-pressed);
19
+ --ffe-v-button-primary-color-text: var(--ffe-color-component-button-primary-foreground-default);
18
20
  /** Secondary buttons (+ back, expand, etc) */
19
- --ffe-v-button-secondary-color: var(--ffe-farge-hvit);
20
- --ffe-v-button-secondary-border-color: var(--ffe-farge-vann);
21
- --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-hvit);
22
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann);
23
- --ffe-v-button-secondary-color-text: var(--ffe-farge-vann);
21
+ --ffe-v-button-secondary-color: var(--ffe-color-component-button-secondary-fill-default);
22
+ --ffe-v-button-secondary-border-color: var(--ffe-color-component-button-secondary-border-default);
23
+ --ffe-v-button-secondary-color-text-hover: var(--ffe-color-component-button-secondary-foreground-hover);
24
+ --ffe-v-button-secondary-color-bg-hover: var(--ffe-color-component-button-secondary-fill-hover);
25
+ --ffe-v-button-secondary-color-bg-pressed: var(--ffe-color-component-button-secondary-fill-pressed);
26
+ --ffe-v-button-secondary-color-text: var(--ffe-color-component-button-secondary-foreground-default);
24
27
  /** Tertiary button */
25
- --ffe-v-button-tertiary-color: var(--ffe-farge-vann);
26
- --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
27
- --ffe-v-button-tertiary-color-focus: var(--ffe-farge-vann);
28
+ --ffe-v-button-tertiary-color: var(--ffe-color-component-button-tertiary-fill-default);
29
+ --ffe-v-button-tertiary-color-hover: var(--ffe-color-component-button-tertiary-fill-hover);
30
+ --ffe-v-button-tertiary-color-pressed: var(--ffe-color-component-button-tertiary-fill-pressed);
31
+ --ffe-v-button-tertiary-color-focus: var(--ffe-color-border-interactive-focus);
28
32
  /** Task button */
29
- --ffe-v-button-task-color: var(--ffe-farge-hvit);
30
- --ffe-v-button-task-color-hover: var(--ffe-farge-vann);
31
- --ffe-v-button-task-color-border-hover: var(--ffe-farge-vann);
32
- --ffe-v-button-task-color-border: var(--ffe-farge-vann);
33
- --ffe-v-button-task-color-text: var(--ffe-farge-vann);
34
- --ffe-v-button-task-color-text-hover: var(--ffe-farge-fjell);
35
- --ffe-v-button-task-color-icon: var(--ffe-farge-vann);
36
- --ffe-v-button-task-color-icon-hover: var(--ffe-farge-hvit);
37
- --ffe-v-button-task-border-focus: var(--ffe-farge-vann);
33
+ --ffe-v-button-task-color: var(--ffe-color-component-button-secondary-fill-default);
34
+ --ffe-v-button-task-color-hover: var(--ffe-color-component-button-secondary-fill-hover);
35
+ --ffe-v-button-task-color-pressed: var(--ffe-color-component-button-secondary-fill-pressed);
36
+ --ffe-v-button-task-color-border-hover: var(--ffe-color-component-button-secondary-border-hover);
37
+ --ffe-v-button-task-color-border: var(--ffe-color-component-button-secondary-border-default);
38
+ --ffe-v-button-task-color-text: var(--ffe-color-component-button-secondary-foreground-default);
39
+ --ffe-v-button-task-color-text-hover: var(--ffe-color-component-button-secondary-foreground-hover);
40
+ --ffe-v-button-task-color-icon: var(--ffe-color-component-button-secondary-foreground-default);
41
+ --ffe-v-button-task-color-icon-hover: var(--ffe-color-component-button-secondary-foreground-hover);
42
+ --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
38
43
  }
39
44
  @media (prefers-color-scheme: dark) {
40
45
  :root .regard-color-scheme-preference,
41
46
  :host .regard-color-scheme-preference {
42
- --ffe-v-button-text-color: var(--ffe-farge-svart);
43
- --ffe-v-button-shadow-color: var(--ffe-farge-hvit);
47
+ --ffe-v-button-text-color: var(--ffe-color-component-button-primary-foreground-default);
48
+ --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
44
49
  /** Action button */
45
- --ffe-v-button-action-color: var(--ffe-farge-skog-70);
46
- --ffe-v-button-action-color-hover: var(--ffe-farge-skog-30);
47
- --ffe-v-button-action-color-text: var(--ffe-farge-svart);
50
+ --ffe-v-button-action-color: var(--ffe-color-component-button-action-fill-inverse);
51
+ --ffe-v-button-action-color-hover: var(--ffe-color-component-button-action-fill-inverse-hover);
52
+ --ffe-v-button-action-color-pressed: var(--ffe-color-component-button-action-fill-inverse-pressed);
53
+ --ffe-v-button-action-color-text: var(--ffe-color-component-button-action-foreground-inverse);
48
54
  /** Primary button */
49
- --ffe-v-button-primary-color: var(--ffe-farge-vann-70);
50
- --ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
51
- --ffe-v-button-primary-color-text: var(--ffe-farge-svart);
55
+ --ffe-v-button-primary-color: var(--ffe-color-component-button-primary-fill-inverse);
56
+ --ffe-v-button-primary-color-hover: var(--ffe-color-component-button-primary-fill-inverse-hover);
57
+ --ffe-v-button-primary-color-pressed: var(--ffe-color-component-button-primary-fill-inverse-pressed);
58
+ --ffe-v-button-primary-color-text: var(--ffe-color-component-button-primary-foreground-inverse);
52
59
  /** Secondary buttons (+ task, back, expand, etc) */
53
- --ffe-v-button-secondary-color: var(--ffe-farge-svart);
54
- --ffe-v-button-secondary-border-color: var(--ffe-farge-vann-70);
55
- --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-svart);
56
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann-30);
57
- --ffe-v-button-secondary-color-text: var(--ffe-farge-vann-30);
60
+ --ffe-v-button-secondary-color: var(--ffe-color-component-button-secondary-fill-inverse);
61
+ --ffe-v-button-secondary-border-color: var(--ffe-color-component-button-secondary-border-inverse);
62
+ --ffe-v-button-secondary-color-text-hover: var(--ffe-color-component-button-secondary-foreground-inverse-hover);
63
+ --ffe-v-button-secondary-color-bg-hover: var(--ffe-color-component-button-secondary-fill-inverse-hover);
64
+ --ffe-v-button-secondary-color-bg-pressed: var(--ffe-color-component-button-secondary-fill-inverse-pressed);
65
+ --ffe-v-button-secondary-color-text: var(--ffe-color-component-button-secondary-foreground-inverse);
58
66
  /** Tertiary button */
59
- --ffe-v-button-tertiary-color: var(--ffe-farge-vann-30);
60
- --ffe-v-button-tertiary-color-hover: var(--ffe-farge-hvit);
61
- --ffe-v-button-tertiary-color-focus: var(--ffe-farge-hvit);
67
+ --ffe-v-button-tertiary-color: var(--ffe-color-component-button-tertiary-fill-inverse);
68
+ --ffe-v-button-tertiary-color-hover: var(--ffe-color-component-button-tertiary-fill-inverse-hover);
69
+ --ffe-v-button-tertiary-color-pressed: var(--ffe-color-component-button-tertiary-fill-inverse-pressed);
70
+ --ffe-v-button-tertiary-color-focus: var(--ffe-color-border-interactive-focus);
62
71
  /** Task button */
63
72
  --ffe-v-button-task-color: transparent;
64
- --ffe-v-button-task-color-hover: var(--ffe-farge-vann-70);
65
- --ffe-v-button-task-color-border-hover: var(--ffe-farge-vann-70);
66
- --ffe-v-button-task-color-border: var(--ffe-farge-vann-30);
67
- --ffe-v-button-task-color-text: var(--ffe-farge-vann-30);
68
- --ffe-v-button-task-color-text-hover: var(--ffe-farge-hvit);
69
- --ffe-v-button-task-color-icon: var(--ffe-farge-vann-30);
70
- --ffe-v-button-task-color-icon-hover: var(--ffe-farge-svart);
71
- --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
73
+ --ffe-v-button-task-color-hover: var(--ffe-color-component-button-secondary-fill-inverse-hover);
74
+ --ffe-v-button-task-color-pressed: var(--ffe-color-component-button-secondary-fill-inverse-pressed);
75
+ --ffe-v-button-task-color-border-hover: var(--ffe-color-component-button-secondary-border-inverse-hover);
76
+ --ffe-v-button-task-color-border: var(--ffe-color-component-button-secondary-border-inverse);
77
+ --ffe-v-button-task-color-text: var(--ffe-color-component-button-secondary-foreground-inverse);
78
+ --ffe-v-button-task-color-text-hover: var(--ffe-color-component-button-secondary-foreground-inverse-hover);
79
+ --ffe-v-button-task-color-icon: var(--ffe-color-component-button-secondary-foreground-inverse);
80
+ --ffe-v-button-task-color-icon-hover: var(--ffe-color-component-button-secondary-foreground-inverse);
81
+ --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
72
82
  }
73
83
  }
74
84
  .ffe-button-group {
@@ -132,7 +142,7 @@
132
142
  appearance: none;
133
143
  border: 2px solid transparent;
134
144
  border-radius: var(--ffe-v-buttons-border-radius);
135
- color: var(--ffe-farge-hvit);
145
+ color: var(--ffe-color-component-button-primary-foreground-default);
136
146
  cursor: pointer;
137
147
  display: -webkit-box;
138
148
  display: -ms-flexbox;
@@ -166,8 +176,8 @@
166
176
  background: transparent;
167
177
  border-radius: 1.5rem;
168
178
  inset: -5px;
169
- -webkit-box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
170
- box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
179
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
180
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
171
181
  -webkit-transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
172
182
  -o-transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
173
183
  transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
@@ -186,9 +196,10 @@
186
196
  .ffe-button:active {
187
197
  -webkit-transform: scale(0.97);
188
198
  transform: scale(0.97);
199
+ background-color: var(--ffe-color-component-button-primary-fill-pressed);
189
200
  }
190
201
  .ffe-button:visited {
191
- color: var(--ffe-v-button-text-color);
202
+ color: var(--ffe-color-component-button-primary-foreground-default);
192
203
  }
193
204
  @media (min-width: 480px) {
194
205
  .ffe-button {
@@ -202,104 +213,117 @@
202
213
  display: block;
203
214
  }
204
215
  .ffe-button--action {
205
- --background-color: var(--ffe-v-button-action-color);
206
- --color: var(--ffe-v-button-action-color-text);
207
- background-color: var(--background-color);
208
- color: var(--color);
216
+ background-color: var(--ffe-color-component-button-action-fill-default);
217
+ color: var(--ffe-color-default-neutral-inverted);
218
+ border: none;
209
219
  }
210
220
  .ffe-button--action :where(.ffe-button__icon) {
211
- color: var(--color);
221
+ color: var(--ffe-color-default-neutral-inverted);
212
222
  }
213
- .ffe-button--action:focus {
214
- --background-color: var(--ffe-v-button-action-color);
223
+ .ffe-button--action:active {
224
+ -webkit-transform: scale(0.97);
225
+ transform: scale(0.97);
226
+ background-color: var(--ffe-color-default-feedback-success-strongest);
215
227
  }
216
228
  @media (hover: hover) and (pointer: fine) {
217
- .ffe-button--action:hover {
218
- --background-color: var(--ffe-v-button-action-color-hover);
229
+ .ffe-button--action:hover:not(:active):not(.ffe-button--pressed) {
230
+ background-color: var(--ffe-color-default-feedback-success-stronger);
219
231
  }
220
232
  }
221
233
  .ffe-button--primary {
222
- --background-color: var(--ffe-v-button-primary-color);
223
- --color: var(--ffe-v-button-primary-color-text);
234
+ --background-color: var(--ffe-color-component-button-primary-fill-default);
235
+ --text-color: var(--ffe-color-component-button-primary-foreground-default);
224
236
  background-color: var(--background-color);
225
- color: var(--color);
237
+ color: var(--text-color);
226
238
  }
227
239
  .ffe-button--primary :where(.ffe-button__icon) {
228
- color: var(--color);
240
+ color: var(--text-color);
229
241
  }
230
- .ffe-button--primary:focus {
231
- --background-color: var(--ffe-v-button-primary-color);
242
+ .ffe-button--primary:active {
243
+ -webkit-transform: scale(0.97);
244
+ transform: scale(0.97);
245
+ --background-color: var(--ffe-color-component-button-primary-fill-pressed);
232
246
  }
233
247
  @media (hover: hover) and (pointer: fine) {
234
248
  .ffe-button--primary:hover {
235
- --background-color: var(--ffe-v-button-primary-color-hover);
249
+ --background-color: var(--ffe-color-component-button-primary-fill-hover);
236
250
  }
237
251
  }
238
252
  .ffe-button--secondary,
239
- .ffe-button--shortcut,
240
253
  .ffe-button--expand {
241
- --background-color: var(--ffe-v-button-secondary-color);
242
- --border-color: var(--ffe-v-button-secondary-border-color);
243
- --text-color: var(--ffe-v-button-secondary-color-text);
254
+ --background-color: var(--ffe-color-component-button-secondary-fill-default);
255
+ --border-color: var(--ffe-color-component-button-secondary-border-default);
256
+ --text-color: var(--ffe-color-component-button-secondary-foreground-default);
244
257
  background-color: var(--background-color);
245
258
  border: solid 2px var(--border-color);
246
259
  color: var(--text-color);
247
260
  }
248
261
  .ffe-button--secondary :where(.ffe-button__label, .ffe-button__icon),
249
- .ffe-button--shortcut :where(.ffe-button__label, .ffe-button__icon),
250
262
  .ffe-button--expand :where(.ffe-button__label, .ffe-button__icon) {
251
263
  color: var(--text-color);
252
264
  }
253
- .ffe-button--secondary:active,
254
- .ffe-button--shortcut:active,
255
- .ffe-button--expand:active,
265
+ @media (hover: hover) and (pointer: fine) {
266
+ .ffe-button--secondary:hover,
267
+ .ffe-button--expand:hover {
268
+ --background-color: var(--ffe-color-component-button-secondary-fill-hover);
269
+ --border-color: var(--ffe-color-component-button-secondary-border-hover);
270
+ --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
271
+ }
272
+ }
256
273
  .ffe-button--secondary:focus,
257
- .ffe-button--shortcut:focus,
258
274
  .ffe-button--expand:focus,
259
275
  .ffe-button--secondary:visited,
260
- .ffe-button--shortcut:visited,
261
276
  .ffe-button--expand:visited {
262
- color: var(--ffe-v-button-secondary-color-text);
277
+ color: var(--ffe-color-component-button-secondary-foreground-default);
278
+ background-color: var(--ffe-color-component-button-secondary-fill-hover);
263
279
  }
264
- @media (hover: hover) and (pointer: fine) {
265
- .ffe-button--secondary:hover,
266
- .ffe-button--shortcut:hover,
267
- .ffe-button--expand:hover {
268
- --background-color: var(--ffe-v-button-secondary-color-bg-hover);
269
- --border-color: var(--ffe-v-button-secondary-color-bg-hover);
270
- --text-color: var(--ffe-v-button-secondary-color-text-hover);
271
- }
280
+ .ffe-button--secondary:active,
281
+ .ffe-button--expand:active {
282
+ -webkit-transform: scale(0.97);
283
+ transform: scale(0.97);
284
+ background-color: var(--ffe-color-component-button-secondary-fill-pressed);
285
+ border-color: var(--ffe-color-component-button-secondary-border-pressed);
286
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
272
287
  }
273
- .ffe-button--shortcut:focus {
274
- -webkit-transform: translateX(12px);
275
- transform: translateX(12px);
288
+ .ffe-button--shortcut {
289
+ background-color: var(--ffe-color-component-button-secondary-fill-default);
290
+ border: solid 2px var(--ffe-color-component-button-secondary-border-default);
291
+ color: var(--ffe-color-component-button-secondary-foreground-default);
276
292
  }
277
293
  .ffe-button--shortcut .ffe-button__icon {
278
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
279
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
280
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
281
- will-change: transform;
294
+ color: var(--ffe-color-component-button-secondary-foreground-default);
282
295
  }
283
296
  @media (hover: hover) and (pointer: fine) {
297
+ .ffe-button--shortcut:hover {
298
+ background-color: var(--ffe-color-component-button-secondary-fill-hover);
299
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
300
+ }
284
301
  .ffe-button--shortcut:hover .ffe-button__icon {
285
- -webkit-transform: translateX(12px);
286
- transform: translateX(12px);
302
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
287
303
  }
288
304
  }
289
- .ffe-button--expand {
290
- border-radius: 34px;
305
+ .ffe-button--shortcut:active {
306
+ -webkit-transform: scale(0.97);
307
+ transform: scale(0.97);
308
+ background-color: var(--ffe-color-component-button-secondary-fill-pressed);
309
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
310
+ }
311
+ .ffe-button--shortcut:active .ffe-button__icon {
312
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
313
+ }
314
+ .ffe-button--shortcut:focus {
315
+ -webkit-transform: translateX(12px);
316
+ transform: translateX(12px);
291
317
  }
292
318
  .ffe-button--expanded {
293
319
  padding: var(--ffe-spacing-xs);
294
320
  width: 45px;
295
321
  }
296
322
  .ffe-button--task {
297
- --icon-color: var(--ffe-v-button-task-color-icon);
298
- --text-color: var(--ffe-v-button-task-color-text);
299
- --border-color: transparent;
323
+ --text-color: var(--ffe-color-foreground-emphasis);
300
324
  background: transparent;
301
325
  border-radius: 1.75rem;
302
- border: 2px solid var(--border-color);
326
+ border: none;
303
327
  -webkit-box-shadow: none;
304
328
  box-shadow: none;
305
329
  color: var(--text-color);
@@ -312,11 +336,11 @@
312
336
  width: auto;
313
337
  }
314
338
  .ffe-button--task :where(.ffe-button__icon) {
315
- --border-color: var(--ffe-v-button-task-color-border);
316
- --background-color: var(--ffe-v-button-task-color);
317
- --color: var(--icon-color);
318
- border: 2px solid var(--border-color);
319
- background-color: var(--background-color);
339
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
340
+ --icon-background-color: transparent;
341
+ --icon-color: var(--ffe-color-foreground-emphasis);
342
+ border: 2px solid var(--icon-border-color);
343
+ background-color: var(--icon-background-color);
320
344
  border-radius: 50%;
321
345
  height: 45px;
322
346
  width: 45px;
@@ -335,23 +359,26 @@
335
359
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
336
360
  }
337
361
  .ffe-button--task :where(.ffe-button__icon) :where(.ffe-icons) {
338
- color: var(--color);
362
+ color: var(--icon-color);
339
363
  }
340
- @media (hover: hover) and (pointer: fine) {
341
- .ffe-button--task:hover .ffe-button__icon {
342
- --background-color: var(--ffe-v-button-task-color-hover);
343
- --border-color: var(--ffe-v-button-task-color-border-hover);
344
- --icon-color: var(--ffe-v-button-task-color-icon-hover);
345
- }
364
+ .ffe-button--task:focus::after {
365
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
366
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
346
367
  }
347
- .ffe-button--task:focus {
348
- --border-color: var(--ffe-v-button-task-border-focus);
368
+ .ffe-button--task:active {
369
+ -webkit-transform: scale(0.97);
370
+ transform: scale(0.97);
371
+ background-color: transparent;
349
372
  }
350
- .ffe-button--task:focus::after {
351
- display: none;
373
+ .ffe-button--task:active .ffe-button__icon {
374
+ background-color: var(--ffe-color-component-button-secondary-fill-pressed);
375
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
352
376
  }
353
- .ffe-button--task:focus:not(:focus-visible) {
354
- --border-color: transparent;
377
+ @media (hover: hover) and (pointer: fine) {
378
+ .ffe-button--task:hover .ffe-button__icon {
379
+ --icon-background-color: var(--ffe-color-component-button-secondary-fill-hover);
380
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
381
+ }
355
382
  }
356
383
  .ffe-button--loading {
357
384
  pointer-events: none;
@@ -477,32 +504,33 @@
477
504
  margin-left: 6px;
478
505
  }
479
506
  .ffe-inline-button--back {
480
- color: var(--ffe-v-button-primary-color);
481
- line-height: 1;
482
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs) var(--ffe-spacing-2xl);
483
- outline: none;
484
- }
485
- .ffe-inline-button--back .ffe-inline-button__label {
486
- -webkit-transition: all transform var(--ffe-transition-duration) var(--ffe-ease);
487
- -o-transition: all transform var(--ffe-transition-duration) var(--ffe-ease);
488
- transition: all transform var(--ffe-transition-duration) var(--ffe-ease);
489
- border-bottom: 1px solid transparent;
507
+ background-color: var(--background-color);
508
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
509
+ padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
490
510
  }
491
- .ffe-inline-button--back .ffe-inline-button__icon {
492
- color: var(--ffe-v-button-primary-color);
511
+ .ffe-inline-button--back .ffe-inline-button__label::after {
512
+ border-bottom: solid 1px currentcolor;
513
+ content: ' ';
493
514
  display: block;
515
+ width: 100%;
494
516
  }
495
517
  @media (hover: hover) and (pointer: fine) {
496
- .ffe-inline-button--back:hover .ffe-inline-button__icon {
497
- color: var(--ffe-v-button-primary-color-hover);
498
- }
499
- .ffe-inline-button--back:hover .ffe-inline-button__label {
500
- color: var(--ffe-v-button-primary-color-hover);
501
- border-bottom-color: var(--ffe-v-button-primary-color-hover);
518
+ .ffe-inline-button--back:hover {
519
+ background-color: var(--ffe-color-component-button-tertiary-fill-hover);
520
+ color: var(--ffe-color-component-button-tertiary-foreground-hover);
502
521
  }
503
522
  }
523
+ .ffe-inline-button--back:active {
524
+ background-color: var(--ffe-color-component-button-tertiary-fill-pressed);
525
+ }
526
+ .ffe-inline-button--back .ffe-button__icon {
527
+ color: var(--text-color);
528
+ }
504
529
  .ffe-inline-button--expand {
505
- color: var(--ffe-v-button-primary-color);
530
+ --text-color: var(--ffe-color-component-button-secondary-foreground-default);
531
+ --background-color: var(--ffe-color-component-button-secondary-fill-default);
532
+ color: var(--text-color);
533
+ background-color: var(--background-color);
506
534
  padding: 0 var(--ffe-spacing-xs);
507
535
  margin: 0;
508
536
  -webkit-box-align: center;
@@ -510,7 +538,7 @@
510
538
  align-items: center;
511
539
  }
512
540
  .ffe-inline-button--expand .ffe-inline-button__icon {
513
- color: var(--ffe-v-button-primary-color);
541
+ color: var(--text-color);
514
542
  -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
515
543
  transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
516
544
  -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
@@ -518,17 +546,21 @@
518
546
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
519
547
  }
520
548
  @media (hover: hover) and (pointer: fine) {
521
- .ffe-inline-button--expand:hover .ffe-inline-button__icon,
522
- .ffe-inline-button--expand:hover .ffe-inline-button__label {
523
- color: var(--ffe-v-button-primary-color-hover);
549
+ .ffe-inline-button--expand:hover {
550
+ --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
551
+ --background-color: var(--ffe-color-component-button-secondary-fill-hover);
524
552
  }
525
553
  }
554
+ .ffe-inline-button--expand:active {
555
+ --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
556
+ --background-color: var(--ffe-color-component-button-secondary-fill-pressed);
557
+ }
526
558
  .ffe-inline-button--tertiary {
527
559
  --icon-size-md: 1.5rem;
528
560
  --border-width: 1px;
529
561
  -ms-flex-line-pack: center;
530
562
  align-content: center;
531
- color: var(--ffe-v-button-tertiary-color);
563
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
532
564
  -ms-flex-wrap: wrap;
533
565
  flex-wrap: wrap;
534
566
  padding: var(--ffe-spacing-xs) calc(var(--ffe-spacing-sm));
@@ -536,7 +568,7 @@
536
568
  line-height: calc(var(--icon-size-md) - var(--border-width));
537
569
  }
538
570
  .ffe-inline-button--tertiary .ffe-inline-button__icon {
539
- color: var(--ffe-v-button-tertiary-color);
571
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
540
572
  }
541
573
  .ffe-inline-button--tertiary .ffe-inline-button__label::after {
542
574
  border-bottom: solid var(--border-width) currentcolor;
@@ -547,17 +579,27 @@
547
579
  .ffe-inline-button--tertiary:focus {
548
580
  -webkit-box-shadow: none;
549
581
  box-shadow: none;
550
- border-color: var(--ffe-v-button-tertiary-color-focus);
551
- color: var(--ffe-v-button-tertiary-color);
582
+ border-color: var(--ffe-color-border-interactive-focus);
583
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
552
584
  }
553
585
  .ffe-inline-button--tertiary:focus:not(:focus-visible) {
554
586
  border-color: transparent;
555
587
  }
588
+ .ffe-inline-button--tertiary:active,
589
+ .ffe-inline-button--tertiary.ffe-button--pressed {
590
+ -webkit-transform: scale(0.97);
591
+ transform: scale(0.97);
592
+ background-color: var(--ffe-color-default-feedback-success-strongest);
593
+ }
556
594
  @media (hover: hover) and (pointer: fine) {
557
595
  .ffe-inline-button--tertiary:hover {
558
- color: var(--ffe-v-button-tertiary-color-hover);
596
+ color: var(--ffe-color-component-button-tertiary-border-hover);
597
+ background-color: var(--ffe-color-component-button-tertiary-fill-hover);
559
598
  }
560
599
  .ffe-inline-button--tertiary:hover .ffe-inline-button__icon {
561
- color: var(--ffe-v-button-tertiary-color-hover);
600
+ color: var(--ffe-color-component-button-tertiary-foreground-hover);
562
601
  }
563
602
  }
603
+ .ffe-inline-button--tertiary:active {
604
+ background-color: var(--ffe-color-component-button-secondary-fill-pressed);
605
+ }
package/less/base-button.less CHANGED
@@ -5,7 +5,7 @@
5
5
  appearance: none;
6
6
  border: 2px solid transparent;
7
7
  border-radius: var(--ffe-v-buttons-border-radius);
8
- color: var(--ffe-farge-hvit);
8
+ color: var(--ffe-color-component-button-primary-foreground-default);
9
9
  cursor: pointer;
10
10
  display: flex;
11
11
  font-family: var(--ffe-g-font);
@@ -30,7 +30,7 @@
30
30
  background: transparent;
31
31
  border-radius: 1.5rem;
32
32
  inset: -5px;
33
- box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
33
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
34
34
  transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
35
35
  }
36
36
 
@@ -50,10 +50,13 @@
50
50
 
51
51
  &:active {
52
52
  transform: scale(0.97);
53
+ background-color: var(
54
+ --ffe-color-component-button-primary-fill-pressed
55
+ );
53
56
  }
54
57
 
55
58
  &:visited {
56
- color: var(--ffe-v-button-text-color);
59
+ color: var(--ffe-color-component-button-primary-foreground-default);
57
60
  }
58
61
 
59
62
  @media (min-width: @breakpoint-sm) {
@@ -67,55 +70,65 @@
67
70
  }
68
71
 
69
72
  .ffe-button--action {
70
- --background-color: var(--ffe-v-button-action-color);
71
- --color: var(--ffe-v-button-action-color-text);
72
-
73
- background-color: var(--background-color);
74
- color: var(--color);
73
+ background-color: var(--ffe-color-component-button-action-fill-default);
74
+ color: var(--ffe-color-default-neutral-inverted);
75
+ border: none;
75
76
 
76
77
  :where(.ffe-button__icon) {
77
- color: var(--color);
78
+ color: var(--ffe-color-default-neutral-inverted);
78
79
  }
79
80
 
80
- &:focus {
81
- --background-color: var(--ffe-v-button-action-color);
81
+ &:active {
82
+ transform: scale(0.97);
83
+ background-color: var(--ffe-color-default-feedback-success-strongest);
82
84
  }
83
85
 
84
86
  @media (hover: hover) and (pointer: fine) {
85
- &:hover {
86
- --background-color: var(--ffe-v-button-action-color-hover);
87
+ &:hover:not(:active):not(.ffe-button--pressed) {
88
+ background-color: var(
89
+ --ffe-color-default-feedback-success-stronger
90
+ );
87
91
  }
88
92
  }
89
93
  }
90
94
 
91
95
  .ffe-button--primary {
92
- --background-color: var(--ffe-v-button-primary-color);
93
- --color: var(--ffe-v-button-primary-color-text);
96
+ --background-color: var(--ffe-color-component-button-primary-fill-default);
97
+ --text-color: var(--ffe-color-component-button-primary-foreground-default);
94
98
 
95
99
  background-color: var(--background-color);
96
- color: var(--color);
100
+ color: var(--text-color);
97
101
 
98
102
  :where(.ffe-button__icon) {
99
- color: var(--color);
103
+ color: var(--text-color);
100
104
  }
101
105
 
102
- &:focus {
103
- --background-color: var(--ffe-v-button-primary-color);
106
+ &:active {
107
+ transform: scale(0.97);
108
+
109
+ --background-color: var(
110
+ --ffe-color-component-button-primary-fill-pressed
111
+ );
104
112
  }
105
113
 
106
114
  @media (hover: hover) and (pointer: fine) {
107
115
  &:hover {
108
- --background-color: var(--ffe-v-button-primary-color-hover);
116
+ --background-color: var(
117
+ --ffe-color-component-button-primary-fill-hover
118
+ );
109
119
  }
110
120
  }
111
121
  }
112
122
 
113
123
  .ffe-button--secondary,
114
- .ffe-button--shortcut,
115
124
  .ffe-button--expand {
116
- --background-color: var(--ffe-v-button-secondary-color);
117
- --border-color: var(--ffe-v-button-secondary-border-color);
118
- --text-color: var(--ffe-v-button-secondary-color-text);
125
+ --background-color: var(
126
+ --ffe-color-component-button-secondary-fill-default
127
+ );
128
+ --border-color: var(--ffe-color-component-button-secondary-border-default);
129
+ --text-color: var(
130
+ --ffe-color-component-button-secondary-foreground-default
131
+ );
119
132
 
120
133
  background-color: var(--background-color);
121
134
  border: solid 2px var(--border-color);
@@ -124,40 +137,80 @@
124
137
  :where(.ffe-button__label, .ffe-button__icon) {
125
138
  color: var(--text-color);
126
139
  }
127
- &:active,
128
- &:focus,
129
- &:visited {
130
- color: var(--ffe-v-button-secondary-color-text);
131
- }
132
140
 
133
141
  @media (hover: hover) and (pointer: fine) {
134
142
  &:hover {
135
- --background-color: var(--ffe-v-button-secondary-color-bg-hover);
136
- --border-color: var(--ffe-v-button-secondary-color-bg-hover);
137
- --text-color: var(--ffe-v-button-secondary-color-text-hover);
143
+ --background-color: var(
144
+ --ffe-color-component-button-secondary-fill-hover
145
+ );
146
+ --border-color: var(
147
+ --ffe-color-component-button-secondary-border-hover
148
+ );
149
+ --text-color: var(
150
+ --ffe-color-component-button-secondary-foreground-hover
151
+ );
138
152
  }
139
153
  }
154
+
155
+ &:focus,
156
+ &:visited {
157
+ color: var(--ffe-color-component-button-secondary-foreground-default);
158
+ background-color: var(
159
+ --ffe-color-component-button-secondary-fill-hover
160
+ );
161
+ }
162
+
163
+ &:active {
164
+ transform: scale(0.97);
165
+ background-color: var(
166
+ --ffe-color-component-button-secondary-fill-pressed
167
+ );
168
+ border-color: var(
169
+ --ffe-color-component-button-secondary-border-pressed
170
+ );
171
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
172
+ }
140
173
  }
141
174
 
142
175
  .ffe-button--shortcut {
143
- &:focus {
144
- transform: translateX(12px);
145
- }
176
+ background-color: var(--ffe-color-component-button-secondary-fill-default);
177
+ border: solid 2px var(--ffe-color-component-button-secondary-border-default);
178
+ color: var(--ffe-color-component-button-secondary-foreground-default);
146
179
 
147
180
  .ffe-button__icon {
148
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
149
- will-change: transform;
181
+ color: var(--ffe-color-component-button-secondary-foreground-default);
150
182
  }
151
183
 
152
184
  @media (hover: hover) and (pointer: fine) {
153
- &:hover .ffe-button__icon {
154
- transform: translateX(12px);
185
+ &:hover {
186
+ background-color: var(
187
+ --ffe-color-component-button-secondary-fill-hover
188
+ );
189
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
190
+
191
+ .ffe-button__icon {
192
+ color: var(
193
+ --ffe-color-component-button-secondary-foreground-hover
194
+ );
195
+ }
155
196
  }
156
197
  }
157
- }
158
198
 
159
- .ffe-button--expand {
160
- border-radius: 34px;
199
+ &:active {
200
+ transform: scale(0.97);
201
+ background-color: var(
202
+ --ffe-color-component-button-secondary-fill-pressed
203
+ );
204
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
205
+
206
+ .ffe-button__icon {
207
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
208
+ }
209
+ }
210
+
211
+ &:focus {
212
+ transform: translateX(12px);
213
+ }
161
214
  }
162
215
 
163
216
  .ffe-button--expanded {
@@ -166,13 +219,11 @@
166
219
  }
167
220
 
168
221
  .ffe-button--task {
169
- --icon-color: var(--ffe-v-button-task-color-icon);
170
- --text-color: var(--ffe-v-button-task-color-text);
171
- --border-color: transparent;
222
+ --text-color: var(--ffe-color-foreground-emphasis);
172
223
 
173
224
  background: transparent;
174
225
  border-radius: 1.75rem;
175
- border: 2px solid var(--border-color);
226
+ border: none;
176
227
  box-shadow: none;
177
228
  color: var(--text-color);
178
229
  display: inline-block;
@@ -183,12 +234,12 @@
183
234
  width: auto;
184
235
 
185
236
  :where(.ffe-button__icon) {
186
- --border-color: var(--ffe-v-button-task-color-border);
187
- --background-color: var(--ffe-v-button-task-color);
188
- --color: var(--icon-color);
237
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
238
+ --icon-background-color: transparent;
239
+ --icon-color: var(--ffe-color-foreground-emphasis);
189
240
 
190
- border: 2px solid var(--border-color);
191
- background-color: var(--background-color);
241
+ border: 2px solid var(--icon-border-color);
242
+ background-color: var(--icon-background-color);
192
243
  border-radius: 50%;
193
244
  height: 45px;
194
245
  width: 45px;
@@ -199,28 +250,38 @@
199
250
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
200
251
 
201
252
  :where(.ffe-icons) {
202
- color: var(--color);
253
+ color: var(--icon-color);
203
254
  }
204
255
  }
205
256
 
206
- @media (hover: hover) and (pointer: fine) {
207
- &:hover .ffe-button__icon {
208
- --background-color: var(--ffe-v-button-task-color-hover);
209
- --border-color: var(--ffe-v-button-task-color-border-hover);
210
- --icon-color: var(--ffe-v-button-task-color-icon-hover);
257
+ &:focus {
258
+ &::after {
259
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
211
260
  }
212
261
  }
213
262
 
214
- &:focus {
215
- --border-color: var(--ffe-v-button-task-border-focus);
263
+ &:active {
264
+ transform: scale(0.97);
265
+ background-color: transparent;
216
266
 
217
- &::after {
218
- display: none;
267
+ .ffe-button__icon {
268
+ background-color: var(
269
+ --ffe-color-component-button-secondary-fill-pressed
270
+ );
271
+
272
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
219
273
  }
220
274
  }
221
275
 
222
- &:focus:not(:focus-visible) {
223
- --border-color: transparent;
276
+ @media (hover: hover) and (pointer: fine) {
277
+ &:hover {
278
+ .ffe-button__icon {
279
+ --icon-background-color: var(
280
+ --ffe-color-component-button-secondary-fill-hover
281
+ );
282
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
283
+ }
284
+ }
224
285
  }
225
286
  }
226
287
 
package/less/inline-base-button.less CHANGED
@@ -46,52 +46,78 @@
46
46
  }
47
47
 
48
48
  .ffe-inline-button--back {
49
- color: var(--ffe-v-button-primary-color);
50
- line-height: 1;
51
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs)
52
- var(--ffe-spacing-2xl);
53
- outline: none;
49
+ background-color: var(--background-color);
50
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
51
+ padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
54
52
 
55
53
  .ffe-inline-button__label {
56
- transition: all transform var(--ffe-transition-duration) var(--ffe-ease);
57
- border-bottom: 1px solid transparent;
58
- }
59
-
60
- .ffe-inline-button__icon {
61
- color: var(--ffe-v-button-primary-color);
62
- display: block;
54
+ &::after {
55
+ border-bottom: solid 1px currentcolor;
56
+ content: ' ';
57
+ display: block;
58
+ width: 100%;
59
+ }
63
60
  }
64
61
 
65
62
  @media (hover: hover) and (pointer: fine) {
66
- &:hover .ffe-inline-button__icon {
67
- color: var(--ffe-v-button-primary-color-hover);
63
+ &:hover {
64
+ background-color: var(
65
+ --ffe-color-component-button-tertiary-fill-hover
66
+ );
67
+ color: var(--ffe-color-component-button-tertiary-foreground-hover);
68
68
  }
69
+ }
69
70
 
70
- &:hover .ffe-inline-button__label {
71
- color: var(--ffe-v-button-primary-color-hover);
72
- border-bottom-color: var(--ffe-v-button-primary-color-hover);
73
- }
71
+ &:active {
72
+ background-color: var(
73
+ --ffe-color-component-button-tertiary-fill-pressed
74
+ );
75
+ }
76
+
77
+ .ffe-button__icon {
78
+ color: var(--text-color);
74
79
  }
75
80
  }
76
81
 
77
82
  .ffe-inline-button--expand {
78
- color: var(--ffe-v-button-primary-color);
83
+ --text-color: var(
84
+ --ffe-color-component-button-secondary-foreground-default
85
+ );
86
+ --background-color: var(
87
+ --ffe-color-component-button-secondary-fill-default
88
+ );
89
+
90
+ color: var(--text-color);
91
+ background-color: var(--background-color);
79
92
  padding: 0 var(--ffe-spacing-xs);
80
93
  margin: 0;
81
94
  align-items: center;
82
95
 
83
96
  .ffe-inline-button__icon {
84
- color: var(--ffe-v-button-primary-color);
97
+ color: var(--text-color);
85
98
  transition: transform var(--ffe-transition-duration)
86
99
  var(--ffe-ease-in-out-back);
87
100
  }
88
101
 
89
102
  @media (hover: hover) and (pointer: fine) {
90
- &:hover .ffe-inline-button__icon,
91
- &:hover .ffe-inline-button__label {
92
- color: var(--ffe-v-button-primary-color-hover);
103
+ &:hover {
104
+ --text-color: var(
105
+ --ffe-color-component-button-secondary-foreground-hover
106
+ );
107
+ --background-color: var(
108
+ --ffe-color-component-button-secondary-fill-hover
109
+ );
93
110
  }
94
111
  }
112
+
113
+ &:active {
114
+ --text-color: var(
115
+ --ffe-color-component-button-secondary-foreground-hover
116
+ );
117
+ --background-color: var(
118
+ --ffe-color-component-button-secondary-fill-pressed
119
+ );
120
+ }
95
121
  }
96
122
 
97
123
  .ffe-inline-button--tertiary {
@@ -99,14 +125,14 @@
99
125
  --border-width: 1px;
100
126
 
101
127
  align-content: center;
102
- color: var(--ffe-v-button-tertiary-color);
128
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
103
129
  flex-wrap: wrap;
104
130
  padding: var(--ffe-spacing-xs) calc(var(--ffe-spacing-sm));
105
131
  border: 2px solid transparent;
106
132
  line-height: calc(var(--icon-size-md) - var(--border-width));
107
133
 
108
134
  .ffe-inline-button__icon {
109
- color: var(--ffe-v-button-tertiary-color);
135
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
110
136
  }
111
137
 
112
138
  .ffe-inline-button__label {
@@ -120,21 +146,38 @@
120
146
 
121
147
  &:focus {
122
148
  box-shadow: none;
123
- border-color: var(--ffe-v-button-tertiary-color-focus);
124
- color: var(--ffe-v-button-tertiary-color);
149
+ border-color: var(--ffe-color-border-interactive-focus);
150
+ color: var(--ffe-color-component-button-tertiary-foreground-default);
125
151
 
126
152
  &:not(:focus-visible) {
127
153
  border-color: transparent;
128
154
  }
129
155
  }
130
156
 
157
+ &:active,
158
+ &.ffe-button--pressed {
159
+ transform: scale(0.97);
160
+ background-color: var(--ffe-color-default-feedback-success-strongest);
161
+ }
162
+
131
163
  @media (hover: hover) and (pointer: fine) {
132
164
  &:hover {
133
- color: var(--ffe-v-button-tertiary-color-hover);
165
+ color: var(--ffe-color-component-button-tertiary-border-hover);
166
+ background-color: var(
167
+ --ffe-color-component-button-tertiary-fill-hover
168
+ );
134
169
 
135
170
  .ffe-inline-button__icon {
136
- color: var(--ffe-v-button-tertiary-color-hover);
171
+ color: var(
172
+ --ffe-color-component-button-tertiary-foreground-hover
173
+ );
137
174
  }
138
175
  }
139
176
  }
177
+
178
+ &:active {
179
+ background-color: var(
180
+ --ffe-color-component-button-secondary-fill-pressed
181
+ );
182
+ }
140
183
  }
package/less/theme.less CHANGED
@@ -3,84 +3,208 @@
3
3
  /** Buttons */
4
4
 
5
5
  /* Common button text color */
6
- --ffe-v-button-text-color: var(--ffe-farge-hvit);
6
+ --ffe-v-button-text-color: var(
7
+ --ffe-color-component-button-primary-foreground-default
8
+ );
7
9
 
8
10
  /* Button border radius renders as 50% */
9
11
  --ffe-v-buttons-border-radius: 6em;
10
12
 
11
13
  /* Button box shadow */
12
- --ffe-v-button-shadow-color: var(--ffe-farge-vann);
14
+ --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
13
15
 
14
16
  /** Action button */
15
- --ffe-v-button-action-color: var(--ffe-farge-skog);
16
- --ffe-v-button-action-color-hover: #095139;
17
- --ffe-v-button-action-color-text: var(--ffe-farge-hvit);
17
+ --ffe-v-button-action-color: var(
18
+ --ffe-color-component-button-action-fill-default
19
+ );
20
+ --ffe-v-button-action-color-hover: var(
21
+ --ffe-color-component-button-action-fill-hover
22
+ );
23
+ --ffe-v-button-action-color-pressed: var(
24
+ --ffe-color-component-button-action-fill-pressed
25
+ );
26
+ --ffe-v-button-action-color-text: var(
27
+ --ffe-color-component-button-action-foreground-default
28
+ );
18
29
 
19
30
  /** Primary button */
20
- --ffe-v-button-primary-color: var(--ffe-farge-vann);
21
- --ffe-v-button-primary-color-hover: var(--ffe-farge-fjell);
22
- --ffe-v-button-primary-color-text: var(--ffe-farge-hvit);
31
+ --ffe-v-button-primary-color: var(
32
+ --ffe-color-component-button-primary-fill-default
33
+ );
34
+ --ffe-v-button-primary-color-hover: var(
35
+ --ffe-color-component-button-primary-fill-hover
36
+ );
37
+ --ffe-v-button-primary-color-pressed: var(
38
+ --ffe-color-component-button-primary-fill-pressed
39
+ );
40
+ --ffe-v-button-primary-color-text: var(
41
+ --ffe-color-component-button-primary-foreground-default
42
+ );
23
43
 
24
44
  /** Secondary buttons (+ back, expand, etc) */
25
- --ffe-v-button-secondary-color: var(--ffe-farge-hvit);
26
- --ffe-v-button-secondary-border-color: var(--ffe-farge-vann);
27
- --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-hvit);
28
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann);
29
- --ffe-v-button-secondary-color-text: var(--ffe-farge-vann);
45
+ --ffe-v-button-secondary-color: var(
46
+ --ffe-color-component-button-secondary-fill-default
47
+ );
48
+ --ffe-v-button-secondary-border-color: var(
49
+ --ffe-color-component-button-secondary-border-default
50
+ );
51
+ --ffe-v-button-secondary-color-text-hover: var(
52
+ --ffe-color-component-button-secondary-foreground-hover
53
+ );
54
+ --ffe-v-button-secondary-color-bg-hover: var(
55
+ --ffe-color-component-button-secondary-fill-hover
56
+ );
57
+ --ffe-v-button-secondary-color-bg-pressed: var(
58
+ --ffe-color-component-button-secondary-fill-pressed
59
+ );
60
+ --ffe-v-button-secondary-color-text: var(
61
+ --ffe-color-component-button-secondary-foreground-default
62
+ );
30
63
 
31
64
  /** Tertiary button */
32
- --ffe-v-button-tertiary-color: var(--ffe-farge-vann);
33
- --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
34
- --ffe-v-button-tertiary-color-focus: var(--ffe-farge-vann);
65
+ --ffe-v-button-tertiary-color: var(
66
+ --ffe-color-component-button-tertiary-fill-default
67
+ );
68
+ --ffe-v-button-tertiary-color-hover: var(
69
+ --ffe-color-component-button-tertiary-fill-hover
70
+ );
71
+ --ffe-v-button-tertiary-color-pressed: var(
72
+ --ffe-color-component-button-tertiary-fill-pressed
73
+ );
74
+ --ffe-v-button-tertiary-color-focus: var(
75
+ --ffe-color-border-interactive-focus
76
+ );
35
77
 
36
78
  /** Task button */
37
- --ffe-v-button-task-color: var(--ffe-farge-hvit);
38
- --ffe-v-button-task-color-hover: var(--ffe-farge-vann);
39
- --ffe-v-button-task-color-border-hover: var(--ffe-farge-vann);
40
- --ffe-v-button-task-color-border: var(--ffe-farge-vann);
41
- --ffe-v-button-task-color-text: var(--ffe-farge-vann);
42
- --ffe-v-button-task-color-text-hover: var(--ffe-farge-fjell);
43
- --ffe-v-button-task-color-icon: var(--ffe-farge-vann);
44
- --ffe-v-button-task-color-icon-hover: var(--ffe-farge-hvit);
45
- --ffe-v-button-task-border-focus: var(--ffe-farge-vann);
79
+ --ffe-v-button-task-color: var(
80
+ --ffe-color-component-button-secondary-fill-default
81
+ );
82
+ --ffe-v-button-task-color-hover: var(
83
+ --ffe-color-component-button-secondary-fill-hover
84
+ );
85
+ --ffe-v-button-task-color-pressed: var(
86
+ --ffe-color-component-button-secondary-fill-pressed
87
+ );
88
+ --ffe-v-button-task-color-border-hover: var(
89
+ --ffe-color-component-button-secondary-border-hover
90
+ );
91
+ --ffe-v-button-task-color-border: var(
92
+ --ffe-color-component-button-secondary-border-default
93
+ );
94
+ --ffe-v-button-task-color-text: var(
95
+ --ffe-color-component-button-secondary-foreground-default
96
+ );
97
+ --ffe-v-button-task-color-text-hover: var(
98
+ --ffe-color-component-button-secondary-foreground-hover
99
+ );
100
+ --ffe-v-button-task-color-icon: var(
101
+ --ffe-color-component-button-secondary-foreground-default
102
+ );
103
+ --ffe-v-button-task-color-icon-hover: var(
104
+ --ffe-color-component-button-secondary-foreground-hover
105
+ );
106
+ --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
46
107
 
47
108
  @media (prefers-color-scheme: dark) {
48
109
  .regard-color-scheme-preference {
49
- --ffe-v-button-text-color: var(--ffe-farge-svart);
50
- --ffe-v-button-shadow-color: var(--ffe-farge-hvit);
110
+ --ffe-v-button-text-color: var(
111
+ --ffe-color-component-button-primary-foreground-default
112
+ );
113
+ --ffe-v-button-shadow-color: var(
114
+ --ffe-color-border-interactive-focus
115
+ );
51
116
 
52
117
  /** Action button */
53
- --ffe-v-button-action-color: var(--ffe-farge-skog-70);
54
- --ffe-v-button-action-color-hover: var(--ffe-farge-skog-30);
55
- --ffe-v-button-action-color-text: var(--ffe-farge-svart);
118
+ --ffe-v-button-action-color: var(
119
+ --ffe-color-component-button-action-fill-inverse
120
+ );
121
+ --ffe-v-button-action-color-hover: var(
122
+ --ffe-color-component-button-action-fill-inverse-hover
123
+ );
124
+ --ffe-v-button-action-color-pressed: var(
125
+ --ffe-color-component-button-action-fill-inverse-pressed
126
+ );
127
+ --ffe-v-button-action-color-text: var(
128
+ --ffe-color-component-button-action-foreground-inverse
129
+ );
56
130
 
57
131
  /** Primary button */
58
- --ffe-v-button-primary-color: var(--ffe-farge-vann-70);
59
- --ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
60
- --ffe-v-button-primary-color-text: var(--ffe-farge-svart);
132
+ --ffe-v-button-primary-color: var(
133
+ --ffe-color-component-button-primary-fill-inverse
134
+ );
135
+ --ffe-v-button-primary-color-hover: var(
136
+ --ffe-color-component-button-primary-fill-inverse-hover
137
+ );
138
+ --ffe-v-button-primary-color-pressed: var(
139
+ --ffe-color-component-button-primary-fill-inverse-pressed
140
+ );
141
+ --ffe-v-button-primary-color-text: var(
142
+ --ffe-color-component-button-primary-foreground-inverse
143
+ );
61
144
 
62
145
  /** Secondary buttons (+ task, back, expand, etc) */
63
- --ffe-v-button-secondary-color: var(--ffe-farge-svart);
64
- --ffe-v-button-secondary-border-color: var(--ffe-farge-vann-70);
65
- --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-svart);
66
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann-30);
67
- --ffe-v-button-secondary-color-text: var(--ffe-farge-vann-30);
146
+ --ffe-v-button-secondary-color: var(
147
+ --ffe-color-component-button-secondary-fill-inverse
148
+ );
149
+ --ffe-v-button-secondary-border-color: var(
150
+ --ffe-color-component-button-secondary-border-inverse
151
+ );
152
+ --ffe-v-button-secondary-color-text-hover: var(
153
+ --ffe-color-component-button-secondary-foreground-inverse-hover
154
+ );
155
+ --ffe-v-button-secondary-color-bg-hover: var(
156
+ --ffe-color-component-button-secondary-fill-inverse-hover
157
+ );
158
+ --ffe-v-button-secondary-color-bg-pressed: var(
159
+ --ffe-color-component-button-secondary-fill-inverse-pressed
160
+ );
161
+ --ffe-v-button-secondary-color-text: var(
162
+ --ffe-color-component-button-secondary-foreground-inverse
163
+ );
68
164
 
69
165
  /** Tertiary button */
70
- --ffe-v-button-tertiary-color: var(--ffe-farge-vann-30);
71
- --ffe-v-button-tertiary-color-hover: var(--ffe-farge-hvit);
72
- --ffe-v-button-tertiary-color-focus: var(--ffe-farge-hvit);
166
+ --ffe-v-button-tertiary-color: var(
167
+ --ffe-color-component-button-tertiary-fill-inverse
168
+ );
169
+ --ffe-v-button-tertiary-color-hover: var(
170
+ --ffe-color-component-button-tertiary-fill-inverse-hover
171
+ );
172
+ --ffe-v-button-tertiary-color-pressed: var(
173
+ --ffe-color-component-button-tertiary-fill-inverse-pressed
174
+ );
175
+ --ffe-v-button-tertiary-color-focus: var(
176
+ --ffe-color-border-interactive-focus
177
+ );
73
178
 
74
179
  /** Task button */
75
180
  --ffe-v-button-task-color: transparent;
76
- --ffe-v-button-task-color-hover: var(--ffe-farge-vann-70);
77
- --ffe-v-button-task-color-border-hover: var(--ffe-farge-vann-70);
78
- --ffe-v-button-task-color-border: var(--ffe-farge-vann-30);
79
- --ffe-v-button-task-color-text: var(--ffe-farge-vann-30);
80
- --ffe-v-button-task-color-text-hover: var(--ffe-farge-hvit);
81
- --ffe-v-button-task-color-icon: var(--ffe-farge-vann-30);
82
- --ffe-v-button-task-color-icon-hover: var(--ffe-farge-svart);
83
- --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
181
+ --ffe-v-button-task-color-hover: var(
182
+ --ffe-color-component-button-secondary-fill-inverse-hover
183
+ );
184
+ --ffe-v-button-task-color-pressed: var(
185
+ --ffe-color-component-button-secondary-fill-inverse-pressed
186
+ );
187
+ --ffe-v-button-task-color-border-hover: var(
188
+ --ffe-color-component-button-secondary-border-inverse-hover
189
+ );
190
+ --ffe-v-button-task-color-border: var(
191
+ --ffe-color-component-button-secondary-border-inverse
192
+ );
193
+ --ffe-v-button-task-color-text: var(
194
+ --ffe-color-component-button-secondary-foreground-inverse
195
+ );
196
+ --ffe-v-button-task-color-text-hover: var(
197
+ --ffe-color-component-button-secondary-foreground-inverse-hover
198
+ );
199
+ --ffe-v-button-task-color-icon: var(
200
+ --ffe-color-component-button-secondary-foreground-inverse
201
+ );
202
+ --ffe-v-button-task-color-icon-hover: var(
203
+ --ffe-color-component-button-secondary-foreground-inverse
204
+ );
205
+ --ffe-v-button-task-border-focus: var(
206
+ --ffe-color-border-interactive-focus
207
+ );
84
208
  }
85
209
  }
86
210
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "19.1.5",
3
+ "version": "20.0.1",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -17,13 +17,13 @@
17
17
  "build": "lessc less/buttons.less css/buttons.css --autoprefix"
18
18
  },
19
19
  "dependencies": {
20
- "@sb1/ffe-core": "^29.5.2"
20
+ "@sb1/ffe-core": "^30.0.1"
21
21
  },
22
22
  "devDependencies": {
23
- "@sb1/ffe-buildtool": "^0.9.2"
23
+ "@sb1/ffe-buildtool": "^0.10.0"
24
24
  },
25
25
  "publishConfig": {
26
26
  "access": "public"
27
27
  },
28
- "gitHead": "dc81c750740fef9a1e01725f2ade086c11d81d30"
28
+ "gitHead": "abedc811686859a152f05182aeece4ac8667949a"
29
29
  }