Feat typo scale

.eslintignore

@@ -1,3 +1,4 @@
 **/build
 **/public
 **/out
+**/helpers

.stylelintrc.json

@@ -1,3 +1,10 @@
 {
-	"extends": ["stylelint-config-sass-guidelines", "stylelint-config-prettier"]
+	"extends": [
+		"stylelint-config-sass-guidelines",
+		"stylelint-config-prettier"
+	],
+	"rules": {
+		"max-nesting-depth": null,
+		"order/order": null
+	}
 }

helpers/context-sort.js

@@ -0,0 +1,55 @@
+const sort = (arr) => {
+	return arr.sort((a, b) => {
+		const numberA = Number(a.key);
+		const numberB = Number(b.key);
+		if (numberA < numberB) {
+			return -1;
+		}
+
+		if (numberA > numberB) {
+			return 1;
+		}
+
+		return 0;
+	});
+};
+
+const getValueRecursive = (initData, results, fullKeyString) => {
+	if (initData instanceof Object) {
+		try {
+			const dataKeys = Object.keys(initData);
+			if (dataKeys.some((sKey) => sKey.includes('value'))) {
+				results.push({ key: fullKeyString, value: initData['value'] });
+			} else {
+				for (const topLvlKey of dataKeys) {
+					getValueRecursive(
+						initData[topLvlKey],
+						results,
+						`${fullKeyString}-${topLvlKey}`
+					);
+				}
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	return results;
+};
+
+module.exports = (context) => {
+	if (!context.spacing || !context.sizing) {
+		return undefined;
+	}
+	let spacings = getValueRecursive(context.spacing, [], '').map(
+		(spacing) => ({ ...spacing, key: `db-spacing${spacing.key}` })
+	);
+	let sizings = getValueRecursive(context.sizing, [], '').map((sizing) => ({
+		...sizing,
+		key: `db-sizing${sizing.key}`
+	}));
+
+	spacings = sort(spacings);
+	sizings = sort(sizings);
+	return { spacings, sizings };
+};

helpers/spacing-examples.js

@@ -1,18 +1,30 @@
 module.exports = function (Handlebars) {
-	Handlebars.registerHelper('spacing-examples', function (context) {
-		const spacingSort = require('./spacing-sort');
-		const spacings = spacingSort(context);
-		const result = spacings
-			.map(
-				(spacing) =>
-					`
-						<div>
+	Handlebars.registerHelper(
+		'spacing-examples',
+		function (context, contextObjName, tableHeader, filterKey) {
+			const contextSort = require('./context-sort');
+			const cSort = contextSort(context);
+
+			if (!cSort) {
+				return 'Error';
+			}
+
+			const result = `
+				<div style="display: flex; gap:8px; flex-direction: column">
+				<strong>${tableHeader}</strong>
+				${cSort[contextObjName]
+					.filter((s) => s.key.includes(filterKey))
+					.map(
+						(spacing) =>
+							`<div>
 						<span>spacing-${spacing.key}:</span>
-						<div style="width: ${spacing.value};" class="DO-NOT-COPY-THIS-CLASS-example-spacing"></div>
-						</div>
-					`
-			)
-			.join('</br>');
-		return new Handlebars.SafeString(result);
-	});
+						<div style="width: ${
+							Number(spacing.value) / 16
+						}rem;" class="DO-NOT-COPY-THIS-CLASS-example-spacing"></div>
+						</div>`
+					)
+					.join('')}</div>`;
+			return new Handlebars.SafeString(result);
+		}
+	);
 };

helpers/spacing-into-table.js

@@ -1,24 +1,33 @@
 module.exports = function (Handlebars) {
-	Handlebars.registerHelper('spacing-into-table', function (context) {
-		const spacingSort = require('./spacing-sort');
-		const spacings = spacingSort(context);
+	Handlebars.registerHelper(
+		'spacing-into-table',
+		function (context, contextObjName, tableHeader, filterKey) {
+			const contextSort = require('./context-sort');
+			const cSort = contextSort(context);
 
-		const tableObject = {
-			caption: 'Spacing overview',
-			headers: ['Token', 'Value', 'Ratio'],
-			rows: spacings.map((spacing) => ({
-				Token: [null, `spacing-${spacing.key}`],
-				Value: [null, spacing.value],
-				Ratio: [null, spacing.key]
-			}))
-		};
+			if (!cSort) {
+				return 'Error';
+			}
 
-		const tableStringify = JSON.stringify(tableObject).replace(
-			/"/g,
-			'"'
-		);
-		const table = `<db-table border="around" stripes="zebra" tabledata="${tableStringify}"></db-table>`;
+			const tableObject = {
+				caption: tableHeader,
+				headers: ['Token', 'Value', 'Ratio'],
+				rows: cSort[contextObjName]
+					.filter((s) => s.key.includes(filterKey))
+					.map((spacing) => ({
+						Token: [null, `${spacing.key}`],
+						Value: [null, `${Number(spacing.value) / 16} rem`],
+						Ratio: [null, Number(spacing.value) / 8]
+					}))
+			};
 
-		return new Handlebars.SafeString(table);
-	});
+			const tableStringify = JSON.stringify(tableObject).replace(
+				/"/g,
+				'&quot;'
+			);
+			const table = `<db-table border="around" stripes="zebra" tabledata="${tableStringify}"></db-table>`;
+
+			return new Handlebars.SafeString(table);
+		}
+	);
 };

package.json

@@ -13,10 +13,11 @@
   "scripts": {
     "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
     "copy:assets": "cpr assets build/assets -d",
-    "copy:font-faces": "cpr scss build/scss -o",
-    "build:style-dictionary": "node style-dictionary.js && npm run copy:font-faces",
-    "build:css": "sass source/css/db-ui-base.scss:out/css/db-ui-base.css --style=compressed --embed-sources --load-path=node_modules",
+    "copy:scss": "cpr scss build/scss -o",
+    "build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
+    "build:patternlab-css": "sass source/css/db-ui-base.scss:out/css/db-ui-base.css --style=compressed --embed-sources --load-path=node_modules",
     "build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
+    "build-test:css": "sass build/scss/_db-ui.scss:build/css/db-ui.css --load-path=node_modules",
     "build": "npm-run-all copy:assets build:* pl:build",
     "clean": "rm -rf build",
     "lint": "npm-run-all -p lint:*",
@@ -26,7 +27,7 @@
     "start": "npm-run-all build:style-dictionary --parallel pl:serve watch:tokens watch:scss",
     "test": "exit 0",
     "watch:tokens": "nodemon --watch tokens/ -e json -x \"npm run build:style-dictionary\"",
-    "watch:scss": "nodemon --watch source/_patterns/ -e scss -x \"npm run build:css\"",
+    "watch:scss": "nodemon --watch source/_patterns/ -e scss -x \"npm run build:patternlab-css\"",
     "pl:build": "patternlab build --config ./patternlab-config.json",
     "pl:help": "patternlab --help",
     "pl:install": "patternlab install --config ./patternlab-config.json",

scripts/scss-scaling-generator.js

@@ -0,0 +1,57 @@
+const fileHeader =
+	'\n' +
+	'// Do not edit directly\n' +
+	'// Generated on ' +
+	new Date().toString() +
+	'\n';
+
+const generateSpacings = (utility) => {
+	let allClasses = fileHeader;
+
+	const scaleTypeKey = ['normal', 'functional', 'expressive'];
+
+	for (const scale of scaleTypeKey) {
+		allClasses += `
+${utility ? '.' : '%'}db-scaling-${scale}{
+\t--db-sizing-xs: #{$db-sizing-${scale}-xs};
+\t--db-sizing-sm: #{$db-sizing-${scale}-s};
+\t--db-sizing-md: #{$db-sizing-${scale}-m};
+\t--db-sizing-lg: #{$db-sizing-${scale}-l};
+
+\t--db-spacing-fixed-3xs: #{$db-spacing-fixed-${scale}-3xs};
+\t--db-spacing-fixed-2xs: #{$db-spacing-fixed-${scale}-2xs};
+\t--db-spacing-fixed-xs: #{$db-spacing-fixed-${scale}-xs};
+\t--db-spacing-fixed-sm: #{$db-spacing-fixed-${scale}-s};
+\t--db-spacing-fixed-md: #{$db-spacing-fixed-${scale}-m};
+\t--db-spacing-fixed-lg: #{$db-spacing-fixed-${scale}-l};
+\t--db-spacing-fixed-xl: #{$db-spacing-fixed-${scale}-xl};
+
+\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-mobile-xs};
+\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-mobile-s};
+\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-mobile-m};
+\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-mobile-l};
+\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-mobile-xl};
+
+\t@media only screen and (min-width: $db-screens-md) {
+\t\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-tablet-xs};
+\t\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-tablet-s};
+\t\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-tablet-m};
+\t\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-tablet-l};
+\t\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-tablet-xl};
+\t}
+
+\t@media only screen and (min-width: $db-screens-lg) {
+\t\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-desktop-xs};
+\t\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-desktop-s};
+\t\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-desktop-m};
+\t\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-desktop-l};
+\t\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-desktop-xl};
+\t}
+}
+`;
+	}
+
+	return allClasses;
+};
+
+module.exports = generateSpacings;