@digiko-npm/designsystem 0.9.37 → 0.9.39

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.36 */
+/* @ds/designsystem v0.9.38 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -63,9 +63,9 @@
   --ds-color-on-inverted: #fafafa;
 
   /* --- Borders — solid zinc --- */
-  --ds-color-border: #d4d4d8;
-  --ds-color-border-hover: #a1a1aa;
-  --ds-color-border-active: #71717a;
+  --ds-color-border: #e4e4e7;
+  --ds-color-border-hover: #d4d4d8;
+  --ds-color-border-active: #a1a1aa;
   --ds-color-border-subtle: #f4f4f5;
 
   /* --- Interactive --- */
@@ -74,6 +74,13 @@
   --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
   --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
 
+  /* --- Brand (override per-project to match your identity) --- */
+  --ds-color-brand: #2563eb;
+  --ds-color-brand-hover: #1d4ed8;
+  --ds-color-brand-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-brand-border: rgba(37, 99, 235, 0.2);
+  --ds-color-on-brand: #ffffff;
+
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.5);
   --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
@@ -132,9 +139,9 @@
   --ds-color-on-inverted: #09090b;
 
   /* --- Borders --- */
-  --ds-color-border: #3f3f46;
-  --ds-color-border-hover: #52525b;
-  --ds-color-border-active: #71717a;
+  --ds-color-border: #27272a;
+  --ds-color-border-hover: #3f3f46;
+  --ds-color-border-active: #52525b;
   --ds-color-border-subtle: #18181b;
 
   /* --- Interactive --- */
@@ -143,6 +150,13 @@
   --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
   --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
 
+  /* --- Brand --- */
+  --ds-color-brand: #3b82f6;
+  --ds-color-brand-hover: #60a5fa;
+  --ds-color-brand-subtle: rgba(59, 130, 246, 0.1);
+  --ds-color-brand-border: rgba(59, 130, 246, 0.2);
+  --ds-color-on-brand: #ffffff;
+
   /* --- Overlays --- */
   --ds-color-overlay: rgba(0, 0, 0, 0.7);
   --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
@@ -1270,14 +1284,16 @@ hr {
 
   display: inline-flex;
   position: relative;
-  width: 2.75rem;
-  height: 1.5rem;
-  padding: 2px;
+  width: 4.5rem;
+  height: 2rem;
+  padding: 3px;
   border: none;
   border-radius: var(--ds-radius-full);
   background-color: var(--ds-color-bg-muted);
+  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);
+  transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
+              box-shadow var(--ds-duration-normal) var(--ds-ease-out);
   -webkit-appearance: none;
   appearance: none;
   flex-shrink: 0;
@@ -1296,6 +1312,7 @@ hr {
 
   
 
+
   /* ---------------------------------------------------------------------------
      Hover
      --------------------------------------------------------------------------- */
@@ -1321,44 +1338,54 @@ hr {
      --------------------------------------------------------------------------- */
 
   
+
+  /* ---------------------------------------------------------------------------
+     Size: Large
+     --------------------------------------------------------------------------- */
+
+  
 }
 .ds-toggle::after {
 
     content: "";
     position: absolute;
-    inset-inline-start: 2px;
+    inset-inline-start: 3px;
     inset-block-start: 50%;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 2.625rem;
+    height: 1.625rem;
     border-radius: var(--ds-radius-full);
-    background-color: var(--ds-color-surface);
-    box-shadow: var(--ds-shadow-sm);
+    background: linear-gradient(to bottom, var(--ds-color-static-white), var(--ds-color-surface));
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.15),
+      0 0 0 0.5px rgba(0, 0, 0, 0.04);
     transform: translateY(-50%);
     transition: transform var(--ds-duration-normal) var(--ds-ease-out);
   }
 .ds-toggle[aria-checked="true"],
 .ds-toggle--checked {
 
-    background-color: var(--ds-color-interactive);
+    background-color: var(--ds-color-brand);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   }
 .ds-toggle[aria-checked="true"]::after,
 .ds-toggle--checked::after {
 
-    transform: translateX(1.25rem) translateY(-50%);
+    transform: translateX(1.5rem) translateY(-50%);
   }
 .ds-toggle:hover {
 
-    background-color: var(--ds-color-border-hover);
+    background-color: var(--ds-color-bg-muted-hover);
   }
 .ds-toggle[aria-checked="true"]:hover,
 .ds-toggle--checked:hover {
 
-    background-color: var(--ds-color-interactive-hover);
+    background-color: var(--ds-color-brand-hover);
   }
 .ds-toggle:focus-visible {
 
     outline: none;
-    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
+                0 0 0 var(--ds-ring-width) var(--ds-ring-color);
     scroll-margin-block: var(--ds-space-16, 4rem);
   }
 .ds-toggle:disabled,
@@ -1370,9 +1397,9 @@ hr {
   }
 .ds-toggle--sm {
 
-    width: 2rem;
-    height: 1.125rem;
-    min-height: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    width: 3.375rem;
+    height: 1.5rem;
+    padding: 2px;
 
     
 
@@ -1380,13 +1407,35 @@ hr {
   }
 .ds-toggle--sm::after {
 
-      width: 0.875rem;
-      height: 0.875rem;
+      inset-inline-start: 2px;
+      width: 2rem;
+      height: 1.25rem;
     }
 .ds-toggle--sm[aria-checked="true"]::after,
 .ds-toggle--sm.ds-toggle--checked::after {
 
-      transform: translateX(0.875rem) translateY(-50%);
+      transform: translateX(1.125rem) translateY(-50%);
+    }
+.ds-toggle--lg {
+
+    width: 5.5rem;
+    height: 2.5rem;
+    padding: 4px;
+
+    
+
+    
+  }
+.ds-toggle--lg::after {
+
+      inset-inline-start: 4px;
+      width: 3.25rem;
+      height: 2rem;
+    }
+.ds-toggle--lg[aria-checked="true"]::after,
+.ds-toggle--lg.ds-toggle--checked::after {
+
+      transform: translateX(1.875rem) translateY(-50%);
     }