@sb1/ffe-cards 21.0.1 → 22.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 (11) hide show
  1. package/css/cards.css +75 -172
  2. package/less/card-base.less +2 -12
  3. package/less/cards.less +1 -1
  4. package/less/common-card-styling.less +12 -36
  5. package/less/components.less +4 -2
  6. package/less/group-card.less +8 -16
  7. package/less/icon-card.less +1 -1
  8. package/less/image-card.less +13 -7
  9. package/less/stippled-card.less +3 -2
  10. package/less/theme.less +0 -42
  11. package/package.json +4 -4
package/css/cards.css CHANGED
@@ -1,45 +1,8 @@
1
- :root,
2
- :host {
3
- --ffe-v-cards-common-text-color: var(--ffe-g-text-color);
4
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
5
- --ffe-v-cards-common-card-border-color: transparent;
6
- --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
7
- --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0 var(--ffe-v-cards-common-card-box-shadow-color);
8
- --ffe-v-cards-common-card-border-radius: 16px;
9
- --ffe-v-cards-clickabe-card-link-visited-color: inherit;
10
- --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa);
11
- --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
12
- --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
13
- --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
14
- --ffe-v-cards-image-card-border: none;
15
- --ffe-v-cards-common-group-card-border: none;
16
- --ffe-v-cards-common-group-card-separation-border-color: var(--ffe-farge-lysgraa);
17
- --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
18
- }
19
- @media (prefers-color-scheme: dark) {
20
- :root .regard-color-scheme-preference,
21
- :host .regard-color-scheme-preference {
22
- --ffe-v-cards-common-text-color: var(--ffe-farge-hvit);
23
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
24
- --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa);
25
- --ffe-v-cards-common-card-box-shadow: none;
26
- --ffe-v-cards-clickabe-card-link-visited-color: var(--ffe-farge-hvit);
27
- --ffe-v-cards-subtext-color: var(--ffe-farge-graa);
28
- --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
29
- --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
30
- --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
31
- --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa);
32
- --ffe-v-cards-common-group-card-border: 1px solid var(--ffe-farge-moerkgraa);
33
- --ffe-v-cards-common-group-card-separation-border-color: var(--ffe-farge-moerkgraa);
34
- --ffe-v-group-card-footer-background-color: var(--ffe-farge-koksgraa);
35
- }
36
- }
37
1
  .ffe-card-base {
38
- background: var(--ffe-v-cards-common-card-background-color);
39
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
40
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
2
+ color: var(--ffe-color-foreground-default);
3
+ background: var(--ffe-color-surface-primary-default);
41
4
  margin: 0 0 var(--ffe-spacing-xs);
42
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
5
+ border: 1px solid var(--ffe-color-border-primary-default);
43
6
  border-radius: var(--ffe-v-cards-common-card-border-radius);
44
7
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
45
8
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -47,9 +10,7 @@
47
10
  outline: none;
48
11
  width: 100%;
49
12
  text-decoration: none;
50
- padding: var(--ffe-spacing-sm);
51
- -webkit-box-shadow: none;
52
- box-shadow: none;
13
+ padding: var(--ffe-spacing-md);
53
14
  }
54
15
  @media (min-width: 768px) {
55
16
  .ffe-card-base {
@@ -59,7 +20,8 @@
59
20
  @media (hover: hover) and (pointer: fine) {
60
21
  .ffe-card-base--clickable:hover {
61
22
  cursor: pointer;
62
- border-color: var(--ffe-g-primary-color);
23
+ border-color: var(--ffe-color-border-primary-hover);
24
+ background: var(--ffe-color-surface-primary-default-hover);
63
25
  }
64
26
  .ffe-card-base--clickable:hover :where(
65
27
  .ffe-card-body__card-name,
@@ -71,9 +33,7 @@
71
33
  }
72
34
  }
73
35
  .ffe-card-base--clickable:focus-within {
74
- border-color: var(--ffe-g-primary-color);
75
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
76
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
36
+ border-color: var(--ffe-color-border-primary-hover);
77
37
  }
78
38
  .ffe-card-base--clickable:focus-within :where(
79
39
  .ffe-card-body__card-name,
@@ -98,29 +58,19 @@
98
58
  outline: inherit;
99
59
  }
100
60
  .ffe-card-base--clickable .ffe-card__action--raw:visited {
101
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
61
+ color: var(inherit);
102
62
  }
103
63
  .ffe-card-base--no-padding {
104
64
  padding: 0;
105
65
  }
106
- .ffe-card-base--bg-sand-30 {
107
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-30);
108
- }
109
- .ffe-card-base--bg-sand-70 {
110
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-70);
111
- }
112
- .ffe-card-base--bg-frost-30 {
113
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-frost-30);
66
+ .ffe-card-base--bg-primary {
67
+ background: var(--ffe-color-surface-primary-default);
114
68
  }
115
- .ffe-card-base--bg-syrin-30 {
116
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-30);
69
+ .ffe-card-base--bg-secondary {
70
+ background: var(--ffe-color-surface-secondary-default);
117
71
  }
118
- .ffe-card-base--bg-syrin-70 {
119
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-70);
120
- }
121
- .ffe-card-base--shadow {
122
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
123
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
72
+ .ffe-card-base--bg-tertiary {
73
+ background: var(--ffe-color-surface-tertiary-default);
124
74
  }
125
75
  .ffe-card-base--no-margin {
126
76
  margin: 0;
@@ -128,22 +78,13 @@
128
78
  .ffe-card-base--text-center {
129
79
  text-align: center;
130
80
  }
131
- @media (prefers-color-scheme: dark) {
132
- .regard-color-scheme-preference .ffe-card-base--dm-bg-svart {
133
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
134
- }
135
- .regard-color-scheme-preference .ffe-card-base--dm-bg-natt {
136
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-natt);
137
- }
138
- .regard-color-scheme-preference .ffe-card-base--dm-bg-koksgraa {
139
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-koksgraa);
140
- }
141
- }
142
81
  .ffe-card-body__card-name {
143
82
  margin: 0 0 var(--ffe-spacing-2xs) 0;
83
+ color: var(--ffe-color-foreground-subtle);
144
84
  }
145
85
  .ffe-card-body__text {
146
86
  margin: var(--ffe-spacing-2xs) 0 0 0;
87
+ color: var(--ffe-color-foreground-subtle);
147
88
  }
148
89
  .ffe-card-body__subtext {
149
90
  font-family: var(--ffe-g-font);
@@ -151,13 +92,13 @@
151
92
  font-variant-numeric: tabular-nums;
152
93
  line-height: 1.25rem;
153
94
  font-size: var(--ffe-fontsize-small-text);
154
- color: var(--ffe-v-cards-subtext-color);
95
+ color: var(--ffe-color-foreground-subtle);
155
96
  margin: var(--ffe-spacing-2xs) 0 0 0;
156
97
  }
157
98
  .ffe-card-body__title {
158
99
  font-family: var(--ffe-g-font-heading-small);
159
100
  font-variant-numeric: tabular-nums;
160
- color: var(--ffe-g-heading-color);
101
+ color: var(--ffe-color-foreground-emphasis);
161
102
  font-weight: normal;
162
103
  text-wrap: balance;
163
104
  overflow-wrap: anywhere;
@@ -180,11 +121,9 @@
180
121
  overflow-wrap: anywhere;
181
122
  }
182
123
  .ffe-text-card {
183
- background: var(--ffe-v-cards-common-card-background-color);
184
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
185
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
124
+ background: var(--ffe-color-surface-primary-default);
186
125
  margin: 0 0 var(--ffe-spacing-xs);
187
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
126
+ border: 1px solid var(--ffe-color-border-primary-default);
188
127
  border-radius: var(--ffe-v-cards-common-card-border-radius);
189
128
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
190
129
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -212,7 +151,8 @@
212
151
  @media (hover: hover) and (pointer: fine) {
213
152
  .ffe-text-card--clickable:hover {
214
153
  cursor: pointer;
215
- border-color: var(--ffe-g-primary-color);
154
+ border-color: var(--ffe-color-border-primary-hover);
155
+ background: var(--ffe-color-surface-primary-default-hover);
216
156
  }
217
157
  .ffe-text-card--clickable:hover :where(
218
158
  .ffe-card-body__card-name,
@@ -224,9 +164,7 @@
224
164
  }
225
165
  }
226
166
  .ffe-text-card--clickable:focus-within {
227
- border-color: var(--ffe-g-primary-color);
228
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
229
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
167
+ border-color: var(--ffe-color-border-primary-hover);
230
168
  }
231
169
  .ffe-text-card--clickable:focus-within :where(
232
170
  .ffe-card-body__card-name,
@@ -251,7 +189,7 @@
251
189
  outline: inherit;
252
190
  }
253
191
  .ffe-text-card--clickable .ffe-card__action--raw:visited {
254
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
192
+ color: var(inherit);
255
193
  }
256
194
  .ffe-text-card--no-margin {
257
195
  margin: 0;
@@ -265,11 +203,9 @@
265
203
  text-align: left;
266
204
  }
267
205
  .ffe-icon-card {
268
- background: var(--ffe-v-cards-common-card-background-color);
269
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
270
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
206
+ background: var(--ffe-color-surface-primary-default);
271
207
  margin: 0 0 var(--ffe-spacing-xs);
272
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
208
+ border: 1px solid var(--ffe-color-border-primary-default);
273
209
  border-radius: var(--ffe-v-cards-common-card-border-radius);
274
210
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
275
211
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -294,7 +230,8 @@
294
230
  @media (hover: hover) and (pointer: fine) {
295
231
  .ffe-icon-card--clickable:hover {
296
232
  cursor: pointer;
297
- border-color: var(--ffe-g-primary-color);
233
+ border-color: var(--ffe-color-border-primary-hover);
234
+ background: var(--ffe-color-surface-primary-default-hover);
298
235
  }
299
236
  .ffe-icon-card--clickable:hover :where(
300
237
  .ffe-card-body__card-name,
@@ -306,9 +243,7 @@
306
243
  }
307
244
  }
308
245
  .ffe-icon-card--clickable:focus-within {
309
- border-color: var(--ffe-g-primary-color);
310
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
311
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
246
+ border-color: var(--ffe-color-border-primary-hover);
312
247
  }
313
248
  .ffe-icon-card--clickable:focus-within :where(
314
249
  .ffe-card-body__card-name,
@@ -333,7 +268,7 @@
333
268
  outline: inherit;
334
269
  }
335
270
  .ffe-icon-card--clickable .ffe-card__action--raw:visited {
336
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
271
+ color: var(inherit);
337
272
  }
338
273
  .ffe-icon-card--no-margin {
339
274
  margin: 0;
@@ -363,17 +298,15 @@
363
298
  -webkit-box-flex: 0;
364
299
  -ms-flex-positive: 0;
365
300
  flex-grow: 0;
366
- color: var(--ffe-v-cards-icon-color);
301
+ color: var(--ffe-color-foreground-emphasis);
367
302
  }
368
303
  .ffe-icon-card--condensed {
369
304
  padding: var(--ffe-spacing-sm);
370
305
  }
371
306
  .ffe-illustration-card {
372
- background: var(--ffe-v-cards-common-card-background-color);
373
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
374
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
307
+ background: var(--ffe-color-surface-primary-default);
375
308
  margin: 0 0 var(--ffe-spacing-xs);
376
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
309
+ border: 1px solid var(--ffe-color-border-primary-default);
377
310
  border-radius: var(--ffe-v-cards-common-card-border-radius);
378
311
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
379
312
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -399,7 +332,8 @@
399
332
  @media (hover: hover) and (pointer: fine) {
400
333
  .ffe-illustration-card--clickable:hover {
401
334
  cursor: pointer;
402
- border-color: var(--ffe-g-primary-color);
335
+ border-color: var(--ffe-color-border-primary-hover);
336
+ background: var(--ffe-color-surface-primary-default-hover);
403
337
  }
404
338
  .ffe-illustration-card--clickable:hover :where(
405
339
  .ffe-card-body__card-name,
@@ -411,9 +345,7 @@
411
345
  }
412
346
  }
413
347
  .ffe-illustration-card--clickable:focus-within {
414
- border-color: var(--ffe-g-primary-color);
415
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
416
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
348
+ border-color: var(--ffe-color-border-primary-hover);
417
349
  }
418
350
  .ffe-illustration-card--clickable:focus-within :where(
419
351
  .ffe-card-body__card-name,
@@ -438,7 +370,7 @@
438
370
  outline: inherit;
439
371
  }
440
372
  .ffe-illustration-card--clickable .ffe-card__action--raw:visited {
441
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
373
+ color: var(inherit);
442
374
  }
443
375
  .ffe-illustration-card--no-margin {
444
376
  margin: 0;
@@ -456,11 +388,10 @@
456
388
  justify-content: space-between;
457
389
  }
458
390
  .ffe-image-card {
459
- background: var(--ffe-v-cards-common-card-background-color);
460
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
461
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
391
+ --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-default);
392
+ background: var(--ffe-color-surface-primary-default);
462
393
  margin: 0 0 var(--ffe-spacing-xs);
463
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
394
+ border: 1px solid var(--ffe-color-border-primary-default);
464
395
  border-radius: var(--ffe-v-cards-common-card-border-radius);
465
396
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
466
397
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -468,13 +399,12 @@
468
399
  outline: none;
469
400
  width: 100%;
470
401
  text-decoration: none;
471
- --border-color: transparent;
472
402
  display: -webkit-box;
473
403
  display: -ms-flexbox;
474
404
  display: flex;
475
405
  padding: 0;
476
406
  max-width: 290px;
477
- border: var(--ffe-v-cards-image-card-border);
407
+ border: var(--ffe-v-cards-common-card-border-color);
478
408
  -webkit-box-orient: vertical;
479
409
  -webkit-box-direction: normal;
480
410
  -ms-flex-flow: column nowrap;
@@ -488,7 +418,8 @@
488
418
  @media (hover: hover) and (pointer: fine) {
489
419
  .ffe-image-card--clickable:hover {
490
420
  cursor: pointer;
491
- border-color: var(--ffe-g-primary-color);
421
+ border-color: var(--ffe-color-border-primary-hover);
422
+ background: var(--ffe-color-surface-primary-default-hover);
492
423
  }
493
424
  .ffe-image-card--clickable:hover :where(
494
425
  .ffe-card-body__card-name,
@@ -500,9 +431,7 @@
500
431
  }
501
432
  }
502
433
  .ffe-image-card--clickable:focus-within {
503
- border-color: var(--ffe-g-primary-color);
504
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
505
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
434
+ border-color: var(--ffe-color-border-primary-hover);
506
435
  }
507
436
  .ffe-image-card--clickable:focus-within :where(
508
437
  .ffe-card-body__card-name,
@@ -527,21 +456,21 @@
527
456
  outline: inherit;
528
457
  }
529
458
  .ffe-image-card--clickable .ffe-card__action--raw:visited {
530
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
459
+ color: var(inherit);
531
460
  }
532
461
  .ffe-image-card--no-margin {
533
462
  margin: 0;
534
463
  }
535
464
  .ffe-image-card .ffe-image-card__image-overlay,
536
465
  .ffe-image-card .ffe-image-card__body {
537
- border-color: var(--border-color);
466
+ border-color: var(--ffe-v-cards-common-card-border-color);
538
467
  }
539
468
  .ffe-image-card:has(.ffe-card__action:active, .ffe-card__action:focus) {
540
- --border-color: var(--ffe-v-cards-border-hover-color);
469
+ --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-hover);
541
470
  }
542
471
  @media (hover: hover) and (pointer: fine) {
543
472
  .ffe-image-card:has(.ffe-card__action):hover {
544
- --border-color: var(--ffe-v-cards-border-hover-color);
473
+ --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-hover);
545
474
  }
546
475
  }
547
476
  .ffe-image-card__image-container {
@@ -558,7 +487,7 @@
558
487
  .ffe-image-card__body {
559
488
  width: 100%;
560
489
  overflow: hidden;
561
- border: 2px solid transparent;
490
+ border: 1px solid transparent;
562
491
  -webkit-transition: border-color var(--ffe-transition-duration);
563
492
  -o-transition: border-color var(--ffe-transition-duration);
564
493
  transition: border-color var(--ffe-transition-duration);
@@ -590,11 +519,10 @@
590
519
  }
591
520
  }
592
521
  .ffe-stippled-card {
593
- background: var(--ffe-v-cards-common-card-background-color);
594
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
595
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
522
+ --ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis);
523
+ background: var(--ffe-color-surface-primary-default);
596
524
  margin: 0 0 var(--ffe-spacing-xs);
597
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
525
+ border: 1px solid var(--ffe-color-border-primary-default);
598
526
  border-radius: var(--ffe-v-cards-common-card-border-radius);
599
527
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
600
528
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -604,8 +532,6 @@
604
532
  text-decoration: none;
605
533
  background: transparent;
606
534
  border: 2px dashed var(--ffe-v-cards-stippled-border-color);
607
- -webkit-box-shadow: none;
608
- box-shadow: none;
609
535
  display: -webkit-box;
610
536
  display: -ms-flexbox;
611
537
  display: flex;
@@ -623,7 +549,8 @@
623
549
  @media (hover: hover) and (pointer: fine) {
624
550
  .ffe-stippled-card--clickable:hover {
625
551
  cursor: pointer;
626
- border-color: var(--ffe-g-primary-color);
552
+ border-color: var(--ffe-color-border-primary-hover);
553
+ background: var(--ffe-color-surface-primary-default-hover);
627
554
  }
628
555
  .ffe-stippled-card--clickable:hover :where(
629
556
  .ffe-card-body__card-name,
@@ -635,9 +562,7 @@
635
562
  }
636
563
  }
637
564
  .ffe-stippled-card--clickable:focus-within {
638
- border-color: var(--ffe-g-primary-color);
639
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
640
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
565
+ border-color: var(--ffe-color-border-primary-hover);
641
566
  }
642
567
  .ffe-stippled-card--clickable:focus-within :where(
643
568
  .ffe-card-body__card-name,
@@ -662,7 +587,7 @@
662
587
  outline: inherit;
663
588
  }
664
589
  .ffe-stippled-card--clickable .ffe-card__action--raw:visited {
665
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
590
+ color: var(inherit);
666
591
  }
667
592
  .ffe-stippled-card--clickable:focus-within {
668
593
  border-style: solid;
@@ -701,14 +626,11 @@
701
626
  margin: 0;
702
627
  }
703
628
  .ffe-stippled-card .ffe-icons {
704
- color: var(--ffe-v-cards-icon-color);
629
+ color: var(--ffe-color-foreground-emphasis);
705
630
  }
706
631
  .ffe-group-card {
707
- background: var(--ffe-v-cards-common-card-background-color);
708
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
709
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
632
+ background: var(--ffe-color-surface-primary-default);
710
633
  margin: 0 0 var(--ffe-spacing-xs);
711
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
712
634
  border-radius: var(--ffe-v-cards-common-card-border-radius);
713
635
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
714
636
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -716,34 +638,24 @@
716
638
  outline: none;
717
639
  width: 100%;
718
640
  text-decoration: none;
641
+ --ffe-v-cards-common-group-card-border: var(--ffe-v-cards-common-card-border-radius) var(--ffe-color-border-primary-default);
642
+ color: var(--ffe-color-foreground-default);
719
643
  position: relative;
720
- border: var(--ffe-v-cards-common-group-card-border);
721
- -webkit-box-shadow: none;
722
- box-shadow: none;
644
+ border: 1px solid var(--ffe-color-border-primary-default);
723
645
  }
724
646
  @media (min-width: 768px) {
725
647
  .ffe-group-card {
726
648
  margin-bottom: var(--ffe-spacing-md);
727
649
  }
728
650
  }
729
- .ffe-group-card--bg-sand-30 {
730
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-30);
731
- }
732
- .ffe-group-card--bg-sand-70 {
733
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-70);
734
- }
735
- .ffe-group-card--bg-frost-30 {
736
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-frost-30);
737
- }
738
- .ffe-group-card--bg-syrin-30 {
739
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-30);
651
+ .ffe-group-card--bg-primary {
652
+ background: var(--ffe-color-surface-primary-default);
740
653
  }
741
- .ffe-group-card--bg-syrin-70 {
742
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-70);
654
+ .ffe-group-card--bg-secondary {
655
+ background: var(--ffe-color-surface-secondary-default);
743
656
  }
744
- .ffe-group-card--shadow {
745
- -webkit-box-shadow: var(--ffe-v-cards-common-card-box-shadow);
746
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
657
+ .ffe-group-card--bg-tertiary {
658
+ background: var(--ffe-color-surface-tertiary-default);
747
659
  }
748
660
  .ffe-group-card--no-margin {
749
661
  margin: 0;
@@ -765,7 +677,6 @@
765
677
  padding: var(--ffe-spacing-md);
766
678
  }
767
679
  .ffe-group-card__footer {
768
- background-color: var(--ffe-v-group-card-footer-background-color);
769
680
  display: -webkit-box;
770
681
  display: -ms-flexbox;
771
682
  display: flex;
@@ -801,7 +712,8 @@
801
712
  .ffe-group-card__element--clickable:hover,
802
713
  .ffe-group-card__footer--clickable:hover {
803
714
  cursor: pointer;
804
- border-color: var(--ffe-g-primary-color);
715
+ border-color: var(--ffe-color-border-primary-hover);
716
+ background: var(--ffe-color-surface-primary-default-hover);
805
717
  }
806
718
  .ffe-group-card__title--clickable:hover :where(
807
719
  .ffe-card-body__card-name,
@@ -827,9 +739,7 @@
827
739
  .ffe-group-card__title--clickable:focus-within,
828
740
  .ffe-group-card__element--clickable:focus-within,
829
741
  .ffe-group-card__footer--clickable:focus-within {
830
- border-color: var(--ffe-g-primary-color);
831
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
832
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
742
+ border-color: var(--ffe-color-border-primary-hover);
833
743
  }
834
744
  .ffe-group-card__title--clickable:focus-within :where(
835
745
  .ffe-card-body__card-name,
@@ -872,7 +782,7 @@
872
782
  .ffe-group-card__title--clickable .ffe-card__action--raw:visited,
873
783
  .ffe-group-card__element--clickable .ffe-card__action--raw:visited,
874
784
  .ffe-group-card__footer--clickable .ffe-card__action--raw:visited {
875
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
785
+ color: var(inherit);
876
786
  }
877
787
  .ffe-group-card__title:focus-within,
878
788
  .ffe-group-card__element:focus-within,
@@ -881,20 +791,13 @@
881
791
  }
882
792
  .ffe-group-card__title,
883
793
  .ffe-group-card__element {
884
- border-bottom-color: var(--ffe-v-cards-common-group-card-separation-border-color);
794
+ border-bottom-color: var(--ffe-color-border-primary-default);
885
795
  }
886
796
  .ffe-group-card__title--no-separator,
887
797
  .ffe-group-card__element--no-separator {
888
798
  border-bottom-color: transparent;
889
799
  }
890
- @media (prefers-color-scheme: dark) {
891
- .regard-color-scheme-preference .ffe-group-card--dm-bg-svart {
892
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
893
- }
894
- .regard-color-scheme-preference .ffe-group-card--dm-bg-natt {
895
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-natt);
896
- }
897
- .regard-color-scheme-preference .ffe-group-card--dm-bg-koksgraa {
898
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-koksgraa);
899
- }
800
+ :root,
801
+ :host {
802
+ --ffe-v-cards-common-card-border-radius: 16px;
900
803
  }
package/less/card-base.less CHANGED
@@ -1,14 +1,14 @@
1
1
  @import 'common-card-styling';
2
2
 
3
3
  .ffe-card-base {
4
+ color: var(--ffe-color-foreground-default);
4
5
  .common-card-styling();
5
6
 
6
7
  &--clickable {
7
8
  .clickable-card-styling();
8
9
  }
9
10
 
10
- padding: var(--ffe-spacing-sm);
11
- box-shadow: none; // Overwrite common-card-styling
11
+ padding: var(--ffe-spacing-md);
12
12
 
13
13
  &--no-padding {
14
14
  padding: 0;
@@ -16,10 +16,6 @@
16
16
 
17
17
  .card-background-styling();
18
18
 
19
- &--shadow {
20
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
21
- }
22
-
23
19
  &--no-margin {
24
20
  margin: 0;
25
21
  }
@@ -27,10 +23,4 @@
27
23
  &--text-center {
28
24
  text-align: center;
29
25
  }
30
-
31
- .regard-color-scheme-preference & {
32
- @media (prefers-color-scheme: dark) {
33
- .card-background-dm-styling();
34
- }
35
- }
36
26
  }
package/less/cards.less CHANGED
@@ -1,4 +1,3 @@
1
- @import 'theme';
2
1
  @import 'card-base';
3
2
  @import 'text-card';
4
3
  @import 'icon-card';
@@ -6,3 +5,4 @@
6
5
  @import 'image-card';
7
6
  @import 'stippled-card';
8
7
  @import 'group-card';
8
+ @import 'theme';
package/less/common-card-styling.less CHANGED
@@ -1,10 +1,9 @@
1
1
  @import (reference) '@sb1/ffe-core/less/breakpoints';
2
2
 
3
3
  .common-card-styling() {
4
- background: var(--ffe-v-cards-common-card-background-color);
5
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
4
+ background: var(--ffe-color-surface-primary-default);
6
5
  margin: 0 0 var(--ffe-spacing-xs);
7
- border: 2px solid var(--ffe-v-cards-common-card-border-color);
6
+ border: 1px solid var(--ffe-color-border-primary-default);
8
7
  border-radius: var(--ffe-v-cards-common-card-border-radius);
9
8
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
10
9
  outline: none;
@@ -17,38 +16,16 @@
17
16
  }
18
17
 
19
18
  .card-background-styling() {
20
- &--bg-sand-30 {
21
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-30);
19
+ &--bg-primary {
20
+ background: var(--ffe-color-surface-primary-default);
22
21
  }
23
22
 
24
- &--bg-sand-70 {
25
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-70);
23
+ &--bg-secondary {
24
+ background: var(--ffe-color-surface-secondary-default);
26
25
  }
27
26
 
28
- &--bg-frost-30 {
29
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-frost-30);
30
- }
31
-
32
- &--bg-syrin-30 {
33
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-30);
34
- }
35
-
36
- &--bg-syrin-70 {
37
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-70);
38
- }
39
- }
40
-
41
- .card-background-dm-styling() {
42
- &--dm-bg-svart {
43
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
44
- }
45
-
46
- &--dm-bg-natt {
47
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-natt);
48
- }
49
-
50
- &--dm-bg-koksgraa {
51
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-koksgraa);
27
+ &--bg-tertiary {
28
+ background: var(--ffe-color-surface-tertiary-default);
52
29
  }
53
30
  }
54
31
 
@@ -56,8 +33,8 @@
56
33
  @media (hover: hover) and (pointer: fine) {
57
34
  &:hover {
58
35
  cursor: pointer;
59
- border-color: var(--ffe-g-primary-color);
60
-
36
+ border-color: var(--ffe-color-border-primary-hover);
37
+ background: var(--ffe-color-surface-primary-default-hover);
61
38
  &
62
39
  :where(
63
40
  .ffe-card-body__card-name,
@@ -70,8 +47,7 @@
70
47
  }
71
48
  }
72
49
  &:focus-within {
73
- border-color: var(--ffe-g-primary-color);
74
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
50
+ border-color: var(--ffe-color-border-primary-hover);
75
51
 
76
52
  &
77
53
  :where(
@@ -101,6 +77,6 @@
101
77
  }
102
78
 
103
79
  .ffe-card__action--raw:visited {
104
- color: var(--ffe-v-cards-clickabe-card-link-visited-color);
80
+ color: var(inherit);
105
81
  }
106
82
  }
package/less/components.less CHANGED
@@ -3,10 +3,12 @@
3
3
  .ffe-card-body {
4
4
  &__card-name {
5
5
  margin: 0 0 var(--ffe-spacing-2xs) 0;
6
+ color: var(--ffe-color-foreground-subtle);
6
7
  }
7
8
 
8
9
  &__text {
9
10
  margin: var(--ffe-spacing-2xs) 0 0 0;
11
+ color: var(--ffe-color-foreground-subtle);
10
12
  }
11
13
 
12
14
  &__subtext {
@@ -15,14 +17,14 @@
15
17
  font-variant-numeric: tabular-nums;
16
18
  line-height: 1.25rem;
17
19
  font-size: var(--ffe-fontsize-small-text);
18
- color: var(--ffe-v-cards-subtext-color);
20
+ color: var(--ffe-color-foreground-subtle);
19
21
  margin: var(--ffe-spacing-2xs) 0 0 0;
20
22
  }
21
23
 
22
24
  &__title {
23
25
  font-family: var(--ffe-g-font-heading-small);
24
26
  font-variant-numeric: tabular-nums;
25
- color: var(--ffe-g-heading-color);
27
+ color: var(--ffe-color-foreground-emphasis);
26
28
  font-weight: normal;
27
29
  text-wrap: balance;
28
30
  overflow-wrap: anywhere;
package/less/group-card.less CHANGED
@@ -4,13 +4,14 @@
4
4
  .common-card-styling();
5
5
  .card-background-styling();
6
6
 
7
- position: relative;
8
- border: var(--ffe-v-cards-common-group-card-border);
9
- box-shadow: none;
7
+ --ffe-v-cards-common-group-card-border: var(
8
+ --ffe-v-cards-common-card-border-radius
9
+ )
10
+ var(--ffe-color-border-primary-default);
10
11
 
11
- &--shadow {
12
- box-shadow: var(--ffe-v-cards-common-card-box-shadow);
13
- }
12
+ color: var(--ffe-color-foreground-default);
13
+ position: relative;
14
+ border: 1px solid var(--ffe-color-border-primary-default);
14
15
 
15
16
  &--no-margin {
16
17
  margin: 0;
@@ -40,7 +41,6 @@
40
41
  }
41
42
 
42
43
  &__footer {
43
- background-color: var(--ffe-v-group-card-footer-background-color);
44
44
  display: flex;
45
45
  justify-content: center;
46
46
  align-items: center;
@@ -79,14 +79,6 @@
79
79
  border-bottom-color: transparent;
80
80
  }
81
81
 
82
- border-bottom-color: var(
83
- --ffe-v-cards-common-group-card-separation-border-color
84
- );
85
- }
86
-
87
- .regard-color-scheme-preference & {
88
- @media (prefers-color-scheme: dark) {
89
- .card-background-dm-styling();
90
- }
82
+ border-bottom-color: var(--ffe-color-border-primary-default);
91
83
  }
92
84
  }
package/less/icon-card.less CHANGED
@@ -33,7 +33,7 @@
33
33
  align-items: center;
34
34
  flex-shrink: 0;
35
35
  flex-grow: 0;
36
- color: var(--ffe-v-cards-icon-color);
36
+ color: var(--ffe-color-foreground-emphasis);
37
37
  }
38
38
 
39
39
  &--condensed {
package/less/image-card.less CHANGED
@@ -3,6 +3,10 @@
3
3
  @import 'components';
4
4
 
5
5
  .ffe-image-card {
6
+ --ffe-v-cards-common-card-border-color: var(
7
+ --ffe-color-border-primary-default
8
+ );
9
+
6
10
  .common-card-styling();
7
11
 
8
12
  &--clickable {
@@ -13,27 +17,29 @@
13
17
  margin: 0;
14
18
  }
15
19
 
16
- --border-color: transparent;
17
-
18
20
  display: flex;
19
21
  padding: 0;
20
22
  max-width: 290px;
21
- border: var(--ffe-v-cards-image-card-border);
23
+ border: var(--ffe-v-cards-common-card-border-color);
22
24
  flex-flow: column nowrap;
23
25
 
24
26
  .ffe-image-card__image-overlay,
25
27
  .ffe-image-card__body {
26
- border-color: var(--border-color);
28
+ border-color: var(--ffe-v-cards-common-card-border-color);
27
29
  }
28
30
 
29
31
  &:has(.ffe-card__action:active, .ffe-card__action:focus) {
30
- --border-color: var(--ffe-v-cards-border-hover-color);
32
+ --ffe-v-cards-common-card-border-color: var(
33
+ --ffe-color-border-primary-hover
34
+ );
31
35
  }
32
36
 
33
37
  &:has(.ffe-card__action) {
34
38
  @media (hover: hover) and (pointer: fine) {
35
39
  &:hover {
36
- --border-color: var(--ffe-v-cards-border-hover-color);
40
+ --ffe-v-cards-common-card-border-color: var(
41
+ --ffe-color-border-primary-hover
42
+ );
37
43
  }
38
44
  }
39
45
  }
@@ -54,7 +60,7 @@
54
60
  &__body {
55
61
  width: 100%;
56
62
  overflow: hidden;
57
- border: 2px solid transparent;
63
+ border: 1px solid transparent;
58
64
  transition: border-color var(--ffe-transition-duration);
59
65
  }
60
66
 
package/less/stippled-card.less CHANGED
@@ -2,6 +2,8 @@
2
2
  @import 'components';
3
3
 
4
4
  .ffe-stippled-card {
5
+ --ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis);
6
+
5
7
  .common-card-styling();
6
8
 
7
9
  &--clickable {
@@ -24,7 +26,6 @@
24
26
 
25
27
  background: transparent;
26
28
  border: 2px dashed var(--ffe-v-cards-stippled-border-color);
27
- box-shadow: none;
28
29
  display: flex;
29
30
  align-items: center;
30
31
  padding: var(--ffe-spacing-md);
@@ -54,5 +55,5 @@
54
55
  }
55
56
 
56
57
  .ffe-stippled-card .ffe-icons {
57
- color: var(--ffe-v-cards-icon-color);
58
+ color: var(--ffe-color-foreground-emphasis);
58
59
  }
package/less/theme.less CHANGED
@@ -1,46 +1,4 @@
1
1
  :root,
2
2
  :host {
3
- --ffe-v-cards-common-text-color: var(--ffe-g-text-color);
4
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
5
- --ffe-v-cards-common-card-border-color: transparent;
6
- --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
7
- --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0
8
- var(--ffe-v-cards-common-card-box-shadow-color);
9
3
  --ffe-v-cards-common-card-border-radius: 16px;
10
- --ffe-v-cards-clickabe-card-link-visited-color: inherit;
11
- --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa);
12
- --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
13
- --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
14
- --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
15
- --ffe-v-cards-image-card-border: none;
16
- --ffe-v-cards-common-group-card-border: none;
17
- --ffe-v-cards-common-group-card-separation-border-color: var(
18
- --ffe-farge-lysgraa
19
- );
20
- --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
21
-
22
- @media (prefers-color-scheme: dark) {
23
- .regard-color-scheme-preference {
24
- --ffe-v-cards-common-text-color: var(--ffe-farge-hvit);
25
- --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
26
- --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa);
27
- --ffe-v-cards-common-card-box-shadow: none;
28
- --ffe-v-cards-clickabe-card-link-visited-color: var(
29
- --ffe-farge-hvit
30
- );
31
- --ffe-v-cards-subtext-color: var(--ffe-farge-graa);
32
- --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
33
- --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
34
- --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
35
- --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa);
36
- --ffe-v-cards-common-group-card-border: 1px solid
37
- var(--ffe-farge-moerkgraa);
38
- --ffe-v-cards-common-group-card-separation-border-color: var(
39
- --ffe-farge-moerkgraa
40
- );
41
- --ffe-v-group-card-footer-background-color: var(
42
- --ffe-farge-koksgraa
43
- );
44
- }
45
- }
46
4
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "21.0.1",
3
+ "version": "22.0.0",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -18,13 +18,13 @@
18
18
  "build": "lessc less/cards.less css/cards.css --autoprefix"
19
19
  },
20
20
  "dependencies": {
21
- "@sb1/ffe-core": "^29.5.2"
21
+ "@sb1/ffe-core": "^30.0.0"
22
22
  },
23
23
  "devDependencies": {
24
- "@sb1/ffe-buildtool": "^0.9.2"
24
+ "@sb1/ffe-buildtool": "^0.10.0"
25
25
  },
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "dc81c750740fef9a1e01725f2ade086c11d81d30"
29
+ "gitHead": "5a72f08b0873cc96b0d439dd029839db4d5d4ea9"
30
30
  }