Merge branch 'next' into docs/controlled-stories

.changeset/config.json

@@ -22,7 +22,6 @@
     "storefront",
     "@repo/components",
     "@designsystemet/storybook",
-    "figma-plugin",
-    "@digdir/create-tokens"
+    "figma-plugin"
   ]
 }

.changeset/orange-months-listen.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Button: Use font-weight `--ds-font-weight-medium`

.changeset/pre.json

@@ -7,7 +7,6 @@
     "storefront": "0.1.0",
     "theme": "0.1.0",
     "@digdir/designsystemet": "0.1.0-alpha.19",
-    "@digdir/create-tokens": "0.1.0-alpha.7",
     "@digdir/designsystemet-css": "0.11.0-alpha.9",
     "@digdir/designsystemet-react": "1.0.0-rc.13",
     "@digdir/designsystemet-theme": "1.0.0-rc.13",

.changeset/rotten-zoos-live.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+Removed `init` command. Use `tokens create` instead.

.changeset/twelve-onions-laugh.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions.

apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx

@@ -6,102 +6,73 @@ import { ResponsiveIframe, Image } from '@components';
 export const metadata = {
   title: 'Bruk designsystemet med eget tema',
   description:
-    'Lær hvordan du kan bruke designsystemet med dine egne profilfarger.',
+    'Lær hvordan du kan bruke designsystemet med dine egne profilfarger og preferanser.',
 };
 
 export default ({ children }) => (
   <MenuPageLayout
     content={children}
     data={{
       title: 'Bruk designsystemet med eget tema',
-      date: '7. juni 2024',
+      date: '15. oktober 2024',
       icon: <PaletteIcon />,
       color: 'blue',
     }}
   />
 );
 
-Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger? Det er flere måter å gjøre det på. Det første du må ta stilling til er om du vil bruke komponentene _med_ eller _uten_ kobling mellom Figma og kode.
+Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger og preferanser? Det er flere måter å gjøre det på. Det første du må ta stilling til er om du vil bruke komponentene **_med_** eller **_uten_** kobling mellom Figma og kode. 
 
-**Alternativ 1:** _Med_ kobling mellom Figma og kode \
-**Alternativ 2:** _Uten_ kobling mellom Figma og kode
+Du bør uansett passe på at det er samme Design Tokens som brukes i både Figma og kode, slik at designere og utviklere arbeider etter de samme reglene. Det sikrer at ting ser likt ut i Figma og i de faktiske løsningene. Om du gjør det manuelt eller med en kobling må du vurdere. 
 
-Hvilket alternativ du går for avhenger av dine behov og rammer.
+**Alternativ 1:** _Uten_ kobling mellom Figma og kode \
+**Alternativ 2:** _Med_ kobling mellom Figma og kode 
 
-Fordelen med å ha en kobling, gjennom tokens, er at de sørger for at designere og utviklere arbeider etter de samme reglene, og at ting ser likt ut i Figma og i de faktiske løsningene. En annen fordel er at du vil kunne generere et tema som vil fungere ut av boksen med designsystemet sine komponentbibliotek i kode.
-
-Ulempen er at det krever en del mer første gang du skal sette det opp, ettersom du er avhengig av pluginen [Tokens Studio](https://tokens.studio/) og en Github-bruker. Har du en Gihub-bruker skal det la seg gjennomføre på 3 minutter, som du kan se i videoen under. Vi håper vi kan gjøre dette enklere med en egen plugin etter hvert.
+Hvilket alternativ du går for avhenger av dine behov og rammer. Å sette opp en kobling krever en **pro-lisens** av pluginen [Tokens Studio](https://tokens.studio/). Vi håper vi kan gjøre dette enklere med pluginen vår etter hvert.
 
 Vi guider deg gjennom begge alternativene her.
 
-## Alternativ 1: Med kobling
 
-En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra json-filen og holder dem i sync via pluginen "Tokens studio". Du må ha en [Github-bruker](https://github.com) selv eller en Github-venn som kan hjelpe deg.
+## Alternativ 1: Uten direkte kobling
 
-I videoen under kan du se hele prosessen for å få satt opp designsystemet med eget tema.
+Dette alternativet krever **ikke** Token Studio. Med dette alternativet kjører dere samme kodesnutt fra temabyggeren i Designsystemets Figma plugin og i terminalen for å generere Design Tokens til bygg i kode. Det vil ikke være en direkte kobling, men variablene/tokens vil genereres med samme metode, og du vil dermed få like verdier i kode og Figma. 
 
-<ResponsiveIframe
-  src='/img/variabler-alt2.mp4'
-  title='Skjermopptak som viser hvordan du setter opp koblingen mellom Figma og Github og legger inn dine egne profilfarger. Tekslig beskrivelse av det som skjer i videoen ligger under.'
-  frameBorder='0'
-  allow='autoplay; fullscreen; picture-in-picture'
-  allowFullScreen
-  aspectRatio='16-9'
-></ResponsiveIframe>
 
-### Slik går du frem for å få det til:
+### Slik går du frem:
 
-1. Er du designer kan det være lurt å snakke med en utvikler, slik at dere har en felles forståelse av hvordan tokens kobler sammen Figma og kode. For å kunne legge til egne tokens i dagens oppsett må du lage en kopi av dette repoet: [design-tokens](https://github.com/designsystemet/design-tokens). Velg "Use this template" og "Create a new repository".
+1. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
+2. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
+3. Installer designsystemets [plugin for Figma](https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta).
+4. Kopier kodesnutten og lim den inn i pluginen du installerte i steg 2. Utvikler må kjøre samme kodesnutten i en terminal for å generere Design Tokens for kode. 
+5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
 
-2. Gå til [next.theme.designsystemet.no](https://next.theme.designsystemet.no). Legg inn dine farger og velg `Kopier` > `Light theme`. [Les mer om fargesystemet her](/grunnleggende/for-designere/fargesystem).
 
-3. Gå til repoet du lagde i steg 1. Lim inn koden du kopierte i steg 2 her: `DittRepo/design-tokens/primitives/colors/light/theme.json`.
+## Alternativ 2: Med kobling
 
-4. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit)
+En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra pluginen "Tokens Studio". **Du må en pro-lisens av pluginen "Tokens Studio" for å få til denne koblingen.** Du må også ha et sted å lagre filene, f.eks i et Git repo.
 
-5. Nå kan du sette opp [Tokens Studio](https://tokens.studio/) til å peke på repoet. Slik gjør du det:
 
-   - **[Installer](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) Figma Tokens** - En plugin for Figma som gjør at du kan bruke json-filen til å generere variabler for Figma. De fleste designere skal slippe å forholde seg til denne pluginen, men en person i organisasjonen bør ha ansvar for å holde tokens i sync med variablene som eksisterer i figma.
-   - **I Github:**
+### Slik går du frem for å få det til:
 
-     - gå til [GitHub Developer Settings](https://github.com/settings/tokens)
-     - trykk "Generate new token" (Classic).
-     - Skriv "Designsystemet" i "Note"
-     - Sett expiration et godt stykke frem i tid.
-     - Huk av "repo" i avkrysningsboksene.
-     - Trykk "Generate token"
-     - Du får nå en "Personal Access Token" (PAT).
-     - Kopier PAT-en (du kan bare se den én gang)
+1. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
 
-   - **I Figma Tokens**, under `Sync > GitHub`, fyll inn:
-     - Name: `DesignsystemetTokens`
-     - Personal Access Token: `*** din PAT ***` (som du fikk fra Github)
-     - Repository: `owner (brukernavn)/navn på repo`
-     - Branch: "main".
-     - File Path: `design-tokens`
-     - Trykk "Save"
+2. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
 
-6. Du vil nå se alle tokens-verdiene du genererte i temavelgeren. Du kan velge `Styles & variables` og `Create variables` for å få fargene dine tilgjengelige som variabler i Figma.
+3. Installer pluginen [Tokens Studio](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) for Figma. Tokens Studio sørger for kobling mellom Figma og kode, ved hjelp av Design Tokens (i json-filer). 
 
-7. Ferdig! 🎉 PS. Dersom du skal gjøre endringer på tokens i pluginen kan du pushe endringene til Github-repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst. Men...du må ha Pro-versjonen av Tokens Studio for å kunne gjøre dette, så det kan være like greit at endringer kun gjøres i koden, og at du henter ned eventuelle endringer til Figma ved å velge "Last-ned"-ikonet (Pull) nederst.
+4. Bruk ditt eksisterende Git repo, eller opprett et nytt. F.eks med [Github](https://github.com/new).
 
-## Alternativ 2: Uten kobling
+5. Gå tilbake til [Temabyggeren](https://next.theme.designsystemet.no) og klikk "Ta i bruk tema". Kopier kodesnutten og kjør den i en terminal i ditt Git repo. Sjekk inn og push filene. 
 
-Ved å _ikke_ ha en kobling kan du sette opp Figma-bibiloteket med dine farger uten at du må bruke Github. _Uten direkte kobling til tokens_, må du manuelt passe på at variablene som lages i Figma er de samme som brukes i kode.
+6. Nå setter du opp Figma-pluginen "Tokens Studio", som du installerte i steg 3. 
 
-<ResponsiveIframe
-  src='/img/variabler-alt1.mp4'
-  title='Skjermopptak som viser hvordan du kopierer filen fra Community, flytter den til en mappe, og endrer fargevariablene til de du har generert med temavelgeren.'
-  frameBorder='0'
-  allow='autoplay; fullscreen; picture-in-picture'
-  allowFullScreen
-  aspectRatio='16-9'
-></ResponsiveIframe>
+    - Følg Tokens Studio sin guide "[Sync your Design Tokens with code](https://docs.tokens.studio/token-storage-and-sync/sync-provider-overview)" for å sette opp ditt Git repo. 
+    - Husk å sette "Token storage location" til `design-tokens` (eller det du har valgt å kalle mappen din med Design Tokens).
 
-### Slik går du frem:
+7. Under "Tokens" i Tokens Studio skal du nå se alle fargene du generte med Temabyggeren i steg 1. 
+
+8. I Tokens Studio velg `Styles & variables` og `Export styles & variables to Figma` og følg stegene for å få fargene dine tilgjengelige som variabler i Figma. 
+
+9. Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
 
-1. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
-2. Installer designystemets [plugin for Figma](https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta).
-3. Gå til [next.theme.designsystemet.no](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
-4. Kopier JSON-koden og lim den inn i pluginen du installerte i steg 2.
-5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
+9. Ferdig! PS. Dersom du skal gjøre endringer på tokens i Tokens Studio kan du pushe endringene til repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst. 

apps/storefront/components/MdxContent/MdxContent.module.css

@@ -9,6 +9,10 @@
 
   & p {
     margin-bottom: var(--ds-spacing-4);
+
+    & > strong {
+      margin: 0 !important;
+    }
   }
 
   & > h1,

apps/storybook/.storybook/manager-head.html

@@ -2,10 +2,13 @@
   rel="shortcut icon"
   href="/favicon.ico"
 />
+
 <link
-  rel="stylesheet"
+  rel="preload stylesheet"
+  as="style"
   href="https://altinncdn.no/fonts/inter/inter.css"
 />
+
 <link
   rel="stylesheet"
   href="https://unpkg.com/@digdir/designsystemet-theme@next/brand/digdir.css"

apps/storybook/.storybook/preview-head.html

@@ -1,5 +1,6 @@
 <link
-  rel="stylesheet"
+  rel="preload stylesheet"
+  as="style"
   href="https://altinncdn.no/fonts/inter/inter.css"
 />
 

apps/storybook/chromatic.config.json

@@ -1,6 +1,7 @@
 {
   "onlyChanged": true,
   "projectId": "Project:66fe736b9d639fe6801bf130",
+  "buildScriptName": "build",
   "storybookBaseDir": "apps/storybook",
   "storybookBuildDir": "dist",
   "zip": true,

package.json

@@ -43,14 +43,14 @@
     "@types/node": "^22.1.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/expect": "^2.0.5",
     "chromatic": "^11.11.0",
     "copyfiles": "^2.4.1",
     "storybook-addon-pseudo-states": "^4.0.2",
     "typescript": "^5.5.4",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.3.6",
-    "vitest": "^2.0.5",
-    "@vitest/expect": "^2.0.5"
+    "vitest": "^2.0.5"
   },
   "engines": {
     "node": ">=18.12.0"

packages/cli/bin/designsystemet.ts

@@ -3,10 +3,8 @@ import { Argument, createCommand, program } from '@commander-js/extra-typings';
 import chalk from 'chalk';
 
 import { convertToHex } from '../src/colors/index.js';
-import { createTokensPackage } from '../src/init/createTokensPackage.js';
 import migrations from '../src/migrations/index.js';
 import { buildTokens } from '../src/tokens/build.js';
-import { typography } from '../src/tokens/build/formats/css';
 import { createTokens } from '../src/tokens/create.js';
 import { writeTokens } from '../src/tokens/write.js';
 
@@ -105,12 +103,4 @@ program
     }
   });
 
-program
-  .command('init')
-  .description('create an initial token structure for Designsystemet')
-  .addArgument(new Argument('<targetDir>', 'Target directory for the generated code'))
-  .action(async (targetDir) => {
-    await createTokensPackage(targetDir);
-  });
-
 await program.parseAsync(process.argv);

packages/css/button.css

@@ -28,6 +28,7 @@
   padding: var(--dsc-button-padding-block) var(--dsc-button-padding-inline);
   text-align: inherit;
   text-decoration: none;
+  font-weight: var(--ds-font-weight-medium);
 
   & svg,
   & img {
@@ -49,6 +50,7 @@
     --dsc-button-size: var(--ds-sizing-10);
 
     @composes ds-body-text--short-sm from './base/base.css';
+    font-weight: var(--ds-font-weight-medium);
   }
 
   &[data-size='lg'] {
@@ -57,6 +59,7 @@
     --dsc-button-size: var(--ds-sizing-14);
 
     @composes ds-body-text--short-lg from './base/base.css';
+    font-weight: var(--ds-font-weight-medium);
   }
 
   &[data-icon] {

packages/css/dropdown.css

@@ -47,6 +47,7 @@
     justify-content: start;
     padding: var(--dsc-dropdown-item-padding);
     width: 100%;
+    font-weight: var(--ds-font-weight-regular);
   }
 
   .ds-dropdown__list {

packages/css/modal.css

@@ -22,7 +22,9 @@
 
   &::backdrop {
     animation: fade-in 300ms ease-in-out;
-    background: var(--dsc-modal-backdrop-background);
+    /* we include a fallback color because ::backdrop didn't inherit
+       custom properties in Chrome until version 122 (mid-2024) */
+    background: var(--dsc-modal-backdrop-background, rgb(0 0 0 / 0.5));
   }
 
   &[open] {

yarn.lock

@@ -1690,18 +1690,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digdir/create-tokens@workspace:packages/create-tokens":
-  version: 0.0.0-use.local
-  resolution: "@digdir/create-tokens@workspace:packages/create-tokens"
-  dependencies:
-    "@commander-js/extra-typings": "npm:^12.1.0"
-    commander: "npm:^12.1.0"
-    tsx: "npm:^4.16.5"
-  bin:
-    create-tokens: index.js
-  languageName: unknown
-  linkType: soft
-
 "@digdir/designsystemet-css@workspace:^, @digdir/designsystemet-css@workspace:packages/css":
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-css@workspace:packages/css"