@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.36

package/README.md

@@ -1,9 +1,10 @@
 # @digdir/designsystemet-css
 
-CSS implementation of the Designsystemet
+CSS implementation of the Designsystemet components
 
-- Styling for React components in `@digdir/designsystemet-react`
+- Uses [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) `ds`
+- Uses `@digdir/designsystemet-theme` for predefined themes
+  - Build your own theme on https://theme.designsystemet.no/
 
-_These styles are currently not intended to be used directly. They are auto-generated from css modules in react components and may change without notice_
 
 Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

package/accordion.css

@@ -1,14 +1,41 @@
 .ds-accordion-group {
+  /* default color: neutral */
   --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
-  --dsc-accordion-chevron-gap: var(--ds-spacing-2);
-  --dsc-accordion-chevron-size: var(--ds-spacing-6);
-  --dsc-accordion-chevron-rotate: 0deg;
   --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
   --dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
   --dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-padding: var(--ds-spacing-4);
+  --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
+
+  &[data-color]:where(:not([data-color='subtle'])) {
+    --dsc-accordion-background: var(--ds-color-background-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-surface-default);
+    --dsc-accordion-border-color: var(--ds-color-border-subtle);
+  }
+
+  &[data-color='neutral'] {
+    --dsc-accordion-background: var(--ds-color-background-default);
+    --dsc-accordion-heading-background--hover: var(--ds-color-surface-default);
+    --dsc-accordion-heading-background--open: var(--ds-color-background-subtle);
+    --dsc-accordion-heading-background: var(--ds-color-background-default);
+  }
+
+  &[data-color='subtle'] {
+    --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle);
+  }
+
+  --dsc-accordion-border: 1px solid var(--dsc-accordion-border-color);
+  --dsc-accordion-border-radius: var(--ds-border-radius-md);
+  --dsc-accordion-chevron-gap: var(--ds-spacing-2);
+  --dsc-accordion-chevron-size: var(--ds-spacing-6);
+  --dsc-accordion-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
+
+  --dsc-accordion-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-accordion-size: var(--ds-sizing-14);
 
   &[data-border] > * {
     border: var(--dsc-accordion-border);
@@ -25,52 +52,27 @@
       border-bottom-right-radius: var(--dsc-accordion-border-radius);
     }
   }
-
-  &[data-color='subtle'] {
-    --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
-    --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
-    --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover);
-    --dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default);
-    --dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle);
-  }
-
-  &[data-color='brand1'] {
-    --dsc-accordion-background: var(--ds-color-brand1-background-subtle);
-    --dsc-accordion-border: 1px solid var(--ds-color-brand1-border-subtle);
-    --dsc-accordion-heading-background--hover: var(--ds-color-brand1-surface-hover);
-    --dsc-accordion-heading-background--open: var(--ds-color-brand1-surface-default);
-    --dsc-accordion-heading-background: var(--ds-color-brand1-surface-default);
-  }
-
-  &[data-color='brand2'] {
-    --dsc-accordion-background: var(--ds-color-brand2-background-subtle);
-    --dsc-accordion-border: 1px solid var(--ds-color-brand2-border-subtle);
-    --dsc-accordion-heading-background--hover: var(--ds-color-brand2-surface-hover);
-    --dsc-accordion-heading-background--open: var(--ds-color-brand2-surface-default);
-    --dsc-accordion-heading-background: var(--ds-color-brand2-surface-default);
-  }
-
-  &[data-color='brand3'] {
-    --dsc-accordion-background: var(--ds-color-brand3-background-subtle);
-    --dsc-accordion-border: 1px solid var(--ds-color-brand3-border-subtle);
-    --dsc-accordion-heading-background--hover: var(--ds-color-brand3-surface-hover);
-    --dsc-accordion-heading-background--open: var(--ds-color-brand3-surface-default);
-    --dsc-accordion-heading-background: var(--ds-color-brand3-surface-default);
-  }
 }
 
 .ds-accordion__item {
   background: var(--dsc-accordion-background);
   border-block: var(--dsc-accordion-border);
+  box-sizing: border-box;
 
   & > :is(summary, u-summary) {
+    align-items: center;
     background: var(--dsc-accordion-heading-background);
     box-sizing: border-box;
     cursor: pointer;
+    display: flex;
     list-style: none;
+    min-height: var(--dsc-accordion-size);
+    gap: var(--dsc-accordion-chevron-gap);
     outline: none;
-    padding-block: var(--dsc-accordion-padding);
-    padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
+    padding: var(--dsc-accordion-padding);
+    position: relative;
+
+    @composes ds-focus from './base/base.css';
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
@@ -80,15 +82,9 @@
       background: currentcolor;
       border-radius: var(--ds-border-radius-md);
       content: '';
+      flex-shrink: 0;
       height: var(--dsc-accordion-chevron-size);
-      mask: 50% / contain no-repeat
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
-      position: absolute;
-      rotate: var(--dsc-accordion-chevron-rotate);
-      margin-inline: calc(
-        (var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1
-      ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
-
+      mask: 50% / contain no-repeat var(--dsc-accordion-chevron-url);
       width: var(--dsc-accordion-chevron-size);
     }
   }
@@ -104,11 +100,10 @@
 
   &[open] > :is(summary, u-summary) {
     background: var(--dsc-accordion-heading-background--open);
-  }
 
-  /* Make flip on click */
-  &[open]:not([data-chevron-open='false']) {
-    --dsc-accordion-chevron-rotate: -180deg;
+    &::before {
+      rotate: 180deg;
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -116,4 +111,19 @@
       background: var(--dsc-accordion-heading-background--hover);
     }
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    /* biome-ignore lint/correctness/noUnknownProperty: biome does not know about this property yet */
+    interpolate-size: allow-keywords;
+  }
+
+  &::part(details-content) {
+    block-size: 0;
+    overflow-y: clip;
+    transition: content-visibility 400ms allow-discrete, height 400ms;
+  }
+
+  &[open]::part(details-content) {
+    height: auto;
+  }
 }

package/alert.css

@@ -1,68 +1,54 @@
 .ds-alert {
+  /* default color/variant: info */
   --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-border-color: var(--ds-color-info-border-default);
+  --dsc-alert-icon-color: var(--ds-color-info-text-subtle);
+  --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-border-radius: var(--ds-border-radius-md);
   --dsc-alert-color: var(--ds-color-neutral-text-default);
   --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-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);
 
   background: var(--dsc-alert-background);
   border-radius: var(--dsc-alert-border-radius);
   border: 1px solid var(--dsc-alert-border-color);
+  box-sizing: border-box;
   color: var(--dsc-alert-color);
   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);
+  position: relative;
 
-  & > :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);
+  & > :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: 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;
+    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 */
+    translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */
     width: var(--dsc-alert-icon-size);
   }
 
   /**
-    * 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);
+   * Colors
+   */
+  &[data-color] {
+    --dsc-alert-background: var(--ds-color-surface-default);
+    --dsc-alert-border-color: var(--ds-color-border-default);
+    --dsc-alert-icon-color: var(--ds-color-text-subtle);
+  }
+  &[data-color='warning'] {
     --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");
   }
 
-  &[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);
+  &[data-color='success'] {
     --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");
   }
 
-  &[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);
+  &[data-color='danger'] {
     --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");
   }
-
-  /**
-    * Sizes
-    */
-  &[data-size="sm"] {
-    --dsc-alert-icon-size: var(--ds-sizing-6);
-    --dsc-alert-padding: var(--ds-spacing-5);
-  }
-
-  &[data-size="lg"] {
-    --dsc-alert-icon-size: var(--ds-sizing-8);
-    --dsc-alert-padding: var(--ds-spacing-7);
-  }
 }

package/avatar.css

@@ -1,46 +1,57 @@
 .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-size: var(--ds-sizing-12);
   --dsc-avatar-padding: var(--ds-spacing-2);
-  --dsc-avatar-border-radius: 50%;
+  --dsc-avatar-border-radius: var(--ds-border-radius-full);
 
+  align-items: center;
   background: var(--dsc-avatar-background);
-  height: var(--dsc-avatar-size);
-  aspect-ratio: 1 / 1;
-  color: var(--dsc-avatar-color);
   border-radius: var(--dsc-avatar-border-radius);
-  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--dsc-avatar-color);
   display: inline-flex;
+  flex-shrink: 0;
+  font-weight: var(--ds-font-weight-medium);
+  height: var(--dsc-avatar-size);
   justify-content: center;
-  align-items: center;
-  user-select: none;
-  text-transform: uppercase;
+  overflow: hidden;
   text-decoration: none;
+  text-transform: uppercase;
+  user-select: none;
+  width: var(--dsc-avatar-size);
 
-  &:not(:has(> img)) {
+  &:not(:has(img)) {
     padding: var(--dsc-avatar-padding);
   }
 
-  & img {
+  & img,
+  & svg {
     object-fit: cover;
     width: 100%;
     height: 100%;
   }
 
-  & svg {
-    max-width: 100%;
-    max-height: 100%;
+  &[data-initials]:empty::before {
+    content: attr(data-initials);
+    font-size: round(down, 1.3em, 0.0625rem); /* Default to 130% */
   }
 
-  &:empty::before {
+  &:not([data-initials]):empty::before {
     content: '';
     width: 100%;
     height: 100%;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    background-color: currentcolor;
-    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");
+    background: currentcolor;
+    mask: var(--dsc-avatar-icon-url) center / contain no-repeat;
   }
 
   &[data-variant='circle'] {
@@ -51,48 +62,11 @@
     --dsc-avatar-border-radius: var(--ds-border-radius-sm);
   }
 
-  &[data-color='accent'] {
-    --dsc-avatar-background: var(--ds-color-accent-base-default);
-    --dsc-avatar-color: var(--ds-color-accent-contrast-default);
-  }
-
-  &[data-color='neutral'] {
-    --dsc-avatar-background: var(--ds-color-neutral-base-default);
-    --dsc-avatar-color: var(--ds-color-neutral-contrast-default);
-  }
-
-  &[data-color='brand1'] {
-    --dsc-avatar-background: var(--ds-color-brand1-base-default);
-    --dsc-avatar-color: var(--ds-color-brand1-contrast-default);
-  }
-
-  &[data-color='brand2'] {
-    --dsc-avatar-background: var(--ds-color-brand2-base-default);
-    --dsc-avatar-color: var(--ds-color-brand2-contrast-default);
-  }
-
-  &[data-color='brand3'] {
-    --dsc-avatar-background: var(--ds-color-brand3-base-default);
-    --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
-  }
-
   &[data-size='xs'] {
-    --dsc-avatar-size: var(--ds-sizing-7);
-    --dsc-avatar-padding: var(--ds-spacing-1);
+    font-size: var(--ds-font-size-1);
   }
 
   &[data-size='sm'] {
-    --dsc-avatar-size: var(--ds-sizing-9);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-  }
-
-  &[data-size='md'] {
-    --dsc-avatar-size: var(--ds-sizing-12);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-  }
-
-  &[data-size='lg'] {
-    --dsc-avatar-size: var(--ds-sizing-15);
-    --dsc-avatar-padding: var(--ds-spacing-2);
+    font-size: var(--ds-font-size-3);
   }
 }

package/badge.css

@@ -1,10 +1,20 @@
 .ds-badge {
-  --dsc-badge-background: var(--ds-color-accent-base-default);
-  --dsc-badge-color: var(--ds-color-accent-contrast-default);
+  /* color vars */
+  --dsc-badge-background: var(--ds-color-base-default);
+  --dsc-badge-color: var(--ds-color-contrast-default);
+
+  &[data-color='neutral'] {
+    --dsc-badge-background: var(--ds-color-neutral-surface-default);
+    --dsc-badge-color: var(--ds-color-neutral-text-default);
+  }
+
+  /* sizing vars */
   --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
   --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
 
+  box-sizing: border-box;
   display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   position: relative;
 
   &::before {
@@ -14,53 +24,16 @@
     box-sizing: border-box;
     color: var(--dsc-badge-color);
     display: grid;
+    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
     min-height: var(--dsc-badge-size);
     min-width: var(--dsc-badge-size);
     padding: var(--dsc-badge-padding);
     place-items: center;
   }
 
-  &[data-size='sm'] {
-    --dsc-badge-size: var(--ds-sizing-3);
-    --dsc-badge-padding: 0 var(--ds-spacing-1);
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-5);
-    }
-  }
-
-  &[data-size='lg'] {
-    --dsc-badge-size: var(--ds-sizing-4);
-    --dsc-badge-padding: 0 var(--ds-spacing-2);
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-7);
-    }
-  }
-
-  &[data-color='info'] {
-    --dsc-badge-background: var(--ds-color-info-base-default);
-    --dsc-badge-color: var(--ds-color-info-contrast-default);
-  }
-
-  &[data-color='success'] {
-    --dsc-badge-background: var(--ds-color-success-base-default);
-    --dsc-badge-color: var(--ds-color-success-contrast-default);
-  }
-
-  &[data-color='warning'] {
-    --dsc-badge-background: var(--ds-color-warning-base-default);
-    --dsc-badge-color: var(--ds-color-warning-contrast-default);
-  }
-
-  &[data-color='danger'] {
-    --dsc-badge-background: var(--ds-color-danger-base-default);
-    --dsc-badge-color: var(--ds-color-danger-contrast-default);
-  }
-
-  &[data-color='neutral'] {
-    --dsc-badge-background: var(--ds-color-neutral-surface-default);
-    --dsc-badge-color: var(--ds-color-neutral-text-default);
+  & :where(img, svg) {
+    flex-shrink: 0; /* Never shrink icon */
+    font-size: 1.25em; /* Auto scale icon based on font-size */
   }
 
   /* If placement is present, we are floating */

package/breadcrumbs.css

@@ -1,16 +1,7 @@
 .ds-breadcrumbs {
   --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
-
-  &[data-size='sm'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-  }
-
-  &[data-size='lg'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-  }
+  --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");
 
   & > :is(ol, ul) {
     display: flex;
@@ -37,8 +28,7 @@
     display: inline-block;
     height: var(--dsc-breadcrumbs-chevron-size);
     margin-inline: var(--dsc-breadcrumbs-spacing);
-    mask: center / contain no-repeat
-      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");
+    mask: center / contain no-repeat var(--dsc-breadcrumbs-icon-url);
     vertical-align: middle;
     width: var(--dsc-breadcrumbs-chevron-size);
   }
@@ -49,14 +39,14 @@
     rotate: 180deg;
   }
 
-  @media (max-width: 650px) {
+  @media (width < 650px) {
     & > :is(ol, ul):not(:only-child) {
       display: none; /* Hide list when mobile and having back link */
     }
   }
 
-  @media (min-width: 651px) {
-    & > :not(ol, ul) {
+  @media (min-width: 650px) {
+    & > :is(:not(ol, ul)):not(:only-child) {
       display: none; /* Hide back link when desktop and having list */
     }
   }