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

package/table.css

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

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

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

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

@@ -1,151 +0,0 @@
-.ds-textfield {
-  display: grid;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-textfield__adornment {
-  color: var(--ds-color-neutral-text-subtle);
-  background: var(--ds-color-neutral-background-subtle);
-  padding: 9px var(--ds-spacing-4);
-  border-radius: var(--ds-border-radius-md);
-  border: solid 1px var(--ds-color-neutral-border-default);
-  box-sizing: border-box;
-  display: inline-block;
-}
-
-.ds-textfield__input {
-  font-family: inherit;
-  position: relative;
-  box-sizing: border-box;
-  flex: 0 1 auto;
-  width: 100%;
-  appearance: none;
-  padding: 0 var(--ds-spacing-3);
-  border: solid 1px var(--ds-color-neutral-border-default);
-  background: var(--ds-color-neutral-background-default);
-  color: var(--ds-color-neutral-text-default);
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-textfield__input:disabled {
-  cursor: not-allowed;
-}
-
-.ds-textfield--readonly .ds-textfield__input {
-  background: var(--ds-color-neutral-background-subtle);
-  border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ds-textfield__field {
-  display: flex;
-  align-items: stretch;
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-textfield__field > *:first-child {
-  border-top-left-radius: var(--ds-border-radius-md);
-  border-bottom-left-radius: var(--ds-border-radius-md);
-}
-
-.ds-textfield__field > *:last-child {
-  border-top-right-radius: var(--ds-border-radius-md);
-  border-bottom-right-radius: var(--ds-border-radius-md);
-}
-
-.ds-textfield--sm .ds-textfield__adornment {
-  padding: var(--ds-sizing-2) var(--ds-spacing-3);
-}
-
-.ds-textfield--md .ds-textfield__adornment {
-  padding: 0.65rem var(--ds-spacing-4);
-}
-
-.ds-textfield--lg .ds-textfield__adornment {
-  padding: 0.85rem var(--ds-spacing-5);
-}
-
-.ds-textfield--sm .ds-textfield__field {
-  height: var(--ds-sizing-10);
-}
-
-.ds-textfield--md .ds-textfield__field {
-  height: var(--ds-sizing-12);
-}
-
-.ds-textfield--lg .ds-textfield__field {
-  height: var(--ds-sizing-14);
-}
-
-.ds-textfield--sm .ds-textfield__input {
-  padding: 0 var(--ds-spacing-2);
-}
-
-.ds-textfield--md .ds-textfield__input {
-  padding: 0 var(--ds-spacing-3);
-}
-
-.ds-textfield--lg .ds-textfield__input {
-  padding: 0 var(--ds-spacing-4);
-}
-
-.ds-textfield__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-textfield__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}
-
-.ds-textfield:has(.ds-textfield__input:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-textfield--error .ds-textfield__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-textfield__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);
-  }
-}
-
-.ds-textfield__input--with-prefix {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.ds-textfield__input--with-suffix {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ds-textfield__prefix {
-  border-right: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  white-space: nowrap;
-}
-
-.ds-textfield__suffix {
-  border-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  white-space: nowrap;
-}
-
-.ds-textfield__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-textfield__error-message:empty {
-  display: none;
-}

package/togglegroup.css

@@ -1,27 +0,0 @@
-.ds-togglegroup {
-  --dsc-togglegroup-padding: var(--ds-spacing-1);
-  --dsc-togglegroup-background: var(--ds-color-neutral-background-default);
-  --dsc-togglegroup-border-color: var(--ds-color-neutral-border-default);
-
-  background-color: var(--dsc-togglegroup-background);
-  border: var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);
-  border-radius: calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));
-  width: fit-content;
-  height: fit-content;
-}
-
-.ds-togglegroup__content {
-  display: inline-grid;
-  gap: var(--dsc-togglegroup-padding);
-  grid-auto-columns: 1fr;
-  grid-auto-flow: column;
-  padding: var(--dsc-togglegroup-padding);
-}
-
-.ds-togglegroup__input {
-  display: none;
-}
-
-.ds-togglegroup__item:focus-visible {
-  z-index: 1;
-}

package/tooltip.css

@@ -1,15 +0,0 @@
-.ds-tooltip {
-  --dsc-tooltip-background: var(--ds-color-neutral-text-default);
-  --dsc-tooltip-color: var(--ds-color-neutral-background-default);
-  --dsc-tooltip-padding: var(--ds-spacing-1) var(--ds-spacing-2);
-  --dsc-tooltip-border-radius: var(--ds-border-radius-md);
-
-  background: var(--dsc-tooltip-background);
-  padding: var(--dsc-tooltip-padding);
-  color: var(--dsc-tooltip-color);
-  border-radius: var(--dsc-tooltip-border-radius);
-}
-
-.ds-tooltip__arrow {
-  fill: var(--dsc-tooltip-background);
-}

package/utilities.css

@@ -1,38 +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;
-}
-
-/**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-.ds-focus: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);
-}
-
-.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;
-}