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

package/button.css

@@ -1,57 +1,87 @@
 .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-border-color: transparent;
+
+  &[data-variant='secondary'],
+  &[data-variant='tertiary'] {
+    --dsc-button-background: transparent;
+    --dsc-button-background--active: var(--ds-color-accent-surface-hover);
+    --dsc-button-background--hover: var(--ds-color-accent-surface-default);
+    --dsc-button-color: var(--ds-color-accent-text-subtle);
+  }
+  &[data-variant='secondary'] {
+    --dsc-button-border-color: var(--ds-color-accent-border-strong);
+  }
+
+  &[data-color] {
+    --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);
+
+    &[data-variant='secondary'],
+    &[data-variant='tertiary'] {
+      --dsc-button-background: transparent;
+      --dsc-button-background--active: var(--ds-color-surface-hover);
+      --dsc-button-background--hover: var(--ds-color-surface-default);
+      --dsc-button-color: var(--ds-color-text-subtle);
+    }
+    &[data-variant='secondary'] {
+      --dsc-button-border-color: var(--ds-color-border-strong);
+    }
+  }
+
   --dsc-button-font-size: var(--ds-font-size-5);
   --dsc-button-gap: var(--ds-spacing-2);
-  --dsc-button-padding-block: var(--ds-spacing-2);
-  --dsc-button-padding-inline: var(--ds-spacing-4);
+  --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
-  @composes ds-focus from './utilities.css';
-  @composes ds-paragraph-short from './baseline/typography.css';
-
   align-items: center;
   background: var(--dsc-button-background);
-  border-radius: var(--ds-border-radius-md);
-  border: var(--ds-border-width-default) solid var(--dsc-button-border-color, transparent);
+  border-radius: var(--ds-border-radius-default);
+  border: var(--ds-border-width-default) solid var(--dsc-button-border-color);
   box-sizing: border-box;
   color: var(--dsc-button-color);
   cursor: pointer;
   font-family: inherit;
+  font-weight: var(--ds-font-weight-medium);
   gap: var(--dsc-button-gap);
   justify-content: center;
+  line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-button-size);
   min-width: var(--dsc-button-size);
   outline: none;
-  padding: var(--dsc-button-padding-block) var(--dsc-button-padding-inline);
+  padding: var(--dsc-button-padding);
   text-align: inherit;
   text-decoration: none;
 
-  &:focus-visible {
-    position: relative; /* Place focusring on top */
+  @composes ds-focus from './base/base.css';
+
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
-  &:not([hidden]) {
-    display: flex;
+  & :where(img, svg) {
+    flex-shrink: 0;
+    font-size: 1.25em;
   }
 
-  &[data-size='sm'] {
-    --dsc-button-gap: var(--ds-sizing-1);
-    --dsc-button-padding-block: var(--ds-spacing-2);
-    --dsc-button-padding-inline: var(--ds-spacing-3);
-    --dsc-button-size: var(--ds-sizing-10);
+  &:focus-visible {
+    position: relative; /* Place focusring on top */
   }
 
-  &[data-size='lg'] {
-    --dsc-button-padding-block: var(--ds-spacing-3);
-    --dsc-button-padding-inline: var(--ds-spacing-5);
-    --dsc-button-size: var(--ds-sizing-14);
+  &:not([hidden]) {
+    display: flex;
   }
 
   &[data-icon] {
-    padding-inline: var(--dsc-button-padding-block);
+    width: var(--dsc-button-size); /* Ensure it keeps square shape */
+    height: var(--dsc-button-size); /* Ensure it keeps square shape */
+    padding: 0;
   }
 
   &[data-fullwidth] {
@@ -60,86 +90,8 @@
   }
 
   /**
-    * Variants
-    */
-  &[data-variant='secondary'] {
-    --dsc-button-background--active: var(--ds-color-accent-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-accent-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-border-color: var(--ds-color-accent-border-strong);
-    --dsc-button-color--active: var(--ds-color-accent-text-default);
-    --dsc-button-color--hover: var(--ds-color-accent-text-default);
-    --dsc-button-color: var(--ds-color-accent-text-subtle);
-  }
-
-  &[data-variant='tertiary'] {
-    --dsc-button-background--active: var(--ds-color-accent-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-accent-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-border-color: var(--dsc-button-tertiary-border-color);
-    --dsc-button-color--active: var(--ds-color-accent-text-default);
-    --dsc-button-color--hover: var(--ds-color-accent-text-default);
-    --dsc-button-color: var(--ds-color-accent-text-subtle);
-  }
-
-  /**
-    * Colors
-    */
-  &[data-color='neutral'] {
-    --dsc-button-background--active: var(--ds-color-neutral-base-active);
-    --dsc-button-background--hover: var(--ds-color-neutral-base-hover);
-    --dsc-button-background: var(--ds-color-neutral-base-default);
-    --dsc-button-color: var(--ds-color-neutral-contrast-default);
-  }
-
-  &[data-color='neutral'][data-variant='secondary'] {
-    --dsc-button-background--active: var(--ds-color-neutral-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-neutral-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-border-color: var(--ds-color-neutral-border-strong);
-    --dsc-button-color--active: var(--ds-color-neutral-text-default);
-    --dsc-button-color--hover: var(--ds-color-neutral-text-default);
-    --dsc-button-color: var(--ds-color-neutral-text-subtle);
-  }
-
-  &[data-color='neutral'][data-variant='tertiary'] {
-    --dsc-button-background--active: var(--ds-color-neutral-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-neutral-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-color--active: var(--ds-color-neutral-text-default);
-    --dsc-button-color--hover: var(--ds-color-neutral-text-default);
-    --dsc-button-color: var(--ds-color-neutral-text-subtle);
-  }
-
-  &[data-color='danger'] {
-    --dsc-button-background--active: var(--ds-color-danger-base-active);
-    --dsc-button-background--hover: var(--ds-color-danger-base-hover);
-    --dsc-button-background: var(--ds-color-danger-base-default);
-    --dsc-button-color: var(--ds-color-danger-contrast-default);
-  }
-
-  &[data-color='danger'][data-variant='secondary'] {
-    --dsc-button-background--active: var(--ds-color-danger-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-danger-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-border-color: var(--ds-color-danger-border-strong);
-    --dsc-button-color--active: var(--ds-color-danger-text-default);
-    --dsc-button-color--hover: var(--ds-color-danger-text-default);
-    --dsc-button-color: var(--ds-color-danger-text-subtle);
-  }
-
-  &[data-color='danger'][data-variant='tertiary'] {
-    --dsc-button-background--active: var(--ds-color-danger-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-danger-surface-default);
-    --dsc-button-background: transparent;
-    --dsc-button-color--active: var(--ds-color-danger-text-default);
-    --dsc-button-color--hover: var(--ds-color-danger-text-default);
-    --dsc-button-color: var(--ds-color-danger-text-subtle);
-  }
-
-  /**
-    * States
-    */
+   * States
+   */
 
   @media (hover: hover) and (pointer: fine) {
     /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */

package/card.css

@@ -1,197 +1,127 @@
 .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-backround: var(--ds-color-neutral-background-default);
   --dsc-card-color: var(--ds-color-neutral-text-default);
 
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  color: var(--dsc-card-color);
-  border-radius: min(1rem, var(--ds-border-radius-md));
-  border: 1px solid var(--dsc-card-border-color);
-  background: var(--dsc-card-backround);
-
-  &[data-link] {
-    --dsc-card-border-color: var(--ds-color-neutral-border-default);
-
-    text-decoration: none;
-
-    & h1,
-    & h2,
-    & h3,
-    & h4,
-    & h5,
-    & h6 {
-      color: var(--dsc-card-color);
-      text-decoration: underline;
-      text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-      text-underline-offset: max(6px, 0.25rem, 0.22em);
-    }
-
-    &:active {
-      --dsc-card-backround: var(--ds-color-neutral-surface-default);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-      }
-    }
+  &[data-color]:where(:not([data-color='subtle'])) {
+    --dsc-card-background--active: var(--ds-color-surface-default);
+    --dsc-card-background--hover: var(--ds-color-background-subtle);
+    --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);
+  }
+  &[data-color='neutral'] {
+    --dsc-card-background: var(--ds-color-background-default);
   }
-
   &[data-color='subtle'] {
-    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-    --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-neutral-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-neutral-surface-hover);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-neutral-surface-default);
-        }
-      }
-    }
+    --dsc-card-background: var(--ds-color-neutral-background-subtle);
   }
 
-  &[data-color='brand1'] {
-    --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand1-surface-default);
-    --dsc-card-color: var(--ds-color-brand1-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-link] {
-      --dsc-card-border-color: var(--ds-color-brand1-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand1-surface-active);
-      }
+  background: var(--dsc-card-background);
+  border-radius: var(--ds-border-radius-lg);
+  border: var(--dsc-card-border);
+  box-sizing: border-box;
+  color: var(--dsc-card-color);
+  display: block;
+  font-family: inherit;
+  margin: 0;
+  overflow: clip; /* Needed to clip media elements and and Card.Block */
+  padding: var(--dsc-card-padding);
+  text-align: inherit;
 
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand1-surface-hover);
-        }
-      }
-    }
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
-  &[data-color='brand2'] {
-    --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand2-surface-default);
-    --dsc-card-color: var(--ds-color-brand2-text-default);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-brand2-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand2-surface-active);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand2-surface-hover);
-        }
-      }
-    }
+  /* Style link in heading, or heading when Card is anchor */
+  :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
+  &:is(a:any-link, button, [role='button']) :is(h1, h2, h3, h4, h5, h6) {
+    color: inherit;
+    outline: 0;
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
+    text-underline-offset: max(6px, 0.25rem, 0.22em);
   }
 
-  &[data-color='brand3'] {
-    --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand3-surface-default);
-    --dsc-card-color: var(--ds-color-brand3-text-default);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-brand3-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand3-surface-active);
-      }
+  /* Add states when Card is a anchor, button, or when containing a anchor in heading */
+  &:where(a, button, [role='button']),
+  &:where(:has(:is(h1, h2, h3, h4, h5, h6) a)) {
+    cursor: pointer;
+    text-decoration: none;
 
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand3-surface-hover);
-        }
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--dsc-card-background--hover);
       }
     }
-  }
 
-  .ds-card__header h1,
-  .ds-card__header h2,
-  .ds-card__header h3,
-  .ds-card__header h4,
-  .ds-card__header h5,
-  .ds-card__header h6 {
-    color: inherit;
-  }
-
-  .ds-card__media > * {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border: 0;
-  }
-
-  .ds-card__media {
-    width: auto;
-  }
+    &:where(:focus-visible, :has(:focus-visible)) {
+      @composes ds-focus--visible from './base/base.css';
+    }
 
-  .ds-card__media:first-child {
-    padding-bottom: var(--ds-spacing-4);
+    &:active {
+      background: var(--dsc-card-background--active);
+    }
   }
 
-  .ds-card__media:last-child {
-    padding-top: var(--ds-spacing-6);
+  &:has(> .ds-card__block) {
+    padding: 0; /* Let Card.Block own the padding */
   }
+}
 
-  .ds-card__footer,
-  .ds-card__content {
-    display: flex;
-    justify-content: flex-start;
-    gap: var(--ds-spacing-4);
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    padding: var(--ds-spacing-2) 0;
-    color: inherit;
+/* Using :where to overwrite user agent CSS, but not our own CSS */
+:where(.ds-card, .ds-card__block) {
+  & > :first-child {
+    margin-block: 0;
   }
 
-  .ds-card__content {
-    flex-direction: column;
+  & > * + * {
+    margin-block: var(--dsc-card-gap) 0; /* https://every-layout.dev/layouts/stack/ */
   }
+}
 
-  .ds-card__header {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
+.ds-card__block {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--dsc-card-padding);
+  position: relative;
 
-  & a:any-link {
-    color: var(--ds-color-neutral-text-default);
+  /* Needed to support automatic separator border between both vertical and horizontal stacking Card.Block: */
+  &::before {
+    content: '';
+    border-top: var(--dsc-card-border);
+    position: absolute;
+    inset: 0 0 auto;
+    translate: 0 -100%;
   }
 
-  & > hr {
-    width: 100%;
-    margin: var(--ds-spacing-3) 0;
+  &::after {
+    content: '';
+    border-left: var(--dsc-card-border);
+    position: absolute;
+    inset: 0 auto 0 0;
+    translate: -100%;
   }
 
-  & > *:not(.ds-card__media, hr) {
-    padding-left: var(--ds-spacing-6);
-    padding-right: var(--ds-spacing-6);
-  }
+  &:has(> :is(audio, figure, iframe, img, video):only-child) {
+    padding: 0;
 
-  & > *:not(.ds-card__media):first-child {
-    padding-top: var(--ds-spacing-6);
-  }
+    & > * {
+      border: 0;
+      display: block;
+      height: auto;
+      width: 100%;
+    }
 
-  & > *:not(.ds-card__media):last-child {
-    padding-bottom: var(--ds-spacing-6);
+    & > iframe {
+      aspect-ratio: 16 / 9; /* Make iframes scale responsively */
+    }
   }
 }