Feat spacing

.eslintignore

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

.stylelintrc.json

@@ -4,6 +4,7 @@
 		"stylelint-config-prettier"
 	],
 	"rules": {
-		"max-nesting-depth": null
+		"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);
+		}
+	);
 };

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;

scripts/zeplin-styleguide.js

@@ -107,7 +107,6 @@ const shortenTypographyRecursive = (data) => {
 					}
 
 					result[topLvlKey] = {
-						// TODO: Fix values after update in zeplin
 						lineHeight: {
 							value:
 								Number(foundValue.lineHeight) /
@@ -137,7 +136,6 @@ const shortenTypographyRecursive = (data) => {
 
 const convertTextStyles = (data) => {
 	const keys = Object.keys(data.textStyles);
-
 	const newTextStyles = {};
 	for (const key of keys.filter((key) => {
 		return (
@@ -162,35 +160,50 @@ const convertTextStyles = (data) => {
 };
 
 const convertSpacings = (data) => {
-	const keys = Object.keys(data.spacing);
-	const newSpacings = {};
+	const keys = Object.keys(data.spacing).filter(
+		(key) => !key.includes('-base')
+	);
+	const spacings = {};
+	const sizes = {};
 	for (const key of keys) {
 		const spacing = data.spacing[key];
-		const containsDot = key.split('-').length === 3;
-		let cKey = containsDot ? key.replace('-5', '.5') : key;
-		cKey = cKey.replace('spacing-', '');
-		newSpacings[cKey] = {
-			value: `${spacing.value}px`
-		};
+		if (key?.includes('sizing')) {
+			sizes[key.replace('sizing-', '')] = {
+				value: `${spacing.value}`,
+				attributes: {
+					category: 'dynamic-size'
+				}
+			};
+		} else {
+			spacings[key.replace('spacing-', '')] = {
+				value: `${spacing.value}`,
+				attributes: {
+					category: 'dynamic-size'
+				}
+			};
+		}
 	}
 
-	data.spacing = newSpacings;
+	data.sizing = mergeData(sizes);
+	data.spacing = mergeData(spacings);
 };
 
 (async () => {
 	try {
 		const { data } = await zeplin.designTokens.getStyleguideDesignTokens(
 			'63037ab49bdcb913c9228718'
 		);
+
 		convertColors(data);
 		convertTextStyles(data);
 		convertSpacings(data);
 
 		FS.writeFileSync(
 			'./tokens/zeplin.json',
 			JSON.stringify({
-				typography: data.textStyles,
 				spacing: data.spacing,
+				sizing: data.sizing,
+				typography: data.textStyles,
 				colors: data.colors
 			})
 		);

scss/_db-ui.scss

@@ -1,6 +1,48 @@
+@import "variables";
+@import "font-faces";
+@import "typography-placeholder";
+@import "scaling-placeholder";
+
+:root {
+	@extend %db-scaling-normal;
+
+	$db-sizing-xs: var(--db-sizing-xs);
+	$db-sizing-sm: var(--db-sizing-sm);
+	$db-sizing-md: var(--db-sizing-md);
+	$db-sizing-lg: var(--db-sizing-lg);
+
+	$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
+	$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
+	$db-spacing-fixed-xs: var(--db-db-spacing-fixed-xs);
+	$db-spacing-fixed-sm: var(--db-db-spacing-fixed-sm);
+	$db-spacing-fixed-md: var(--db-spacing-fixed-md);
+	$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
+	$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
+
+	$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
+	$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
+	$db-spacing-responsive-md: var(--db-spacing-responsive-md);
+	$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
+	$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
+
+	font-family: $db-font-family-sans;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: $db-font-family-head;
+	}
+}
+
 @mixin styles($styles...) {
 	@for $i from 0 to length($styles) {
-		%db-ui-#{nth($styles, $i + 1)} {
+		%db-ui-#{nth($styles, $i + 1)},
+		.db-ui-#{nth($styles, $i + 1)} {
+			@extend %db-scaling-#{nth($styles, $i + 1)};
+
 			@extend %db-#{nth($styles, $i + 1)}-body-md;
 
 			small {

source/_patterns/sizings/_examples.demonstration.scss

@@ -0,0 +1,4 @@
+.DO-NOT-COPY-THIS-CLASS-example-spacing {
+	height: 8px;
+	background-color: $db-colors-primary-bg-light-enabled;
+}