fix: start implementing css principles (#2313)

- ✅ Changes to only `Alert`, `Button`, `Divider` and `Link` to
demonstrate principles :)
- ✅ Using the pattern `dsc-button-background` and
`dsc-button-background--active` for recognition of state variables
- ✅ Using pseudo elements with `mask` instead of inline `<svg>` elements
for easy reconstruction in other frameworks
- ✅ Alphabetically sorting CSS properties for consistent setup - or
whatever is automated by our formatter <3
- ✅ Using attributes for setting `size`, `variant` or `colors` -
aligning the props interface across frameworks and avoiding invalid
states (▶️ Move to `data-ds-variant=""` aka `element.dataset.dsVariant`)
- ✅ Moving to `:focus-visible` styling to CSS token _as well_ as utility
class, using `box-shadow` only to avoid half pixels
- ✅ Moving default styling to main class name, as this allows skipping
setting `data-size="md"` on all components
- ✅ Moving to `color` instead of `severity` for `Alert` as this aligns
with other components props API
- ✅ Rendering `Alert` icon inside first heading if present as this makes
typographic alignment better (worked with Øyvind)
- ✅ Several TODO/questions added to code we should discuss, and font
sizing is being discussed with designers 23.08.24
- Closes #2320 
- Closes #1992
- Closes #2065

---------

Co-authored-by: Tobias Barsnes <[email protected]>

Author: eirikbacker

.changeset/healthy-apples-explode.md

@@ -0,0 +1,10 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+"@repo/components": patch
+"storefront": patch
+"@designsystemet/storybook": patch
+"theme": patch
+---
+
+Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -82,7 +82,7 @@ const CodeSnippet = ({
               onMouseEnter={() => setToolTipText('Kopier')}
               onClick={() => onButtonClick()}
               className={classes.copyButton}
-              title='Kopier'
+              aria-label='Kopier'
               icon
               color='neutral'
               size='sm'

apps/storefront/components/SidebarMenu/SidebarMenu.tsx

@@ -40,14 +40,13 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
         <>
           <Button
             className={classes.toggleBtn}
-            fullWidth
             size='md'
             color='neutral'
             variant='secondary'
             onClick={() => setShowMenu(!showMenu)}
             aria-expanded={showMenu}
           >
-            {showMenu ? 'Skjul' : 'Vis'} side meny
+            {showMenu ? 'Skjul' : 'Vis'} sidemeny
           </Button>
 
           <div className={cl(classes.menu, showMenu && classes.activeMenu)}>

apps/storybook/docs-components/Information/Information.tsx

@@ -30,7 +30,7 @@ const texts: Record<Texts, { description: string; title?: string }> = {
   },
 };
 
-const getSeverity = (text: Texts): AlertProps['severity'] => {
+const getColor = (text: Texts): AlertProps['color'] => {
   switch (text) {
     case 'deprecated':
       return 'danger';
@@ -50,7 +50,7 @@ export const Information = ({ text, description }: InformationProps) => {
   const textData = texts[text];
 
   return (
-    <Alert className={classes.container} severity={getSeverity(text)}>
+    <Alert className={classes.container} color={getColor(text)}>
       {textData.title && (
         <Heading level={2} size='xs' spacing>
           {textData.title}

apps/theme/components/Previews/Components/Components.tsx

@@ -76,7 +76,7 @@ export const Components = () => {
             Glemt passord?
           </Link>
         </Tooltip>
-        <Button fullWidth size='sm' className={classes.userBtn}>
+        <Button size='sm' className={classes.userBtn}>
           Opprett ny bruker
         </Button>
       </div>
@@ -375,17 +375,17 @@ export const Components = () => {
         </Accordion.Root>
       </div>
       <div className={cl(classes.card, classes.alert)}>
-        <Alert severity='info'>
+        <Alert color='info'>
           Dette er informasjon som du bør lese for å forstå hva som skjer
         </Alert>
-        <Alert severity='warning'>
+        <Alert color='warning'>
           Dette er en advarsel om at noe kan gå galt hvis du ikke følger med
         </Alert>
-        <Alert severity='danger'>
+        <Alert color='danger'>
           Dette er en melding om at noe har gått galt og du bør gjøre noe med
           det
         </Alert>
-        <Alert severity='success'>
+        <Alert color='success'>
           Dette er en melding om at noe har gått bra og du kan fortsette
         </Alert>
       </div>

packages/css/alert.css

@@ -1,69 +1,68 @@
 .ds-alert {
+  --dsc-alert-background: var(--ds-color-info-surface-default);
   --dsc-alert-border-color: var(--ds-color-info-border-strong);
   --dsc-alert-border-radius: min(1rem, var(--ds-border-radius-md));
   --dsc-alert-color: var(--ds-color-neutral-text-default);
-  --dsc-alert-icon-color: var(--ds-color-neutral-text-subtle);
+  --dsc-alert-gap: var(--ds-spacing-2);
+  --dsc-alert-icon-color: var(--ds-color-info-text-subtle);
   --dsc-alert-icon-size: var(--ds-sizing-7);
-  --dsc-alert-background: var(--ds-color-info-surface-default);
+  --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
   --dsc-alert-padding: var(--ds-spacing-6);
 
-  border: 1px solid var(--dsc-alert-border-color);
-  border-radius: var(--dsc-alert-border-radius);
   background: var(--dsc-alert-background);
+  border-radius: var(--dsc-alert-border-radius);
+  border: 1px solid var(--dsc-alert-border-color);
   color: var(--dsc-alert-color);
-  padding: var(--dsc-alert-padding);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: min-content auto;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-alert__icon {
-  height: var(--dsc-alert-icon-size);
-  width: var(--dsc-alert-icon-size);
-  color: var(--dsc-alert-icon-color);
-}
-
-.ds-alert__content {
-  display: flex;
-  flex-direction: column;
-}
+  padding-block: var(--dsc-alert-padding);
+  padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
 
-.ds-alert--info {
-  --dsc-alert-border-color: var(--ds-color-info-border-strong);
-  --dsc-alert-icon-color: var(--ds-color-info-text-subtle);
-  --dsc-alert-background: var(--ds-color-info-surface-default);
-}
-
-.ds-alert--warning {
-  --dsc-alert-border-color: var(--ds-color-warning-border-default);
-  --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
-  --dsc-alert-background: var(--ds-color-warning-surface-default);
-}
+  & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */
+  &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
+    background-color: var(--dsc-alert-icon-color);
+    content: '';
+    display: block;
+    height: var(--dsc-alert-icon-size);
+    margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    mask: var(--dsc-alert-icon-url) center/contain no-repeat;
+    position: absolute;
+    translate: 0 calc(.5lh - var(--dsc-alert-icon-size) / 2); /* Center icon to line height */
+    width: var(--dsc-alert-icon-size);
+  }
 
-.ds-alert--success {
-  --dsc-alert-border-color: var(--ds-color-success-border-default);
-  --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
-  --dsc-alert-background: var(--ds-color-success-surface-default);
-}
+  /**
+    * Colors
+    */
+  &[data-color="warning"] {
+    --dsc-alert-border-color: var(--ds-color-warning-border-default);
+    --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
+    --dsc-alert-background: var(--ds-color-warning-surface-default);
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
+  }
 
-.ds-alert--danger {
-  --dsc-alert-border-color: var(--ds-color-danger-border-default);
-  --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
-  --dsc-alert-background: var(--ds-color-danger-surface-default);
-}
+  &[data-color="success"] {
+    --dsc-alert-background: var(--ds-color-success-surface-default);
+    --dsc-alert-border-color: var(--ds-color-success-border-default);
+    --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
+  }
 
-.ds-alert--sm {
-  --dsc-alert-padding: var(--ds-spacing-5);
-  --dsc-alert-icon-size: var(--ds-sizing-6);
-}
+  &[data-color="danger"] {
+    --dsc-alert-background: var(--ds-color-danger-surface-default);
+    --dsc-alert-border-color: var(--ds-color-danger-border-default);
+    --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+  }
 
-.ds-alert--md {
-  --dsc-alert-padding: var(--ds-spacing-6);
-  --dsc-alert-icon-size: var(--ds-sizing-7);
-}
+  /**
+    * Sizes
+    */
+  &[data-size="sm"] {
+    --dsc-alert-icon-size: var(--ds-sizing-6);
+    --dsc-alert-padding: var(--ds-spacing-5);
+  }
 
-.ds-alert--lg {
-  --dsc-alert-padding: var(--ds-spacing-7);
-  --dsc-alert-icon-size: var(--ds-sizing-8);
+  &[data-size="lg"] {
+    --dsc-alert-icon-size: var(--ds-sizing-8);
+    --dsc-alert-padding: var(--ds-spacing-7);
+  }
 }

packages/css/avatar.css

@@ -43,55 +43,55 @@
     mask-image: 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");
   }
 
-  &[data-ds-variant='circle'] {
+  &[data-variant='circle'] {
     --dsc-avatar-border-radius: var(--ds-border-radius-full);
   }
 
-  &[data-ds-variant='square'] {
+  &[data-variant='square'] {
     --dsc-avatar-border-radius: var(--ds-border-radius-sm);
   }
 
-  &[data-ds-color='accent'] {
+  &[data-color='accent'] {
     --dsc-avatar-background: var(--ds-color-accent-base-default);
     --dsc-avatar-color: var(--ds-color-accent-contrast-default);
   }
 
-  &[data-ds-color='neutral'] {
+  &[data-color='neutral'] {
     --dsc-avatar-background: var(--ds-color-neutral-base-default);
     --dsc-avatar-color: var(--ds-color-neutral-contrast-default);
   }
 
-  &[data-ds-color='brand1'] {
+  &[data-color='brand1'] {
     --dsc-avatar-background: var(--ds-color-brand1-base-default);
     --dsc-avatar-color: var(--ds-color-brand1-contrast-default);
   }
 
-  &[data-ds-color='brand2'] {
+  &[data-color='brand2'] {
     --dsc-avatar-background: var(--ds-color-brand2-base-default);
     --dsc-avatar-color: var(--ds-color-brand2-contrast-default);
   }
 
-  &[data-ds-color='brand3'] {
+  &[data-color='brand3'] {
     --dsc-avatar-background: var(--ds-color-brand3-base-default);
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
 
-  &[data-ds-size='xs'] {
+  &[data-size='xs'] {
     --dsc-avatar-size: var(--ds-sizing-7);
     --dsc-avatar-padding: var(--ds-spacing-1);
   }
 
-  &[data-ds-size='sm'] {
+  &[data-size='sm'] {
     --dsc-avatar-size: var(--ds-sizing-9);
     --dsc-avatar-padding: var(--ds-spacing-1);
   }
 
-  &[data-ds-size='md'] {
+  &[data-size='md'] {
     --dsc-avatar-size: var(--ds-sizing-12);
     --dsc-avatar-padding: var(--ds-spacing-2);
   }
 
-  &[data-ds-size='lg'] {
+  &[data-size='lg'] {
     --dsc-avatar-size: var(--ds-sizing-15);
     --dsc-avatar-padding: var(--ds-spacing-2);
   }