@digiko-npm/designsystem 0.9.41 → 0.9.43

package/src/components/tag.css

@@ -31,7 +31,7 @@
   font-family: var(--ds-font-sans);
   line-height: var(--ds-leading-none);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   color: var(--ds-color-text-secondary);
   white-space: nowrap;
@@ -48,37 +48,37 @@
      --------------------------------------------------------------------------- */
 
   &--primary {
-    background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-interactive-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-interactive);
     border-color: var(--ds-color-interactive-border, var(--ds-color-interactive));
   }
 
   &--success {
-    background-color: var(--ds-color-success-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-success-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-success);
     border-color: var(--ds-color-success-border, var(--ds-color-success));
   }
 
   &--warning {
-    background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-warning-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-warning);
     border-color: var(--ds-color-warning-border, var(--ds-color-warning));
   }
 
   &--error {
-    background-color: var(--ds-color-error-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-error-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-error);
     border-color: var(--ds-color-error-border, var(--ds-color-error));
   }
 
   &--info {
-    background-color: var(--ds-color-info-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-info-subtle, var(--ds-color-surface-muted));
     color: var(--ds-color-info);
     border-color: var(--ds-color-info-border, var(--ds-color-info));
   }
 
   &--purple {
-    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-muted));
+    background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-surface-muted));
     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)));
   }

package/src/components/timeline.css

@@ -74,7 +74,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: var(--ds-radius-full);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 2px solid var(--ds-color-border);
     z-index: 1;
   }

package/src/components/toggle.css

@@ -26,12 +26,13 @@
 .ds-toggle {
   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-surface-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),
@@ -47,10 +48,10 @@
   &::after {
     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:
@@ -72,7 +73,7 @@
 
   &[aria-checked="true"]::after,
   &--checked::after {
-    transform: translateX(1.5rem) translateY(-50%);
+    transform: translateX(1.125rem) translateY(-50%);
   }
 
 
@@ -81,7 +82,7 @@
      --------------------------------------------------------------------------- */
 
   &:hover {
-    background-color: var(--ds-color-bg-muted-hover);
+    background-color: var(--ds-color-surface-elevated-hover);
   }
 
   &[aria-checked="true"]:hover,
@@ -116,19 +117,19 @@
      --------------------------------------------------------------------------- */
 
   &--sm {
-    width: 3.375rem;
-    height: 1.5rem;
+    width: 2.75rem;
+    height: 1.25rem;
     padding: 2px;
 
     &::after {
       inset-inline-start: 2px;
-      width: 2rem;
-      height: 1.25rem;
+      width: 1.625rem;
+      height: 1rem;
     }
 
     &[aria-checked="true"]::after,
     &.ds-toggle--checked::after {
-      transform: translateX(1.125rem) translateY(-50%);
+      transform: translateX(0.875rem) translateY(-50%);
     }
   }
 
@@ -137,19 +138,19 @@
      --------------------------------------------------------------------------- */
 
   &--lg {
-    width: 5.5rem;
-    height: 2.5rem;
-    padding: 4px;
+    width: 3.75rem;
+    height: 1.75rem;
+    padding: 2px;
 
     &::after {
-      inset-inline-start: 4px;
-      width: 3.25rem;
-      height: 2rem;
+      inset-inline-start: 2px;
+      width: 2.25rem;
+      height: 1.4rem;
     }
 
     &[aria-checked="true"]::after,
     &.ds-toggle--checked::after {
-      transform: translateX(1.875rem) translateY(-50%);
+      transform: translateX(1.25rem) translateY(-50%);
     }
   }
 }

package/src/components/toolbar.css

@@ -104,7 +104,7 @@
     &--active,
     &--active:hover {
       color: var(--ds-color-text);
-      background: var(--ds-color-bg-elevated);
+      background: var(--ds-color-surface-elevated);
       border-color: var(--ds-color-border);
     }
   }
@@ -165,7 +165,7 @@
     }
 
     &--active {
-      background: var(--ds-color-bg-elevated);
+      background: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
     }
   }

package/src/tokens/colors.css

@@ -7,8 +7,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;
@@ -16,10 +28,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
@@ -58,10 +66,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);
 
@@ -83,8 +94,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;
@@ -92,10 +114,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
@@ -134,10 +152,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);
 
@@ -180,7 +200,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;

package/src/tokens/typography.css

@@ -29,6 +29,15 @@
   --ds-text-6xl: 3.75rem;     /* 60px */
   --ds-text-7xl: 4.5rem;      /* 72px */
 
+  /* --- Editorial long-form fluid sizes ---
+       Promoted from esys/blog.css on 12 Apr 2026 after the blog incident.
+       These target magazine-style article reading, between the functional
+       UI scale (ds-text-*) and the display scale (ds-hero-title). Used by
+       .ds-editorial-title and .ds-editorial-lede in components/prose.css. */
+  --ds-text-editorial-title: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);  /* 40 → 72px */
+  --ds-text-editorial-lede: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18 → 22px */
+  --ds-text-editorial-body: 1.0625rem; /* 17px fixed — sweet spot for long-form body */
+
   /* --- Font Weights --- */
   --ds-weight-light: 300;
   --ds-weight-normal: 400;

package/src/utilities/states.css

@@ -19,9 +19,9 @@
 
 /* --- Hover: Background --- */
 .hover\:ds-bg-base:hover            { background-color: var(--ds-color-bg); }
-.hover\:ds-bg-subtle:hover          { background-color: var(--ds-color-bg-subtle); }
-.hover\:ds-bg-muted:hover           { background-color: var(--ds-color-bg-muted); }
-.hover\:ds-bg-elevated:hover        { background-color: var(--ds-color-bg-elevated); }
+.hover\:ds-bg-subtle:hover          { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-muted:hover           { background-color: var(--ds-color-surface-muted); }
+.hover\:ds-bg-elevated:hover        { background-color: var(--ds-color-surface-elevated); }
 .hover\:ds-bg-surface:hover         { background-color: var(--ds-color-surface); }
 .hover\:ds-bg-hover:hover           { background-color: var(--ds-color-surface-hover); }
 .hover\:ds-bg-inverted:hover        { background-color: var(--ds-color-inverted); }
@@ -100,8 +100,8 @@
    ========================================================================== */
 
 .active\:ds-bg-hover:active         { background-color: var(--ds-color-surface-hover); }
-.active\:ds-bg-muted:active         { background-color: var(--ds-color-bg-muted); }
-.active\:ds-bg-elevated:active      { background-color: var(--ds-color-bg-elevated); }
+.active\:ds-bg-muted:active         { background-color: var(--ds-color-surface-muted); }
+.active\:ds-bg-elevated:active      { background-color: var(--ds-color-surface-elevated); }
 .active\:ds-scale-95:active         { transform: scale(0.95); }
 .active\:ds-scale-98:active         { transform: scale(0.98); }
 
@@ -119,7 +119,7 @@
 .disabled\:ds-cursor-not-allowed[aria-disabled="true"] { cursor: not-allowed; }
 
 .disabled\:ds-bg-subtle:disabled,
-.disabled\:ds-bg-subtle[aria-disabled="true"]   { background-color: var(--ds-color-bg-subtle); }
+.disabled\:ds-bg-subtle[aria-disabled="true"]   { background-color: var(--ds-color-surface); }
 
 .disabled\:ds-pointer-events-none:disabled,
 .disabled\:ds-pointer-events-none[aria-disabled="true"] { pointer-events: none; }

package/src/utilities/text.css

@@ -70,11 +70,11 @@
 /* --- Background Color --- */
 .ds-bg-base     { background-color: var(--ds-color-bg); }
 .ds-bg-surface  { background-color: var(--ds-color-surface); }
-.ds-bg-subtle   { background-color: var(--ds-color-bg-subtle); }
-.ds-bg-elevated { background-color: var(--ds-color-bg-elevated); }
+.ds-bg-subtle   { background-color: var(--ds-color-surface); }
+.ds-bg-elevated { background-color: var(--ds-color-surface-elevated); }
 .ds-bg-inverted { background-color: var(--ds-color-inverted); color: var(--ds-color-on-inverted); }
 .ds-bg-hover    { background-color: var(--ds-color-surface-hover); }
-.ds-bg-muted    { background-color: var(--ds-color-bg-muted); }
+.ds-bg-muted    { background-color: var(--ds-color-surface-muted); }
 .ds-bg-overlay  { background-color: var(--ds-color-overlay); }
 .ds-bg-nav      { background-color: var(--ds-color-nav-bg); }