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

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

package/select.css

@@ -1,106 +0,0 @@
-.ds-select__wrapper {
-  position: relative;
-  display: grid;
-  flex: 0 1 auto;
-
-  /* chevron for native select */
-  &::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-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-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-select.ds-select--multiple {
-  background-image: none;
-}
-
-.ds-select--sm {
-  padding: 0 var(--ds-spacing-2);
-  padding-right: var(--ds-spacing-8);
-  height: var(--ds-sizing-10);
-}
-
-.ds-select--md {
-  padding: 0 var(--ds-spacing-3);
-  padding-right: var(--ds-spacing-10);
-  height: var(--ds-sizing-12);
-}
-
-.ds-select--lg {
-  padding: 0 var(--ds-spacing-4);
-  padding-right: var(--ds-spacing-12);
-  height: var(--ds-sizing-14);
-}
-
-.ds-select--container {
-  display: grid;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-select--container:has(.ds-select:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-select:disabled {
-  cursor: not-allowed;
-}
-
-.ds-select--readonly .ds-select {
-  background: var(--ds-color-neutral-background-subtle);
-  border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ds-select--error > .ds-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-select__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-select__error-message:empty {
-  display: none;
-}
-
-.ds-select__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-select__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}

package/switch.css

@@ -1,246 +0,0 @@
-.ds-switch {
-  --dsc-switch--transition: 200ms;
-  --dsc-switch-height: 1.75rem;
-  --dsc-switch-focus-border-width: 3px;
-  --dsc-switch-check_color: transparent;
-  --dsc-switch-thumb-background-color: var(--ds-color-neutral-background-default);
-
-  position: relative;
-}
-
-@media (prefers-reduced-motion) {
-  .switch {
-    --dsc-switch--transition: 0;
-  }
-}
-
-.ds-switch__label {
-  min-height: var(--ds-sizing-10);
-  min-width: min-content;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-  cursor: pointer;
-}
-
-.ds-switch__track {
-  position: relative;
-  display: inline-block;
-  pointer-events: none;
-  width: var(--dsc-switch-width);
-  height: var(--dsc-switch-height);
-  margin: auto;
-  overflow: visible;
-  border-radius: var(--ds-border-radius-full);
-  background-color: var(--ds-color-neutral-border-default);
-  transition: background-color var(--dsc-switch--transition) ease;
-  margin-right: var(--ds-spacing-1);
-}
-
-.ds-switch__description {
-  padding-left: calc(var(--dsc-switch-width) + var(--ds-spacing-2));
-  margin-top: var(--ds-spacing-1);
-  color: var(--ds-color-neutral-text-subtle);
-  width: fit-content;
-}
-
-.ds-switch__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-switch__label--right {
-  grid-template-columns: 1fr auto;
-  grid-auto-flow: dense;
-}
-
-.ds-switch__label--right .ds-switch__track {
-  order: 1;
-  margin-right: 0;
-}
-
-.ds-switch__label--right + .ds-switch__description {
-  padding-left: 0;
-}
-
-.ds-switch__input {
-  position: absolute;
-  width: 2.75rem;
-  height: 2.75rem;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
-  margin: 0;
-}
-
-.ds-switch--readonly > .ds-switch__label {
-  grid-template-columns: auto min-content 1fr;
-}
-
-.ds-switch--readonly > .ds-switch__label:where(.ds-switch__label--right) {
-  grid-template-columns: min-content 1fr auto;
-}
-
-.ds-switch--readonly > .ds-switch__input,
-.ds-switch--readonly > .ds-switch__label {
-  cursor: default;
-}
-
-.ds-switch--readonly > .ds-switch__description {
-  margin-left: var(--ds-spacing-1);
-}
-
-.ds-switch--sm,
-.ds-switch--sm .ds-switch__label {
-  min-height: var(--ds-sizing-6);
-}
-
-.ds-switch--md,
-.ds-switch--md .ds-switch__label {
-  min-height: var(--ds-sizing-7);
-}
-
-.ds-switch--lg,
-.ds-switch--lg .ds-switch__label {
-  min-height: var(--ds-sizing-8);
-}
-
-.ds-switch--sm {
-  --dsc-switch-height: var(--ds-sizing-6);
-  --dsc-switch-width: var(--ds-sizing-11);
-}
-
-.ds-switch--sm .ds-switch__input {
-  left: -0.25rem;
-  top: -0.25rem;
-}
-
-.ds-switch--md {
-  --dsc-switch-height: var(--ds-sizing-7);
-  --dsc-switch-width: var(--ds-sizing-13);
-}
-
-.ds-switch--md .ds-switch__input {
-  left: 0;
-  top: 0;
-}
-
-.ds-switch--lg {
-  --dsc-switch-height: var(--ds-sizing-8);
-  --dsc-switch-width: var(--ds-sizing-15);
-}
-
-.ds-switch--lg .ds-switch__input {
-  left: 0;
-  top: 0.25rem;
-}
-
-.ds-switch__label:has(.ds-switch__track:only-child) {
-  grid-template-columns: auto;
-}
-
-.ds-switch__label:has(.ds-switch__track:only-child) .ds-switch__track {
-  margin-right: 0;
-}
-
-.ds-switch__input:disabled,
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label {
-  cursor: not-allowed;
-}
-
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label,
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__description {
-  opacity: var(--ds-disabled-opacity);
-}
-
-/*   .ds-switch__input:focus-visible + .ds-switch__label .ds-switch__track {
-    outline: var(--dsc-switch-focus-border-width) solid var(--ds-color-focus-outer);
-    outline-offset: var(--dsc-switch-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-color-focus-inner);
-  } */
-
-/**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-.ds-switch:has(.ds-switch__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-switch__input:not([readonly]):checked + .ds-switch__label .ds-switch__track {
-  background-color: var(--ds-color-accent-base-default);
-}
-
-.ds-switch__thumb {
-  scale: 0.8;
-  position: absolute;
-  height: var(--dsc-switch-height);
-  width: var(--dsc-switch-height);
-  border-radius: var(--ds-border-radius-full);
-  background-color: var(--dsc-switch-thumb-background-color);
-  transition: transform var(--dsc-switch--transition) ease;
-}
-
-.ds-switch__input:checked + .ds-switch__label .ds-switch__track .ds-switch__thumb {
-  --dsc-switch-check_color: var(--ds-color-accent-base-default);
-  --dsc-switch-thumb-background-color: var(--ds-color-accent-contrast-default);
-
-  transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 1.2));
-}
-
-.ds-switch__thumb::after {
-  content: '';
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: var(--dsc-switch-check_color);
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23118849' /%3E%3C/svg%3E");
-  transition: background-color var(--dsc-switch--transition) ease;
-}
-
-.ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track {
-  box-shadow: inset 0 0 0 2px var(--ds-color-neutral-border-subtle);
-  background-color: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-  background-color: var(--ds-color-neutral-border-strong);
-}
-
-.ds-switch--readonly .ds-switch__input[readonly]:checked + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-  --dsc-switch-check_color: var(--ds-color-neutral-background-subtle);
-
-  background-color: var(--ds-color-neutral-border-strong);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 0.2));
-  }
-
-  .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label {
-    color: var(--ds-color-accent-text-subtle);
-  }
-
-  .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-    --dsc-switch-check_color: var(--ds-color-accent-base-hover);
-
-    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))));
-  }
-
-  .ds-switch__input:not(:checked, :disabled, [readonly]):hover + .ds-switch__label .ds-switch__track {
-    background-color: var(--ds-color-neutral-border-strong);
-  }
-
-  .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track {
-    background-color: var(--ds-color-accent-base-hover);
-  }
-}

package/textarea.css

@@ -1,80 +0,0 @@
-.ds-textarea {
-  display: grid;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-textarea__readonly-icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-textarea__error-message:empty {
-  display: none;
-}
-
-.ds-textarea__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-textarea__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}
-
-.ds-textarea__input {
-  font-family: inherit;
-  position: relative;
-  box-sizing: border-box;
-  flex: 0 1 auto;
-  min-height: 2.5em;
-  width: 100%;
-  appearance: none;
-  padding: var(--ds-spacing-3);
-  border: solid 1px var(--ds-color-neutral-border-default);
-  border-radius: min(1rem, var(--ds-border-radius-md));
-  resize: vertical;
-  background: var(--ds-color-neutral-background-default);
-  color: var(--ds-color-neutral-text-default);
-  field-sizing: content;
-}
-
-.ds-textarea--sm .ds-textarea__input {
-  padding: var(--ds-spacing-2);
-}
-
-.ds-textarea--md .ds-textarea__input {
-  padding: var(--ds-spacing-3);
-}
-
-.ds-textarea--lg .ds-textarea__input {
-  padding: var(--ds-spacing-4);
-}
-
-.ds-textarea:has(.ds-textarea__input:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-textarea__input:disabled {
-  cursor: not-allowed;
-}
-
-.ds-textarea__input:read-only {
-  background: var(--ds-color-neutral-background-subtle);
-  border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ds-textarea--error > .ds-textarea__input:not(:focus-visible) {
-  border-color: var(--ds-color-danger-border-default);
-  box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-textarea__input: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);
-  }
-}

package/utilities.css

@@ -1,41 +0,0 @@
-/**
- * Visually hide an element, but leave it available for screen readers
- */
-.ds-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-:root {
-  --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),
-    0 0 0 calc(var(--dsc-focus-border-width) * 2) var(--ds-color-focus-outer);
-}
-
-/**
- * Apply a focus outline on an element when it is focused with keyboard
- */
- .ds-focus:focus-visible {
-  outline: none;
-  box-shadow: var(--dsc-focus-boxShadow);
-}
-
-.ds-animate-height--openingOrClosing,
-.ds-animate-height--closed {
-  overflow: hidden;
-}
-
-.ds-animate-height--open .ds-animate-height__content {
-  height: auto;
-}
-
-.ds-animate-height--closed .ds-animate-height__content {
-  height: 0;
-  display: none;
-}