@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/chip.css

@@ -33,47 +33,47 @@
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
   white-space: nowrap;
-}
 
-/* Logic chip (AND/OR toggle) */
-.ds-chip--logic {
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--ds-color-text-tertiary);
-  background: transparent;
-  border-color: var(--ds-color-border);
-  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
-}
+  /* Logic chip (AND/OR toggle) */
+  &--logic {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--ds-color-text-tertiary);
+    background: transparent;
+    border-color: var(--ds-color-border);
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 
-.ds-chip--logic:hover {
-  background: var(--ds-color-overlay-hover);
-}
+    &:hover {
+      background: var(--ds-color-overlay-hover);
+    }
+  }
 
-/* Sort chip (dashed border) */
-.ds-chip--sort {
-  border-style: dashed;
-}
+  /* Sort chip (dashed border) */
+  &--sort {
+    border-style: dashed;
+  }
 
-/* Remove button */
-.ds-chip__remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
-  min-height: 1.5rem;
-  border: none;
-  border-radius: var(--ds-radius-full);
-  background: transparent;
-  color: var(--ds-color-text-tertiary);
-  cursor: pointer;
-  transition:
-    color var(--ds-duration-fast) var(--ds-ease-default),
-    background-color var(--ds-duration-fast) var(--ds-ease-default);
-}
+  /* Remove button */
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+    border: none;
+    border-radius: var(--ds-radius-full);
+    background: transparent;
+    color: var(--ds-color-text-tertiary);
+    cursor: pointer;
+    transition:
+      color var(--ds-duration-fast) var(--ds-ease-default),
+      background-color var(--ds-duration-fast) var(--ds-ease-default);
 
-.ds-chip__remove:hover {
-  color: var(--ds-color-text);
-  background: var(--ds-color-overlay-hover);
+    &:hover {
+      color: var(--ds-color-text);
+      background: var(--ds-color-overlay-hover);
+    }
+  }
 }

package/src/components/collapsible.css

@@ -8,109 +8,105 @@
    - Content: id matching aria-controls
    ========================================================================== */
 
-/* ---------------------------------------------------------------------------
-   Container
-   --------------------------------------------------------------------------- */
-
 .ds-collapsible {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   overflow: hidden;
-}
-
-/* ---------------------------------------------------------------------------
-   Trigger (button)
-   --------------------------------------------------------------------------- */
-
-.ds-collapsible__trigger {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: var(--ds-space-4);
-  text-align: start;
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text);
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-collapsible__trigger:hover {
-  background-color: var(--ds-color-overlay);
-}
-
-.ds-collapsible__trigger: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);
-}
-
-/* ---------------------------------------------------------------------------
-   Chevron icon (CSS border-arrow)
-   --------------------------------------------------------------------------- */
-
-.ds-collapsible__icon {
-  flex-shrink: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-inline-end: 2px solid var(--ds-color-text-secondary);
-  border-block-end: 2px solid var(--ds-color-text-secondary);
-  transform: rotate(45deg);
-  margin-inline-start: var(--ds-space-3);
-  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-collapsible--open .ds-collapsible__icon {
-  transform: rotate(225deg);
-}
-
-/* ---------------------------------------------------------------------------
-   Collapsible content
-   --------------------------------------------------------------------------- */
-
-.ds-collapsible__content {
-  max-height: 0;
-  overflow: hidden;
-  transition:
-    max-height var(--ds-duration-normal) var(--ds-ease-default),
-    padding var(--ds-duration-normal) var(--ds-ease-default);
-}
-
-.ds-collapsible--open .ds-collapsible__content {
-  max-height: 80rem;
-}
-
-/* ---------------------------------------------------------------------------
-   Inner body
-   --------------------------------------------------------------------------- */
-
-.ds-collapsible__body {
-  padding: var(--ds-space-4);
-  padding-block-start: 0;
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-secondary);
-  line-height: var(--ds-leading-relaxed);
-}
-
-/* ---------------------------------------------------------------------------
-   Variant: Flush (no border, no radius)
-   --------------------------------------------------------------------------- */
-
-.ds-collapsible--flush {
-  border: 0;
-  border-radius: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Variant: Ghost (no border, transparent bg)
-   --------------------------------------------------------------------------- */
 
-.ds-collapsible--ghost {
-  border: 0;
-  background: transparent;
+  /* ---------------------------------------------------------------------------
+     Trigger (button)
+     --------------------------------------------------------------------------- */
+
+  &__trigger {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--ds-space-4);
+    text-align: start;
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-overlay);
+    }
+
+    &: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);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Chevron icon (CSS border-arrow)
+     --------------------------------------------------------------------------- */
+
+  &__icon {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-inline-end: 2px solid var(--ds-color-text-secondary);
+    border-block-end: 2px solid var(--ds-color-text-secondary);
+    transform: rotate(45deg);
+    margin-inline-start: var(--ds-space-3);
+    transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+  }
+
+  &--open &__icon {
+    transform: rotate(225deg);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Collapsible content
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    transition:
+      max-height var(--ds-duration-normal) var(--ds-ease-default),
+      padding var(--ds-duration-normal) var(--ds-ease-default);
+  }
+
+  &--open &__content {
+    max-height: 80rem;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Inner body
+     --------------------------------------------------------------------------- */
+
+  &__body {
+    padding: var(--ds-space-4);
+    padding-block-start: 0;
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-relaxed);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Flush (no border, no radius)
+     --------------------------------------------------------------------------- */
+
+  &--flush {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Ghost (no border, transparent bg)
+     --------------------------------------------------------------------------- */
+
+  &--ghost {
+    border: 0;
+    background: transparent;
+  }
 }

package/src/components/color-picker.css

@@ -0,0 +1,82 @@
+/* ==========================================================================
+   Component: Color Picker
+   Grid of color swatches for selection. CSS-only styling.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="radiogroup", aria-label="Color"
+   - Each swatch: role="radio", aria-checked="true|false", aria-label="[color name]"
+   - Keyboard: ArrowKeys to navigate, Space/Enter to select
+
+   Usage:
+     <div class="ds-color-picker" role="radiogroup" aria-label="Color">
+       <button class="ds-color-picker__swatch ds-color-picker__swatch--active"
+               role="radio" aria-checked="true" aria-label="Red"
+               style="--swatch-color: #ef4444"></button>
+       <button class="ds-color-picker__swatch"
+               role="radio" aria-checked="false" aria-label="Blue"
+               style="--swatch-color: #3b82f6"></button>
+     </div>
+
+   Modifiers:
+     .ds-color-picker--sm    — Smaller swatches
+     .ds-color-picker--lg    — Larger swatches
+   ========================================================================== */
+
+.ds-color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-space-1-5);
+
+  &__swatch {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--ds-radius-md);
+    border: 2px solid transparent;
+    background-color: var(--swatch-color);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition:
+      border-color var(--ds-duration-fast) var(--ds-ease-default),
+      transform var(--ds-duration-fast) var(--ds-ease-default),
+      box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      transform: scale(1.1);
+      border-color: 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);
+    }
+
+    &--active {
+      border-color: var(--ds-color-text);
+      box-shadow: 0 0 0 2px var(--ds-color-surface), 0 0 0 4px var(--swatch-color);
+    }
+  }
+
+  /* --- Small variant --- */
+  &--sm &__swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--ds-radius-sm);
+  }
+
+  &--sm {
+    gap: var(--ds-space-1);
+  }
+
+  /* --- Large variant --- */
+  &--lg &__swatch {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ds-radius-lg);
+  }
+
+  &--lg {
+    gap: var(--ds-space-2);
+  }
+}