From 8506dbfb2d166dc076c5afd08005c519d1553817 Mon Sep 17 00:00:00 2001 From: barsnes Date: Tue, 10 Sep 2024 12:42:26 +0200 Subject: [PATCH 1/5] feat(card): css changes and data attrs --- packages/css/card.css | 346 ++++++++++---------- packages/react/src/components/Card/Card.tsx | 10 +- 2 files changed, 176 insertions(+), 180 deletions(-) diff --git a/packages/css/card.css b/packages/css/card.css index ee6c910d6d..dfa0c42a14 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -13,178 +13,178 @@ border-radius: min(1rem, var(--ds-border-radius-md)); border: 1px solid var(--dsc-card-border-color); background: var(--dsc-card-backround); -} - -.ds-card a, -.ds-card a:visited { - color: var(--ds-color-neutral-text-default); -} - -.ds-card > hr { - width: 100%; - margin: var(--ds-spacing-3) 0; -} - -.ds-card__media { - width: auto; -} - -.ds-card__media > * { - display: flex; - flex-direction: column; - width: 100%; - border: 0; -} - -.ds-card > *:not(.ds-card__media, hr) { - padding-left: var(--ds-spacing-6); - padding-right: var(--ds-spacing-6); -} - -.ds-card > *:not(.ds-card__media):first-child { - padding-top: var(--ds-spacing-6); -} - -.ds-card > *:not(.ds-card__media):last-child { - padding-bottom: var(--ds-spacing-6); -} - -.ds-card__media:first-child { - padding-bottom: var(--ds-spacing-4); -} - -.ds-card__media:last-child { - padding-top: var(--ds-spacing-6); -} - -.ds-card--link { - --dsc-card-border-color: var(--ds-color-neutral-border-default); - - text-decoration: none; -} - -.ds-card__footer, -.ds-card__content { - display: flex; - justify-content: flex-start; - gap: var(--ds-spacing-4); - flex-wrap: wrap; - word-wrap: break-word; - padding: var(--ds-spacing-2) 0; - color: inherit; -} - -.ds-card__content { - flex-direction: column; -} - -.ds-card__header { - display: flex; - flex-direction: column; - flex-wrap: wrap; - word-wrap: break-word; - font-family: inherit; - padding: var(--ds-spacing-2) 0; -} - -.ds-card__header h1, -.ds-card__header h2, -.ds-card__header h3, -.ds-card__header h4, -.ds-card__header h5, -.ds-card__header h6 { - color: inherit; -} - -.ds-card--link h1, -.ds-card--link h2, -.ds-card--link h3, -.ds-card--link h4, -.ds-card--link h5, -.ds-card--link h6 { - text-decoration: underline; - text-decoration-thickness: max(1px, 0.0625rem, 0.1025em); - text-underline-offset: max(6px, 0.25rem, 0.22em); -} - -.ds-card--neutral { - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-background-default); -} - -.ds-card--neutral.ds-card--link:hover { - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-background-subtle); -} - -.ds-card--neutral.ds-card--link:active { - --dsc-card-backround: var(--ds-color-neutral-surface-default); -} - -.ds-card--subtle { - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-background-subtle); -} - -.ds-card--subtle.ds-card--link:hover { - --dsc-card-border-color: var(--ds-color-neutral-border-default); - --dsc-card-backround: var(--ds-color-neutral-surface-default); -} - -.ds-card--subtle.ds-card--link:active { - --dsc-card-backround: var(--ds-color-neutral-surface-hover); -} - -.ds-card--brand1 { - --dsc-card-border-color: var(--ds-color-brand1-border-subtle); - --dsc-card-backround: var(--ds-color-brand1-surface-default); - --dsc-card-color: var(--ds-color-brand1-text-default); -} - -.ds-card--brand1.ds-card--link { - --dsc-card-border-color: var(--ds-color-brand1-border-default); -} - -.ds-card--brand1.ds-card--link:hover { - --dsc-card-backround: var(--ds-color-brand1-surface-hover); -} - -.ds-card--brand1.ds-card--link:active { - --dsc-card-backround: var(--ds-color-brand1-surface-active); -} - -.ds-card--brand2 { - --dsc-card-border-color: var(--ds-color-brand2-border-subtle); - --dsc-card-backround: var(--ds-color-brand2-surface-default); - --dsc-card-color: var(--ds-color-brand2-text-default); -} - -.ds-card--brand2.ds-card--link { - --dsc-card-border-color: var(--ds-color-brand2-border-default); -} - -.ds-card--brand2.ds-card--link:hover { - --dsc-card-backround: var(--ds-color-brand2-surface-hover); -} - -.ds-card--brand2.ds-card--link:active { - --dsc-card-backround: var(--ds-color-brand2-surface-active); -} - -.ds-card--brand3 { - --dsc-card-border-color: var(--ds-color-brand3-border-subtle); - --dsc-card-backround: var(--ds-color-brand3-surface-default); - --dsc-card-color: var(--ds-color-brand3-text-default); -} - -.ds-card--brand3.ds-card--link { - --dsc-card-border-color: var(--ds-color-brand3-border-default); -} - -.ds-card--brand3.ds-card--link:hover { - --dsc-card-backround: var(--ds-color-brand3-surface-hover); -} -.ds-card--brand3.ds-card--link:active { - --dsc-card-backround: var(--ds-color-brand3-surface-active); + &[data-link] { + --dsc-card-border-color: var(--ds-color-neutral-border-default); + + text-decoration: none; + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + text-decoration: underline; + text-decoration-thickness: max(1px, 0.0625rem, 0.1025em); + text-underline-offset: max(6px, 0.25rem, 0.22em); + } + } + + &[data-color='neutral'] { + --dsc-card-border-color: var(--ds-color-neutral-border-subtle); + --dsc-card-backround: var(--ds-color-neutral-background-default); + } + + &[data-color='neutral'][data-link]:hover { + --dsc-card-border-color: var(--ds-color-neutral-border-subtle); + --dsc-card-backround: var(--ds-color-neutral-background-subtle); + } + + &[data-color='neutral'][data-link]:active { + --dsc-card-backround: var(--ds-color-neutral-surface-default); + } + + &[data-color='subtle'] { + --dsc-card-border-color: var(--ds-color-neutral-border-subtle); + --dsc-card-backround: var(--ds-color-neutral-background-subtle); + } + + &[data-color='subtle'][data-link]:hover { + --dsc-card-border-color: var(--ds-color-neutral-border-default); + --dsc-card-backround: var(--ds-color-neutral-surface-default); + } + + &[data-color='subtle'][data-link]:active { + --dsc-card-backround: var(--ds-color-neutral-surface-hover); + } + + &[data-color='brand1'] { + --dsc-card-border-color: var(--ds-color-brand1-border-subtle); + --dsc-card-backround: var(--ds-color-brand1-surface-default); + --dsc-card-color: var(--ds-color-brand1-text-default); + } + + &[data-color='brand1'][data-link] { + --dsc-card-border-color: var(--ds-color-brand1-border-default); + } + + &[data-color='brand1'][data-link]:hover { + --dsc-card-backround: var(--ds-color-brand1-surface-hover); + } + + &[data-color='brand1'][data-link]:active { + --dsc-card-backround: var(--ds-color-brand1-surface-active); + } + + &[data-color='brand2'] { + --dsc-card-border-color: var(--ds-color-brand2-border-subtle); + --dsc-card-backround: var(--ds-color-brand2-surface-default); + --dsc-card-color: var(--ds-color-brand2-text-default); + } + + &[data-color='brand2'][data-link] { + --dsc-card-border-color: var(--ds-color-brand2-border-default); + } + + &[data-color='brand2'][data-link]:hover { + --dsc-card-backround: var(--ds-color-brand2-surface-hover); + } + + &[data-color='brand2'][data-link]:active { + --dsc-card-backround: var(--ds-color-brand2-surface-active); + } + + &[data-color='brand3'] { + --dsc-card-border-color: var(--ds-color-brand3-border-subtle); + --dsc-card-backround: var(--ds-color-brand3-surface-default); + --dsc-card-color: var(--ds-color-brand3-text-default); + } + + &[data-color='brand3'][data-link] { + --dsc-card-border-color: var(--ds-color-brand3-border-default); + } + + &[data-color='brand3'][data-link]:hover { + --dsc-card-backround: var(--ds-color-brand3-surface-hover); + } + + &[data-color='brand3'][data-link]:active { + --dsc-card-backround: var(--ds-color-brand3-surface-active); + } + + .ds-card__header h1, + .ds-card__header h2, + .ds-card__header h3, + .ds-card__header h4, + .ds-card__header h5, + .ds-card__header h6 { + color: inherit; + } + + .ds-card__media > * { + display: flex; + flex-direction: column; + width: 100%; + border: 0; + } + + .ds-card__media { + width: auto; + } + + .ds-card__media:first-child { + padding-bottom: var(--ds-spacing-4); + } + + .ds-card__media:last-child { + padding-top: var(--ds-spacing-6); + } + + .ds-card__footer, + .ds-card__content { + display: flex; + justify-content: flex-start; + gap: var(--ds-spacing-4); + flex-wrap: wrap; + word-wrap: break-word; + padding: var(--ds-spacing-2) 0; + color: inherit; + } + + .ds-card__content { + flex-direction: column; + } + + .ds-card__header { + display: flex; + flex-direction: column; + flex-wrap: wrap; + word-wrap: break-word; + font-family: inherit; + padding: var(--ds-spacing-2) 0; + } + + & a, + & a:visited { + color: var(--ds-color-neutral-text-default); + } + + & > hr { + width: 100%; + margin: var(--ds-spacing-3) 0; + } + + & > *:not(.ds-card__media, hr) { + padding-left: var(--ds-spacing-6); + padding-right: var(--ds-spacing-6); + } + + & > *:not(.ds-card__media):first-child { + padding-top: var(--ds-spacing-6); + } + + & > *:not(.ds-card__media):last-child { + padding-bottom: var(--ds-spacing-6); + } } diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index b0c86c0d28..35bf93354b 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -41,13 +41,9 @@ export const Card = forwardRef( return ( ); From 0bcd20786ce3fd271088c9e5f40f5ce80ca1890e Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Tue, 10 Sep 2024 14:01:29 +0200 Subject: [PATCH 2/5] Create witty-clouds-judge.md --- .changeset/witty-clouds-judge.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/witty-clouds-judge.md diff --git a/.changeset/witty-clouds-judge.md b/.changeset/witty-clouds-judge.md new file mode 100644 index 0000000000..34393eb3ff --- /dev/null +++ b/.changeset/witty-clouds-judge.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Card: Use data attrs From 821027ae17d76fc256d2cd0f7c1275eef9f99d9e Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 11 Sep 2024 12:57:19 +0200 Subject: [PATCH 3/5] nest more css --- packages/css/card.css | 92 +++++++++++++++++++++---------------------- 1 file changed, 45 insertions(+), 47 deletions(-) diff --git a/packages/css/card.css b/packages/css/card.css index dfa0c42a14..1b63a0eaea 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -1,6 +1,6 @@ .ds-card { --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-surface-default); + --dsc-card-backround: var(--ds-color-neutral-background-default); --dsc-card-color: var(--ds-color-neutral-text-default); display: flex; @@ -25,92 +25,90 @@ & h4, & h5, & h6 { + color: var(--dsc-card-color); text-decoration: underline; text-decoration-thickness: max(1px, 0.0625rem, 0.1025em); text-underline-offset: max(6px, 0.25rem, 0.22em); } - } - - &[data-color='neutral'] { - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-background-default); - } - &[data-color='neutral'][data-link]:hover { - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - --dsc-card-backround: var(--ds-color-neutral-background-subtle); - } + &:hover { + --dsc-card-backround: var(--ds-color-neutral-background-subtle); + } - &[data-color='neutral'][data-link]:active { - --dsc-card-backround: var(--ds-color-neutral-surface-default); + &:active { + --dsc-card-backround: var(--ds-color-neutral-surface-default); + } } &[data-color='subtle'] { --dsc-card-border-color: var(--ds-color-neutral-border-subtle); --dsc-card-backround: var(--ds-color-neutral-background-subtle); - } - &[data-color='subtle'][data-link]:hover { - --dsc-card-border-color: var(--ds-color-neutral-border-default); - --dsc-card-backround: var(--ds-color-neutral-surface-default); - } + &[data-link] { + --dsc-card-border-color: var(--ds-color-neutral-border-default); + + &:hover { + --dsc-card-backround: var(--ds-color-neutral-surface-default); + } - &[data-color='subtle'][data-link]:active { - --dsc-card-backround: var(--ds-color-neutral-surface-hover); + &:active { + --dsc-card-backround: var(--ds-color-neutral-surface-hover); + } + } } &[data-color='brand1'] { --dsc-card-border-color: var(--ds-color-brand1-border-subtle); --dsc-card-backround: var(--ds-color-brand1-surface-default); --dsc-card-color: var(--ds-color-brand1-text-default); - } - &[data-color='brand1'][data-link] { - --dsc-card-border-color: var(--ds-color-brand1-border-default); - } + &[data-link] { + --dsc-card-border-color: var(--ds-color-brand1-border-default); - &[data-color='brand1'][data-link]:hover { - --dsc-card-backround: var(--ds-color-brand1-surface-hover); - } + &:hover { + --dsc-card-backround: var(--ds-color-brand1-surface-hover); + } - &[data-color='brand1'][data-link]:active { - --dsc-card-backround: var(--ds-color-brand1-surface-active); + &:active { + --dsc-card-backround: var(--ds-color-brand1-surface-active); + } + } } &[data-color='brand2'] { --dsc-card-border-color: var(--ds-color-brand2-border-subtle); --dsc-card-backround: var(--ds-color-brand2-surface-default); --dsc-card-color: var(--ds-color-brand2-text-default); - } - &[data-color='brand2'][data-link] { - --dsc-card-border-color: var(--ds-color-brand2-border-default); - } + &[data-link] { + --dsc-card-border-color: var(--ds-color-brand2-border-default); - &[data-color='brand2'][data-link]:hover { - --dsc-card-backround: var(--ds-color-brand2-surface-hover); - } + &:hover { + --dsc-card-backround: var(--ds-color-brand2-surface-hover); + } - &[data-color='brand2'][data-link]:active { - --dsc-card-backround: var(--ds-color-brand2-surface-active); + &:active { + --dsc-card-backround: var(--ds-color-brand2-surface-active); + } + } } &[data-color='brand3'] { --dsc-card-border-color: var(--ds-color-brand3-border-subtle); --dsc-card-backround: var(--ds-color-brand3-surface-default); --dsc-card-color: var(--ds-color-brand3-text-default); - } - &[data-color='brand3'][data-link] { - --dsc-card-border-color: var(--ds-color-brand3-border-default); - } + &[data-link] { + --dsc-card-border-color: var(--ds-color-brand3-border-default); - &[data-color='brand3'][data-link]:hover { - --dsc-card-backround: var(--ds-color-brand3-surface-hover); - } + &:hover { + --dsc-card-backround: var(--ds-color-brand3-surface-hover); + } - &[data-color='brand3'][data-link]:active { - --dsc-card-backround: var(--ds-color-brand3-surface-active); + &:active { + --dsc-card-backround: var(--ds-color-brand3-surface-active); + } + } } .ds-card__header h1, From 2f0294e465e7ce1ea72d58443cd9a4b697c07a8e Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 16 Sep 2024 08:44:29 +0200 Subject: [PATCH 4/5] media hover --- packages/css/card.css | 50 ++++++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/packages/css/card.css b/packages/css/card.css index 1b63a0eaea..ecf739fb28 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -31,13 +31,15 @@ text-underline-offset: max(6px, 0.25rem, 0.22em); } - &:hover { - --dsc-card-backround: var(--ds-color-neutral-background-subtle); - } - &:active { --dsc-card-backround: var(--ds-color-neutral-surface-default); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --dsc-card-backround: var(--ds-color-neutral-background-subtle); + } + } } &[data-color='subtle'] { @@ -47,13 +49,15 @@ &[data-link] { --dsc-card-border-color: var(--ds-color-neutral-border-default); - &:hover { - --dsc-card-backround: var(--ds-color-neutral-surface-default); - } - &:active { --dsc-card-backround: var(--ds-color-neutral-surface-hover); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --dsc-card-backround: var(--ds-color-neutral-surface-default); + } + } } } @@ -65,13 +69,15 @@ &[data-link] { --dsc-card-border-color: var(--ds-color-brand1-border-default); - &:hover { - --dsc-card-backround: var(--ds-color-brand1-surface-hover); - } - &:active { --dsc-card-backround: var(--ds-color-brand1-surface-active); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --dsc-card-backround: var(--ds-color-brand1-surface-hover); + } + } } } @@ -83,13 +89,15 @@ &[data-link] { --dsc-card-border-color: var(--ds-color-brand2-border-default); - &:hover { - --dsc-card-backround: var(--ds-color-brand2-surface-hover); - } - &:active { --dsc-card-backround: var(--ds-color-brand2-surface-active); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --dsc-card-backround: var(--ds-color-brand2-surface-hover); + } + } } } @@ -101,13 +109,15 @@ &[data-link] { --dsc-card-border-color: var(--ds-color-brand3-border-default); - &:hover { - --dsc-card-backround: var(--ds-color-brand3-surface-hover); - } - &:active { --dsc-card-backround: var(--ds-color-brand3-surface-active); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --dsc-card-backround: var(--ds-color-brand3-surface-hover); + } + } } } From e4ebd5ee9bbae6dd252db4f8a82c233289dffc15 Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 16 Sep 2024 11:57:10 +0200 Subject: [PATCH 5/5] :any-link --- packages/css/card.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/css/card.css b/packages/css/card.css index ecf739fb28..5092af9b72 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -173,8 +173,7 @@ padding: var(--ds-spacing-2) 0; } - & a, - & a:visited { + & a:any-link { color: var(--ds-color-neutral-text-default); }