@altinn/altinn-components 0.52.4 → 0.52.6

package/README.md

@@ -12,7 +12,7 @@ We already have the amazing [Norwegian public sector's Design System](https://de
 
 ## Strategy for Adopting Designsystemet
 
-As of April 10th, 2024, we’ve decided to start importing components from the [Norwegian public sector’s Design System](https://designsystemet.no/) as needed. These components will be exported from our own library using the `DS<Component>` prefix.
+As of April 10th, 2025, we’ve decided to start importing components from the [Norwegian public sector’s Design System](https://designsystemet.no/) as needed. These components will be exported from our own library using the `DS<Component>` prefix.
 Consumers of `altinn-components` will be able to use these components directly, without needing `@digdir/designsystemet` as a dependency.
 
 This approach allows us to:
@@ -26,6 +26,37 @@ This approach allows us to:
 This strategy is a natural progression from our previous approach, where we did not use components from `@digdir/designsystemet` directly but relied on its token structure and explored opportunities for deeper integration.
 That approach helped us move faster and build understanding — and now we're ready to take the next step.
 
+## Design tokens and CSS build process
+
+This package builds on the Norwegian public sector’s Design System by combining
+upstream design tokens with Altinn-specific extensions and overrides.
+
+To support this, we maintain a small internal build script that:
+
+- Imports and syncs tokens from `@digdir/designsystemet`
+- Applies Altinn brand specifics and overrides (from `./lib/css/tokens/altinn-design-tokens`)
+- Builds the final CSS and tokens used by this library
+
+### How to use
+
+1. Go to https://theme.designsystemet.no/no/
+2. Select "Continue from config file".
+3. Paste the config from `./lib/css/tokens/designsystemet.config.json` and load theme.
+4. Do your magic
+5. Settings (cog) and "Ta i bruk tema", and replace updated content with `./lib/css/tokens/designsystemet.config.json`
+6. Run `pnpm build-tokens` - This will generate updated tokens and css in the `design-tokens-build` directory.
+
+CSS is already loaded through `./lib/css/global.css`. You are good to go!
+
+### Directory structure
+
+```txt
+lib/css/tokens/
+  base/         # Tokens originating from @digdir/designsystemet
+  extensions/   # Altinn-specific additions and overrides
+  build/        # Generated output (CSS + tokens)
+
+
 ## Feedback and questions
 
 Keep in mind that this package is a work in progress and will be updated continuously.
@@ -48,7 +79,7 @@ Tested with Node.js 20.x <
 
 ## Requirements
 
-`React` `>=18`in your project as a peer dependency. And `react-dom` if needed.
+`React` `>=18`in your project as a peer dependency. And `react-dom` if needed. We do strongly recommend using `React` `>=19`.
 
 ## Usage
 

package/dist/assets/ButtonLabel.css

@@ -1 +1 @@
-._label_e847b_1{font-weight:500;padding:0 .25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._label_e847b_1[data-size=xs]{font-size:.875rem}._label_e847b_1[data-size=sm]{font-size:1rem}._label_e847b_1[data-size=md]{font-size:1.125rem}._label_e847b_1[data-size=lg]{font-size:1.25rem}
+._label_1pa3c_1{font-weight:500;padding:0 .25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:unset}._label_1pa3c_1[data-size=xs]{font-size:.875rem}._label_1pa3c_1[data-size=sm]{font-size:1rem}._label_1pa3c_1[data-size=md]{font-size:1.125rem}._label_1pa3c_1[data-size=lg]{font-size:1.25rem}

package/dist/components/Button/ButtonLabel.js

@@ -1,8 +1,8 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as t } from "../../index-p1eeF8LQ.js";
-import '../../assets/ButtonLabel.css';const o = "_label_e847b_1", r = {
+import { jsx as t } from "react/jsx-runtime";
+import { c as e } from "../../index-p1eeF8LQ.js";
+import '../../assets/ButtonLabel.css';const o = "_label_1pa3c_1", c = {
   label: o
-}, n = ({ className: a, size: e, children: l }) => /* @__PURE__ */ s("span", { className: t(r.label, a), "data-size": e, children: l });
+}, b = ({ className: a, size: l, children: s }) => /* @__PURE__ */ t("span", { className: e(c.label, a), "data-size": l, children: s });
 export {
-  n as ButtonLabel
+  b as ButtonLabel
 };

package/dist/components/Forms/SearchField.js

@@ -1,11 +1,11 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import { c as p } from "../../index-p1eeF8LQ.js";
 import { Icon as _ } from "../Icon/Icon.js";
 import "react";
 import { IconButton as u } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { Input as f } from "./Input.js";
-import { FieldBase as d } from "./FieldBase.js";
+import { Input as d } from "./Input.js";
+import { FieldBase as f } from "./FieldBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as h } from "../../MagnifyingGlass-bwVhw07z.js";
 import { S as z } from "../../XMark-tKk6aExO.js";
@@ -18,16 +18,16 @@ import '../../assets/SearchField.css';const B = "_container_1lz5b_1", N = "_icon
 }, G = ({
   className: c,
   size: e,
-  color: a = "neutral",
-  label: i,
-  value: o,
+  color: i = "neutral",
+  label: a,
+  value: n,
   onClear: r,
   clearButtonAltText: s = "Clear search",
   ...l
-}) => /* @__PURE__ */ n(d, { size: e, color: a, label: i, className: p(t.field, c), children: /* @__PURE__ */ m("span", { className: t.container, children: [
-  /* @__PURE__ */ n(f, { ...l, type: "search", value: o, className: t.input }),
-  /* @__PURE__ */ n(_, { svgElement: h, className: t.icon }),
-  r && !!o && /* @__PURE__ */ n("span", { className: t.clear, children: /* @__PURE__ */ n(
+}) => /* @__PURE__ */ o(f, { size: e, color: i, label: a, className: p(t.field, c), children: /* @__PURE__ */ m("div", { className: t.container, children: [
+  /* @__PURE__ */ o(d, { ...l, type: "search", value: n, className: t.input }),
+  /* @__PURE__ */ o(_, { svgElement: h, className: t.icon }),
+  r && !!n && /* @__PURE__ */ o("span", { className: t.clear, children: /* @__PURE__ */ o(
     u,
     {
       size: "custom",

package/dist/global.css

@@ -1,7 +1,7 @@
 @import "@digdir/designsystemet-css/index.css";
 @import "@digdir/designsystemet-theme";
 
-@import "./tokens/design-tokens-build/theme.css";
+@import "tokens/design-tokens-build/theme.css";
 
 @import "./data-theme.css";
 @import "./data-padding.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.52.4",
+  "version": "0.52.6",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -38,6 +38,7 @@
     "@storybook/addon-vitest": "^10.1.11",
     "@storybook/react-vite": "10.1.11",
     "@testing-library/react": "^16.3.0",
+    "@types/node": "^25.0.7",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-react-swc": "^3.9.0",
@@ -53,6 +54,7 @@
     "storybook": "^10.1.11",
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-theme-provider": "^0.2.10",
+    "tsx": "^4.21.0",
     "typescript": "^5.8.3",
     "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4",
@@ -85,6 +87,7 @@
     "test-storybook": "vitest --run --project=storybook",
     "test-storybook-watch": "vitest --project=storybook",
     "ci:test-storybook": "pnpm dlx concurrently -k -s first \"pnpm storybook\" \"pnpm dlx wait-on http://localhost:6006 && pnpm test-storybook\"",
-    "install:browsers": "pnpm exec playwright install"
+    "install:browsers": "pnpm exec playwright install",
+    "build-tokens": "node --import tsx scripts/build-tokens.ts && pnpm biome check ./lib/css/tokens/design-tokens-build/. --write"
   }
 }