@aleph-alpha/config-css 0.17.20 → 0.18.0

package/src/presetWebFontsAlephAlpha.ts

@@ -4,18 +4,29 @@ import { raleway600 } from './assets/fonts/raleway600.woff2';
 import { raleway700 } from './assets/fonts/raleway700.woff2';
 import { roboto500 } from './assets/fonts/roboto500.woff2';
 import { roboto700 } from './assets/fonts/roboto700.woff2';
+import { montserrat500 } from './assets/fonts/montserrat500.woff2';
+import { montserrat600 } from './assets/fonts/montserrat600.woff2';
+import { montserrat700 } from './assets/fonts/montserrat700.woff2';
+import { inter400 } from './assets/fonts/inter400.woff2';
+import { inter500 } from './assets/fonts/inter500.woff2';
+import { inter600 } from './assets/fonts/inter600.woff2';
+import { inter700 } from './assets/fonts/inter700.woff2';
 
 export const presetWebFontsAlephAlpha = (): Preset => ({
   name: '@aleph-alpha/ds-fonts',
   theme: {
     fontFamily: {
       sans: 'var(--custom-font-family, Raleway), sans-serif',
+      montserrat: 'Montserrat, sans-serif',
+      inter: 'Inter, sans-serif',
+      raleway: 'Raleway, sans-serif',
     },
   },
   preflights: [
     {
       getCSS() {
         return `
+          /* Raleway fonts (legacy support) */
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
@@ -23,7 +34,6 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-weight: 500;
             src: url('${raleway500}') format('woff2');
           }
-          /* raleway-600 - latin */
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
@@ -31,7 +41,6 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-weight: 600;
             src: url('${raleway600}') format('woff2');
           }
-          /* raleway-700 - latin */
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
@@ -39,6 +48,8 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-weight: 700;
             src: url('${raleway700}') format('woff2');
           }
+          
+          /* Roboto fonts (legacy support) */
           @font-face {
             font-display: swap;
             font-family: 'Roboto';
@@ -60,6 +71,59 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-weight: 700;
             src: url('${roboto700}') format('woff');
           }
+          
+          /* Montserrat fonts (new design system) */
+          @font-face {
+            font-display: swap;
+            font-family: 'Montserrat';
+            font-style: normal;
+            font-weight: 500;
+            src: url('${montserrat500}') format('woff2');
+          }
+          @font-face {
+            font-display: swap;
+            font-family: 'Montserrat';
+            font-style: normal;
+            font-weight: 600;
+            src: url('${montserrat600}') format('woff2');
+          }
+          @font-face {
+            font-display: swap;
+            font-family: 'Montserrat';
+            font-style: normal;
+            font-weight: 700;
+            src: url('${montserrat700}') format('woff2');
+          }
+          
+          /* Inter fonts (new design system) */
+          @font-face {
+            font-display: swap;
+            font-family: 'Inter';
+            font-style: normal;
+            font-weight: 400;
+            src: url('${inter400}') format('woff2');
+          }
+          @font-face {
+            font-display: swap;
+            font-family: 'Inter';
+            font-style: normal;
+            font-weight: 500;
+            src: url('${inter500}') format('woff2');
+          }
+          @font-face {
+            font-display: swap;
+            font-family: 'Inter';
+            font-style: normal;
+            font-weight: 600;
+            src: url('${inter600}') format('woff2');
+          }
+          @font-face {
+            font-display: swap;
+            font-family: 'Inter';
+            font-style: normal;
+            font-weight: 700;
+            src: url('${inter700}') format('woff2');
+          }
           `;
       },
     },

package/src/utils/convert-fonts.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+
+function convertWoff2ToTs(inputFile, outputFile) {
+  try {
+    // Read the woff2 file
+    const woff2Buffer = fs.readFileSync(inputFile);
+
+    // Convert to base64
+    const base64 = woff2Buffer.toString('base64');
+
+    // Extract the font name without extension for the const name
+    const fontName = path.basename(outputFile, '.ts').replace('.woff2', '');
+
+    // Create the TypeScript content
+    const tsContent = `export const ${fontName} =
+  'data:@file/octet-stream;base64,${base64}';`;
+
+    // Write the TypeScript file
+    fs.writeFileSync(outputFile, tsContent);
+
+    console.log(`✅ Converted ${inputFile} to ${outputFile}`);
+  } catch (error) {
+    console.error(`❌ Error converting ${inputFile}:`, error.message);
+  }
+}
+
+// Get command line arguments
+const args = process.argv.slice(2);
+
+if (args.length < 2) {
+  console.log('Usage: node convert-fonts.js <input.woff2> <output.ts>');
+  console.log('Example: node convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts');
+  process.exit(1);
+}
+
+const inputFile = args[0];
+const outputFile = args[1];
+
+// Check if input file exists
+if (!fs.existsSync(inputFile)) {
+  console.error(`❌ Input file ${inputFile} does not exist`);
+  process.exit(1);
+}
+
+convertWoff2ToTs(inputFile, outputFile);