feat: new border-radius tokens #2497

Febakke · 2024-09-24T06:42:35Z

changeset-bot · 2024-09-24T06:42:39Z

🦋 Changeset detected

Latest commit: ed62a18

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

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet-theme	Minor
@digdir/designsystemet	Minor
@digdir/designsystemet-css	Minor
@digdir/designsystemet-react	Minor

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

github-actions · 2024-09-24T06:42:51Z

Preview deployments for this pull request:

Storybook - 22. Oct 2024 - 13:29

Storefront - 22. Oct 2024 - 13:31

Theme - 22. Oct 2024 - 13:30

github-actions · 2024-09-24T06:43:50Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	57.83%	3624 / 6266
🔵	Statements	57.83%	3624 / 6266
🔵	Functions	83.91%	167 / 199
🔵	Branches	75.69%	514 / 679

File Coverage

No changed files found.

Generated in workflow #480 for commit ed62a18 by the Vitest Coverage Report Action

packages/css/chip.css

mimarz · 2024-10-17T05:32:41Z

Lets not forget we have to update theme-builder border-radius select to set the new border-radius tokens.

Barsnes · 2024-10-17T06:53:42Z

Lets not forget we have to update theme-builder border-radius select to set the new border-radius tokens.

I believe this is being changed in #2333. See preview deployment: https://pr-2333.theme.designsystemet.no/

Febakke · 2024-10-17T07:21:40Z

Lets not forget we have to update theme-builder border-radius select to set the new border-radius tokens.

@Thunear
When setting up border radius you can choose any value up to 9999. Maybe we can have a normal textfield with a default value they can change if they need to?

One issue is that the calculation used to create the border-radius tokens is done inside the token structure. Maybe this should be handled by the CLI instead? Then we can just swap the border-radius values with the Figma plug-in as we do with colors?

…r overriding

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/[email protected] ### 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/[email protected] ### 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/[email protected] ### 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/[email protected] ### 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>

Febakke requested review from mimarz, Barsnes and eirikbacker as code owners September 24, 2024 06:42

mimarz changed the title ~~Added new tokens and removed old~~ feat: New border-radius tokens Sep 24, 2024

mimarz changed the title ~~feat: New border-radius tokens~~ feat: new border-radius tokens Sep 24, 2024

Febakke requested a review from unekinn as a code owner October 8, 2024 06:43

unekinn force-pushed the add-new-border-radius-tokens branch 2 times, most recently from 9580322 to f93fdc6 Compare October 16, 2024 15:23

unekinn reviewed Oct 16, 2024

View reviewed changes

packages/css/chip.css Outdated Show resolved Hide resolved

unekinn force-pushed the add-new-border-radius-tokens branch 2 times, most recently from c86137a to 96d2bf0 Compare October 17, 2024 09:51

Febakke and others added 10 commits October 22, 2024 13:03

feat(tokens): new border-radius tokens

0abc748

feat(cli): update tokens script to support calculations in border-radius

00a73e4

feat(theme): update themes based on new tokens

005e2f3

feat(css): use new border-radius tokens in components

1273a4a

Add changeset

12a4b30

fix(cli): update token templates

f1a4528

fix(css): use border-radius.full token instead of 50% in radio

cde6a0d

fix(css): let togglegroup specify the inner button's radius for easie…

9e40f52

…r overriding

update apps with new border-radius css vars

08f05a0

update migration script

b79da12

mimarz force-pushed the add-new-border-radius-tokens branch from 46a902c to b79da12 Compare October 22, 2024 11:04

mimarz added 2 commits October 22, 2024 13:13

Full border-radius on tooltip

9623e8b

fix tooltip border-radius

c6ec0c9

mimarz added 4 commits October 22, 2024 13:22

reduse base border-radius from 8 to 4

fe0e6d8

build new tokens

95b0be1

revert base border-radius for portal and tilsynet

ac274e4

build tokens

ed62a18

mimarz approved these changes Oct 22, 2024

View reviewed changes

mimarz merged commit 5f51c95 into next Oct 22, 2024
13 checks passed

mimarz deleted the add-new-border-radius-tokens branch October 22, 2024 12:38

This was referenced Oct 22, 2024

chore: new release candidate (next) #2592

Merged

chore: new release candidate (next) linus-jansson/designsystemet#6

Open

github-actions bot mentioned this pull request Oct 31, 2024

chore: new release candidate (next) elaffen/designsystemet-digdir#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new border-radius tokens #2497

feat: new border-radius tokens #2497

Febakke commented Sep 24, 2024 •

edited by unekinn

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

mimarz commented Oct 17, 2024

Barsnes commented Oct 17, 2024

Febakke commented Oct 17, 2024

feat: new border-radius tokens #2497

feat: new border-radius tokens #2497

Conversation

Febakke commented Sep 24, 2024 • edited by unekinn Loading

changeset-bot bot commented Sep 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 24, 2024 • edited Loading

github-actions bot commented Sep 24, 2024 • edited Loading

Coverage Report

mimarz commented Oct 17, 2024

Barsnes commented Oct 17, 2024

Febakke commented Oct 17, 2024

Febakke commented Sep 24, 2024 •

edited by unekinn

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading