From cf65eda6f435096f8ffb368d027379091d7ff1f1 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 25 Jun 2024 10:46:55 +0200
Subject: [PATCH] Added `data-ds-typography` support

---
 .vscode/settings.json                         |  5 ++-
 apps/storybook/preview.tsx                    |  1 -
 apps/storybook/test.css                       |  5 ---
 packages/cli/src/tokens/build.ts              |  1 -
 packages/cli/src/tokens/configs.ts            |  4 +-
 .../cli/src/tokens/formats/css-classes.ts     |  5 +--
 packages/react/stories/bruk.mdx               | 40 ++++++++++++++++++-
 .../theme/brand/altinn/typography/primary.css |  5 +--
 .../brand/altinn/typography/secondary.css     |  5 +--
 packages/theme/brand/digdir.css               |  4 +-
 .../theme/brand/digdir/typography/primary.css |  5 +--
 .../brand/digdir/typography/secondary.css     |  5 +--
 .../theme/brand/portal/typography/primary.css |  5 +--
 .../brand/portal/typography/secondary.css     |  5 +--
 packages/theme/brand/uutilsynet.css           |  4 +-
 .../brand/uutilsynet/typography/primary.css   |  5 +--
 .../brand/uutilsynet/typography/secondary.css |  5 +--
 17 files changed, 67 insertions(+), 42 deletions(-)
 delete mode 100644 apps/storybook/test.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4bdd95cc33..77517dda0f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,10 @@
   "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cssvar.files": ["packages/theme/brand/digdir/color-mode/light.css"],
+  "cssvar.files": [
+    "packages/theme/brand/digdir/color-mode/light.css",
+    "packages/theme/brand/digdir/typography/primary.css"
+  ],
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
diff --git a/apps/storybook/preview.tsx b/apps/storybook/preview.tsx
index 2f919fe689..bd0eedb4c2 100644
--- a/apps/storybook/preview.tsx
+++ b/apps/storybook/preview.tsx
@@ -1,6 +1,5 @@
 import '../../packages/css/index.css';
 import '../../packages/theme/brand/digdir.css';
-import './test.css';
 
 import type { Preview } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
diff --git a/apps/storybook/test.css b/apps/storybook/test.css
deleted file mode 100644
index d942749f9a..0000000000
--- a/apps/storybook/test.css
+++ /dev/null
@@ -1,5 +0,0 @@
-:root {
-  /* --ds-spacing-base: 0.25rem;
-  --ds-sizing-base: 0.25rem;
-  --ds-border-radius-base: 0.25rem; */
-}
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
index 63ef88ffcf..e3da67afda 100644
--- a/packages/cli/src/tokens/build.ts
+++ b/packages/cli/src/tokens/build.ts
@@ -32,7 +32,6 @@ export async function run(options: Options): Promise<void> {
 
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo('')(theme.group));
-    // if (group === 'typography' && theme.name !== 'default') return false;
     if (group === 'size' && theme.name !== 'default') return false;
 
     return true;
diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts
index 773f1fcbca..65b15b02cb 100644
--- a/packages/cli/src/tokens/configs.ts
+++ b/packages/cli/src/tokens/configs.ts
@@ -197,7 +197,7 @@ export const typescriptTokens: GetConfig = ({ mode = 'unknown', outPath, theme }
 };
 
 export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
-  // const selector = `${typography === 'default' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
+  const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
 
   return {
     log: { verbosity: 'silent' },
@@ -206,7 +206,7 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
       css: {
         prefix,
         typography,
-        // selector,
+        selector,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'],
diff --git a/packages/cli/src/tokens/formats/css-classes.ts b/packages/cli/src/tokens/formats/css-classes.ts
index 8827eefecd..5f8b53ac2f 100644
--- a/packages/cli/src/tokens/formats/css-classes.ts
+++ b/packages/cli/src/tokens/formats/css-classes.ts
@@ -122,9 +122,8 @@ export const cssClassesTypography: Format = {
 
     const classes = formattedTokens.classes.join('\n');
     const variables = formattedTokens.variables.join('\n');
-    const variables_ = `:root {\n${variables}\n}\n`;
-    const content = selector ? `${selector} {\n${classes}\n}` : classes;
+    const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes;
 
-    return header + `@layer ds.base.typography.${typography} {\n${variables_}\n${content}\n}\n`;
+    return header + `@layer ds.base.typography.${typography} {\n${content}\n}\n`;
   },
 };
diff --git a/packages/react/stories/bruk.mdx b/packages/react/stories/bruk.mdx
index e28142f05c..42d34ad032 100644
--- a/packages/react/stories/bruk.mdx
+++ b/packages/react/stories/bruk.mdx
@@ -120,7 +120,7 @@ import { Accordion } from '@digdir/designsystemet-react';
 
 ## CSS
 
-For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css`.
+For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css` og `@digdir/designsystemet-theme`.
 
 ### Layers
 
@@ -137,3 +137,41 @@ Vi har sortert det slik at det som potensielt skal bli overstyrt av andre kompon
 Har du en css reset, så må du sortere denne først. Dette gjør du ved å først legge reseten din i en layer, og så sortere denne layeren først:
 
 <CodeSnippet language='css'>{`@layer my-reset, ds;`}</CodeSnippet>
+
+### Data attributter
+
+Vi tilbyr flere data attributter som kan brukes for å endre tema på komponentene.
+
+<br />
+#### `data-ds-color-mode`
+
+Dette attributtet kan brukes til å endre fargetema på komponentene. Mulige verdier er `light`, `dark` og `auto`.
+
+Dersom `auto` er valgt som verdi vil farge temaet endres basert på brukerens preferanser ved hjelp av [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+<br />
+#### `data-ds-typography`
+
+Dette attributtet brukes til å endre typografien på komponentene. Mulige verdier er `primary` og `secondary`.
+
+Et vanlig bruksområde for denne attributten er når du f,eks, ønsker en monospace font på tabeller.
+
+Dersom du skal bruke denne attributten må du huske å definere `font-family` til å bruke `--ds-font-family` CSS variabelen.
+
+<CodeSnippet language='html'>
+  {`
+  <style>
+    .mono-tekst {
+      font-family: var(--ds-font-family), monospaced;
+    }
+  </style>
+  <table
+    class='mono-tekst'
+    data-ds-typography='secondary'
+  >
+    …
+  </table>
+  `}
+</CodeSnippet>
+
+Hvilken typografi som er tilknyttet `primary` eller `secondary` må defineres i teamet, ved hjelp av [Token Studio](https://tokens.studio/) (med Designsystemet design-tokens) eller [Temabyggeren](https://theme.designsystemet.no/).
diff --git a/packages/theme/brand/altinn/typography/primary.css b/packages/theme/brand/altinn/typography/primary.css
index 396d77f35d..8c9d8ec9b7 100644
--- a/packages/theme/brand/altinn/typography/primary.css
+++ b/packages/theme/brand/altinn/typography/primary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.primary {
-:root {
+:root, [data-ds-typography="primary"] {
   --ds-font-family: Helvetica Neue;
   --ds-font-weight-medium: 500;
   --ds-font-weight-semibold: 700;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css
index 2add37538d..329393c435 100644
--- a/packages/theme/brand/altinn/typography/secondary.css
+++ b/packages/theme/brand/altinn/typography/secondary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.secondary {
-:root {
+[data-ds-typography="secondary"] {
   --ds-font-family: IBM Plex Mono;
   --ds-font-weight-medium: 400;
   --ds-font-weight-semibold: 700;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css
index 4d9f01b881..6a2787ddb1 100644
--- a/packages/theme/brand/digdir.css
+++ b/packages/theme/brand/digdir.css
@@ -1,5 +1,5 @@
 @import url('./digdir/color-mode/light.css');
 @import url('./digdir/typography/secondary.css');
 @import url('./digdir/semantic.css');
-@import url('./digdir/color-mode/dark.css');
-@import url('./digdir/typography/primary.css');
\ No newline at end of file
+@import url('./digdir/typography/primary.css');
+@import url('./digdir/color-mode/dark.css');
\ No newline at end of file
diff --git a/packages/theme/brand/digdir/typography/primary.css b/packages/theme/brand/digdir/typography/primary.css
index 9cfcb0f809..3c4cc5995d 100644
--- a/packages/theme/brand/digdir/typography/primary.css
+++ b/packages/theme/brand/digdir/typography/primary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.primary {
-:root {
+:root, [data-ds-typography="primary"] {
   --ds-font-family: Inter;
   --ds-font-weight-medium: 500;
   --ds-font-weight-semibold: 600;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/digdir/typography/secondary.css b/packages/theme/brand/digdir/typography/secondary.css
index a2df6a8353..30499b1d89 100644
--- a/packages/theme/brand/digdir/typography/secondary.css
+++ b/packages/theme/brand/digdir/typography/secondary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.secondary {
-:root {
+[data-ds-typography="secondary"] {
   --ds-font-family: IBM Plex Mono;
   --ds-font-weight-medium: 500;
   --ds-font-weight-semibold: 600;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/portal/typography/primary.css b/packages/theme/brand/portal/typography/primary.css
index 9cfcb0f809..3c4cc5995d 100644
--- a/packages/theme/brand/portal/typography/primary.css
+++ b/packages/theme/brand/portal/typography/primary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.primary {
-:root {
+:root, [data-ds-typography="primary"] {
   --ds-font-family: Inter;
   --ds-font-weight-medium: 500;
   --ds-font-weight-semibold: 600;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css
index 2add37538d..329393c435 100644
--- a/packages/theme/brand/portal/typography/secondary.css
+++ b/packages/theme/brand/portal/typography/secondary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.secondary {
-:root {
+[data-ds-typography="secondary"] {
   --ds-font-family: IBM Plex Mono;
   --ds-font-weight-medium: 400;
   --ds-font-weight-semibold: 700;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css
index ed3eb354c2..471f3df779 100644
--- a/packages/theme/brand/uutilsynet.css
+++ b/packages/theme/brand/uutilsynet.css
@@ -1,5 +1,5 @@
 @import url('./uutilsynet/color-mode/light.css');
 @import url('./uutilsynet/typography/secondary.css');
 @import url('./uutilsynet/semantic.css');
-@import url('./uutilsynet/color-mode/dark.css');
-@import url('./uutilsynet/typography/primary.css');
\ No newline at end of file
+@import url('./uutilsynet/typography/primary.css');
+@import url('./uutilsynet/color-mode/dark.css');
\ No newline at end of file
diff --git a/packages/theme/brand/uutilsynet/typography/primary.css b/packages/theme/brand/uutilsynet/typography/primary.css
index 9cfcb0f809..3c4cc5995d 100644
--- a/packages/theme/brand/uutilsynet/typography/primary.css
+++ b/packages/theme/brand/uutilsynet/typography/primary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.primary {
-:root {
+:root, [data-ds-typography="primary"] {
   --ds-font-family: Inter;
   --ds-font-weight-medium: 500;
   --ds-font-weight-semibold: 600;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}
diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css
index 2add37538d..329393c435 100644
--- a/packages/theme/brand/uutilsynet/typography/secondary.css
+++ b/packages/theme/brand/uutilsynet/typography/secondary.css
@@ -3,7 +3,7 @@
  */
 
 @layer ds.base.typography.secondary {
-:root {
+[data-ds-typography="secondary"] {
   --ds-font-family: IBM Plex Mono;
   --ds-font-weight-medium: 400;
   --ds-font-weight-semibold: 700;
@@ -31,8 +31,6 @@
   --ds-letter-spacing-7: 0.25%;
   --ds-letter-spacing-8: 0.5%;
   --ds-letter-spacing-9: 1.5%;
-}
-
 
   .ds-error_message--xs {
     font-size: var(--ds-font-size-3);
@@ -275,3 +273,4 @@
     line-height: 1.7;
   }
 }
+}