chore: new release candidate (next) by github-actions[bot] · Pull Request #2592 · digdir/designsystemet

github-actions · 2024-10-09T10:44:28Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

next is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on next.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@digdir/designsystemet-css@1.0.0-next.36

Major Changes

Search: New compound API (#2708)
Radio + Checkbox: (#2607)
- Use label prop instead of children as label text
- Remove Radio.Group and Checkbox.Group and use Fieldset instead

Minor Changes

React components and css now support custom colors through the data-color attribute. (#2703)

BREAKING CHANGE: All React components that had a color prop have been changed to use data-color.

All¹ css targeting data-color has been changed to work with all custom colors generated by the CLI.

Avatar, Badge, Button, and Link use --ds-color-accent-*², unless data-color is set directly on the element.

For components that had a color prop, but defaulted to something other than "accent", data-color must also be set directly on the element.

All other components that defaulted to "accent", or previously only existed in "accent" color, now support data-color. They will also inherit their color from the closest data-color attribute. If none is found, they use --ds-color-accent-*².

¹: ...except Alert, which only supports info, warning, danger and success colors.
²: If an "accent" color is not defined in the theme, the --ds-color-accent-* variables will point to the first main-color.
Implemented a more flexible system of semantic border-radius tokens. (#2497)

Patch Changes

Accordion: Fix chevron abandoning parent in scroll container (#2699)
SkipLink: Add css variables (#2626)
ValidationMessage: Add icon when error={true} (#2596)
ValidationMessage: fix icon abandoning the component when scrolling (#2646)
Accordion: Add css variable for chevron (#2626)
CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context (#2541)
CSS: Move default background-color to <body> element (#2754)
Dropdown: Add Dropdown.Button for more explicit API (#2694)
Breadcrumbs: Add css variable for chevron (#2626)
Input: Sufficient color contrast for readonly (#2621)
Alert: fix icon abandoning the component when scrolling (#2648)
chip: Fix wrong font sizes (#2595)
Button: Fix SVG and images shrinking in flex containers (#2612)
Fieldset: Move to compound components Fieldset.Legend and Fieldset.Description (#2705)
Table: add z-index to stickhy header (#2761)
Tooltip: Add more variables (#2626)
Button: Use font-weight --ds-font-weight-medium (#2618)
Field: Adds <Field> component wrapping and connecting internal form elements for better accessibility (#2502)
Chip: Use correct 32px height to align nicely with <Tag> (#2683)
Combobox: fix overflow on screens narrower than ~340px (#2570)
Label: Fix icon abandoning parent in scroll container (#2699)
Label: Use data attributes for styling (#2588)

ValidationMessage: Use data attributes for styling
Select + Textarea: (#2571)
- Remove label, hideLabel, description, characterLimit and error as these will be part of Field API
Pagination: Add css variable for chevron (#2626)
Field.Affix: (#2793)
- Rename Field.AffixWrapper to Field.Affixes
- Support inputs with size attribute
Remove baseline layer and fix layerorder for typography (#2588)
Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions. (#2615)
Table: Add Table.Foot and style caption (#2744)

@digdir/designsystemet-react@1.0.0-next.36

Major Changes

Search: New compound API (#2708)
Dropdown: Add Dropdown.Button for more explicit API (#2694)
Switch: Use label prop instead of children to render label (#2773)
Fieldset: Move to compound components Fieldset.Legend and Fieldset.Description (#2705)
React components and css now support custom colors through the data-color attribute. (#2703)

BREAKING CHANGE: All React components that had a color prop have been changed to use data-color.

All¹ css targeting data-color has been changed to work with all custom colors generated by the CLI.

Avatar, Badge, Button, and Link use --ds-color-accent-*², unless data-color is set directly on the element.

For components that had a color prop, but defaulted to something other than "accent", data-color must also be set directly on the element.

All other components that defaulted to "accent", or previously only existed in "accent" color, now support data-color. They will also inherit their color from the closest data-color attribute. If none is found, they use --ds-color-accent-*².

¹: ...except Alert, which only supports info, warning, danger and success colors.
²: If an "accent" color is not defined in the theme, the --ds-color-accent-* variables will point to the first main-color.
Input+Select: Use native HTML size prop instead of htmlSize (#2697)
Radio + Checkbox: (#2607)
- Use label prop instead of children as label text
- Remove Radio.Group and Checkbox.Group and use Fieldset instead

Patch Changes

Dropdown: Rename DropdownContext to DropdownTriggerContext (#2782)
Textfield: Removed htmlSize, you can now use native size (#2710)
CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context (#2541)
Popover+Dropdown: Fix issue when combining controlled state with changing child elements (#2707)
Modal: Rename ModalContext to ModalTriggerContext (#2782)
Input: Sufficient color contrast for readonly (#2621)
Popover: Make sure arrow does not leave the popover (#2652)
Modal: Fix onClose not being called (#2622)
Textfield: Refactored characterLimit to counter and now use new Field.Counter sub-component (#2710)
useRadioGroup: Add hook to easily control groups of <Radio> components (#2739)
useCheckboxGroup: Add hook to easily control groups of <Checkbox> components (#2739)
Modal: Expose native close event object to onClose callback (#2738)
Textfield: Now works as expected with data-size (#2710)
Field: Adds <Field> component wrapping and connecting internal form elements for better accessibility (#2502)
Textfield: Added multiline for switching between input and textarea (#2710)
Tooltip: Be able to send string as children (#2777)
Textfield: Removed hideLabel, use aria-label or aria-describedby for "hidden" labels (#2710)
Avatar: Fix aria-hidden being wrongly added to a fragment (#2626)
Chip: Use correct 32px height to align nicely with <Tag> (#2683)
Label: Use data attributes for styling (#2588)

ValidationMessage: Use data attributes for styling
Select + Textarea: (#2571)
- Remove label, hideLabel, description, characterLimit and error as these will be part of Field API
Field.Affix: (#2793)
- Rename Field.AffixWrapper to Field.Affixes
- Support inputs with size attribute
Table: Add Table.Foot and style caption (#2744)
Popover: Rename PopoverContext to PopoverTriggerContext (#2782)
Spinner: aria-label required instead of title prop (#2682)
Textfield: Update to use Field internally (#2710)

@digdir/designsystemet@1.0.0-next.36

Minor Changes

React components and css now support custom colors through the data-color attribute. (#2703)

BREAKING CHANGE: All React components that had a color prop have been changed to use data-color.

All¹ css targeting data-color has been changed to work with all custom colors generated by the CLI.

Avatar, Badge, Button, and Link use --ds-color-accent-*², unless data-color is set directly on the element.

For components that had a color prop, but defaulted to something other than "accent", data-color must also be set directly on the element.

All other components that defaulted to "accent", or previously only existed in "accent" color, now support data-color. They will also inherit their color from the closest data-color attribute. If none is found, they use --ds-color-accent-*².

¹: ...except Alert, which only supports info, warning, danger and success colors.
²: If an "accent" color is not defined in the theme, the --ds-color-accent-* variables will point to the first main-color.

CSS variables: --ds-color-*-{1,2,...,13,contrast-1,contrast-2}, which were generated from the primitives layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead (#2641)

Example, for the neutral scale:

  var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
  var(--ds-color-neutral-background-subtle);  /* instead of: var(--ds-color-neutral-2) */
  var(--ds-color-neutral-surface-default);    /* instead of: var(--ds-color-neutral-3) */
  var(--ds-color-neutral-surface-hover);      /* instead of: var(--ds-color-neutral-4) */
  var(--ds-color-neutral-surface-active);     /* instead of: var(--ds-color-neutral-5) */
  var(--ds-color-neutral-border-subtle);      /* instead of: var(--ds-color-neutral-6) */
  var(--ds-color-neutral-border-default);     /* instead of: var(--ds-color-neutral-7) */
  var(--ds-color-neutral-border-strong);      /* instead of: var(--ds-color-neutral-8) */
  var(--ds-color-neutral-base-default);       /* instead of: var(--ds-color-neutral-9) */
  var(--ds-color-neutral-base-hover);         /* instead of: var(--ds-color-neutral-10) */
  var(--ds-color-neutral-base-active);        /* instead of: var(--ds-color-neutral-11) */
  var(--ds-color-neutral-text-subtle);        /* instead of: var(--ds-color-neutral-12) */
  var(--ds-color-neutral-text-default);       /* instead of: var(--ds-color-neutral-13) */
  var(--ds-color-neutral-contrast-default);   /* instead of: var(--ds-color-neutral-contrast-1) */
  var(--ds-color-neutral-contrast-subtle);    /* instead of: var(--ds-color-neutral-contrast-2) */

...and similarly for accent, brand1, brand2 and brand3.

CLI now supports creating themes with 1 or more "main" colors, a neutral color, and 1 or more "support" colors. The "main" and "support" colors can have arbitrary names. There can not be more than 4 colors of each category unless you're using Figma on the Enterprise plan, due to plan-based restrictions on the number of variable modes per collection. (#2733)
Implemented a more flexible system of semantic border-radius tokens. (#2497)

Patch Changes

Removed init command. Use tokens create instead. (#2616)
Update global colors (#2662)
chore: change default tokens build output folder (f8986b8316894ef5cd55f6ee232e4f6aaae6486a)

@digdir/designsystemet-theme@1.0.0-next.36

Minor Changes

React components and css now support custom colors through the data-color attribute. (#2703)

BREAKING CHANGE: All React components that had a color prop have been changed to use data-color.

All¹ css targeting data-color has been changed to work with all custom colors generated by the CLI.

Avatar, Badge, Button, and Link use --ds-color-accent-*², unless data-color is set directly on the element.

For components that had a color prop, but defaulted to something other than "accent", data-color must also be set directly on the element.

All other components that defaulted to "accent", or previously only existed in "accent" color, now support data-color. They will also inherit their color from the closest data-color attribute. If none is found, they use --ds-color-accent-*².

¹: ...except Alert, which only supports info, warning, danger and success colors.
²: If an "accent" color is not defined in the theme, the --ds-color-accent-* variables will point to the first main-color.

CSS variables: --ds-color-*-{1,2,...,13,contrast-1,contrast-2}, which were generated from the primitives layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead (#2641)

Example, for the neutral scale:

  var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
  var(--ds-color-neutral-background-subtle);  /* instead of: var(--ds-color-neutral-2) */
  var(--ds-color-neutral-surface-default);    /* instead of: var(--ds-color-neutral-3) */
  var(--ds-color-neutral-surface-hover);      /* instead of: var(--ds-color-neutral-4) */
  var(--ds-color-neutral-surface-active);     /* instead of: var(--ds-color-neutral-5) */
  var(--ds-color-neutral-border-subtle);      /* instead of: var(--ds-color-neutral-6) */
  var(--ds-color-neutral-border-default);     /* instead of: var(--ds-color-neutral-7) */
  var(--ds-color-neutral-border-strong);      /* instead of: var(--ds-color-neutral-8) */
  var(--ds-color-neutral-base-default);       /* instead of: var(--ds-color-neutral-9) */
  var(--ds-color-neutral-base-hover);         /* instead of: var(--ds-color-neutral-10) */
  var(--ds-color-neutral-base-active);        /* instead of: var(--ds-color-neutral-11) */
  var(--ds-color-neutral-text-subtle);        /* instead of: var(--ds-color-neutral-12) */
  var(--ds-color-neutral-text-default);       /* instead of: var(--ds-color-neutral-13) */
  var(--ds-color-neutral-contrast-default);   /* instead of: var(--ds-color-neutral-contrast-1) */
  var(--ds-color-neutral-contrast-subtle);    /* instead of: var(--ds-color-neutral-contrast-2) */

...and similarly for accent, brand1, brand2 and brand3.

Implemented a more flexible system of semantic border-radius tokens. (#2497)

Patch Changes

tokens: Removed validationmessage and label typography styles (#2698)
Update global colors (#2662)

mimarz

Lets go!

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @digdir/designsystemet-css@1.0.0-next.36 ### Major Changes - Search: New compound API ([#2708](#2708)) - Radio + Checkbox: ([#2607](#2607)) - Use `label` prop instead of `children` as label text - Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - Accordion: Fix chevron abandoning parent in scroll container ([#2699](#2699)) - SkipLink: Add css variables ([#2626](#2626)) - ValidationMessage: Add icon when `error={true}` ([#2596](#2596)) - ValidationMessage: fix icon abandoning the component when scrolling ([#2646](#2646)) - Accordion: Add css variable for chevron ([#2626](#2626)) - CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context ([#2541](#2541)) - CSS: Move default background-color to `<body>` element ([#2754](#2754)) - Dropdown: Add `Dropdown.Button` for more explicit API ([#2694](#2694)) - Breadcrumbs: Add css variable for chevron ([#2626](#2626)) - Input: Sufficient color contrast for readonly ([#2621](#2621)) - Alert: fix icon abandoning the component when scrolling ([#2648](#2648)) - chip: Fix wrong font sizes ([#2595](#2595)) - Button: Fix SVG and images shrinking in flex containers ([#2612](#2612)) - Fieldset: Move to compound components `Fieldset.Legend` and `Fieldset.Description` ([#2705](#2705)) - Table: add `z-index` to stickhy header ([#2761](#2761)) - Tooltip: Add more variables ([#2626](#2626)) - Button: Use font-weight `--ds-font-weight-medium` ([#2618](#2618)) - Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility ([#2502](#2502)) - Chip: Use correct `32px` height to align nicely with `<Tag>` ([#2683](#2683)) - Combobox: fix overflow on screens narrower than ~340px ([#2570](#2570)) - Label: Fix icon abandoning parent in scroll container ([#2699](#2699)) - Label: Use data attributes for styling ([#2588](#2588)) ValidationMessage: Use data attributes for styling - Select + Textarea: ([#2571](#2571)) - Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API - Pagination: Add css variable for chevron ([#2626](#2626)) - Field.Affix: ([#2793](#2793)) - Rename `Field.AffixWrapper` to `Field.Affixes` - Support inputs with `size` attribute - Remove `baseline` layer and fix layerorder for typography ([#2588](#2588)) - Modal backdrop was invisible in some browser versions. See <https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element> for affected versions. ([#2615](#2615)) - Table: Add `Table.Foot` and style caption ([#2744](#2744)) ## @digdir/designsystemet-react@1.0.0-next.36 ### Major Changes - Search: New compound API ([#2708](#2708)) - Dropdown: Add `Dropdown.Button` for more explicit API ([#2694](#2694)) - Switch: Use `label` prop instead of `children` to render label ([#2773](#2773)) - Fieldset: Move to compound components `Fieldset.Legend` and `Fieldset.Description` ([#2705](#2705)) - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - Input+Select: Use native HTML `size` prop instead of `htmlSize` ([#2697](#2697)) - Radio + Checkbox: ([#2607](#2607)) - Use `label` prop instead of `children` as label text - Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead ### Patch Changes - Dropdown: Rename `DropdownContext` to `DropdownTriggerContext` ([#2782](#2782)) - Textfield: Removed `htmlSize`, you can now use native `size` ([#2710](#2710)) - CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context ([#2541](#2541)) - Popover+Dropdown: Fix issue when combining controlled state with changing child elements ([#2707](#2707)) - Modal: Rename `ModalContext` to `ModalTriggerContext` ([#2782](#2782)) - Input: Sufficient color contrast for readonly ([#2621](#2621)) - Popover: Make sure arrow does not leave the popover ([#2652](#2652)) - Modal: Fix `onClose` not being called ([#2622](#2622)) - Textfield: Refactored `characterLimit` to `counter` and now use new `Field.Counter` sub-component ([#2710](#2710)) - useRadioGroup: Add hook to easily control groups of `<Radio>` components ([#2739](#2739)) - useCheckboxGroup: Add hook to easily control groups of `<Checkbox>` components ([#2739](#2739)) - Modal: Expose native close event object to onClose callback ([#2738](#2738)) - Textfield: Now works as expected with `data-size` ([#2710](#2710)) - Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility ([#2502](#2502)) - Textfield: Added `multiline` for switching between `input` and `textarea` ([#2710](#2710)) - Tooltip: Be able to send `string` as children ([#2777](#2777)) - Textfield: Removed `hideLabel`, use `aria-label` or `aria-describedby` for "hidden" labels ([#2710](#2710)) - Avatar: Fix `aria-hidden` being wrongly added to a fragment ([#2626](#2626)) - Chip: Use correct `32px` height to align nicely with `<Tag>` ([#2683](#2683)) - Label: Use data attributes for styling ([#2588](#2588)) ValidationMessage: Use data attributes for styling - Select + Textarea: ([#2571](#2571)) - Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API - Field.Affix: ([#2793](#2793)) - Rename `Field.AffixWrapper` to `Field.Affixes` - Support inputs with `size` attribute - Table: Add `Table.Foot` and style caption ([#2744](#2744)) - Popover: Rename `PopoverContext` to `PopoverTriggerContext` ([#2782](#2782)) - Spinner: `aria-label` required instead of `title` prop ([#2682](#2682)) - Textfield: Update to use `Field` internally ([#2710](#2710)) ## @digdir/designsystemet@1.0.0-next.36 ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - CSS variables: `--ds-color-*-{1,2,...,13,contrast-1,contrast-2}`, which were generated from the `primitives` layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead ([#2641](#2641)) Example, for the `neutral` scale: ```css var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */ var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */ var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */ var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */ var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */ var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */ var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */ var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */ var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */ var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */ var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */ var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */ var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */ var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */ var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */ ``` ...and similarly for `accent`, `brand1`, `brand2` and `brand3`. - CLI now supports creating themes with 1 or more "main" colors, a neutral color, and 1 or more "support" colors. The "main" and "support" colors can have arbitrary names. There can not be more than 4 colors of each category unless you're using Figma on the Enterprise plan, due to plan-based restrictions on the number of variable modes per collection. ([#2733](#2733)) - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - Removed `init` command. Use `tokens create` instead. ([#2616](#2616)) - Update global colors ([#2662](#2662)) - chore: change default tokens build output folder ([`f8986b8316894ef5cd55f6ee232e4f6aaae6486a`](f8986b8)) ## @digdir/designsystemet-theme@1.0.0-next.36 ### Minor Changes - React components and css now support custom colors through the `data-color` attribute. ([#2703](#2703)) **BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`. All1 css targeting `data-color` has been changed to work with all custom colors generated by the CLI. `Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`2, unless `data-color` is set directly on the element. For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element. All other components that defaulted to `"accent"`, or previously only existed in `"accent"` color, now support `data-color`. They will also inherit their color from the closest `data-color` attribute. If none is found, they use `--ds-color-accent-*`2. 1: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. 2: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`. - CSS variables: `--ds-color-*-{1,2,...,13,contrast-1,contrast-2}`, which were generated from the `primitives` layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead ([#2641](#2641)) Example, for the `neutral` scale: ```css var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */ var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */ var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */ var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */ var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */ var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */ var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */ var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */ var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */ var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */ var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */ var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */ var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */ var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */ var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */ ``` ...and similarly for `accent`, `brand1`, `brand2` and `brand3`. - Implemented a more flexible system of semantic border-radius tokens. ([#2497](#2497)) ### Patch Changes - tokens: Removed validationmessage and label typography styles ([#2698](#2698)) - Update global colors ([#2662](#2662)) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

github-actions bot requested a review from mimarz as a code owner October 9, 2024 10:44

github-actions bot force-pushed the changeset-release/next branch from 91d899c to ef5c587 Compare October 9, 2024 10:44

github-actions bot requested review from Barsnes, eirikbacker and unekinn as code owners October 9, 2024 10:44

github-actions bot force-pushed the changeset-release/next branch 25 times, most recently from d0e5086 to 3579090 Compare October 17, 2024 07:37

github-actions bot force-pushed the changeset-release/next branch 15 times, most recently from 6c31819 to 0f99c04 Compare November 11, 2024 13:28

github-actions bot force-pushed the changeset-release/next branch 9 times, most recently from bfb7961 to 04b1bb6 Compare November 19, 2024 19:37

github-actions bot force-pushed the changeset-release/next branch from 04b1bb6 to 4802025 Compare November 20, 2024 09:20

chore: new release (next)

e5f045f

github-actions bot force-pushed the changeset-release/next branch from 4802025 to e5f045f Compare November 20, 2024 09:53

mimarz approved these changes Nov 20, 2024

View reviewed changes

mimarz merged commit 566fa37 into next Nov 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: new release candidate (next)#2592

chore: new release candidate (next)#2592
mimarz merged 1 commit intonextfrom
changeset-release/next

github-actions bot commented Oct 9, 2024 •

edited

Loading

Uh oh!

mimarz left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

github-actions bot commented Oct 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Releases

@digdir/designsystemet-css@1.0.0-next.36

Major Changes

Minor Changes

Patch Changes

@digdir/designsystemet-react@1.0.0-next.36

Major Changes

Patch Changes

@digdir/designsystemet@1.0.0-next.36

Minor Changes

Patch Changes

@digdir/designsystemet-theme@1.0.0-next.36

Minor Changes

Patch Changes

Uh oh!

mimarz left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions bot commented Oct 9, 2024 •

edited

Loading