@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/input.css

@@ -46,144 +46,223 @@
   height: var(--ds-size-3);
 }
 
-/* Hover */
-.ds-input:hover,
-.ds-textarea:hover,
-.ds-select:hover {
-  border-color: var(--ds-color-border-hover);
-}
+.ds-input {
+  /* Hover */
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
 
-/* Focus — box-shadow ring instead of outline.
-   Inputs always trigger :focus-visible (browser heuristic for text entry),
-   so outline creates unavoidable double-border with offset.
-   box-shadow follows border-radius perfectly and has no gap. */
-.ds-input:focus-visible,
-.ds-textarea:focus-visible,
-.ds-select:focus-visible {
-  border-color: var(--ds-ring-color);
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
+  /* Focus — box-shadow ring instead of outline.
+     Inputs always trigger :focus-visible (browser heuristic for text entry),
+     so outline creates unavoidable double-border with offset.
+     box-shadow follows border-radius perfectly and has no gap. */
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
 
-.ds-input::placeholder,
-.ds-textarea::placeholder {
-  color: var(--ds-color-text-tertiary);
-}
+  &::placeholder {
+    color: var(--ds-color-text-tertiary);
+  }
 
-/* States — error: border + ring match the semantic color */
-.ds-input--error,
-.ds-textarea--error {
-  border-color: var(--ds-color-error);
-}
-.ds-input--error:hover,
-.ds-textarea--error:hover {
-  border-color: var(--ds-color-error);
-}
-.ds-input--error:focus-visible,
-.ds-textarea--error:focus-visible {
-  border-color: var(--ds-color-error);
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
-}
+  /* States — error: border + ring match the semantic color */
+  &--error {
+    border-color: var(--ds-color-error);
 
-/* States — success: border + ring match the semantic color */
-.ds-input--success {
-  border-color: var(--ds-color-success);
-}
-.ds-input--success:hover {
-  border-color: var(--ds-color-success);
-}
-.ds-input--success:focus-visible {
-  border-color: var(--ds-color-success);
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-success);
-}
+    &:hover {
+      border-color: var(--ds-color-error);
+    }
 
-/* Sizes */
-.ds-input--xs,
-.ds-select--xs {
-  height: var(--ds-size-1);
-  padding: 0 var(--ds-space-1-5);
-  font-size: var(--ds-text-xs);
-  border-radius: var(--ds-radius-sm);
-}
+    &:focus-visible {
+      border-color: var(--ds-color-error);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
+    }
+  }
 
-.ds-input--sm,
-.ds-select--sm {
-  height: var(--ds-size-2);
-  padding: 0 var(--ds-space-2);
-  font-size: var(--ds-text-sm);
-  border-radius: var(--ds-radius-md);
-}
+  /* States — success: border + ring match the semantic color */
+  &--success {
+    border-color: var(--ds-color-success);
 
-.ds-input--lg,
-.ds-select--lg {
-  height: var(--ds-size-4);
-  padding: 0 var(--ds-space-4);
-  font-size: var(--ds-text-base);
-}
+    &:hover {
+      border-color: var(--ds-color-success);
+    }
 
-.ds-select--lg {
-  padding-inline-end: var(--ds-space-8);
+    &:focus-visible {
+      border-color: var(--ds-color-success);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-success);
+    }
+  }
+
+  /* Sizes */
+  &--xs {
+    height: var(--ds-size-1);
+    padding: 0 var(--ds-space-1-5);
+    font-size: var(--ds-text-xs);
+    border-radius: var(--ds-radius-sm);
+  }
+
+  &--sm {
+    height: var(--ds-size-2);
+    padding: 0 var(--ds-space-2);
+    font-size: var(--ds-text-sm);
+    border-radius: var(--ds-radius-md);
+  }
+
+  &--lg {
+    height: var(--ds-size-4);
+    padding: 0 var(--ds-space-4);
+    font-size: var(--ds-text-base);
+  }
+
+  /* --- Layout Modifiers ---
+     Override default width/display/chrome assumptions. */
+
+  /* Flush — naked input inside a styled container.
+     No border, no background, no padding, no focus ring.
+     The container handles visual chrome. */
+  &--flush {
+    background: transparent;
+    border: none;
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    height: auto;
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &:focus-visible {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* Inline — auto-width for use in flex rows */
+  &--inline {
+    width: auto;
+    display: inline-flex;
+  }
 }
 
-/* Textarea */
 .ds-textarea {
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  &::placeholder {
+    color: var(--ds-color-text-tertiary);
+  }
+
+  /* States — error */
+  &--error {
+    border-color: var(--ds-color-error);
+
+    &:hover {
+      border-color: var(--ds-color-error);
+    }
+
+    &:focus-visible {
+      border-color: var(--ds-color-error);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
+    }
+  }
+
+  /* Textarea */
   min-height: 6rem;
   padding: var(--ds-space-2-5) var(--ds-space-4);
   height: auto;
   resize: vertical;
 }
 
-/* Select */
 .ds-select {
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  /* Select */
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--ds-space-3) center;
   padding-inline-end: var(--ds-space-8);
-}
 
-/* --- Layout Modifiers ---
-   Override default width/display/chrome assumptions. */
+  /* Sizes */
+  &--xs {
+    height: var(--ds-size-1);
+    padding: 0 var(--ds-space-1-5);
+    font-size: var(--ds-text-xs);
+    border-radius: var(--ds-radius-sm);
+  }
 
-/* Full width (opt-in for select, already default for input/textarea) */
-.ds-select--full {
-  width: 100%;
-}
+  &--sm {
+    height: var(--ds-size-2);
+    padding: 0 var(--ds-space-2);
+    font-size: var(--ds-text-sm);
+    border-radius: var(--ds-radius-md);
+  }
 
-/* Flush — naked input inside a styled container.
-   No border, no background, no padding, no focus ring.
-   The container handles visual chrome. */
-.ds-input--flush {
-  background: transparent;
-  border: none;
-  padding: 0;
-  border-radius: 0;
-  box-shadow: none;
-  height: auto;
-}
-.ds-input--flush:hover {
-  border-color: transparent;
-}
-.ds-input--flush:focus-visible {
-  border-color: transparent;
-  box-shadow: none;
-}
+  &--lg {
+    height: var(--ds-size-4);
+    padding: 0 var(--ds-space-4);
+    font-size: var(--ds-text-base);
+    padding-inline-end: var(--ds-space-8);
+  }
 
-/* Inline — auto-width for use in flex rows */
-.ds-input--inline {
-  width: auto;
-  display: inline-flex;
+  /* Full width (opt-in for select, already default for input/textarea) */
+  &--full {
+    width: 100%;
+  }
 }
 
-/* --- Input Group: icon-right ---
-   Move icon to the right side, flip input padding. */
-.ds-input-group--icon-right .ds-input-group__icon {
-  inset-inline-start: auto;
-  inset-inline-end: var(--ds-space-3);
-}
-.ds-input-group--icon-right .ds-input {
-  padding-inline-start: var(--ds-space-4);
-  padding-inline-end: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+/* --- Input Group ---
+   Wrapper for input with leading icon.
+   Icon sits inside the input via absolute positioning. */
+.ds-input-group {
+  position: relative;
+
+  &__icon {
+    position: absolute;
+    inset-inline-start: var(--ds-space-3);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ds-color-text-tertiary);
+    pointer-events: none;
+  }
+
+  & .ds-input {
+    padding-inline-start: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  }
+
+  /* --- Input Group: icon-right ---
+     Move icon to the right side, flip input padding. */
+  &--icon-right {
+    & .ds-input-group__icon {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ds-space-3);
+    }
+
+    & .ds-input {
+      padding-inline-start: var(--ds-space-4);
+      padding-inline-end: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+    }
+  }
 }
 
 /* Help text */
@@ -191,8 +270,9 @@
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
   margin-block-start: var(--ds-space-1-5);
+
+  &--error { color: var(--ds-color-error); }
 }
-.ds-help--error { color: var(--ds-color-error); }
 
 /* Form Group (legacy — prefer ds-form) */
 .ds-form-group { margin-block-end: var(--ds-space-4); }
@@ -201,35 +281,14 @@
    Vertical form layout: comfortable spacing between fields (24px),
    extra breathing room before the action area (32px).
    Use ds-form__actions on the button/submit wrapper. */
-.ds-form > * + * {
-  margin-block-start: var(--ds-space-6);
-}
+.ds-form {
+  & > * + * {
+    margin-block-start: var(--ds-space-6);
+  }
 
-.ds-form__actions {
-  margin-block-start: var(--ds-space-8);
-}
-
-/* --- Input Group ---
-   Wrapper for input with leading icon.
-   Icon sits inside the input via absolute positioning. */
-.ds-input-group {
-  position: relative;
-}
-
-.ds-input-group__icon {
-  position: absolute;
-  inset-inline-start: var(--ds-space-3);
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ds-color-text-tertiary);
-  pointer-events: none;
-}
-
-.ds-input-group .ds-input {
-  padding-inline-start: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  &__actions {
+    margin-block-start: var(--ds-space-8);
+  }
 }
 
 /* Checkbox / Radio */
@@ -241,12 +300,12 @@
   cursor: pointer;
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
-}
-.ds-checkbox input,
-.ds-radio input {
-  accent-color: var(--ds-color-interactive);
-  width: 1rem;
-  height: 1rem;
-  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
-  min-height: 1.5rem;
+
+  & input {
+    accent-color: var(--ds-color-interactive);
+    width: 1rem;
+    height: 1rem;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+  }
 }

package/src/components/kbd.css

@@ -32,12 +32,12 @@
   color: var(--ds-color-text-secondary);
   line-height: 1;
   vertical-align: baseline;
-}
 
-/* Large variant */
-.ds-kbd--lg {
-  font-size: var(--ds-text-sm);
-  padding: var(--ds-space-1) var(--ds-space-2);
+  /* Large variant */
+  &--lg {
+    font-size: var(--ds-text-sm);
+    padding: var(--ds-space-1) var(--ds-space-2);
+  }
 }
 
 /* Key group (for combos like Cmd + K) */
@@ -45,10 +45,10 @@
   display: inline-flex;
   align-items: center;
   gap: var(--ds-space-1);
-}
 
-/* Separator between keys */
-.ds-kbd-group__separator {
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
+  /* Separator between keys */
+  &__separator {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+  }
 }

package/src/components/modal.css

@@ -27,108 +27,110 @@
   transition:
     opacity var(--ds-duration-slow) var(--ds-ease-default),
     visibility var(--ds-duration-slow) var(--ds-ease-default);
-}
 
-.ds-modal[open],
-.ds-modal--open {
-  opacity: 1;
-  visibility: visible;
-}
+  &[open],
+  &--open {
+    opacity: 1;
+    visibility: visible;
+  }
 
-.ds-modal__content {
-  width: 100%;
-  max-width: 28rem;
-  max-height: 90dvh;
-  background-color: var(--ds-color-surface);
-  border: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-xl);
-  box-shadow: var(--ds-shadow-lg);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transform: scale(0.96);
-  transition: transform var(--ds-duration-slow) var(--ds-ease-out-expo);
-}
+  &__content {
+    width: 100%;
+    max-width: 28rem;
+    max-height: 90dvh;
+    background-color: var(--ds-color-surface);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl);
+    box-shadow: var(--ds-shadow-lg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.96);
+    transition: transform var(--ds-duration-slow) var(--ds-ease-out-expo);
+  }
 
-.ds-modal[open] .ds-modal__content,
-.ds-modal--open .ds-modal__content {
-  transform: scale(1);
-}
+  &[open] .ds-modal__content,
+  &--open .ds-modal__content {
+    transform: scale(1);
+  }
 
-.ds-modal__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: var(--ds-space-4) var(--ds-space-5);
-  border-block-end: 1px solid var(--ds-color-border);
-}
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-end: 1px solid var(--ds-color-border);
 
-.ds-modal__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);
-}
+    & 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);
+    }
 
-.ds-modal__header p {
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-tertiary);
-  margin-block-start: var(--ds-space-1);
-}
+    & p {
+      font-size: var(--ds-text-sm);
+      color: var(--ds-color-text-tertiary);
+      margin-block-start: var(--ds-space-1);
+    }
+  }
 
-.ds-modal__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  color: var(--ds-color-text-tertiary);
-  border-radius: var(--ds-radius-md);
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
-  flex-shrink: 0;
-}
-.ds-modal__close:hover {
-  color: var(--ds-color-text);
-}
-.ds-modal__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);
-}
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: var(--ds-color-text-tertiary);
+    border-radius: var(--ds-radius-md);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    flex-shrink: 0;
 
-.ds-modal__body {
-  padding: var(--ds-space-5);
-  overflow-y: auto;
-  flex: 1;
-}
+    &:hover {
+      color: var(--ds-color-text);
+    }
 
-.ds-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--ds-space-2);
-  padding: var(--ds-space-4) var(--ds-space-5);
-  border-block-start: 1px solid var(--ds-color-border);
-}
+    &: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);
+    }
+  }
 
-/* Size variants */
-.ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
-.ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
+  &__body {
+    padding: var(--ds-space-5);
+    overflow-y: auto;
+    flex: 1;
+  }
 
-/* Fullscreen on mobile */
-@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
-  .ds-modal--fullscreen-mobile .ds-modal__content {
-    max-width: none;
-    max-height: none;
-    width: 100%;
-    height: 100dvh;
-    margin: 0;
-    border-radius: 0;
-    border: none;
-    box-shadow: none;
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
   }
 
-  .ds-modal--fullscreen-mobile {
-    padding: 0;
+  /* Size variants */
+  &--md .ds-modal__content { max-width: var(--ds-container-md); }
+  &--lg .ds-modal__content { max-width: var(--ds-container-lg); }
+
+  /* Fullscreen on mobile */
+  @media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+    &--fullscreen-mobile .ds-modal__content {
+      max-width: none;
+      max-height: none;
+      width: 100%;
+      height: 100dvh;
+      margin: 0;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+    }
+
+    &--fullscreen-mobile {
+      padding: 0;
+    }
   }
 }