@digdir/designsystemet-css 0.11.0-next.12 → 0.100.51-next.51

package/link.css

@@ -1,58 +0,0 @@
-.ds-link {
-  --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-color-hover: var(--ds-color-accent-text-default);
-  --dsc-link-color-active: var(--ds-color-accent-text-default);
-  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-  --dsc-link-color-focus: var(--ds-color-focus-inner);
-  --dsc-link-color-focus-background: var(--ds-color-focus-outer);
-
-  position: relative;
-  color: var(--dsc-link-color);
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-thickness: max(1px, 0.0625rem);
-  text-underline-offset: max(5px, 0.25rem);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ds-spacing-1);
-}
-
-.ds-link--accent {
-  --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-color-hover: var(--ds-color-accent-text-default);
-  --dsc-link-color-active: var(--ds-color-accent-text-default);
-  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-}
-
-.ds-link--neutral {
-  --dsc-link-color: var(--ds-color-neutral-text-default);
-  --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
-  --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
-  --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-}
-
-.ds-link:visited {
-  color: var(--dsc-link-color-visited);
-  text-decoration: none;
-}
-
-.ds-link:hover {
-  color: var(--dsc-link-color-hover);
-  text-decoration-thickness: max(2px, 0.125rem, 0.12em);
-}
-
-.ds-link:focus-visible {
-  color: var(--dsc-link-color-focus);
-  background: var(--dsc-link-color-focus-background);
-  outline: none;
-}
-
-.ds-link:active {
-  color: var(--dsc-link-color-active);
-  background: var(--dsc-link-color-active-background);
-  border-radius: min(0.25rem, var(--ds-border-radius-md));
-  outline: none;
-}

package/list.css

@@ -1,22 +0,0 @@
-.ds-list {
-  --dsc-list-padding-left: var(--ds-spacing-6);
-
-  padding-left: var(--dsc-list-padding-left);
-}
-
-.ds-list--sm {
-  --dsc-list-padding-left: var(--ds-spacing-4);
-}
-
-.ds-list--md,
-.ds-list--lg {
-  --dsc-list-padding-left: var(--ds-spacing-6);
-}
-
-.ds-list__item {
-  margin-bottom: var(--ds-spacing-2);
-}
-
-.ds-list__item > .ds-list {
-  margin-top: var(--ds-spacing-2);
-}

package/modal.css

@@ -1,109 +0,0 @@
-.ds-modal {
-  --dsc-modal-max-width: 650px;
-  --dsc-modal-background: var(--ds-color-neutral-background-default);
-  --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;
-
-  padding: 0;
-  width: 100%;
-  max-width: var(--dsc-modal-max-width);
-  border: none;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-  box-shadow: var(--ds-shadow-xl);
-  background-color: var(--dsc-modal-background);
-  color: var(--dsc-modal-color);
-}
-
-.ds-modal::backdrop {
-  background-color: var(--dsc-modal-backdrop-background);
-  animation: fade-in 300ms ease-in-out;
-}
-
-.ds-modal[open] {
-  animation:
-    slide-in 300ms ease-in-out,
-    fade-in 300ms ease-in-out;
-}
-
-.ds-modal > hr {
-  margin: var(--ds-spacing-3) 0 !important;
-  border-color: var(--ds-color-neutral-border-subtle);
-}
-
-.ds-modal--lock-scroll {
-  overflow: hidden;
-}
-
-@media (max-width: 650px) {
-  .ds-modal {
-    min-width: 100%;
-    max-width: 100%;
-    border-radius: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ds-modal[open] {
-    animation: none;
-  }
-
-  .ds-modal::backdrop {
-    animation: none;
-  }
-}
-
-.ds-modal__header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  padding: var(--dsc-modal-header-padding);
-  gap: var(--ds-spacing-1);
-  color: var(--dsc-modal-color);
-}
-
-.ds-modal__header--no-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);
-}
-
-.ds-modal__footer {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-spacing-4);
-  padding: var(--dsc-modal-footer-padding);
-}
-
-.ds-modal__content {
-  padding: var(--dsc-modal-content-padding);
-  max-height: var(--dsc-modal-content-max-height);
-  overflow-y: auto;
-}
-
-@keyframes slide-in {
-  0% {
-    transform: translateY(50px);
-  }
-
-  100% {
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

package/native-select.css

@@ -1,106 +0,0 @@
-.ds-native-select__wrapper {
-  position: relative;
-  display: grid;
-  flex: 0 1 auto;
-}
-
-/* chevron for native select */
-.ds-native-select__wrapper::after {
-  content: '';
-  position: absolute;
-  background-color: var(--ds-color-neutral-text-default);
-  pointer-events: none;
-  top: 50%;
-  right: var(--ds-spacing-2);
-  transform: translateY(-50%);
-  width: 1.5em;
-  height: 1.5em;
-  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
-  mask-size: contain;
-}
-
-.ds-native-select {
-  position: relative;
-  font-family: inherit;
-  box-sizing: border-box;
-  padding: 0 var(--ds-spacing-2);
-  border: solid 1px var(--ds-color-neutral-border-default);
-  border-radius: var(--ds-border-radius-md);
-  background-color: var(--ds-color-neutral-background-default);
-  color: var(--ds-color-neutral-text-default);
-  appearance: none;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
-    border-color: var(--ds-color-accent-border-strong);
-    box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
-  }
-}
-
-.ds-native-select.ds-native-select--multiple {
-  background-image: none;
-}
-
-.ds-native-select--sm {
-  padding: 0 var(--ds-spacing-2);
-  padding-right: var(--ds-spacing-8);
-  height: var(--ds-sizing-10);
-}
-
-.ds-native-select--md {
-  padding: 0 var(--ds-spacing-3);
-  padding-right: var(--ds-spacing-10);
-  height: var(--ds-sizing-12);
-}
-
-.ds-native-select--lg {
-  padding: 0 var(--ds-spacing-4);
-  padding-right: var(--ds-spacing-12);
-  height: var(--ds-sizing-14);
-}
-
-.ds-native-select--container {
-  display: grid;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-native-select--container:has(.ds-native-select:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-native-select:disabled {
-  cursor: not-allowed;
-}
-
-.ds-native-select--readonly .ds-native-select {
-  background: var(--ds-color-neutral-background-subtle);
-  border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ds-native-select--error > .ds-native-select:not(:focus-visible) {
-  border-color: var(--ds-color-danger-border-default);
-  box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
-}
-
-.ds-native-select__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-native-select__error-message:empty {
-  display: none;
-}
-
-.ds-native-select__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-native-select__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}

package/pagination.css

@@ -1,67 +0,0 @@
-.ds-pagination {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-
-  list-style-type: none;
-  display: flex;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  width: fit-content;
-}
-
-.ds-pagination--hidden {
-  visibility: hidden;
-}
-
-.ds-pagination--sm {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination--md {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination--lg {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination li:first-child {
-  margin-right: var(--dsc-pagination-chevron-margin);
-}
-
-.ds-pagination li:last-child {
-  margin-left: var(--dsc-pagination-chevron-margin);
-}
-
-.ds-pagination__item {
-  flex: 1;
-  margin-right: var(--dsc-pagination-listitem-margin);
-}
-
-.ds-pagination--sm .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-2);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
-}
-
-.ds-pagination--md .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
-}
-
-.ds-pagination--lg .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-6);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
-}
-
-.ds-pagination__item.ds-pagination--compact {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-0);
-  --dsc-pagination-chevron-margin: var(--ds-spacing-1);
-}
-
-.ds-pagination__ellipsis {
-  margin-top: 0.5em;
-  text-align: center;
-  width: var(--dsc-pagination-ellipsis-width);
-}

package/popover.css

@@ -1,84 +0,0 @@
-.ds-popover {
-  --dsc-popover-border: 1px solid;
-  --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-color: var(--ds-color-neutral-text-default);
-  --dsc-popover-border-color: var(--ds-color-neutral-border-default);
-  --dsc-popover-padding: var(--ds-spacing-3);
-  --dsc-popover-max-width: 300px;
-  --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
-
-  z-index: 1500;
-  background: var(--dsc-popover-background);
-  color: var(--dsc-popover-color);
-  padding: var(--dsc-popover-padding);
-  border: var(--dsc-popover-border);
-  border-radius: var(--dsc-popover-border-radius);
-  border-color: var(--dsc-popover-border-color);
-  max-width: var(--dsc-popover-max-width);
-}
-
-.ds-popover--sm {
-  --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-}
-
-.ds-popover--md {
-  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-4);
-}
-
-.ds-popover--lg {
-  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-}
-
-.ds-popover--default {
-  --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-border-color: var(--ds-color-neutral-border-default);
-  --dsc-popover-color: var(--ds-color-neutral-text-default);
-}
-
-.ds-popover--info {
-  --dsc-popover-background: var(--ds-color-info-surface-default);
-  --dsc-popover-border-color: var(--ds-color-info-border-default);
-  --dsc-popover-color: var(--ds-color-info-text-default);
-}
-
-.ds-popover--warning {
-  --dsc-popover-background: var(--ds-color-warning-surface-default);
-  --dsc-popover-border-color: var(--ds-color-warning-border-default);
-  --dsc-popover-color: var(--ds-color-warning-text-default);
-}
-
-.ds-popover--danger {
-  --dsc-popover-background: var(--ds-color-danger-surface-default);
-  --dsc-popover-border-color: var(--ds-color-danger-border-default);
-  --dsc-popover-color: var(--ds-color-danger-text-default);
-}
-
-.ds-popover__arrow {
-  position: absolute;
-  background: var(--dsc-popover-background);
-  transform: rotate(45deg);
-}
-
-.ds-popover__arrow.ds-popover__arrow--top {
-  border-top: var(--dsc-popover-border);
-  border-left: var(--dsc-popover-border);
-  border-color: inherit;
-}
-
-.ds-popover__arrow.ds-popover__arrow--bottom {
-  border-bottom: var(--dsc-popover-border);
-  border-right: var(--dsc-popover-border);
-  border-color: inherit;
-}
-
-.ds-popover__arrow.ds-popover__arrow--right {
-  border-top: var(--dsc-popover-border);
-  border-right: var(--dsc-popover-border);
-  border-color: inherit;
-}
-
-.ds-popover__arrow.ds-popover__arrow--left {
-  border-bottom: var(--dsc-popover-border);
-  border-left: var(--dsc-popover-border);
-  border-color: inherit;
-}

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);
-}