box.module.css

.ds-box--xs-shadow {
  box-shadow: var(--ds-shadow-xs);
}

.ds-box--sm-shadow {
  box-shadow: var(--ds-shadow-sm);
}

.ds-box--md-shadow {
  box-shadow: var(--ds-shadow-md);
}

.ds-box--lg-shadow {
  box-shadow: var(--ds-shadow-lg);
}

.ds-box--xl-shadow {
  box-shadow: var(--ds-shadow-xl);
}

.ds-box--default-border-color {
  border: 1px solid var(--ds-color-neutral-border-default);
}

.ds-box--subtle-border-color {
  border: 1px solid var(--ds-color-neutral-border-subtle);
}

.ds-box--strong-border-color {
  border: 1px solid var(--ds-color-neutral-base-strong);
}

.ds-box--sm-border-radius {
  border-radius: var(--ds-border-radius-sm);
}

.ds-box--md-border-radius {
  border-radius: var(--ds-border-radius-md);
}

.ds-box--lg-border-radius {
  border-radius: var(--ds-border-radius-lg);
}

.ds-box--xl-border-radius {
  border-radius: var(--ds-border-radius-xl);
}

.ds-box--2xl-border-radius {
  border-radius: var(--ds-border-radius-2xl);
}

.ds-box--3xl-border-radius {
  border-radius: var(--ds-border-radius-3xl);
}

.ds-box--4xl-border-radius {
  border-radius: var(--ds-border-radius-4xl);
}

.ds-box--full-border-radius {
  border-radius: var(--ds-border-radius-full);
}

.ds-box--default-background {
  background-color: var(--ds-color-neutral-background-default);
}

.ds-box--subtle-background {
  background-color: var(--ds-color-neutral-background-subtle);
}