Added data-ds-typography support

digdir · Jun 25, 2024 · cf65eda · cf65eda
1 parent bbc79f9
commit cf65eda
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 42 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
+@import url('./digdir/typography/primary.css');
+@import url('./digdir/color-mode/dark.css');
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
+@import url('./uutilsynet/typography/primary.css');
+@import url('./uutilsynet/color-mode/dark.css');
diff --git 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
@@ -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;
   }
 }
+}