Squashed commit of the following:

commit ce23f32 Author: Eirik Backer <[email protected]> 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 <[email protected]> Date: Fri Oct 25 15:08:14 2024 +0200 refactor(tokens): changed spacing and sizing type to dimension (#2688) Co-authored-by: Tobias Barsnes <[email protected]> Co-authored-by: Michael Marszalek <[email protected]> commit 6c1f99d Author: Eirik Backer <[email protected]> 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 <[email protected]> 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 <[email protected]> Date: Fri Oct 25 13:16:17 2024 +0200 feat: rename `size` prop to `data-size` (#2680) resolves #2673 commit acef771 Author: Eirik Backer <[email protected]> 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 <[email protected]> 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 <[email protected]> commit 326671a Author: Une Sofie Kinn Ekroll <[email protected]> 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 <[email protected]> commit 7520547 Author: Eirik Backer <[email protected]> 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 <[email protected]> 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 <[email protected]> Date: Thu Oct 24 10:38:59 2024 +0200 feat(cli,theme): don't output underlying primitives for semantic color variables (#2641)
digdir · Oct 28, 2024 · 9973d83 · 9973d83
1 parent 7058c85
commit 9973d83
Show file tree

Hide file tree

Showing 211 changed files with 6,192 additions and 10,273 deletions.
diff --git a/.changeset/shiny-dryers-count.md b/.changeset/shiny-dryers-count.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": major
+"@digdir/designsystemet-react": major
+---
+
+Radio + Checkbox:
+- Use `label` prop instead of `children` as label text
+- Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead
diff --git a/.changeset/shy-cameras-approve.md b/.changeset/shy-cameras-approve.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Chip: Use correct `32px` height to align nicely with `<Tag>`
diff --git a/.changeset/slow-news-act.md b/.changeset/slow-news-act.md
@@ -0,0 +1,26 @@
+---
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet": minor
+---
+
+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
+
+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`.
diff --git a/.changeset/wet-scissors-tickle.md b/.changeset/wet-scissors-tickle.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Spinner: `aria-label` required instead of `title` prop
diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx
@@ -35,7 +35,7 @@ export const ClipboardButton = ({
           icon={!text}
           variant='tertiary'
           color='neutral'
-          size='sm'
+          data-size='sm'
         >
           <ClipboardIcon fontSize={'1.4rem'} />
           {text && <span className={classes.text}>{text}</span>}

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -88,7 +88,7 @@ const CodeSnippet = ({
               aria-label='Kopier'
               icon
               color='neutral'
-              size='sm'
+              data-size='sm'
             >
               <FilesIcon fontSize='1.5rem' />
             </Button>

diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx
@@ -26,11 +26,11 @@ const Field = ({
   return (
     <div className={classes.field}>
       {label && (
-        <Paragraph size='sm' className={classes.label}>
+        <Paragraph data-size='sm' className={classes.label}>
           {label}
         </Paragraph>
       )}
-      <Paragraph size='sm' className={classes.value}>
+      <Paragraph data-size='sm' className={classes.value}>
         {value}
       </Paragraph>
       {copyBtn && <ClipboardButton value={value} />}
@@ -61,7 +61,7 @@ export const ColorModal = ({
         backdropClose
       >
         <Modal.Block>
-          <Heading size='xs'>
+          <Heading data-size='xs'>
             {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
           </Heading>
         </Modal.Block>

diff --git a/apps/_components/src/ColorModal/components/ContrastBoxes.tsx b/apps/_components/src/ColorModal/components/ContrastBoxes.tsx
@@ -4,7 +4,6 @@ import type { ColorNumber } from '@digdir/designsystemet/color';
 import {
   areColorsContrasting,
   getApcaContrastLc,
-  getColorNameFromNumber,
 } from '@digdir/designsystemet/color';
 import {
   CheckmarkCircleFillIcon,

diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 import { Button, Heading, Link, Paragraph } from '@digdir/designsystemet-react';
 import cl from 'clsx/lite';
-import Image from 'next/image';
 import NextLink from 'next/link';
 import { type ReactNode, forwardRef } from 'react';
 import { Container } from '../';
@@ -56,7 +55,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
       <div className={classes.top}>
         <Container className={classes.container}>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Lages på tvers av offentlige etater:
             </Heading>
             <div className={classes.logos}>
@@ -65,7 +64,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
               <Mattilsynet />
               <Udir className={classes.udir} />
             </div>
-            <Button asChild variant='secondary' color='neutral' size='sm'>
+            <Button asChild variant='secondary' color='neutral' data-size='sm'>
               <NextLink
                 href='mailto:[email protected]'
                 className={classes.button}
@@ -75,13 +74,13 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
             </Button>
           </div>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Om nettstedet
             </Heading>
             {LinkList(centerLinks)}
           </div>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Kom i kontakt med oss
             </Heading>
             {LinkList(rightLinks)}
@@ -90,7 +89,9 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
       </div>
       <div className={classes.bottom}>
         <Container>
-          <Paragraph size='sm'>© {getCurrentYear()} Designsystemet</Paragraph>
+          <Paragraph data-size='sm'>
+            © {getCurrentYear()} Designsystemet
+          </Paragraph>
         </Container>
       </div>
     </footer>

diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -91,11 +91,11 @@
 }
 
 .linkIcon.figma path {
-  stroke: var(--ds-color-neutral-8);
+  stroke: var(--ds-color-neutral-border-strong);
 }
 
 .linkIcon.github path {
-  fill: var(--ds-color-neutral-8);
+  fill: var(--ds-color-neutral-border-strong);
 }
 
 .linkIcon.figma:hover path {

diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
@@ -108,7 +108,7 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
             >
               {menu.map((item, index) => (
                 <li className={classes.item} key={index}>
-                  <Paragraph size='md' asChild>
+                  <Paragraph data-size='md' asChild>
                     <Link
                       suppressHydrationWarning
                       href={item.href}

diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx
@@ -75,7 +75,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           <Container className={classes.container}>
             <div className={classes.text}>
               <div className={classes.betaTag}>Next</div>
-              <Heading size='lg'>
+              <Heading data-size='lg'>
                 Designsystemet hjelper deg å lage gode digitale tjenester
               </Heading>
             </div>

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -34,6 +34,6 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-6);
+  background-color: var(--ds-color-brand1-border-subtle);
   margin: auto;
 }
diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx b/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx
@@ -48,15 +48,15 @@ export const BlogCard = ({
       </CardBlock>
       <CardBlock>
         {tagText && (
-          <Tag className={classes.tag} color={tagColor} size='sm'>
+          <Tag className={classes.tag} color={tagColor} data-size='sm'>
             {tagText}
           </Tag>
         )}
-        <Heading level={level} size={featured ? 'lg' : 'sm'}>
+        <Heading level={level} data-size={featured ? 'lg' : 'sm'}>
           <Link href={href}>{title}</Link>
         </Heading>
-        <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
-        <Paragraph size={featured ? 'md' : 'xs'} className={classes.meta}>
+        <Paragraph data-size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
+        <Paragraph data-size={featured ? 'md' : 'xs'} className={classes.meta}>
           {author ||
             (date && (
               <>

diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
@@ -55,7 +55,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
   margin: auto 0;
   break-after: avoid;
 }
diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx b/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx
@@ -17,10 +17,10 @@ export const Contributors = ({ authors }: ContributorsProps) => {
           className={classes.logoImage}
         />
       </div>
-      <Heading level={3} size='2xs'>
+      <Heading level={3} data-size='2xs'>
         Bidragsytere
       </Heading>
-      <Paragraph size='sm' className={classes.meta}>
+      <Paragraph data-size='sm' className={classes.meta}>
         {authors?.map((author, index) => (
           <Fragment key={index}>
             {index !== 0 && <span aria-hidden className={classes.metaSquare} />}

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -40,7 +40,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
   margin: auto 0;
 }
 

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -52,7 +52,7 @@ function PostLayout({
             <Paragraph className={classes.ingress} variant='long'>
               {ingress}
             </Paragraph>
-            <Paragraph size='sm' className={classes.meta}>
+            <Paragraph data-size='sm' className={classes.meta}>
               <span>{date}</span>
               <span aria-hidden className={classes.metaSquare} />
               <span>{author}</span>
@@ -67,10 +67,10 @@ function PostLayout({
           <MdxContent className={classes.content}>
             {content}
             <div className={classes.wantToWrite}>
-              <Heading level={3} size='xs'>
+              <Heading level={3} data-size='xs'>
                 Ønsker du å skrive for bloggen?
               </Heading>
-              <Paragraph size='sm'>
+              <Paragraph data-size='sm'>
                 Ta kontakt med oss på{' '}
                 <Link
                   href='https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ'

diff --git a/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx
@@ -39,7 +39,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 <Card color='brand3' data-unstyled>
   <Heading
     level={3}
-    size='xs'
+    data-size='xs'
   >Gjeldende regelverk, WCAG 2.1</Heading>
   <ListUnordered>
     <ListItem>
@@ -63,7 +63,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 <Card color='brand2' data-unstyled>
   <Heading
     level={3}
-    size='xs'
+    data-size='xs'
   >Fremtidig eller strengere:</Heading>
   <ListUnordered>
     <ListItem>

diff --git a/apps/storefront/app/grunnleggende/for-designere/terskel.txt b/apps/storefront/app/grunnleggende/for-designere/terskel.txt
@@ -7,7 +7,7 @@ Skriv noe om HSL,
 
 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.
 
-<Table size='md'>
+<Table data-size='md'>
   <Table.Head>
     <Table.Row>
       <Table.HeaderCell>Navn</Table.HeaderCell>
@@ -31,4 +31,4 @@ Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe
 
 #### Kontrastfarger
 
-med eksempler
+med eksempler
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
@@ -1,5 +1,4 @@
 import { ComponentCard } from '@components';
-import React from 'react';
 
 import { data } from './component-list';
 

diff --git a/apps/storefront/app/not-found.tsx b/apps/storefront/app/not-found.tsx
@@ -25,7 +25,7 @@ const NotFound = ({ children }: { children: React.ReactNode }) => {
           />
         </div>
         <div className={classes.textContainer}>
-          <Heading size='md'>Denne siden finnes ikke</Heading>
+          <Heading data-size='md'>Denne siden finnes ikke</Heading>
           <Paragraph>
             Beklager, vi finner ikke siden du ba om. Siden kan være flyttet
             eller slettet.

diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -25,7 +25,7 @@
   display: grid;
   place-items: center;
   transform: rotate(45deg);
-  background-color: var(--ds-color-brand2-6);
+  background-color: var(--ds-color-brand2-border-subtle);
   border-radius: 3px;
   margin-top: var(--ds-spacing-2);
   margin-bottom: var(--ds-spacing-2);
@@ -38,15 +38,15 @@
 }
 
 .red {
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
 }
 
 .yellow {
-  background-color: var(--ds-color-brand2-6);
+  background-color: var(--ds-color-brand2-border-subtle);
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-7);
+  background-color: var(--ds-color-brand3-border-default);
 }
 
 .logo {
@@ -77,13 +77,13 @@
 }
 
 .logo.svg-red path {
-  fill: var(--ds-color-brand1-6);
+  fill: var(--ds-color-brand1-border-subtle);
 }
 
 .logo.svg-yellow path {
-  fill: var(--ds-color-brand2-6);
+  fill: var(--ds-color-brand2-border-subtle);
 }
 
 .logo.svg-blue path {
-  fill: var(--ds-color-brand3-6);
+  fill: var(--ds-color-brand3-border-subtle);
 }
diff --git a/apps/storefront/components/Banner/Banner.tsx b/apps/storefront/components/Banner/Banner.tsx
@@ -37,7 +37,7 @@ const BannerRoot = ({
 type BannerHeadingProps = Omit<HeadingProps, 'size'>;
 
 const BannerHeading = ({ ...props }: BannerHeadingProps) => {
-  return <Heading size='lg' {...props} />;
+  return <Heading data-size='lg' {...props} />;
 };
 
 type BannerIngressProps = HTMLAttributes<HTMLParagraphElement>;

diff --git a/apps/storefront/components/ComponentCard/ComponentCard.tsx b/apps/storefront/components/ComponentCard/ComponentCard.tsx
@@ -18,7 +18,7 @@ const ComponentCard = ({ title, image, url }: ComponentCardProps) => {
         alt={title}
         className={classes.image}
       />
-      <Heading size='xs' className={classes.title} level={2}>
+      <Heading data-size='xs' className={classes.title} level={2}>
         {title}
       </Heading>
     </NextLink>

diff --git a/apps/storefront/components/Image/Image.tsx b/apps/storefront/components/Image/Image.tsx
@@ -30,7 +30,7 @@ const Image = ({
         aria-label={alt}
       ></img>
       {caption && (
-        <Paragraph size='sm' asChild>
+        <Paragraph data-size='sm' asChild>
           <figcaption>{caption}</figcaption>
         </Paragraph>
       )}