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

package/index.css

@@ -1,23 +1,22 @@
-@charset "UTF-8";
+@charset 'UTF-8';
 
-@layer ds.reset, ds.theme, ds.base, ds.components;
+@layer ds.base, ds.typography, ds.theme, ds.components;
 
 /** Import order defines ordinal specificity for layers */
-@import url('./baseline/ds-reset.css') layer(ds.reset);
-@import url('./baseline/typography.css') layer(ds.base.typography);
-@import url('./utilities.css') layer(ds.base.utilities);
+@import url('./base/base.css') layer(ds.base);
+@import url('./heading.css') layer(ds.typography);
+@import url('./label.css') layer(ds.typography);
+@import url('./paragraph.css') layer(ds.typography);
+@import url('./validation-message.css') layer(ds.typography);
 @import url('./button.css') layer(ds.components);
+@import url('./field.css') layer(ds.components);
+@import url('./input.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./popover.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
 @import url('./accordion.css') layer(ds.components);
-@import url('./switch.css') layer(ds.components);
-@import url('./checkbox.css') layer(ds.components);
-@import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
-@import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
-@import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);
 @import url('./list.css') layer(ds.components);
@@ -40,3 +39,108 @@
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
+
+/* TODO: Will move to tokens as part of #2508 */
+:root {
+  --ds-sizing-base: 18; /* Unitless base font-size 18px */
+  --ds-sizing-step: 4; /* Unitless step size 4px */
+  --ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);
+
+  /* Sizing when not supporting round() */
+  --ds-sizing-1: calc(var(--ds-sizing-scale) * 1em);
+  --ds-sizing-2: calc(var(--ds-sizing-scale) * 2em);
+  --ds-sizing-3: calc(var(--ds-sizing-scale) * 3em);
+  --ds-sizing-4: calc(var(--ds-sizing-scale) * 4em);
+  --ds-sizing-5: calc(var(--ds-sizing-scale) * 5em);
+  --ds-sizing-6: calc(var(--ds-sizing-scale) * 6em);
+  --ds-sizing-7: calc(var(--ds-sizing-scale) * 7em);
+  --ds-sizing-8: calc(var(--ds-sizing-scale) * 8em);
+  --ds-sizing-9: calc(var(--ds-sizing-scale) * 9em);
+  --ds-sizing-10: calc(var(--ds-sizing-scale) * 10em);
+  --ds-sizing-11: calc(var(--ds-sizing-scale) * 11em);
+  --ds-sizing-12: calc(var(--ds-sizing-scale) * 12em);
+  --ds-sizing-13: calc(var(--ds-sizing-scale) * 13em);
+  --ds-sizing-14: calc(var(--ds-sizing-scale) * 14em);
+  --ds-sizing-15: calc(var(--ds-sizing-scale) * 15em);
+  --ds-sizing-16: calc(var(--ds-sizing-scale) * 16em);
+  --ds-sizing-17: calc(var(--ds-sizing-scale) * 17em);
+  --ds-sizing-18: calc(var(--ds-sizing-scale) * 18em);
+  --ds-sizing-19: calc(var(--ds-sizing-scale) * 19em);
+  --ds-sizing-20: calc(var(--ds-sizing-scale) * 20em);
+  --ds-sizing-21: calc(var(--ds-sizing-scale) * 21em);
+  --ds-sizing-22: calc(var(--ds-sizing-scale) * 22em);
+  --ds-sizing-23: calc(var(--ds-sizing-scale) * 23em);
+  --ds-sizing-24: calc(var(--ds-sizing-scale) * 24em);
+  --ds-sizing-25: calc(var(--ds-sizing-scale) * 25em);
+  --ds-sizing-26: calc(var(--ds-sizing-scale) * 26em);
+  --ds-sizing-27: calc(var(--ds-sizing-scale) * 27em);
+  --ds-sizing-28: calc(var(--ds-sizing-scale) * 28em);
+  --ds-sizing-29: calc(var(--ds-sizing-scale) * 29em);
+  --ds-sizing-30: calc(var(--ds-sizing-scale) * 30em);
+
+  /* Sizing when supporting round() */
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
+    --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
+    --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);
+    --ds-sizing-4: round(down, calc(var(--ds-sizing-scale) * 4em), 0.0625rem);
+    --ds-sizing-5: round(down, calc(var(--ds-sizing-scale) * 5em), 0.0625rem);
+    --ds-sizing-6: round(down, calc(var(--ds-sizing-scale) * 6em), 0.0625rem);
+    --ds-sizing-7: round(down, calc(var(--ds-sizing-scale) * 7em), 0.0625rem);
+    --ds-sizing-8: round(down, calc(var(--ds-sizing-scale) * 8em), 0.0625rem);
+    --ds-sizing-9: round(down, calc(var(--ds-sizing-scale) * 9em), 0.0625rem);
+    --ds-sizing-10: round(down, calc(var(--ds-sizing-scale) * 10em), 0.0625rem);
+    --ds-sizing-11: round(down, calc(var(--ds-sizing-scale) * 11em), 0.0625rem);
+    --ds-sizing-12: round(down, calc(var(--ds-sizing-scale) * 12em), 0.0625rem);
+    --ds-sizing-13: round(down, calc(var(--ds-sizing-scale) * 13em), 0.0625rem);
+    --ds-sizing-14: round(down, calc(var(--ds-sizing-scale) * 14em), 0.0625rem);
+    --ds-sizing-15: round(down, calc(var(--ds-sizing-scale) * 15em), 0.0625rem);
+    --ds-sizing-16: round(down, calc(var(--ds-sizing-scale) * 16em), 0.0625rem);
+    --ds-sizing-17: round(down, calc(var(--ds-sizing-scale) * 17em), 0.0625rem);
+    --ds-sizing-18: round(down, calc(var(--ds-sizing-scale) * 18em), 0.0625rem);
+    --ds-sizing-19: round(down, calc(var(--ds-sizing-scale) * 19em), 0.0625rem);
+    --ds-sizing-20: round(down, calc(var(--ds-sizing-scale) * 20em), 0.0625rem);
+    --ds-sizing-21: round(down, calc(var(--ds-sizing-scale) * 21em), 0.0625rem);
+    --ds-sizing-22: round(down, calc(var(--ds-sizing-scale) * 22em), 0.0625rem);
+    --ds-sizing-23: round(down, calc(var(--ds-sizing-scale) * 23em), 0.0625rem);
+    --ds-sizing-24: round(down, calc(var(--ds-sizing-scale) * 24em), 0.0625rem);
+    --ds-sizing-25: round(down, calc(var(--ds-sizing-scale) * 25em), 0.0625rem);
+    --ds-sizing-26: round(down, calc(var(--ds-sizing-scale) * 26em), 0.0625rem);
+    --ds-sizing-27: round(down, calc(var(--ds-sizing-scale) * 27em), 0.0625rem);
+    --ds-sizing-28: round(down, calc(var(--ds-sizing-scale) * 28em), 0.0625rem);
+    --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
+    --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
+  }
+
+  /* Spacing */
+  --ds-spacing-1: var(--ds-sizing-1);
+  --ds-spacing-2: var(--ds-sizing-2);
+  --ds-spacing-3: var(--ds-sizing-3);
+  --ds-spacing-4: var(--ds-sizing-4);
+  --ds-spacing-5: var(--ds-sizing-5);
+  --ds-spacing-6: var(--ds-sizing-6);
+  --ds-spacing-7: var(--ds-sizing-7);
+  --ds-spacing-8: var(--ds-sizing-8);
+  --ds-spacing-9: var(--ds-sizing-9);
+  --ds-spacing-10: var(--ds-sizing-10);
+  --ds-spacing-11: var(--ds-sizing-11);
+  --ds-spacing-12: var(--ds-sizing-12);
+  --ds-spacing-13: var(--ds-sizing-13);
+  --ds-spacing-14: var(--ds-sizing-14);
+  --ds-spacing-15: var(--ds-sizing-15);
+  --ds-spacing-16: var(--ds-sizing-16);
+  --ds-spacing-17: var(--ds-sizing-17);
+  --ds-spacing-18: var(--ds-sizing-18);
+  --ds-spacing-19: var(--ds-sizing-19);
+  --ds-spacing-20: var(--ds-sizing-20);
+  --ds-spacing-21: var(--ds-sizing-21);
+  --ds-spacing-22: var(--ds-sizing-22);
+  --ds-spacing-23: var(--ds-sizing-23);
+  --ds-spacing-24: var(--ds-sizing-24);
+  --ds-spacing-25: var(--ds-sizing-25);
+  --ds-spacing-26: var(--ds-sizing-26);
+  --ds-spacing-27: var(--ds-sizing-27);
+  --ds-spacing-28: var(--ds-sizing-28);
+  --ds-spacing-29: var(--ds-sizing-29);
+  --ds-spacing-30: var(--ds-sizing-30);
+}

package/input.css

@@ -0,0 +1,186 @@
+.ds-input {
+  --dsc-input-background--checked: var(--dsc-input-border-color--checked);
+  --dsc-input-background--invalid: var(--dsc-input-border-color--invalid);
+  --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle);
+  --dsc-input-background--switch: var(--ds-color-neutral-border-default);
+  --dsc-input-background: var(--ds-color-neutral-background-default);
+  --dsc-input-border-color--checked: var(--ds-color-base-default);
+  --dsc-input-border-color--invalid: var(--ds-color-danger-border-strong);
+  --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
+  --dsc-input-border-color: var(--ds-color-neutral-border-default);
+  --dsc-input-border-width--toggle: max(1px, calc(var(--ds-spacing-1) / 2)); /* Allow border-width to grow with font-size */
+  --dsc-input-border-width: 1px;
+  --dsc-input-color--checked: var(--ds-color-contrast-default);
+  --dsc-input-color--invalid: var(--ds-color-danger-contrast-default);
+  --dsc-input-color--readonly: var(--ds-color-neutral-text-subtle);
+  --dsc-input-color: var(--ds-color-neutral-text-default);
+  --dsc-input-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+  --dsc-input-size--switch: var(--ds-sizing-7);
+  --dsc-input-size--toggle: var(--ds-sizing-6);
+  --dsc-input-size: var(--ds-sizing-12);
+  --dsc-input-stroke: 0.055em;
+
+  /* Checkmark with antialiasing is achieved by percentages 48% / 50% / 52% */
+  --diagonal-1: transparent calc(48% - var(--dsc-input-stroke));
+  --diagonal-2: currentcolor calc(50% - var(--dsc-input-stroke));
+  --diagonal-3: currentcolor calc(50% + var(--dsc-input-stroke));
+  --diagonal-4: transparent calc(52% + var(--dsc-input-stroke));
+  --check-left: 10% 73% / 35% 35% no-repeat content-box linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4));
+  --check-right: 90% 50% / 65% 65% no-repeat content-box linear-gradient(-45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4));
+
+  appearance: none;
+  background: var(--dsc-input-background);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--dsc-input-border-width) solid var(--dsc-input-border-color); /* Inherit from .ds-input-addons if present */
+  box-shadow: var(--dsc-input-box-shadow);
+  box-sizing: border-box;
+  color: var(--dsc-input-color);
+  font-family: inherit;
+  height: var(--dsc-input-size);
+  line-height: inherit;
+  margin: 0; /* Reset native margin on checkbox and radio */
+  max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
+  min-width: 0; /* Allow shrinking in flex container, see https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox */
+  padding: var(--dsc-input-padding);
+  position: relative; /* Ensure foucs outline renders on top */
+
+  @composes ds-focus from './base/base.css';
+
+  /* Round border-width up to nearest 1px if supported */
+  @supports (width: round(down, .1em, 1px)) {
+    border-width: round(up, var(--dsc-input-border-width), 0.0625rem);
+  }
+
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size */
+  }
+
+  /* Change switch background with low specificity to allow states to overwrite */
+  &:where([role='switch']) {
+    --dsc-input-background: var(--dsc-input-background--switch);
+  }
+
+  &:is(select) {
+    padding-right: 2.4em;
+    background: linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)) calc(100% - 1.2em + var(--dsc-input-stroke))
+      / 0.4em 0.4em no-repeat, linear-gradient(-45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)) calc(100% - 0.8em) / 0.4em
+      0.4em no-repeat, var(--dsc-input-background);
+  }
+
+  &:is(textarea) {
+    height: auto; /* Allow rows="" to set height */
+    min-height: calc(var(--dsc-input-size) * 1.5); /* Set a min-height to indicate this is a <textarea> and not an <input> */
+    resize: vertical; /* Allow resizing vertically only */
+
+    &:not([rows]) {
+      field-sizing: content;
+    }
+  }
+
+  &:not([size], [cols], select) {
+    width: 100%;
+  }
+
+  /**
+   * States
+   */
+  &:checked,
+  &:indeterminate:where([type='checkbox']) {
+    --dsc-input-background: var(--dsc-input-background--checked);
+    --dsc-input-border-color: var(--dsc-input-border-color--checked);
+    --dsc-input-color: var(--dsc-input-color--checked);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
+
+  &[aria-invalid='true'] {
+    --dsc-input-background--checked: var(--dsc-input-background--invalid);
+    --dsc-input-border-color: var(--dsc-input-border-color--invalid);
+    --dsc-input-color--checked: var(--dsc-input-color--invalid);
+  }
+
+  /* Using attribute [readonly] since pseudo selector :read-only is always true for checkbox, radio and select */
+  &[readonly] {
+    --dsc-input-background: var(--dsc-input-background--readonly);
+    --dsc-input-border-color: var(--dsc-input-border-color--readonly);
+    --dsc-input-color: var(--dsc-input-color--readonly);
+  }
+
+  /**
+   * Toggle inputs and select
+   */
+  &:read-only:not([readonly], [aria-disabled='true'], :disabled) {
+    cursor: pointer;
+  }
+
+  /**
+   * Toggle inputs
+   */
+  &[type='checkbox'],
+  &[type='radio'] {
+    --dsc-input-border-width: var(--dsc-input-border-width--toggle);
+    --dsc-input-padding: calc(var(--ds-sizing-1) / 2);
+    --dsc-input-size: var(--dsc-input-size--toggle);
+
+    flex-shrink: 0; /* Never shrink a toggle input */
+    line-height: inherit; /* Inherit line height so we can use 1lh to align with first line of label */
+    width: var(--dsc-input-size);
+
+    &:not([aria-label]) {
+      translate: 0 calc((1lh - var(--dsc-input-size)) / 2); /* Align with first line of <label> text, but not if having aria-label as <label> */
+    }
+  }
+
+  &[type='radio'] {
+    border-radius: var(--ds-border-radius-full);
+  }
+
+  &[type='radio']:checked {
+    background: radial-gradient(circle closest-side, currentcolor 45%, transparent 50%), var(--dsc-input-background);
+  }
+
+  &[type='checkbox']:checked {
+    background: var(--check-left), var(--check-right), var(--dsc-input-background);
+  }
+
+  &[type='checkbox']:indeterminate {
+    background: center / contain no-repeat content-box
+      linear-gradient(
+        transparent calc(48% - var(--dsc-input-stroke)),
+        currentcolor calc(50% - var(--dsc-input-stroke)),
+        currentcolor calc(50% + var(--dsc-input-stroke)),
+        transparent calc(52% + var(--dsc-input-stroke))
+      ), var(--dsc-input-background);
+  }
+
+  /**
+   * Switch
+   */
+  &[role='switch']:is([type='radio'], [type='checkbox']) {
+    --dsc-input-color: transparent; /* Hide checkmark */
+    --dsc-input-padding: var(--ds-sizing-1);
+    --dsc-input-size: var(--dsc-input-size--switch);
+    --circle-color: var(--dsc-input-color--checked);
+    --circle-position: left;
+
+    border-radius: var(--ds-border-radius-full);
+    padding-left: var(--dsc-input-size); /* Push checkmark to right side */
+    transition: 0.2s background-position;
+    width: calc((var(--dsc-input-size) - var(--dsc-input-border-width)) * 2); /* Subtract border-width to make background-image math correct */
+    background: var(--check-left), var(--check-right), radial-gradient(circle closest-side, var(--circle-color) 95%, transparent 100%) var(--circle-position) /
+      50% 100% no-repeat padding-box, var(--dsc-input-background);
+
+    &:checked {
+      --dsc-input-color: var(--dsc-input-border-color);
+      --circle-position: right;
+    }
+
+    &[readonly] {
+      --circle-color: var(--dsc-input-color--readonly);
+    }
+  }
+}

package/label.css

@@ -0,0 +1,30 @@
+.ds-label {
+  --dsc-label--readonly: initial; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */
+  --dsc-label-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E");
+  --dsc-label-icon-size: 1.2em;
+  --dsc-label-gap: var(--ds-spacing-1);
+
+  font-weight: var(--ds-font-weight-medium);
+  padding-inline-start: var(--dsc-label--readonly) calc(var(--dsc-label-icon-size) + var(--dsc-label-gap));
+  position: relative;
+
+  &::before {
+    background: currentcolor;
+    content: var(--dsc-label--readonly) '';
+    display: inline-block;
+    height: var(--dsc-label-icon-size);
+    margin-inline: calc((var(--dsc-label-icon-size) + var(--dsc-label-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    mask: center / contain no-repeat var(--dsc-label-icon-url);
+    position: absolute;
+    width: var(--dsc-label-icon-size);
+    translate: 0 calc((1lh - var(--dsc-label-icon-size)) / 2); /* Center icon to line height */
+  }
+
+  &[data-weight='semibold'] {
+    font-weight: var(--ds-font-weight-semibold);
+  }
+
+  &[data-weight='regular'] {
+    font-weight: var(--ds-font-weight-regular);
+  }
+}

package/link.css

@@ -1,38 +1,44 @@
 .ds-link {
+  /* default color: accent */
   --dsc-link-background--active: var(--ds-color-accent-surface-default);
-  --dsc-link-background--focus: var(--ds-color-focus-outer);
   --dsc-link-color--active: var(--ds-color-accent-text-default);
-  --dsc-link-color--focus: var(--ds-color-focus-inner);
   --dsc-link-color--hover: var(--ds-color-accent-text-default);
-  --dsc-link-color--visited: var(--ds-global-purple-12);
   --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-text-decoration-thickness--hover: max(2px, 0.125rem, 0.12em);
-  --dsc-link-text-decoration-thickness: max(1px, 0.0625rem);
+
+  --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);
+  --dsc-link-text-decoration-thickness--hover: 0.125em; /* 2px ish */
+  --dsc-link-text-decoration-thickness: 0.0625em; /* 1px ish */
 
   color: var(--dsc-link-color);
   outline: none;
   text-decoration-style: solid;
   text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
-  text-underline-offset: max(5px, 0.25rem);
+  text-underline-offset: 0.27em; /* 5px ish */
 
   & :is(img, svg) {
     vertical-align: middle; /* Align img or svg icon with text */
   }
 
   /**
-    * Colors
-    */
+   * 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);
+  }
   &[data-color='neutral'] {
-    --dsc-link-background--active: var(--ds-color-neutral-surface-default);
     --dsc-link-color--active: var(--ds-color-neutral-text-subtle);
     --dsc-link-color--hover: var(--ds-color-neutral-text-subtle);
-    --dsc-link-color--visited: var(--ds-global-purple-12);
     --dsc-link-color: var(--ds-color-neutral-text-default);
   }
 
   /**
-    * States
-    */
+   * States
+   */
   &:visited {
     color: var(--dsc-link-color--visited);
   }

package/list.css

@@ -1,32 +1,24 @@
 .ds-list {
-  --dsc-list-font-size: var(--ds-font-size-5);
   --dsc-list-padding-left: var(--ds-spacing-6);
   --dsc-list-spacing: var(--ds-spacing-3);
   --dsc-list-spacing-nested: var(--ds-spacing-2);
 
-  font-size: var(--dsc-list-font-size); /* Replace with composes paragraph-md */
-  line-height: var(--ds-line-height-md); /* Replace with composes paragraph-md */
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  & > li + li { margin-top: var(--dsc-list-spacing) }
-  & > li > :is(ol, ul) { --dsc-list-spacing: var(--dsc-list-spacing-nested) } /* Shrink spacing a bit when nested */
+  & > li + li {
+    margin-top: var(--dsc-list-spacing);
+  }
+
+  & > li > :is(ol, ul) {
+    --dsc-list-spacing: var(--dsc-list-spacing-nested);
+  } /* Shrink spacing a bit when nested */
 
   /* Add zero-width space to fix VoiceOver: https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
    * This can also be acheived by using role="list" + role="listitem", but is nice to solve with CSS avoiding cluttered HTML
    */
   & > li::before {
-    content: "\200B";
+    content: '\200B';
     position: absolute;
   }
-
-  &[data-size="sm"] {
-    --dsc-list-padding-left: var(--ds-spacing-4);
-    --dsc-list-font-size: var(--ds-font-size-4); /* Replace with composes paragraph-sm */
-  }
-
-  &[data-size="lg"] {
-    --dsc-list-font-size: var(--ds-font-size-6); /* Replace with composes paragraph-sm */
-    --dsc-list-spacing: var(--ds-spacing-4);
-  }
 }

package/modal.css

@@ -1,117 +1,93 @@
 .ds-modal {
-  --dsc-modal-max-width: 40rem;
+  --dsc-modal-backdrop-background: rgb(0 0 0 / 0.5);
   --dsc-modal-background: var(--ds-color-neutral-background-default);
+  --dsc-modal-close-margin: var(--ds-spacing-3);
   --dsc-modal-color: var(--ds-color-neutral-text-default);
-  --dsc-modal-backdrop-background: rgb(0 0 0 / 0.5);
-  --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-18) var(--ds-spacing-2) var(--ds-spacing-6);
-  --dsc-modal-footer-padding: var(--ds-spacing-3) var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-6);
-  --dsc-modal-content-padding: var(--ds-spacing-2) var(--ds-spacing-6);
-  --dsc-modal-content-max-height: 80vh;
+  --dsc-modal-divider: 1px solid var(--ds-color-neutral-border-subtle);
+  --dsc-modal-max-height: 80vh;
+  --dsc-modal-max-width: 40rem;
+  --dsc-modal-padding: var(--ds-spacing-6);
+  --close-top-right: calc(var(--dsc-modal-padding) * -1 + var(--dsc-modal-close-margin));
 
-  padding: 0;
-  width: 100%;
-  max-width: var(--dsc-modal-max-width);
-  border: none;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
+  background: var(--dsc-modal-background);
+  border-radius: var(--ds-border-radius-lg);
+  border: 0;
   box-shadow: var(--ds-shadow-xl);
-  background-color: var(--dsc-modal-background);
+  box-sizing: border-box;
   color: var(--dsc-modal-color);
+  max-height: var(--dsc-modal-max-height);
+  max-width: var(--dsc-modal-max-width);
+  padding: var(--dsc-modal-padding);
+  width: 100%;
 
   &::backdrop {
-    background-color: var(--dsc-modal-backdrop-background);
     animation: fade-in 300ms ease-in-out;
+    /* we include a fallback color because ::backdrop didn't inherit
+       custom properties in Chrome until version 122 (mid-2024) */
+    background: var(--dsc-modal-backdrop-background, rgb(0 0 0 / 0.5));
   }
 
   &[open] {
-    animation:
-      slide-in 300ms ease-in-out,
-      fade-in 300ms ease-in-out;
+    animation: slide-in 300ms ease-in-out, fade-in 300ms ease-in-out;
   }
 
-  & > hr {
-    margin: var(--ds-spacing-3) 0 !important;
+  &:has(> .ds-modal__block) {
+    --close-top-right: var(--dsc-modal-close-margin);
+
+    padding: 0; /* Let Modal.Block own the padding */
   }
 
   @media (max-width: 40rem) {
-    & {
-      min-width: 100%;
-      max-width: 100%;
-      border-radius: 0;
-    }
+    min-width: 100%;
+    max-width: 100%;
+    border-radius: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    &[open] {
-      animation: none;
-    }
-
+    &[open],
     &::backdrop {
       animation: none;
     }
   }
 
-  &.ds-modal--lock-scroll {
-    overflow: hidden;
-  }
-
-  .ds-modal__header {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding: var(--dsc-modal-header-padding);
-    gap: var(--ds-spacing-1);
-
-    &:not(:has(> .ds-modal__header__button)) {
-      --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
-    }
-
-    .ds-modal__header__button {
-      position: absolute;
-      top: var(--ds-spacing-3);
-      right: var(--ds-spacing-3);
-      color: var(--dsc-modal-color);
-
-      &::before {
-        content: '';
-        background: currentcolor;
-        height: 1.5em;
-        width: 1.5em;
-        mask: center/contain no-repeat
-          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' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
-      }
+  /* Close button */
+  & > form[method='dialog']:first-child > button:only-child {
+    float: right;
+    margin: var(--close-top-right) var(--close-top-right) var(--dsc-modal-close-margin) var(--dsc-modal-close-margin);
+    color: inherit;
+
+    &::before {
+      content: '';
+      background: currentcolor;
+      height: var(--ds-spacing-6);
+      width: var(--ds-spacing-6);
+      mask: center / contain no-repeat
+        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' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
     }
   }
+}
 
-  .ds-modal__footer {
-    display: flex;
-    align-items: center;
-    gap: var(--ds-spacing-4);
-    padding: var(--dsc-modal-footer-padding);
-  }
+.ds-modal__block {
+  padding: var(--dsc-modal-padding);
 
-  .ds-modal__content {
-    padding: var(--dsc-modal-content-padding);
-    max-height: var(--dsc-modal-content-max-height);
-    overflow-y: auto;
+  & + & {
+    border-top: var(--dsc-modal-divider);
   }
 }
 
-@keyframes slide-in {
-  0% {
-    transform: translateY(50px);
-  }
+/* Prevent scroll when open */
+body:has(.ds-modal[open]) {
+  overflow: hidden;
+}
 
-  100% {
-    transform: translateY(0);
+@keyframes slide-in {
+  from {
+    translate: 0 50px;
   }
 }
 
 @keyframes fade-in {
-  0% {
+  from {
     opacity: 0;
   }
-
-  100% {
-    opacity: 1;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "1.0.0-next.34",
+  "version": "1.0.0-next.36",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": {