@dep-dio/dio-designsystem

DIO design system built on Designsystemet.

Storybook and repository docs: dio-designsystemet README.

Install

npm install @dep-dio/dio-designsystem

Peer dependencies for Vite sprite icons (optional):

npm install -D vite vite-plugin-svg-icons

Usage

Styles

Same stylesheet, two entry points (same idea as @digdir/designsystemet-css):

import "@dep-dio/dio-designsystem/styles"

@import "@dep-dio/dio-designsystem/styles.css";

Web components

import "@dep-dio/dio-designsystem/web"

Registers Designsystemet web components and DIO custom elements.

React components

import { Button } from "@dep-dio/dio-designsystem/react"

Use React components when the consuming application is built with React. For server-rendered HTML, CMS templates (for example Optimizely) and other stacks, use plain HTML markup with styles and web components instead.

Nav icons (Aksel)

import { StarIcon } from "@dep-dio/dio-designsystem/icons"

Vite SVG sprite

// vite.config.ts
import { createDioSvgIconsPlugin } from "@dep-dio/dio-designsystem/vite-icons-plugin"

export default defineConfig({
    plugins: [createDioSvgIconsPlugin()],
})

import "@dep-dio/dio-designsystem/svg-icons-register"

<svg width="24" height="24" aria-hidden="true">
    <use href="#dio-chevron-right" />
</svg>

SCSS utils

@use "@dep-dio/dio-designsystem/scss-utils" as *;

.my-link {
    @include dio-text-small;
}

Publishing

@dep-dio/dio-designsystem is published to npm as a public scoped package. Storybook (@design/storybook) is private and ignored by Changesets.

Versions follow Semantic Versioning:

• patch — bug fixes, internal refactors, non-breaking style tweaks
• minor — new components, new exports, backward-compatible features
• major — breaking API, class name, or markup changes for consumers

Changelog entries land in CHANGELOG.md when the version is bumped.

1. Add a changeset (every PR that should release)

Releases use Changesets. On the feature branch:

npx changeset

1. Choose @dep-dio/dio-designsystem
2. Pick patch, minor, or major
3. Write the release note: a plain summary line first, then optional bullet details

The changelog prefixes the summary with the commit hash (- abc1234: …). Do not start the summary with -, or the first line looks mangled. Prefer:

Typography, theme colors, SCSS utils, and new icons

- Explicit DIO font-size overrides (small `1–4`, medium `1–5`)
- `./mixins` export replaced by `./scss-utils`

Edit the generated .changeset/*.md if the interactive prompt only captured a single line. Commit it with the code change, then merge the PR to main.

2. Release via GitHub Actions

Publishing is done only through the Release workflow (changesets/action). It is manual: open that page → Run workflow.

Each run does one of these (never both):

| State on main | What the workflow does | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Pending .changeset/*.md files | Opens or updates a “chore: version packages” PR (bumps version + changelog, removes consumed changesets) | | No pending changesets, but a new version is unpublished | Builds and publishes that version to npm |

Release steps:

1. Merge feature PRs that include changeset files
2. Run Release → review and merge the version PR
3. Run Release again → publishes to npm

You always need both workflow runs: version first, publish second.

Repo setup (once): add an NPM_TOKEN secret (npm automation token with publish rights for @dep-dio/dio-designsystem). The action uses the default GITHUB_TOKEN for the version PR.