@profitlich/template-toolkit 3.0.1 → 4.0.0

package/dev/toolbar/toolbar.scss

@@ -17,7 +17,7 @@ $color--dev-grid-center: rgba(0, 0, 0, 0.2);
         // the grid is made through repition
         // 'important' because background settings are more specific than the grid settings
         background-size: calc((100% - ($columns * $gutter)) * calc(1 / $columns) + $gutter) 1px !important;
-        margin: 0 ($margin-right - calc($gutter / 2)) 0 ($margin-left - calc($gutter / 2));
+        margin: 0 calc($margin-right - calc($gutter / 2)) 0 calc($margin-left - calc($gutter / 2));
         // The grid is calculated starting from the middle
         // Thats why its necessary to add the half of the column gap to the left and right side
         width: calc(100% - $margin-right + calc($gutter / 2) - $margin-left + calc($gutter / 2));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "3.0.1",
+    "version": "4.0.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -16,10 +16,12 @@
         "./utils/MailAdresses": "./utils/MailAdresses.js",
         "./utils/MediaQueries": "./utils/MediaQueries.js",
         "./utils/Vh100": "./utils/Vh100.js",
+        "./utils/VwBody": "./utils/VwBody.js",
         "./utils/ImagesLoaded": "./utils/images-loaded/ImagesLoaded.js",
         "./scripts/copy-files": "./scripts/copy-files.js",
         "./scripts/deploy": "./scripts/deploy.js",
-        "./vite/jsonToScss": "./vite/jsonToScss.js"
+        "./vite/jsonToScss": "./vite/jsonToScss.js",
+        "./vite/capsizeSassFunctions": "./vite/capsizeSassFunctions.js"
     },
     "files": [
         "components/",
@@ -39,9 +41,17 @@
         "lil-gui": "^0.21.0"
     },
     "peerDependencies": {
+        "@capsizecss/core": ">=4.0.0",
+        "@capsizecss/unpack": ">=2.0.0",
         "@mux/mux-player": ">=3.0.0"
     },
     "peerDependenciesMeta": {
+        "@capsizecss/core": {
+            "optional": true
+        },
+        "@capsizecss/unpack": {
+            "optional": true
+        },
         "@mux/mux-player": {
             "optional": true
         }

package/scss/core/layout.scss

@@ -4,6 +4,21 @@
 @use "sass:meta";
 @use "sass:math";
 
+// capsize-trims wird ggf. von Vite via preprocessorOptions.scss.functions bereitgestellt
+// (siehe createCapsizeFunctions in vite/capsizeSassFunctions.js).
+
+// Liest das optionale Top-Level Feld `vwBasis` aus der Konsumenten-config.
+// Default 'viewport' = bisheriges Verhalten (raw vw).
+// 'body' = calc(var(--vw-body, 1vw) * X) — skaliert mit scrollbar-freier Body-Breite.
+@function _vw-basis() {
+    $vars: meta.module-variables('config');
+    $value: map.get($vars, 'vwBasis');
+    @if $value {
+        @return $value;
+    }
+    @return 'viewport';
+}
+
 // Media queries get the breakpoints
 // Breakpints get the layouts
 // Depending on the project, only a part of the layout names are used,
@@ -69,13 +84,24 @@ $mediaqueries: (
 
 
 // Font
-@mixin font($layout, $fontSize, $lineHeight, $bold:'false') {
+@mixin font($layout, $fontSize, $lineHeight, $capsize: null) {
 
     font-size: size($layout, $fontSize);
     line-height: size($layout, $lineHeight);
 
-    @if ($bold != 'false') {
-        font-weight: $bold;
+    @if ($capsize != null) {
+        // capsize-pseudo-elements() ist eine Sass-Custom-Function aus dem Toolkit-Vite-Plugin.
+        // Ruft intern @capsizecss/core.createStyleObject auf und gibt eine Sass-Map
+        // mit allen Pseudo-Element-Stilen zurück. Inhalte (welche Pseudo-Elemente,
+        // welche Properties) kommen vollständig aus Capsize.
+        $pseudo: capsize-pseudo-elements($capsize, $fontSize, $lineHeight);
+        @each $selector-suffix, $props in $pseudo {
+            &#{$selector-suffix} {
+                @each $prop, $val in $props {
+                    #{$prop}: $val;
+                }
+            }
+        }
     }
 
 }
@@ -187,7 +213,12 @@ $mediaqueries: (
     @if ($unit-type == 'px') {
         @return $number * 1px;
     } @else if ($unit-type == 'vw') {
-        @return _decimal-round(math.div($number, $width) * 100, 2) * 1vw;
+        $factor: math.div($number, $width) * 100;
+        @if (_vw-basis() == 'body') {
+            @return calc(var(--vw-body, 1vw) * #{$factor});
+        } @else {
+            @return _decimal-round($factor, 2) * 1vw;
+        }
     } @else {
         @error "Nicht unterstützter Einheitstyp '#{$unit-type}' für Layout '#{$layout}'. Nur 'px' oder 'vw' werden unterstützt.";
     }

package/utils/VwBody.js

@@ -0,0 +1,27 @@
+/**
+ * Setzt --vw-body als 1% der scrollbar-freien Body-Breite.
+ * Wird benötigt, wenn config.json vwBasis: "body" gesetzt hat.
+ */
+export class VwBody {
+    static #instance;
+    vw = 0;
+
+    constructor() {
+        this.#calculate();
+        window.addEventListener('resize', () => {
+            this.#calculate();
+        });
+    }
+
+    #calculate() {
+        this.vw = document.documentElement.clientWidth * 0.01;
+        document.documentElement.style.setProperty('--vw-body', `${this.vw}px`);
+    }
+
+    static getInstance() {
+        if (!VwBody.#instance) {
+            VwBody.#instance = new VwBody();
+        }
+        return VwBody.#instance;
+    }
+}

package/vite/capsizeSassFunctions.js

@@ -0,0 +1,92 @@
+import { fromFile } from '@capsizecss/unpack';
+import { createStyleObject } from '@capsizecss/core';
+import * as sass from 'sass';
+import { OrderedMap } from 'immutable';
+import path from 'path';
+
+/**
+ * Erzeugt ein Sass-functions-Objekt, das die Custom-Function
+ * `capsize-pseudo-elements($name, $fontSize, $lineHeight)` bereitstellt.
+ *
+ * Die Funktion ruft intern @capsizecss/core.createStyleObject auf und gibt
+ * eine Sass-Map mit allen Pseudo-Element-Stilen zurück. Beispiel-Struktur:
+ *
+ *     (
+ *       '::before': (content: '', margin-bottom: -0.123em, display: table),
+ *       '::after':  (content: '', margin-top: -0.456em, display: table),
+ *     )
+ *
+ * SCSS iteriert die Map und emittiert die Pseudo-Element-Regeln. Damit
+ * kommt das CSS-Schema (welche Properties, welche Pseudo-Elemente) komplett
+ * aus Capsize — Updates fliessen direkt durch.
+ *
+ * @param {Object<string,string>} fontFiles - Map: Font-Name → Pfad zur Font-Datei
+ * @returns {Promise<Object>} - functions-Objekt für preprocessorOptions.scss.functions
+ */
+export async function createCapsizeFunctions(fontFiles) {
+    const metrics = {};
+    for (const [name, file] of Object.entries(fontFiles)) {
+        metrics[name] = await fromFile(path.resolve(file));
+    }
+
+    return {
+        'capsize-pseudo-elements($name, $fontSize, $lineHeight)': (args) => {
+            const name = args[0].assertString('name').text;
+            const fontSize = args[1].assertNumber('fontSize').value;
+            const lineHeight = args[2].assertNumber('lineHeight').value;
+
+            const fontMetrics = metrics[name];
+            if (!fontMetrics) {
+                throw new Error(
+                    `capsize-pseudo-elements: Keine Metriken für Font "${name}" geladen. ` +
+                    `Verfügbar: ${Object.keys(metrics).join(', ') || '(keine)'}.`
+                );
+            }
+
+            // createStyleObject liefert font-size, line-height, ::before, ::after.
+            // Wir nehmen nur die Pseudo-Elemente — font-size/line-height
+            // werden im SCSS via size() aus vwBody erzeugt.
+            const styles = createStyleObject({ fontSize, leading: lineHeight, fontMetrics });
+
+            const entries = [];
+            for (const [key, val] of Object.entries(styles)) {
+                if (key.startsWith('::')) {
+                    entries.push([
+                        new sass.SassString(key, { quotes: false }),
+                        _objToSassMap(val),
+                    ]);
+                }
+            }
+            return new sass.SassMap(OrderedMap(entries));
+        }
+    };
+}
+
+// camelCase → kebab-case
+function _toKebab(s) {
+    return s.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+}
+
+// JS-Wert (number | string) → Sass-Wert (SassNumber | SassString)
+function _jsValueToSass(value) {
+    if (typeof value === 'number') {
+        return new sass.SassNumber(value);
+    }
+    if (typeof value === 'string') {
+        const m = value.match(/^(-?\d*\.?\d+)([a-z%]+)$/);
+        if (m) {
+            return new sass.SassNumber(parseFloat(m[1]), m[2]);
+        }
+        return new sass.SassString(value, { quotes: false });
+    }
+    throw new Error(`capsize-pseudo-elements: unerwarteter Wert-Typ ${typeof value}`);
+}
+
+// JS-Objekt {camelCaseKey: value} → Sass-Map (kebab-case-key, SassValue)
+function _objToSassMap(obj) {
+    const entries = Object.entries(obj).map(([key, val]) => [
+        new sass.SassString(_toKebab(key), { quotes: false }),
+        _jsValueToSass(val),
+    ]);
+    return new sass.SassMap(OrderedMap(entries));
+}