@aleph-alpha/config-css 0.20.0 → 0.21.1

package/eslint.config.mjs

@@ -0,0 +1,20 @@
+import { base, strict } from '@aleph-alpha/eslint-config-frontend';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+import jsdoc from 'eslint-plugin-jsdoc';
+
+export default [
+  ...base,
+  ...strict,
+  {
+    ignores: ['.lintstagedrc.js', 'test/unit/coverage/*'],
+    rules: {
+      'sonarjs/todo-tag': 'warn',
+    },
+  },
+  jsdoc.configs['flat/recommended'],
+  {
+    files: ['**/*.ts'],
+    ignores: ['**/*.test.ts', '**/*.stories.ts'],
+  },
+  skipFormatting,
+];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "style-dictionary": "^4.0.1",
     "vite-plugin-dts": "^4.0.0",
-    "@aleph-alpha/eslint-config-frontend": "0.4.0",
+    "@aleph-alpha/eslint-config-frontend": "0.5.0",
     "@aleph-alpha/prettier-config-frontend": "0.4.0"
   },
   "scripts": {

package/src/presetWebFontsAlephAlpha.ts

@@ -12,6 +12,13 @@ import { inter500 } from './assets/fonts/inter500.woff2';
 import { inter600 } from './assets/fonts/inter600.woff2';
 import { inter700 } from './assets/fonts/inter700.woff2';
 
+const LEGACY_DATA_URI_PREFIX = 'data:@file/octet-stream;base64,';
+
+const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff2') => {
+  if (!fontDataUri.startsWith(LEGACY_DATA_URI_PREFIX)) return fontDataUri;
+  return `data:${mimeType};base64,${fontDataUri.slice(LEGACY_DATA_URI_PREFIX.length)}`;
+};
+
 export const presetWebFontsAlephAlpha = (): Preset => ({
   name: '@aleph-alpha/ds-fonts',
   theme: {
@@ -25,28 +32,45 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
   preflights: [
     {
       getCSS() {
+        const raleway500Src = normalizeEmbeddedFontDataUri(raleway500);
+        const raleway600Src = normalizeEmbeddedFontDataUri(raleway600);
+        const raleway700Src = normalizeEmbeddedFontDataUri(raleway700);
+        const roboto500Src = normalizeEmbeddedFontDataUri(roboto500);
+        const roboto700Src = normalizeEmbeddedFontDataUri(roboto700);
+        const montserrat500Src = normalizeEmbeddedFontDataUri(montserrat500);
+        const montserrat600Src = normalizeEmbeddedFontDataUri(montserrat600);
+        const montserrat700Src = normalizeEmbeddedFontDataUri(montserrat700);
+        const inter400Src = normalizeEmbeddedFontDataUri(inter400);
+        const inter500Src = normalizeEmbeddedFontDataUri(inter500);
+        const inter600Src = normalizeEmbeddedFontDataUri(inter600);
+        const inter700Src = normalizeEmbeddedFontDataUri(inter700);
+
         return `
+          :root {
+            --custom-font-family: Raleway;
+          }
+
           /* Raleway fonts (legacy support) */
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
             font-style: normal;
             font-weight: 500;
-            src: url('${raleway500}') format('woff2');
+            src: url('${raleway500Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
             font-style: normal;
             font-weight: 600;
-            src: url('${raleway600}') format('woff2');
+            src: url('${raleway600Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Raleway';
             font-style: normal;
             font-weight: 700;
-            src: url('${raleway700}') format('woff2');
+            src: url('${raleway700Src}') format('woff2');
           }
           
           /* Roboto fonts (legacy support) */
@@ -55,21 +79,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-family: 'Roboto';
             font-style: normal;
             font-weight: 500;
-            src: url('${roboto500}') format('woff');
+            src: url('${roboto500Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Roboto';
             font-style: normal;
             font-weight: 600;
-            src: url('${roboto500}') format('woff');
+            src: url('${roboto500Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Roboto';
             font-style: normal;
             font-weight: 700;
-            src: url('${roboto700}') format('woff');
+            src: url('${roboto700Src}') format('woff2');
           }
           
           /* Montserrat fonts (new design system) */
@@ -78,21 +102,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-family: 'Montserrat';
             font-style: normal;
             font-weight: 500;
-            src: url('${montserrat500}') format('woff2');
+            src: url('${montserrat500Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Montserrat';
             font-style: normal;
             font-weight: 600;
-            src: url('${montserrat600}') format('woff2');
+            src: url('${montserrat600Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Montserrat';
             font-style: normal;
             font-weight: 700;
-            src: url('${montserrat700}') format('woff2');
+            src: url('${montserrat700Src}') format('woff2');
           }
           
           /* Inter fonts (new design system) */
@@ -101,28 +125,28 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
             font-family: 'Inter';
             font-style: normal;
             font-weight: 400;
-            src: url('${inter400}') format('woff2');
+            src: url('${inter400Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Inter';
             font-style: normal;
             font-weight: 500;
-            src: url('${inter500}') format('woff2');
+            src: url('${inter500Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Inter';
             font-style: normal;
             font-weight: 600;
-            src: url('${inter600}') format('woff2');
+            src: url('${inter600Src}') format('woff2');
           }
           @font-face {
             font-display: swap;
             font-family: 'Inter';
             font-style: normal;
             font-weight: 700;
-            src: url('${inter700}') format('woff2');
+            src: url('${inter700Src}') format('woff2');
           }
           `;
       },

package/src/utils/convert-fonts.js

@@ -16,7 +16,7 @@ function convertWoff2ToTs(inputFile, outputFile) {
 
     // Create the TypeScript content
     const tsContent = `export const ${fontName} =
-  'data:@file/octet-stream;base64,${base64}';`;
+  'data:font/woff2;base64,${base64}';`;
 
     // Write the TypeScript file
     fs.writeFileSync(outputFile, tsContent);

package/tokens.json

@@ -2069,4 +2069,4 @@
       "Spark Text/Mode 1"
     ]
   }
-}
+}

package/tsconfig.json

@@ -1,15 +1,14 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "emitDeclarationOnly": true,
     "declaration": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
+    "emitDeclarationOnly": true,
     "esModuleInterop": true,
-    "moduleResolution":"node",
-    "lib": ["ES2021.String"]
+    "lib": ["ES2021.String"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"]
 }

package/eslint.config.js

@@ -1,25 +0,0 @@
-import mainConfig from '@aleph-alpha/eslint-config-frontend/eslint.config.js';
-import eslintConfigPrettier from 'eslint-config-prettier';
-import jsdoc from 'eslint-plugin-jsdoc';
-
-export default [
-  mainConfig.config,
-  ...mainConfig.plugins,
-  {
-    ignores: ['.lintstagedrc.js', 'node_modules/*', 'dist/*', 'test/unit/coverage/*'],
-    rules: {
-      'no-unused-vars': 'off',
-      'sonarjs/todo-tag': 'warn',
-    },
-  },
-  /**
-   * Rules to enforce JSDoc comments on interface, types and enums.
-   * This way we have all interfaces of our components properly documented.
-   */
-  jsdoc.configs['flat/recommended'],
-  {
-    files: ['**/*.ts'],
-    ignores: ['**/*.test.ts', '**/*.stories.ts'],
-  },
-  eslintConfigPrettier,
-];