@digiko-npm/designsystem 0.9.41 → 0.9.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.9.41",
+  "version": "0.9.43",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",
@@ -80,8 +80,13 @@
     "validate": "node scripts/validate.js",
     "docs": "node scripts/generate-docs.js",
     "lint": "stylelint 'src/**/*.css'",
-    "dev": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"
+    "dev": "node scripts/build.js --watch & npm run dev --workspace=docs",
+    "dev:legacy": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"
   },
+  "workspaces": [
+    "packages/*",
+    "docs"
+  ],
   "keywords": [
     "design-system",
     "css",

package/src/base/typography.css

@@ -94,7 +94,7 @@ strong, b {
 code, kbd, samp {
   font-family: var(--ds-font-mono);
   font-size: 0.9em;
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   padding: 2px 6px;
   border-radius: var(--ds-radius-sm);
 }

package/src/components/admin-layout.css

@@ -124,7 +124,7 @@
 .ds-admin__sidebar-badge {
   border-radius: var(--ds-radius-md);
   border: 1px solid var(--ds-color-border);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: var(--ds-space-0-5) var(--ds-space-1-5);
   font-size: var(--ds-text-xs);
   font-weight: var(--ds-weight-medium);
@@ -162,7 +162,7 @@
 
 .ds-admin__nav-item--active,
 .ds-admin__nav-item--active:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 
@@ -212,7 +212,7 @@
 }
 
 .ds-admin__subnav-item--active {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 

package/src/components/avatar.css

@@ -10,7 +10,7 @@
   width: var(--ds-size-3);
   height: var(--ds-size-3);
   border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   color: var(--ds-color-text-secondary);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);

package/src/components/badge.css

@@ -14,7 +14,7 @@
   border-radius: var(--ds-radius-full);
   white-space: nowrap;
   border: 1px solid var(--ds-color-border);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   color: var(--ds-color-text-secondary);
 
   /* Semantic variants — subtle bg + bright text + subtle border */

package/src/components/bottom-sheet.css

@@ -68,7 +68,7 @@
     height: 4px;
     margin: var(--ds-space-2) auto;
     border-radius: var(--ds-radius-full);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     flex-shrink: 0;
   }
 

package/src/components/button.css

@@ -51,13 +51,13 @@
   /* --- Variants --- */
 
   &--secondary {
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text);
     border-color: var(--ds-color-border);
 
     &:hover {
       border-color: var(--ds-color-border-hover);
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       opacity: 1;
     }
   }

package/src/components/card.css

@@ -46,7 +46,7 @@
 
   /* Elevated card — visible shadow */
   &--elevated {
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     box-shadow: var(--ds-shadow-lg);
   }
 
@@ -91,7 +91,7 @@
     width: 100%;
     aspect-ratio: 16/10;
     object-fit: cover;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
 
     &--square { aspect-ratio: 1; }
     &--video { aspect-ratio: 16/9; }

package/src/components/chip.css

@@ -29,7 +29,7 @@
   font-size: var(--ds-text-xs);
   font-family: inherit;
   color: var(--ds-color-text-secondary);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
   white-space: nowrap;

package/src/components/combobox.css

@@ -149,7 +149,7 @@
   max-height: 16rem;
   overflow-y: auto;
   overscroll-behavior: contain;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   box-shadow: var(--ds-shadow-lg);
@@ -224,7 +224,7 @@
 
 .ds-combobox__option--active,
 .ds-combobox__option--active:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
 }
 
@@ -324,7 +324,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;

package/src/components/command.css

@@ -68,7 +68,7 @@
 
   /* Content panel */
   &__content {
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -148,13 +148,13 @@
 
     /* Item hover & active states */
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 
     &--active,
       &--active:hover {
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
 
       & .ds-command__item-icon,

package/src/components/custom-select.css

@@ -123,7 +123,7 @@
 .ds-custom-select__panel {
   position: fixed;
   z-index: var(--ds-z-dropdown);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   box-shadow: var(--ds-shadow-lg);
@@ -222,7 +222,7 @@
 
 .ds-custom-select__option--selected,
 .ds-custom-select__option--selected:hover {
-  background-color: var(--ds-color-bg-elevated);
+  background-color: var(--ds-color-surface-elevated);
   color: var(--ds-color-text);
   font-weight: var(--ds-weight-medium);
 }
@@ -365,7 +365,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;

package/src/components/datepicker.css

@@ -67,7 +67,7 @@
     z-index: var(--ds-z-dropdown);
     inset-block-start: calc(100% + var(--ds-offset-sm));
     inset-inline-start: 0;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -119,7 +119,7 @@
     transition: all var(--ds-duration-fast) var(--ds-ease-default);
 
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 
@@ -170,7 +170,7 @@
     user-select: none;
 
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
     }
 
     &:focus-visible {
@@ -224,7 +224,7 @@
     transition: all var(--ds-duration-fast) var(--ds-ease-default);
 
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
       border-color: var(--ds-color-border-hover);
     }
@@ -253,7 +253,7 @@
     flex-shrink: 0;
 
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 

package/src/components/description-list.css

@@ -92,7 +92,7 @@
 
   &--striped {
     & .ds-description-list__item:nth-child(odd) {
-      background-color: var(--ds-color-bg-subtle);
+      background-color: var(--ds-color-surface);
       padding-inline: var(--ds-space-3);
       border-radius: var(--ds-radius-md);
     }

package/src/components/drop-zone.css

@@ -71,7 +71,7 @@
     width: 3rem;
     height: 3rem;
     border-radius: var(--ds-radius-xl);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
     transition: color var(--ds-duration-fast) var(--ds-ease-default);
   }

package/src/components/dropdown.css

@@ -40,7 +40,7 @@
     display: flex;
     flex-direction: column;
     padding-block: var(--ds-space-1-5);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);
@@ -103,7 +103,7 @@
       background-color var(--ds-duration-fast) var(--ds-ease-default);
 
     &:hover {
-      background-color: var(--ds-color-bg-muted-hover);
+      background-color: var(--ds-color-surface-muted-hover);
       color: var(--ds-color-text);
     }
 
@@ -115,7 +115,7 @@
 
     &--active,
     &--active:hover {
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
     }
 

package/src/components/gallery.css

@@ -51,7 +51,7 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--ds-radius-xl);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     cursor: pointer;
 
     & img {
@@ -85,7 +85,7 @@
     border-radius: var(--ds-radius-md);
     overflow: hidden;
     cursor: pointer;
-    background: var(--ds-color-bg-muted);
+    background: var(--ds-color-surface-muted);
     transition:
       border-color var(--ds-duration-fast) var(--ds-ease-default),
       opacity var(--ds-duration-fast) var(--ds-ease-default);
@@ -122,7 +122,7 @@
     height: 4rem;
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-md);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
     font-size: var(--ds-text-sm);
     font-weight: var(--ds-weight-medium);

package/src/components/kbd.css

@@ -25,7 +25,7 @@
   padding: var(--ds-space-0-5) var(--ds-space-1-5);
   font-family: var(--ds-font-mono);
   font-size: var(--ds-text-xs);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-block-end-width: 2px;
   border-radius: var(--ds-radius-sm);

package/src/components/nav.css

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

package/src/components/popover.css

@@ -28,7 +28,7 @@
   &__content {
     position: absolute;
     z-index: var(--ds-z-dropdown);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border: 1px solid var(--ds-color-border);
     border-radius: var(--ds-radius-xl);
     box-shadow: var(--ds-shadow-lg);

package/src/components/progress.css

@@ -50,7 +50,7 @@
 .ds-progress {
   width: 100%;
   height: 0.5rem;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-full);
   overflow: hidden;
 

package/src/components/prose.css

@@ -60,13 +60,13 @@
 .ds-prose-block code {
   font-family: var(--ds-font-mono);
   font-size: var(--ds-text-sm);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: 0.125em 0.375em;
   border-radius: var(--ds-radius-sm);
 }
 
 .ds-prose-block pre {
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   padding: var(--ds-space-4);
   border-radius: var(--ds-radius-lg);
   overflow-x: auto;
@@ -117,3 +117,150 @@
   border-radius: var(--ds-radius-lg);
   margin-block-end: 1em;
 }
+
+/* ==========================================================================
+   Editorial long-form typography (promoted from esys blog — 12 Apr 2026)
+
+   Three classes that together make an article page look like a magazine
+   instead of a dashboard. They fill the gap between .ds-hero-title (too
+   big for articles) and .ds-prose-block (whose h2 is 4xl — too heavy for
+   reading rhythm).
+
+   Usage:
+     <h1 class="ds-editorial-title">The title of the article</h1>
+     <p class="ds-editorial-lede">The lead paragraph, larger than body.</p>
+     <div class="ds-editorial-body">
+       <h2>Section</h2>
+       <p>Body text at 17px, line-height loose, with proper h2/h3 scale.</p>
+     </div>
+
+   Designed for: blog posts, long-form articles, editorial landing, magazine
+   layouts. NOT for admin UI, dashboards, or functional copy — use
+   .ds-heading-ui / .ds-section-title / .ds-prose-block for those.
+   ========================================================================== */
+
+.ds-editorial-title {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-editorial-title);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin: 0;
+}
+
+.ds-editorial-lede {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-editorial-lede);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+  margin: 0;
+  max-width: 600px;
+}
+
+.ds-editorial-body {
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-editorial-body);
+  line-height: var(--ds-leading-loose);
+}
+
+.ds-editorial-body > * + * {
+  margin-block-start: var(--ds-space-4);
+}
+
+.ds-editorial-body h2 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-2xl);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-8);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h3 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-xl);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-snug);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-6);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h4 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-lg);
+  font-weight: var(--ds-font-display-weight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-5);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body a {
+  color: var(--ds-color-interactive);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ds-editorial-body a:hover {
+  text-decoration: none;
+}
+
+.ds-editorial-body strong {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-editorial-body ul,
+.ds-editorial-body ol {
+  padding-inline-start: var(--ds-space-6);
+}
+
+.ds-editorial-body ul { list-style-type: disc; }
+.ds-editorial-body ol { list-style-type: decimal; }
+
+.ds-editorial-body li + li {
+  margin-block-start: var(--ds-space-2);
+}
+
+.ds-editorial-body blockquote {
+  border-inline-start: 3px solid var(--ds-color-border-hover);
+  padding-inline-start: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+  font-style: italic;
+}
+
+.ds-editorial-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-editorial-body hr {
+  border: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-6);
+}
+
+.ds-editorial-body pre {
+  background: var(--ds-color-surface-muted);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-md);
+  overflow-x: auto;
+}
+
+.ds-editorial-body code {
+  background: var(--ds-color-surface-muted);
+  padding: 0.125em 0.375em;
+  border-radius: var(--ds-radius-sm);
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+}
+
+.ds-editorial-body pre code {
+  background: transparent;
+  padding: 0;
+}

package/src/components/search.css

@@ -92,7 +92,7 @@
   font-family: inherit;
   line-height: 1;
   color: var(--ds-color-text-tertiary);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-sm);
   pointer-events: none;
@@ -129,7 +129,7 @@
   position: fixed;
   max-height: min(22rem, calc(100dvh - 5rem));
   overflow-y: auto;
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   box-shadow: var(--ds-shadow-lg);
@@ -179,7 +179,7 @@
 
 .ds-search__result--active,
 .ds-search__result--active:hover {
-  background: var(--ds-color-bg-elevated);
+  background: var(--ds-color-surface-elevated);
 }
 
 .ds-search__result:focus-visible {
@@ -304,7 +304,7 @@
     border-inline-start: none;
     border-inline-end: none;
     max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
-    background: var(--ds-color-bg-muted);
+    background: var(--ds-color-surface-muted);
     backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
     -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
   }

package/src/components/segmented-control.css

@@ -24,7 +24,7 @@
   align-items: center;
   gap: var(--ds-space-0-5);
   padding: var(--ds-space-0-5);
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-lg);
   border: 1px solid var(--ds-color-border-subtle);
 
@@ -59,7 +59,7 @@
 
     &--active,
       &--active:hover {
-      background-color: var(--ds-color-bg-elevated);
+      background-color: var(--ds-color-surface-elevated);
       color: var(--ds-color-text);
       box-shadow: var(--ds-shadow-sm);
     }

package/src/components/skeleton.css

@@ -5,7 +5,7 @@
 
 .ds-skeleton {
   display: block;
-  background-color: var(--ds-color-bg-muted);
+  background-color: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-md);
   animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
 

package/src/components/slider.css

@@ -34,7 +34,7 @@
     appearance: none;
     width: 100%;
     height: 0.375rem;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-full);
     outline: none;
     cursor: pointer;

package/src/components/stat-card.css

@@ -38,7 +38,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     color: var(--ds-color-text-secondary);
   }
 }

package/src/components/table.css

@@ -207,7 +207,7 @@
   inset-inline-end: var(--ds-space-4);
   height: 0.75rem;
   transform: translateY(-50%);
-  background: var(--ds-color-bg-muted);
+  background: var(--ds-color-surface-muted);
   border-radius: var(--ds-radius-sm);
   animation: ds-table-skeleton-pulse 1.5s ease-in-out infinite;
 }

package/src/components/tabs.css

@@ -22,7 +22,7 @@
   &--pills {
     border-block-end: none;
     gap: var(--ds-space-1);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-lg);
     padding: var(--ds-space-1);
 
@@ -40,7 +40,7 @@
 
       &--active,
       &--active:hover {
-        background-color: var(--ds-color-bg-elevated);
+        background-color: var(--ds-color-surface-elevated);
         color: var(--ds-color-text);
         box-shadow: var(--ds-shadow-sm);
         border-block-end: none;
@@ -197,14 +197,14 @@
     font-weight: var(--ds-weight-medium);
     line-height: var(--ds-leading-snug);
     color: var(--ds-color-text-tertiary);
-    background-color: var(--ds-color-bg-muted);
+    background-color: var(--ds-color-surface-muted);
     border-radius: var(--ds-radius-full);
     min-width: 1.25rem;
   }
 
   &--active &__count {
     color: var(--ds-color-text-secondary);
-    background-color: var(--ds-color-bg-elevated);
+    background-color: var(--ds-color-surface-elevated);
   }
 }