v1.9.0

@digdir/designsystemet@1.9.0

Minor Changes

• Add ability to override focus colors from config: (#4320)

  {
    "overrides": {
      "focus": {
        "inner": { "light": "HEX", "dark": "HEX" },
        "outer": { "light": "HEX", "dark": "HEX" }
      }
    }
  }

  This comes with a change to you design tokens, where focus colors are now on the theme layer.
  Make sure you rebuild your tokens: npx @digdir/designsystemet tokens create <options> --clean

Patch Changes

• Update @tokens-studio/sd-transforms to 2.0.3 (#4315)

• Updated dependencies []:

  • @digdir/designsystemet-types@1.9.0

@digdir/designsystemet-css@1.9.0

Minor Changes

• Dialog: data-placement selector styles the Dialog as a "drawer"-component from the direction given (left | right | top | bottom or center which is the default) (#4323)
  Added 3 new local variables:
  • --dsc-dialog-placement-inline-max-width (max-width when placement="left | right")
  • --dsc-dialog-placement-block-max-width (max-width when placement="top | bottom")
  • --dsc-dialog-transition-duration (duration for the slide in animations)

Patch Changes

• Input, Search, Suggestion, Textfield: Uppercase Å was cut off at the top in Chrome and Safari, making it look like Ă (#4301)

• link: Style background, border, and padding regardless of default browser styles (#4231) (#4302)

• Add export for a default theme under /theme. (#4328)
  If you are using the default theme from @digdir/designsystemet-theme, we recommend importing the CSS from @digdir/designsystemet-css/theme.css and removing @digdir/designsystemet-theme from your dependencies.

@digdir/designsystemet-react@1.9.0

Minor Changes

• Dialog: added placement prop. This will set data-placement and style the Dialog as a "drawer"-component from the direction given: left | right | top | bottom or center (default) (#4323)

Patch Changes

• SuggestionClear: send onClick. In earlier versions onClick was never called (#4327)

• Popover: Fix controlled open state going out of sync (#4314)

• Update npm non-major dependencies (#4308)

• Updated dependencies []:

  • @digdir/designsystemet-types@1.9.0

@digdir/designsystemet-theme@1.9.0

Patch Changes

• Export designsystemet.css under @digdir/designsystemet-theme/index.css (#4291)

• Updated dependencies []:

  • @digdir/designsystemet-types@1.9.0

@digdir/designsystemet-types@1.9.0

v1.8.0

@digdir/designsystemet-theme

Minor Changes

• Move submodule @digdir/designsystemet/types to a new package @digdir/designsystemet-types and change all references. (#4241)

  After re-running tokens build downstream, this removes transitive dependencies on runtime dependencies on CLI tools like commander and style-dictionary which are never used in runtime, but are required for the CLI to function. It also makes code which doesn't use the CLI unaffected by our node version limitations (currently >= 22 due to style-dictionary).

  @digdir/designsystemet/types is preserved for now as a deprecated re-export of @digdir/designsystemet-types to avoid breaking people's builds.

Patch Changes

• Update npm non-major dependencies (#4262)

• Updated dependencies [c2faf2e]:

  • @digdir/designsystemet-types@1.8.0

@digdir/designsystemet-react

Minor Changes

• Move submodule @digdir/designsystemet/types to a new package @digdir/designsystemet-types and change all references. (#4241)

  After re-running tokens build downstream, this removes transitive dependencies on runtime dependencies on CLI tools like commander and style-dictionary which are never used in runtime, but are required for the CLI to function. It also makes code which doesn't use the CLI unaffected by our node version limitations (currently >= 22 due to style-dictionary).

  @digdir/designsystemet/types is preserved for now as a deprecated re-export of @digdir/designsystemet-types to avoid breaking people's builds.

Patch Changes

• Update npm non-major dependencies (#4275)

• Update npm non-major dependencies (#4242)

• Popover: Fix unnecesary call of onOpen and missing call of onClose (#4230)

  • Don't call onOpen when clicking Popover.Trigger when Popover is already open.
  • Call onClose when a controlled Popover is closed by clicking on Popover.Trigger.

• Update npm non-major dependencies (#4262)

• Update react and react-dom to 19.2.1 (#4276)

• Updated dependencies [c2faf2e]:

  • @digdir/designsystemet-types@1.8.0

@digdir/designsystemet-css

Patch Changes

• badge: Set display: inline-flex on .ds-badge (#4269)

• Update npm non-major dependencies (#4242)

• select: Fix :hover on <label> adding border to <select> (#4248)

• Update npm non-major dependencies (#4262)

@digdir/designsystemet

Minor Changes

• Move submodule @digdir/designsystemet/types to a new package @digdir/designsystemet-types and change all references. (#4241)

  After re-running tokens build downstream, this removes transitive dependencies on runtime dependencies on CLI tools like commander and style-dictionary which are never used in runtime, but are required for the CLI to function. It also makes code which doesn't use the CLI unaffected by our node version limitations (currently >= 22 due to style-dictionary).

  @digdir/designsystemet/types is preserved for now as a deprecated re-export of @digdir/designsystemet-types to avoid breaking people's builds.

Patch Changes

• Update npm non-major dependencies (#4275)

• Update npm non-major dependencies (#4242)

• Update npm non-major dependencies (#4262)

• Update dependency @tokens-studio/sd-transforms to v2 (#4271)

• Updated dependencies [c2faf2e]:

  • @digdir/designsystemet-types@1.8.0

@digdir/designsystemet-types@1.8.0

Minor Changes

• Move submodule @digdir/designsystemet/types to a new package @digdir/designsystemet-types and change all references. (#4241)

  After re-running tokens build downstream, this removes transitive dependencies on runtime dependencies on CLI tools like commander and style-dictionary which are never used in runtime, but are required for the CLI to function. It also makes code which doesn't use the CLI unaffected by our node version limitations (currently >= 22 due to style-dictionary).

  @digdir/designsystemet/types is preserved for now as a deprecated re-export of @digdir/designsystemet-types to avoid breaking people's builds.

v1.7.3

@digdir/designsystemet@1.7.3

@digdir/designsystemet-css@1.7.3

@digdir/designsystemet-react@1.7.3

Patch Changes

• Update npm non-major dependencies (#4233)

• Tooltip: Check if trim() is available (#4239)

  • Fixes if Tooltip has <svg> as a child

@digdir/designsystemet-theme@1.7.3

v1.7.2

@digdir/designsystemet@1.7.2

Patch Changes

• Add option to override linkVisited color in config: (#4182)

  "theme": {
    "overrides": {
      "linkVisited": {
        "light": "#ff1234",
        "dark": "#1234ff"
      }
    }
  }

• New command that lets you generate a config file from your design tokens: (#4207)
  npx @digdir/designsystemet generate-config-from-tokens --dir <path to design tokens>

  • This command does not include any overrides you may have done.

• Update npm non-major dependencies (#4193)

• Update npm non-major dependencies (#4214)

• For your config file, you can now get the schema file from designsystemet.no (#4195)

  "$schema": "https://designsystemet.no/schemas/cli/[VERSION].json"

@digdir/designsystemet-css@1.7.2

Patch Changes

• input: Remove hover effect when <label> is hovered (#4196)

• tag: Add new variant, [data-variant="outline"]. (#4173)

  • To use the old variant, either don't set data-variant, or set it to default.

• Update npm non-major dependencies (#4214)

• card: Add support for <picture> (#4137)

• search: Don't set position: relative, but use isolation: isolate on .ds-search (#4212)

  • This removes z-index on button[type="reset"]

• tag: New css variables to go with [data-variant="outline"]: (#4173)

  • --dsc-tag-border-width
  • --dsc-tag-border-color
  • --dsc-tag-border-style

@digdir/designsystemet-react@1.7.2

Patch Changes

• Update @u-elements/combobox to v1.0.4 (#4226)

• Dialog: If the browser supports closedBy on <dialog>, we let the browser handle it (#4210)

• Tooltip: Tooltip is now automatically aria-describedby or aria-labelledby based on the content of the trigger component. (#4202)

  • This can be overridden with the new type-prop that accepts decribedby or labelledby.

• Update npm non-major dependencies (#4193)

• Update npm non-major dependencies (#4214)

• Tag: Add new prop variant (#4173)

  • Accepts default|outline. default is the default value.

@digdir/designsystemet-theme@1.7.2

Patch Changes

• Update npm non-major dependencies (#4214)

v1.7.1

@digdir/designsystemet@1.7.1

@digdir/designsystemet-css@1.7.1

@digdir/designsystemet-react@1.7.1

Patch Changes

• Suggestion: Fix onSelectedChange not always calling the latest callback (#4176)

@digdir/designsystemet-theme@1.7.1

v1.7.0

@digdir/designsystemet@1.7.0

Minor Changes

• Restructure design tokens: (#4105)

  • Removes primitives/modes/color-scheme/[dark/light]/global.json
  • Removes global colors (red, green, blue, orange, purple)
  • Moved severity colors directly to your theme file
  • "link.color.visited" now references "$value": "color.link.visited" from your theme file

  Make sure to regenerate your design tokens: npx @digdir/designsystemet tokens create <options> --clean

Patch Changes

• Update npm non-major dependencies (#4147)

• Export zod schema and type for config file: (#4170)

  • configSchema
  • type ConfigSchema

• Add option override severity colors from config. (#4105)
  You can override the base-hexcode, as well as individual steps:

  "theme": {
    "overrides": {
      "colors": {
        "danger": {
          "background-default": {
            "light": "#0000ff",
            "dark": "#0000ff"
          }
        }
      },
      "severity": {
        "danger": "#ff00ff"
      }
    }
  }

• Update npm non-major dependencies (#4167)

• Update dependency ramda to ^0.32.0 (#4146)

@digdir/designsystemet-css@1.7.0

Patch Changes

• Field: Set display: block on <label> (#4134)

• ToggleGroup: ensure ToggleGroup has same height as Button, and that individual buttons within the group never wrap their text (#4139)

• ToggleGroup: use correct border-color (--ds-color-text-default) to match text/icon color on selected button in secondary variant (#4139)

• Label: Use line-height: var(--ds-body-md-line-height); (#4134)

• Field: data-field="description" no longer gets margin-top (#4134)

• chip: Remove hover effect on .ds-input (#4165)

@digdir/designsystemet-react@1.7.0

Patch Changes

• Update npm non-major dependencies (#4147)

• Suggestion, Tooltip, Popover: Positioning of floating elements rounded to nearest pixel (#4142)

• Update npm non-major dependencies (#4167)

• Dialog: Removed the autofocus attribute from built in closeButton, which prevented setting autofocus on other elements in Dialog. (#4159)

• Field.Counter: Adjustments to how it works internally. (#4140)
  Now, none of the validation messages underneath are aria-described on the input/textarea. This is done by an aria-live region only for screenreaders.

  A new hint prop has been added, to announce how many characters are allowed when entering the input/textarea. Default value is 'Maks %d tegn tillatt.'.

@digdir/designsystemet-theme@1.7.0

Patch Changes

• Update design-tokens to reflect changes made in @digdir/designsystemet. See changelog for changes (#4105)

v1.6.1

@digdir/designsystemet@1.6.1

Patch Changes

• Update npm non-major dependencies (#4129)

• Update npm non-major dependencies (#4110)

@digdir/designsystemet-css@1.6.1

Patch Changes

• pagination: If direct child of li has aria-hidden="true" it sets visibility: hidden; (#4123)

• input: Add outline on :hover when not :focus-visible, :disabled or [readonly]. This adds a few new CSS variables: (#4125)

  • --dsc-input-outline-color--hover
  • --dsc-input-outline-color--toggle--hover
  • --dsc-input-outline-width--hover
  • --dsc-input-outline-style--hover

• Chip, Tag: Ensure font size scales correctly with the current size mode by using the token --ds-body-sm-font-size. Note: there might be a small visual change for Chip used without explicit data-size, since it used to have font-size: 90%. (#4098)

@digdir/designsystemet-react@1.6.1

Patch Changes

• Button: For icon-buttons, dont render children if loading is true (#4023)

• Update npm non-major dependencies (#4129)

• Suggestion: Updated u-combobox to 1.0.2 to fix a bug where input would not clear in conrolled mode (#4119)

• Update npm non-major dependencies (#4110)

• usePagination: Hide prev/next buttons with aria-hidden="true" and visibility: hidden; instead of disabling (#4123)

• Textfield: Move counter error message before error (#4104)

@digdir/designsystemet-theme@1.6.1

v1.6.0

@digdir/designsystemet@1.6.0

Patch Changes

• Add possiblity to override colors in config: (#4073)

  "theme": {
    "overrides": {
      "colors": {
        "dominant": {
          "background-default": {
            "light": "#ff0000",
            "dark": "#000fff"
          },
          "background-tinted": {
            "light": "#f0ff00",
            "dark": "#ff00ff"
          }
        }
      }
    }
  }

• Font size variables are now rounded to the nearest pixel. This affects size modes "sm" and "lg", which had subpixel values after v1.5.0. (#4070)

• Update npm non-major dependencies (#4093)

• Update supported engines. Now supports node >=20 <25 (#3925)

@digdir/designsystemet-css@1.6.0

Minor Changes

• toggle-group: Added new secondary design available with data-variant="secondary" (or variant="secondary" in react) (#4092)

• toggle-group: Changed border-radius to --ds-border-radius-default, border-color to --ds-color-border-default and color to --ds-color-text-default. (#4092)

Patch Changes

• link: Change :focus-visible styling to use border, not background (#4095)

  • Removes --dsc-link-background--focus
  • Removes --dsc-link-color--focus

• link: Add --dsc-link-border-radius, default is var(--ds-border-radius-md) (#4095)

• Dropdown: Dropdown.Heading (h2-h6) - changed color to text-default and font-weight to 500 (#4076)

@digdir/designsystemet-react@1.6.0

Minor Changes

• ToggleGroup: Added new prop variant to enable new secondary design option (#4092)

Patch Changes

• Spinner: Allow using aria-hidden when aria-label is set, which can be useful to hide or show the element from the accessibility tree based on some UI state like whether a visual label is also rendered. (#4077)

• Update npm non-major dependencies (#4093)

• Avatar: Allow using aria-hidden instead of aria-label in situations with visible text (#4077)

@digdir/designsystemet-theme@1.6.0

Patch Changes

• Font size variables are now rounded to the nearest pixel. This affects size modes "sm" and "lg", which had subpixel values after v1.5.0. (#4070)

v1.5.1

@digdir/designsystemet@1.5.1

Patch Changes

• Update dependency @types/ramda to ^0.31.1 (#4060)

@digdir/designsystemet-css@1.5.1

Patch Changes

• Field: Make sure <select> and <textarea> is not on same line as label (#4048)

@digdir/designsystemet-react@1.5.1

Patch Changes

• Field.Counter: Update count when react controls the input (#4047)

• Popover: Only call onClose when Popover is open (#4065)

@digdir/designsystemet-theme@1.5.1

v1.5.0

@digdir/designsystemet@1.5.0

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

Patch Changes

• Update npm non-major dependencies (#4039)

@digdir/designsystemet-css@1.5.0

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

@digdir/designsystemet-react@1.5.0

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

Patch Changes

• Update npm non-major dependencies (#4039)

• Details: Updated u-details package to adress an issue where you could tab into the content when details was closed (firefox only) (#4022)

@digdir/designsystemet-theme@1.5.0

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.