feat(card): css changes and data attrs #2398
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@digdir/designsystemet-css": patch | ||
| "@digdir/designsystemet-react": patch | ||
| --- | ||
|
|
||
| Card: Use data attrs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| .ds-card { | ||
| --dsc-card-border-color: var(--ds-color-neutral-border-subtle); | ||
| --dsc-card-backround: var(--ds-color-neutral-background-default); | ||
| --dsc-card-color: var(--ds-color-neutral-text-default); | ||
|
|
||
| display: flex; | ||
|
|
@@ -13,178 +13,185 @@ | |
| border-radius: min(1rem, var(--ds-border-radius-md)); | ||
| border: 1px solid var(--dsc-card-border-color); | ||
| background: var(--dsc-card-backround); | ||
|
|
||
| &[data-link] { | ||
| --dsc-card-border-color: var(--ds-color-neutral-border-default); | ||
|
|
||
| text-decoration: none; | ||
|
|
||
| & h1, | ||
| & h2, | ||
| & h3, | ||
| & 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); | ||
| } | ||
|
|
||
| &: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'] { | ||
| --dsc-card-border-color: var(--ds-color-neutral-border-subtle); | ||
| --dsc-card-backround: var(--ds-color-neutral-background-subtle); | ||
|
|
||
| &[data-link] { | ||
| --dsc-card-border-color: var(--ds-color-neutral-border-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); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &[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-link] { | ||
| --dsc-card-border-color: var(--ds-color-brand1-border-default); | ||
|
|
||
| &: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); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &[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-link] { | ||
| --dsc-card-border-color: var(--ds-color-brand2-border-default); | ||
|
|
||
| &: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); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &[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-link] { | ||
| --dsc-card-border-color: var(--ds-color-brand3-border-default); | ||
|
|
||
| &: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); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .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; | ||
|
There was a problem hiding this comment. Kanskje noen jeg ikke har fått med meg - hvorfor trenger vi å sette There was a problem hiding this comment. Sjå kommentar under for svar. #2398 (comment) |
||
| } | ||
|
|
||
| .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:any-link { | ||
| 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); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Skulle vi heller gjort
& :is(h1,h2,h3,h4,h5,h6)? 😊og hvorfor setter vi
colorpå heading - arver ikke den farge? 😇There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Me setter farge slik at den blir konsekvent rett i forhold til fargen kortet har. Jo den arver farge, men vår
Headingkomponent setter også farge til--ds-color-neutral-text-default, som då blir satt om me ikkje setter farge her.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, hvorfor setter Heading farge? Kan det være litt vanskelig å sette en heading på en flate også arver den ikke currentcolor? Burde vi snakke med design om dette? :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gjerne ta det med design, føler ikkje det er eit valg me i kode skal ta.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tenker det har litt med kode å gjøre fordi det setter føringer for å kunne gjenbrukbare komponenter inni flater - jeg poster en diskusjon om dette her: https://designsystemet.slack.com/archives/C05U1MNKYCX/p1726480465469179
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okei. Avventer endringa til me får svar der.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tenker vi kan endre på det senere - kanskje bare merge denne nå først så lager jeg eget issue med color: inherit på typografi-komponenter☺️