@digiko-npm/designsystem 0.9.6 → 0.9.8

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.6 */
+/* @ds/designsystem v0.9.8 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -68,6 +68,8 @@
   /* --- Interactive --- */
   --ds-color-interactive: #3f3f46;
   --ds-color-interactive-hover: #27272a;
+  --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
+  --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
 
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.5);
@@ -101,7 +103,7 @@
   --ds-color-bg: #09090b;
   --ds-color-bg-subtle: #0f0f11;
   --ds-color-bg-muted: #18181b;
-  --ds-color-bg-elevated: #1c1c20;
+  --ds-color-bg-elevated: #27272a;
 
   --ds-color-surface: #0f0f11;
   --ds-color-surface-hover: #18181b;
@@ -132,6 +134,8 @@
   /* --- Interactive --- */
   --ds-color-interactive: #d4d4d8;
   --ds-color-interactive-hover: #fafafa;
+  --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
+  --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
 
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.7);
@@ -331,6 +335,10 @@
   --ds-size-3: 2.5rem;
   --ds-size-4: 3rem;
 
+  /* --- Component-Specific Heights --- */
+  --ds-search-bar-height: 3.5rem;
+  --ds-toolbar-row-height: 2.5rem;
+
   /* --- Section Padding (responsive, generous) --- */
   --ds-section-padding: clamp(80px, 12vw, 160px);
 
@@ -2857,7 +2865,7 @@ hr {
     height: 1.25rem;
     border: none;
     background: none;
-    border-radius: var(--ds-radius-default);
+    border-radius: var(--ds-radius-md);
     color: var(--ds-color-text-tertiary);
     cursor: pointer;
     font-size: var(--ds-text-xs);
@@ -3099,7 +3107,7 @@ hr {
       border: 2px solid var(--ds-color-surface);
       box-shadow: var(--ds-shadow-sm);
       cursor: pointer;
-      transition: transform var(--ds-duration-fast) var(--ds-ease);
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
     }
 .ds-slider input[type="range"]::-moz-range-thumb {
 
@@ -3110,7 +3118,7 @@ hr {
       border: 2px solid var(--ds-color-surface);
       box-shadow: var(--ds-shadow-sm);
       cursor: pointer;
-      transition: transform var(--ds-duration-fast) var(--ds-ease);
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
     }
 .ds-slider input[type="range"]:hover::-webkit-slider-thumb {
 
@@ -3723,9 +3731,9 @@ hr {
   }
 .ds-tag--purple {
 
-    background-color: var(--ds-color-purple-subtle, var(--ds-color-bg-elevated));
-    color: var(--ds-color-purple, var(--ds-color-interactive));
-    border-color: var(--ds-color-purple-border, var(--ds-color-purple, var(--ds-color-interactive)));
+    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-elevated));
+    color: var(--ds-color-accent-purple, var(--ds-color-interactive));
+    border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
   }
 .ds-tag--removable {
 
@@ -3799,7 +3807,7 @@ hr {
 
 
 /* Tags used as <button> for selection — no focus ring on click */
-button.ds-tag:focus-visible {
+.ds-tag: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);
@@ -3854,7 +3862,7 @@ button.ds-tag:focus-visible {
 .ds-chip--logic {
 
     cursor: pointer;
-    font-weight: 600;
+    font-weight: var(--ds-weight-semibold);
     color: var(--ds-color-text-tertiary);
     background: transparent;
     border-color: var(--ds-color-border);
@@ -6317,7 +6325,7 @@ button.ds-tag:focus-visible {
     height: 2.25rem;
     border-radius: var(--ds-radius-full);
     background: var(--ds-color-text);
-    color: var(--ds-color-bg-base);
+    color: var(--ds-color-bg);
   }
 
 
@@ -6490,7 +6498,7 @@ button.ds-tag:focus-visible {
     height: 1rem;
     padding: 0 0.25rem;
     font-size: 0.625rem;
-    font-weight: 600;
+    font-weight: var(--ds-weight-semibold);
     line-height: 1;
     color: var(--ds-color-on-inverted);
     background: var(--ds-color-interactive);
@@ -7802,6 +7810,8 @@ button.ds-tag:focus-visible {
     inset-inline-start: 0;
     z-index: var(--ds-z-dropdown);
     min-width: 12rem;
+    display: flex;
+    flex-direction: column;
     padding-block: var(--ds-space-1-5);
     background-color: var(--ds-color-surface);
     border: 1px solid var(--ds-color-border);
@@ -7860,11 +7870,7 @@ button.ds-tag:focus-visible {
 .ds-dropdown__menu--lg {
  min-width: 20rem; }
 .ds-dropdown__menu--full {
-
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-    }
+ width: 100%; }
 .ds-dropdown__menu--auto {
  min-width: auto; }
 .ds-dropdown__item {
@@ -8019,8 +8025,8 @@ button.ds-tag:focus-visible {
     visibility: hidden;
     transform: scale(0.96);
     transition:
-      opacity var(--ds-duration-fast) var(--ds-ease),
-      visibility var(--ds-duration-fast) var(--ds-ease),
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      visibility var(--ds-duration-fast) var(--ds-ease-default),
       transform var(--ds-duration-fast) var(--ds-ease-out-expo);
 
     /* Size: small */
@@ -8319,8 +8325,8 @@ button.ds-tag:focus-visible {
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity var(--ds-duration-fast) var(--ds-ease),
-    visibility var(--ds-duration-fast) var(--ds-ease);
+    opacity var(--ds-duration-fast) var(--ds-ease-default),
+    visibility var(--ds-duration-fast) var(--ds-ease-default);
 
   /* Open state */
   
@@ -8447,8 +8453,8 @@ button.ds-tag:focus-visible {
     font-size: var(--ds-text-sm);
     color: var(--ds-color-text-secondary);
     transition:
-      background-color var(--ds-duration-fast) var(--ds-ease),
-      color var(--ds-duration-fast) var(--ds-ease);
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
 
     /* Item hover & active states */
     
@@ -9392,7 +9398,7 @@ button.ds-tag:focus-visible {
     border: none;
     border-radius: var(--ds-radius-full);
     background-color: rgba(255, 255, 255, 0.15);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-xl);
     cursor: pointer;
     transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -9424,7 +9430,7 @@ button.ds-tag:focus-visible {
     border: none;
     border-radius: var(--ds-radius-full);
     background-color: rgba(255, 255, 255, 0.15);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-2xl);
     cursor: pointer;
     transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -9469,7 +9475,7 @@ button.ds-tag:focus-visible {
     padding: var(--ds-space-1) var(--ds-space-3);
     border-radius: var(--ds-radius-full);
     background-color: rgba(0, 0, 0, 0.6);
-    color: #fff;
+    color: var(--ds-color-on-inverted);
     font-size: var(--ds-text-sm);
     font-family: var(--ds-font-sans);
     font-variant-numeric: tabular-nums;
@@ -9595,7 +9601,7 @@ button.ds-tag:focus-visible {
 
 /* --- Title & subtitle (theme-independent white for photo readability) --- */
 .ds-hero__title {
-  color: #fff;
+  color: var(--ds-color-on-inverted);
 }
 
 .ds-hero__subtitle {
@@ -12024,7 +12030,7 @@ tr:hover .ds-sortable__handle,
 /* --- Editable Cell (pointer + bg on hover) --- */
 .ds-editable {
   cursor: pointer;
-  border-radius: var(--ds-radius-default);
+  border-radius: var(--ds-radius-md);
   transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 .ds-editable:hover {
@@ -12078,7 +12084,7 @@ tr:hover .ds-sortable__handle,
 }
 
 .ds-bg-base-50 {
-  background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
+  background-color: color-mix(in srgb, var(--ds-color-bg) 50%, transparent);
 }
 
 /* --- Hover Color Variants --- */