Skip to content

Commit 0b01429

Browse files
github-actions[bot]mimarz
github-actions[bot]
authored and
mimarz
committed
chore: new release candidate (next) (#2592)
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`. All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>. <sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. <sup>2</sup>: 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`. All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>. <sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. <sup>2</sup>: 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`. All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>. <sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. <sup>2</sup>: 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`. All<sup>1</sup> 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-*`<sup>2</sup>, 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-*`<sup>2</sup>. <sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors. <sup>2</sup>: 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>
1 parent a221a12 commit 0b01429

File tree

9 files changed

+356
-4
lines changed

9 files changed

+356
-4
lines changed

‎.changeset/pre.json

+58
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,43 @@
1818
"beige-grapes-report",
1919
"blue-rocks-pull",
2020
"blue-singers-switch",
21+
"blue-stingrays-heal",
2122
"brave-months-shop",
2223
"brave-months-sleep",
2324
"bright-knives-remain",
25+
"brown-walls-smell",
2426
"chatty-cheetahs-fetch",
2527
"chilled-icons-chew",
2628
"chilled-pumas-march",
29+
"clean-insects-move",
30+
"clean-lizards-chew",
2731
"clever-cobras-rescue",
2832
"cool-lamps-drive",
2933
"curvy-oranges-notice",
3034
"cyan-adults-roll",
35+
"dull-buttons-argue",
36+
"eight-dancers-deliver",
3137
"eighty-cougars-think",
3238
"eleven-bags-shop",
39+
"eleven-experts-raise",
3340
"eleven-peaches-agree",
41+
"empty-pears-hide",
3442
"empty-singers-yell",
43+
"fair-beds-destroy",
3544
"famous-pillows-cheat",
3645
"few-brooms-confess",
3746
"few-plums-drum",
47+
"few-squids-speak",
3848
"fifty-buses-beam",
49+
"fifty-hornets-hang",
3950
"five-apricots-scream",
51+
"five-pens-accept",
52+
"five-turkeys-confess",
4053
"flat-experts-drop",
54+
"fluffy-coins-run",
4155
"four-pears-tie",
56+
"four-schools-wait",
57+
"friendly-cups-kiss",
4258
"friendly-islands-punch",
4359
"gold-chairs-jog",
4460
"gorgeous-readers-burn",
@@ -47,43 +63,77 @@
4763
"happy-worms-applaud",
4864
"healthy-apples-explode",
4965
"heavy-rabbits-boil",
66+
"hip-brooms-brush",
5067
"hip-masks-greet",
5168
"hip-schools-greet",
5269
"honest-roses-hunt",
70+
"hot-crews-perform",
5371
"hot-ligers-rush",
5472
"hot-weeks-tease",
73+
"hungry-moles-repeat",
74+
"kind-eyes-cheat",
5575
"lemon-countries-smoke",
5676
"long-boxes-sniff",
77+
"loud-bobcats-look",
5778
"loud-tips-return",
5879
"mean-ducks-argue",
80+
"mean-snails-visit",
5981
"metal-bananas-notice",
6082
"metal-tomatoes-compete",
83+
"mighty-buttons-yell",
6184
"mighty-days-eat",
85+
"nasty-turtles-happen",
6286
"nine-cameras-peel",
87+
"nine-countries-invent",
88+
"ninety-horses-juggle",
6389
"odd-hornets-sleep",
90+
"old-melons-stare",
91+
"old-sheep-dress",
92+
"olive-tools-cry",
93+
"olive-waves-build",
94+
"orange-months-listen",
6495
"plenty-parents-rest",
96+
"plenty-singers-matter",
6597
"plenty-vans-sneeze",
98+
"popular-jeans-happen",
6699
"pretty-dancers-taste",
67100
"proud-walls-flash",
68101
"purple-berries-repeat",
69102
"quiet-mangos-cry",
103+
"quiet-rings-heal",
104+
"real-zoos-fail",
70105
"red-queens-love",
71106
"rich-carrots-deny",
107+
"rotten-zoos-live",
108+
"rude-lies-smile",
109+
"selfish-meals-pump",
72110
"serious-frogs-rescue",
73111
"seven-ladybugs-admire",
112+
"seven-tips-rest",
74113
"shaggy-bears-tan",
75114
"shaggy-rockets-repair",
115+
"shiny-dryers-count",
76116
"shiny-kiwis-switch",
77117
"short-walls-judge",
118+
"shy-cameras-approve",
78119
"six-carrots-guess",
79120
"six-trees-tie",
80121
"slimy-bees-arrive",
122+
"slimy-buttons-train",
123+
"slow-impalas-vanish",
124+
"slow-news-act",
125+
"small-houses-stare",
81126
"small-queens-breathe",
127+
"smooth-radios-leave",
128+
"smooth-wombats-grab",
82129
"spotty-oranges-guess",
83130
"spotty-pumas-cross",
131+
"stale-tables-eat",
132+
"strange-jars-compete",
84133
"strong-flowers-ring",
85134
"strong-ghosts-marry",
86135
"stupid-tables-applaud",
136+
"sweet-dolphins-hang",
87137
"swift-forks-drop",
88138
"tall-guests-arrive",
89139
"tame-rats-mix",
@@ -93,9 +143,17 @@
93143
"three-carrots-hammer",
94144
"three-dingos-unite",
95145
"three-ducks-chew",
146+
"three-moles-attack",
147+
"tidy-cheetahs-cry",
148+
"twelve-onions-laugh",
149+
"twenty-cheetahs-leave",
150+
"violet-steaks-repeat",
151+
"wet-scissors-tickle",
152+
"wise-cooks-compare",
96153
"wise-countries-double",
97154
"witty-clouds-judge",
98155
"witty-moons-sleep",
156+
"witty-moose-scream",
99157
"yellow-zoos-camp"
100158
]
101159
}

‎packages/cli/CHANGELOG.md

+55
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,60 @@
11
# Change Log
22

3+
## 1.0.0-next.36
4+
5+
### Minor Changes
6+
7+
- React components and css now support custom colors through the `data-color` attribute. ([#2703](https://github.com/digdir/designsystemet/pull/2703))
8+
9+
**BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`.
10+
11+
All<sup>1</sup> css targeting `data-color` has been changed to work with all custom colors generated by the CLI.
12+
13+
`Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`<sup>2</sup>, unless `data-color` is set directly on the element.
14+
15+
For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element.
16+
17+
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-*`<sup>2</sup>.
18+
19+
<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors.
20+
<sup>2</sup>: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`.
21+
22+
- 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](https://github.com/digdir/designsystemet/pull/2641))
23+
24+
Example, for the `neutral` scale:
25+
26+
```css
27+
var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
28+
var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */
29+
var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */
30+
var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */
31+
var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */
32+
var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */
33+
var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */
34+
var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */
35+
var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */
36+
var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */
37+
var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */
38+
var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */
39+
var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */
40+
var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */
41+
var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */
42+
```
43+
44+
...and similarly for `accent`, `brand1`, `brand2` and `brand3`.
45+
46+
- 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](https://github.com/digdir/designsystemet/pull/2733))
47+
48+
- Implemented a more flexible system of semantic border-radius tokens. ([#2497](https://github.com/digdir/designsystemet/pull/2497))
49+
50+
### Patch Changes
51+
52+
- Removed `init` command. Use `tokens create` instead. ([#2616](https://github.com/digdir/designsystemet/pull/2616))
53+
54+
- Update global colors ([#2662](https://github.com/digdir/designsystemet/pull/2662))
55+
56+
- chore: change default tokens build output folder ([`f8986b8316894ef5cd55f6ee232e4f6aaae6486a`](https://github.com/digdir/designsystemet/commit/f8986b8316894ef5cd55f6ee232e4f6aaae6486a))
57+
358
## 1.0.0-next.35
459

560
### Minor Changes

‎packages/cli/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digdir/designsystemet",
3-
"version": "1.0.0-next.35",
3+
"version": "1.0.0-next.36",
44
"description": "CLI for Designsystemet",
55
"author": "Designsystemet team",
66
"repository": {

‎packages/css/CHANGELOG.md

+94
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,99 @@
11
# Change Log
22

3+
## 1.0.0-next.36
4+
5+
### Major Changes
6+
7+
- Search: New compound API ([#2708](https://github.com/digdir/designsystemet/pull/2708))
8+
9+
- Radio + Checkbox: ([#2607](https://github.com/digdir/designsystemet/pull/2607))
10+
- Use `label` prop instead of `children` as label text
11+
- Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead
12+
13+
### Minor Changes
14+
15+
- React components and css now support custom colors through the `data-color` attribute. ([#2703](https://github.com/digdir/designsystemet/pull/2703))
16+
17+
**BREAKING CHANGE**: All React components that had a `color` prop have been changed to use `data-color`.
18+
19+
All<sup>1</sup> css targeting `data-color` has been changed to work with all custom colors generated by the CLI.
20+
21+
`Avatar`, `Badge`, `Button`, and `Link` use `--ds-color-accent-*`<sup>2</sup>, unless `data-color` is set directly on the element.
22+
23+
For components that had a `color` prop, but defaulted to something other than `"accent"`, `data-color` must also be set directly on the element.
24+
25+
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-*`<sup>2</sup>.
26+
27+
<sup>1</sup>: ...except `Alert`, which only supports `info`, `warning`, `danger` and `success` colors.
28+
<sup>2</sup>: If an `"accent"` color is not defined in the theme, the `--ds-color-accent-*` variables will point to the first `main-color`.
29+
30+
- Implemented a more flexible system of semantic border-radius tokens. ([#2497](https://github.com/digdir/designsystemet/pull/2497))
31+
32+
### Patch Changes
33+
34+
- Accordion: Fix chevron abandoning parent in scroll container ([#2699](https://github.com/digdir/designsystemet/pull/2699))
35+
36+
- SkipLink: Add css variables ([#2626](https://github.com/digdir/designsystemet/pull/2626))
37+
38+
- ValidationMessage: Add icon when `error={true}` ([#2596](https://github.com/digdir/designsystemet/pull/2596))
39+
40+
- ValidationMessage: fix icon abandoning the component when scrolling ([#2646](https://github.com/digdir/designsystemet/pull/2646))
41+
42+
- Accordion: Add css variable for chevron ([#2626](https://github.com/digdir/designsystemet/pull/2626))
43+
44+
- CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context ([#2541](https://github.com/digdir/designsystemet/pull/2541))
45+
46+
- CSS: Move default background-color to `<body>` element ([#2754](https://github.com/digdir/designsystemet/pull/2754))
47+
48+
- Dropdown: Add `Dropdown.Button` for more explicit API ([#2694](https://github.com/digdir/designsystemet/pull/2694))
49+
50+
- Breadcrumbs: Add css variable for chevron ([#2626](https://github.com/digdir/designsystemet/pull/2626))
51+
52+
- Input: Sufficient color contrast for readonly ([#2621](https://github.com/digdir/designsystemet/pull/2621))
53+
54+
- Alert: fix icon abandoning the component when scrolling ([#2648](https://github.com/digdir/designsystemet/pull/2648))
55+
56+
- chip: Fix wrong font sizes ([#2595](https://github.com/digdir/designsystemet/pull/2595))
57+
58+
- Button: Fix SVG and images shrinking in flex containers ([#2612](https://github.com/digdir/designsystemet/pull/2612))
59+
60+
- Fieldset: Move to compound components `Fieldset.Legend` and `Fieldset.Description` ([#2705](https://github.com/digdir/designsystemet/pull/2705))
61+
62+
- Table: add `z-index` to stickhy header ([#2761](https://github.com/digdir/designsystemet/pull/2761))
63+
64+
- Tooltip: Add more variables ([#2626](https://github.com/digdir/designsystemet/pull/2626))
65+
66+
- Button: Use font-weight `--ds-font-weight-medium` ([#2618](https://github.com/digdir/designsystemet/pull/2618))
67+
68+
- Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility ([#2502](https://github.com/digdir/designsystemet/pull/2502))
69+
70+
- Chip: Use correct `32px` height to align nicely with `<Tag>` ([#2683](https://github.com/digdir/designsystemet/pull/2683))
71+
72+
- Combobox: fix overflow on screens narrower than ~340px ([#2570](https://github.com/digdir/designsystemet/pull/2570))
73+
74+
- Label: Fix icon abandoning parent in scroll container ([#2699](https://github.com/digdir/designsystemet/pull/2699))
75+
76+
- Label: Use data attributes for styling ([#2588](https://github.com/digdir/designsystemet/pull/2588))
77+
78+
ValidationMessage: Use data attributes for styling
79+
80+
- Select + Textarea: ([#2571](https://github.com/digdir/designsystemet/pull/2571))
81+
82+
- Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API
83+
84+
- Pagination: Add css variable for chevron ([#2626](https://github.com/digdir/designsystemet/pull/2626))
85+
86+
- Field.Affix: ([#2793](https://github.com/digdir/designsystemet/pull/2793))
87+
88+
- Rename `Field.AffixWrapper` to `Field.Affixes`
89+
- Support inputs with `size` attribute
90+
91+
- Remove `baseline` layer and fix layerorder for typography ([#2588](https://github.com/digdir/designsystemet/pull/2588))
92+
93+
- Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions. ([#2615](https://github.com/digdir/designsystemet/pull/2615))
94+
95+
- Table: Add `Table.Foot` and style caption ([#2744](https://github.com/digdir/designsystemet/pull/2744))
96+
397
## 1.0.0-next.35
498

599
### Patch Changes

‎packages/css/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digdir/designsystemet-css",
3-
"version": "1.0.0-next.35",
3+
"version": "1.0.0-next.36",
44
"description": "CSS for Designsystemet",
55
"author": "Designsystemet team",
66
"repository": {

0 commit comments

Comments
 (0)