@digdir/designsystemet-css 1.0.0-next.35 → 1.0.0-next.37

package/helptext.css

@@ -1,49 +0,0 @@
-.ds-helptext {
-  --dsc-helptext-icon-size: 65%;
-  --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-  --dsc-helptext-size: var(--ds-sizing-7);
-
-  @composes ds-focus from '../css/utilities.css';
-
-  border-radius: var(--ds-border-radius-full);
-  border: 2px solid;
-  box-sizing: border-box;
-  height: var(--dsc-helptext-size);
-  min-height: 0;
-  min-width: 0;
-  padding: 0;
-  position: relative;
-  width: var(--dsc-helptext-size);
-
-  &::before {
-    content: '';
-    border-radius: inherit;
-    background: currentcolor;
-    mask-composite: exclude;
-    mask-image: var(--dsc-helptext-icon-url);
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size:
-      var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),
-      cover;
-    scale: 1.1; /* Hide tiny half pixel rendeing bug */
-    width: 100%;
-    height: 100%;
-  }
-
-  &:has(+ :popover-open)::before {
-    mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
-  }
-
-  &[data-size='sm'] {
-    --dsc-helptext-size: var(--ds-sizing-6);
-  }
-
-  &[data-size='lg'] {
-    --dsc-helptext-size: var(--ds-sizing-8);
-  }
-
-  @media print {
-    display: none;
-  }
-}

package/index.css

@@ -1,43 +0,0 @@
-@charset "UTF-8";
-
-@layer ds.reset, ds.baseline, ds.theme, ds.base, ds.components;
-
-/** Import order defines ordinal specificity for layers */
-@import url('./baseline/ds-reset.css') layer(ds.reset);
-@import url('./baseline/baseline.css') layer(ds.baseline);
-@import url('./baseline/typography.css') layer(ds.base.typography);
-@import url('./utilities.css') layer(ds.base.utilities);
-@import url('./button.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);
-@import url('./card.css') layer(ds.components);
-@import url('./link.css') layer(ds.components);
-@import url('./fieldset.css') layer(ds.components);
-@import url('./dropdown.css') layer(ds.components);
-@import url('./chip') layer(ds.components);
-@import url('./divider.css') layer(ds.components);
-@import url('./tabs.css') layer(ds.components);
-@import url('./pagination.css') layer(ds.components);
-@import url('./skeleton.css') layer(ds.components);
-@import url('./tag.css') layer(ds.components);
-@import url('./error-summary.css') layer(ds.components);
-@import url('./togglegroup.css') layer(ds.components);
-@import url('./tooltip.css') layer(ds.components);
-@import url('./spinner.css') layer(ds.components);
-@import url('./table.css') layer(ds.components);
-@import url('./combobox.css') layer(ds.components);
-@import url('./breadcrumbs.css') layer(ds.components);
-@import url('./badge.css') layer(ds.components);
-@import url('./avatar.css') layer(ds.components);

package/link.css

@@ -1,57 +0,0 @@
-.ds-link {
-  --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);
-
-  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);
-
-  & :is(img, svg) {
-    vertical-align: middle; /* Align img or svg icon with text */
-  }
-
-  /**
-    * Colors
-    */
-  &[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
-    */
-  &:visited {
-    color: var(--dsc-link-color--visited);
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      color: var(--dsc-link-color--hover);
-      text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover);
-    }
-  }
-
-  &:focus-visible {
-    background: var(--dsc-link-background--focus);
-    color: var(--dsc-link-color--focus);
-  }
-
-  &:active {
-    background: var(--dsc-link-background--active);
-    color: var(--dsc-link-color--active);
-  }
-}

package/list.css

@@ -1,38 +0,0 @@
-.ds-list {
-  --dsc-list-padding-left: var(--ds-spacing-6);
-  --dsc-list-spacing: var(--ds-spacing-3);
-  --dsc-list-spacing-nested: var(--ds-spacing-2);
-
-  margin: 0;
-  padding-left: var(--dsc-list-padding-left);
-
-  @composes ds-body-text--md from './utilities.css';
-
-  & > 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';
-    position: absolute;
-  }
-
-  &[data-size='sm'] {
-    --dsc-list-padding-left: var(--ds-spacing-4);
-
-    @composes ds-body-text--sm from './utilities.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-list-spacing: var(--ds-spacing-4);
-
-    @composes ds-body-text--lg from './utilities.css';
-  }
-}

package/modal.css

@@ -1,93 +0,0 @@
-.ds-modal {
-  --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-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));
-
-  background: var(--dsc-modal-background);
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-  border: 0;
-  box-shadow: var(--ds-shadow-xl);
-  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 {
-    animation: fade-in 300ms ease-in-out;
-    background: var(--dsc-modal-backdrop-background);
-  }
-
-  &[open] {
-    animation:
-      slide-in 300ms ease-in-out,
-      fade-in 300ms ease-in-out;
-  }
-
-  &: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;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &[open],
-    &::backdrop {
-      animation: none;
-    }
-  }
-
-  /* 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__block {
-  padding: var(--dsc-modal-padding);
-
-  & + & {
-    border-top: var(--dsc-modal-divider);
-  }
-}
-
-/* Prevent scroll when open */
-body:has(.ds-modal[open]) {
-  overflow: hidden;
-}
-
-@keyframes slide-in {
-  from {
-    translate: 0 50px;
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-}

package/pagination.css

@@ -1,57 +0,0 @@
-.ds-pagination {
-  --dsc-pagination-gap: var(--ds-spacing-4);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
-  --dsc-pagination-chevron-size: var(--ds-sizing-6);
-
-  & > :is(ol, ul) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dsc-pagination-gap);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    & > li:first-child > ::before,
-    & > li:last-child > ::after {
-      content: '';
-      background: currentcolor;
-      height: var(--dsc-pagination-chevron-size);
-      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");
-      width: var(--dsc-pagination-chevron-size);
-    }
-
-    & > li:first-child > ::before {
-      rotate: 180deg;
-    }
-
-    /* Makes page buttons square */
-    & > li:not(:first-child, :last-child) > :is(a, button) {
-      --dsc-button-padding-inline: var(--dsc-button-padding-block);
-    }
-
-    /* Style as non-interactive ellipsis when empty */
-    & > li > [aria-hidden='true'] {
-      color: inherit;
-      pointer-events: none;
-
-      &::before {
-        content: '\2026'; /* ellipsis */
-      }
-    }
-  }
-
-  &[data-size='sm'] {
-    --dsc-pagination-gap: var(--ds-spacing-2);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
-  }
-
-  &[data-size='lg'] {
-    --dsc-pagination-gap: var(--ds-spacing-6);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
-  }
-
-  &[data-compact] {
-    --dsc-pagination-gap: var(--ds-spacing-0);
-  }
-}

package/popover.css

@@ -1,87 +0,0 @@
-.ds-popover {
-  --dsc-popover-arrow-size: var(--ds-spacing-2);
-  --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-popover-border: 1px solid var(--ds-color-neutral-border-default);
-  --dsc-popover-color: var(--ds-color-neutral-text-default);
-  --dsc-popover-max-width: 300px;
-  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-4);
-
-  background: var(--dsc-popover-background);
-  border-radius: var(--dsc-popover-border-radius);
-  border: var(--dsc-popover-border);
-  box-sizing: border-box;
-  color: var(--dsc-popover-color);
-  inset: 0 auto auto 0;
-  max-width: var(--dsc-popover-max-width);
-  overflow: visible;
-  padding: var(--dsc-popover-padding);
-  position: fixed;
-
-  @composes ds-body-text--md from './utilities.css';
-
-  &::before {
-    background: var(--dsc-popover-background);
-    border: inherit;
-    border-left-color: transparent;
-    border-top-color: transparent;
-    box-sizing: border-box;
-    content: '';
-    height: var(--dsc-popover-arrow-size);
-    left: var(--ds-popover-arrow-x);
-    position: absolute;
-    top: var(--ds-popover-arrow-y);
-    translate: -50% -50%;
-    width: var(--dsc-popover-arrow-size);
-  }
-
-  &[data-size='sm'] {
-    --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-
-    @composes ds-body-text--sm from './utilities.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-
-    @composes ds-body-text--lg from './utilities.css';
-  }
-
-  &[data-placement='top']::before {
-    top: 100%;
-    rotate: 45deg;
-  }
-
-  &[data-placement='left']::before {
-    left: 100%;
-    rotate: -45deg;
-  }
-
-  &[data-placement='right']::before {
-    left: 0;
-    rotate: 135deg;
-  }
-
-  &[data-placement='bottom']::before {
-    top: 0;
-    rotate: -135deg;
-  }
-
-  &[data-variant='info'] {
-    --dsc-popover-background: var(--ds-color-info-surface-default);
-    --dsc-popover-border: 1px solid var(--ds-color-info-border-default);
-    --dsc-popover-color: var(--ds-color-info-text-default);
-  }
-
-  &[data-variant='warning'] {
-    --dsc-popover-background: var(--ds-color-warning-surface-default);
-    --dsc-popover-border: 1px solid var(--ds-color-warning-border-default);
-    --dsc-popover-color: var(--ds-color-warning-text-default);
-  }
-
-  &[data-variant='danger'] {
-    --dsc-popover-background: var(--ds-color-danger-surface-default);
-    --dsc-popover-border: 1px solid var(--ds-color-danger-border-default);
-    --dsc-popover-color: var(--ds-color-danger-text-default);
-  }
-}

package/radio.css

@@ -1,200 +0,0 @@
-.ds-radio {
-  --dsc-radio-size: var(--ds-spacing-5);
-  --dsc-radio-focus-border-width: 3px;
-  --dsc-radio-background: radial-gradient(circle, var(--ds-color-neutral-background-default) 60%, transparent 60%);
-  --dsc-radio-border-color: var(--ds-color-neutral-border-default);
-  --dsc-radio-border__hover--size: calc(var(--ds-spacing-3) / 2);
-  --dsc-radio-border__hover: 0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-surface-hover);
-  --dsc-radio-box_shadow-size: 7px;
-
-  display: grid;
-}
-
-.ds-radio:has(.ds-radio__label) {
-  grid-template-columns: var(--dsc-radio-size) auto;
-  gap: var(--ds-spacing-2);
-}
-
-/* Radio */
-.ds-radio__input {
-  position: relative;
-  width: var(--dsc-radio-size);
-  height: var(--dsc-radio-size);
-  z-index: 1;
-  appearance: none;
-  outline: none;
-  cursor: pointer;
-  margin: 0;
-  align-self: center;
-  box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
-  background: var(--dsc-radio-background);
-  border-radius: 50%;
-}
-
-.ds-radio__input::before {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 2.75rem;
-  height: 2.75rem;
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-  cursor: pointer;
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-radio__label {
-  /* min-height: var(--ds-sizing-10); */
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-  cursor: pointer;
-}
-
-.ds-radio__description {
-  margin-top: calc(var(--ds-spacing-2) * -1);
-  color: var(--ds-color-neutral-text-subtle);
-  grid-column: 2;
-}
-
-.ds-radio--readonly > .ds-radio__input,
-.ds-radio--readonly > .ds-radio__label,
-.ds-radio--readonly > .ds-radio__input::before {
-  cursor: default;
-}
-
-.ds-radio:has(.ds-radio__input:disabled) > .ds-radio__description {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-radio__input:disabled,
-.ds-radio__input:disabled::before,
-.ds-radio:has(.ds-radio__input:disabled) > .ds-radio__label {
-  cursor: not-allowed;
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-radio:has(.ds-radio__input:focus-visible) {
-  --dsc-focus-border-width: 3px;
-
-  outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
-  outline-offset: var(--dsc-focus-border-width);
-  box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-radio__input:checked {
-  --dsc-radio-border-color: var(--ds-color-accent-base-default);
-  --dsc-radio-background: radial-gradient(circle, var(--ds-color-accent-contrast-1) 60%, transparent 60%);
-
-  /* We use a gradient to avoid bleeding pixels */
-  background: var(--dsc-radio-background);
-}
-
-.ds-radio--readonly > .ds-radio__input {
-  --dsc-radio-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-radio-background: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-radio__input:focus-visible:not(:checked) {
-  --dsc-radio-border-color: var(--ds-color-accent-border-strong);
-
-  box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
-}
-
-.ds-radio--readonly > .ds-radio__input:checked {
-  background: var(--ds-color-neutral-border-strong);
-}
-
-.ds-radio--error > .ds-radio__input:not(:disabled, :focus-visible) {
-  --dsc-radio-border-color: var(--ds-color-danger-border-default);
-}
-
-.ds-radio__input:focus-visible:checked {
-  box-shadow: inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
-}
-
-.ds-radio__input:checked:not(:focus-visible) {
-  box-shadow: inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
-}
-
-/* Only use hover for non-touch devices to prevent sticky-hovering
-    "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
-@media (hover: hover) and (pointer: fine) {
-  .ds-radio:not(.ds-radio--readonly) > .ds-radio__label:hover:not(:disabled),
-  .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:disabled) + .ds-radio__label {
-    color: var(--ds-color-accent-text-subtle);
-  }
-
-  .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:checked, :disabled, :focus-visible) {
-    --dsc-radio-border-color: var(--ds-color-accent-border-strong);
-
-    box-shadow:
-      var(--dsc-radio-border__hover),
-      inset 0 0 0 2px var(--dsc-radio-border-color);
-  }
-
-  .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:checked:not(:disabled, :focus-visible) {
-    box-shadow:
-      var(--dsc-radio-border__hover),
-      inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
-  }
-}
-
-/** Sizing */
-
-.ds-radio--sm {
-  --dsc-radio-size: var(--ds-sizing-5);
-  --dsc-radio-box_shadow-size: 6px;
-
-  /* min-height: var(--ds-sizing-10); */
-}
-
-.ds-radio--md {
-  --dsc-radio-size: var(--ds-sizing-6);
-  --dsc-radio-border__hover--size: var(--ds-spacing-1);
-  --dsc-radio-box_shadow-size: 7px;
-
-  /* min-height: var(--ds-sizing-11); */
-}
-
-.ds-radio--lg {
-  --dsc-radio-size: var(--ds-sizing-7);
-  --dsc-radio-box_shadow-size: 8px;
-
-  /* min-height: var(--ds-sizing-12); */
-}
-
-.ds-radio__group {
-  --dsc-radio-group-gap: var(--ds-spacing-4);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsc-radio-group-gap);
-  width: fit-content;
-}
-
-.ds-radio__group--sm {
-  --dsc-radio-group-gap: var(--ds-spacing-3);
-
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}
-
-.ds-radio__group--md {
-  --dsc-radio-group-gap: var(--ds-spacing-4);
-}
-
-.ds-radio__group--lg {
-  --dsc-radio-group-gap: var(--ds-spacing-5);
-
-  margin-top: calc(var(--ds-spacing-2) * 1);
-}
-
-.ds-radio__group--horizontal {
-  display: flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-6);
-}