Merge pull request #10 from balena-io-modules/add_typography_tokens

Add typography tokens

config.json5

@@ -2,29 +2,42 @@
 	source: ['tokens/**/*.json'],
 	platforms: {
 		css: {
-			transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
-			transformGroup: 'css',
+			transforms: [
+				'attribute/cti',
+				'name/cti/kebab',
+				'color/css',
+				'custom/pxToRem',
+			],
 			buildPath: 'build/css/',
 			options: {
 				outputReferences: true,
 			},
 			files: [
 				{
 					destination: 'tokens.css',
+					filter: 'remove-useless-tokens',
 					format: 'css/variables',
 				},
 			],
 		},
 		js: {
-			transforms: ['attribute/cti', 'name/cti/pascal', 'size/rem', 'color/css'],
+			transforms: [
+				'attribute/cti',
+				'name/cti/pascal',
+				'size/rem',
+				'color/css',
+				'custom/pxToRem',
+			],
 			buildPath: 'build/js/',
 			files: [
 				{
 					destination: 'tokens.js',
+					filter: 'remove-useless-tokens',
 					format: 'javascript/esm',
 				},
 				{
 					destination: 'tokens.d.ts',
+					filter: 'remove-useless-tokens',
 					format: 'typescript/esm-declarations',
 				},
 			],
@@ -35,6 +48,7 @@
 			files: [
 				{
 					destination: 'tokens.json',
+					filter: 'remove-useless-tokens',
 					format: 'json/flat-with-references',
 				},
 			],

scripts/transform.ts

@@ -11,6 +11,18 @@ import {
 } from 'style-dictionary';
 const { fileHeader, getTypeScriptType } = StyleDictionary.formatHelpers;
 
+const USELESS_TOKENS = [
+	'textDecoration',
+	'fontFamily',
+	'fontStyle',
+	'fontStretch',
+	'letterSpacing',
+	'paragraphIndent',
+	'paragraphSpacing',
+];
+
+const BASE_FONT_SIZE = 14;
+
 StyleDictionary.registerFormat({
 	name: 'javascript/esm',
 	formatter: ({ dictionary, file }: { dictionary: Dictionary; file: File }) => {
@@ -56,12 +68,35 @@ StyleDictionary.registerFormat({
 });
 
 StyleDictionary.registerFormat({
-	name: `json/flat-with-references`,
+	name: 'json/flat-with-references',
 	formatter: function ({ dictionary }) {
 		return JSON.stringify(dictionary.allTokens, null, 2);
 	},
 });
 
+StyleDictionary.registerFilter({
+	name: 'remove-useless-tokens',
+	matcher: (token: TransformedToken) => {
+		if (token.attributes.category !== 'typography') {
+			return true;
+		}
+
+		const lastItem = token.path.slice(-1)[0];
+		return !USELESS_TOKENS.includes(lastItem);
+	},
+});
+
+StyleDictionary.registerTransform({
+	name: 'custom/pxToRem',
+	type: 'value',
+	matcher: (token: TransformedToken) =>
+		token.path.slice(-1)[0] === 'fontSize' ||
+		token.path.slice(-1)[0] === 'lineHeight',
+	transformer: (token: TransformedToken) => {
+		return `${pxToBaseSize(token.value)}rem`;
+	},
+});
+
 /**
  * Remove the 'default' path from the tokens and strip the
  * tokens from everything except `value`
@@ -103,4 +138,10 @@ function addTokenToObject(
 	return obj;
 }
 
+function pxToBaseSize(value: number, decimals = 3) {
+	return (value / BASE_FONT_SIZE).toLocaleString(undefined, {
+		maximumFractionDigits: decimals,
+	});
+}
+
 StyleDictionary.buildAllPlatforms();