- Støttefarger
+ Support
{colors.support.length < 40 && (
-
- npx @digdir/designsystemet@next tokens build
-
+ {buildSnippet}
diff --git a/apps/theme/utils/generateColorVars.ts b/apps/theme/utils/generateColorVars.ts
new file mode 100644
index 0000000000..5f65493995
--- /dev/null
+++ b/apps/theme/utils/generateColorVars.ts
@@ -0,0 +1,27 @@
+import type { ColorScheme, ThemeInfo } from '@digdir/designsystemet/color';
+
+export const generateColorVars = (
+ colors: ThemeInfo,
+ colorScheme: ColorScheme,
+) => {
+ const style = {} as Record
;
+
+ for (const color of colors[colorScheme]) {
+ style[`--ds-color-${color.name}`] = color.hex;
+ }
+
+ return style;
+};
+
+export const generateNeutralColorVars = (
+ colors: ThemeInfo,
+ colorScheme: ColorScheme,
+) => {
+ const style = {} as Record;
+
+ for (const color of colors[colorScheme]) {
+ style[`--ds-color-neutral-${color.name}`] = color.hex;
+ }
+
+ return style;
+};
diff --git a/apps/theme/utils/is-production.ts b/apps/theme/utils/is-production.ts
new file mode 100644
index 0000000000..df755f6780
--- /dev/null
+++ b/apps/theme/utils/is-production.ts
@@ -0,0 +1,3 @@
+export function isProduction() {
+ return process.env.DESIGNSYSTEMET_ENV === 'production';
+}
diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json
index 4fb563b647..d8f1f1d4c4 100644
--- a/design-tokens/$themes.json
+++ b/design-tokens/$themes.json
@@ -993,22 +993,22 @@
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:2",
"$figmaVariableReferences": {
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
"altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
"altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
"altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
"uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
"uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
"uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
"portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
"portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
},
"group": "Typography"
},
@@ -1025,22 +1025,22 @@
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:3",
"$figmaVariableReferences": {
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
"altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
"altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
"altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
"uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
"uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
"uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
"portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
"portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
},
"group": "Typography"
},
@@ -1134,7 +1134,6 @@
"color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
"color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
"color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
"font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
"font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
"font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1145,7 +1144,8 @@
"border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
"border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
"border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
},
"group": "Theme"
},
@@ -1239,7 +1239,6 @@
"color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
"color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
"color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
"font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
"font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
"font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1250,7 +1249,8 @@
"border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
"border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
"border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
},
"group": "Theme"
},
@@ -1344,7 +1344,6 @@
"color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
"color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
"color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
"font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
"font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
"font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1355,7 +1354,8 @@
"border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
"border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
"border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
},
"group": "Theme"
},
@@ -1788,7 +1788,6 @@
"color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
"color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
"color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
"font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
"font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
"font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1799,7 +1798,8 @@
"border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
"border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
"border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
},
"group": "Theme"
},
@@ -2001,7 +2001,6 @@
"color.warning.base-contrast-default": "3d38f3079fb9fd155567ec24c7fde25f68c40f42",
"color.focus.inner": "1ec8f76f658042889b1eb4b08f3ce9bca1b7e603",
"color.focus.outer": "09e04f0bfff8fdc309db58a0131b5d07dae6b4f8",
- "disabled.opacity": "d94940d06b80e1cb6184ae12c5793a1ef95420ba",
"border-width.default": "ac5b6181d17de3d25249c91674dce4fef8711216",
"border-width.highlight": "dd40bb1cb729138762c0bfa29d26adb58b726354",
"border-radius.sm": "7b2af5d22e01253d20184bf5c3f872a18d41a315",
@@ -2029,7 +2028,8 @@
"size.18": "803716e7a1ab4f0ed08180713a5ddc53f5a80a13",
"size.22": "f0e62cce260051ffae97ed9709e77fb22e2dac2e",
"size.26": "a42e9a42d13ce2453de8005b58147b9a9b9b5dde",
- "size.30": "600d545445deae2077866ba3953a64000a123606"
+ "size.30": "600d545445deae2077866ba3953a64000a123606",
+ "opacity.disabled": "d94940d06b80e1cb6184ae12c5793a1ef95420ba"
},
"group": "Semantic"
},
diff --git a/design-tokens/primitives/globals.json b/design-tokens/primitives/globals.json
index 5b6a703c76..5a32873fef 100644
--- a/design-tokens/primitives/globals.json
+++ b/design-tokens/primitives/globals.json
@@ -140,4 +140,4 @@
"$value": "30%"
}
}
-}
+}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/primary/altinn.json b/design-tokens/primitives/modes/typography/primary/altinn.json
index 9481c17ffe..1f27ba67c7 100644
--- a/design-tokens/primitives/modes/typography/primary/altinn.json
+++ b/design-tokens/primitives/modes/typography/primary/altinn.json
@@ -1,20 +1,22 @@
{
"altinn": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "Inter"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Medium"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Semi bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "Semi bold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/primary/digdir.json b/design-tokens/primitives/modes/typography/primary/digdir.json
index 5b25de220a..43a8cad7cc 100644
--- a/design-tokens/primitives/modes/typography/primary/digdir.json
+++ b/design-tokens/primitives/modes/typography/primary/digdir.json
@@ -1,20 +1,22 @@
{
"digdir": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "Inter"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Medium"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Semi bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "Semi bold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/primary/portal.json b/design-tokens/primitives/modes/typography/primary/portal.json
index 580cbb34cf..7c9f854e4c 100644
--- a/design-tokens/primitives/modes/typography/primary/portal.json
+++ b/design-tokens/primitives/modes/typography/primary/portal.json
@@ -1,20 +1,22 @@
{
"portal": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "Inter"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Medium"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Semi bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "Semi bold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/primary/uutilsynet.json b/design-tokens/primitives/modes/typography/primary/uutilsynet.json
index a1145cd099..da3f416b8f 100644
--- a/design-tokens/primitives/modes/typography/primary/uutilsynet.json
+++ b/design-tokens/primitives/modes/typography/primary/uutilsynet.json
@@ -1,20 +1,22 @@
{
"uutilsynet": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "Inter"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Medium"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Semi bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "Semi bold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/secondary/altinn.json b/design-tokens/primitives/modes/typography/secondary/altinn.json
index 0c694789d0..9fa77a5edc 100644
--- a/design-tokens/primitives/modes/typography/secondary/altinn.json
+++ b/design-tokens/primitives/modes/typography/secondary/altinn.json
@@ -1,20 +1,22 @@
{
"altinn": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "IBM Plex Mono"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Regular"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "SemiBold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/secondary/digdir.json b/design-tokens/primitives/modes/typography/secondary/digdir.json
index d9f856cb72..352be319ec 100644
--- a/design-tokens/primitives/modes/typography/secondary/digdir.json
+++ b/design-tokens/primitives/modes/typography/secondary/digdir.json
@@ -1,20 +1,22 @@
{
"digdir": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "IBM Plex Mono"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Medium"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "SemiBold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "SemiBold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/secondary/portal.json b/design-tokens/primitives/modes/typography/secondary/portal.json
index 7082e112d9..d57f7f87be 100644
--- a/design-tokens/primitives/modes/typography/secondary/portal.json
+++ b/design-tokens/primitives/modes/typography/secondary/portal.json
@@ -1,20 +1,22 @@
{
"portal": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "IBM Plex Mono"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Regular"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "SemiBold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/secondary/uutilsynet.json b/design-tokens/primitives/modes/typography/secondary/uutilsynet.json
index 0c341336f7..dabe05a8db 100644
--- a/design-tokens/primitives/modes/typography/secondary/uutilsynet.json
+++ b/design-tokens/primitives/modes/typography/secondary/uutilsynet.json
@@ -1,20 +1,22 @@
{
"uutilsynet": {
- "main": {
+ "font-family": {
"$type": "fontFamilies",
"$value": "IBM Plex Mono"
},
- "bold": {
- "$type": "fontWeights",
- "$value": "Regular"
- },
- "extra-bold": {
- "$type": "fontWeights",
- "$value": "Bold"
- },
- "regular": {
- "$type": "fontWeights",
- "$value": "Regular"
+ "font-weight": {
+ "medium": {
+ "$type": "fontWeights",
+ "$value": "Medium"
+ },
+ "semibold": {
+ "$type": "fontWeights",
+ "$value": "SemiBold"
+ },
+ "regular": {
+ "$type": "fontWeights",
+ "$value": "Regular"
+ }
}
}
}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/large.json
index 70306094b1..9d7ed9b3e6 100644
--- a/design-tokens/primitives/modes/typography/size/large.json
+++ b/design-tokens/primitives/modes/typography/size/large.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/size/medium.json b/design-tokens/primitives/modes/typography/size/medium.json
index c7c3488164..f861fb854c 100644
--- a/design-tokens/primitives/modes/typography/size/medium.json
+++ b/design-tokens/primitives/modes/typography/size/medium.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/design-tokens/primitives/modes/typography/size/small.json b/design-tokens/primitives/modes/typography/size/small.json
index f33a58cc8b..99e67f561f 100644
--- a/design-tokens/primitives/modes/typography/size/small.json
+++ b/design-tokens/primitives/modes/typography/size/small.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/design-tokens/semantic/color.json b/design-tokens/semantic/color.json
index 250b0d3659..bab4bd52a3 100644
--- a/design-tokens/semantic/color.json
+++ b/design-tokens/semantic/color.json
@@ -604,5 +604,13 @@
"$value": "{color.neutral.text-default}"
}
}
+ },
+ "link": {
+ "color": {
+ "visited": {
+ "$type": "color",
+ "$value": "{global.purple.12}"
+ }
+ }
}
}
\ No newline at end of file
diff --git a/design-tokens/semantic/style.json b/design-tokens/semantic/style.json
index d5b3442334..8f999a8363 100644
--- a/design-tokens/semantic/style.json
+++ b/design-tokens/semantic/style.json
@@ -4,7 +4,7 @@
"2xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.10}",
@@ -14,7 +14,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.9}",
@@ -24,7 +24,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.8}",
@@ -34,7 +34,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.7}",
@@ -44,7 +44,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.6}",
@@ -54,7 +54,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.5}",
@@ -64,7 +64,7 @@
"2xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.4}",
@@ -76,7 +76,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.6}",
@@ -86,7 +86,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.5}",
@@ -96,7 +96,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.4}",
@@ -106,7 +106,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.3}",
@@ -116,7 +116,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.2}",
@@ -127,7 +127,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.6}",
@@ -137,7 +137,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.5}",
@@ -147,7 +147,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.4}",
@@ -157,7 +157,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.3}",
@@ -167,7 +167,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.2}",
@@ -179,7 +179,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.6}",
@@ -189,7 +189,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.5}",
@@ -199,7 +199,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.4}",
@@ -209,7 +209,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.3}",
@@ -219,7 +219,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.2}",
@@ -229,8 +229,8 @@
}
}
},
- "disabled": {
- "opacity": {
+ "opacity": {
+ "disabled": {
"$type": "opacity",
"$value": "{opacity.30}"
}
@@ -375,4 +375,4 @@
"$value": "{_size.30}"
}
}
-}
+}
\ No newline at end of file
diff --git a/design-tokens/themes/altinn.json b/design-tokens/themes/altinn.json
index 57195b5415..cd52739d26 100644
--- a/design-tokens/themes/altinn.json
+++ b/design-tokens/themes/altinn.json
@@ -331,24 +331,22 @@
}
}
},
- "font": {
- "family": {
- "$type": "fontFamilies",
- "$value": "{altinn.main}"
- }
+ "font-family": {
+ "$type": "fontFamilies",
+ "$value": "{altinn.font-family}"
},
"font-weight": {
"medium": {
"$type": "fontWeights",
- "$value": "{altinn.bold}"
+ "$value": "{altinn.font-weight.medium}"
},
"semibold": {
"$type": "fontWeights",
- "$value": "{altinn.extra-bold}"
+ "$value": "{altinn.font-weight.semibold}"
},
"regular": {
"$type": "fontWeights",
- "$value": "{altinn.regular}"
+ "$value": "{altinn.font-weight.regular}"
}
},
"border-radius": {
diff --git a/design-tokens/themes/digdir.json b/design-tokens/themes/digdir.json
index 1242297839..9cb660d016 100644
--- a/design-tokens/themes/digdir.json
+++ b/design-tokens/themes/digdir.json
@@ -331,24 +331,22 @@
}
}
},
- "font": {
- "family": {
- "$type": "fontFamilies",
- "$value": "{digdir.main}"
- }
+ "font-family": {
+ "$type": "fontFamilies",
+ "$value": "{digdir.font-family}"
},
"font-weight": {
"medium": {
"$type": "fontWeights",
- "$value": "{digdir.bold}"
+ "$value": "{digdir.font-weight.medium}"
},
"semibold": {
"$type": "fontWeights",
- "$value": "{digdir.extra-bold}"
+ "$value": "{digdir.font-weight.semibold}"
},
"regular": {
"$type": "fontWeights",
- "$value": "{digdir.regular}"
+ "$value": "{digdir.font-weight.regular}"
}
},
"border-radius": {
diff --git a/design-tokens/themes/portal.json b/design-tokens/themes/portal.json
index 1ad9bb823e..29520bf143 100644
--- a/design-tokens/themes/portal.json
+++ b/design-tokens/themes/portal.json
@@ -331,24 +331,22 @@
}
}
},
- "font": {
- "family": {
- "$type": "fontFamilies",
- "$value": "{portal.main}"
- }
+ "font-family": {
+ "$type": "fontFamilies",
+ "$value": "{portal.font-family}"
},
"font-weight": {
"medium": {
"$type": "fontWeights",
- "$value": "{portal.bold}"
+ "$value": "{portal.font-weight.medium}"
},
"semibold": {
"$type": "fontWeights",
- "$value": "{portal.extra-bold}"
+ "$value": "{portal.font-weight.semibold}"
},
"regular": {
"$type": "fontWeights",
- "$value": "{portal.regular}"
+ "$value": "{portal.font-weight.regular}"
}
},
"border-radius": {
diff --git a/design-tokens/themes/uutilsynet.json b/design-tokens/themes/uutilsynet.json
index 810b44bc8d..d834bb3c59 100644
--- a/design-tokens/themes/uutilsynet.json
+++ b/design-tokens/themes/uutilsynet.json
@@ -331,24 +331,22 @@
}
}
},
- "font": {
- "family": {
- "$type": "fontFamilies",
- "$value": "{uutilsynet.main}"
- }
+ "font-family": {
+ "$type": "fontFamilies",
+ "$value": "{uutilsynet.font-family}"
},
"font-weight": {
"medium": {
"$type": "fontWeights",
- "$value": "{uutilsynet.bold}"
+ "$value": "{uutilsynet.font-weight.medium}"
},
"semibold": {
"$type": "fontWeights",
- "$value": "{uutilsynet.extra-bold}"
+ "$value": "{uutilsynet.font-weight.semibold}"
},
"regular": {
"$type": "fontWeights",
- "$value": "{uutilsynet.regular}"
+ "$value": "{uutilsynet.font-weight.regular}"
}
},
"border-radius": {
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 1cb3e4b3a8..b9522a4bd6 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,29 @@
# Change Log
+## 1.0.0
+
+### Major Changes
+
+- 🎉 Version 1.0 of Designsystemet! 🎉 ([#3290](https://github.com/digdir/designsystemet/pull/3290))
+
+ We are excited to announce the release of Version 1.0 of Designsystemet! This marks a significant milestone as we establish a solid foundation for future development. 🚀
+
+## 0.101.0
+
+### Patch Changes
+
+- **tokens**: Renamed `font.family` to `font-family` ([#3264](https://github.com/digdir/designsystemet/pull/3264))
+
+- **tokens**: `extra-bold` token should now have correct value according to Token Studio ([#3264](https://github.com/digdir/designsystemet/pull/3264))
+
+- **tokens**: Added `font-weight` to token name for fontWeight tokens (e.g. `font-weight.medium`) ([#3264](https://github.com/digdir/designsystemet/pull/3264))
+
+- Removed `--ds-global` colors from tokens build ([#3250](https://github.com/digdir/designsystemet/pull/3250))
+
+- Some options supplied to the CLI were being overridden by their default values ([#3267](https://github.com/digdir/designsystemet/pull/3267))
+
+- Added `--ds-link-color-visited` for styling visited links ([#3250](https://github.com/digdir/designsystemet/pull/3250))
+
## 0.100.52
### Patch Changes
diff --git a/packages/cli/README.md b/packages/cli/README.md
index 2661360c33..b59ed2abc5 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -10,7 +10,98 @@ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to ge
## Usage
### Create tokens
-We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet.
-### Build tokens
-Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.
+Use `npx @digdir/designsystemet tokens create ` to create design tokens for use with Designsystemet.
+
+This allows you to define themes including custom colors, font-family, and border-radius.
+We recommend using the [Designsystemet theme builder](https://theme.designsystemet.no/) for generating a valid command with correct options.
+
+#### Update tokens
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to update design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+To update design tokens, re-run `npx @digdir/designsystemet tokens create --clean`.
+If a [config file](#using-a-config-file) you can also re-run with `"clean": true`.
+
+> ⚠️ **WARNING** ⚠️
+> The design tokens created by this tool are considered an implementation detail, and is subject
+> to change at any time without being considered a breaking change. We **only** support customisations
+> done through the CLI options. Direct editing of the design tokens are **not** supported.
+>
+> Since tokens may be added or removed at any time, it is necessary to routinely re-run this
+> command when upgrading the libraries. This will remove any direct edits to the design tokens.
+
+### Build CSS from tokens
+
+Use `npx @digdir/designsystemet tokens build ` to build CSS from design tokens generated in the previous step.
+
+> ⚠️ **WARNING** ⚠️
+> The CSS files from created by this tool are considered build artifacts. They should **not** be
+> edited directly. While the CSS will not change unexpectedly, new variables may be added at any
+> time. Therefore, it is necessary to routinely re-run this command when upgrading the libraries.
+> This will remove any direct edits to the CSS.
+
+#### Update built CSS
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to build a new set of CSS from design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+
+### Using a config file
+
+> ⚠️ **WARNING** ⚠️
+> This feature is experimental. The config schema may change at any time.
+
+
+The `tokens create` command supports a config file. It will auto-detect a `designsystemet.config.json` file in the current directory. You can also use the `--config ` option to supply a different config name and location.
+
+The main advantage of using a config file is for automation in scenarios with multiple themes.
+
+To get started, use this template for a `designsystemet.config.json` file:
+
+```jsonc
+{
+ "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
+}
+```
+
+In editors which support JSON Schema, the `$schema` will then give you editor hints for the structure of the file.
+
+#### Minimal config example
+As a minimal example, the following CLI snippet from the theme builder
+
+```
+npx @digdir/designsystemet tokens create \
+--main-colors "primary:#0062BA" "accent:#1E98F5" \
+--neutral-color "#1E2B3C" \
+--support-colors "extra1:#F45F63" "extra2:#E5AA20" \
+--border-radius 4 \
+--theme "theme"
+```
+
+...is equivalent to this `designsystemet.config.json` file
+```jsonc
+{
+ "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
+ "outDir": "../path/to/design-tokens",
+ "themes": {
+ "theme": {
+ "colors": {
+ "main": { "primary": "#0062BA", "accent": "#1E98F5" },
+ "neutral": "#1E2B3C",
+ "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
+ },
+ "borderRadius": 4
+ }
+ }
+}
+```
+To generate new design tokens and CSS files, you would then run.
+
+```
+npx @digdir/designsystemet tokens create
+npx @digdir/designsystemet tokens build
+```
+
+#### Complex config example
+
+Have a look at the `*.config.json` files under the `packages/cli` in the Github repo for more complex examples.
diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts
index 9c0582d607..bd9e9ef72b 100644
--- a/packages/cli/bin/designsystemet.ts
+++ b/packages/cli/bin/designsystemet.ts
@@ -15,7 +15,7 @@ import type { Theme } from '../src/tokens/types.js';
import { cleanDir } from '../src/tokens/utils.js';
import { writeTokens } from '../src/tokens/write.js';
import { type CombinedConfigSchema, combinedConfigSchema, configFileSchema, mapPathToOptionName } from './config.js';
-import { type OptionGetter, getDefaultOrExplicitOption } from './options.js';
+import { type OptionGetter, getCliOption, getDefaultCliOption, getSuppliedCliOption } from './options.js';
program.name('designsystemet').description('CLI for working with Designsystemet').showHelpAfterError();
@@ -67,7 +67,7 @@ function makeTokenCommands() {
)
.option(`--${cliOptions.clean} [boolean]`, 'Clean output directory before creating tokens', parseBoolean, false)
.option('--dry [boolean]', `Dry run for created ${chalk.blue('design-tokens')}`, parseBoolean, false)
- .option(`-f, --${cliOptions.theme.typography.fontFamily} `, `Font family`, DEFAULT_FONT)
+ .option(`-f, --${cliOptions.theme.typography.fontFamily} `, `Font family (experimental)`, DEFAULT_FONT)
.option(
`-b, --${cliOptions.theme.borderRadius} `,
`Unitless base border-radius in px`,
@@ -135,16 +135,23 @@ function makeTokenCommands() {
});
const unvalidatedConfig = noUndefined({
- outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, 'outDir'),
- clean: propsFromJson?.clean ?? getDefaultOrExplicitOption(cmd, 'clean'),
+ outDir: propsFromJson?.outDir ?? getCliOption(cmd, 'outDir'),
+ clean: propsFromJson?.clean ?? getCliOption(cmd, 'clean'),
themes: propsFromJson?.themes
- ? // For each theme specified in the JSON config, we override the config values
- // with the explicitly set options from the CLI.
- R.map((theme) => R.mergeDeepRight(theme, getThemeOptions(getDefaultOrExplicitOption)), propsFromJson.themes)
+ ? R.map((jsonThemeValues) => {
+ // For each theme specified in the JSON config, we resolve the option values in the following order:
+ // - default value
+ // - config value
+ // - CLI value
+ // With later values overriding earlier values
+ const defaultThemeValues = getThemeOptions(getDefaultCliOption);
+ const cliThemeValues = getThemeOptions(getSuppliedCliOption);
+ return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
+ }, propsFromJson.themes)
: // If there are no themes specified in the JSON config, we use both explicit
// and default theme options from the CLI.
{
- [opts.theme]: getThemeOptions(getDefaultOrExplicitOption),
+ [opts.theme]: getThemeOptions(getCliOption),
},
});
diff --git a/packages/cli/bin/options.ts b/packages/cli/bin/options.ts
index f240f0351a..199abb64e5 100644
--- a/packages/cli/bin/options.ts
+++ b/packages/cli/bin/options.ts
@@ -19,10 +19,16 @@ export type OptionGetter = ReturnType;
* The difference between this and using the option directly is that we return undefined
* instead of the default value if the option was not explicitly set.
*/
-export const getExplicitOptionOnly = getOptionIfMatchingSource('cli');
+export const getSuppliedCliOption = getOptionIfMatchingSource('cli');
/**
- * This function is basically the default behaviour, unlike {@link getExplicitOptionOnly}.
- * It is provided so that the program can choose its behaviour as needed.
+ * Get the default value specified for a CLI command option.
+ * Mostly useful for getting values which may later be overridden.
*/
-export const getDefaultOrExplicitOption = getOptionIfMatchingSource('cli', 'default');
+export const getDefaultCliOption = getOptionIfMatchingSource('default');
+
+/**
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
+ * for the option as defined in the {@link Command}
+ */
+export const getCliOption = getOptionIfMatchingSource('cli', 'default');
diff --git a/packages/cli/package.json b/packages/cli/package.json
index c854da441f..bec3f3a869 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@digdir/designsystemet",
- "version": "0.100.52",
+ "version": "1.0.0",
"description": "CLI for Designsystemet",
"author": "Designsystemet team",
"engines": {
diff --git a/packages/cli/src/migrations/beta-to-v1.ts b/packages/cli/src/migrations/beta-to-v1.ts
index e6ea7470d1..72fcf35d5b 100644
--- a/packages/cli/src/migrations/beta-to-v1.ts
+++ b/packages/cli/src/migrations/beta-to-v1.ts
@@ -278,7 +278,7 @@ export default (glob?: string) =>
'--fds-sizing-22': '--ds-size-22',
'--fds-sizing-26': '--ds-size-26',
'--fds-sizing-30': '--ds-size-30',
- '--fds-opacity-disabled': '--ds-disabled-opacity',
+ '--fds-opacity-disabled': '--ds-opacity-disabled',
'--fds-colors-blue-100': '--ds-global-blue-1',
'--fds-colors-blue-200': '--ds-global-blue-2',
'--fds-colors-blue-700': '--ds-global-blue-7',
diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts
index 58cec1e562..fd54bc1651 100644
--- a/packages/cli/src/tokens/build/configs.ts
+++ b/packages/cli/src/tokens/build/configs.ts
@@ -87,7 +87,7 @@ const colorSchemeVariables: GetStyleDictionaryConfig = (
{
destination: `color-scheme/${colorScheme}.css`,
format: formats.colorScheme.name,
- filter: (token) => !token.isSource && typeEquals('color', token),
+ filter: (token) => !token.isSource && typeEquals('color', token) && !R.startsWith(['global'], token.path),
},
],
options: {
diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts
index 4f8358a3e5..6464a764a4 100644
--- a/packages/cli/src/tokens/create.ts
+++ b/packages/cli/src/tokens/create.ts
@@ -1,7 +1,7 @@
import * as R from 'ramda';
import { baseColors, generateColorScale } from '../colors/index.js';
import type { Color, ColorScheme } from '../colors/types.js';
-import type { Colors, Theme, Tokens, Tokens1ary, TokensSet, Typography } from './types.js';
+import type { Colors, Theme, Tokens, TokensSet, Typography } from './types.js';
export const cliOptions = {
outDir: 'out-dir',
@@ -19,8 +19,8 @@ export const cliOptions = {
},
} as const;
-const createColorTokens = (colorArray: Color[]): Tokens1ary => {
- const obj: Tokens1ary = {};
+const createColorTokens = (colorArray: Color[]): TokensSet => {
+ const obj: TokensSet = {};
const $type = 'color';
for (const index in colorArray) {
obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
@@ -31,21 +31,23 @@ const createColorTokens = (colorArray: Color[]): Tokens1ary => {
const generateTypographyTokens = (themeName: string, { fontFamily }: Typography): TokensSet => {
return {
[themeName]: {
- main: {
+ 'font-family': {
$type: 'fontFamilies',
$value: fontFamily ?? 'Inter',
},
- bold: {
- $type: 'fontWeights',
- $value: 'Medium',
- },
- 'extra-bold': {
- $type: 'fontWeights',
- $value: 'Semi bold',
- },
- regular: {
- $type: 'fontWeights',
- $value: 'Regular',
+ 'font-weight': {
+ medium: {
+ $type: 'fontWeights',
+ $value: 'Medium',
+ },
+ semibold: {
+ $type: 'fontWeights',
+ $value: 'SemiBold',
+ },
+ regular: {
+ $type: 'fontWeights',
+ $value: 'Regular',
+ },
},
},
};
diff --git a/packages/cli/src/tokens/design-tokens/default/primitives/globals.json b/packages/cli/src/tokens/design-tokens/default/primitives/globals.json
index 5b6a703c76..5a32873fef 100644
--- a/packages/cli/src/tokens/design-tokens/default/primitives/globals.json
+++ b/packages/cli/src/tokens/design-tokens/default/primitives/globals.json
@@ -140,4 +140,4 @@
"$value": "30%"
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json
index 70306094b1..9d7ed9b3e6 100644
--- a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json
+++ b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json
index c7c3488164..f861fb854c 100644
--- a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json
+++ b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json
index f33a58cc8b..99e67f561f 100644
--- a/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json
+++ b/packages/cli/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json
@@ -93,4 +93,4 @@
"$value": "1.5%"
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/default/semantic/style.json b/packages/cli/src/tokens/design-tokens/default/semantic/style.json
index d5b3442334..8f999a8363 100644
--- a/packages/cli/src/tokens/design-tokens/default/semantic/style.json
+++ b/packages/cli/src/tokens/design-tokens/default/semantic/style.json
@@ -4,7 +4,7 @@
"2xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.10}",
@@ -14,7 +14,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.9}",
@@ -24,7 +24,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.8}",
@@ -34,7 +34,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.7}",
@@ -44,7 +44,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.6}",
@@ -54,7 +54,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.5}",
@@ -64,7 +64,7 @@
"2xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.medium}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.4}",
@@ -76,7 +76,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.6}",
@@ -86,7 +86,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.5}",
@@ -96,7 +96,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.4}",
@@ -106,7 +106,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.3}",
@@ -116,7 +116,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.md}",
"fontSize": "{font-size.2}",
@@ -127,7 +127,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.6}",
@@ -137,7 +137,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.5}",
@@ -147,7 +147,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.4}",
@@ -157,7 +157,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.3}",
@@ -167,7 +167,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.sm}",
"fontSize": "{font-size.2}",
@@ -179,7 +179,7 @@
"xl": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.6}",
@@ -189,7 +189,7 @@
"lg": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.5}",
@@ -199,7 +199,7 @@
"md": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.4}",
@@ -209,7 +209,7 @@
"sm": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.3}",
@@ -219,7 +219,7 @@
"xs": {
"$type": "typography",
"$value": {
- "fontFamily": "{font.family}",
+ "fontFamily": "{font-family}",
"fontWeight": "{font-weight.regular}",
"lineHeight": "{line-height.lg}",
"fontSize": "{font-size.2}",
@@ -229,8 +229,8 @@
}
}
},
- "disabled": {
- "opacity": {
+ "opacity": {
+ "disabled": {
"$type": "opacity",
"$value": "{opacity.30}"
}
@@ -375,4 +375,4 @@
"$value": "{_size.30}"
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/template/$themes.json b/packages/cli/src/tokens/design-tokens/template/$themes.json
index 72d2c3518a..9734e5c18f 100644
--- a/packages/cli/src/tokens/design-tokens/template/$themes.json
+++ b/packages/cli/src/tokens/design-tokens/template/$themes.json
@@ -993,22 +993,22 @@
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:2",
"$figmaVariableReferences": {
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
"altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
"altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
"altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
"uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
"uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
"uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
"portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
"portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
},
"group": "Typography"
},
@@ -1025,22 +1025,22 @@
"$figmaCollectionId": "VariableCollectionId:36248:20769",
"$figmaModeId": "36248:3",
"$figmaVariableReferences": {
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
"altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
"altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
"altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
"uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
"uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
"uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
"portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
"portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
},
"group": "Typography"
},
@@ -1134,7 +1134,6 @@
"color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
"color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
"color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
"font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
"font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
"font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1145,7 +1144,8 @@
"border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
"border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
"border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
},
"group": "Theme"
},
@@ -1347,7 +1347,6 @@
"color.warning.base-contrast-default": "3d38f3079fb9fd155567ec24c7fde25f68c40f42",
"color.focus.inner": "1ec8f76f658042889b1eb4b08f3ce9bca1b7e603",
"color.focus.outer": "09e04f0bfff8fdc309db58a0131b5d07dae6b4f8",
- "disabled.opacity": "d94940d06b80e1cb6184ae12c5793a1ef95420ba",
"border-width.default": "ac5b6181d17de3d25249c91674dce4fef8711216",
"border-width.highlight": "dd40bb1cb729138762c0bfa29d26adb58b726354",
"border-radius.sm": "7b2af5d22e01253d20184bf5c3f872a18d41a315",
@@ -1375,7 +1374,8 @@
"size.18": "803716e7a1ab4f0ed08180713a5ddc53f5a80a13",
"size.22": "f0e62cce260051ffae97ed9709e77fb22e2dac2e",
"size.26": "a42e9a42d13ce2453de8005b58147b9a9b9b5dde",
- "size.30": "600d545445deae2077866ba3953a64000a123606"
+ "size.30": "600d545445deae2077866ba3953a64000a123606",
+ "opacity.disabled": "d94940d06b80e1cb6184ae12c5793a1ef95420ba"
},
"group": "Semantic"
},
diff --git a/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json b/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json
index bd6306d028..4c33ec4104 100644
--- a/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json
+++ b/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json
@@ -274,5 +274,13 @@
"$value": "{color.neutral.text-default}"
}
}
+ },
+ "link": {
+ "color": {
+ "visited": {
+ "$type": "color",
+ "$value": "{global.purple.12}"
+ }
+ }
}
}
\ No newline at end of file
diff --git a/packages/cli/src/tokens/design-tokens/template/themes/theme-base-file.json b/packages/cli/src/tokens/design-tokens/template/themes/theme-base-file.json
index c15837986e..e090cf37c9 100644
--- a/packages/cli/src/tokens/design-tokens/template/themes/theme-base-file.json
+++ b/packages/cli/src/tokens/design-tokens/template/themes/theme-base-file.json
@@ -1,23 +1,21 @@
{
"color": {},
- "font": {
- "family": {
- "$type": "fontFamilies",
- "$value": "{.main}"
- }
+ "font-family": {
+ "$type": "fontFamilies",
+ "$value": "{.font-family}"
},
"font-weight": {
"medium": {
"$type": "fontWeights",
- "$value": "{.bold}"
+ "$value": "{.font-weight.medium}"
},
"semibold": {
"$type": "fontWeights",
- "$value": "{.extra-bold}"
+ "$value": "{.font-weight.semibold}"
},
"regular": {
"$type": "fontWeights",
- "$value": "{.regular}"
+ "$value": "{.font-weight.regular}"
}
},
"border-radius": {
diff --git a/packages/cli/src/tokens/template.ts b/packages/cli/src/tokens/template.ts
index dcfaac5958..1434176334 100644
--- a/packages/cli/src/tokens/template.ts
+++ b/packages/cli/src/tokens/template.ts
@@ -47,6 +47,7 @@ export const updateTemplates = async () => {
// semantic/color.json
const colorBaseFile = {
+ ...originalColorJson,
color: R.omit(['accent', 'neutral', 'brand1', 'brand2', 'brand3'], originalColorJson.color),
};
await fs.writeFile(
diff --git a/packages/cli/src/tokens/types.ts b/packages/cli/src/tokens/types.ts
index ded514d324..3ba6cf8cca 100644
--- a/packages/cli/src/tokens/types.ts
+++ b/packages/cli/src/tokens/types.ts
@@ -1,10 +1,9 @@
import type { CssColor } from '../colors/types.js';
export type Token = { $value: string; $type: string };
-export type Tokens1ary = Record;
-export type Tokens2ary = Record;
-export type Tokens3ary = Record>;
-export type TokensSet = Tokens1ary | Tokens2ary | Tokens3ary;
+export type TokensSet = {
+ [key: string]: Token | TokensSet;
+};
export type ColorModeTokens = {
global: TokensSet;
diff --git a/packages/cli/src/tokens/write.ts b/packages/cli/src/tokens/write.ts
index c2af26a8dd..321889c7f8 100644
--- a/packages/cli/src/tokens/write.ts
+++ b/packages/cli/src/tokens/write.ts
@@ -144,6 +144,7 @@ export const writeTokens = async (options: WriteTokensOptions) => {
);
const semanticColors = {
+ ...semanticColorBaseFile,
color: {
...Object.fromEntries(semanticColorTokens),
...semanticColorBaseFile.color,
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index cd9691eef2..0ae03ebedb 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -1,5 +1,41 @@
# Change Log
+## 1.0.0
+
+### Major Changes
+
+- 🎉 Version 1.0 of Designsystemet! 🎉 ([#3290](https://github.com/digdir/designsystemet/pull/3290))
+
+ We are excited to announce the release of Version 1.0 of Designsystemet! This marks a significant milestone as we establish a solid foundation for future development. 🚀
+
+## 0.101.0
+
+### Patch Changes
+
+- New class `ds-focus--inset` for adding a focus border on the insider of an element ([#3222](https://github.com/digdir/designsystemet/pull/3222))
+
+- **Button**: When setting both `aria-busy` and `aria-disabled`, we don't turn down opacity, and show a progress cursor ([#3211](https://github.com/digdir/designsystemet/pull/3211))
+
+- **Radio**: fix filled error state in `Fieldset` ([#3257](https://github.com/digdir/designsystemet/pull/3257))
+
+- **Tabs**: Focus now fully encompasses `Tab` ([#3270](https://github.com/digdir/designsystemet/pull/3270))
+
+- **Tabs**: change selected color and inherit color on content ([#3191](https://github.com/digdir/designsystemet/pull/3191))
+
+- **Details**: Change to inset focus ([#3271](https://github.com/digdir/designsystemet/pull/3271))
+
+- **Dropdown**: Move dropdown closer to trigger ([#3273](https://github.com/digdir/designsystemet/pull/3273))
+
+- Removed `--ds-global` colors from tokens build ([#3250](https://github.com/digdir/designsystemet/pull/3250))
+
+- **Breadcrumbs**: Fix arrow to inherit color when in a link ([#3269](https://github.com/digdir/designsystemet/pull/3269))
+
+- Rename `--ds-disabled-opacity` to `--ds-opacity-disabled` ([#3250](https://github.com/digdir/designsystemet/pull/3250))
+
+- Added `:not([hidden])` around `display` CSS properties to respect native `hidden` attribute ([#3278](https://github.com/digdir/designsystemet/pull/3278))
+
+- Added `--ds-link-color-visited` for styling visited links ([#3250](https://github.com/digdir/designsystemet/pull/3250))
+
## 0.100.52
## 0.100.52-next.0
diff --git a/packages/css/package.json b/packages/css/package.json
index 93bb733257..19b2ad27b9 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
{
"name": "@digdir/designsystemet-css",
- "version": "0.100.52",
+ "version": "1.0.0",
"description": "CSS for Designsystemet",
"author": "Designsystemet team",
"repository": {
diff --git a/packages/css/src/breadcrumbs.css b/packages/css/src/breadcrumbs.css
index 2fc31d43f8..4cb3cb987e 100644
--- a/packages/css/src/breadcrumbs.css
+++ b/packages/css/src/breadcrumbs.css
@@ -40,6 +40,7 @@
/* When link is direct child of Breadcrumbs, make it back button */
& > :not(ol, ul)::before {
+ background: currentColor;
margin: 0;
rotate: 180deg;
}
diff --git a/packages/css/src/button.css b/packages/css/src/button.css
index 985ca7995f..902dac1b4b 100644
--- a/packages/css/src/button.css
+++ b/packages/css/src/button.css
@@ -98,7 +98,7 @@
&:is(:disabled, [aria-disabled='true']) {
cursor: not-allowed;
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
/* When both aria-disabled and aria-busy is true, opacity should be 1 and cursor should be progress */
&[aria-busy='true'] {
diff --git a/packages/css/src/chip.css b/packages/css/src/chip.css
index 2792d06b82..573c1c75d8 100644
--- a/packages/css/src/chip.css
+++ b/packages/css/src/chip.css
@@ -36,6 +36,8 @@
line-height: var(--ds-line-height-sm);
margin: 0;
min-height: var(--dsc-chip-height);
+ max-height: fit-content;
+ max-width: fit-content;
padding: 0 var(--ds-size-3);
text-decoration: none;
@@ -58,7 +60,7 @@
&:has(input:disabled),
&[aria-disabled='true'] {
cursor: not-allowed;
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
&[data-removable] {
diff --git a/packages/css/src/combobox.css b/packages/css/src/combobox.css
index 2944ed5da6..2da5be6834 100644
--- a/packages/css/src/combobox.css
+++ b/packages/css/src/combobox.css
@@ -103,7 +103,7 @@
}
.ds-textfield:has(.ds-textfield__input:disabled) {
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
.ds-textfield--error .ds-textfield__input:not(:focus-visible) {
@@ -301,7 +301,7 @@
}
.ds-combobox__disabled {
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
.ds-combobox__disabled * {
diff --git a/packages/css/src/details.css b/packages/css/src/details.css
index a035aabbd2..db84a0db23 100644
--- a/packages/css/src/details.css
+++ b/packages/css/src/details.css
@@ -58,11 +58,7 @@
}
/* Render focus inside so it is easier to make full window width and place in overflow: hidden containers */
- &:focus-visible {
- box-shadow: inset 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-outer);
- outline: var(--ds-color-focus-inner) solid var(--ds-border-width-focus);
- outline-offset: calc(var(--ds-border-width-focus) * -2);
- }
+ @composes ds-focus--inset from './base.css';
&::before {
background: currentcolor;
diff --git a/packages/css/src/dropdown.css b/packages/css/src/dropdown.css
index 67cfcf42b1..186b668fb5 100644
--- a/packages/css/src/dropdown.css
+++ b/packages/css/src/dropdown.css
@@ -6,6 +6,7 @@
--dsc-dropdown-border-width: var(--ds-border-width-default);
--dsc-dropdown-border-style: solid;
--dsc-dropdown-border-color: var(--ds-color-neutral-border-subtle);
+ --dsc-popover-arrow-size: var(--ds-size-2);
background: var(--dsc-dropdown-background);
border-radius: var(--ds-border-radius-md);
diff --git a/packages/css/src/field.css b/packages/css/src/field.css
index aec96ff863..c93a73447c 100644
--- a/packages/css/src/field.css
+++ b/packages/css/src/field.css
@@ -13,7 +13,7 @@
color: var(--ds-color-neutral-text-subtle); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
}
- & input {
+ & input:not([hidden]) {
display: block; /* Ensure input is not placed on same line as label/description/validation */
}
@@ -22,7 +22,7 @@
*/
&:has([aria-disabled='true']:not(u-option, [role='option'][aria-disabled='true']), :disabled:not(option)) > * {
cursor: not-allowed;
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
&:has([aria-readonly='true'], [readonly]) label {
diff --git a/packages/css/src/fieldset.css b/packages/css/src/fieldset.css
index 10b16921e7..ad969cb781 100644
--- a/packages/css/src/fieldset.css
+++ b/packages/css/src/fieldset.css
@@ -21,6 +21,6 @@
&:disabled > legend,
&:disabled > legend + p {
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
index 69a582f78c..71908f83c2 100644
--- a/packages/css/src/index.css
+++ b/packages/css/src/index.css
@@ -37,4 +37,5 @@
@import url('./badge.css') layer(ds.components);
@import url('./avatar.css') layer(ds.components);
@import url('./suggestion.css') layer(ds.components);
+@import url('./multi-suggestion.css') layer(ds.components);
@import url('./combobox.css') layer(ds.components);
diff --git a/packages/css/src/input.css b/packages/css/src/input.css
index 6f8116b59f..de352f2c4d 100644
--- a/packages/css/src/input.css
+++ b/packages/css/src/input.css
@@ -116,13 +116,20 @@
&:disabled,
&[aria-disabled='true'] {
cursor: not-allowed;
- opacity: var(--ds-disabled-opacity);
+ opacity: var(--ds-opacity-disabled);
}
&[aria-invalid='true'] {
border-color: var(--dsc-input-accent-color--invalid);
}
- &[aria-invalid='true']:where(:checked, :indeterminate) {
+
+ /* Radio could match here if we check :indeterminate, so we check that by itself */
+ &[aria-invalid='true']:where(:checked) {
+ background: var(--dsc-input-accent-color--invalid);
+ color: var(--dsc-input-stroke-color--invalid);
+ }
+
+ &[type='checkbox'][aria-invalid='true']:where(:indeterminate) {
background: var(--dsc-input-accent-color--invalid);
color: var(--dsc-input-stroke-color--invalid);
}
diff --git a/packages/css/src/link.css b/packages/css/src/link.css
index e8e756f3b5..821a7b67d7 100644
--- a/packages/css/src/link.css
+++ b/packages/css/src/link.css
@@ -5,7 +5,7 @@
--dsc-link-color: var(--ds-color-text-subtle);
--dsc-link-background--focus: var(--ds-color-focus-outer);
--dsc-link-color--focus: var(--ds-color-focus-inner);
- --dsc-link-color--visited: var(--ds-global-purple-12);
+ --dsc-link-color--visited: var(--ds-link-color-visited);
--dsc-link-text-decoration-thickness--hover: 0.125em; /* 2px ish */
--dsc-link-text-decoration-thickness: 0.0625em; /* 1px ish */
diff --git a/packages/css/src/multi-suggestion.css b/packages/css/src/multi-suggestion.css
new file mode 100644
index 0000000000..95f33aeee6
--- /dev/null
+++ b/packages/css/src/multi-suggestion.css
@@ -0,0 +1,151 @@
+.ds-multi-suggestion {
+ --dsc-multi-select-option-background--selected: var(--ds-color-background-tinted);
+ --dsc-multi-select-option-border-color: var(--ds-color-base-default);
+ --dsc-multi-select-clear-gap: var(--ds-size-2);
+ --dsc-multi-select-clear-padding: var(--ds-size-1);
+ --dsc-multi-select-clear-size: var(--ds-size-9);
+ --dsc-multi-select-clear-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+ --dsc-multi-select-option-checkmark-url: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20focusable%3D%22false%22%20role%3D%22img%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M18.998%206.94a.75.75%200%200%201%20.063%201.058l-8%209a.75.75%200%200%201-1.091.032l-5-5a.75.75%200%201%201%201.06-1.06l4.438%204.437%207.471-8.405A.75.75%200%200%201%2019%206.939%22%20clip-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
+ --dsc-multi-select-option-checkmark-size: var(--ds-size-7);
+ --dsc-multi-select-list-gap: var(--ds-size-2);
+ --dsc-multi-select-border-width: 1px;
+ --dsc-multi-select-border-style: solid;
+ --dsc-multi-select-border-color: var(--ds-color-neutral-border-default);
+
+ box-sizing: border-box;
+ flex-wrap: wrap;
+ gap: var(--ds-size-1);
+ position: relative;
+
+ &:not([hidden]) {
+ display: flex;
+ }
+
+ & > data {
+ margin-bottom: var(--ds-size-1);
+
+ &:has(+ data) {
+ margin-right: var(--ds-size-1);
+ }
+ }
+
+ & u-datalist {
+ background: var(--ds-color-neutral-background-default);
+ border-radius: var(--ds-border-radius-md);
+ border-width: var(--dsc-multi-select-border-width);
+ border-style: var(--dsc-multi-select-border-style);
+ border-color: var(--dsc-multi-select-border-color);
+ box-shadow: var(--ds-shadow-md);
+ box-sizing: border-box;
+ color: var(--ds-color-neutral-text-default);
+ inset: 100% 0 auto 0;
+ overflow-y: auto;
+ position: absolute;
+ z-index: 1600;
+ margin-top: var(--dsc-multi-select-list-gap);
+ max-height: 200px;
+
+ /* Hide if any is visible */
+ &:has(u-option:not([hidden]):not([aria-disabled='true']):not([data-empty])) > u-option[data-empty] {
+ display: none;
+ }
+ & > u-option[data-empty] {
+ cursor: default;
+ display: block;
+ }
+
+ &:not(:has(u-option:hover)) > u-option:focus-visible {
+ border-left-color: var(--dsc-multi-select-option-border-color);
+ background: var(--dsc-multi-select-option-background--selected);
+ color: var(--ds-color-text-default);
+ }
+
+ /* Hide datalist if no children */
+ &:empty {
+ display: none;
+ }
+
+ & > * {
+ padding: var(--ds-size-2) var(--ds-size-3);
+ font-family: inherit;
+ }
+
+ & > :is(u-option) {
+ padding-inline-start: var(--dsc-multi-select-option-checkmark-size);
+ border: none;
+ border-left: 5px solid transparent;
+ outline: none;
+ border-radius: var(--ds-border-radius-sm);
+ cursor: pointer;
+ position: relative;
+
+ &[selected] {
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ mask: var(--dsc-multi-select-option-checkmark-url) center / contain no-repeat;
+ background: currentcolor;
+ width: var(--dsc-multi-select-option-checkmark-size);
+ height: var(--dsc-multi-select-option-checkmark-size);
+ }
+ }
+
+ @media (hover: hover) and (pointer: fine) {
+ &:not([data-empty]):hover {
+ border-left-color: var(--dsc-multi-select-option-border-color);
+ background: var(--dsc-multi-select-option-background--selected);
+ }
+ }
+ }
+ }
+
+ &:has(input:placeholder-shown) input {
+ padding-right: 2.4em;
+ background-image: linear-gradient(
+ 45deg,
+ var(--_dsc-input-diagonal-1),
+ var(--_dsc-input-diagonal-2),
+ var(--_dsc-input-diagonal-3),
+ var(--_dsc-input-diagonal-4)
+ ), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
+ background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - 0.8em);
+ background-size: .4em .4em;
+ background-repeat: no-repeat;
+
+ @media (forced-colors: active) {
+ appearance: auto; /* show chevron */
+ }
+ }
+
+ /**
+ * Clear button
+ */
+ &:has(input:placeholder-shown) button[type='reset'],
+ &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
+ visibility: hidden; /* We hide the clear button when input is empty */
+ }
+ &:has(button[type='reset']) input {
+ padding-inline-end: calc(var(--dsc-multi-select-clear-size) + var(--dsc-multi-select-clear-gap));
+ }
+
+ & button[type='reset'] {
+ --dsc-button-size: var(--dsc-multi-select-clear-size);
+
+ align-self: center;
+ margin-inline-start: calc((var(--dsc-multi-select-clear-size) + var(--dsc-multi-select-clear-gap)) * -1);
+ order: 999; /* Place last */
+ padding: var(--dsc-multi-select-clear-padding);
+ position: relative;
+ scale: 0.75;
+ z-index: 2;
+
+ &::before {
+ content: '';
+ height: var(--dsc-multi-select-clear-size);
+ width: var(--dsc-multi-select-clear-size);
+ mask: var(--dsc-multi-select-clear-icon-url) center / contain no-repeat;
+ background: currentcolor;
+ }
+ }
+}
diff --git a/packages/css/src/suggestion.css b/packages/css/src/suggestion.css
index 574e00f402..7a5bb3ce9d 100644
--- a/packages/css/src/suggestion.css
+++ b/packages/css/src/suggestion.css
@@ -13,11 +13,14 @@
--dsc-suggestion-border-color: var(--ds-color-neutral-border-default);
box-sizing: border-box;
- display: flex;
flex-wrap: wrap;
gap: var(--ds-size-1);
position: relative;
+ &:not([hidden]) {
+ display: flex;
+ }
+
& u-datalist {
background: var(--ds-color-neutral-background-default);
border-radius: var(--ds-border-radius-md);
@@ -35,7 +38,7 @@
max-height: 200px;
/* Hide if any is visible */
- &:has(u-option:not([hidden]):not([aria-disabled='true'])) > u-option[data-empty] {
+ &:has(u-option:not([hidden]):not([aria-disabled='true']):not([data-empty])) > u-option[data-empty] {
display: none;
}
& > u-option[data-empty] {
diff --git a/packages/css/src/tabs.css b/packages/css/src/tabs.css
index dac40edfd2..4a2ae7ebb6 100644
--- a/packages/css/src/tabs.css
+++ b/packages/css/src/tabs.css
@@ -70,6 +70,11 @@
background: var(--dsc-tabs-tab-color--selected);
}
+ /* Place active line under focus */
+ &:focus-visible::after {
+ z-index: -1;
+ }
+
@media (forced-colors: active) {
color: CanvasText;
border-bottom: 2px solid CanvasText;
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 44adad8018..db2c97e185 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,38 @@
# Change Log
+## 1.0.0
+
+### Major Changes
+
+- 🎉 Version 1.0 of Designsystemet! 🎉 ([#3290](https://github.com/digdir/designsystemet/pull/3290))
+
+ We are excited to announce the release of Version 1.0 of Designsystemet! This marks a significant milestone as we establish a solid foundation for future development. 🚀
+
+## 0.101.0
+
+### Minor Changes
+
+- `SeverityColors` is removed from `Color` type. Components where we deem severity to be relevant, now explicitly have SeverityColors added to `data-color`. `Button` component only allows `"danger"`. ([#3223](https://github.com/digdir/designsystemet/pull/3223))
+
+- **`Badge`, `Card`, `Details`, `Popover`**: Rename `data-variant` prop to `variant` ([#3241](https://github.com/digdir/designsystemet/pull/3241))
+
+- **`ToggleGroup.Item`**: Disallow setting `variant` directly, it should only be set based on which item in the group is active ([#3241](https://github.com/digdir/designsystemet/pull/3241))
+
+### Patch Changes
+
+- **Dialog**: Remove `backdropClose`, and replace with `closedby="none | closerequest | any"` to align with [upcoming browser standard](https://chromestatus.com/feature/5097714453577728) ([#3281](https://github.com/digdir/designsystemet/pull/3281))
+
+- **Suggestion**: Fix clear button not unselecting the selected option ([#3212](https://github.com/digdir/designsystemet/pull/3212))
+
+- **Button**: `loading` now sets `aria-disabled="true"` ([#3211](https://github.com/digdir/designsystemet/pull/3211))
+
+- **MultiSelect**: New experimental component replacing `Combobox` in multiple mode ([#3097](https://github.com/digdir/designsystemet/pull/3097))
+
+- Fix `peerDependencies` definition for React 19 ([#3262](https://github.com/digdir/designsystemet/pull/3262))
+
+- **Dialog**: Add prop `modal` to toggle between modal and non-modal dialogs ([#3210](https://github.com/digdir/designsystemet/pull/3210))
+ - See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#creating_a_modal_dialog
+
## 0.100.52
## 0.100.52-next.0
diff --git a/packages/react/MIGRATION.md b/packages/react/MIGRATION.md
index 2208e7afdb..5a635115a2 100644
--- a/packages/react/MIGRATION.md
+++ b/packages/react/MIGRATION.md
@@ -37,7 +37,7 @@ To get a bordered details, place it inside a `Card`
- `Chip.Toggle` has been removed, use either `.Radio` or `.Checkbox`
### Combobox
-This component has been deprecated, use `Suggestion` for single select or `MultiSelect` for multi select
+This component has been deprecated, use `Suggestion` for single select or `MultiSuggestion` for multi select
### DropdownMenu
- Renamed to `Dropdown`
diff --git a/packages/react/package.json b/packages/react/package.json
index 4c25c7c513..797107b32a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@digdir/designsystemet-react",
"type": "module",
- "version": "0.100.52",
+ "version": "1.0.0",
"description": "React components for Designsystemet",
"author": "Designsystemet team",
"repository": {
@@ -35,8 +35,8 @@
"types": "tsc --noEmit"
},
"peerDependencies": {
- "react": ">=18.3.1",
- "react-dom": ">=18.3.1"
+ "react": ">=18.3.1 || ^19.0.0",
+ "react-dom": ">=18.3.1 || ^19.0.0"
},
"publishConfig": {
"access": "public"
@@ -49,6 +49,7 @@
"@tanstack/react-virtual": "^3.11.2",
"@u-elements/u-datalist": "^0.1.3",
"@u-elements/u-details": "^0.1.0",
+ "@u-elements/u-tags": "^0.1.2",
"clsx": "^2.1.1"
},
"devDependencies": {
diff --git a/packages/react/src/components/Badge/Badge.mdx b/packages/react/src/components/Badge/Badge.mdx
index 5e184e956e..f7c15dbce1 100644
--- a/packages/react/src/components/Badge/Badge.mdx
+++ b/packages/react/src/components/Badge/Badge.mdx
@@ -43,7 +43,7 @@ Dette vil også fungere for `overlap="circle"`.
## Farger
`Badge` kommer i alle farger, du kan endre den med `data-color`.
-Du kan også sette `data-variant` direkte for å endre bakgrunnsfarge.
+Du kan også sette `variant` direkte for å endre bakgrunnsfarge.
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
index 16e6604466..8952bba020 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -198,28 +198,28 @@ const VariantsMap: {
},
neutralTinted: {
'data-color': 'neutral',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
dangerBase: {
'data-color': 'danger',
},
dangerTinted: {
'data-color': 'danger',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
infoBase: {
'data-color': 'info',
},
infoTinted: {
'data-color': 'info',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
warningBase: {
'data-color': 'warning',
},
warningTinted: {
'data-color': 'warning',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
};
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index f5a9a4d288..651b09ad12 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -23,7 +23,7 @@ export type BadgeProps = MergeRight<
*
* @default 'base'
*/
- 'data-variant'?: 'base' | 'tinted';
+ variant?: 'base' | 'tinted';
/**
* Change the color scheme of the badge
*/
@@ -44,7 +44,7 @@ export type BadgeProps = MergeRight<
*
*/
export const Badge = forwardRef(function Badge(
- { className, count, maxCount, 'data-variant': variant = 'base', ...rest },
+ { className, count, maxCount, variant = 'base', ...rest },
ref,
) {
return (
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index c1e2194484..6605018e26 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -53,35 +53,35 @@ const VariantsMap: {
} = {
neutralDefault: {
'data-color': 'neutral',
- 'data-variant': 'default',
+ variant: 'default',
},
neutralTinted: {
'data-color': 'neutral',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
brand1Default: {
'data-color': 'brand1',
- 'data-variant': 'default',
+ variant: 'default',
},
brand1Tinted: {
'data-color': 'brand1',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
brand2Default: {
'data-color': 'brand2',
- 'data-variant': 'default',
+ variant: 'default',
},
brand2Tinted: {
'data-color': 'brand2',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
brand3Default: {
'data-color': 'brand3',
- 'data-variant': 'default',
+ variant: 'default',
},
brand3Tinted: {
'data-color': 'brand3',
- 'data-variant': 'tinted',
+ variant: 'tinted',
},
};
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index aff7e86743..f94f9b4b8f 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -14,7 +14,7 @@ export type CardProps = MergeRight<
*
* @default 'default'
*/
- 'data-variant'?: 'default' | 'tinted';
+ variant?: 'default' | 'tinted';
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
* @default false
@@ -36,7 +36,7 @@ export type CardProps = MergeRight<
*
*/
export const Card = forwardRef(function Card(
- { asChild = false, 'data-variant': variant = 'default', className, ...rest },
+ { asChild = false, variant = 'default', className, ...rest },
ref,
) {
const Component = asChild ? Slot : 'div';
diff --git a/packages/react/src/components/Details/Details.stories.tsx b/packages/react/src/components/Details/Details.stories.tsx
index 679708c3a3..96900e14c7 100644
--- a/packages/react/src/components/Details/Details.stories.tsx
+++ b/packages/react/src/components/Details/Details.stories.tsx
@@ -59,7 +59,7 @@ export const InCardWithColor: StoryFn = () => (
-
+
Hvordan får jeg tildelt et jegernummer?
diff --git a/packages/react/src/components/Details/Details.tsx b/packages/react/src/components/Details/Details.tsx
index c6565a9d84..09663b21bf 100644
--- a/packages/react/src/components/Details/Details.tsx
+++ b/packages/react/src/components/Details/Details.tsx
@@ -14,7 +14,7 @@ export type DetailsProps = MergeRight<
*
* @default 'default'
*/
- 'data-variant'?: 'default' | 'tinted';
+ variant?: 'default' | 'tinted';
/**
* Controls open-state.
*
@@ -58,7 +58,7 @@ export const Details = forwardRef(
className,
open,
defaultOpen = false,
- 'data-variant': variant = 'default',
+ variant = 'default',
onToggle,
...rest
},
diff --git a/packages/react/src/components/Dialog/Dialog.mdx b/packages/react/src/components/Dialog/Dialog.mdx
index 824ab7c8bf..609e0e9fa9 100644
--- a/packages/react/src/components/Dialog/Dialog.mdx
+++ b/packages/react/src/components/Dialog/Dialog.mdx
@@ -9,11 +9,16 @@ import { Dialog } from './';
# Dialog
-`Dialog` bruker native `dialog` elementet, du kan enten bruke vår `Trigger` komponent eller `ref` for å åpne modalen.
-Dersom du trenger kontroll over når modalen lukkes, må du bruke `ref`.
+`Dialog` lar deg lage modale og ikke-modale dialoger som bruker HTML-elementet `dialog`.
+Du kan bruke vår `Trigger` komponent dersom du kun trenger å åpne eller lukke komponenten basert på brukerinteraksjon.
+Om du trenger programmatisk kontroll over åpning og lukking av modalen kan du bruke `open`-propen, eller en `ref` som
+gir tilgang på HTML-elementets [instance-metoder](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#instance_methods) (f.eks. `.show()`, `.showModal()` og `.close()`).
Les [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) for mer info.
-`Dialog` har native focus trap, som betyr at brukeren ikke kan tabbe til annet innhold på siden.
+Du ender mellom non-modal og modal dialoger ved å bruke proppen `modal`, som er standard satt til `true`.
+Vi overstyrer hvordan `open` fungerer basert på `modal`-proppen.
+
+En modal `dialog` har native focus trap, som betyr at brukeren ikke kan tabbe til annet innhold på siden.
@@ -42,7 +47,7 @@ const dialogRef = useRef(null);
...
-
+
@@ -54,9 +59,10 @@ const dialogRef = useRef(null);
### Close on backdrop click
-Vi bruker `backdropClose={true}` proppen for å lukke dialogen når brukeren klikker utenfor.
+Vi bruker `closedby="any"` proppen for å lukke dialogen når brukeren klikker utenfor.
+Dette funker kun dersom du har `modal={true}`, fordi en non-modal har ikke et backdrop.
-
+
### Med `Block`
@@ -81,12 +87,19 @@ Bruk `max-width` for å sette egendefinert maks bredde på dialogen. Default er
Bruk `overflow: visible` for å la innhold gå utenfor dialogen.
-
+
+
+### Non-modal dialog
+
+Bruk `modal={false}` for å lage en non-modal dialog.
+
+
### `Dialog.Block`
+
## CSS Variabler
-../Dialog.stories
+
diff --git a/packages/react/src/components/Dialog/Dialog.stories.tsx b/packages/react/src/components/Dialog/Dialog.stories.tsx
index b5587c016b..62da2c06b9 100644
--- a/packages/react/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/components/Dialog/Dialog.stories.tsx
@@ -2,7 +2,15 @@ import type { Meta, StoryFn } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import { useRef, useState } from 'react';
-import { Button, Combobox, Heading, Paragraph, Textfield } from '..';
+import {
+ Button,
+ Field,
+ Heading,
+ Label,
+ Paragraph,
+ EXPERIMENTAL_Suggestion as Suggestion,
+ Textfield,
+} from '..';
import { Dialog } from '.';
@@ -79,7 +87,7 @@ export const WithoutDialogTriggerContext: StoryFn = (args) => {
return (
<>
=18.3.1"
- react-dom: ">=18.3.1"
+ react: ">=18.3.1 || ^19.0.0"
+ react-dom: ">=18.3.1 || ^19.0.0"
languageName: unknown
linkType: soft
@@ -4177,6 +4178,13 @@ __metadata:
languageName: node
linkType: hard
+"@u-elements/u-tags@npm:^0.1.2":
+ version: 0.1.2
+ resolution: "@u-elements/u-tags@npm:0.1.2"
+ checksum: 10/da2b826b7315efe483494814bb489944d774f623b9429b585e44a94209cb003fd9923a2c66873edf64a8db7d4da6d9e2b97565a3fb4bb4dd9e20f3d909a0c843
+ languageName: node
+ linkType: hard
+
"@ungap/structured-clone@npm:^1.0.0":
version: 1.2.0
resolution: "@ungap/structured-clone@npm:1.2.0"