feat: noto sans eu

.xo-config.cjs

@@ -1,6 +1,10 @@
 module.exports = {
 	prettier: true,
-	ignores: ['./showcases/nuxt-showcase/**', './packages/migration/**'],
+	ignores: [
+		'./showcases/nuxt-showcase/**',
+		'./packages/migration/**',
+		'./packages/foundations/assets/**'
+	],
 	overrides: [
 		{
 			files: ['./showcases/angular-showcase/**'],

packages/foundations/assets/fonts/README.md

@@ -0,0 +1,23 @@
+# Generate fonts
+
+To generate optimal fonts we use [fonttools](https://github.com/fonttools/fonttools). To use the tools you need python installed:
+
+1. Install [python](https://docs.python-guide.org/starting/installation/#installation) and [ensure that you can run Python from the command line](https://packaging.python.org/en/latest/tutorials/installing-packages/#ensure-you-can-run-python-from-the-command-line)
+2. Install fonttools: `pip3 install fonttools`
+3. Install brotli: `pip3 install brotli`
+
+Afterward, you can generate a font by running the following command:
+
+```shell
+pyftsubset NotoSans-Regular.ttf --layout-features=* --flavor=woff2 --unicodes-file=unicode-eu.txt --output-file=NotoSans-Regular-EU.woff2
+```
+
+## Local development
+
+You can use `packages/foundations/assets/fonts/generate-eu-fonts.ts` to generate all fonts inside this directory. To do so, run the following command:
+
+```shell
+node packages/foundations/assets/fonts/generate-eu-fonts.ts
+```
+
+To check if everything works fine you can check all glyphs with an [opentype.js.org glyph inspector tool](https://opentype.js.org/glyph-inspector.html).

packages/foundations/assets/fonts/generate-eu-fonts.ts

@@ -0,0 +1,40 @@
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+import { glob } from 'glob';
+
+const execAsync = promisify(exec);
+
+const generateFonts = async () => {
+	console.log('Generating EU fonts...');
+	try {
+		await execAsync('pyftsubset --help');
+	} catch (e) {
+		console.warn(
+			'You need to install pyftsubset. Check packages/foundations/assets/fonts/README.md for more information.'
+		);
+	}
+
+	try {
+		const files = await glob('**/*.ttf');
+		const commands = files.map((file) =>
+			[
+				'pyftsubset',
+				file,
+				'--layout-features=*',
+				'--flavor=woff2',
+				'--unicodes-file=unicode-eu.txt',
+				`--output-file=${file.replace('.ttf', '-EU.woff2')}`
+			].join(' ')
+		);
+
+		for (const command of commands) {
+			const { stdout, stderr } = await execAsync(command);
+			if (stdout) console.log(`stdout: ${stdout}`);
+			if (stderr) console.error(`stderr: ${stderr}`);
+		}
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+	}
+};
+
+void generateFonts();

packages/foundations/assets/fonts/unicode-eu.txt

@@ -0,0 +1,17 @@
+# compare to https://symbl.cc/de/unicode-table/
+U+0000-024F # Latin (all)
+U+0020,U+0009,U+000A,U+000D # white space characters
+U+02B0-02FF # Spacing Modifier Letters
+U+0300-036F # Combining Diacritical Marks
+U+00C0-00FF # accented characters
+U+00E4,U+00F6,U+00FC,U+00DF # German characters
+U+00E9, U+00E8, U+00EA, U+00E0, U+00E7, U+0153 # French characters
+U+00E0, U+00E8, U+00E9, U+00F2, U+00F9, U+00EC, U+00C0, U+00C8, U+00C9, U+00D2, U+00D9, U+00CC # Italian characters
+U+FB00, U+FB01, U+FB02, U+FB03, U+FB04, U+FB05, U+FB06 # ligatures
+U+00E1, U+00E9, U+00ED, U+00F3, U+00FA, U+00F1, U+00BF, U+00A1 # Spanish characters
+U+00E5, U+00F8, U+00E6, U+00C5, U+00D8, U+00C6 # Scandinavian characters
+U+0104, U+0105, U+0106, U+0107, U+0118, U+0119, U+0141, U+0142, U+0143, U+0144, U+015A, U+015B, U+0179, U+017A, U+017B, U+017C # Polish characters
+U+010C, U+010D, U+010E, U+010F, U+011A, U+011B, U+0147, U+0148, U+0158, U+0159, U+0160, U+0161, U+0164, U+0165, U+016E, U+016F, U+017D, U+017E # Czech characters
+U+00E9, U+00E8, U+00EB, U+00E4, U+00FC, U+00F6, U+00EF, U+00C9, U+00C8, U+00CB, U+00C4, U+00DC, U+00D6, U+00CF # Netherlands characters
+U+0391-03A9, U+03B1-03C9 # Greek characters
+U+0410-042F, U+0430-044F # Cyrillic characters

packages/foundations/assets/icons/functional/fonts/default/test.ts

@@ -0,0 +1,111 @@
+import * as fs from 'fs/promises';
+import * as xml2js from 'xml2js';
+import { glob } from 'glob';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+const inputFilePath = 'db-ux.woff2';
+const ttxFilePath = 'db-ux.ttx';
+const outputFilePath = 'db-ux#clean.ttx';
+const namesToRemove = ['airplane', 'alarm_clock', 'alarm_clock_plus']; // Add the names you want to remove
+
+const processFile = async () => {
+	try {
+		const data = await fs.readFile(ttxFilePath, 'utf8');
+		const result = await xml2js.parseStringPromise(data);
+
+		if (result && result.ttFont) {
+			const nameFilter = {
+				GlyphOrder: 'GlyphID',
+				hmtx: 'mtx',
+				glyf: 'TTGlyph',
+				post: 'psName'
+			};
+
+			for (const [key, value] of Object.entries(nameFilter)) {
+				let xmlGroup = result.ttFont[key]?.[0];
+				if (key === 'post') {
+					xmlGroup = result.ttFont[key]?.[0]?.extraNames?.[0];
+				}
+				if (xmlGroup && xmlGroup[value]) {
+					xmlGroup[value] = xmlGroup[value].filter(
+						(entry: any) => !namesToRemove.includes(entry.$.name)
+					);
+				}
+			}
+
+			// Remove Ligature elements
+			if (
+				result.ttFont.GSUB &&
+				result.ttFont.GSUB[0].LookupList &&
+				result.ttFont.GSUB[0].LookupList[0].Lookup
+			) {
+				for (const lookup of result.ttFont.GSUB[0].LookupList[0]
+					.Lookup) {
+					if (
+						lookup.LigatureSubst &&
+						lookup.LigatureSubst[0].LigatureSet
+					) {
+						for (const ligatureSet of lookup.LigatureSubst[0]
+							.LigatureSet) {
+							if (ligatureSet.Ligature) {
+								ligatureSet.Ligature =
+									ligatureSet.Ligature.filter(
+										(ligature: any) =>
+											!namesToRemove.includes(
+												ligature.$.glyph
+											)
+									);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		const builder = new xml2js.Builder();
+		const xml = builder.buildObject(result);
+
+		await fs.writeFile(outputFilePath, xml);
+		console.log('File successfully written to', outputFilePath);
+	} catch (err) {
+		console.error('Error:', err);
+	}
+};
+
+const runTTX = async (compile?: boolean) => {
+	try {
+		await execAsync('ttx -h');
+	} catch (e) {
+		console.warn(
+			'You need to install ttx. Check https://fonttools.readthedocs.io/en/stable/index.html for more information.'
+		);
+	}
+
+	try {
+		const files = await glob(inputFilePath);
+		const commands = files.map((file) =>
+			compile
+				? ['ttx', outputFilePath, '--flavor=woff2'].join(' ')
+				: ['ttx', file, '-o', ttxFilePath].join(' ')
+		);
+
+		for (const command of commands) {
+			const { stdout, stderr } = await execAsync(command);
+			if (stdout) console.log(`stdout: ${stdout}`);
+			if (stderr) console.error(`stderr: ${stderr}`);
+		}
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+	}
+};
+
+const runAll = async () => {
+	await runTTX();
+	await processFile();
+	await runTTX(true);
+};
+
+void runAll();

packages/foundations/package.json

@@ -48,6 +48,7 @@
     "cpr": "3.0.1",
     "cssnano": "^7.0.6",
     "dotenv": "^16.4.7",
+    "glob": "11.0.0",
     "nodemon": "3.1.9",
     "sass": "1.77.4",
     "tsx": "^4.19.2",

packages/foundations/scss/fonts/include.scss

@@ -4,49 +4,54 @@
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 300;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Thin.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Thin-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 400;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Regular.woff2")
+	src: url("#{assets-paths.$fonts-path}NotoSans-Regular-EU.woff2")
 		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 500;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Medium.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Medium-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 600;
-	src: url("#{assets-paths.$fonts-path}NotoSans-SemiBold.woff2")
+	src: url("#{assets-paths.$fonts-path}NotoSans-SemiBold-EU.woff2")
 		format("woff2");
 }
 
 @font-face {
 	font-family: NotoSans;
 	font-style: normal;
 	font-weight: 700;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Bold.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Bold-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: "NotoSans Head";
 	font-style: normal;
 	font-weight: 300;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Light.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Light-EU.woff2")
+		format("woff2");
 }
 
 @font-face {
 	font-family: "NotoSans Head";
 	font-style: normal;
 	font-weight: 900;
-	src: url("#{assets-paths.$fonts-path}NotoSans-Black.woff2") format("woff2");
+	src: url("#{assets-paths.$fonts-path}NotoSans-Black-EU.woff2")
+		format("woff2");
 }