feat: rename data-ds-typography to data-typography (#2959)

resolves #2899
digdir · Jan 8, 2025 · dc6ab52 · dc6ab52
1 parent 19134ea
commit dc6ab52
Show file tree

Hide file tree

Showing 18 changed files with 31 additions and 25 deletions.
diff --git a/.changeset/olive-windows-share.md 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
@@ -35,7 +35,7 @@
 <style>
   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
-  [data-ds-typography='secondary'] {
+  [data-typography='secondary'] {
     font-family: var(--ds-font-family), monospace;
   }
 </style>
diff --git a/apps/storybook/stories/showcase.stories.tsx b/apps/storybook/stories/showcase.stories.tsx
@@ -60,7 +60,7 @@ export const ShowcaseStory: StoryFn = () => {
         <Fieldset>
           <Fieldset.Legend>
             Typografi
-            <code data-size='xs'>(data-ds-typography)</code>
+            <code data-size='xs'>(data-typography)</code>
           </Fieldset.Legend>
           <ToggleGroup value={typographyMode} onChange={setTypographyMode}>
             {typography.map((typographyMode) => (
@@ -74,7 +74,7 @@ export const ShowcaseStory: StoryFn = () => {
       <Showcase
         data-size={size}
         data-color-scheme={colorMode}
-        data-ds-typography={typographyMode}
+        data-typography={typographyMode}
       />
     </div>
   );

diff --git 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
@@ -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).
 
 <br />
-#### `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
 <CodeSnippet language='html'>
   {`
   <style>
-  [data-ds-typography='secondary'] {
+  [data-typography='secondary'] {
     font-family: var(--ds-font-family), monospace;
   }
   </style>
   <table
-    data-ds-typography='secondary'
+    data-typography='secondary'
   >
     …
   </table>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;