Skip to content

Commit 9973d83

Browse files
BarsnesBarsnes
committed
Squashed commit of the following:
commit ce23f32 Author: Eirik Backer <eirik.backer@gmail.com> Date: Mon Oct 28 10:31:21 2024 +0100 fix(Chip): use input component (#2683) - Fixes #2669 - Fixes wrong height implemented (now correctly `32px`) - Implements simplified states after dialogue with Marianne - Fixes better alignment of label vs. radio/checkbox - Implements logic so elements with the `ds-focus--visible` class automatically hides focus ring on children (no need for confusing, nested focus rings) commit d5e0ba1 Author: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> Date: Fri Oct 25 15:08:14 2024 +0200 refactor(tokens): changed spacing and sizing type to dimension (#2688) Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no> Co-authored-by: Michael Marszalek <mimarz@gmail.com> commit 6c1f99d Author: Eirik Backer <eirik.backer@gmail.com> Date: Fri Oct 25 13:52:51 2024 +0200 chore: remove tmp field styling in testing story (#2687) - Since field styling is now merged, `testing.stories.tsx` no longer needs to fake it commit f4f76d3 Author: Eirik Backer <eirik.backer@gmail.com> Date: Fri Oct 25 13:41:36 2024 +0200 fix(Heading+Label+ValidationMessage): clean up css styles (#2677) Figma task is added as #2676 commit d2fc6b9 Author: Tobias Barsnes <tobias.barsnes@digdir.no> Date: Fri Oct 25 13:16:17 2024 +0200 feat: rename `size` prop to `data-size` (#2680) resolves #2673 commit acef771 Author: Eirik Backer <eirik.backer@gmail.com> Date: Fri Oct 25 10:24:19 2024 +0200 fix(Input): inherit line-height (#2685) As pointed out by hawk-eye @mimarz 💪 🙏 🦅 https://designsystemet.slack.com/archives/C07K7NEKXEW/p1729843841118129 commit d3c58b0 Author: Eirik Backer <eirik.backer@gmail.com> Date: Fri Oct 25 10:04:16 2024 +0200 fix(Spinner): use forwardRef and aria-label for consistency (#2682) - Use `aria-label` for accessible spinner label to be consistent with other components - Use `forwardRef` on Spinner --------- Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no> commit 326671a Author: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no> Date: Fri Oct 25 08:26:49 2024 +0200 feat(tokens): add modes for semantic color categories main & support (#2643) Co-authored-by: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> commit 7520547 Author: Eirik Backer <eirik.backer@gmail.com> Date: Thu Oct 24 14:19:33 2024 +0200 fix(Radio+Checkbox): use input component (#2607) - Part of #2311 - Fieldset at compound components moved to task #2666 - Fixes #2459 commit f96289a Author: Tobias Barsnes <tobias.barsnes@digdir.no> Date: Thu Oct 24 11:17:42 2024 +0200 chore: enable `noUnusedImports` biome rule (#2675) enables https://biomejs.dev/linter/rules/no-unused-imports/ commit a452813 Author: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no> Date: Thu Oct 24 10:38:59 2024 +0200 feat(cli,theme): don't output underlying primitives for semantic color variables (#2641)
1 parent 7058c85 commit 9973d83

File tree

211 files changed

+6192
-10273
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

211 files changed

+6192
-10273
lines changed

‎.changeset/shiny-dryers-count.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@digdir/designsystemet-css": major
3+
"@digdir/designsystemet-react": major
4+
---
5+
6+
Radio + Checkbox:
7+
- Use `label` prop instead of `children` as label text
8+
- Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead

‎.changeset/shy-cameras-approve.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
Chip: Use correct `32px` height to align nicely with `<Tag>`

‎.changeset/slow-news-act.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
"@digdir/designsystemet-theme": minor
3+
"@digdir/designsystemet": minor
4+
---
5+
6+
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
7+
8+
Example, for the `neutral` scale:
9+
```css
10+
var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
11+
var(--ds-color-neutral-background-subtle); /* instead of: var(--ds-color-neutral-2) */
12+
var(--ds-color-neutral-surface-default); /* instead of: var(--ds-color-neutral-3) */
13+
var(--ds-color-neutral-surface-hover); /* instead of: var(--ds-color-neutral-4) */
14+
var(--ds-color-neutral-surface-active); /* instead of: var(--ds-color-neutral-5) */
15+
var(--ds-color-neutral-border-subtle); /* instead of: var(--ds-color-neutral-6) */
16+
var(--ds-color-neutral-border-default); /* instead of: var(--ds-color-neutral-7) */
17+
var(--ds-color-neutral-border-strong); /* instead of: var(--ds-color-neutral-8) */
18+
var(--ds-color-neutral-base-default); /* instead of: var(--ds-color-neutral-9) */
19+
var(--ds-color-neutral-base-hover); /* instead of: var(--ds-color-neutral-10) */
20+
var(--ds-color-neutral-base-active); /* instead of: var(--ds-color-neutral-11) */
21+
var(--ds-color-neutral-text-subtle); /* instead of: var(--ds-color-neutral-12) */
22+
var(--ds-color-neutral-text-default); /* instead of: var(--ds-color-neutral-13) */
23+
var(--ds-color-neutral-contrast-default); /* instead of: var(--ds-color-neutral-contrast-1) */
24+
var(--ds-color-neutral-contrast-subtle); /* instead of: var(--ds-color-neutral-contrast-2) */
25+
```
26+
...and similarly for `accent`, `brand1`, `brand2` and `brand3`.

‎.changeset/wet-scissors-tickle.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@digdir/designsystemet-react": patch
3+
---
4+
5+
Spinner: `aria-label` required instead of `title` prop

‎apps/_components/src/ClipboardButton/ClipboardButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const ClipboardButton = ({
3535
icon={!text}
3636
variant='tertiary'
3737
color='neutral'
38-
size='sm'
38+
data-size='sm'
3939
>
4040
<ClipboardIcon fontSize={'1.4rem'} />
4141
{text && <span className={classes.text}>{text}</span>}

‎apps/_components/src/CodeSnippet/CodeSnippet.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const CodeSnippet = ({
8888
aria-label='Kopier'
8989
icon
9090
color='neutral'
91-
size='sm'
91+
data-size='sm'
9292
>
9393
<FilesIcon fontSize='1.5rem' />
9494
</Button>

‎apps/_components/src/ColorModal/ColorModal.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ const Field = ({
2626
return (
2727
<div className={classes.field}>
2828
{label && (
29-
<Paragraph size='sm' className={classes.label}>
29+
<Paragraph data-size='sm' className={classes.label}>
3030
{label}
3131
</Paragraph>
3232
)}
33-
<Paragraph size='sm' className={classes.value}>
33+
<Paragraph data-size='sm' className={classes.value}>
3434
{value}
3535
</Paragraph>
3636
{copyBtn && <ClipboardButton value={value} />}
@@ -61,7 +61,7 @@ export const ColorModal = ({
6161
backdropClose
6262
>
6363
<Modal.Block>
64-
<Heading size='xs'>
64+
<Heading data-size='xs'>
6565
{`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
6666
</Heading>
6767
</Modal.Block>

‎apps/_components/src/ColorModal/components/ContrastBoxes.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { ColorNumber } from '@digdir/designsystemet/color';
44
import {
55
areColorsContrasting,
66
getApcaContrastLc,
7-
getColorNameFromNumber,
87
} from '@digdir/designsystemet/color';
98
import {
109
CheckmarkCircleFillIcon,

‎apps/_components/src/Footer/Footer.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Button, Heading, Link, Paragraph } from '@digdir/designsystemet-react';
22
import cl from 'clsx/lite';
3-
import Image from 'next/image';
43
import NextLink from 'next/link';
54
import { type ReactNode, forwardRef } from 'react';
65
import { Container } from '../';
@@ -56,7 +55,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
5655
<div className={classes.top}>
5756
<Container className={classes.container}>
5857
<div>
59-
<Heading size='xs' level={2} className={classes.title}>
58+
<Heading data-size='xs' level={2} className={classes.title}>
6059
Lages på tvers av offentlige etater:
6160
</Heading>
6261
<div className={classes.logos}>
@@ -65,7 +64,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
6564
<Mattilsynet />
6665
<Udir className={classes.udir} />
6766
</div>
68-
<Button asChild variant='secondary' color='neutral' size='sm'>
67+
<Button asChild variant='secondary' color='neutral' data-size='sm'>
6968
<NextLink
7069
href='mailto:designsystem@digdir.no'
7170
className={classes.button}
@@ -75,13 +74,13 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
7574
</Button>
7675
</div>
7776
<div>
78-
<Heading size='xs' level={2} className={classes.title}>
77+
<Heading data-size='xs' level={2} className={classes.title}>
7978
Om nettstedet
8079
</Heading>
8180
{LinkList(centerLinks)}
8281
</div>
8382
<div>
84-
<Heading size='xs' level={2} className={classes.title}>
83+
<Heading data-size='xs' level={2} className={classes.title}>
8584
Kom i kontakt med oss
8685
</Heading>
8786
{LinkList(rightLinks)}
@@ -90,7 +89,9 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
9089
</div>
9190
<div className={classes.bottom}>
9291
<Container>
93-
<Paragraph size='sm'>© {getCurrentYear()} Designsystemet</Paragraph>
92+
<Paragraph data-size='sm'>
93+
© {getCurrentYear()} Designsystemet
94+
</Paragraph>
9495
</Container>
9596
</div>
9697
</footer>

‎apps/_components/src/Header/Header.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,11 @@
9191
}
9292

9393
.linkIcon.figma path {
94-
stroke: var(--ds-color-neutral-8);
94+
stroke: var(--ds-color-neutral-border-strong);
9595
}
9696

9797
.linkIcon.github path {
98-
fill: var(--ds-color-neutral-8);
98+
fill: var(--ds-color-neutral-border-strong);
9999
}
100100

101101
.linkIcon.figma:hover path {

‎apps/_components/src/Header/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
108108
>
109109
{menu.map((item, index) => (
110110
<li className={classes.item} key={index}>
111-
<Paragraph size='md' asChild>
111+
<Paragraph data-size='md' asChild>
112112
<Link
113113
suppressHydrationWarning
114114
href={item.href}

‎apps/storefront/app/(frontpage)/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
7575
<Container className={classes.container}>
7676
<div className={classes.text}>
7777
<div className={classes.betaTag}>Next</div>
78-
<Heading size='lg'>
78+
<Heading data-size='lg'>
7979
Designsystemet hjelper deg å lage gode digitale tjenester
8080
</Heading>
8181
</div>

‎apps/storefront/app/bloggen/_components/Card/BlogCard.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
height: 7px;
3535
transform: rotate(45deg);
3636
border-radius: 1px;
37-
background-color: var(--ds-color-brand1-6);
37+
background-color: var(--ds-color-brand1-border-subtle);
3838
margin: auto;
3939
}

‎apps/storefront/app/bloggen/_components/Card/BlogCard.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ export const BlogCard = ({
4848
</CardBlock>
4949
<CardBlock>
5050
{tagText && (
51-
<Tag className={classes.tag} color={tagColor} size='sm'>
51+
<Tag className={classes.tag} color={tagColor} data-size='sm'>
5252
{tagText}
5353
</Tag>
5454
)}
55-
<Heading level={level} size={featured ? 'lg' : 'sm'}>
55+
<Heading level={level} data-size={featured ? 'lg' : 'sm'}>
5656
<Link href={href}>{title}</Link>
5757
</Heading>
58-
<Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
59-
<Paragraph size={featured ? 'md' : 'xs'} className={classes.meta}>
58+
<Paragraph data-size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
59+
<Paragraph data-size={featured ? 'md' : 'xs'} className={classes.meta}>
6060
{author ||
6161
(date && (
6262
<>

‎apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
height: 7px;
5656
transform: rotate(45deg);
5757
border-radius: 1px;
58-
background-color: var(--ds-color-brand1-7);
58+
background-color: var(--ds-color-brand1-border-default);
5959
margin: auto 0;
6060
break-after: avoid;
6161
}

‎apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export const Contributors = ({ authors }: ContributorsProps) => {
1717
className={classes.logoImage}
1818
/>
1919
</div>
20-
<Heading level={3} size='2xs'>
20+
<Heading level={3} data-size='2xs'>
2121
Bidragsytere
2222
</Heading>
23-
<Paragraph size='sm' className={classes.meta}>
23+
<Paragraph data-size='sm' className={classes.meta}>
2424
{authors?.map((author, index) => (
2525
<Fragment key={index}>
2626
{index !== 0 && <span aria-hidden className={classes.metaSquare} />}

‎apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
height: 7px;
4141
transform: rotate(45deg);
4242
border-radius: 1px;
43-
background-color: var(--ds-color-brand1-7);
43+
background-color: var(--ds-color-brand1-border-default);
4444
margin: auto 0;
4545
}
4646

‎apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function PostLayout({
5252
<Paragraph className={classes.ingress} variant='long'>
5353
{ingress}
5454
</Paragraph>
55-
<Paragraph size='sm' className={classes.meta}>
55+
<Paragraph data-size='sm' className={classes.meta}>
5656
<span>{date}</span>
5757
<span aria-hidden className={classes.metaSquare} />
5858
<span>{author}</span>
@@ -67,10 +67,10 @@ function PostLayout({
6767
<MdxContent className={classes.content}>
6868
{content}
6969
<div className={classes.wantToWrite}>
70-
<Heading level={3} size='xs'>
70+
<Heading level={3} data-size='xs'>
7171
Ønsker du å skrive for bloggen?
7272
</Heading>
73-
<Paragraph size='sm'>
73+
<Paragraph data-size='sm'>
7474
Ta kontakt med oss på{' '}
7575
<Link
7676
href='https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ'

‎apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
3939
<Card color='brand3' data-unstyled>
4040
<Heading
4141
level={3}
42-
size='xs'
42+
data-size='xs'
4343
>Gjeldende regelverk, WCAG 2.1</Heading>
4444
<ListUnordered>
4545
<ListItem>
@@ -63,7 +63,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
6363
<Card color='brand2' data-unstyled>
6464
<Heading
6565
level={3}
66-
size='xs'
66+
data-size='xs'
6767
>Fremtidig eller strengere:</Heading>
6868
<ListUnordered>
6969
<ListItem>

‎apps/storefront/app/grunnleggende/for-designere/terskel.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Skriv noe om HSL,
77

88
Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe på at du holder deg innenfor terkskelverdiene for den gitte fargen.
99

10-
<Table size='md'>
10+
<Table data-size='md'>
1111
<Table.Head>
1212
<Table.Row>
1313
<Table.HeaderCell>Navn</Table.HeaderCell>
@@ -31,4 +31,4 @@ Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe
3131

3232
#### Kontrastfarger
3333

34-
med eksempler
34+
med eksempler

‎apps/storefront/app/komponenter/page.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ComponentCard } from '@components';
2-
import React from 'react';
32

43
import { data } from './component-list';
54

‎apps/storefront/app/not-found.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const NotFound = ({ children }: { children: React.ReactNode }) => {
2525
/>
2626
</div>
2727
<div className={classes.textContainer}>
28-
<Heading size='md'>Denne siden finnes ikke</Heading>
28+
<Heading data-size='md'>Denne siden finnes ikke</Heading>
2929
<Paragraph>
3030
Beklager, vi finner ikke siden du ba om. Siden kan være flyttet
3131
eller slettet.

‎apps/storefront/components/Banner/Banner.module.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
display: grid;
2626
place-items: center;
2727
transform: rotate(45deg);
28-
background-color: var(--ds-color-brand2-6);
28+
background-color: var(--ds-color-brand2-border-subtle);
2929
border-radius: 3px;
3030
margin-top: var(--ds-spacing-2);
3131
margin-bottom: var(--ds-spacing-2);
@@ -38,15 +38,15 @@
3838
}
3939

4040
.red {
41-
background-color: var(--ds-color-brand1-7);
41+
background-color: var(--ds-color-brand1-border-default);
4242
}
4343

4444
.yellow {
45-
background-color: var(--ds-color-brand2-6);
45+
background-color: var(--ds-color-brand2-border-subtle);
4646
}
4747

4848
.blue {
49-
background-color: var(--ds-color-brand3-7);
49+
background-color: var(--ds-color-brand3-border-default);
5050
}
5151

5252
.logo {
@@ -77,13 +77,13 @@
7777
}
7878

7979
.logo.svg-red path {
80-
fill: var(--ds-color-brand1-6);
80+
fill: var(--ds-color-brand1-border-subtle);
8181
}
8282

8383
.logo.svg-yellow path {
84-
fill: var(--ds-color-brand2-6);
84+
fill: var(--ds-color-brand2-border-subtle);
8585
}
8686

8787
.logo.svg-blue path {
88-
fill: var(--ds-color-brand3-6);
88+
fill: var(--ds-color-brand3-border-subtle);
8989
}

‎apps/storefront/components/Banner/Banner.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const BannerRoot = ({
3737
type BannerHeadingProps = Omit<HeadingProps, 'size'>;
3838

3939
const BannerHeading = ({ ...props }: BannerHeadingProps) => {
40-
return <Heading size='lg' {...props} />;
40+
return <Heading data-size='lg' {...props} />;
4141
};
4242

4343
type BannerIngressProps = HTMLAttributes<HTMLParagraphElement>;

‎apps/storefront/components/ComponentCard/ComponentCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ComponentCard = ({ title, image, url }: ComponentCardProps) => {
1818
alt={title}
1919
className={classes.image}
2020
/>
21-
<Heading size='xs' className={classes.title} level={2}>
21+
<Heading data-size='xs' className={classes.title} level={2}>
2222
{title}
2323
</Heading>
2424
</NextLink>

‎apps/storefront/components/Image/Image.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Image = ({
3030
aria-label={alt}
3131
></img>
3232
{caption && (
33-
<Paragraph size='sm' asChild>
33+
<Paragraph data-size='sm' asChild>
3434
<figcaption>{caption}</figcaption>
3535
</Paragraph>
3636
)}

0 commit comments

Comments
 (0)