@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/breadcrumb.css

@@ -37,66 +37,66 @@
   list-style: none;
   margin: 0;
   padding: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Item
-   --------------------------------------------------------------------------- */
-
-.ds-breadcrumb__item {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-space-1);
-}
-
-/* Separator — rendered via ::after on every item except the last */
-.ds-breadcrumb__item:not(:last-child)::after {
-  content: "/";
-  color: var(--ds-color-text-tertiary);
-  flex-shrink: 0;
-  user-select: none;
-  pointer-events: none;
-}
-
-/* ---------------------------------------------------------------------------
-   Link
-   --------------------------------------------------------------------------- */
-
-.ds-breadcrumb__link {
-  color: var(--ds-color-text-tertiary);
-  text-decoration: none;
-  transition: color var(--ds-duration-fast) var(--ds-ease-out);
-}
-
-.ds-breadcrumb__link:hover {
-  color: var(--ds-color-text-secondary);
-}
-
-.ds-breadcrumb__link:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-  border-radius: var(--ds-radius-sm);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
-
-/* ---------------------------------------------------------------------------
-   Current page (non-interactive)
-   --------------------------------------------------------------------------- */
-
-.ds-breadcrumb__current {
-  color: var(--ds-color-text);
-  font-weight: var(--ds-weight-medium);
-}
-
-/* ---------------------------------------------------------------------------
-   Modifier: Compact
-   --------------------------------------------------------------------------- */
-
-.ds-breadcrumb--compact {
-  gap: var(--ds-space-0-5, 0.125rem);
-  font-size: var(--ds-text-xs);
-}
 
-.ds-breadcrumb--compact .ds-breadcrumb__item {
-  gap: var(--ds-space-0-5, 0.125rem);
+  /* ---------------------------------------------------------------------------
+     Item
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-1);
+
+    /* Separator — rendered via ::after on every item except the last */
+    &:not(:last-child)::after {
+      content: "/";
+      color: var(--ds-color-text-tertiary);
+      flex-shrink: 0;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Link
+     --------------------------------------------------------------------------- */
+
+  &__link {
+    color: var(--ds-color-text-tertiary);
+    text-decoration: none;
+    transition: color var(--ds-duration-fast) var(--ds-ease-out);
+
+    &:hover {
+      color: var(--ds-color-text-secondary);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      border-radius: var(--ds-radius-sm);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Current page (non-interactive)
+     --------------------------------------------------------------------------- */
+
+  &__current {
+    color: var(--ds-color-text);
+    font-weight: var(--ds-weight-medium);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Modifier: Compact
+     --------------------------------------------------------------------------- */
+
+  &--compact {
+    gap: var(--ds-space-0-5, 0.125rem);
+    font-size: var(--ds-text-xs);
+
+    & .ds-breadcrumb__item {
+      gap: var(--ds-space-0-5, 0.125rem);
+    }
+  }
 }

package/src/components/button.css

@@ -30,167 +30,175 @@
   /* Default: inverted (dark bg in light mode, light bg in dark mode) */
   background-color: var(--ds-color-inverted);
   color: var(--ds-color-on-inverted);
-}
-
-.ds-btn:hover {
-  opacity: 0.9;
-}
-
-.ds-btn: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);
-}
-
-.ds-btn:disabled,
-.ds-btn[aria-disabled="true"] {
-  opacity: var(--ds-opacity-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* --- Variants --- */
-
-.ds-btn--secondary {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-  border-color: var(--ds-color-border);
-}
-.ds-btn--secondary:hover {
-  border-color: var(--ds-color-border-hover);
-  background-color: var(--ds-color-surface);
-  opacity: 1;
-}
-
-.ds-btn--outline {
-  background-color: transparent;
-  color: var(--ds-color-text-secondary);
-  border-color: var(--ds-color-border);
-}
-.ds-btn--outline:hover {
-  color: var(--ds-color-text);
-  border-color: var(--ds-color-border-hover);
-  opacity: 1;
-}
-
-.ds-btn--ghost {
-  background-color: transparent;
-  color: var(--ds-color-text-secondary);
-}
-.ds-btn--ghost:hover {
-  color: var(--ds-color-text);
-  background-color: var(--ds-color-bg-elevated);
-  opacity: 1;
-}
-
-.ds-btn--danger {
-  background-color: var(--ds-color-error-subtle);
-  color: var(--ds-color-error);
-  border-color: var(--ds-color-error-border);
-}
-.ds-btn--danger:hover {
-  background-color: var(--ds-color-error);
-  color: var(--ds-color-on-inverted);
-  opacity: 1;
-}
-
-.ds-btn--success {
-  background-color: var(--ds-color-success-subtle);
-  color: var(--ds-color-success);
-  border-color: var(--ds-color-success-border);
-}
-.ds-btn--success:hover {
-  background-color: var(--ds-color-success);
-  color: var(--ds-color-on-inverted);
-  opacity: 1;
-}
-
-/* --- Sizes --- */
 
-.ds-btn--xs {
-  height: var(--ds-size-1);
-  padding: 0 var(--ds-space-2);
-  font-size: var(--ds-text-xs);
-  gap: var(--ds-space-1);
-  border-radius: var(--ds-radius-md);
-}
-
-.ds-btn--sm {
-  height: var(--ds-size-2);
-  padding: 0 var(--ds-space-3);
-  font-size: var(--ds-text-sm);
-  gap: var(--ds-space-1-5);
-  border-radius: var(--ds-radius-md);
-}
-
-.ds-btn--lg {
-  height: var(--ds-size-4);
-  padding: 0 var(--ds-space-6);
-  font-size: var(--ds-text-base);
-  border-radius: var(--ds-radius-lg);
-}
-
-/* --- Pill (rounded-full, like hero CTAs) --- */
-.ds-btn--pill {
-  border-radius: var(--ds-radius-full);
-  padding: 0 var(--ds-space-6);
-}
-
-.ds-btn--pill.ds-btn--xs {
-  padding: 0 var(--ds-space-3);
-}
-
-.ds-btn--pill.ds-btn--sm {
-  padding: 0 var(--ds-space-5);
-}
-
-/* --- Full Width --- */
-.ds-btn--full { width: 100%; }
-
-/* --- Icon Only --- */
-.ds-btn--icon {
-  padding: 0;
-  width: var(--ds-size-3);
-  height: var(--ds-size-3);
-  border-radius: var(--ds-radius-md);
-}
-
-.ds-btn--icon.ds-btn--xs {
-  width: var(--ds-size-1);
-  height: var(--ds-size-1);
-}
-
-.ds-btn--icon.ds-btn--sm {
-  width: var(--ds-size-2);
-  height: var(--ds-size-2);
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &: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);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: var(--ds-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* --- Variants --- */
+
+  &--secondary {
+    background-color: var(--ds-color-bg-elevated);
+    color: var(--ds-color-text);
+    border-color: var(--ds-color-border);
+
+    &:hover {
+      border-color: var(--ds-color-border-hover);
+      background-color: var(--ds-color-surface);
+      opacity: 1;
+    }
+  }
+
+  &--outline {
+    background-color: transparent;
+    color: var(--ds-color-text-secondary);
+    border-color: var(--ds-color-border);
+
+    &:hover {
+      color: var(--ds-color-text);
+      border-color: var(--ds-color-border-hover);
+      opacity: 1;
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    color: var(--ds-color-text-secondary);
+
+    &:hover {
+      color: var(--ds-color-text);
+      background-color: var(--ds-color-bg-elevated);
+      opacity: 1;
+    }
+  }
+
+  &--danger {
+    background-color: var(--ds-color-error-subtle);
+    color: var(--ds-color-error);
+    border-color: var(--ds-color-error-border);
+
+    &:hover {
+      background-color: var(--ds-color-error);
+      color: var(--ds-color-on-inverted);
+      opacity: 1;
+    }
+  }
+
+  &--success {
+    background-color: var(--ds-color-success-subtle);
+    color: var(--ds-color-success);
+    border-color: var(--ds-color-success-border);
+
+    &:hover {
+      background-color: var(--ds-color-success);
+      color: var(--ds-color-on-inverted);
+      opacity: 1;
+    }
+  }
+
+  /* --- Sizes --- */
+
+  &--xs {
+    height: var(--ds-size-1);
+    padding: 0 var(--ds-space-2);
+    font-size: var(--ds-text-xs);
+    gap: var(--ds-space-1);
+    border-radius: var(--ds-radius-md);
+  }
+
+  &--sm {
+    height: var(--ds-size-2);
+    padding: 0 var(--ds-space-3);
+    font-size: var(--ds-text-sm);
+    gap: var(--ds-space-1-5);
+    border-radius: var(--ds-radius-md);
+  }
+
+  &--lg {
+    height: var(--ds-size-4);
+    padding: 0 var(--ds-space-6);
+    font-size: var(--ds-text-base);
+    border-radius: var(--ds-radius-lg);
+  }
+
+  /* --- Pill (rounded-full, like hero CTAs) --- */
+  &--pill {
+    border-radius: var(--ds-radius-full);
+    padding: 0 var(--ds-space-6);
+
+    &.ds-btn--xs {
+      padding: 0 var(--ds-space-3);
+    }
+
+    &.ds-btn--sm {
+      padding: 0 var(--ds-space-5);
+    }
+  }
+
+  /* --- Full Width --- */
+  &--full { width: 100%; }
+
+  /* --- Icon Only --- */
+  &--icon {
+    padding: 0;
+    width: var(--ds-size-3);
+    height: var(--ds-size-3);
+    border-radius: var(--ds-radius-md);
+
+    &.ds-btn--xs {
+      width: var(--ds-size-1);
+      height: var(--ds-size-1);
+    }
+
+    &.ds-btn--sm {
+      width: var(--ds-size-2);
+      height: var(--ds-size-2);
+    }
+  }
+
+  /* --- Loading spinner --- */
+  &--loading {
+    position: relative;
+    color: transparent !important;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-inline-end-color: transparent;
+      border-radius: var(--ds-radius-full);
+      animation: ds-btn-spin 0.6s linear infinite;
+      color: var(--ds-color-on-inverted);
+    }
+  }
 }
 
 /* --- Button Group --- */
 .ds-btn-group {
   display: inline-flex;
+
+  & .ds-btn { border-radius: 0; }
+  & .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
+  & .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
+  & .ds-btn + .ds-btn { margin-inline-start: -1px; }
 }
-.ds-btn-group .ds-btn { border-radius: 0; }
-.ds-btn-group .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
-.ds-btn-group .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
-.ds-btn-group .ds-btn + .ds-btn { margin-inline-start: -1px; }
-
-/* --- Loading spinner --- */
-.ds-btn--loading {
-  position: relative;
-  color: transparent !important;
-  pointer-events: none;
-}
-.ds-btn--loading::after {
-  content: '';
-  position: absolute;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-inline-end-color: transparent;
-  border-radius: var(--ds-radius-full);
-  animation: ds-btn-spin 0.6s linear infinite;
-  color: var(--ds-color-on-inverted);
-}
+
 @keyframes ds-btn-spin {
   to { transform: rotate(360deg); }
 }

package/src/components/card.css

@@ -9,87 +9,109 @@
   border-radius: var(--ds-radius-xl);
   overflow: hidden;
   transition: all var(--ds-duration-normal) var(--ds-ease-default);
-}
+  container-type: inline-size;
 
-/* Interactive card — lifts on hover (like ProjectCard) */
-.ds-card--interactive {
-  cursor: pointer;
-}
-.ds-card--interactive:hover {
-  border-color: var(--ds-color-border-hover);
-  box-shadow: var(--ds-shadow-lg);
-  transform: translateY(-4px);
-}
-.ds-card--interactive:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-.ds-card--interactive:hover:focus-visible {
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color), var(--ds-shadow-lg);
-}
+  /* Container query: stack body content when card is narrow */
+  @container (max-width: 200px) {
+    & .ds-card__body {
+      display: flex;
+      flex-direction: column;
+    }
 
-/* Elevated card — visible shadow */
-.ds-card--elevated {
-  background-color: var(--ds-color-bg-elevated);
-  box-shadow: var(--ds-shadow-lg);
-}
+    & .ds-card__footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
 
-/* Hover card — border highlight */
-.ds-card--hover:hover {
-  border-color: var(--ds-color-border-active);
-}
+  /* Interactive card — lifts on hover (like ProjectCard) */
+  &--interactive {
+    cursor: pointer;
 
-.ds-card__header {
-  padding: var(--ds-space-5);
-  border-block-end: 1px solid var(--ds-color-border);
-}
+    &:hover {
+      border-color: var(--ds-color-border-hover);
+      box-shadow: var(--ds-shadow-lg);
+      transform: translateY(-4px);
+    }
 
-.ds-card__header h3,
-.ds-card__header .ds-card__title {
-  font-family: var(--ds-font-display);
-  font-weight: var(--ds-font-display-weight);
-  font-size: var(--ds-text-lg);
-  letter-spacing: var(--ds-tracking-tight);
-  color: var(--ds-color-text);
-}
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
 
-.ds-card__description {
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-tertiary);
-  margin-block-start: var(--ds-space-1);
-}
+    &:hover:focus-visible {
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color), var(--ds-shadow-lg);
+    }
+  }
 
-.ds-card__body {
-  padding: var(--ds-space-5);
-}
+  /* Elevated card — visible shadow */
+  &--elevated {
+    background-color: var(--ds-color-bg-elevated);
+    box-shadow: var(--ds-shadow-lg);
+  }
 
-.ds-card__footer {
-  padding: var(--ds-space-4) var(--ds-space-5);
-  border-block-start: 1px solid var(--ds-color-border);
-  display: flex;
-  align-items: center;
-  gap: var(--ds-space-2);
-}
+  /* Hover card — border highlight */
+  &--hover:hover {
+    border-color: var(--ds-color-border-active);
+  }
 
-.ds-card__media {
-  width: 100%;
-  aspect-ratio: 16/10;
-  object-fit: cover;
-  background-color: var(--ds-color-bg-elevated);
-}
-.ds-card__media--square { aspect-ratio: 1; }
-.ds-card__media--video { aspect-ratio: 16/9; }
-.ds-card__media--auto { aspect-ratio: auto; }
-
-/* Compact */
-.ds-card--compact .ds-card__header,
-.ds-card--compact .ds-card__body,
-.ds-card--compact .ds-card__footer {
-  padding: var(--ds-space-3) var(--ds-space-4);
-}
+  &__header {
+    padding: var(--ds-space-5);
+    border-block-end: 1px solid var(--ds-color-border);
+
+    & h3,
+    & .ds-card__title {
+      font-family: var(--ds-font-display);
+      font-weight: var(--ds-font-display-weight);
+      font-size: var(--ds-text-lg);
+      letter-spacing: var(--ds-tracking-tight);
+      color: var(--ds-color-text);
+    }
+  }
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-tertiary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  &__body {
+    padding: var(--ds-space-5);
+  }
 
-/* Flush — no internal dividers */
-.ds-card--flush .ds-card__header { border-block-end: none; }
-.ds-card--flush .ds-card__footer { border-block-start: none; }
+  &__footer {
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+  }
+
+  &__media {
+    width: 100%;
+    aspect-ratio: 16/10;
+    object-fit: cover;
+    background-color: var(--ds-color-bg-elevated);
+
+    &--square { aspect-ratio: 1; }
+    &--video { aspect-ratio: 16/9; }
+    &--auto { aspect-ratio: auto; }
+  }
+
+  /* Compact */
+  &--compact {
+    & .ds-card__header,
+    & .ds-card__body,
+    & .ds-card__footer {
+      padding: var(--ds-space-3) var(--ds-space-4);
+    }
+  }
+
+  /* Flush — no internal dividers */
+  &--flush {
+    & .ds-card__header { border-block-end: none; }
+    & .ds-card__footer { border-block-start: none; }
+  }
+}
 
 /* Stat card — extracted to stat-card.css */