Merge branch 'next' into docs/systemvarsler

digdir · Dec 9, 2024 · b6473e8 · b6473e8
2 parents a2ca719 + 0f87a12
commit b6473e8
Show file tree

Hide file tree

Showing 32 changed files with 119 additions and 168 deletions.
diff --git a/.changeset/eleven-rings-travel.md b/.changeset/eleven-rings-travel.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": major
+---
+
+ValidationMessage: use `data-color="danger | success"` instead of `data-error="true | false"`
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -38,6 +38,7 @@
     "eleven-bags-shop",
     "eleven-experts-raise",
     "eleven-peaches-agree",
+    "eleven-rings-travel",
     "empty-pears-hide",
     "empty-singers-yell",
     "fair-beds-destroy",
@@ -91,6 +92,7 @@
     "nine-cameras-peel",
     "nine-countries-invent",
     "ninety-horses-juggle",
+    "ninety-jeans-punch",
     "odd-hornets-sleep",
     "old-melons-stare",
     "old-sheep-dress",
@@ -123,6 +125,7 @@
     "short-kiwis-turn",
     "short-walls-judge",
     "shy-cameras-approve",
+    "silver-penguins-occur",
     "six-carrots-guess",
     "six-trees-tie",
     "slimy-bees-arrive",

diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Change Log
 
+## 1.0.0-next.40
+
 ## 1.0.0-next.39
 
 ### Patch Changes

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.0.0-next.39",
+  "version": "1.0.0-next.40",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "repository": {

diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.0.0-next.40
+
+### Patch Changes
+
+- Rename `Accordion` to `Details` ([#2839](https://github.com/digdir/designsystemet/pull/2839))
+
 ## 1.0.0-next.39
 
 ## 1.0.0-next.38

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "1.0.0-next.39",
+  "version": "1.0.0-next.40",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": {

diff --git a/packages/css/src/avatar.css b/packages/css/src/avatar.css
@@ -1,15 +1,7 @@
 .ds-avatar {
   --dsc-avatar-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
-
-  /* default color: accent */
-  --dsc-avatar-background: var(--ds-color-accent-base-default);
-  --dsc-avatar-color: var(--ds-color-accent-contrast-default);
-
-  &[data-color] {
-    --dsc-avatar-background: var(--ds-color-base-default);
-    --dsc-avatar-color: var(--ds-color-contrast-default);
-  }
-
+  --dsc-avatar-background: var(--ds-color-base-default);
+  --dsc-avatar-color: var(--ds-color-contrast-default);
   --dsc-avatar-size: var(--ds-sizing-12);
   --dsc-avatar-padding: var(--ds-spacing-2);
   --dsc-avatar-border-radius: var(--ds-border-radius-full);

diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css
@@ -3,6 +3,8 @@
   --dsc-badge-background: var(--ds-color-base-default);
   --dsc-badge-color: var(--ds-color-contrast-default);
 
+  /* What do we do here? */
+
   &[data-color='neutral'] {
     --dsc-badge-background: var(--ds-color-neutral-surface-default);
     --dsc-badge-color: var(--ds-color-neutral-text-default);

diff --git a/packages/css/src/breadcrumbs.css b/packages/css/src/breadcrumbs.css
@@ -2,6 +2,7 @@
   --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
   --dsc-breadcrumbs-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
+  --dsc-breadcrumbs-color: var(--ds-color-text-subtle);
 
   & > :is(ol, ul) {
     display: flex;
@@ -12,18 +13,14 @@
     gap: var(--dsc-breadcrumbs-spacing) 0;
   }
 
-  & a:not(:focus-visible) {
-    color: inherit;
-  }
-
   & a[aria-current='page'] {
     text-decoration: none;
   }
 
   /* Draw chevron between items and before back link */
   & li:where(:not(:last-child))::after,
   & > :not(ol, ul)::before {
-    background: currentcolor;
+    background: var(--dsc-breadcrumbs-color);
     content: '';
     display: inline-block;
     height: var(--dsc-breadcrumbs-chevron-size);

diff --git a/packages/css/src/button.css b/packages/css/src/button.css
@@ -1,26 +1,24 @@
 .ds-button {
-  /* default color: accent */
-  --dsc-button-background--active: var(--ds-color-accent-base-active);
-  --dsc-button-background--hover: var(--ds-color-accent-base-hover);
-  --dsc-button-background: var(--ds-color-accent-base-default);
-  --dsc-button-color: var(--ds-color-accent-contrast-default);
-  --dsc-button-color--hover: var(--ds-color-accent-contrast-default);
+  --dsc-button-background--active: var(--ds-color-base-active);
+  --dsc-button-background--hover: var(--ds-color-base-hover);
+  --dsc-button-background: var(--ds-color-base-default);
+  --dsc-button-color: var(--ds-color-contrast-default);
+  --dsc-button-color--hover: var(--ds-color-contrast-default);
   --dsc-button-border-color: transparent;
-  --dsc-button-font-size: var(--ds-font-size-5);
   --dsc-button-gap: var(--ds-spacing-2);
   --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
   &[data-variant='secondary'],
   &[data-variant='tertiary'] {
     --dsc-button-background: transparent;
-    --dsc-button-background--active: var(--ds-color-accent-surface-active);
-    --dsc-button-background--hover: var(--ds-color-accent-surface-hover);
-    --dsc-button-color: var(--ds-color-accent-text-subtle);
-    --dsc-button-color--hover: var(--ds-color-accent-text-default);
+    --dsc-button-background--active: var(--ds-color-surface-active);
+    --dsc-button-background--hover: var(--ds-color-surface-hover);
+    --dsc-button-color: var(--ds-color-text-subtle);
+    --dsc-button-color--hover: var(--ds-color-text-default);
   }
   &[data-variant='secondary'] {
-    --dsc-button-border-color: var(--ds-color-accent-border-strong);
+    --dsc-button-border-color: var(--ds-color-border-strong);
   }
 
   &[data-color] {

diff --git a/packages/css/src/card.css b/packages/css/src/card.css
@@ -1,29 +1,24 @@
 .ds-card {
-  /* default color: neutral */
-  --dsc-card-background--active: var(--ds-color-neutral-surface-default);
-  --dsc-card-background--hover: var(--ds-color-neutral-background-subtle);
-  --dsc-card-background: var(--ds-color-neutral-background-default);
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-color: var(--ds-color-neutral-text-default);
-
-  &[data-color]:where(:not([data-color='subtle'])) {
-    --dsc-card-background--active: var(--ds-color-surface-active);
-    --dsc-card-background--hover: var(--ds-color-surface-hover);
-    --dsc-card-background: var(--ds-color-surface-default);
-    --dsc-card-border-color: var(--ds-color-border-subtle);
-    --dsc-card-color: var(--ds-color-text-default);
-  }
+  --dsc-card-background--active: var(--ds-color-surface-active);
+  --dsc-card-background--hover: var(--ds-color-surface-hover);
+  --dsc-card-background: var(--ds-color-surface-default);
+  --dsc-card-border-color: var(--ds-color-border-subtle);
+  --dsc-card-color: var(--ds-color-text-default);
+  --dsc-card-border: 1px solid var(--dsc-card-border-color);
+  --dsc-card-gap: var(--ds-spacing-3);
+  --dsc-card-padding: var(--ds-spacing-6);
+
   &[data-color='neutral'] {
     --dsc-card-background: var(--ds-color-background-default);
   }
   &[data-color='subtle'] {
+    --dsc-card-background--active: var(--ds-color-neutral-surface-default);
+    --dsc-card-background--hover: var(--ds-color-neutral-background-subtle);
     --dsc-card-background: var(--ds-color-neutral-background-subtle);
+    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+    --dsc-card-color: var(--ds-color-neutral-text-default);
   }
 
-  --dsc-card-border: 1px solid var(--dsc-card-border-color);
-  --dsc-card-gap: var(--ds-spacing-3);
-  --dsc-card-padding: var(--ds-spacing-6);
-
   background: var(--dsc-card-background);
   border-radius: var(--ds-border-radius-lg);
   border: var(--dsc-card-border);

diff --git a/packages/css/src/chip.css b/packages/css/src/chip.css
@@ -11,7 +11,6 @@
   --dsc-chip-color--checked: var(--ds-color-contrast-default);
   --dsc-chip-input-color: var(--ds-color-border-strong);
   --dsc-chip-input-color--checked: var(--ds-color-base-default);
-
   --dsc-chip-border-radius: var(--ds-border-radius-full);
   --dsc-chip-height: var(--ds-sizing-8);
   --dsc-chip-icon-size: var(--ds-spacing-7);

diff --git a/packages/css/src/details.css b/packages/css/src/details.css
@@ -6,11 +6,11 @@
   --dsc-details-padding: var(--ds-spacing-2) var(--ds-spacing-4);
   --dsc-details-size: var(--ds-sizing-14);
 
-  /* default color: neutral */
-  --dsc-details-heading-background--hover: var(--ds-color-neutral-surface-default);
-  --dsc-details-heading-background--open: var(--ds-color-neutral-background-subtle);
-  --dsc-details-heading-background: var(--ds-color-neutral-background-default);
-  --dsc-details-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-details-background: var(--ds-color-background-default);
+  --dsc-details-heading-background--hover: var(--ds-color-surface-default);
+  --dsc-details-heading-background--open: var(--ds-color-background-subtle);
+  --dsc-details-heading-background: var(--ds-color-background-default);
+  --dsc-details-border-color: var(--ds-color-border-subtle);
 
   /* with color */
   [data-color]:where(:not([data-color='neutral'])) &,

diff --git a/packages/css/src/dropdown.css b/packages/css/src/dropdown.css
@@ -2,10 +2,13 @@
   --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2);
   --dsc-dropdown-item-padding: var(--ds-spacing-2) var(--ds-spacing-4);
   --dsc-dropdown-item-size: var(--ds-spacing-12);
+  --dsc-dropdown-background: var(--ds-color-neutral-background-default);
+  --dsc-dropdow-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-dropdown-border: 1px solid var(--dsc-dropdow-border-color);
 
-  background-color: var(--ds-color-neutral-background-default);
+  background: var(--dsc-dropdown-background);
   border-radius: var(--ds-border-radius-md);
-  border: 1px solid var(--ds-color-neutral-border-subtle);
+  border: var(--dsc-dropdown-border);
   box-shadow: var(--ds-shadow-md);
   box-sizing: border-box;
   list-style: none;

diff --git a/packages/css/src/link.css b/packages/css/src/link.css
@@ -1,9 +1,8 @@
 .ds-link {
-  /* default color: accent */
-  --dsc-link-background--active: var(--ds-color-accent-surface-default);
-  --dsc-link-color--active: var(--ds-color-accent-text-default);
-  --dsc-link-color--hover: var(--ds-color-accent-text-default);
-  --dsc-link-color: var(--ds-color-accent-text-subtle);
+  --dsc-link-background--active: var(--ds-color-surface-default);
+  --dsc-link-color--active: var(--ds-color-text-default);
+  --dsc-link-color--hover: var(--ds-color-text-default);
+  --dsc-link-color: var(--ds-color-text-subtle);
   --dsc-link-background--focus: var(--ds-color-focus-outer);
   --dsc-link-color--focus: var(--ds-color-focus-inner);
   --dsc-link-color--visited: var(--ds-global-purple-12);
@@ -20,15 +19,7 @@
     vertical-align: middle; /* Align img or svg icon with text */
   }
 
-  /**
-   * Colors
-   */
-  &[data-color] {
-    --dsc-link-background--active: var(--ds-color-surface-default);
-    --dsc-link-color--active: var(--ds-color-text-default);
-    --dsc-link-color--hover: var(--ds-color-text-default);
-    --dsc-link-color: var(--ds-color-text-subtle);
-  }
+  /* What do we do here? */
   &[data-color='neutral'] {
     --dsc-link-color--active: var(--ds-color-neutral-text-subtle);
     --dsc-link-color--hover: var(--ds-color-neutral-text-subtle);

diff --git a/packages/css/src/popover.css b/packages/css/src/popover.css
@@ -1,7 +1,7 @@
 .ds-popover {
-  --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-border-color: var(--ds-color-neutral-border-default);
-  --dsc-popover-color: var(--ds-color-neutral-text-default);
+  --dsc-popover-background: var(--ds-color-surface-default);
+  --dsc-popover-border-color: var(--ds-color-border-default);
+  --dsc-popover-color: var(--ds-color-text-default);
   --dsc-popover-arrow-size: var(--ds-spacing-2);
   --dsc-popover-border-radius: var(--ds-border-radius-md);
   --dsc-popover-border: 1px solid var(--dsc-popover-border-color);
@@ -50,12 +50,7 @@
     rotate: -135deg;
   }
 
-  &[data-color] {
-    --dsc-popover-background: var(--ds-color-surface-default);
-    --dsc-popover-border-color: var(--ds-color-border-default);
-    --dsc-popover-color: var(--ds-color-text-default);
-  }
-
+  /* What do we do here? */
   &[data-color='neutral'] {
     --dsc-popover-background: var(--ds-color-neutral-background-default);
   }

diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css
@@ -1,11 +1,6 @@
 .ds-tag {
-  --dsc-tag-background: var(--ds-color-neutral-background-default);
-  --dsc-tag-color: var(--ds-color-neutral-text-default);
-
-  &[data-color] {
-    --dsc-tag-background: var(--ds-color-surface-default);
-    --dsc-tag-color: var(--ds-color-text-default);
-  }
+  --dsc-tag-background: var(--ds-color-surface-default);
+  --dsc-tag-color: var(--ds-color-text-default);
   --dsc-tag-min-height: var(--ds-sizing-8);
   --dsc-tag-padding: 0 var(--ds-spacing-2);
 

diff --git a/packages/css/src/togglegroup.css b/packages/css/src/togglegroup.css
@@ -1,5 +1,6 @@
 .ds-togglegroup {
-  --dsc-togglegroup-background: var(--ds-color-neutral-background-default);
+  --dsc-togglegroup-background: var(--ds-color-background-default);
+  /* Todo: Explore the border color here */
   --dsc-togglegroup-border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
   --dsc-togglegroup-padding: var(--ds-spacing-1);
   --dsc-togglegroup-border-radius: var(--ds-border-radius-default);

diff --git a/packages/css/src/validation-message.css b/packages/css/src/validation-message.css
@@ -7,7 +7,7 @@
   position: relative;
 
   /* Only render error icon if the ValidationMessage actually contains an error message */
-  &[data-error]:not(:empty) {
+  &:not([data-color='success']):not(:empty) {
     color: var(--ds-color-danger-text-subtle);
     padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap));
 

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.0.0-next.40
+
+### Major Changes
+
+- ValidationMessage: use `data-color="danger | success"` instead of `data-error="true | false"` ([#2860](https://github.com/digdir/designsystemet/pull/2860))
+
+### Patch Changes
+
+- React: Set `"type": "module"` in `package.json` ([#2842](https://github.com/digdir/designsystemet/pull/2842))
+
+- Rename `Accordion` to `Details` ([#2839](https://github.com/digdir/designsystemet/pull/2839))
+
 ## 1.0.0-next.39
 
 ## 1.0.0-next.38

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.0.0-next.39",
+  "version": "1.0.0-next.40",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {

diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
@@ -268,7 +268,7 @@ export const Composed: Story = () => (
         <Textfield label='Etternavn' />
       </Card.Block>
       <Card.Block>
-        <Button variant='secondary' data-size='sm'>
+        <Button variant='secondary' data-color='accent' data-size='sm'>
           Legg til rolle
           <PlusIcon aria-hidden />
         </Button>

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -2,18 +2,13 @@ import type { Placement } from '@floating-ui/utils';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-
-import type { Color } from '../../colors';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 import { Popover } from '../Popover';
 
 export type HelpTextProps = MergeRight<
   DefaultProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
   {
-    /** Specify which color palette to use. If left unspecified, the color is inherited from the nearest ancestor with data-color.
-     */
-    'data-color'?: Color;
     /**
      * Required descriptive label for screen readers.
      **/
@@ -37,6 +32,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           className={cl('ds-helptext', className)}
           ref={ref}
           variant='tertiary'
+          data-color='info'
           {...rest}
         />
         <Popover placement={placement} data-color='info'>