@digdir/designsystemet-css 0.0.0-next-20240724125515

package/checkbox.css

@@ -0,0 +1,205 @@
+.ds-checkbox {
+  --dsc-checkbox-size: 1.75rem;
+  --dsc-checkbox-focus-border-width: 3px;
+  --dsc-checkbox-background: var(--ds-color-neutral-background-default);
+  --dsc-checkbox-border-color: var(--ds-color-neutral-border-default);
+  --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
+  --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
+  --dsc-checkbox-check_color: transparent;
+
+  display: grid;
+}
+
+.ds-checkbox:has(.ds-checkbox__label) {
+  grid-template-columns: var(--dsc-checkbox-size) auto;
+  gap: var(--ds-spacing-2);
+}
+
+/* Checkbox */
+.ds-checkbox__input {
+  position: relative;
+  width: var(--dsc-checkbox-size);
+  height: var(--dsc-checkbox-size);
+  z-index: 1;
+  appearance: none;
+  margin: 0;
+  align-self: center;
+  outline: none;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
+  background: var(--dsc-checkbox-background);
+  border-radius: min(0.25rem, var(--ds-border-radius-md));
+}
+
+.ds-checkbox__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-checkbox__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-checkbox__description {
+  margin-top: calc(var(--ds-spacing-2) * -1);
+  color: var(--ds-color-neutral-text-subtle);
+  grid-column: 2;
+}
+
+.ds-checkbox--readonly > .ds-checkbox__label,
+.ds-checkbox--readonly > .ds-checkbox__input,
+.ds-checkbox--readonly > .ds-checkbox__input::before {
+  cursor: default;
+}
+
+.ds-checkbox__input:disabled,
+.ds-checkbox__input:disabled ~ .ds-checkbox__label,
+.ds-checkbox__input:disabled::before {
+  cursor: not-allowed;
+}
+
+/*   .ds-checkbox__input:focus-visible {
+    outline-offset: 3px;
+    outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-color-focus-outer);
+    box-shadow:
+      0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-color-focus-inner),
+      inset 0 0 0 2px var(--dsc-checkbox-border-color);
+  } */
+
+.ds-checkbox__input::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--dsc-checkbox-check_color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+.ds-checkbox__input:checked {
+  --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
+  --dsc-checkbox-background: var(--ds-color-accent-base-default);
+  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
+
+  background: var(--dsc-checkbox-background);
+}
+
+.ds-checkbox__input:indeterminate {
+  --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
+  --dsc-checkbox-background: var(--ds-color-accent-base-default);
+  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
+}
+
+.ds-checkbox__input:indeterminate::after {
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
+}
+
+.ds-checkbox--readonly > .ds-checkbox__input {
+  --dsc-checkbox-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
+}
+
+.ds-checkbox__input:disabled,
+.ds-checkbox__input:disabled ~ .ds-checkbox__label,
+.ds-checkbox__input:disabled ~ .ds-checkbox__description {
+  opacity: var(--ds-disabled-opacity);
+}
+
+/* .ds-checkbox__input:checked:not(:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
+  } */
+
+.ds-checkbox:has(.ds-checkbox__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-checkbox--readonly > .ds-checkbox__input:checked {
+  --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
+
+  background: var(--dsc-checkbox-background);
+}
+
+.ds-checkbox--readonly > .ds-checkbox__input:indeterminate {
+  --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
+
+  background: var(--dsc-checkbox-background);
+}
+
+.ds-checkbox--error > .ds-checkbox__input:not(:disabled, :focus-visible) {
+  --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
+}
+
+/* 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-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled) ~ .ds-checkbox__label:hover,
+  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled) ~ .ds-checkbox__label {
+    color: var(--ds-color-accent-text-subtle);
+  }
+
+  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked, :disabled, :focus-visible) {
+    --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
+
+    box-shadow:
+      var(--dsc-checkbox-border__hover),
+      inset 0 0 0 2px var(--dsc-checkbox-border-color);
+  }
+
+  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible) {
+    --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
+
+    box-shadow: var(--dsc-checkbox-border__hover);
+  }
+
+  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled, :focus-visible) {
+    box-shadow: var(--dsc-checkbox-border__hover);
+  }
+}
+
+/** Sizing */
+
+.ds-checkbox--sm {
+  --dsc-checkbox-size: var(--ds-sizing-5);
+
+  /* min-height: var(--ds-sizing-10); */
+}
+
+.ds-checkbox--md {
+  --dsc-checkbox-size: var(--ds-sizing-6);
+
+  /* min-height: var(--ds-sizing-11); */
+}
+
+.ds-checkbox--lg {
+  --dsc-checkbox-size: var(--ds-sizing-7);
+
+  /* min-height: var(--ds-sizing-12); */
+}
+
+.ds-checkbox__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-5);
+  width: fit-content;
+}

package/chip.css

@@ -0,0 +1,171 @@
+/*
+  The class is unused. There is no root chip component?
+  .chip {
+    display: flex;
+  }
+  */
+
+.ds-chip--button {
+  --dsc-chip-height: var(--ds-sizing-7);
+  --dsc-chip-padding: 0 var(--ds-spacing-3);
+  --dsc-chip-background: var(--ds-color-accent-surface-default);
+  --dsc-chip-text-color: var(--ds-color-neutral-text-default);
+  --dsc-chip-border: var(--ds-color-accent-border-subtle);
+  --dsc-chip-border-radius: var(--ds-border-radius-full);
+
+  background: var(--dsc-chip-background);
+  padding: var(--dsc-chip-padding);
+  min-height: var(--dsc-chip-height);
+  border-radius: var(--dsc-chip-border-radius);
+  border: 1px solid var(--dsc-chip-border);
+  color: var(--dsc-chip-text-color);
+  text-decoration: none;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-chip--button:disabled,
+.ds-chip--button[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--ds-disabled-opacity);
+}
+
+.ds-chip--button .ds-chip__label {
+  color: inherit;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-chip--removable {
+  --dsc-removable-background: var(--ds-color-accent-base-default);
+  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
+  --dsc-removable-chip-size: var(--ds-sizing-7);
+  --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
+  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
+  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
+  --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
+
+  color: var(--dsc-removable-text-color);
+  background: var(--dsc-removable-background);
+  border: 0;
+  padding-right: var(--ds-spacing-2);
+  min-height: var(--dsc-chip-height);
+}
+
+.ds-chip--removable.ds-chip--sm {
+  padding-right: var(--ds-spacing-1);
+}
+
+.ds-chip--removable.ds-chip--lg {
+  padding-right: var(--ds-spacing-2);
+}
+
+.ds-chip__x-mark {
+  color: var(--dsc-removable-chip-xmark-color);
+  height: var(--dsc-removable-chip-xmark-size);
+  width: var(--dsc-removable-chip-xmark-size);
+}
+
+.ds-chip__x-mark .ds-chip__icon {
+  height: var(--dsc-removable-chip-xmark-size);
+  width: var(--dsc-removable-chip-xmark-size);
+}
+
+.ds-chip--spacing {
+  padding-left: var(--ds-spacing-2) !important;
+}
+
+.ds-chip--sm .ds-chip__checkmark-icon {
+  height: var(--ds-sizing-5);
+  width: auto;
+}
+
+.ds-chip--md .ds-chip__checkmark-icon {
+  height: 24px;
+  width: auto;
+}
+
+.ds-chip--lg .ds-chip__checkmark-icon {
+  height: 26px;
+  width: auto;
+}
+
+.ds-chip--group-container {
+  --dsc-chip-group-gap: var(--ds-spacing-2);
+
+  display: flex;
+  gap: var(--dsc-chip-group-gap);
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ds-chip--group-container.ds-chip--sm {
+  --dsc-chip-group-gap: var(--ds-spacing-2);
+}
+
+.ds-chip--group-container.ds-chip--md {
+  --dsc-chip-group-gap: var(--ds-spacing-2);
+}
+
+.ds-chip--group-container.ds-chip--lg {
+  --dsc-chip-group-gap: var(--ds-spacing-2);
+}
+
+/* Only use hover for non-touch devices to prevent sticky-hovering */
+@media (hover: hover) and (pointer: fine) {
+  .ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
+    --dsc-chip-background: var(--ds-color-accent-surface-hover);
+    --dsc-chip-text-color: var(--ds-color-neutral-text-default);
+    --dsc-chip-border: var(--ds-color-accent-border-default);
+
+    cursor: pointer;
+  }
+
+  .ds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
+    --dsc-chip-background: var(--ds-color-accent-surface-hover);
+    --dsc-chip-text-color: var(--ds-color-neutral-text-default);
+  }
+
+  .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
+  .ds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
+    --dsc-removable-background: var(--ds-color-accent-base-hover);
+    --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
+  }
+}
+
+.ds-chip--button:is([aria-pressed='true']),
+.ds-chip--button:not(:disabled, [aria-disabled='true']):active,
+.ds-chip--removable:is([aria-pressed='true']),
+.ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
+  --dsc-chip-background: var(--ds-color-accent-base-active);
+  --dsc-chip-text-color: var(--ds-color-neutral-contrast-default);
+  --dsc-chip-border: var(--ds-color-accent-base-active);
+  --dsc-removable-background: var(--ds-color-accent-base-active);
+  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
+}
+
+.ds-chip--sm {
+  --dsc-chip-height: var(--ds-sizing-7);
+  --dsc-chip-padding: 0 var(--ds-spacing-3);
+  --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
+  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
+}
+
+.ds-chip--md {
+  --dsc-chip-height: var(--ds-sizing-8);
+  --dsc-chip-padding: 0 var(--ds-spacing-3);
+  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
+  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
+}
+
+.ds-chip--lg {
+  --dsc-chip-height: var(--ds-sizing-9);
+  --dsc-chip-padding: 0 var(--ds-spacing-4);
+  --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
+  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
+}

package/combobox.css

@@ -0,0 +1,298 @@
+.ds-combobox {
+  display: grid;
+  background-color: transparent;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-combobox [data-floating-ui-portal] {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.ds-combobox__options-wrapper {
+  padding: var(--ds-spacing-2);
+  background: var(--ds-color-neutral-background-default);
+  color: var(--ds-color-neutral-text-default);
+  overflow-y: auto;
+  z-index: 1600;
+  border-radius: min(1rem, var(--ds-border-radius-md));
+}
+
+.ds-combobox--readonly .ds-combobox__input {
+  pointer-events: none;
+}
+
+.ds-combobox__input__wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: var(--ds-spacing-1);
+  cursor: text;
+  padding: var(--ds-spacing-2);
+  border-radius: min(1rem, var(--ds-border-radius-md));
+  width: 100%;
+  height: auto;
+  justify-content: space-between;
+}
+
+.ds-combobox__input__wrapper .ds-combobox__input {
+  height: 100%;
+  min-width: 50px;
+  flex-grow: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-combobox--sm .ds-combobox__input__wrapper {
+  min-height: var(--ds-sizing-10);
+  padding: 5px var(--ds-spacing-2);
+}
+
+.ds-combobox--md .ds-combobox__input__wrapper {
+  min-height: var(--ds-sizing-12);
+  padding: 7px var(--ds-spacing-3);
+}
+
+.ds-combobox--lg .ds-combobox__input__wrapper {
+  min-height: var(--ds-sizing-14);
+  padding: 7px var(--ds-spacing-4);
+}
+
+.ds-combobox__input__wrapper .ds-combobox__input:focus {
+  outline: none;
+}
+
+.ds-combobox__input__wrapper.ds-combobox--error {
+  border-color: var(--ds-color-danger-border-default);
+  border-width: 2px;
+}
+
+.ds-combobox__chip-and-input {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--ds-spacing-2);
+  align-items: center;
+  background-color: transparent;
+}
+
+.ds-combobox__arrow {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.ds-combobox__input__wrapper.ds-combobox--readonly {
+  background: var(--ds-color-accent-base-default);
+  border-color: var(--ds-color-accent-base-default);
+}
+
+.ds-combobox__label {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+}
+
+.ds-combobox__description {
+  color: var(--ds-color-neutral-text-subtle);
+  margin-top: calc(var(--ds-spacing-2) * -1);
+}
+
+.ds-combobox__clear-button {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--ds-color-neutral-text-default);
+  border: none;
+  padding: 0;
+  border-radius: var(--ds-border-radius-sm);
+  height: 29px;
+  width: 29px;
+  aspect-ratio: 1;
+}
+
+.ds-combobox--sm .ds-combobox__clear-button {
+  height: 25px;
+  width: 25px;
+}
+
+.ds-combobox--md .ds-combobox__clear-button {
+  height: 29px;
+  width: 29px;
+}
+
+.ds-combobox--lg .ds-combobox__clear-button {
+  height: 31px;
+  width: 31px;
+}
+
+.ds-combobox__clear-button:not(:disabled):hover {
+  background-color: var(--ds-color-neutral-surface-default);
+}
+
+.ds-combobox__disabled {
+  opacity: var(--ds-disabled-opacity);
+}
+
+.ds-combobox__disabled * {
+  cursor: not-allowed;
+}
+
+.ds-combobox__readonly__icon {
+  height: 1.2em;
+  width: 1.2em;
+}
+
+.ds-combobox__error-message {
+  margin-top: var(--ds-spacing-2);
+}
+
+.ds-combobox__error-message:empty {
+  display: none;
+}
+
+.ds-combobox__loading {
+  display: flex;
+  gap: var(--ds-spacing-2);
+  align-content: center;
+}
+
+/**
+   * Apply a focus outline on an element when it is focused with keyboard
+   */
+.ds-combobox__input__wrapper:has(input:focus) {
+  --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-combobox__input__wrapper:focus-within:hover {
+  border-color: var(--ds-color-neutral-border-default);
+}
+
+.ds-combobox__empty {
+  font-weight: 400;
+  padding: var(--ds-spacing-2) var(--ds-spacing-3);
+}
+
+.ds-combobox__custom {
+  font-weight: 400;
+  padding: var(--ds-spacing-2) var(--ds-spacing-3);
+}
+
+.ds-combobox__option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1.2em 1fr;
+  padding: var(--ds-spacing-2) var(--ds-spacing-3);
+  padding-left: var(--ds-spacing-1);
+  border: none;
+  border-left: 5px solid transparent;
+  border-radius: min(1rem, var(--ds-border-radius-md));
+  justify-content: start;
+  background: none;
+  text-align: left;
+  height: auto;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 400;
+}
+
+.ds-combobox__option.ds-combobox__option--active {
+  background: var(--ds-color-accent-background-subtle);
+  border-left: 5px solid var(--ds-color-accent-base-default);
+}
+
+.ds-combobox__option > div {
+  align-self: flex-start;
+}
+
+.ds-combobox__option.ds-combobox__option--multiple {
+  grid-template-columns: auto 1fr;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-combobox__option__label {
+  margin: auto 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  cursor: pointer;
+  gap: var(--ds-spacing-1);
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-combobox__option--active .ds-combobox__option__label {
+  color: var(--ds-color-accent-text-default);
+}
+
+.ds-combobox__option__icon-wrapper {
+  width: var(--ds-spacing-6);
+  aspect-ratio: 1 / 1;
+  border: 2px solid var(--ds-color-neutral-border-default);
+  border-radius: min(0.25rem, var(--ds-border-radius-md));
+  background-color: var(--ds-color-neutral-background-default);
+  display: grid;
+  place-items: center;
+}
+
+.ds-combobox__option--active .ds-combobox__option__icon-wrapper {
+  border-color: var(--ds-color-accent-base-default);
+}
+
+.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper {
+  width: var(--ds-spacing-5);
+}
+
+.ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper {
+  width: var(--ds-spacing-6);
+}
+
+.ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper {
+  width: var(--ds-spacing-7);
+}
+
+.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected {
+  border-color: var(--ds-color-accent-base-default);
+  background-color: var(--ds-color-accent-base-default);
+}
+
+.ds-combobox__option__icon-wrapper__icon {
+  box-sizing: border-box;
+  padding-top: 0.2em;
+  transform: scale(1.4);
+  stroke: var(--ds-color-neutral-text-default);
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon {
+  padding-top: 0;
+}
+
+.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon {
+  stroke: var(--ds-color-accent-text-default);
+  color: var(--ds-color-accent-text-default);
+}
+
+.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon {
+  color: white;
+  stroke: white;
+}
+
+.ds-combobox__option__description {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--ds-spacing-1);
+  color: var(--ds-color-neutral-text-subtle);
+  font-weight: 400;
+}

package/divider.css

@@ -0,0 +1,17 @@
+.ds-divider {
+  border: none;
+  border-top: 1px solid;
+  width: 100%;
+}
+
+.ds-divider--default {
+  border-color: var(--ds-color-neutral-border-subtle);
+}
+
+.ds-divider--strong {
+  border-color: var(--ds-color-neutral-border-default);
+}
+
+.ds-divider--subtle {
+  border-color: var(--ds-color-neutral-border-subtle);
+}