emily-css 1.0.2 → 1.0.5

package/README.md

@@ -152,7 +152,10 @@ Edit `emily.config.json` to customise:
 
   "baseUnit": "8px",
   "baseFontSize": "16px",
-  "fontFamily": "system-ui",
+  "fontFamily": {
+    "heading": "lexend",
+    "body": "inter"
+  },
 
   "colours": {
     "primary": "#0077b6",
@@ -273,12 +276,20 @@ npx emily-css purge
 2. Run `npx emily-css build`
 3. No cache invalidation needed
 
-## CDN
+## Fonts
 
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emily-css/dist/emily.css">
+Emily includes built-in support for **Inter** and **Lexend** via Google Fonts. Set `fontFamily` in your config and the generated CSS handles the import automatically:
+
+```json
+"fontFamily": "inter"
 ```
 
+```json
+"fontFamily": "lexend"
+```
+
+To use your own font, set `fontFamily` to any value (e.g. `"system"` for system-ui), then add your own `@import` or `<link>` to your HTML before loading `emily.css`.
+
 ## Support
 
 - Website: https://www.emilyui.com

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {
@@ -9,11 +9,6 @@
   "files": [
     "bin/",
     "src/",
-    "dist/emily.css",
-    "dist/emily.min.css",
-    "dist/emily.demo.css",
-    "dist/emily.demo.min.css",
-    "fonts/",
     "README.md",
     "LICENSE"
   ],

package/src/index.js

@@ -151,57 +151,62 @@ function generateSpacing(baseUnit, scale) {
 // FONT PRESETS
 // ============================================================================
 
-// Bundled fonts live in fonts/{name}/ relative to the package root.
-// The generated CSS lives in dist/, so relative paths use ../fonts/...
 const FONT_PRESETS = {
   'system': {
     stack: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    bundled: false,
+    googleFont: false,
   },
   'inter': {
     name: 'Inter',
     stack: '"Inter", system-ui, sans-serif',
-    bundled: true,
-    file: '../fonts/inter/Inter-Variable.woff2',
-    weight: '100 900',
-    style: 'normal',
+    googleFont: true,
+    importUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap',
   },
   'lexend': {
     name: 'Lexend',
     stack: '"Lexend", system-ui, sans-serif',
-    bundled: true,
-    file: '../fonts/lexend/Lexend-Variable.woff2',
-    weight: '100 900',
-    style: 'normal',
+    googleFont: true,
+    importUrl: 'https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap',
   },
   'georgia': {
     stack: 'Georgia, "Times New Roman", serif',
-    bundled: false,
+    googleFont: false,
   },
   'mono': {
     stack: '"Menlo", "Monaco", "Courier New", monospace',
-    bundled: false,
+    googleFont: false,
   },
 };
 
 function generateFontCSS(config) {
-  const fontFamily = (config.fontFamily || 'system').toLowerCase();
-  const preset = FONT_PRESETS[fontFamily] || FONT_PRESETS['system'];
+  // Support both legacy string format and new { heading, body } object format
+  const fontConfig = config.fontFamily || 'system';
+  let headingKey, bodyKey;
+
+  if (typeof fontConfig === 'object') {
+    headingKey = (fontConfig.heading || 'system').toLowerCase();
+    bodyKey = (fontConfig.body || 'system').toLowerCase();
+  } else {
+    headingKey = fontConfig.toLowerCase();
+    bodyKey = fontConfig.toLowerCase();
+  }
+
+  const headingPreset = FONT_PRESETS[headingKey] || FONT_PRESETS['system'];
+  const bodyPreset = FONT_PRESETS[bodyKey] || FONT_PRESETS['system'];
 
   let fontFace = '';
   let bodyFont = '';
 
-  if (preset.bundled) {
-    fontFace += `@font-face {\n`;
-    fontFace += `  font-family: "${preset.name}";\n`;
-    fontFace += `  src: url("${preset.file}") format("woff2");\n`;
-    fontFace += `  font-weight: ${preset.weight};\n`;
-    fontFace += `  font-style: ${preset.style};\n`;
-    fontFace += `  font-display: swap;\n`;
-    fontFace += `}\n`;
-  }
+  // Import Google Fonts — dedupe if heading and body use the same font
+  const imports = new Set();
+  if (headingPreset.googleFont) imports.add(headingPreset.importUrl);
+  if (bodyPreset.googleFont) imports.add(bodyPreset.importUrl);
+  imports.forEach(url => {
+    fontFace += `@import url("${url}");\n`;
+  });
 
-  bodyFont = `  body {\n    font-family: ${preset.stack};\n    font-synthesis: style;\n  }\n`;
+  bodyFont += `  body {\n    font-family: ${bodyPreset.stack};\n    font-synthesis: style;\n  }\n`;
+  bodyFont += `  h1, h2, h3, h4, h5, h6 {\n    font-family: ${headingPreset.stack};\n  }\n`;
 
   return { fontFace, bodyFont };
 }
@@ -949,4 +954,5 @@ module.exports = {
   generateSpacingUtilities,
   addStateVariants,
   addResponsiveVariants,
+  generateFontCSS,
 };

package/src/init.js

@@ -38,7 +38,7 @@ function createDefaultConfig(name, colours, fonts, baseUnit, sourceDir) {
     description: `${name} design system`,
     baseUnit: `${baseUnit}px`,
     baseFontSize: '16px',
-    fontFamily: 'system-ui',
+    fontFamily: { heading: 'lexend', body: 'inter' },
     customFonts: [],
     colours,
     breakpoints: {