fix(field, fieldset, suggestion): add experimental v2 export and missing variables

[mimarz]

Changes related to support for inverted theme #4740

• Added some missing variables (those that used neutral colors) so that users can properly override colors.
• Removed hardcoded variables for heading in dropdown as it was causing disconnect
• Added v2 export (inspired by how zod does work on new versions).
• Added experimental v2 changes discussed with @eirikbacker and to help NTNU with use of invert theme Problem with inverted theme #4740

Summary by CodeRabbit

• New Features

  • Introduced new CSS custom properties for field descriptions, fieldset descriptions, and suggestion option styling.
  • Added v2 design system variant with comprehensive token overrides for component theming.
  • Added new package export path for v2 variant access.

• Bug Fixes

  • Fixed dropdown heading elements to properly inherit typography styles instead of using hardcoded values.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2930bdb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet-web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 28dd9192-15c9-4036-a14f-5fa64ad41f80

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately describes the main changes: adding experimental v2 export and introducing missing CSS variables for field, fieldset, and suggestion components to support theme customization.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-css-component-variables

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Preview deployments for this pull request:

storybook - 26. May 2026 - 10:47

[Copilot]

Pull request overview

This PR expands the CSS customization surface by introducing missing component-level CSS variables (Field, Fieldset, Suggestion), adjusts dropdown heading styling, and adds an experimental “v2” CSS entry point that layers future token mapping overrides on top of the current stylesheet.

Changes:

• Added new component CSS variables and refactored hardcoded values to use them (Field/Fieldset/Suggestion).
• Adjusted dropdown heading styling by removing hardcoded color and font-weight.
• Introduced a new @digdir/designsystemet-css/v2 export backed by _v2-index.css + _v2-overrides.css.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/css/src/suggestion.css	Adds a missing checkmark border color CSS variable and uses it in the outline.
packages/css/src/fieldset.css	Adds a fieldset description color variable and fixes typos in compatibility comments.
packages/css/src/field.css	Adds field description/affix variables and replaces hardcoded values with variables.
packages/css/src/dropdown.css	Removes hardcoded heading color/font-weight rules.
packages/css/src/_v2-overrides.css	New v2 override mappings from neutral tokens to color-alias tokens.
packages/css/src/_v2-index.css	New v2 entrypoint importing the existing index plus overrides.
packages/css/package.json	Exposes a new ./v2 export path for consumers.
.changeset/petite-falcons-stick.md	Changeset for new fieldset variable.
.changeset/nice-queens-enter.md	Changeset for new field variable (needs update to cover all newly added vars).
.changeset/neat-rockets-build.md	Changeset for new suggestion variable (contains a stray control character).
.changeset/fresh-parks-sneeze.md	Changeset documenting dropdown heading style adjustment.

Comments suppressed due to low confidence (1)

packages/css/src/dropdown.css:34

• The dropdown heading selector no longer sets font-weight. Because these are native h2–h6 elements, UA styles typically apply font-weight: bolder, so headings may render bold and visually diverge from other dropdown items. Consider explicitly resetting to font-weight: inherit (or a dedicated dropdown heading variable) so the component styling is consistent across browsers.

  & > :is(h2, h3, h4, h5, h6) {
    align-items: center;
    box-sizing: border-box;
    font-size: inherit;
    margin: 0;
    min-height: var(--dsc-dropdown-item-size);
    padding: var(--dsc-dropdown-item-padding);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/css/src/_v2-index.css`:
- Around line 1-2: The two CSS imports in _v2-index.css currently use the
url(...) form which violates the stylelint import-notation rule; update the
import statements to the plain string form (remove url(...) and use quoted
module paths) for both './index.css' and './_v2-overrides.css' so the file
complies with the linter.

In `@packages/css/src/_v2-overrides.css`:
- Around line 87-91: Rename the misspelled selector `.ds-tooltipe` to the
correct `.ds-tooltip` so the v2 overrides apply; in the `_v2-overrides.css`
block that defines `--dsc-tooltip-background` and `--dsc-tooltip-color`, update
the selector name (`.ds-tooltipe` → `.ds-tooltip`) and keep the existing token
assignments intact to ensure the tooltip component picks up the color swaps.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 289619ea-14c1-4972-9b1d-c594cc2a5153

📥 Commits

Reviewing files that changed from the base of the PR and between 42a74b8 and 883685f.

📒 Files selected for processing (11)

• .changeset/fresh-parks-sneeze.md
• .changeset/neat-rockets-build.md
• .changeset/nice-queens-enter.md
• .changeset/petite-falcons-stick.md
• packages/css/package.json
• packages/css/src/_v2-index.css
• packages/css/src/_v2-overrides.css
• packages/css/src/dropdown.css
• packages/css/src/field.css
• packages/css/src/fieldset.css
• packages/css/src/suggestion.css

💤 Files with no reviewable changes (1)

• packages/css/src/dropdown.css

[kebbet]

Thanks for working on this @mimarz!

I can see in the playbook that the changes suggested here adresses most issues highlighted by @Febakke in #4506

With the tabs change (to only use theme color) the "active" state might need a change in visualization. Either with bold as suggested or some other form of visual key.

[mimarz]

Thanks for working on this @mimarz!

I can see in the playbook that the changes suggested here adresses most issues highlighted by @Febakke in #4506

With the tabs change (to only use theme color) the "active" state might need a change in visualization. Either with bold as suggested or some other form of visual key.

Indeed. Description text also needs adjustments as they are to strong color wise. We are thinking using font-weight here instead, so same color on label and description, but label has font-weight 600 to differentiate.

Thanks for testing!

[mimarz]

Setting this to review to see what visual tests show for v2.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

[Barsnes]

seems to work fine