feat: relative sizing (#2541)

Work on #2508 
Minor adjustments will be done in #2665

---------

Co-authored-by: Michael Marszalek <mimarz@gmail.com>

Author: eirikbacker

.changeset/fair-beds-destroy.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context

packages/css/accordion.css

@@ -8,7 +8,8 @@
   --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-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-accordion-size: var(--ds-sizing-14);
 
   &[data-border] > * {
     border: var(--dsc-accordion-border);
@@ -65,16 +66,18 @@
   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);
 
     @composes ds-focus from './base/base.css';
-    @composes ds-body-text--sm from './base/base.css';
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
@@ -84,11 +87,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 var(--dsc-accordion-chevron-url);
-      position: absolute;
-      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" */
-
       width: var(--dsc-accordion-chevron-size);
     }
   }

packages/css/alert.css

@@ -18,8 +18,6 @@
   padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
   position: relative;
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > :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);
@@ -55,21 +53,4 @@
     --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");
   }
-
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    --dsc-alert-icon-size: var(--ds-sizing-6);
-    --dsc-alert-padding: var(--ds-spacing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-alert-icon-size: var(--ds-sizing-8);
-    --dsc-alert-padding: var(--ds-spacing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
 }

packages/css/avatar.css

@@ -12,15 +12,14 @@
   box-sizing: border-box;
   color: var(--dsc-avatar-color);
   display: inline-flex;
+  font-weight: var(--ds-font-weight-medium);
   height: var(--dsc-avatar-size);
   justify-content: center;
   overflow: hidden;
   text-decoration: none;
   text-transform: uppercase;
   user-select: none;
 
-  @composes ds-body-text--xs from './base/base.css';
-
   &:not(:has(> img)) {
     padding: var(--dsc-avatar-padding);
   }
@@ -79,31 +78,20 @@
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
 
+  /* TODO: Sizes */
   &[data-size='xs'] {
-    --dsc-avatar-size: var(--ds-sizing-7);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
-    @composes ds-body-text--xs from './base/base.css';
+    font-size: var(--ds-body-xs-font-size);
   }
 
   &[data-size='sm'] {
-    --dsc-avatar-size: var(--ds-sizing-9);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
     @composes ds-heading-text--2xs from './base/base.css';
   }
 
   &[data-size='md'] {
-    --dsc-avatar-size: var(--ds-sizing-12);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
     @composes ds-heading-text--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
-    --dsc-avatar-size: var(--ds-sizing-15);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
     @composes ds-heading-text--md from './base/base.css';
   }
 }

packages/css/badge.css

@@ -6,10 +6,9 @@
 
   box-sizing: border-box;
   display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   position: relative;
 
-  @composes ds-body-text--short-sm from './base/base.css';
-
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -23,26 +22,8 @@
     place-items: center;
   }
 
-  &[data-size='sm'] {
-    --dsc-badge-size: var(--ds-sizing-3);
-    --dsc-badge-padding: 0 var(--ds-spacing-1);
-
-    @composes ds-body-text--short-xs from './base/base.css';
-
-    &[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);
-
-    @composes ds-body-text--short-md from './base/base.css';
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-7);
-    }
+  &:not([data-size]) {
+    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
   }
 
   &[data-color='info'] {

packages/css/base/base.css

@@ -17,6 +17,14 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
+  --ds-font-size-minus-1: max(.9em, .875rem); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-plus-1: 1.1em; /* Default to 110% */
+
+  /* font-size adjustments if supporting round() */
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
+    --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
+  }
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
@@ -42,114 +50,44 @@
   outline-offset: var(--dsc-focus-border-width);
 }
 
-/** Body typography */
-.ds-body-text--xs {
+[data-size='xs'] {
   font-weight: var(--ds-body-xs-font-weight);
   line-height: var(--ds-body-xs-line-height);
   font-size: var(--ds-body-xs-font-size);
   letter-spacing: var(--ds-body-xs-letter-spacing);
 }
 
-.ds-body-text--sm {
+[data-size='sm'] {
   font-weight: var(--ds-body-sm-font-weight);
   line-height: var(--ds-body-sm-line-height);
   font-size: var(--ds-body-sm-font-size);
   letter-spacing: var(--ds-body-sm-letter-spacing);
 }
 
-.ds-body-text--md {
+/* Setting default font on <body> not :root/<html> to ensure 1rem is still 16px */
+body,
+[data-size='md'] {
   font-weight: var(--ds-body-md-font-weight);
   line-height: var(--ds-body-md-line-height);
   font-size: var(--ds-body-md-font-size);
   letter-spacing: var(--ds-body-md-letter-spacing);
 }
 
-.ds-body-text--lg {
+[data-size='lg'] {
   font-weight: var(--ds-body-lg-font-weight);
   line-height: var(--ds-body-lg-line-height);
   font-size: var(--ds-body-lg-font-size);
   letter-spacing: var(--ds-body-lg-letter-spacing);
 }
 
-.ds-body-text--xl {
+[data-size='xl'] {
   font-weight: var(--ds-body-xl-font-weight);
   line-height: var(--ds-body-xl-line-height);
   font-size: var(--ds-body-xl-font-size);
   letter-spacing: var(--ds-body-xl-letter-spacing);
 }
 
-.ds-body-text--long-xs {
-  font-weight: var(--ds-body-long-xs-font-weight);
-  line-height: var(--ds-body-long-xs-line-height);
-  font-size: var(--ds-body-long-xs-font-size);
-  letter-spacing: var(--ds-body-long-xs-letter-spacing);
-}
-
-.ds-body-text--long-sm {
-  font-weight: var(--ds-body-long-sm-font-weight);
-  line-height: var(--ds-body-long-sm-line-height);
-  font-size: var(--ds-body-long-sm-font-size);
-  letter-spacing: var(--ds-body-long-sm-letter-spacing);
-}
-
-.ds-body-text--long-md {
-  font-weight: var(--ds-body-long-md-font-weight);
-  line-height: var(--ds-body-long-md-line-height);
-  font-size: var(--ds-body-long-md-font-size);
-  letter-spacing: var(--ds-body-long-md-letter-spacing);
-}
-
-.ds-body-text--long-lg {
-  font-weight: var(--ds-body-long-lg-font-weight);
-  line-height: var(--ds-body-long-lg-line-height);
-  font-size: var(--ds-body-long-lg-font-size);
-  letter-spacing: var(--ds-body-long-lg-letter-spacing);
-}
-
-.ds-body-text--long-xl {
-  font-weight: var(--ds-body-long-xl-font-weight);
-  line-height: var(--ds-body-long-xl-line-height);
-  font-size: var(--ds-body-long-xl-font-size);
-  letter-spacing: var(--ds-body-long-xl-letter-spacing);
-}
-
-.ds-body-text--short-xs {
-  font-weight: var(--ds-body-short-xs-font-weight);
-  line-height: var(--ds-body-short-xs-line-height);
-  font-size: var(--ds-body-short-xs-font-size);
-  letter-spacing: var(--ds-body-short-xs-letter-spacing);
-}
-
-.ds-body-text--short-sm {
-  font-weight: var(--ds-body-short-sm-font-weight);
-  line-height: var(--ds-body-short-sm-line-height);
-  font-size: var(--ds-body-short-sm-font-size);
-  letter-spacing: var(--ds-body-short-sm-letter-spacing);
-}
-
-.ds-body-text--short-md {
-  font-weight: var(--ds-body-short-md-font-weight);
-  line-height: var(--ds-body-short-md-line-height);
-  font-size: var(--ds-body-short-md-font-size);
-  letter-spacing: var(--ds-body-short-md-letter-spacing);
-}
-
-.ds-body-text--short-lg {
-  font-weight: var(--ds-body-short-lg-font-weight);
-  line-height: var(--ds-body-short-lg-line-height);
-  font-size: var(--ds-body-short-lg-font-size);
-  letter-spacing: var(--ds-body-short-lg-letter-spacing);
-}
-
-.ds-body-text--short-xl {
-  font-weight: var(--ds-body-short-xl-font-weight);
-  line-height: var(--ds-body-short-xl-line-height);
-  font-size: var(--ds-body-short-xl-font-size);
-  letter-spacing: var(--ds-body-short-xl-letter-spacing);
-}
-
 /** Heading */
-
 .ds-heading-text--2xs {
   font-weight: var(--ds-heading-2xs-font-weight);
   line-height: var(--ds-heading-2xs-line-height);
@@ -199,6 +137,7 @@
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
 
+/* TODO: Maybe remove label sizes after sync with design */
 .ds-label--md {
   font-size: var(--ds-label-md-font-size);
   font-weight: var(--ds-label-md-font-weight);
@@ -227,6 +166,7 @@
   letter-spacing: var(--ds-label-lg-letter-spacing);
 }
 
+/* TODO: Maybe remove validation sizes after sync with design */
 .ds-validation-message--xs {
   font-weight: var(--ds-validation-message-xs-font-weight);
   line-height: var(--ds-validation-message-xs-line-height);

packages/css/breadcrumbs.css

@@ -3,22 +3,6 @@
   --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");
 
-  @composes ds-body-text--md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   & > :is(ol, ul) {
     display: flex;
     flex-wrap: wrap;