@klodd/ds 3.4.4 → 3.5.0

package/bin/sync.js

@@ -2,7 +2,11 @@
 /* @klodd/ds sync - kopierar paketets CSS och JS till app-repot.
  * Kör: npx @klodd/ds sync
  * Förutsätter att CWD är app-repots rot.
- * Läser cssTarget/jsTarget från klodd-ds.json i CWD, eller använder default.
+ * Läser cssTarget/jsTarget/exclude från klodd-ds.json i CWD, eller använder default.
+ *
+ * exclude-fältet (v3.5.0+) är en lista av relativa fil-paths under css/ eller
+ * js/ som hoppas över vid kopiering. Användbart när en app inte konsumerar en
+ * komponent som finns i paketet (t.ex. apps/ekonom.css i Jubbs repo).
  *
  * Cross-platform via fs.cpSync (Node 16.7+) - inte POSIX cp -r. */
 'use strict';
@@ -17,17 +21,39 @@ const jsSource = path.join(pkgDir, 'js');
 const configPath = path.join(process.cwd(), 'klodd-ds.json');
 const config = fs.existsSync(configPath)
   ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
-  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds', exclude: [] };
 
 const cssTarget = path.join(process.cwd(), config.cssTarget);
 const jsTarget = path.join(process.cwd(), config.jsTarget);
+const exclude = new Set(config.exclude || []);
 
 fs.mkdirSync(cssTarget, { recursive: true });
 fs.mkdirSync(jsTarget, { recursive: true });
 
-fs.cpSync(cssSource, cssTarget, { recursive: true });
+function copyDirFiltered(srcRoot, dstRoot, kind) {
+  const stack = [{ abs: srcRoot, rel: '' }];
+  while (stack.length) {
+    const { abs, rel } = stack.pop();
+    for (const entry of fs.readdirSync(abs, { withFileTypes: true })) {
+      const childAbs = path.join(abs, entry.name);
+      const childRel = rel ? path.posix.join(rel, entry.name) : entry.name;
+      const excludeKey = `${kind}/${childRel}`;
+      if (exclude.has(excludeKey) || exclude.has(childRel)) continue;
+      const childDst = path.join(dstRoot, childRel);
+      if (entry.isDirectory()) {
+        fs.mkdirSync(childDst, { recursive: true });
+        stack.push({ abs: childAbs, rel: childRel });
+      } else if (entry.isFile()) {
+        fs.copyFileSync(childAbs, childDst);
+      }
+    }
+  }
+}
+
+copyDirFiltered(cssSource, cssTarget, 'css');
 if (fs.existsSync(jsSource)) {
-  fs.cpSync(jsSource, jsTarget, { recursive: true });
+  copyDirFiltered(jsSource, jsTarget, 'js');
 }
 
-console.log(`OK @klodd/ds synkad till ${config.cssTarget} och ${config.jsTarget}`);
+const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade)` : '';
+console.log(`OK @klodd/ds synkad till ${config.cssTarget} och ${config.jsTarget}${excludedCount}`);

package/bin/verify.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 /* @klodd/ds verify - diff:ar committade DS-filer mot paket-källan.
  * Kör i CI: npx @klodd/ds verify
- * Fail:ar med exit code 1 om drift detekteras. */
+ * Fail:ar med exit code 1 om drift detekteras.
+ *
+ * exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över vid diff. */
 'use strict';
 
 const fs = require('fs');
@@ -12,7 +14,9 @@ const pkgDir = path.dirname(require.resolve('@klodd/ds/package.json'));
 const configPath = path.join(process.cwd(), 'klodd-ds.json');
 const config = fs.existsSync(configPath)
   ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
-  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds', exclude: [] };
+
+const exclude = new Set(config.exclude || []);
 
 function hashFile(filePath) {
   return crypto.createHash('sha256')
@@ -27,7 +31,7 @@ function listFilesRec(dir) {
     const { abs, rel } = stack.pop();
     for (const entry of fs.readdirSync(abs, { withFileTypes: true })) {
       const childAbs = path.join(abs, entry.name);
-      const childRel = rel ? path.join(rel, entry.name) : entry.name;
+      const childRel = rel ? path.posix.join(rel, entry.name) : entry.name;
       if (entry.isDirectory()) stack.push({ abs: childAbs, rel: childRel });
       else if (entry.isFile()) out.push(childRel);
     }
@@ -35,11 +39,13 @@ function listFilesRec(dir) {
   return out;
 }
 
-function diffDirs(sourceDir, targetRel) {
+function diffDirs(sourceDir, targetRel, kind) {
   const drifted = [];
   if (!fs.existsSync(sourceDir)) return drifted;
   const targetAbs = path.join(process.cwd(), targetRel);
   for (const file of listFilesRec(sourceDir)) {
+    const excludeKey = `${kind}/${file}`;
+    if (exclude.has(excludeKey) || exclude.has(file)) continue;
     const src = path.join(sourceDir, file);
     const tgt = path.join(targetAbs, file);
     if (!fs.existsSync(tgt)) {
@@ -51,8 +57,8 @@ function diffDirs(sourceDir, targetRel) {
   return drifted;
 }
 
-const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget);
-const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget);
+const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget, 'css');
+const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget, 'js');
 const allDrift = [...cssDrift, ...jsDrift];
 
 if (allDrift.length > 0) {
@@ -62,5 +68,6 @@ if (allDrift.length > 0) {
   process.exit(1);
 }
 
-console.log('OK: alla DS-filer matchar @klodd/ds-paketet.');
+const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade fran kontroll)` : '';
+console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}.`);
 process.exit(0);

package/css/00-primitives.css

@@ -149,10 +149,6 @@
   --plum-10: #b658c4;   /* Solid hover */
   --plum-11: #e796f3;   /* Accent text pa neutral */
   --plum-12: #f4d4f4;
-
-  /* Plum mellanniva - mellan plum-2 och plum-3, anvands av Ekonoms
-     surface-raised. Tidigare hardkodat #2a1a2e i apps/ekonom.css. */
-  --plum-2-5: oklch(0.24 0.048 295);
 }
 
 

package/css/10-semantic.css

@@ -409,98 +409,14 @@
 
 
 /* ================================================================
-   ==== LEGACY ALIASES
-   Bakatkompat-skikt sa befintliga komponenter inte krasar under
-   migration. Mappar gamla namn mot nya semantic tokens.
-
-   Migration sker gradvis: nar en komponent rors, byt fran legacy-namn
-   till nytt semantic-namn. Behall denna sektion tills alla call-sites
-   ar migrerade. Da kan den raderas och DECISIONS.md uppdateras.
+   ==== OVERLAY TINTS
+   Transparenta tints för drag-overlays, hover-states på dark surfaces
+   och liknande där en alpha-pixel-shift räcker. Inte permanenta
+   surface-nivåer (de ligger i SURFACES-sektionen ovan).
    ================================================================ */
 :root {
-  /* Surfaces (gamla overlay-skala) -> mappa mot nya neutral-stegen. */
   --surface-faint:  color-mix(in oklch, white 2%, transparent);
   --surface-subtle: color-mix(in oklch, white 4%, transparent);
   --surface-medium: color-mix(in oklch, white 8%, transparent);
   --surface-strong: color-mix(in oklch, white 12%, transparent);
-
-  /* Bakgrunder - gamla bg-* mappas till nya surface-*. */
-  --bg-sunken:  var(--surface-sunken);
-  --bg-base:    var(--surface-page);
-  --bg-surface: var(--surface-raised);
-  --bg-raised:  var(--surface-raised);
-  --bg-hover:   var(--surface-hover);
-
-  /* Text - gamla text-primary/secondary/tertiary/faint. */
-  --text-primary:   var(--text-default);
-  --text-secondary: var(--text-subtle);
-  --text-tertiary:  var(--text-muted);
-  --text-faint:     var(--text-disabled);
-
-  /* Accent - gamla --accent (singular) mappas mot nya --accent-9.
-     --accent-dim/-border foljde gamla 20%/40%-konventionen, mappas
-     nu mot Radix-skalans steg 3 (subtil) och 6 (border-emphasis). */
-  --accent:           var(--accent-9);
-  --accent-hover:     var(--accent-10);
-  --accent-strong:    var(--accent-9);
-  --accent-secondary: var(--accent-9);
-  --accent-dim:       var(--accent-a3);
-  --accent-border:    var(--accent-a6);
-
-  /* Accent-link - gamla cirkelknapps-tokens. Mappas mot accent-systemet.
-     Gamla 10/20/40%-stegen mappas mot nya Radix-stegen 2/3/6. */
-  --accent-link:              var(--accent-text);
-  --accent-link-bg:           var(--accent-a2);
-  --accent-link-bg-hover:     var(--accent-a3);
-  --accent-link-border:       var(--accent-a3);
-  --accent-link-border-hover: var(--accent-a6);
-
-  /* Audit-aliaser fran 2026-05-07 - ofta refererade utan att vara definierade. */
-  --text:        var(--text-default);
-  --border:      var(--border-default);
-  --surface-2:   var(--surface-default);
-  --surface-3:   var(--surface-raised);
-  --accent-rgba: var(--accent-a3);
-
-  /* Radius - gamla t-shirt-namn mappas mot nya pixel-numeriska. */
-  --radius-xs:   var(--radius-2);
-  --radius-sm:   var(--radius-4);
-  --radius-md:   var(--radius-6);
-  --radius-lg:   var(--radius-12);
-  --radius-xl:   var(--radius-14);
-  --radius-2xl:  var(--radius-16);
-  --radius-3xl:  var(--radius-20);
-  --radius-4xl:  var(--radius-24);
-  --radius-pill: var(--radius-full);
-
-  /* Font-weight: --fw-semibold borttagen 2026-05-07 per 400/500-policy.
-     Aktiva call-sites bytte till var(--fw-medium) explicit. Se DECISIONS.md. */
-
-  /* Kategori-paletter (Ekonom-only). Behalls for shared-tokens-paritet
-     med Ekonom-repot, oanvanda i Jubb. */
-  --primitive-cat-mat:    color-mix(in oklch, var(--purple-9) 60%, transparent);
-  --primitive-cat-el:     oklch(0.72 0.135 245);
-  --primitive-cat-vatten: oklch(0.78 0.110 200);
-  --primitive-cat-avgift: var(--green-9);
-  --primitive-cat-noje:   oklch(0.72 0.150 350);
-  --primitive-cat-amort:  oklch(0.72 0.135 160);
-  --primitive-cat-ranta:  oklch(0.72 0.150 50);
-  --primitive-cat-privat: var(--gray-9);
-
-  --cat-mat:         color-mix(in oklch, var(--purple-9) 15%, transparent);
-  --cat-mat-icon:    var(--primitive-cat-mat);
-  --cat-el:          color-mix(in oklch, var(--blue-9) 15%, transparent);
-  --cat-el-icon:     var(--primitive-cat-el);
-  --cat-vatten:      color-mix(in oklch, oklch(0.78 0.110 200) 15%, transparent);
-  --cat-vatten-icon: var(--primitive-cat-vatten);
-  --cat-avgift:      color-mix(in oklch, var(--green-9) 15%, transparent);
-  --cat-avgift-icon: var(--primitive-cat-avgift);
-  --cat-noje:        color-mix(in oklch, oklch(0.72 0.150 350) 15%, transparent);
-  --cat-noje-icon:   var(--primitive-cat-noje);
-  --cat-amortering:  color-mix(in oklch, oklch(0.72 0.135 160) 15%, transparent);
-  --cat-amort-icon:  var(--primitive-cat-amort);
-  --cat-ranta:       color-mix(in oklch, oklch(0.72 0.150 50) 15%, transparent);
-  --cat-ranta-icon:  var(--primitive-cat-ranta);
-  --cat-privat:      color-mix(in oklch, var(--gray-9) 12%, transparent);
-  --cat-privat-icon: var(--primitive-cat-privat);
 }

package/css/apps/ekonom.css

@@ -26,9 +26,7 @@
 
      Konvention: --surface-raised = appens <color>-2. Gäller alla
      Klodd-appar (Jubb -> blue-2, Ekonom -> plum-2). Korten ligger
-     subtilt over page-bakgrunden utan att bli för ljus. Tidigare
-     använde Ekonom --plum-2-5 (mellanvarde) - nu linjerat med
-     samma regel som Jubb. */
+     subtilt över page-bakgrunden utan att bli för ljusa. */
   --surface-page:    var(--plum-1);   /* #181118 */
   --surface-default: var(--plum-2);   /* #201320 */
   --surface-raised:  var(--plum-2);   /* #201320 - kort, paneler */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@klodd/ds",
-  "version": "3.4.4",
-  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4.4 städar åäö i CLI-skript och paket-CSS-kommentarer (preferences-regel #11: alltid å/ä/ö i svenska texter).",
+  "version": "3.5.0",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.0 tar bort LEGACY ALIASES (alla token-call-sites migrerade) och flyttar overlay-tints till egen sektion. Breaking: --accent/--bg-base/--text-primary/--accent-dim/--accent-hover/--accent-link*/--card-bg-elevated/--shadow-float/--bg-sunken/--radius-xs..4xl/--radius-pill borttagna - använd new tokens. Plus exclude-fält i CLI (klodd-ds.json) för app-specifika exkluderingar.",
   "main": "css/index.css",
   "bin": {
     "klodd-ds": "./bin/klodd-ds.js"