feat(tokens): include fonts in package (#1405)

* feat(tokens): include fonts in package

* chore: update readme

Author: Niznikr

.changeset/empty-ears-arrive.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/tokens": patch
+---
+
+Include fonts in package

.storybook/preview.tsx

@@ -11,6 +11,7 @@ import { BrowserRouter, useNavigate } from 'react-router-dom';
 import { allModes } from './modes';
 
 import '../packages/components/src/styles/themes.css';
+import '../packages/tokens/dist/fonts.css';
 import '../packages/tokens/dist/index.css';
 import '../packages/tokens/dist/media-queries.css';
 import '../packages/tokens/dist/themes.css';

.storybook/styles.css

@@ -1,20 +1,3 @@
-@font-face {
-	font-family: inter;
-	font-style: normal;
-	font-weight: 300 800;
-	font-display: swap;
-	src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
-		format('woff2');
-}
-
-@font-face {
-	font-family: 'Audimat 3000 Regulier';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
-}
-
 .sb-main-padded.sb-show-main {
 	padding: 0;
 	margin: 0;

packages/tokens/README.md

@@ -18,6 +18,7 @@ $ npm install @launchpad-ui/tokens
 ### CSS Custom Properties
 
 ```css
+@import '@launchpad-ui/tokens/dist/fonts.css';
 @import '@launchpad-ui/tokens/dist/index.css';
 @import '@launchpad-ui/tokens/dist/media-queries.css';
 @import '@launchpad-ui/tokens/dist/themes.css';

.storybook/Audimat3000-Regulier.var-subset.woff2 renamed to packages/tokens/assets/Audimat3000-Regulier.var-subset.woff2

@@ -8,7 +8,7 @@ const sd = new StyleDictionary({
 		css: {
 			prefix: 'lp',
 			transformGroup: 'css',
-			transforms: ['name/kebab', 'time/seconds', 'size/rem', 'color/rgb'],
+			transforms: ['name/kebab', 'time/seconds', 'size/rem', 'color/rgb', 'attribute/font'],
 			buildPath: 'dist/',
 			options: {
 				outputReferences: true,
@@ -30,7 +30,13 @@ const sd = new StyleDictionary({
 					format: 'custom/media-query',
 					filter: (token) => token.filePath === 'src/viewport.json',
 				},
+				{
+					destination: 'fonts.css',
+					format: 'custom/font-face',
+					filter: (token) => token.$type === 'file',
+				},
 			],
+			actions: ['copy_assets'],
 		},
 		js: {
 			transformGroup: 'js',
@@ -105,6 +111,26 @@ sd.registerFormat({
 	},
 });
 
+sd.registerFormat({
+	name: 'custom/font-face',
+	format: async ({ dictionary }) => {
+		return dictionary.allTokens
+			.map((token) => {
+				const {
+					// @ts-expect-error attr
+					attributes: { family, weight, style },
+					formats,
+					$value,
+				} = token;
+				const urls = formats.map(
+					(extension: string) => `url("./assets/${$value}.${extension}") format("${extension}")`,
+				);
+				return `@font-face {\n\tfont-family: "${family}";\n\tfont-style: ${style};\n\tfont-weight: ${weight};\n\tsrc: ${urls.join(',\n\t\t\t ')};\n\tfont-display: swap;\n}\n`;
+			})
+			.join('\n');
+	},
+});
+
 sd.registerFormat({
 	name: 'custom/json',
 	format: async ({ dictionary, options }) => {
@@ -167,4 +193,17 @@ sd.registerTransform({
 	},
 });
 
+sd.registerTransform({
+	name: 'attribute/font',
+	type: 'attribute',
+	filter: (token) => token.$type === 'file',
+	transform: (token) => ({
+		category: token.path[0],
+		type: token.path[1],
+		family: token.path[2],
+		weight: token.path[3],
+		style: token.path[4],
+	}),
+});
+
 await sd.buildAllPlatforms();

packages/tokens/assets/Inter.var-subset.woff2

@@ -29,9 +29,11 @@
 		"./themes.css": "./dist/themes.css",
 		"./index.css": "./dist/index.css",
 		"./media-queries.css": "./dist/media-queries.css",
+		"./fonts.css": "./dist/fonts.css",
 		"./dist/themes.css": "./dist/themes.css",
 		"./dist/index.css": "./dist/index.css",
 		"./dist/media-queries.css": "./dist/media-queries.css",
+		"./dist/fonts.css": "./dist/fonts.css",
 		"./dist/contract.json": "./dist/contract.json"
 	},
 	"scripts": {

packages/tokens/build.ts

@@ -0,0 +1,23 @@
+{
+	"asset": {
+		"$type": "file",
+		"font": {
+			"Audimat 3000 Regulier": {
+				"400": {
+					"normal": {
+						"$value": "Audimat3000-Regulier.var-subset",
+						"formats": ["woff2"]
+					}
+				}
+			},
+			"Inter": {
+				"300 800": {
+					"normal": {
+						"$value": "Inter.var-subset",
+						"formats": ["woff2"]
+					}
+				}
+			}
+		}
+	}
+}

packages/tokens/package.json

@@ -2,7 +2,7 @@
 	"fontFamily": {
 		"$type": "fontFamily",
 		"base": {
-			"$value": "inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif"
+			"$value": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif"
 		},
 		"monospace": {
 			"$value": "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace"