From 1ff846183e3645eaa23f3e813b4699f034241567 Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 08:53:59 +0200 Subject: [PATCH 1/8] chore: fix typography attrs and layering --- packages/css/{baseline => base}/ds-reset.css | 0 .../css/{baseline => base}/typography.css | 74 ++++++------------- packages/css/baseline/baseline.css | 5 -- packages/css/card.css | 2 +- packages/css/index.css | 7 +- packages/css/utilities.css | 31 ++++++++ packages/react/src/components/Label/Label.tsx | 8 +- 7 files changed, 60 insertions(+), 67 deletions(-) rename packages/css/{baseline => base}/ds-reset.css (100%) rename packages/css/{baseline => base}/typography.css (71%) delete mode 100644 packages/css/baseline/baseline.css diff --git a/packages/css/baseline/ds-reset.css b/packages/css/base/ds-reset.css similarity index 100% rename from packages/css/baseline/ds-reset.css rename to packages/css/base/ds-reset.css diff --git a/packages/css/baseline/typography.css b/packages/css/base/typography.css similarity index 71% rename from packages/css/baseline/typography.css rename to packages/css/base/typography.css index 6d9eee1418..505ef96eda 100644 --- a/packages/css/baseline/typography.css +++ b/packages/css/base/typography.css @@ -1,8 +1,6 @@ /** Heading */ .ds-heading { - --dsc-bottom-spacing: var(--ds-spacing-4); - margin: 0; @composes ds-heading-text--md from '../utilities.css'; @@ -96,48 +94,34 @@ } /** Label */ -.ds-label--md { - font-size: var(--ds-label-md-font-size); - font-weight: var(--ds-label-md-font-weight); - letter-spacing: var(--ds-label-md-letter-spacing); - line-height: var(--ds-label-md-line-height); - color: var(--ds-color-neutral-text-default); +.ds-label { display: inline-block; margin: 0; padding: 0; -} -.ds-label--xs { - font-weight: var(--ds-label-xs-font-weight); - line-height: var(--ds-label-xs-line-height); - font-size: var(--ds-label-xs-font-size); - letter-spacing: var(--ds-label-xs-letter-spacing); - color: var(--ds-color-neutral-text-default); - display: inline-block; - margin: 0; - padding: 0; -} + @composes ds-label--md from '../utilities.css'; -.ds-label--sm { - font-weight: var(--ds-label-sm-font-weight); - line-height: var(--ds-label-sm-line-height); - font-size: var(--ds-label-sm-font-size); - letter-spacing: var(--ds-label-sm-letter-spacing); - color: var(--ds-color-neutral-text-default); - display: inline-block; - margin: 0; - padding: 0; -} + font-weight: var(--ds-font-weight-medium); -.ds-label--lg { - font-weight: var(--ds-label-lg-font-weight); - line-height: var(--ds-label-lg-line-height); - font-size: var(--ds-label-lg-font-size); - letter-spacing: var(--ds-label-lg-letter-spacing); - color: var(--ds-color-neutral-text-default); - display: inline-block; - margin: 0; - padding: 0; + &[data-size='xs'] { + @composes ds-label--xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-label--sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-label--lg from '../utilities.css'; + } + + &[data-weight='semibold'] { + font-weight: var(--ds-font-weight-semibold); + } + + &[data-weight='regular'] { + font-weight: var(--ds-font-weight-regular); + } } /** Validation message */ @@ -187,20 +171,6 @@ } } -/** Font weight - ** used for weight on Label */ -.ds-font-weight--medium { - font-weight: var(--ds-font-weight-medium); -} - -.ds-font-weight--semibold { - font-weight: var(--ds-font-weight-semibold); -} - -.ds-font-weight--regular { - font-weight: var(--ds-font-weight-regular); -} - /** Line height ** used for long, short Paragraph */ .ds-line-height--sm { diff --git a/packages/css/baseline/baseline.css b/packages/css/baseline/baseline.css deleted file mode 100644 index 14e13a4ab4..0000000000 --- a/packages/css/baseline/baseline.css +++ /dev/null @@ -1,5 +0,0 @@ -:root, -[data-ds-color-mode] { - color: var(--ds-color-neutral-text-default); - background-color: var(--ds-color-neutral-background-default); -} diff --git a/packages/css/card.css b/packages/css/card.css index 01cf02e5f3..ed4629b398 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -18,7 +18,7 @@ overflow: clip; /* Needed to clip media elements and and Card.Block */ padding: var(--dsc-card-padding); - @composes ds-paragraph from './baseline/typography.css'; /* Must be after all: unset */ + @composes ds-paragraph from './base/typography.css'; /* Must be after all: unset */ /* Style link in heading, or heading when Card is anchor */ :is(h1, h2, h3, h4, h5, h6) a:any-link, /* Using :any-link to target both a and a:visited */ diff --git a/packages/css/index.css b/packages/css/index.css index d75a1544ef..9acc5436e4 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -1,11 +1,10 @@ @charset "UTF-8"; -@layer ds.reset, ds.baseline, ds.theme, ds.base, ds.components; +@layer ds.reset, ds.base, ds.theme, ds.components; /** Import order defines ordinal specificity for layers */ -@import url('./baseline/ds-reset.css') layer(ds.reset); -@import url('./baseline/baseline.css') layer(ds.baseline); -@import url('./baseline/typography.css') layer(ds.base.typography); +@import url('./base/ds-reset.css') layer(ds.reset); +@import url('./base/typography.css') layer(ds.base.typography); @import url('./utilities.css') layer(ds.base.utilities); @import url('./button.css') layer(ds.components); @import url('./alert.css') layer(ds.components); diff --git a/packages/css/utilities.css b/packages/css/utilities.css index ce7150fe85..e8c7037dca 100644 --- a/packages/css/utilities.css +++ b/packages/css/utilities.css @@ -17,6 +17,9 @@ --dsc-focus-border-width: 3px; /* Default focus border width */ --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner); --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width); + + color: var(--ds-color-neutral-text-default); + background-color: var(--ds-color-neutral-background-default); } /** @@ -195,3 +198,31 @@ font-size: var(--ds-heading-2xl-font-size); letter-spacing: var(--ds-heading-2xl-letter-spacing); } + +.ds-label--md { + font-size: var(--ds-label-md-font-size); + font-weight: var(--ds-label-md-font-weight); + letter-spacing: var(--ds-label-md-letter-spacing); + line-height: var(--ds-label-md-line-height); +} + +.ds-label--xs { + font-weight: var(--ds-label-xs-font-weight); + line-height: var(--ds-label-xs-line-height); + font-size: var(--ds-label-xs-font-size); + letter-spacing: var(--ds-label-xs-letter-spacing); +} + +.ds-label--sm { + font-weight: var(--ds-label-sm-font-weight); + line-height: var(--ds-label-sm-line-height); + font-size: var(--ds-label-sm-font-size); + letter-spacing: var(--ds-label-sm-letter-spacing); +} + +.ds-label--lg { + font-weight: var(--ds-label-lg-font-weight); + line-height: var(--ds-label-lg-line-height); + font-size: var(--ds-label-lg-font-size); + letter-spacing: var(--ds-label-lg-letter-spacing); +} diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx index f651d843c4..0c41dd2f66 100644 --- a/packages/react/src/components/Label/Label.tsx +++ b/packages/react/src/components/Label/Label.tsx @@ -36,11 +36,9 @@ export const Label = forwardRef(function Label( return ( ); From 4024f38e05a27bc6849b7dd968a6d0b7b94829bb Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 09:11:41 +0200 Subject: [PATCH 2/8] rest of typography --- packages/css/base/typography.css | 60 +++----------- packages/css/index.css | 2 +- packages/css/utilities.css | 45 +++++++++++ .../src/components/Label/Label.stories.tsx | 1 + .../Paragraph/Paragraph.stories.tsx | 1 + .../ValidationMessage/ValidationMessage.tsx | 5 +- packages/react/stories/Typography.mdx | 4 + packages/react/stories/Typography.stories.tsx | 78 +++++++++++++++++++ 8 files changed, 143 insertions(+), 53 deletions(-) diff --git a/packages/css/base/typography.css b/packages/css/base/typography.css index 505ef96eda..a370e1b69c 100644 --- a/packages/css/base/typography.css +++ b/packages/css/base/typography.css @@ -126,61 +126,21 @@ /** Validation message */ -.ds-validation-message--xs { - font-weight: var(--ds-error_message-xs-font-weight); - line-height: var(--ds-error_message-xs-line-height); - font-size: var(--ds-error_message-xs-font-size); - letter-spacing: var(--ds-error_message-xs-letter-spacing); - - &[data-error] { - color: var(--ds-color-danger-text-subtle); - } -} +.ds-validation-message { + margin: 0; -.ds-validation-message--sm { - font-weight: var(--ds-error_message-sm-font-weight); - line-height: var(--ds-error_message-sm-line-height); - font-size: var(--ds-error_message-sm-font-size); - letter-spacing: var(--ds-error_message-sm-letter-spacing); + /* color comes from the composed classes */ + @composes ds-validation-message--md from '../utilities.css'; - &[data-error] { - color: var(--ds-color-danger-text-subtle); + &[data-size='xs'] { + @composes ds-validation-message--xs from '../utilities.css'; } -} - -.ds-validation-message--md { - font-size: var(--ds-error_message-md-font-size); - font-weight: var(--ds-error_message-md-font-weight); - letter-spacing: var(--ds-error_message-md-letter-spacing); - line-height: var(--ds-error_message-md-line-height); - margin: 0; - &[data-error] { - color: var(--ds-color-danger-text-subtle); + &[data-size='sm'] { + @composes ds-validation-message--sm from '../utilities.css'; } -} - -.ds-validation-message--lg { - font-weight: var(--ds-error_message-lg-font-weight); - line-height: var(--ds-error_message-lg-line-height); - font-size: var(--ds-error_message-lg-font-size); - letter-spacing: var(--ds-error_message-lg-letter-spacing); - &[data-error] { - color: var(--ds-color-danger-text-subtle); + &[data-size='lg'] { + @composes ds-validation-message--lg from '../utilities.css'; } } - -/** Line height - ** used for long, short Paragraph */ -.ds-line-height--sm { - line-height: var(--ds-line-height-sm); -} - -.ds-line-height--md { - line-height: var(--ds-line-height-md); -} - -.ds-line-height--lg { - line-height: var(--ds-line-height-lg); -} diff --git a/packages/css/index.css b/packages/css/index.css index 9acc5436e4..f024eb575d 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -4,8 +4,8 @@ /** Import order defines ordinal specificity for layers */ @import url('./base/ds-reset.css') layer(ds.reset); -@import url('./base/typography.css') layer(ds.base.typography); @import url('./utilities.css') layer(ds.base.utilities); +@import url('./base/typography.css') layer(ds.base.typography); @import url('./button.css') layer(ds.components); @import url('./alert.css') layer(ds.components); @import url('./popover.css') layer(ds.components); diff --git a/packages/css/utilities.css b/packages/css/utilities.css index e8c7037dca..816d5ff55a 100644 --- a/packages/css/utilities.css +++ b/packages/css/utilities.css @@ -226,3 +226,48 @@ font-size: var(--ds-label-lg-font-size); letter-spacing: var(--ds-label-lg-letter-spacing); } + +.ds-validation-message--xs { + font-weight: var(--ds-error_message-xs-font-weight); + line-height: var(--ds-error_message-xs-line-height); + font-size: var(--ds-error_message-xs-font-size); + letter-spacing: var(--ds-error_message-xs-letter-spacing); + + &[data-error] { + color: var(--ds-color-danger-text-subtle); + } +} + +.ds-validation-message--sm { + font-weight: var(--ds-error_message-sm-font-weight); + line-height: var(--ds-error_message-sm-line-height); + font-size: var(--ds-error_message-sm-font-size); + letter-spacing: var(--ds-error_message-sm-letter-spacing); + + &[data-error] { + color: var(--ds-color-danger-text-subtle); + } +} + +.ds-validation-message--md { + font-size: var(--ds-error_message-md-font-size); + font-weight: var(--ds-error_message-md-font-weight); + letter-spacing: var(--ds-error_message-md-letter-spacing); + line-height: var(--ds-error_message-md-line-height); + margin: 0; + + &[data-error] { + color: var(--ds-color-danger-text-subtle); + } +} + +.ds-validation-message--lg { + font-weight: var(--ds-error_message-lg-font-weight); + line-height: var(--ds-error_message-lg-line-height); + font-size: var(--ds-error_message-lg-font-size); + letter-spacing: var(--ds-error_message-lg-letter-spacing); + + &[data-error] { + color: var(--ds-color-danger-text-subtle); + } +} diff --git a/packages/react/src/components/Label/Label.stories.tsx b/packages/react/src/components/Label/Label.stories.tsx index 2ca81bd4bc..871a579316 100644 --- a/packages/react/src/components/Label/Label.stories.tsx +++ b/packages/react/src/components/Label/Label.stories.tsx @@ -15,5 +15,6 @@ export const Preview: Story = { args: { children: 'Vennligst skriv inn fødselsnummer. 11 tegn', size: 'md', + weight: 'medium', }, }; diff --git a/packages/react/src/components/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Paragraph/Paragraph.stories.tsx index d4a78ee331..9534aec880 100644 --- a/packages/react/src/components/Paragraph/Paragraph.stories.tsx +++ b/packages/react/src/components/Paragraph/Paragraph.stories.tsx @@ -16,5 +16,6 @@ export const Preview: Story = { children: 'Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har.', size: 'md', + variant: 'default', }, }; diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx index 5776999d89..dfc45ece26 100644 --- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx +++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx @@ -30,9 +30,10 @@ export const ValidationMessage = forwardRef< return ( ); diff --git a/packages/react/stories/Typography.mdx b/packages/react/stories/Typography.mdx index 07bc32cdae..3c97e573ca 100644 --- a/packages/react/stories/Typography.mdx +++ b/packages/react/stories/Typography.mdx @@ -69,3 +69,7 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne ## Eksempel + +Vi endrer `color` og `background-color` for deg når du setter `data-ds-color-mode`. + + diff --git a/packages/react/stories/Typography.stories.tsx b/packages/react/stories/Typography.stories.tsx index d63cdecd3b..6658f767de 100644 --- a/packages/react/stories/Typography.stories.tsx +++ b/packages/react/stories/Typography.stories.tsx @@ -85,3 +85,81 @@ export const EksempelTekst: StoryFn = () => ( ); + +export const EksempelTekstDark: StoryFn = () => ( +
+ + Samordnet registermelding (H1) + + + + Her kan du registrere nye virksomheter, som for eksempel + enkeltpersonforetak, foreninger, aksjeselskap, ansvarlige selskap, + samvirkeforetak og stiftelser. De aller fleste organisasjonsformene kan + bruke denne tjenesten. + + + + Når skal du bruke skjemaet? (H2) + + + + Denne tjenesten kan du bruke for å melde opplysninger til + Enhetsregisteret, Foretaksregisteret, Frivillighetsregisteret, NAV + Aa-registeret, Virksomhets- og foretaksregisteret hos SSB, + Stiftelsesregisteret og Skattedirektoratets register over upersonlige + skattytere. + + + + Signering (H3) + + + + Når du skal signere meldingen vil du motta en signeringsoppgave i + meldingsboksen din i Altinn. Meldingen blir ikke sendt til behandling før + alle har signert. + + + + Krav om rolle for signering (H4) + + + + For å signere på vegne av en virksomhet, trenger du Altinn-rollen Signerer + av Samordnet registermelding. Du kan se hvilke roller du har for en aktør + på menypunktet Profil, Skjema og tjenester du har rettighet til. Om du + ikke har disse rollene, må du få noen som har rollene til å delegere dem + til deg. + + + + Personvern (H5) + + + + Personvernerklæringen gir informasjon om hvilke personopplysninger vi + behandler, hvordan disse blir behandlet og hvilke rettigheter du har. + +
+); From 8c4353143446b4d6fa60839604628d9dde5966a4 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Wed, 9 Oct 2024 09:19:20 +0200 Subject: [PATCH 3/8] Create smooth-radios-leave.md --- .changeset/smooth-radios-leave.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/smooth-radios-leave.md diff --git a/.changeset/smooth-radios-leave.md b/.changeset/smooth-radios-leave.md new file mode 100644 index 0000000000..742c987187 --- /dev/null +++ b/.changeset/smooth-radios-leave.md @@ -0,0 +1,8 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Label: Use data attributes for styling + +ValidationMessage: Use data attributes for styling From c3213f137ab5d15e5f78b427295856ece0dbfc1d Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Wed, 9 Oct 2024 09:19:59 +0200 Subject: [PATCH 4/8] Create tidy-cheetahs-cry.md --- .changeset/tidy-cheetahs-cry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tidy-cheetahs-cry.md diff --git a/.changeset/tidy-cheetahs-cry.md b/.changeset/tidy-cheetahs-cry.md new file mode 100644 index 0000000000..45f8ba1609 --- /dev/null +++ b/.changeset/tidy-cheetahs-cry.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-css": patch +--- + +Remove `baseline` layer and fix layerorder for typography From 2f82aa09bd7c0ff1dc06adea3102f02d079c5e70 Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 09:47:32 +0200 Subject: [PATCH 5/8] move to own files, add typography layer --- packages/css/base/typography.css | 146 ---------------------------- packages/css/heading.css | 29 ++++++ packages/css/index.css | 9 +- packages/css/label.css | 30 ++++++ packages/css/paragraph.css | 61 ++++++++++++ packages/css/utilities.css | 16 --- packages/css/validation-message.css | 21 ++++ 7 files changed, 147 insertions(+), 165 deletions(-) delete mode 100644 packages/css/base/typography.css create mode 100644 packages/css/heading.css create mode 100644 packages/css/label.css create mode 100644 packages/css/paragraph.css create mode 100644 packages/css/validation-message.css diff --git a/packages/css/base/typography.css b/packages/css/base/typography.css deleted file mode 100644 index a370e1b69c..0000000000 --- a/packages/css/base/typography.css +++ /dev/null @@ -1,146 +0,0 @@ -/** Heading */ - -.ds-heading { - margin: 0; - - @composes ds-heading-text--md from '../utilities.css'; - - &[data-size='2xs'] { - @composes ds-heading-text--2xs from '../utilities.css'; - } - - &[data-size='xs'] { - @composes ds-heading-text--xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-heading-text--sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-heading-text--lg from '../utilities.css'; - } - - &[data-size='xl'] { - @composes ds-heading-text--xl from '../utilities.css'; - } - - &[data-size='2xl'] { - @composes ds-heading-text--2xl from '../utilities.css'; - } -} - -/** Paragraph */ -.ds-paragraph { - margin: 0; - - @composes ds-body-text--md from '../utilities.css'; - - &[data-size='xs'] { - @composes ds-body-text--xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-body-text--sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-body-text--lg from '../utilities.css'; - } - - &[data-size='xl'] { - @composes ds-body-text--xl from '../utilities.css'; - } - - &[data-variant='long'] { - @composes ds-body-text--long-md from '../utilities.css'; - - &[data-size='xs'] { - @composes ds-body-text--long-xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-body-text--long-sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-body-text--long-lg from '../utilities.css'; - } - - &[data-size='xl'] { - @composes ds-body-text--long-xl from '../utilities.css'; - } - } - - &[data-variant='short'] { - @composes ds-body-text--short-md from '../utilities.css'; - - &[data-size='xs'] { - @composes ds-body-text--short-xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-body-text--short-sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-body-text--short-lg from '../utilities.css'; - } - - &[data-size='xl'] { - @composes ds-body-text--short-xl from '../utilities.css'; - } - } -} - -/** Label */ -.ds-label { - display: inline-block; - margin: 0; - padding: 0; - - @composes ds-label--md from '../utilities.css'; - - font-weight: var(--ds-font-weight-medium); - - &[data-size='xs'] { - @composes ds-label--xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-label--sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-label--lg from '../utilities.css'; - } - - &[data-weight='semibold'] { - font-weight: var(--ds-font-weight-semibold); - } - - &[data-weight='regular'] { - font-weight: var(--ds-font-weight-regular); - } -} - -/** Validation message */ - -.ds-validation-message { - margin: 0; - - /* color comes from the composed classes */ - @composes ds-validation-message--md from '../utilities.css'; - - &[data-size='xs'] { - @composes ds-validation-message--xs from '../utilities.css'; - } - - &[data-size='sm'] { - @composes ds-validation-message--sm from '../utilities.css'; - } - - &[data-size='lg'] { - @composes ds-validation-message--lg from '../utilities.css'; - } -} diff --git a/packages/css/heading.css b/packages/css/heading.css new file mode 100644 index 0000000000..b842e3c064 --- /dev/null +++ b/packages/css/heading.css @@ -0,0 +1,29 @@ +.ds-heading { + margin: 0; + + @composes ds-heading-text--md from '../utilities.css'; + + &[data-size='2xs'] { + @composes ds-heading-text--2xs from '../utilities.css'; + } + + &[data-size='xs'] { + @composes ds-heading-text--xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-heading-text--sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-heading-text--lg from '../utilities.css'; + } + + &[data-size='xl'] { + @composes ds-heading-text--xl from '../utilities.css'; + } + + &[data-size='2xl'] { + @composes ds-heading-text--2xl from '../utilities.css'; + } +} diff --git a/packages/css/index.css b/packages/css/index.css index f024eb575d..3521bd9574 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -1,11 +1,14 @@ @charset "UTF-8"; -@layer ds.reset, ds.base, ds.theme, ds.components; +@layer ds.reset, ds.base, ds.typography, ds.theme, ds.components; /** Import order defines ordinal specificity for layers */ @import url('./base/ds-reset.css') layer(ds.reset); -@import url('./utilities.css') layer(ds.base.utilities); -@import url('./base/typography.css') layer(ds.base.typography); +@import url('./utilities.css') layer(ds.base); +@import url('./heading.css') layer(ds.typography); +@import url('./label.css') layer(ds.typography); +@import url('./paragraph.css') layer(ds.typography); +@import url('./validation-message.css') layer(ds.typography); @import url('./button.css') layer(ds.components); @import url('./alert.css') layer(ds.components); @import url('./popover.css') layer(ds.components); diff --git a/packages/css/label.css b/packages/css/label.css new file mode 100644 index 0000000000..ec82a6e449 --- /dev/null +++ b/packages/css/label.css @@ -0,0 +1,30 @@ +.ds-label { + /* We set these three styles when label is used in `legend` */ + display: inline-block; + margin: 0; + padding: 0; + + @composes ds-label--md from '../utilities.css'; + + font-weight: var(--ds-font-weight-medium); + + &[data-size='xs'] { + @composes ds-label--xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-label--sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-label--lg from '../utilities.css'; + } + + &[data-weight='semibold'] { + font-weight: var(--ds-font-weight-semibold); + } + + &[data-weight='regular'] { + font-weight: var(--ds-font-weight-regular); + } +} diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css new file mode 100644 index 0000000000..1b33849e54 --- /dev/null +++ b/packages/css/paragraph.css @@ -0,0 +1,61 @@ +.ds-paragraph { + margin: 0; + + @composes ds-body-text--md from '../utilities.css'; + + &[data-size='xs'] { + @composes ds-body-text--xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-body-text--sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-body-text--lg from '../utilities.css'; + } + + &[data-size='xl'] { + @composes ds-body-text--xl from '../utilities.css'; + } + + &[data-variant='long'] { + @composes ds-body-text--long-md from '../utilities.css'; + + &[data-size='xs'] { + @composes ds-body-text--long-xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-body-text--long-sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-body-text--long-lg from '../utilities.css'; + } + + &[data-size='xl'] { + @composes ds-body-text--long-xl from '../utilities.css'; + } + } + + &[data-variant='short'] { + @composes ds-body-text--short-md from '../utilities.css'; + + &[data-size='xs'] { + @composes ds-body-text--short-xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-body-text--short-sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-body-text--short-lg from '../utilities.css'; + } + + &[data-size='xl'] { + @composes ds-body-text--short-xl from '../utilities.css'; + } + } +} diff --git a/packages/css/utilities.css b/packages/css/utilities.css index 816d5ff55a..1a716b9d9b 100644 --- a/packages/css/utilities.css +++ b/packages/css/utilities.css @@ -232,10 +232,6 @@ line-height: var(--ds-error_message-xs-line-height); font-size: var(--ds-error_message-xs-font-size); letter-spacing: var(--ds-error_message-xs-letter-spacing); - - &[data-error] { - color: var(--ds-color-danger-text-subtle); - } } .ds-validation-message--sm { @@ -243,10 +239,6 @@ line-height: var(--ds-error_message-sm-line-height); font-size: var(--ds-error_message-sm-font-size); letter-spacing: var(--ds-error_message-sm-letter-spacing); - - &[data-error] { - color: var(--ds-color-danger-text-subtle); - } } .ds-validation-message--md { @@ -255,10 +247,6 @@ letter-spacing: var(--ds-error_message-md-letter-spacing); line-height: var(--ds-error_message-md-line-height); margin: 0; - - &[data-error] { - color: var(--ds-color-danger-text-subtle); - } } .ds-validation-message--lg { @@ -266,8 +254,4 @@ line-height: var(--ds-error_message-lg-line-height); font-size: var(--ds-error_message-lg-font-size); letter-spacing: var(--ds-error_message-lg-letter-spacing); - - &[data-error] { - color: var(--ds-color-danger-text-subtle); - } } diff --git a/packages/css/validation-message.css b/packages/css/validation-message.css new file mode 100644 index 0000000000..0478acf26f --- /dev/null +++ b/packages/css/validation-message.css @@ -0,0 +1,21 @@ +.ds-validation-message { + margin: 0; + + @composes ds-validation-message--md from '../utilities.css'; + + &[data-size='xs'] { + @composes ds-validation-message--xs from '../utilities.css'; + } + + &[data-size='sm'] { + @composes ds-validation-message--sm from '../utilities.css'; + } + + &[data-size='lg'] { + @composes ds-validation-message--lg from '../utilities.css'; + } + + &[data-error] { + color: var(--ds-color-danger-text-subtle); + } +} From 8ae89523ab015e96fb73dd157ba32c6ac15f5432 Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 09:50:10 +0200 Subject: [PATCH 6/8] update composes --- packages/css/card.css | 2 +- packages/css/heading.css | 14 +++++++------- packages/css/label.css | 8 ++++---- packages/css/paragraph.css | 30 ++++++++++++++--------------- packages/css/validation-message.css | 8 ++++---- 5 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/css/card.css b/packages/css/card.css index ed4629b398..deaf8ca12d 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -18,7 +18,7 @@ overflow: clip; /* Needed to clip media elements and and Card.Block */ padding: var(--dsc-card-padding); - @composes ds-paragraph from './base/typography.css'; /* Must be after all: unset */ + @composes ds-paragraph from './paragraph.css'; /* Must be after all: unset */ /* Style link in heading, or heading when Card is anchor */ :is(h1, h2, h3, h4, h5, h6) a:any-link, /* Using :any-link to target both a and a:visited */ diff --git a/packages/css/heading.css b/packages/css/heading.css index b842e3c064..c3cb668627 100644 --- a/packages/css/heading.css +++ b/packages/css/heading.css @@ -1,29 +1,29 @@ .ds-heading { margin: 0; - @composes ds-heading-text--md from '../utilities.css'; + @composes ds-heading-text--md from './utilities.css'; &[data-size='2xs'] { - @composes ds-heading-text--2xs from '../utilities.css'; + @composes ds-heading-text--2xs from './utilities.css'; } &[data-size='xs'] { - @composes ds-heading-text--xs from '../utilities.css'; + @composes ds-heading-text--xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-heading-text--sm from '../utilities.css'; + @composes ds-heading-text--sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-heading-text--lg from '../utilities.css'; + @composes ds-heading-text--lg from './utilities.css'; } &[data-size='xl'] { - @composes ds-heading-text--xl from '../utilities.css'; + @composes ds-heading-text--xl from './utilities.css'; } &[data-size='2xl'] { - @composes ds-heading-text--2xl from '../utilities.css'; + @composes ds-heading-text--2xl from './utilities.css'; } } diff --git a/packages/css/label.css b/packages/css/label.css index ec82a6e449..5f9b1dd5a0 100644 --- a/packages/css/label.css +++ b/packages/css/label.css @@ -4,20 +4,20 @@ margin: 0; padding: 0; - @composes ds-label--md from '../utilities.css'; + @composes ds-label--md from './utilities.css'; font-weight: var(--ds-font-weight-medium); &[data-size='xs'] { - @composes ds-label--xs from '../utilities.css'; + @composes ds-label--xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-label--sm from '../utilities.css'; + @composes ds-label--sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-label--lg from '../utilities.css'; + @composes ds-label--lg from './utilities.css'; } &[data-weight='semibold'] { diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css index 1b33849e54..1f87a3b4cf 100644 --- a/packages/css/paragraph.css +++ b/packages/css/paragraph.css @@ -1,61 +1,61 @@ .ds-paragraph { margin: 0; - @composes ds-body-text--md from '../utilities.css'; + @composes ds-body-text--md from './utilities.css'; &[data-size='xs'] { - @composes ds-body-text--xs from '../utilities.css'; + @composes ds-body-text--xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-body-text--sm from '../utilities.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-body-text--lg from '../utilities.css'; + @composes ds-body-text--lg from './utilities.css'; } &[data-size='xl'] { - @composes ds-body-text--xl from '../utilities.css'; + @composes ds-body-text--xl from './utilities.css'; } &[data-variant='long'] { - @composes ds-body-text--long-md from '../utilities.css'; + @composes ds-body-text--long-md from './utilities.css'; &[data-size='xs'] { - @composes ds-body-text--long-xs from '../utilities.css'; + @composes ds-body-text--long-xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-body-text--long-sm from '../utilities.css'; + @composes ds-body-text--long-sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-body-text--long-lg from '../utilities.css'; + @composes ds-body-text--long-lg from './utilities.css'; } &[data-size='xl'] { - @composes ds-body-text--long-xl from '../utilities.css'; + @composes ds-body-text--long-xl from './utilities.css'; } } &[data-variant='short'] { - @composes ds-body-text--short-md from '../utilities.css'; + @composes ds-body-text--short-md from './utilities.css'; &[data-size='xs'] { - @composes ds-body-text--short-xs from '../utilities.css'; + @composes ds-body-text--short-xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-body-text--short-sm from '../utilities.css'; + @composes ds-body-text--short-sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-body-text--short-lg from '../utilities.css'; + @composes ds-body-text--short-lg from './utilities.css'; } &[data-size='xl'] { - @composes ds-body-text--short-xl from '../utilities.css'; + @composes ds-body-text--short-xl from './utilities.css'; } } } diff --git a/packages/css/validation-message.css b/packages/css/validation-message.css index 0478acf26f..42f070f267 100644 --- a/packages/css/validation-message.css +++ b/packages/css/validation-message.css @@ -1,18 +1,18 @@ .ds-validation-message { margin: 0; - @composes ds-validation-message--md from '../utilities.css'; + @composes ds-validation-message--md from './utilities.css'; &[data-size='xs'] { - @composes ds-validation-message--xs from '../utilities.css'; + @composes ds-validation-message--xs from './utilities.css'; } &[data-size='sm'] { - @composes ds-validation-message--sm from '../utilities.css'; + @composes ds-validation-message--sm from './utilities.css'; } &[data-size='lg'] { - @composes ds-validation-message--lg from '../utilities.css'; + @composes ds-validation-message--lg from './utilities.css'; } &[data-error] { From 784bca5eb415aeba54b124f3746dad53650d7bba Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 09:58:13 +0200 Subject: [PATCH 7/8] rename utilities file to base --- packages/css/accordion.css | 4 +-- packages/css/alert.css | 6 ++-- packages/css/avatar.css | 10 +++---- packages/css/badge.css | 6 ++-- packages/css/{utilities.css => base/base.css} | 2 +- packages/css/breadcrumbs.css | 6 ++-- packages/css/button.css | 8 ++--- packages/css/card.css | 2 +- packages/css/chip.css | 6 ++-- packages/css/dropdown.css | 6 ++-- packages/css/fieldset.css | 2 +- packages/css/heading.css | 14 ++++----- packages/css/helptext.css | 2 +- packages/css/index.css | 2 +- packages/css/label.css | 8 ++--- packages/css/list.css | 6 ++-- packages/css/paragraph.css | 30 +++++++++---------- packages/css/popover.css | 6 ++-- packages/css/skiplink.css | 2 +- packages/css/table.css | 6 ++-- packages/css/tabs.css | 8 ++--- packages/css/tag.css | 6 ++-- packages/css/tooltip.css | 2 +- packages/css/validation-message.css | 8 ++--- 24 files changed, 79 insertions(+), 79 deletions(-) rename packages/css/{utilities.css => base/base.css} (99%) diff --git a/packages/css/accordion.css b/packages/css/accordion.css index f1afe560f5..4855227122 100644 --- a/packages/css/accordion.css +++ b/packages/css/accordion.css @@ -72,8 +72,8 @@ padding-block: var(--dsc-accordion-padding); padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding); - @composes ds-focus from './utilities.css'; - @composes ds-body-text--sm from './utilities.css'; + @composes ds-focus from './base/base.css'; + @composes ds-body-text--sm from './base/base.css'; &:focus-visible { position: relative; /* Ensure foucs outline renders on top */ diff --git a/packages/css/alert.css b/packages/css/alert.css index 095c0f2749..e6f400e797 100644 --- a/packages/css/alert.css +++ b/packages/css/alert.css @@ -17,7 +17,7 @@ padding-block: var(--dsc-alert-padding); padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding); - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */ &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ { @@ -66,13 +66,13 @@ --dsc-alert-icon-size: var(--ds-sizing-6); --dsc-alert-padding: var(--ds-spacing-5); - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-alert-icon-size: var(--ds-sizing-8); --dsc-alert-padding: var(--ds-spacing-7); - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } } diff --git a/packages/css/avatar.css b/packages/css/avatar.css index 90e5ce779a..960f218904 100644 --- a/packages/css/avatar.css +++ b/packages/css/avatar.css @@ -19,7 +19,7 @@ text-transform: uppercase; user-select: none; - @composes ds-body-text--xs from './utilities.css'; + @composes ds-body-text--xs from './base/base.css'; &:not(:has(> img)) { padding: var(--dsc-avatar-padding); @@ -83,27 +83,27 @@ --dsc-avatar-size: var(--ds-sizing-7); --dsc-avatar-padding: var(--ds-spacing-1); - @composes ds-body-text--xs from './utilities.css'; + @composes ds-body-text--xs from './base/base.css'; } &[data-size='sm'] { --dsc-avatar-size: var(--ds-sizing-9); --dsc-avatar-padding: var(--ds-spacing-1); - @composes ds-heading-text--2xs from './utilities.css'; + @composes ds-heading-text--2xs from './base/base.css'; } &[data-size='md'] { --dsc-avatar-size: var(--ds-sizing-12); --dsc-avatar-padding: var(--ds-spacing-2); - @composes ds-heading-text--sm from './utilities.css'; + @composes ds-heading-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-avatar-size: var(--ds-sizing-15); --dsc-avatar-padding: var(--ds-spacing-2); - @composes ds-heading-text--md from './utilities.css'; + @composes ds-heading-text--md from './base/base.css'; } } diff --git a/packages/css/badge.css b/packages/css/badge.css index 3ad5c182ae..6d171b3bf8 100644 --- a/packages/css/badge.css +++ b/packages/css/badge.css @@ -8,7 +8,7 @@ display: inline-flex; position: relative; - @composes ds-body-text--short-sm from './utilities.css'; + @composes ds-body-text--short-sm from './base/base.css'; &::before { content: attr(data-count); @@ -27,7 +27,7 @@ --dsc-badge-size: var(--ds-sizing-3); --dsc-badge-padding: 0 var(--ds-spacing-1); - @composes ds-body-text--short-xs from './utilities.css'; + @composes ds-body-text--short-xs from './base/base.css'; &[data-count] { --dsc-badge-size: var(--ds-sizing-5); @@ -38,7 +38,7 @@ --dsc-badge-size: var(--ds-sizing-4); --dsc-badge-padding: 0 var(--ds-spacing-2); - @composes ds-body-text--short-md from './utilities.css'; + @composes ds-body-text--short-md from './base/base.css'; &[data-count] { --dsc-badge-size: var(--ds-sizing-7); diff --git a/packages/css/utilities.css b/packages/css/base/base.css similarity index 99% rename from packages/css/utilities.css rename to packages/css/base/base.css index 1a716b9d9b..1b1cb382d8 100644 --- a/packages/css/utilities.css +++ b/packages/css/base/base.css @@ -26,7 +26,7 @@ * Apply a focus outline on an element when it is focused with keyboard */ .ds-focus:focus-visible { - @composes ds-focus--visible from './utilities.css'; + @composes ds-focus--visible from './base.css'; } /** diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.css index b48bd8e7bb..366e99955f 100644 --- a/packages/css/breadcrumbs.css +++ b/packages/css/breadcrumbs.css @@ -2,20 +2,20 @@ --dsc-breadcrumbs-spacing: var(--ds-spacing-2); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6); - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; &[data-size='sm'] { --dsc-breadcrumbs-spacing: var(--ds-spacing-1); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5); - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-breadcrumbs-spacing: var(--ds-spacing-3); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7); - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } & > :is(ol, ul) { diff --git a/packages/css/button.css b/packages/css/button.css index 179e20b5c9..cb58b69ac1 100644 --- a/packages/css/button.css +++ b/packages/css/button.css @@ -9,8 +9,8 @@ --dsc-button-padding-inline: var(--ds-spacing-4); --dsc-button-size: var(--ds-sizing-12); - @composes ds-body-text--short-md from './utilities.css'; - @composes ds-focus from './utilities.css'; + @composes ds-body-text--short-md from './base/base.css'; + @composes ds-focus from './base/base.css'; align-items: center; background: var(--dsc-button-background); @@ -43,7 +43,7 @@ --dsc-button-padding-inline: var(--ds-spacing-3); --dsc-button-size: var(--ds-sizing-10); - @composes ds-body-text--short-sm from './utilities.css'; + @composes ds-body-text--short-sm from './base/base.css'; } &[data-size='lg'] { @@ -51,7 +51,7 @@ --dsc-button-padding-inline: var(--ds-spacing-5); --dsc-button-size: var(--ds-sizing-14); - @composes ds-body-text--short-lg from './utilities.css'; + @composes ds-body-text--short-lg from './base/base.css'; } &[data-icon] { diff --git a/packages/css/card.css b/packages/css/card.css index deaf8ca12d..01fe0af126 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -44,7 +44,7 @@ /* Using CSS custom property instead of composes since we need to support :has(:focus-visible) */ &:where(:focus-visible, :has(:focus-visible)) { - @composes ds-focus--visible from './utilities.css'; + @composes ds-focus--visible from './base/base.css'; } &:active { diff --git a/packages/css/chip.css b/packages/css/chip.css index 7e0a7f401b..ab677be1ab 100644 --- a/packages/css/chip.css +++ b/packages/css/chip.css @@ -9,8 +9,8 @@ --dsc-chip-input-size: var(--ds-spacing-5); --dsc-chip-padding: 0 var(--ds-spacing-3); - @composes ds-focus from './utilities.css'; - @composes ds-paragraph-short from './utilities.css'; + @composes ds-focus from './base/base.css'; + @composes ds-paragraph-short from './base/base.css'; align-items: center; background: var(--dsc-chip-background); @@ -27,7 +27,7 @@ /* Make focus ring also when input inside is focused */ &:has(:focus-visible) { - @composes ds-focus--visible from './utilities.css'; + @composes ds-focus--visible from './base/base.css'; } &:disabled, diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css index 919c316471..4e1e3fadd2 100644 --- a/packages/css/dropdown.css +++ b/packages/css/dropdown.css @@ -21,7 +21,7 @@ .ds-dropdown__heading { padding: var(--dsc-dropdown-header-padding); - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; } &[data-size='sm'] { @@ -29,7 +29,7 @@ --dsc-dropdown-min-width: 15rem; & .ds-dropdown__heading { - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } } @@ -38,7 +38,7 @@ --dsc-dropdown-min-width: 18rem; & .ds-dropdown__heading { - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } } diff --git a/packages/css/fieldset.css b/packages/css/fieldset.css index d9c7b73654..fe5969709a 100644 --- a/packages/css/fieldset.css +++ b/packages/css/fieldset.css @@ -21,7 +21,7 @@ &[data-hidelegend] > legend, &[data-hidelegend] > legend + p { - @composes ds-sr-only from '../css/utilities.css'; + @composes ds-sr-only from './base/base.css'; } &[data-readonly] > legend::before { diff --git a/packages/css/heading.css b/packages/css/heading.css index c3cb668627..264ee46297 100644 --- a/packages/css/heading.css +++ b/packages/css/heading.css @@ -1,29 +1,29 @@ .ds-heading { margin: 0; - @composes ds-heading-text--md from './utilities.css'; + @composes ds-heading-text--md from './base/base.css'; &[data-size='2xs'] { - @composes ds-heading-text--2xs from './utilities.css'; + @composes ds-heading-text--2xs from './base/base.css'; } &[data-size='xs'] { - @composes ds-heading-text--xs from './utilities.css'; + @composes ds-heading-text--xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-heading-text--sm from './utilities.css'; + @composes ds-heading-text--sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-heading-text--lg from './utilities.css'; + @composes ds-heading-text--lg from './base/base.css'; } &[data-size='xl'] { - @composes ds-heading-text--xl from './utilities.css'; + @composes ds-heading-text--xl from './base/base.css'; } &[data-size='2xl'] { - @composes ds-heading-text--2xl from './utilities.css'; + @composes ds-heading-text--2xl from './base/base.css'; } } diff --git a/packages/css/helptext.css b/packages/css/helptext.css index 9fccccfe9b..4cc3167bd7 100644 --- a/packages/css/helptext.css +++ b/packages/css/helptext.css @@ -3,7 +3,7 @@ --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --dsc-helptext-size: var(--ds-sizing-7); - @composes ds-focus from '../css/utilities.css'; + @composes ds-focus from './base/base.css'; border-radius: var(--ds-border-radius-full); border: 2px solid; diff --git a/packages/css/index.css b/packages/css/index.css index 3521bd9574..98eb113623 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -4,7 +4,7 @@ /** Import order defines ordinal specificity for layers */ @import url('./base/ds-reset.css') layer(ds.reset); -@import url('./utilities.css') layer(ds.base); +@import url('./base/base.css') layer(ds.base); @import url('./heading.css') layer(ds.typography); @import url('./label.css') layer(ds.typography); @import url('./paragraph.css') layer(ds.typography); diff --git a/packages/css/label.css b/packages/css/label.css index 5f9b1dd5a0..952da6952c 100644 --- a/packages/css/label.css +++ b/packages/css/label.css @@ -4,20 +4,20 @@ margin: 0; padding: 0; - @composes ds-label--md from './utilities.css'; + @composes ds-label--md from './base/base.css'; font-weight: var(--ds-font-weight-medium); &[data-size='xs'] { - @composes ds-label--xs from './utilities.css'; + @composes ds-label--xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-label--sm from './utilities.css'; + @composes ds-label--sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-label--lg from './utilities.css'; + @composes ds-label--lg from './base/base.css'; } &[data-weight='semibold'] { diff --git a/packages/css/list.css b/packages/css/list.css index 44f8ed0ca1..cb7a19b13c 100644 --- a/packages/css/list.css +++ b/packages/css/list.css @@ -6,7 +6,7 @@ margin: 0; padding-left: var(--dsc-list-padding-left); - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; & > li + li { margin-top: var(--dsc-list-spacing); @@ -27,12 +27,12 @@ &[data-size='sm'] { --dsc-list-padding-left: var(--ds-spacing-4); - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-list-spacing: var(--ds-spacing-4); - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } } diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css index 1f87a3b4cf..52ac9b10a3 100644 --- a/packages/css/paragraph.css +++ b/packages/css/paragraph.css @@ -1,61 +1,61 @@ .ds-paragraph { margin: 0; - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; &[data-size='xs'] { - @composes ds-body-text--xs from './utilities.css'; + @composes ds-body-text--xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } &[data-size='xl'] { - @composes ds-body-text--xl from './utilities.css'; + @composes ds-body-text--xl from './base/base.css'; } &[data-variant='long'] { - @composes ds-body-text--long-md from './utilities.css'; + @composes ds-body-text--long-md from './base/base.css'; &[data-size='xs'] { - @composes ds-body-text--long-xs from './utilities.css'; + @composes ds-body-text--long-xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-body-text--long-sm from './utilities.css'; + @composes ds-body-text--long-sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-body-text--long-lg from './utilities.css'; + @composes ds-body-text--long-lg from './base/base.css'; } &[data-size='xl'] { - @composes ds-body-text--long-xl from './utilities.css'; + @composes ds-body-text--long-xl from './base/base.css'; } } &[data-variant='short'] { - @composes ds-body-text--short-md from './utilities.css'; + @composes ds-body-text--short-md from './base/base.css'; &[data-size='xs'] { - @composes ds-body-text--short-xs from './utilities.css'; + @composes ds-body-text--short-xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-body-text--short-sm from './utilities.css'; + @composes ds-body-text--short-sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-body-text--short-lg from './utilities.css'; + @composes ds-body-text--short-lg from './base/base.css'; } &[data-size='xl'] { - @composes ds-body-text--short-xl from './utilities.css'; + @composes ds-body-text--short-xl from './base/base.css'; } } } diff --git a/packages/css/popover.css b/packages/css/popover.css index 73a6790815..f342e1114b 100644 --- a/packages/css/popover.css +++ b/packages/css/popover.css @@ -18,7 +18,7 @@ padding: var(--dsc-popover-padding); position: fixed; - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; &::before { background: var(--dsc-popover-background); @@ -38,13 +38,13 @@ &[data-size='sm'] { --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3); - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5); - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } &[data-placement='top']::before { diff --git a/packages/css/skiplink.css b/packages/css/skiplink.css index f16e5ee23d..bda8b28a33 100644 --- a/packages/css/skiplink.css +++ b/packages/css/skiplink.css @@ -1,5 +1,5 @@ .ds-skiplink { - @composes ds-sr-only from './utilities.css'; + @composes ds-sr-only from './base/base.css'; } .ds-skiplink:focus { diff --git a/packages/css/table.css b/packages/css/table.css index ea1cbecf7d..a719b4919a 100644 --- a/packages/css/table.css +++ b/packages/css/table.css @@ -19,7 +19,7 @@ color: var(--dsc-table-color); width: 100%; - @composes ds-body-text--md from './utilities.css'; + @composes ds-body-text--md from './base/base.css'; & > :is(tbody, thead) > tr > :is(th, td) { background: var(--dsc-table-background); @@ -116,13 +116,13 @@ &[data-size='sm'] { --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3); - @composes ds-body-text--sm from './utilities.css'; + @composes ds-body-text--sm from './base/base.css'; } &[data-size='lg'] { --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3); - @composes ds-body-text--lg from './utilities.css'; + @composes ds-body-text--lg from './base/base.css'; } /** diff --git a/packages/css/tabs.css b/packages/css/tabs.css index 3053b11e8f..af4b665671 100644 --- a/packages/css/tabs.css +++ b/packages/css/tabs.css @@ -6,20 +6,20 @@ --dsc-tabs-content-color: var(--ds-color-neutral-text-default); --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle); - @composes ds-body-text--short-md from './utilities.css'; + @composes ds-body-text--short-md from './base/base.css'; &[data-size='sm'] { --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4); --dsc-tabs-content-padding: var(--ds-spacing-4); - @composes ds-body-text--short-sm from './utilities.css'; + @composes ds-body-text--short-sm from './base/base.css'; } &[data-size='lg'] { --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6); --dsc-tabs-content-padding: var(--ds-spacing-6); - @composes ds-body-text--short-lg from './utilities.css'; + @composes ds-body-text--short-lg from './base/base.css'; } } @@ -54,7 +54,7 @@ --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle); } - @composes ds-focus from './utilities.css'; + @composes ds-focus from './base/base.css'; /* We set z-index to make sure the active line does not bleed over the focus indicator */ &:focus-visible { diff --git a/packages/css/tag.css b/packages/css/tag.css index bae3e80b6c..51abf4219c 100644 --- a/packages/css/tag.css +++ b/packages/css/tag.css @@ -15,20 +15,20 @@ width: max-content; word-break: break-word; - @composes ds-body-text--short-md from './utilities.css'; + @composes ds-body-text--short-md from './base/base.css'; &[data-size='sm'] { --dsc-tag-padding: 0 var(--ds-spacing-2); --dsc-tag-min-height: var(--ds-sizing-7); - @composes ds-body-text--short-sm from './utilities.css'; + @composes ds-body-text--short-sm from './base/base.css'; } &[data-size='lg'] { --dsc-tag-padding: 0 var(--ds-spacing-3); --dsc-tag-min-height: var(--ds-sizing-9); - @composes ds-body-text--short-lg from './utilities.css'; + @composes ds-body-text--short-lg from './base/base.css'; } &[data-color='info'] { diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css index 01ce4df927..5dd1f07edf 100644 --- a/packages/css/tooltip.css +++ b/packages/css/tooltip.css @@ -7,7 +7,7 @@ color: var(--ds-color-neutral-background-default); padding: var(--ds-spacing-1) var(--ds-spacing-2); - @composes ds-body-text--short-xs from './utilities.css'; + @composes ds-body-text--short-xs from './base/base.css'; } .ds-tooltip__arrow { diff --git a/packages/css/validation-message.css b/packages/css/validation-message.css index 42f070f267..97a82c1dd5 100644 --- a/packages/css/validation-message.css +++ b/packages/css/validation-message.css @@ -1,18 +1,18 @@ .ds-validation-message { margin: 0; - @composes ds-validation-message--md from './utilities.css'; + @composes ds-validation-message--md from './base/base.css'; &[data-size='xs'] { - @composes ds-validation-message--xs from './utilities.css'; + @composes ds-validation-message--xs from './base/base.css'; } &[data-size='sm'] { - @composes ds-validation-message--sm from './utilities.css'; + @composes ds-validation-message--sm from './base/base.css'; } &[data-size='lg'] { - @composes ds-validation-message--lg from './utilities.css'; + @composes ds-validation-message--lg from './base/base.css'; } &[data-error] { From 7e2702b892d95273ec84a76b28717d1d0daa3989 Mon Sep 17 00:00:00 2001 From: barsnes Date: Wed, 9 Oct 2024 12:43:29 +0200 Subject: [PATCH 8/8] :broom: --- packages/css/card.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/css/card.css b/packages/css/card.css index 01fe0af126..0aa93ad616 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -42,7 +42,6 @@ } } - /* Using CSS custom property instead of composes since we need to support :has(:focus-visible) */ &:where(:focus-visible, :has(:focus-visible)) { @composes ds-focus--visible from './base/base.css'; }