@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/description-list.css

@@ -3,96 +3,98 @@
    Key-value pairs display with horizontal and vertical layouts.
    ========================================================================== */
 
-/* ---------------------------------------------------------------------------
-   Container
-   --------------------------------------------------------------------------- */
-
 .ds-description-list {
   display: flex;
   flex-direction: column;
   gap: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Item
-   --------------------------------------------------------------------------- */
-
-.ds-description-list__item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ds-space-1);
-  padding: var(--ds-space-3) 0;
-}
-
-.ds-description-list__item:first-child {
-  padding-block-start: 0;
-}
-
-.ds-description-list__item:last-child {
-  padding-block-end: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Term (key)
-   --------------------------------------------------------------------------- */
-
-.ds-description-list__term {
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text-secondary);
-  line-height: var(--ds-leading-normal);
-}
-
-/* ---------------------------------------------------------------------------
-   Detail (value)
-   --------------------------------------------------------------------------- */
-
-.ds-description-list__detail {
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text);
-  line-height: var(--ds-leading-normal);
-}
-
-/* ---------------------------------------------------------------------------
-   Variant: Horizontal (term and detail on same row)
-   --------------------------------------------------------------------------- */
-
-.ds-description-list--horizontal .ds-description-list__item {
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--ds-space-4);
-}
-
-.ds-description-list--horizontal .ds-description-list__term {
-  flex-shrink: 0;
-  min-width: 10rem;
-}
-
-.ds-description-list--horizontal .ds-description-list__detail {
-  flex: 1;
-  min-width: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Variant: Bordered (separator between items)
-   --------------------------------------------------------------------------- */
-
-.ds-description-list--bordered .ds-description-list__item {
-  border-block-end: 1px solid var(--ds-color-border);
-}
-
-.ds-description-list--bordered .ds-description-list__item:last-child {
-  border-block-end: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Variant: Striped (alternating background)
-   --------------------------------------------------------------------------- */
 
-.ds-description-list--striped .ds-description-list__item:nth-child(odd) {
-  background-color: var(--ds-color-bg-subtle);
-  padding-inline: var(--ds-space-3);
-  border-radius: var(--ds-radius-md);
+  /* ---------------------------------------------------------------------------
+     Item
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    padding: var(--ds-space-3) 0;
+
+    &:first-child {
+      padding-block-start: 0;
+    }
+
+    &:last-child {
+      padding-block-end: 0;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Term (key)
+     --------------------------------------------------------------------------- */
+
+  &__term {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-normal);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Detail (value)
+     --------------------------------------------------------------------------- */
+
+  &__detail {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text);
+    line-height: var(--ds-leading-normal);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Horizontal (term and detail on same row)
+     --------------------------------------------------------------------------- */
+
+  &--horizontal {
+    & .ds-description-list__item {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--ds-space-4);
+    }
+
+    & .ds-description-list__term {
+      flex-shrink: 0;
+      min-width: 10rem;
+    }
+
+    & .ds-description-list__detail {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Bordered (separator between items)
+     --------------------------------------------------------------------------- */
+
+  &--bordered {
+    & .ds-description-list__item {
+      border-block-end: 1px solid var(--ds-color-border);
+
+      &:last-child {
+        border-block-end: 0;
+      }
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Striped (alternating background)
+     --------------------------------------------------------------------------- */
+
+  &--striped {
+    & .ds-description-list__item:nth-child(odd) {
+      background-color: var(--ds-color-bg-subtle);
+      padding-inline: var(--ds-space-3);
+      border-radius: var(--ds-radius-md);
+    }
+  }
 }

package/src/components/divider.css

@@ -8,59 +8,59 @@
   border-top: 1px solid var(--ds-color-border);
   margin-block: var(--ds-space-4);
   width: 100%;
-}
 
-/* --- Vertical --- */
+  /* --- Vertical --- */
 
-.ds-divider--vertical {
-  border-top: none;
-  border-inline-start: 1px solid var(--ds-color-border);
-  display: inline-block;
-  width: auto;
-  height: auto;
-  min-height: 1rem;
-  align-self: stretch;
-  margin-block: var(--ds-space-0);
-  margin-inline: var(--ds-space-3);
-}
+  &--vertical {
+    border-top: none;
+    border-inline-start: 1px solid var(--ds-color-border);
+    display: inline-block;
+    width: auto;
+    height: auto;
+    min-height: 1rem;
+    align-self: stretch;
+    margin-block: var(--ds-space-0);
+    margin-inline: var(--ds-space-3);
+  }
 
-/* --- Subtle --- */
+  /* --- Subtle --- */
 
-.ds-divider--subtle {
-  border-color: var(--ds-color-border-subtle);
-}
+  &--subtle {
+    border-color: var(--ds-color-border-subtle);
+  }
 
-/* --- Spacious --- */
+  /* --- Spacious --- */
 
-.ds-divider--spacious {
-  margin-block: var(--ds-space-8);
-}
+  &--spacious {
+    margin-block: var(--ds-space-8);
 
-.ds-divider--spacious.ds-divider--vertical {
-  margin-block: var(--ds-space-0);
-  margin-inline: var(--ds-space-6);
-}
+    &.ds-divider--vertical {
+      margin-block: var(--ds-space-0);
+      margin-inline: var(--ds-space-6);
+    }
+  }
 
-/* --- Label (centered text with lines on either side) --- */
+  /* --- Label (centered text with lines on either side) --- */
 
-.ds-divider--label {
-  border-top: none;
-  display: flex;
-  align-items: center;
-  gap: var(--ds-space-3);
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-xs);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: var(--ds-tracking-wide);
-  white-space: nowrap;
-}
+  &--label {
+    border-top: none;
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-3);
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--ds-tracking-wide);
+    white-space: nowrap;
 
-.ds-divider--label::before,
-.ds-divider--label::after {
-  content: '';
-  flex: 1;
-  height: 0;
-  border-top: 1px solid var(--ds-color-border);
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      height: 0;
+      border-top: 1px solid var(--ds-color-border);
+    }
+  }
 }

package/src/components/drawer.css

@@ -45,179 +45,190 @@
   transition:
     opacity var(--ds-duration-normal) var(--ds-ease-default),
     visibility var(--ds-duration-normal) var(--ds-ease-default);
-}
-
-.ds-drawer--open {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* ---------------------------------------------------------------------------
-   Sliding panel
-   --------------------------------------------------------------------------- */
-
-.ds-drawer__content {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--ds-color-surface);
-  box-shadow: var(--ds-shadow-lg);
-  overflow-y: auto;
-  transition: transform var(--ds-duration-normal) var(--ds-ease-out-expo);
-}
-
-/* ==========================================================================
- * Direction: Right (default)
- * ========================================================================== */
-
-.ds-drawer__content,
-.ds-drawer--right .ds-drawer__content {
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  width: 24rem;
-  max-width: 90vw;
-  border-inline-start: 1px solid var(--ds-color-border);
-  transform: translateX(100%);
-}
-
-.ds-drawer--open .ds-drawer__content,
-.ds-drawer--right.ds-drawer--open .ds-drawer__content {
-  transform: translateX(0);
-}
-
-/* ==========================================================================
- * Direction: Left
- * ========================================================================== */
-
-.ds-drawer--left .ds-drawer__content {
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-end: auto;
-  width: 24rem;
-  max-width: 90vw;
-  border-inline-start: 0;
-  border-inline-end: 1px solid var(--ds-color-border);
-  transform: translateX(-100%);
-}
-
-.ds-drawer--left.ds-drawer--open .ds-drawer__content {
-  transform: translateX(0);
-}
-
-/* ==========================================================================
- * Direction: Bottom
- * ========================================================================== */
-
-.ds-drawer--bottom .ds-drawer__content {
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  inset-block-start: auto;
-  width: auto;
-  max-height: 90dvh;
-  border-inline-start: 0;
-  border-block-start: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
-  transform: translateY(100%);
-}
-
-.ds-drawer--bottom.ds-drawer--open .ds-drawer__content {
-  transform: translateY(0);
-}
-
-/* ==========================================================================
- * Sizes
- * ========================================================================== */
-
-.ds-drawer--sm .ds-drawer__content {
-  width: 18rem;
-}
-
-.ds-drawer--lg .ds-drawer__content {
-  width: 36rem;
-}
-
-/* Bottom drawers should not have a fixed width */
-.ds-drawer--bottom.ds-drawer--sm .ds-drawer__content,
-.ds-drawer--bottom.ds-drawer--lg .ds-drawer__content {
-  width: auto;
-}
 
-/* ==========================================================================
- * Header
- * ========================================================================== */
-
-.ds-drawer__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: var(--ds-space-4) var(--ds-space-5);
-  border-block-end: 1px solid var(--ds-color-border);
-}
-
-.ds-drawer__header h3 {
-  font-family: var(--ds-font-display);
-  font-weight: var(--ds-font-display-weight);
-  font-size: var(--ds-text-lg);
-  color: var(--ds-color-text);
-  margin: 0;
-}
-
-/* ==========================================================================
- * Close button
- * ========================================================================== */
-
-.ds-drawer__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 0;
-  border-radius: var(--ds-radius-md);
-  background-color: transparent;
-  color: var(--ds-color-text-tertiary);
-  font-size: var(--ds-text-lg);
-  line-height: var(--ds-leading-none);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition:
-    background-color var(--ds-duration-fast) var(--ds-ease-default),
-    color var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-drawer__close:hover {
-  background-color: var(--ds-color-overlay);
-  color: var(--ds-color-text);
-}
-.ds-drawer__close:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
-
-/* ==========================================================================
- * Body
- * ========================================================================== */
-
-.ds-drawer__body {
-  padding: var(--ds-space-5);
-  flex: 1;
-  overflow-y: auto;
-}
-
-/* ==========================================================================
- * Footer
- * ========================================================================== */
-
-.ds-drawer__footer {
-  padding: var(--ds-space-4) var(--ds-space-5);
-  border-block-start: 1px solid var(--ds-color-border);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--ds-space-2);
+  &--open {
+    opacity: 1;
+    visibility: visible;
+
+    & .ds-drawer__content {
+      transform: translateX(0);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Sliding panel
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--ds-color-surface);
+    box-shadow: var(--ds-shadow-lg);
+    overflow-y: auto;
+    transition: transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+    /* Direction: Right (default) */
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 1px solid var(--ds-color-border);
+    transform: translateX(100%);
+  }
+
+  /* ==========================================================================
+   * Direction: Right (explicit)
+   * ========================================================================== */
+
+  &--right &__content {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 1px solid var(--ds-color-border);
+    transform: translateX(100%);
+  }
+
+  &--right&--open &__content {
+    transform: translateX(0);
+  }
+
+  /* ==========================================================================
+   * Direction: Left
+   * ========================================================================== */
+
+  &--left &__content {
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 0;
+    border-inline-end: 1px solid var(--ds-color-border);
+    transform: translateX(-100%);
+  }
+
+  &--left&--open &__content {
+    transform: translateX(0);
+  }
+
+  /* ==========================================================================
+   * Direction: Bottom
+   * ========================================================================== */
+
+  &--bottom &__content {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: auto;
+    width: auto;
+    max-height: 90dvh;
+    border-inline-start: 0;
+    border-block-start: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
+    transform: translateY(100%);
+  }
+
+  &--bottom&--open &__content {
+    transform: translateY(0);
+  }
+
+  /* ==========================================================================
+   * Sizes
+   * ========================================================================== */
+
+  &--sm &__content {
+    width: 18rem;
+  }
+
+  &--lg &__content {
+    width: 36rem;
+  }
+
+  /* Bottom drawers should not have a fixed width */
+  &--bottom&--sm &__content,
+  &--bottom&--lg &__content {
+    width: auto;
+  }
+
+  /* ==========================================================================
+   * Header
+   * ========================================================================== */
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-end: 1px solid var(--ds-color-border);
+
+    & h3 {
+      font-family: var(--ds-font-display);
+      font-weight: var(--ds-font-display-weight);
+      font-size: var(--ds-text-lg);
+      color: var(--ds-color-text);
+      margin: 0;
+    }
+  }
+
+  /* ==========================================================================
+   * Close button
+   * ========================================================================== */
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ds-radius-md);
+    background-color: transparent;
+    color: var(--ds-color-text-tertiary);
+    font-size: var(--ds-text-lg);
+    line-height: var(--ds-leading-none);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-overlay);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* ==========================================================================
+   * Body
+   * ========================================================================== */
+
+  &__body {
+    padding: var(--ds-space-5);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  /* ==========================================================================
+   * Footer
+   * ========================================================================== */
+
+  &__footer {
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+  }
 }