@profitlich/template-toolkit 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "4.0.0",
+    "version": "4.1.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -9,6 +9,7 @@
         "./dev": "./dev/Dev.js",
         "./dev/toolbar": "./dev/toolbar/Toolbar.js",
         "./scss/forward": "./scss/forward.scss",
+        "./scss/core/capsize": "./scss/core/capsize.scss",
         "./scss/core/hamburger": "./scss/core/hamburger.scss",
         "./scss/core/layout": "./scss/core/layout.scss",
         "./scss/core/mediaqueries": "./scss/core/mediaqueries.scss",

package/scss/core/capsize.scss

@@ -0,0 +1,15 @@
+// Emittiert die Capsize-Pseudo-Elemente (::before/::after mit Em-Trims)
+// für den aktuellen Selektor. Die Inhalte (welche Pseudo-Elemente, welche
+// Properties) kommen vollständig aus @capsizecss/core via der
+// Sass-Custom-Function capsize-pseudo-elements (registriert im
+// vite/capsizeSassFunctions.js des Toolkits).
+@mixin capsize($name, $fontSize, $lineHeight) {
+    $pseudo: capsize-pseudo-elements($name, $fontSize, $lineHeight);
+    @each $selector-suffix, $props in $pseudo {
+        &#{$selector-suffix} {
+            @each $prop, $val in $props {
+                #{$prop}: $val;
+            }
+        }
+    }
+}

package/scss/core/layout.scss

@@ -1,12 +1,10 @@
 @use "config";
+@use "capsize" as *;
 @use "sass:list";
 @use "sass:map";
 @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.
@@ -90,18 +88,7 @@ $mediaqueries: (
     line-height: size($layout, $lineHeight);
 
     @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;
-                }
-            }
-        }
+        @include capsize($capsize, $fontSize, $lineHeight);
     }
 
 }

package/scss/forward.scss

@@ -2,3 +2,4 @@
 @forward "core/mediaqueries";
 @forward "core/layout";
 @forward "core/hamburger";
+@forward "core/capsize";

package/vite/capsizeSassFunctions.js

@@ -1,5 +1,5 @@
 import { fromFile } from '@capsizecss/unpack';
-import { createStyleObject } from '@capsizecss/core';
+import { createStyleObject, getCapHeight } from '@capsizecss/core';
 import * as sass from 'sass';
 import { OrderedMap } from 'immutable';
 import path from 'path';
@@ -58,6 +58,22 @@ export async function createCapsizeFunctions(fontFiles) {
                 }
             }
             return new sass.SassMap(OrderedMap(entries));
+        },
+
+        'capsize-cap-height($name, $fontSize)': (args) => {
+            const name = args[0].assertString('name').text;
+            const fontSize = args[1].assertNumber('fontSize').value;
+
+            const fontMetrics = metrics[name];
+            if (!fontMetrics) {
+                throw new Error(
+                    `capsize-cap-height: Keine Metriken für Font "${name}" geladen. ` +
+                    `Verfügbar: ${Object.keys(metrics).join(', ') || '(keine)'}.`
+                );
+            }
+
+            const capHeight = getCapHeight({ fontSize, fontMetrics });
+            return new sass.SassNumber(capHeight);
         }
     };
 }