Skip to content

Commit 54d3037

Browse files
Barsneseirikbacker
Barsnes
and
eirikbacker
authored
feat(card): css changes and data attrs (#2398)
part of #2295 --------- Co-authored-by: Eirik Backer <eirik.backer@gmail.com>
1 parent 7f0cc0d commit 54d3037

File tree

3 files changed

+190
-181
lines changed

3 files changed

+190
-181
lines changed

‎.changeset/witty-clouds-judge.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
Card: Use data attrs

‎packages/css/card.css

+181-174
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.ds-card {
22
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
3-
--dsc-card-backround: var(--ds-color-neutral-surface-default);
3+
--dsc-card-backround: var(--ds-color-neutral-background-default);
44
--dsc-card-color: var(--ds-color-neutral-text-default);
55

66
display: flex;
@@ -13,178 +13,185 @@
1313
border-radius: min(1rem, var(--ds-border-radius-md));
1414
border: 1px solid var(--dsc-card-border-color);
1515
background: var(--dsc-card-backround);
16-
}
17-
18-
.ds-card a,
19-
.ds-card a:visited {
20-
color: var(--ds-color-neutral-text-default);
21-
}
22-
23-
.ds-card > hr {
24-
width: 100%;
25-
margin: var(--ds-spacing-3) 0;
26-
}
27-
28-
.ds-card__media {
29-
width: auto;
30-
}
31-
32-
.ds-card__media > * {
33-
display: flex;
34-
flex-direction: column;
35-
width: 100%;
36-
border: 0;
37-
}
38-
39-
.ds-card > *:not(.ds-card__media, hr) {
40-
padding-left: var(--ds-spacing-6);
41-
padding-right: var(--ds-spacing-6);
42-
}
43-
44-
.ds-card > *:not(.ds-card__media):first-child {
45-
padding-top: var(--ds-spacing-6);
46-
}
47-
48-
.ds-card > *:not(.ds-card__media):last-child {
49-
padding-bottom: var(--ds-spacing-6);
50-
}
51-
52-
.ds-card__media:first-child {
53-
padding-bottom: var(--ds-spacing-4);
54-
}
55-
56-
.ds-card__media:last-child {
57-
padding-top: var(--ds-spacing-6);
58-
}
59-
60-
.ds-card--link {
61-
--dsc-card-border-color: var(--ds-color-neutral-border-default);
62-
63-
text-decoration: none;
64-
}
65-
66-
.ds-card__footer,
67-
.ds-card__content {
68-
display: flex;
69-
justify-content: flex-start;
70-
gap: var(--ds-spacing-4);
71-
flex-wrap: wrap;
72-
word-wrap: break-word;
73-
padding: var(--ds-spacing-2) 0;
74-
color: inherit;
75-
}
76-
77-
.ds-card__content {
78-
flex-direction: column;
79-
}
80-
81-
.ds-card__header {
82-
display: flex;
83-
flex-direction: column;
84-
flex-wrap: wrap;
85-
word-wrap: break-word;
86-
font-family: inherit;
87-
padding: var(--ds-spacing-2) 0;
88-
}
89-
90-
.ds-card__header h1,
91-
.ds-card__header h2,
92-
.ds-card__header h3,
93-
.ds-card__header h4,
94-
.ds-card__header h5,
95-
.ds-card__header h6 {
96-
color: inherit;
97-
}
98-
99-
.ds-card--link h1,
100-
.ds-card--link h2,
101-
.ds-card--link h3,
102-
.ds-card--link h4,
103-
.ds-card--link h5,
104-
.ds-card--link h6 {
105-
text-decoration: underline;
106-
text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
107-
text-underline-offset: max(6px, 0.25rem, 0.22em);
108-
}
109-
110-
.ds-card--neutral {
111-
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
112-
--dsc-card-backround: var(--ds-color-neutral-background-default);
113-
}
114-
115-
.ds-card--neutral.ds-card--link:hover {
116-
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
117-
--dsc-card-backround: var(--ds-color-neutral-background-subtle);
118-
}
119-
120-
.ds-card--neutral.ds-card--link:active {
121-
--dsc-card-backround: var(--ds-color-neutral-surface-default);
122-
}
123-
124-
.ds-card--subtle {
125-
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
126-
--dsc-card-backround: var(--ds-color-neutral-background-subtle);
127-
}
128-
129-
.ds-card--subtle.ds-card--link:hover {
130-
--dsc-card-border-color: var(--ds-color-neutral-border-default);
131-
--dsc-card-backround: var(--ds-color-neutral-surface-default);
132-
}
133-
134-
.ds-card--subtle.ds-card--link:active {
135-
--dsc-card-backround: var(--ds-color-neutral-surface-hover);
136-
}
137-
138-
.ds-card--brand1 {
139-
--dsc-card-border-color: var(--ds-color-brand1-border-subtle);
140-
--dsc-card-backround: var(--ds-color-brand1-surface-default);
141-
--dsc-card-color: var(--ds-color-brand1-text-default);
142-
}
143-
144-
.ds-card--brand1.ds-card--link {
145-
--dsc-card-border-color: var(--ds-color-brand1-border-default);
146-
}
147-
148-
.ds-card--brand1.ds-card--link:hover {
149-
--dsc-card-backround: var(--ds-color-brand1-surface-hover);
150-
}
151-
152-
.ds-card--brand1.ds-card--link:active {
153-
--dsc-card-backround: var(--ds-color-brand1-surface-active);
154-
}
155-
156-
.ds-card--brand2 {
157-
--dsc-card-border-color: var(--ds-color-brand2-border-subtle);
158-
--dsc-card-backround: var(--ds-color-brand2-surface-default);
159-
--dsc-card-color: var(--ds-color-brand2-text-default);
160-
}
161-
162-
.ds-card--brand2.ds-card--link {
163-
--dsc-card-border-color: var(--ds-color-brand2-border-default);
164-
}
165-
166-
.ds-card--brand2.ds-card--link:hover {
167-
--dsc-card-backround: var(--ds-color-brand2-surface-hover);
168-
}
169-
170-
.ds-card--brand2.ds-card--link:active {
171-
--dsc-card-backround: var(--ds-color-brand2-surface-active);
172-
}
173-
174-
.ds-card--brand3 {
175-
--dsc-card-border-color: var(--ds-color-brand3-border-subtle);
176-
--dsc-card-backround: var(--ds-color-brand3-surface-default);
177-
--dsc-card-color: var(--ds-color-brand3-text-default);
178-
}
179-
180-
.ds-card--brand3.ds-card--link {
181-
--dsc-card-border-color: var(--ds-color-brand3-border-default);
182-
}
183-
184-
.ds-card--brand3.ds-card--link:hover {
185-
--dsc-card-backround: var(--ds-color-brand3-surface-hover);
186-
}
18716

188-
.ds-card--brand3.ds-card--link:active {
189-
--dsc-card-backround: var(--ds-color-brand3-surface-active);
17+
&[data-link] {
18+
--dsc-card-border-color: var(--ds-color-neutral-border-default);
19+
20+
text-decoration: none;
21+
22+
& h1,
23+
& h2,
24+
& h3,
25+
& h4,
26+
& h5,
27+
& h6 {
28+
color: var(--dsc-card-color);
29+
text-decoration: underline;
30+
text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
31+
text-underline-offset: max(6px, 0.25rem, 0.22em);
32+
}
33+
34+
&:active {
35+
--dsc-card-backround: var(--ds-color-neutral-surface-default);
36+
}
37+
38+
@media (hover: hover) and (pointer: fine) {
39+
&:hover {
40+
--dsc-card-backround: var(--ds-color-neutral-background-subtle);
41+
}
42+
}
43+
}
44+
45+
&[data-color='subtle'] {
46+
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
47+
--dsc-card-backround: var(--ds-color-neutral-background-subtle);
48+
49+
&[data-link] {
50+
--dsc-card-border-color: var(--ds-color-neutral-border-default);
51+
52+
&:active {
53+
--dsc-card-backround: var(--ds-color-neutral-surface-hover);
54+
}
55+
56+
@media (hover: hover) and (pointer: fine) {
57+
&:hover {
58+
--dsc-card-backround: var(--ds-color-neutral-surface-default);
59+
}
60+
}
61+
}
62+
}
63+
64+
&[data-color='brand1'] {
65+
--dsc-card-border-color: var(--ds-color-brand1-border-subtle);
66+
--dsc-card-backround: var(--ds-color-brand1-surface-default);
67+
--dsc-card-color: var(--ds-color-brand1-text-default);
68+
69+
&[data-link] {
70+
--dsc-card-border-color: var(--ds-color-brand1-border-default);
71+
72+
&:active {
73+
--dsc-card-backround: var(--ds-color-brand1-surface-active);
74+
}
75+
76+
@media (hover: hover) and (pointer: fine) {
77+
&:hover {
78+
--dsc-card-backround: var(--ds-color-brand1-surface-hover);
79+
}
80+
}
81+
}
82+
}
83+
84+
&[data-color='brand2'] {
85+
--dsc-card-border-color: var(--ds-color-brand2-border-subtle);
86+
--dsc-card-backround: var(--ds-color-brand2-surface-default);
87+
--dsc-card-color: var(--ds-color-brand2-text-default);
88+
89+
&[data-link] {
90+
--dsc-card-border-color: var(--ds-color-brand2-border-default);
91+
92+
&:active {
93+
--dsc-card-backround: var(--ds-color-brand2-surface-active);
94+
}
95+
96+
@media (hover: hover) and (pointer: fine) {
97+
&:hover {
98+
--dsc-card-backround: var(--ds-color-brand2-surface-hover);
99+
}
100+
}
101+
}
102+
}
103+
104+
&[data-color='brand3'] {
105+
--dsc-card-border-color: var(--ds-color-brand3-border-subtle);
106+
--dsc-card-backround: var(--ds-color-brand3-surface-default);
107+
--dsc-card-color: var(--ds-color-brand3-text-default);
108+
109+
&[data-link] {
110+
--dsc-card-border-color: var(--ds-color-brand3-border-default);
111+
112+
&:active {
113+
--dsc-card-backround: var(--ds-color-brand3-surface-active);
114+
}
115+
116+
@media (hover: hover) and (pointer: fine) {
117+
&:hover {
118+
--dsc-card-backround: var(--ds-color-brand3-surface-hover);
119+
}
120+
}
121+
}
122+
}
123+
124+
.ds-card__header h1,
125+
.ds-card__header h2,
126+
.ds-card__header h3,
127+
.ds-card__header h4,
128+
.ds-card__header h5,
129+
.ds-card__header h6 {
130+
color: inherit;
131+
}
132+
133+
.ds-card__media > * {
134+
display: flex;
135+
flex-direction: column;
136+
width: 100%;
137+
border: 0;
138+
}
139+
140+
.ds-card__media {
141+
width: auto;
142+
}
143+
144+
.ds-card__media:first-child {
145+
padding-bottom: var(--ds-spacing-4);
146+
}
147+
148+
.ds-card__media:last-child {
149+
padding-top: var(--ds-spacing-6);
150+
}
151+
152+
.ds-card__footer,
153+
.ds-card__content {
154+
display: flex;
155+
justify-content: flex-start;
156+
gap: var(--ds-spacing-4);
157+
flex-wrap: wrap;
158+
word-wrap: break-word;
159+
padding: var(--ds-spacing-2) 0;
160+
color: inherit;
161+
}
162+
163+
.ds-card__content {
164+
flex-direction: column;
165+
}
166+
167+
.ds-card__header {
168+
display: flex;
169+
flex-direction: column;
170+
flex-wrap: wrap;
171+
word-wrap: break-word;
172+
font-family: inherit;
173+
padding: var(--ds-spacing-2) 0;
174+
}
175+
176+
& a:any-link {
177+
color: var(--ds-color-neutral-text-default);
178+
}
179+
180+
& > hr {
181+
width: 100%;
182+
margin: var(--ds-spacing-3) 0;
183+
}
184+
185+
& > *:not(.ds-card__media, hr) {
186+
padding-left: var(--ds-spacing-6);
187+
padding-right: var(--ds-spacing-6);
188+
}
189+
190+
& > *:not(.ds-card__media):first-child {
191+
padding-top: var(--ds-spacing-6);
192+
}
193+
194+
& > *:not(.ds-card__media):last-child {
195+
padding-bottom: var(--ds-spacing-6);
196+
}
190197
}

‎packages/react/src/components/Card/Card.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,9 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
4141
return (
4242
<Component
4343
ref={ref}
44-
className={cl(
45-
`ds-card`,
46-
`ds-card--${color}`,
47-
isLink && `ds-card--link`,
48-
isLink && `ds-focus`,
49-
className,
50-
)}
44+
className={cl(`ds-card`, isLink && `ds-focus`, className)}
45+
data-color={color}
46+
data-link={isLink ? '' : undefined}
5147
{...rest}
5248
/>
5349
);

0 commit comments

Comments
 (0)