Skip to content

Commit 6a8ff6b

Browse files
dagfrodedagfrode
committed
feat(ffe-cards)!: Semantiske farger
BREAKING CHANGE: infører semantiske farger
1 parent 3debb89 commit 6a8ff6b

9 files changed

+44
-119
lines changed

‎packages/ffe-cards/less/card-base.less

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
11
@import 'common-card-styling';
22

33
.ffe-card-base {
4+
color: var(--ffe-color-foreground-default);
45
.common-card-styling();
56

67
&--clickable {
78
.clickable-card-styling();
89
}
910

10-
padding: var(--ffe-spacing-sm);
11-
box-shadow: none; // Overwrite common-card-styling
11+
padding: var(--ffe-spacing-md);
1212

1313
&--no-padding {
1414
padding: 0;
1515
}
1616

1717
.card-background-styling();
1818

19-
&--shadow {
20-
box-shadow: var(--ffe-v-cards-common-card-box-shadow);
21-
}
22-
2319
&--no-margin {
2420
margin: 0;
2521
}
2622

2723
&--text-center {
2824
text-align: center;
2925
}
30-
31-
.regard-color-scheme-preference & {
32-
@media (prefers-color-scheme: dark) {
33-
.card-background-dm-styling();
34-
}
35-
}
3626
}

‎packages/ffe-cards/less/cards.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import 'theme';
21
@import 'card-base';
32
@import 'text-card';
43
@import 'icon-card';
54
@import 'illustration-card';
65
@import 'image-card';
76
@import 'stippled-card';
87
@import 'group-card';
8+
@import 'theme';

‎packages/ffe-cards/less/common-card-styling.less

+12-36
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
@import (reference) '@sb1/ffe-core/less/breakpoints';
22

33
.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);
65
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);
87
border-radius: var(--ffe-v-cards-common-card-border-radius);
98
transition: all var(--ffe-transition-duration) var(--ffe-ease);
109
outline: none;
@@ -17,47 +16,25 @@
1716
}
1817

1918
.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);
2221
}
2322

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);
2625
}
2726

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);
5229
}
5330
}
5431

5532
.clickable-card-styling() {
5633
@media (hover: hover) and (pointer: fine) {
5734
&:hover {
5835
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);
6138
&
6239
:where(
6340
.ffe-card-body__card-name,
@@ -70,8 +47,7 @@
7047
}
7148
}
7249
&: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);
7551

7652
&
7753
:where(
@@ -101,6 +77,6 @@
10177
}
10278

10379
.ffe-card__action--raw:visited {
104-
color: var(--ffe-v-cards-clickabe-card-link-visited-color);
80+
color: var(inherit);
10581
}
10682
}

‎packages/ffe-cards/less/components.less

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
.ffe-card-body {
44
&__card-name {
55
margin: 0 0 var(--ffe-spacing-2xs) 0;
6+
color: var(--ffe-color-foreground-subtle);
67
}
78

89
&__text {
910
margin: var(--ffe-spacing-2xs) 0 0 0;
11+
color: var(--ffe-color-foreground-subtle);
1012
}
1113

1214
&__subtext {
@@ -15,14 +17,14 @@
1517
font-variant-numeric: tabular-nums;
1618
line-height: 1.25rem;
1719
font-size: var(--ffe-fontsize-small-text);
18-
color: var(--ffe-v-cards-subtext-color);
20+
color: var(--ffe-color-foreground-subtle);
1921
margin: var(--ffe-spacing-2xs) 0 0 0;
2022
}
2123

2224
&__title {
2325
font-family: var(--ffe-g-font-heading-small);
2426
font-variant-numeric: tabular-nums;
25-
color: var(--ffe-g-heading-color);
27+
color: var(--ffe-color-foreground-emphasis);
2628
font-weight: normal;
2729
text-wrap: balance;
2830
overflow-wrap: anywhere;

‎packages/ffe-cards/less/group-card.less

+8-16
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
.common-card-styling();
55
.card-background-styling();
66

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);
1011

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);
1415

1516
&--no-margin {
1617
margin: 0;
@@ -40,7 +41,6 @@
4041
}
4142

4243
&__footer {
43-
background-color: var(--ffe-v-group-card-footer-background-color);
4444
display: flex;
4545
justify-content: center;
4646
align-items: center;
@@ -79,14 +79,6 @@
7979
border-bottom-color: transparent;
8080
}
8181

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);
9183
}
9284
}

‎packages/ffe-cards/less/icon-card.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
align-items: center;
3434
flex-shrink: 0;
3535
flex-grow: 0;
36-
color: var(--ffe-v-cards-icon-color);
36+
color: var(--ffe-color-foreground-emphasis);
3737
}
3838

3939
&--condensed {

‎packages/ffe-cards/less/image-card.less

+13-7
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
@import 'components';
44

55
.ffe-image-card {
6+
--ffe-v-cards-common-card-border-color: var(
7+
--ffe-color-border-primary-default
8+
);
9+
610
.common-card-styling();
711

812
&--clickable {
@@ -13,27 +17,29 @@
1317
margin: 0;
1418
}
1519

16-
--border-color: transparent;
17-
1820
display: flex;
1921
padding: 0;
2022
max-width: 290px;
21-
border: var(--ffe-v-cards-image-card-border);
23+
border: var(--ffe-v-cards-common-card-border-color);
2224
flex-flow: column nowrap;
2325

2426
.ffe-image-card__image-overlay,
2527
.ffe-image-card__body {
26-
border-color: var(--border-color);
28+
border-color: var(--ffe-v-cards-common-card-border-color);
2729
}
2830

2931
&: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+
);
3135
}
3236

3337
&:has(.ffe-card__action) {
3438
@media (hover: hover) and (pointer: fine) {
3539
&: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+
);
3743
}
3844
}
3945
}
@@ -54,7 +60,7 @@
5460
&__body {
5561
width: 100%;
5662
overflow: hidden;
57-
border: 2px solid transparent;
63+
border: 1px solid transparent;
5864
transition: border-color var(--ffe-transition-duration);
5965
}
6066

‎packages/ffe-cards/less/stippled-card.less

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@import 'components';
33

44
.ffe-stippled-card {
5+
--ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis);
6+
57
.common-card-styling();
68

79
&--clickable {
@@ -24,7 +26,6 @@
2426

2527
background: transparent;
2628
border: 2px dashed var(--ffe-v-cards-stippled-border-color);
27-
box-shadow: none;
2829
display: flex;
2930
align-items: center;
3031
padding: var(--ffe-spacing-md);
@@ -54,5 +55,5 @@
5455
}
5556

5657
.ffe-stippled-card .ffe-icons {
57-
color: var(--ffe-v-cards-icon-color);
58+
color: var(--ffe-color-foreground-emphasis);
5859
}

‎packages/ffe-cards/less/theme.less

-42
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,4 @@
11
:root,
22
: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);
93
--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-
}
464
}

0 commit comments

Comments
 (0)