Merge branch 'main' into fix/upgrade-u-combobox-and-u-datalist

oddvernes · web-flow · commit 9740077cf21b · 2026-04-28T10:02:54.000+02:00
diff --git a/.changeset/warm-streets-clap.md b/.changeset/warm-streets-clap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/apps/www/app/_components/mdx-components/mdx-components.tsx b/apps/www/app/_components/mdx-components/mdx-components.tsx
@@ -168,7 +168,7 @@ export const MDXComponents = ({
   );
 };
 
-const Story = ({ story, ...rest }: LiveComponentProps) => {
+const Story = ({ story, language = 'html', ...rest }: LiveComponentProps) => {
   const { stories } = useLoaderData();
   if (!stories) return null;
 
@@ -179,6 +179,7 @@ const Story = ({ story, ...rest }: LiveComponentProps) => {
   return (
     <LiveComponent
       story={`${foundStory.code}\n\nrender(<${foundStory.name} />)`}
+      language={language}
       {...rest}
     />
   );
diff --git a/apps/www/app/content/components/dropdown/en/code.mdx b/apps/www/app/content/components/dropdown/en/code.mdx
@@ -1,4 +1,4 @@
-<Story story="Preview" language="html"/>
+<Story story="Preview" />
 
 ## Usage
 
@@ -57,15 +57,15 @@ When using `@digdir/designsystemet-react` we extend `@types/react-dom` to accept
 
 You must then add `popovertarget={id}` to `Dropdown`, and `id` to `Dropdown`.
 
-<Story story="WithoutTrigger" />
+<Story story="WithoutTrigger" language="react"/>
 
 ### Controlled
 
 If you submit `open`, then you use `Dropdown` controlled. You can use `onClose` to get notified when `Dropdown` wants to close.
 
 Note that we do not use `onClick` on the trigger, the dropdown handles this internally and sends to `onOpen` and `onClose`.
 
-<Story story="ControlledEn" />
+<Story story="ControlledEn" language="react"/>
 
 ### Props
 
diff --git a/apps/www/app/content/components/dropdown/no/code.mdx b/apps/www/app/content/components/dropdown/no/code.mdx
@@ -1,4 +1,4 @@
-<Story story="Preview" language="html" />
+<Story story="Preview" />
 
 ## Bruk
 
diff --git a/apps/www/app/content/components/dropdown/no/overview.mdx b/apps/www/app/content/components/dropdown/no/overview.mdx
@@ -2,7 +2,7 @@
 search_terms: nedtrekksmeny, rullegardinmeny, valgmeny, valmeny, veljar, popup, select, menu, listbox, popup, dropdownmenu, options
 ---
 
-<Story story="Preview" language="html" />
+<Story story="Preview" />
 
 **Bruk dropdown når**
 - du vil tilby flere alternativer uten at de tar mye plass i grensesnittet
diff --git a/apps/www/app/content/components/table/no/code.mdx b/apps/www/app/content/components/table/no/code.mdx
@@ -82,7 +82,7 @@ Merk at vi legger på `type="button"` for å unngå at knappen oppfører seg som
 ### Klikkbar rad
 Du kan legge på `data-clickdelegatefor` på en `<tr>` for å delegere klikk-hendelser til et element i raden, for eksempel en `<a>`-tag.
 
-<Story story="HTMLClickableRows" language="html" />
+<Story story="HTMLClickableRows" />
 
 
 ## CSS variabler og data-attributter
diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts
@@ -7,10 +7,11 @@ import { convertToHex } from '../src/colors/index.js';
 import type { CssColor } from '../src/colors/types.js';
 import migrations from '../src/migrations/index.js';
 import { buildTokens } from '../src/tokens/build.js';
-import { createTokenFiles } from '../src/tokens/create/files.js';
-import { cliOptions, createTokens } from '../src/tokens/create.js';
+import { createSystemTokenFiles, tokenSetsToFiles } from '../src/tokens/create/files.js';
+import { cliOptions, createTokens, tokenSetDimensions } from '../src/tokens/create.js';
 import { generateConfigFromTokens } from '../src/tokens/generate-config.js';
 import type { OutputFile, Theme } from '../src/tokens/types.js';
+import { colorNamesByCategory } from '../src/tokens/utils.js';
 import { dsfs } from '../src/utils/filesystem.js';
 import { parseCreateConfig, readConfigFile } from './config.js';
 
@@ -124,21 +125,29 @@ function makeTokenCommands() {
 
       const outDir = dsfs.outDir;
 
-      if (config.clean) {
-        await dsfs.cleanDir(outDir);
+      const files: OutputFile[] = [];
+
+      for (const [name, themeConfig] of Object.entries(config.themes)) {
+        const { tokenSets } = await createTokens({ name, ...themeConfig } as Theme);
+        files.push(...tokenSetsToFiles(tokenSets));
       }
 
-      let files: OutputFile[] = [];
-      if (config.themes) {
-        for (const [name, themeWithoutName] of Object.entries(config.themes)) {
-          // Casting as missing properties should be validated by `getDefaultOrExplicitOption` to default values
-          const theme = { name, ...themeWithoutName } as Theme;
+      // Pick colors from first theme since we have a constraint they should be the same across themes.
+      const colors = config.themes?.[themeNames[0]]?.colors ?? { main: {}, support: {} };
 
-          const { tokenSets } = await createTokens(theme);
-          files = files.concat(await createTokenFiles({ outDir, theme, tokenSets, themeNames }));
-        }
+      files.push(
+        ...(await createSystemTokenFiles({
+          tokenSetDimensions,
+          themeNames,
+          colors: colorNamesByCategory(colors),
+        })),
+      );
+
+      if (config.clean) {
+        await dsfs.cleanDir(outDir);
       }
 
+      await dsfs.mkdir(outDir);
       await dsfs.writeFiles(files, outDir);
 
       console.log(`\n✅ Finished creating tokens in ${pc.green(outDir)} for themes: ${pc.blue(themeNames.join(', '))}`);
diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts
@@ -2,10 +2,11 @@ import pc from 'picocolors';
 import type { TransformedToken } from 'style-dictionary/types';
 import config from './../../../../designsystemet.config.json' with { type: 'json' };
 import { generate$Themes } from '../tokens/create/generators/$themes.js';
-import { createTokens } from '../tokens/create.js';
+import { createTokens, tokenSetDimensions } from '../tokens/create.js';
 import { buildOptions, processPlatform } from '../tokens/process/platform.js';
 import { processThemeObject } from '../tokens/process/utils/getMultidimensionalThemes.js';
-import type { SizeModes, Theme } from '../tokens/types.js';
+import type { Theme } from '../tokens/types.js';
+import { colorNamesByCategory } from '../tokens/utils.js';
 import { dsfs } from '../utils/filesystem.js';
 
 const OUTDIR = '../../internal/components/src/tokens/design-tokens';
@@ -26,9 +27,10 @@ type PreviewToken = { variable: string; value: string };
 export const formatTheme = async (themeConfig: Theme) => {
   const { tokenSets } = await createTokens(themeConfig);
 
-  const sizeModes: SizeModes[] = ['small', 'medium', 'large'];
+  const themeNames = [themeConfig.name];
+  const colors = colorNamesByCategory(themeConfig.colors);
+  const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors);
 
-  const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors, sizeModes);
   const processed$themes = $themes.map(processThemeObject);
 
   // We run this to populate the `buildOptions.buildTokenFormats` with transformed tokens
diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts
@@ -1,4 +1,3 @@
-import type { ColorScheme } from '../colors/types.js';
 import { generateColorScheme } from './create/generators/primitives/color-scheme.js';
 import { generateGlobals } from './create/generators/primitives/globals.js';
 import { generateSize, generateSizeGlobal } from './create/generators/primitives/size.js';
@@ -7,7 +6,12 @@ import { generateSemanticColors } from './create/generators/semantic/color.js';
 import { generateColorModes } from './create/generators/semantic/color-modes.js';
 import { generateSemanticStyle } from './create/generators/semantic/style.js';
 import { generateTheme } from './create/generators/themes/theme.js';
-import type { SizeModes, Theme, TokenSet, TokenSets } from './types.js';
+import type { Theme, TokenSet, TokenSetDimensions, TokenSets } from './types.js';
+
+export const tokenSetDimensions: TokenSetDimensions = {
+  colorSchemes: ['dark', 'light'],
+  sizeModes: ['small', 'medium', 'large'],
+};
 
 export const cliOptions = {
   outDir: 'out-dir',
@@ -28,8 +32,7 @@ export const cliOptions = {
 
 export const createTokens = async (theme: Theme) => {
   const { colors, typography, name, borderRadius, overrides } = theme;
-  const colorSchemes: ColorScheme[] = ['light', 'dark'];
-  const sizeModes: SizeModes[] = ['small', 'medium', 'large'];
+  const { colorSchemes, sizeModes } = tokenSetDimensions;
 
   const tokenSets: TokenSets = new Map([
     ['primitives/globals', generateGlobals()],
diff --git a/packages/cli/src/tokens/create/files.ts b/packages/cli/src/tokens/create/files.ts
@@ -1,49 +1,46 @@
-import { dsfs } from '../../utils/filesystem.js';
-import type { OutputFile, SizeModes, Theme, TokenSets } from '../types.js';
+import type { ColorNamesByCategory, OutputFile, TokenSetDimensions, TokenSets } from '../types.js';
 import { generate$Designsystemet } from './generators/$designsystemet.js';
 import { generate$Metadata } from './generators/$metadata.js';
 import { generate$Themes } from './generators/$themes.js';
 
 export const stringify = (data: unknown) => JSON.stringify(data, null, 2);
 
 type CreateTokenFilesOptions = {
-  outDir: string;
-  theme: Theme;
-  tokenSets: TokenSets;
+  tokenSetDimensions: TokenSetDimensions;
+  colors: ColorNamesByCategory;
   themeNames: string[];
 };
 
-export const createTokenFiles = async (options: CreateTokenFilesOptions) => {
-  const {
-    outDir,
-    tokenSets,
-    theme: { colors },
-    themeNames,
-  } = options;
+/**
+ * Creates system token files (`$themes.json`, `$metadata.json`, `$designsystemet.jsonc`) based on the provided token set dimensions and theme names.
+ *
+ * `$themes.json` and `$metadata.json` are essential for Token Studio and Style Dictionary to correctly interpret and manage the design tokens.
+ */
+export const createSystemTokenFiles = async (options: CreateTokenFilesOptions) => {
+  const { colors, themeNames, tokenSetDimensions } = options;
 
+  const files: OutputFile[] = [];
   const $themesPath = '$themes.json';
   const $metadataPath = '$metadata.json';
   const $designsystemetPath = '$designsystemet.jsonc';
-  // let themeObjects: ThemeObject[] = [];
-  const sizeModes: SizeModes[] = ['small', 'medium', 'large'];
-
-  await dsfs.mkdir(outDir);
 
-  // Create metadata and themes json for Token Studio and build script
-  const $themes = await generate$Themes(['dark', 'light'], themeNames, colors, sizeModes);
-  const $metadata = generate$Metadata(['dark', 'light'], themeNames, colors, sizeModes);
+  const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors);
+  const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colors);
   const $designsystemet = generate$Designsystemet();
 
-  const files: OutputFile[] = [];
-
   files.push({ destination: $themesPath, output: stringify($themes) });
   files.push({ destination: $metadataPath, output: stringify($metadata) });
   files.push({ destination: $designsystemetPath, output: stringify($designsystemet) });
 
+  return files;
+};
+
+export const tokenSetsToFiles = (tokenSets: TokenSets): OutputFile[] => {
+  const files: OutputFile[] = [];
+
   for (const [set, tokens] of tokenSets) {
     const filePath = `${set}.json`;
     files.push({ destination: filePath, output: stringify(tokens) });
   }
-
   return files;
 };
diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts
@@ -1,29 +1,35 @@
-import type { ColorScheme } from '../../../colors/types.js';
-import type { Colors, SizeModes } from '../../types.js';
+import type { ColorNamesByCategory, TokenSetDimensions } from '../../types.js';
 
 type Metadata = {
   tokenSetOrder: string[];
 };
 
+/**
+ * Generates metadata for the given token set dimensions, theme names, and colors.
+ *
+ * This is used to order tokens in Token Studio
+ */
 export function generate$Metadata(
-  schemes: ColorScheme[],
-  themes: string[],
-  colors: Colors,
-  sizeModes: SizeModes[],
+  tokenSetDimensions: TokenSetDimensions,
+  themeNames: string[],
+  colors: ColorNamesByCategory,
 ): Metadata {
+  const { colorSchemes, sizeModes } = tokenSetDimensions;
   return {
     tokenSetOrder: [
       'primitives/globals',
       ...sizeModes.map((size) => `primitives/modes/size/${size}`),
       'primitives/modes/size/global',
       ...sizeModes.map((size) => `primitives/modes/typography/size/${size}`),
-      ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
-      ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
-      ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
-      ...themes.map((theme) => `themes/${theme}`),
+      ...themeNames.map((theme) => `primitives/modes/typography/primary/${theme}`),
+      ...themeNames.map((theme) => `primitives/modes/typography/secondary/${theme}`),
+      ...colorSchemes.flatMap((scheme) => [
+        ...themeNames.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`),
+      ]),
+      ...themeNames.map((theme) => `themes/${theme}`),
       'semantic/color',
-      ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
-      ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
+      ...colors.main.map((color) => `semantic/modes/main-color/${color}`),
+      ...colors.support.map((color) => `semantic/modes/support-color/${color}`),
       'semantic/style',
     ],
   };
diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts
@@ -1,7 +1,7 @@
 import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types';
 
 import type { ColorScheme } from '../../../colors/types.js';
-import type { Colors, SizeModes } from '../../types.js';
+import type { ColorNamesByCategory, SizeModes, TokenSetDimensions } from '../../types.js';
 
 const capitalize = (word: string) => word.charAt(0).toUpperCase() + word.slice(1);
 
@@ -36,19 +36,19 @@ type ThemeObject_ = ThemeObject & {
 
 */
 export async function generate$Themes(
-  colorSchemes: ColorSchemes,
-  themes: string[],
-  colors: Colors,
-  sizeModes: SizeModes[],
+  tokenSetDimensions: TokenSetDimensions,
+  themeNames: string[],
+  colors: ColorNamesByCategory,
 ): Promise<ThemeObject_[]> {
+  const { colorSchemes, sizeModes } = tokenSetDimensions;
   return [
     ...generateSizeGroup(sizeModes),
-    ...(await generateThemesGroup(themes)),
-    ...generateTypographyGroup(themes),
-    ...generateColorSchemesGroup(colorSchemes, themes),
+    ...(await generateThemesGroup(themeNames)),
+    ...generateTypographyGroup(themeNames),
+    ...generateColorSchemesGroup(colorSchemes, themeNames),
     generateSemanticGroup(),
-    ...(await generateColorGroup('main', colors)),
-    ...(await generateColorGroup('support', colors)),
+    ...(await generateColorGroup('main', colors.main)),
+    ...(await generateColorGroup('support', colors.support)),
   ];
 }
 
@@ -164,10 +164,13 @@ function generateSemanticGroup(): ThemeObject_ {
   };
 }
 
-async function generateColorGroup(group: 'main' | 'support', colors: Colors): Promise<ThemeObject_[]> {
+async function generateColorGroup(
+  group: 'main' | 'support',
+  colors: ColorNamesByCategory['main'] | ColorNamesByCategory['support'],
+): Promise<ThemeObject_[]> {
   return Promise.all(
-    Object.entries(colors[group]).map(
-      async ([color]): Promise<ThemeObject_> => ({
+    colors.map(
+      async (color): Promise<ThemeObject_> => ({
         id: await createHash(`${group}-${color}`),
         name: color,
         selectedTokenSets: {
diff --git a/packages/cli/src/tokens/format.ts b/packages/cli/src/tokens/format.ts
@@ -1,10 +1,11 @@
 import * as R from 'ramda';
 import { generate$Themes } from './create/generators/$themes.js';
-import { createTokens } from './create.js';
+import { createTokens, tokenSetDimensions } from './create.js';
 import { createThemeCSSFiles } from './process/output/theme.js';
 import { type FormatOptions, processPlatform } from './process/platform.js';
 import { processThemeObject } from './process/utils/getMultidimensionalThemes.js';
-import type { SizeModes, Theme } from './types.js';
+import type { Theme } from './types.js';
+import { colorNamesByCategory } from './utils.js';
 
 export const formatTokens = async (options: Omit<FormatOptions, 'type' | 'buildTokenFormats'>) => {
   const processedBuilds = await processPlatform({
@@ -18,9 +19,11 @@ export const formatTokens = async (options: Omit<FormatOptions, 'type' | 'buildT
 
 export const formatTheme = async (themeConfig: Theme) => {
   const { tokenSets } = await createTokens(themeConfig);
-  const sizeModes: SizeModes[] = ['small', 'medium', 'large'];
 
-  const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors, sizeModes);
+  const themeNames = [themeConfig.name];
+  const colors = colorNamesByCategory(themeConfig.colors);
+  const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors);
+
   const processed$themes = $themes.map(processThemeObject);
 
   const processedBuilds = await formatTokens({
diff --git a/packages/cli/src/tokens/types.ts b/packages/cli/src/tokens/types.ts
diff --git a/packages/cli/src/tokens/utils.ts b/packages/cli/src/tokens/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<Story story="Preview" language="html" />`
	`1`	`+<Story story="Preview" />`
`2`	`2`
`3`	`3`	`## Bruk`
`4`	`4`