@digdir/designsystemet-css 0.0.0-next-20240724125515

package/switch.css

@@ -0,0 +1,242 @@
+.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 {
+  --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/table.css

@@ -0,0 +1,142 @@
+.ds-table {
+  --dsc-table-padding: 0;
+  --dsc-table-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-table-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-table-color: var(--ds-color-neutral-text-default);
+  --dsc-table-header-cell-background: var(--ds-color-neutral-background-default);
+  --dsc-table-header-sorted-background: var(--ds-color-neutral-background-subtle);
+  --dsc-table-header-sorted-hover: var(--ds-color-neutral-surface-default);
+  --dsc-table-cell-backround: var(--ds-color-neutral-background-default);
+  --dsc-table-cell-zebra-background: var(--ds-color-neutral-background-subtle);
+  --dsc-table-cell-hover-backround: var(--ds-color-neutral-surface-default);
+
+  position: relative;
+  border-collapse: separate;
+  border-spacing: 0;
+  text-align: left;
+  color: var(--dsc-table-color);
+}
+
+.ds-table--sticky-header {
+  overflow: auto;
+}
+
+.ds-table--border .ds-table__row:last-of-type td {
+  border-bottom: 0;
+}
+
+.ds-table--sm {
+  --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
+}
+
+.ds-table--md {
+  --dsc-table-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+}
+
+.ds-table--lg {
+  --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
+}
+
+.ds-table__head {
+  z-index: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  border-spacing: 0;
+  border-bottom: 2px solid var(--dsc-table-border-color);
+}
+
+.ds-table__header__cell {
+  padding: var(--dsc-table-padding);
+  font-family: inherit;
+  background-color: var(--dsc-table-header-cell-background);
+  border-spacing: 0;
+  border-bottom: 2px solid var(--dsc-table-border-color);
+}
+
+.ds-table--sticky-header .ds-table__head .ds-table__header__cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.ds-table__header__cell--sortable {
+  padding: 0;
+}
+
+.ds-table__header__cell--sortable button {
+  position: relative;
+  width: 100%;
+  border: none;
+  font-family: inherit;
+  display: flex;
+  cursor: pointer;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+  padding: var(--dsc-table-padding);
+  background-color: transparent;
+  color: var(--dsc-table-color);
+  z-index: 2;
+}
+
+.ds-table__header__cell--sorted button {
+  background-color: var(--dsc-table-header-sorted-background);
+}
+
+.ds-table__header__cell--sortable button:focus-visible {
+  z-index: 3;
+  outline-offset: -3px;
+  box-shadow: unset;
+}
+
+.ds-table__header__cell--sortable button svg {
+  font-size: 1.2em;
+}
+
+.ds-table__cell {
+  padding: var(--dsc-table-padding);
+  border-bottom: 1px solid var(--dsc-table-border-color);
+  background-color: var(--dsc-table-cell-backround);
+}
+
+.ds-table--zebra .ds-table__row {
+  border-bottom: 0;
+}
+
+.ds-table--zebra tr:nth-child(even):not(:hover) .ds-table__cell {
+  background-color: var(--dsc-table-cell-zebra-background);
+}
+
+.ds-table--border {
+  border-radius: var(--dsc-table-border-radius);
+  border: 1px solid var(--dsc-table-border-color);
+}
+
+.ds-table--border .ds-table__head .ds-table__header__cell:first-of-type {
+  border-top-left-radius: var(--dsc-table-border-radius);
+  overflow: hidden;
+}
+
+.ds-table--border .ds-table__head .ds-table__header__cell:last-of-type {
+  border-top-right-radius: var(--dsc-table-border-radius);
+  overflow: hidden;
+}
+
+.ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type {
+  border-bottom-left-radius: var(--dsc-table-border-radius);
+  overflow: hidden;
+}
+
+.ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type {
+  border-bottom-right-radius: var(--dsc-table-border-radius);
+  overflow: hidden;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .ds-table__row:hover .ds-table__cell {
+    background-color: var(--dsc-table-cell-hover-backround);
+  }
+
+  .ds-table__header__cell--sortable button:hover {
+    background-color: var(--dsc-table-header-sorted-hover);
+  }
+}

package/tabs.css

@@ -0,0 +1,81 @@
+.ds-tabs {
+  --dsc-tabs__tab-bottom-border-color: transparent;
+  --dsc-tabs-tab-padding: var(--ds-spacing-3) var(--ds-spacing-5);
+  --dsc-tabs-tab-color: var(--ds-color-neutral-text-subtle);
+  --dsc-tabs-content-padding: var(--ds-spacing-5);
+  --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
+  --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
+}
+
+.ds-tabs__tab {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  gap: var(--ds-spacing-1);
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  padding: var(--dsc-tabs-tab-padding);
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--dsc-tabs-tab-color);
+  position: relative;
+  font-family: inherit;
+}
+
+.ds-tabs__content {
+  padding: var(--dsc-tabs-content-padding);
+  color: var(--dsc-tabs-content-color);
+}
+
+.ds-tabs--sm {
+  --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-tabs-content-padding: var(--ds-spacing-4);
+}
+
+.ds-tabs--md {
+  --dsc-tabs-tab-padding: var(--ds-spacing-3) var(--ds-spacing-5);
+  --dsc-tabs-content-padding: var(--ds-spacing-5);
+}
+
+.ds-tabs--lg {
+  --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
+  --dsc-tabs-content-padding: var(--ds-spacing-6);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .ds-tabs__tab:hover:not([aria-selected='true']) {
+    --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
+    --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
+  }
+}
+
+.ds-tabs__tab[aria-selected='true'] {
+  --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
+  --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
+}
+
+.ds-tabs__tab:focus {
+  z-index: 2;
+}
+
+.ds-tabs__tab::after {
+  content: '';
+  display: block;
+  height: 3px;
+  width: 100%;
+  border-radius: var(--dsc-border-radius-full);
+  background-color: var(--dsc-tabs__tab-bottom-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.ds-tabs__tablist {
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);
+  position: relative;
+}

package/tag.css

@@ -0,0 +1,70 @@
+.ds-tag {
+  --dsc-tag-background: var(--ds-color-neutral-background-subtle);
+  --dsc-tag-color: var(--ds-color-neutral-text-default);
+
+  color: var(--dsc-tag-color);
+  padding: 0 var(--ds-spacing-2);
+  min-height: var(--ds-sizing-8);
+  background-color: var(--dsc-tag-background);
+  border-radius: min(1rem, var(--ds-border-radius-sm));
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  word-break: break-word;
+  width: max-content;
+}
+
+.ds-tag--sm {
+  padding: 0 var(--ds-spacing-2);
+  min-height: var(--ds-sizing-7);
+}
+
+.ds-tag--md {
+  padding: 0 var(--ds-spacing-2);
+  min-height: var(--ds-sizing-8);
+}
+
+.ds-tag--lg {
+  padding: 0 var(--ds-spacing-3);
+  min-height: var(--ds-sizing-9);
+}
+
+.ds-tag--neutral {
+  --dsc-tag-background: var(--ds-color-neutral-surface-default);
+  --dsc-tag-color: var(--ds-color-neutral-text-default);
+}
+
+.ds-tag--info {
+  --dsc-tag-background: var(--ds-color-info-surface-default);
+  --dsc-tag-color: var(--ds-color-info-text-default);
+}
+
+.ds-tag--success {
+  --dsc-tag-background: var(--ds-color-success-surface-default);
+  --dsc-tag-color: var(--ds-color-success-text-default);
+}
+
+.ds-tag--warning {
+  --dsc-tag-background: var(--ds-color-warning-surface-default);
+  --dsc-tag-color: var(--ds-color-warning-text-default);
+}
+
+.ds-tag--danger {
+  --dsc-tag-background: var(--ds-color-danger-surface-default);
+  --dsc-tag-color: var(--ds-color-danger-text-default);
+}
+
+.ds-tag--brand1 {
+  --dsc-tag-background: var(--ds-color-brand1-surface-default);
+  --dsc-tag-color: var(--ds-color-brand1-text-default);
+}
+
+.ds-tag--brand2 {
+  --dsc-tag-background: var(--ds-color-brand2-surface-default);
+  --dsc-tag-color: var(--ds-color-brand2-text-default);
+}
+
+.ds-tag--brand3 {
+  --dsc-tag-background: var(--ds-color-brand3-surface-default);
+  --dsc-tag-color: var(--ds-color-brand3-text-default);
+}

package/textarea.css

@@ -0,0 +1,79 @@
+.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);
+}
+
+.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);
+  }
+}