Skip to content

Commit 2d98f10

Browse files
dagfrodedagfrode
committed
tmp fix cards
1 parent 296b2e8 commit 2d98f10

8 files changed

+32
-47
lines changed

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import 'common-card-styling';
22

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

67
&--clickable {
@@ -17,7 +18,8 @@
1718
.card-background-styling();
1819

1920
&--shadow {
20-
box-shadow: var(--ffe-v-cards-common-card-box-shadow);
21+
box-shadow: var(--ffe-v-cards-common-card-box-shadow)
22+
var(--ffe-v-cards-common-card-box-shadow-color);
2123
}
2224

2325
&--no-margin {

‎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

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

33
.common-card-styling() {
4+
--ffe-v-cards-common-card-background-color: var(
5+
--ffe-color-surface-primary-default
6+
);
47
background: var(--ffe-v-cards-common-card-background-color);
5-
box-shadow: var(--ffe-v-cards-common-card-box-shadow);
8+
box-shadow: var(--ffe-v-cards-common-card-box-shadow)
9+
var(--ffe-v-cards-common-card-box-shadow-color);
610
margin: 0 0 var(--ffe-spacing-xs);
711
border: 2px solid var(--ffe-v-cards-common-card-border-color);
812
border-radius: var(--ffe-v-cards-common-card-border-radius);
@@ -56,7 +60,7 @@
5660
@media (hover: hover) and (pointer: fine) {
5761
&:hover {
5862
cursor: pointer;
59-
border-color: var(--ffe-g-primary-color);
63+
border-color: var(--ffe-color-border-primary-hover);
6064

6165
&
6266
:where(
@@ -70,8 +74,8 @@
7074
}
7175
}
7276
&:focus-within {
73-
border-color: var(--ffe-g-primary-color);
74-
box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
77+
border-color: var(--ffe-color-border-primary-hover);
78+
box-shadow: 0 0 0 2px var(--ffe-color-border-primary-hover);
7579

7680
&
7781
:where(

‎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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
box-shadow: none;
1010

1111
&--shadow {
12-
box-shadow: var(--ffe-v-cards-common-card-box-shadow);
12+
box-shadow: var(--ffe-v-cards-common-card-box-shadow)
13+
var(--ffe-v-cards-common-card-box-shadow-color);
1314
}
1415

1516
&--no-margin {
@@ -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;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333

3434
.ffe-icon-card__icon {
35-
color: var(--ffe-v-cards-icon-color);
35+
color: var(--ffe-color-foreground-emphasis);
3636
}
3737

3838
&--condensed {

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

+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 {

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

+11-36
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,21 @@
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);
3+
--ffe-v-cards-common-text-color: var(--ffe-color-foreground-default);
4+
--ffe-v-cards-common-card-background-color: var(
5+
--ffe-color-surface-primary-default
6+
);
57
--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);
8+
--ffe-v-cards-common-card-box-shadow-color: var(
9+
--ffe-color-border-primary-default
10+
);
11+
--ffe-v-cards-common-card-box-shadow: 0 1px 4px 0;
912
--ffe-v-cards-common-card-border-radius: 16px;
1013
--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);
14+
--ffe-v-cards-subtext-color: var(---ffe-color-foreground-subtle);
15+
--ffe-v-cards-border-hover-color: var(--ffe-color-border-primary-hover);
1516
--ffe-v-cards-image-card-border: none;
1617
--ffe-v-cards-common-group-card-border: none;
1718
--ffe-v-cards-common-group-card-separation-border-color: var(
18-
--ffe-farge-lysgraa
19+
--ffe-color-border-primary-default
1920
);
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-
}
4621
}

0 commit comments

Comments
 (0)