refactor: ♻️ Adjust data-color cascading (#2836)

fixes #2834 --------- Co-authored-by: Barsnes <[email protected]>
digdir · Dec 5, 2024 · a3e77d5 · a3e77d5
1 parent bf1afa2
commit a3e77d5
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 96 deletions.
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,10 +1,9 @@
 .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);
@@ -14,13 +13,13 @@
   &[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/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'>

diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx
@@ -28,9 +28,9 @@ import { Popover } from '@digdir/designsystemet-react';
 
 ## Eksempler
 
-### Variants
+### Farger
 
-`Popover` har fire varianter, `default`, `info`, `warning` og `danger`. Du kan bruke `variant` for å endre varianten.
+`Popover` kommer i alle farger, du kan endre den med `data-color`.
 
 <Canvas of={PopoverStories.Variants} />
 

diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/Popover/Popover.stories.tsx
@@ -40,6 +40,7 @@ export const Preview: StoryFn<typeof Popover> = (args) => {
 Preview.args = {
   placement: 'top',
   'data-size': 'md',
+  'data-color': 'neutral',
 };
 Preview.parameters = {
   customStyles: {
@@ -71,8 +72,13 @@ export const Variants: StoryFn<typeof Popover> = () => {
       >
         <Popover.TriggerContext>
           <Popover.Trigger>popover</Popover.Trigger>
-          <Popover open={open} placement='top' autoPlacement={false}>
-            default
+          <Popover
+            open={open}
+            placement='top'
+            data-color='neutral'
+            autoPlacement={false}
+          >
+            neutral
           </Popover>
         </Popover.TriggerContext>
         <Popover.TriggerContext>
@@ -127,7 +133,7 @@ export const Controlled: StoryFn<typeof Popover> = () => {
       <Popover.Trigger onClick={() => setOpen(!open)}>
         My trigger
       </Popover.Trigger>
-      <Popover open={open} onClose={() => setOpen(false)}>
+      <Popover open={open} onClose={() => setOpen(false)} data-color='neutral'>
         <Paragraph>Er du sikker på at du vil slette?</Paragraph>
         <Button
           data-color='danger'
@@ -155,7 +161,12 @@ export const WithoutContext: StoryFn<typeof Popover> = () => {
       <Button popovertarget='my-popover' onClick={() => setOpen(!open)}>
         My trigger
       </Button>
-      <Popover id='my-popover' open={open} onClose={() => setOpen(false)}>
+      <Popover
+        id='my-popover'
+        open={open}
+        onClose={() => setOpen(false)}
+        data-color='neutral'
+      >
         <Paragraph>Er du sikker på at du vil slette?</Paragraph>
         <Button
           data-color='danger'

diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
@@ -46,7 +46,6 @@ export type PopoverProps = MergeRight<
     placement?: Placement;
     /**
      * The color of the popover.
-     * @default neutral
      */
     'data-color'?: Color;
     /**