@digiko-npm/designsystem 0.9.40 → 0.9.42

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.39 */
+/* @ds/designsystem v0.9.41 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -33,8 +33,20 @@
 /* Light theme (default) */
 :root,
 [data-theme="light"] {
-  /* --- Backgrounds — clean whites, warm grays --- */
+  /* --- Background — page-level only --- */
   --ds-color-bg: #fafafa;
+
+  /* --- Surface — everything on top of bg --- */
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-hover: #fafafa;
+  --ds-color-surface-muted: #e4e4e7;
+  --ds-color-surface-muted-hover: #d4d4d8;
+  --ds-color-surface-elevated: #f4f4f5;
+  --ds-color-surface-elevated-hover: #e4e4e7;
+  --ds-color-surface-active: #f4f4f5; /* same value as elevated, different semantics — selected/active state */
+
+  /* @deprecated — use surface-* instead. Will be removed in a future major.
+     Kept for backward compatibility with consumer projects. */
   --ds-color-bg-subtle: #ffffff;
   --ds-color-bg-muted: #e4e4e7;
   --ds-color-bg-muted-hover: #d4d4d8;
@@ -42,10 +54,6 @@
   --ds-color-bg-elevated: #f4f4f5;
   --ds-color-bg-elevated-hover: #e4e4e7;
 
-  --ds-color-surface: #ffffff;
-  --ds-color-surface-hover: #fafafa;
-  --ds-color-surface-active: #f4f4f5;
-
   /* --- Text — zinc hierarchy ---
      Contrast ratios on --ds-color-bg (#fafafa):
      --text:           #09090b → ~19.3:1 ✅ WCAG AAA
@@ -84,10 +92,13 @@
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.5);
   --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
+
+  /* @deprecated — use surface-hover / surface-active instead */
   --ds-color-overlay-hover: rgba(0, 0, 0, 0.08);
   --ds-color-overlay-active: rgba(0, 0, 0, 0.12);
 
-  /* --- Navigation (glass effect) --- */
+  /* @deprecated — use color-surface + backdrop-filter for glass effect.
+     Too specific as tokens. Kept for backward compat. */
   --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
   --ds-color-nav-border: rgba(228, 228, 231, 0.6);
 
@@ -109,8 +120,19 @@
 
 /* Dark theme */
 [data-theme="dark"] {
-  /* --- Backgrounds — deep, refined zinc-900 palette --- */
+  /* --- Background — page-level only --- */
   --ds-color-bg: #09090b;
+
+  /* --- Surface --- */
+  --ds-color-surface: #0f0f11;
+  --ds-color-surface-hover: #18181b;
+  --ds-color-surface-muted: #18181b;
+  --ds-color-surface-muted-hover: #212124;
+  --ds-color-surface-elevated: #2d2d31;
+  --ds-color-surface-elevated-hover: #3a3a40;
+  --ds-color-surface-active: #27272a;
+
+  /* @deprecated */
   --ds-color-bg-subtle: #0f0f11;
   --ds-color-bg-muted: #18181b;
   --ds-color-bg-muted-hover: #212124;
@@ -118,10 +140,6 @@
   --ds-color-bg-elevated: #2d2d31;
   --ds-color-bg-elevated-hover: #3a3a40;
 
-  --ds-color-surface: #0f0f11;
-  --ds-color-surface-hover: #18181b;
-  --ds-color-surface-active: #27272a;
-
   /* --- Text ---
      Contrast ratios on --ds-color-bg (#09090b):
      --text:           #fafafa → ~19.3:1 ✅ WCAG AAA
@@ -160,10 +178,12 @@
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.7);
   --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
+
+  /* @deprecated */
   --ds-color-overlay-hover: rgba(255, 255, 255, 0.1);
   --ds-color-overlay-active: rgba(255, 255, 255, 0.15);
 
-  /* --- Navigation --- */
+  /* @deprecated */
   --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
   --ds-color-nav-border: rgba(39, 39, 42, 0.6);
 
@@ -206,7 +226,9 @@
   --ds-color-info-subtle: rgba(37, 99, 235, 0.1);
   --ds-color-info-border: rgba(37, 99, 235, 0.2);
 
-  /* --- Solid fills (theme-stable, always pair with white text) --- */
+  /* @deprecated — use color-success/warning/error/info directly.
+     The -solid variant was identical in value and confusing in name.
+     Kept for backward compatibility. */
   --ds-color-success-solid: #16a34a;
   --ds-color-warning-solid: #d97706;
   --ds-color-error-solid: #dc2626;
@@ -1284,12 +1306,13 @@ hr {
 
   display: inline-flex;
   position: relative;
-  width: 4.5rem;
-  height: 2rem;
-  padding: 3px;
-  border: none;
+  width: 3.25rem;
+  height: 1.5rem;
+  /* Proportions locked: track 2.2:1, thumb 59%w 80%h of track */
+  padding: 2px;
+  border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-bg-elevated);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
   cursor: pointer;
   transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
@@ -1349,10 +1372,10 @@ hr {
 
     content: "";
     position: absolute;
-    inset-inline-start: 3px;
+    inset-inline-start: 2px;
     inset-block-start: 50%;
-    width: 2.625rem;
-    height: 1.625rem;
+    width: 1.875rem;
+    height: 1.25rem;
     border-radius: var(--ds-radius-full);
     background-color: var(--ds-color-static-white);
     box-shadow:
@@ -1370,11 +1393,11 @@ hr {
 .ds-toggle[aria-checked="true"]::after,
 .ds-toggle--checked::after {
 
-    transform: translateX(1.5rem) translateY(-50%);
+    transform: translateX(1.125rem) translateY(-50%);
   }
 .ds-toggle:hover {
 
-    background-color: var(--ds-color-bg-muted-hover);
+    background-color: var(--ds-color-bg-elevated-hover);
   }
 .ds-toggle[aria-checked="true"]:hover,
 .ds-toggle--checked:hover {
@@ -1397,8 +1420,8 @@ hr {
   }
 .ds-toggle--sm {
 
-    width: 3.375rem;
-    height: 1.5rem;
+    width: 2.75rem;
+    height: 1.25rem;
     padding: 2px;
 
     
@@ -1408,19 +1431,19 @@ hr {
 .ds-toggle--sm::after {
 
       inset-inline-start: 2px;
-      width: 2rem;
-      height: 1.25rem;
+      width: 1.625rem;
+      height: 1rem;
     }
 .ds-toggle--sm[aria-checked="true"]::after,
 .ds-toggle--sm.ds-toggle--checked::after {
 
-      transform: translateX(1.125rem) translateY(-50%);
+      transform: translateX(0.875rem) translateY(-50%);
     }
 .ds-toggle--lg {
 
-    width: 5.5rem;
-    height: 2.5rem;
-    padding: 4px;
+    width: 3.75rem;
+    height: 1.75rem;
+    padding: 2px;
 
     
 
@@ -1428,14 +1451,14 @@ hr {
   }
 .ds-toggle--lg::after {
 
-      inset-inline-start: 4px;
-      width: 3.25rem;
-      height: 2rem;
+      inset-inline-start: 2px;
+      width: 2.25rem;
+      height: 1.4rem;
     }
 .ds-toggle--lg[aria-checked="true"]::after,
 .ds-toggle--lg.ds-toggle--checked::after {
 
-      transform: translateX(1.875rem) translateY(-50%);
+      transform: translateX(1.25rem) translateY(-50%);
     }
 
 
@@ -11890,6 +11913,12 @@ a:hover .ds-sortable__handle,
 }
 
 
+@media (min-width: 768px) {
+
+  .ds-md\:w-auto { width: auto; }
+}
+
+
 /* --- Decimal sizing --- */
 .ds-w-0\.5 { width: 0.125rem; }
 .ds-w-1\.5 { width: 0.375rem; }