diff --git a/.changeset/olive-windows-share.md b/.changeset/olive-windows-share.md new file mode 100644 index 0000000000..d4d7685b77 --- /dev/null +++ b/.changeset/olive-windows-share.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet": patch +"@digdir/designsystemet-theme": patch +--- + +Rename `data-ds-typography` to `data-typography` diff --git a/apps/storybook/.storybook/preview-head.html b/apps/storybook/.storybook/preview-head.html index 46f295cb25..43f5cddd79 100644 --- a/apps/storybook/.storybook/preview-head.html +++ b/apps/storybook/.storybook/preview-head.html @@ -35,7 +35,7 @@ diff --git a/apps/storybook/stories/showcase.stories.tsx b/apps/storybook/stories/showcase.stories.tsx index e1a8bf2f4f..f1eb3d6fed 100644 --- a/apps/storybook/stories/showcase.stories.tsx +++ b/apps/storybook/stories/showcase.stories.tsx @@ -60,7 +60,7 @@ export const ShowcaseStory: StoryFn = () => {
Typografi - (data-ds-typography) + (data-typography) {typography.map((typographyMode) => ( @@ -74,7 +74,7 @@ export const ShowcaseStory: StoryFn = () => { ); diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts index b76fdfae6e..09d22659bf 100644 --- a/packages/cli/src/tokens/build/configs.ts +++ b/packages/cli/src/tokens/build/configs.ts @@ -250,7 +250,7 @@ const typescriptTokens: GetStyleDictionaryConfig = ({ 'color-scheme': colorSchem }; const typographyVariables: GetStyleDictionaryConfig = ({ theme, typography }, { outPath }) => { - const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`; + const selector = `${typography === 'primary' ? ':root, ' : ''}[data-typography="${typography}"]`; const layer = `ds.theme.typography.${typography}`; return { diff --git a/packages/react/stories/bruk.mdx b/packages/react/stories/bruk.mdx index c3062df21a..eb2e6f3303 100644 --- a/packages/react/stories/bruk.mdx +++ b/packages/react/stories/bruk.mdx @@ -128,7 +128,7 @@ Dersom `auto` er valgt, vil fargemodusen endres basert på brukerens preferanser [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
-#### `data-ds-typography` +#### `data-typography` Brukes til å endre typografien på komponentene. Mulige verdier er `primary` og `secondary`. Et vanlig bruksområde for denne attributten er når du ønsker en monospace font på tabeller. @@ -142,12 +142,12 @@ Dette kan løses ved å f.eks bruke [attribute selector](https://developer.mozil {`
diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index 518b9555c9..232a3358dd 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -481,7 +481,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; @@ -1152,7 +1152,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Helvetica Neue; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 700; diff --git a/packages/theme/brand/altinn/typography/primary.css b/packages/theme/brand/altinn/typography/primary.css index e472c211cc..c5a852b617 100644 --- a/packages/theme/brand/altinn/typography/primary.css +++ b/packages/theme/brand/altinn/typography/primary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Helvetica Neue; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 700; diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css index 1d230622a3..59b79c6e8c 100644 --- a/packages/theme/brand/altinn/typography/secondary.css +++ b/packages/theme/brand/altinn/typography/secondary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index 414620b8aa..f5e1a27830 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -481,7 +481,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; @@ -1152,7 +1152,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/digdir/typography/primary.css b/packages/theme/brand/digdir/typography/primary.css index 9f96ca5761..9302bce9e9 100644 --- a/packages/theme/brand/digdir/typography/primary.css +++ b/packages/theme/brand/digdir/typography/primary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/digdir/typography/secondary.css b/packages/theme/brand/digdir/typography/secondary.css index 5498e8a583..53dce658fb 100644 --- a/packages/theme/brand/digdir/typography/secondary.css +++ b/packages/theme/brand/digdir/typography/secondary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index 57540ff8fc..7dd2a241f0 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -481,7 +481,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; @@ -1152,7 +1152,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/portal/typography/primary.css b/packages/theme/brand/portal/typography/primary.css index 9f96ca5761..9302bce9e9 100644 --- a/packages/theme/brand/portal/typography/primary.css +++ b/packages/theme/brand/portal/typography/primary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css index 1d230622a3..59b79c6e8c 100644 --- a/packages/theme/brand/portal/typography/secondary.css +++ b/packages/theme/brand/portal/typography/secondary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 88ceaae070..8d94015e3f 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -481,7 +481,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; @@ -1152,7 +1152,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/uutilsynet/typography/primary.css b/packages/theme/brand/uutilsynet/typography/primary.css index 9f96ca5761..9302bce9e9 100644 --- a/packages/theme/brand/uutilsynet/typography/primary.css +++ b/packages/theme/brand/uutilsynet/typography/primary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.primary { -:root, [data-ds-typography="primary"] { +:root, [data-typography="primary"] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css index 1d230622a3..59b79c6e8c 100644 --- a/packages/theme/brand/uutilsynet/typography/secondary.css +++ b/packages/theme/brand/uutilsynet/typography/secondary.css @@ -3,7 +3,7 @@ */ @layer ds.theme.typography.secondary { -[data-ds-typography="secondary"] { +[data-typography="secondary"] { --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; diff --git a/plugins/figma/src/ui/theme.css b/plugins/figma/src/ui/theme.css index 40907f7479..9523bfc0e9 100644 --- a/plugins/figma/src/ui/theme.css +++ b/plugins/figma/src/ui/theme.css @@ -630,7 +630,7 @@ */ @layer ds.theme.typography.secondary { - [data-ds-typography='secondary'] { + [data-typography='secondary'] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; @@ -1787,7 +1787,7 @@ @layer ds.theme.typography.primary { :root, - [data-ds-typography='primary'] { + [data-typography='primary'] { --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600;