@digdir/designsystemet-css 0.0.0-next-20240724125515

package/popover.css

@@ -0,0 +1,84 @@
+.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

@@ -0,0 +1,182 @@
+.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 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-3);
+  width: fit-content;
+}
+
+.ds-radio-group--horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-6);
+}

package/search.css

@@ -0,0 +1,170 @@
+.ds-search {
+  --dsc-search-clear-button-size: var(--ds-sizing-6);
+  --dsc-search-input-background: var(--ds-color-neutral-background-default);
+  --dsc-search-input-border-color: var(--ds-color-neutral-border-default);
+  --dsc-search-input-border: 1px solid var(--dsc-search-input-border-color);
+  --dsc-search-input-color: var(--ds-color-neutral-text-default);
+
+  display: inline-grid;
+  width: 100%;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-search--sm {
+  --dsc-search-clear-button-size: var(--ds-sizing-5);
+}
+
+.ds-search--md {
+  --dsc-search-clear-button-size: var(--ds-sizing-6);
+}
+
+.ds-search--lg {
+  --dsc-search-clear-button-size: var(--ds-sizing-8);
+}
+
+.ds-search__label {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+}
+
+.ds-search__field {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  border-radius: var(--ds-border-radius-md);
+  position: relative;
+}
+
+.ds-search__icon {
+  position: absolute;
+  height: 100%;
+  z-index: 2;
+  left: var(--ds-spacing-4);
+  transform: scale(1.5);
+  pointer-events: none;
+}
+
+[type='search']::-webkit-search-decoration,
+[type='search']::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.ds-search__input {
+  background: var(---dsc-search-input-background);
+  color: var(--dsc-search-input-color);
+  border: var(--dsc-search-input-border);
+  border-radius: var(--ds-border-radius-md);
+  font-family: inherit;
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  height: var(--ds-sizing-10);
+  width: 100%;
+  appearance: none;
+  padding: 0 var(--ds-spacing-3);
+}
+
+.ds-search__input.ds-search__input--with-search-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ds-search__input:disabled {
+  cursor: not-allowed;
+}
+
+.ds-search__input[type='search']:focus-visible {
+  z-index: 1;
+}
+
+.ds-search:has(.ds-search__input:disabled) {
+  opacity: var(--ds-disabled-opacity);
+}
+
+.ds-search__search-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.ds-search__search-button:not(:focus-visible) {
+  border-left: 0;
+}
+
+.ds-search__search-button:focus-visible {
+  z-index: 1;
+}
+
+.ds-search__clear-button {
+  color: var(--ds-color-neutral-text-default);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  background: none;
+  border: none;
+  right: 0.6em;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  height: var(--dsc-search-clear-button-size);
+  width: var(--dsc-search-clear-button-size);
+  border-radius: var(--ds-border-radius-md);
+  font-size: 1.25rem;
+  padding: 0;
+  z-index: 2;
+}
+
+.ds-search--sm .ds-search__input {
+  --dsc-search-clear-button-size: var(--ds-sizing-4);
+
+  height: var(--ds-sizing-10);
+  padding: 0 var(--ds-spacing-3);
+  padding-right: 2.5em;
+}
+
+.ds-search--sm .ds-search__icon {
+  left: var(--ds-spacing-3);
+}
+
+.ds-search--md .ds-search__input {
+  --dsc-search-clear-button-size: var(--ds-sizing-6);
+
+  height: var(--ds-sizing-12);
+  padding: 0 var(--ds-spacing-4);
+  padding-right: 2.2em;
+}
+
+.ds-search--md .ds-search__icon {
+  left: var(--ds-spacing-4);
+}
+
+.ds-search--lg .ds-search__input {
+  --dsc-search-clear-button-size: var(--ds-sizing-12);
+
+  height: var(--ds-sizing-14);
+  padding: 0 var(--ds-spacing-5);
+  padding-right: 2em;
+}
+
+.ds-search--lg .ds-search__icon {
+  left: var(--ds-spacing-5);
+}
+
+.ds-search__input.ds-search__input--simple {
+  padding-left: 2.4em;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .ds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
+    --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
+
+    box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
+  }
+
+  .ds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
+    background: var(--ds-color-accent-surface-hover);
+  }
+}

package/skeleton.css

@@ -0,0 +1,59 @@
+.ds-skeleton {
+  --dsc-skeleton-animation-duration: 0.8s;
+  --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
+
+  height: 1.3em;
+  pointer-events: none;
+  user-select: none;
+  background-color: var(--dsc-skeleton-background);
+  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
+}
+
+.ds-skeleton--circle {
+  width: 1.3em;
+  border-radius: var(--ds-border-radius-full);
+  aspect-ratio: 1 / 1;
+}
+
+.ds-skeleton--rectangle {
+  width: 100%;
+  border-radius: min(1rem, var(--ds-border-radius-lg));
+}
+
+.ds-skeleton--text {
+  width: 100%;
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--ds-border-radius-full);
+}
+
+.ds-skeleton--text:empty::before {
+  content: '\00a0';
+}
+
+.ds-skeleton--has-children {
+  width: fit-content;
+  height: fit-content;
+  color: transparent !important;
+}
+
+.ds-skeleton--has-children > * {
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton {
+    --dsc-skeleton-animation-duration: 1.6s;
+  }
+}
+
+@keyframes ds-skeleton-opacity-fade {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}

package/skiplink.css

@@ -0,0 +1,44 @@
+.ds-skiplink:focus {
+  display: grid;
+  place-items: center;
+  outline: 0;
+  position: static;
+  width: auto;
+  height: auto;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: inherit;
+  text-decoration: none;
+  padding: var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);
+  color: var(--ds-color-neutral-text-default);
+  background: var(--ds-color-accent-surface-default);
+}
+
+.ds-skiplink__content {
+  --dsc-skiplink-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-skiplink-border-width: 3px;
+
+  display: flex;
+  align-items: center;
+  border: var(--ds-border-width-default) solid transparent;
+  background-color: transparent;
+  color: var(--ds-color-accent-text-subtle);
+  border-color: var(--ds-color-accent-border-strong);
+  width: fit-content;
+  padding: var(--dsc-skiplink-padding);
+  margin: var(--ds-spacing-1);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  border-radius: var(--ds-border-radius-md);
+  min-height: var(--ds-sizing-10);
+  outline: var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);
+  outline-offset: var(--dsc-skiplink-border-width);
+  box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);
+}

package/spinner.css

@@ -0,0 +1,69 @@
+.ds-spinner {
+  --dsc-spinner-background: var(--ds-color-neutral-surface-default);
+  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+
+  animation: ds-spinner-rotate-animation linear infinite;
+  animation-duration: 2s;
+}
+
+.ds-spinner__circle {
+  stroke: var(--dsc-spinner-stroke);
+  stroke-dasharray: 1px, 200px;
+  transform-origin: center;
+  animation: ds-spinner-stroke-animation ease-in-out infinite;
+  animation-duration: 2s;
+}
+
+/* Prefers reduced motion needs longer animation,
+but don't remove it since it is not decorative.
+*/
+@media (prefers-reduced-motion: reduce) {
+  .ds-spinner {
+    animation-duration: 6s;
+  }
+
+  .ds-spinner__circle {
+    animation-duration: 6s;
+  }
+}
+
+.ds-spinner--neutral {
+  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
+}
+
+.ds-spinner--accent {
+  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+}
+
+.ds-spinner__background {
+  stroke: var(--dsc-spinner-background);
+}
+
+@keyframes ds-spinner-rotate-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ds-spinner-stroke-animation {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+    transform: rotate(0deg);
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -120px;
+    transform: rotate(15deg);
+  }
+}