emily-css 1.0.9 → 1.0.15

package/src/generators.js

@@ -483,6 +483,38 @@ function containerUtilities() {
 `;
 }
 
+// ============================================================================
+// CODE BLOCK UTILITIES
+// ============================================================================
+// Styles pre/code elements to look like a VSCode Dark+ editor out of the box.
+// All colours are fixed VSCode Dark+ values — not config-driven, because code
+// editor chrome should always look like a code editor regardless of brand.
+function codeUtilities() {
+  return `/* Code — window chrome */
+.code-window { border-radius: 8px; overflow: hidden; border: 1px solid #3c3c3c; }
+.code-title-bar { background-color: #2d2d2d; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #3c3c3c; }
+.code-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.code-dot-red { background-color: #ff5f57; }
+.code-dot-yellow { background-color: #ffbd2e; }
+.code-dot-green { background-color: #28c840; }
+.code-filename { font-family: "Menlo", "Monaco", "Courier New", monospace; font-size: 0.85rem; color: white; margin-left: 0.5rem; }
+
+/* Code — VSCode Dark+ token colours */
+.token-tag { color: #569cd6; }
+.token-attr { color: #9cdcfe; }
+.token-string { color: #ce9178; }
+.token-number { color: #b5cea8; }
+.token-variant { color: #4ec9b0; }
+.token-utility { color: #dcdcaa; }
+.token-colour { color: #6a9955; }
+.token-comment { color: #6a9955; opacity: 0.75; font-style: italic; }
+.token-keyword { color: #c586c0; }
+.token-operator { color: #d4d4d4; }
+.token-line-number { color: #858585; user-select: none; padding-right: 1rem; display: inline-block; min-width: 2rem; text-align: right; }
+
+`;
+}
+
 module.exports = {
   displayUtilities,
   sizingUtilities,
@@ -502,5 +534,6 @@ module.exports = {
   blendUtilities,
   cursorUtilities,
   accessibilityUtilities,
-  containerUtilities
+  containerUtilities,
+  codeUtilities
 };

package/src/index.js

@@ -142,8 +142,9 @@ function generateAllColours(colourConfig) {
 // ============================================================================
 
 function generateSpacing(baseUnit, scale) {
-  // scale is now a key-value object from config
-  // Just return it as-is since values are already defined (e.g., "1rem", "4px")
+  // Spacing values are defined explicitly in emily.config.json under spacing.scale.
+  // The baseUnit key in config is informational only — it documents the design intent
+  // (e.g. "this system is based on 8px") but does not drive generation.
   return scale;
 }
 
@@ -151,30 +152,40 @@ function generateSpacing(baseUnit, scale) {
 // FONT PRESETS
 // ============================================================================
 
+// Font presets define the CSS font-family stack only.
+// Loading the actual font files is the user's responsibility — link them in your HTML
+// or use @fontsource packages in your build. emily-css does not generate @import rules
+// for external CDNs so it stays self-contained and works offline.
+// See docs: https://emilyui.com/docs/getting-started
 const FONT_PRESETS = {
   'system': {
     stack: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    googleFont: false,
   },
   'inter': {
     name: 'Inter',
     stack: '"Inter", system-ui, sans-serif',
-    googleFont: true,
-    importUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap',
   },
   'lexend': {
     name: 'Lexend',
     stack: '"Lexend", system-ui, sans-serif',
-    googleFont: true,
-    importUrl: 'https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap',
   },
   'georgia': {
     stack: 'Georgia, "Times New Roman", serif',
-    googleFont: false,
+  },
+  'dm-sans': {
+    name: 'DM Sans',
+    stack: '"DM Sans", system-ui, sans-serif',
+  },
+  'nunito': {
+    name: 'Nunito',
+    stack: '"Nunito", system-ui, sans-serif',
+  },
+  'atkinson': {
+    name: 'Atkinson Hyperlegible',
+    stack: '"Atkinson Hyperlegible", system-ui, sans-serif',
   },
   'mono': {
     stack: '"Menlo", "Monaco", "Courier New", monospace',
-    googleFont: false,
   },
 };
 
@@ -197,14 +208,6 @@ function generateFontCSS(config) {
   let fontFace = '';
   let bodyFont = '';
 
-  // 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: ${bodyPreset.stack};\n    font-synthesis: style;\n  }\n`;
   bodyFont += `  h1, h2, h3, h4, h5, h6 {\n    font-family: ${headingPreset.stack};\n  }\n`;
 
@@ -284,7 +287,8 @@ const {
   blendUtilities,
   cursorUtilities,
   accessibilityUtilities,
-  containerUtilities
+  containerUtilities,
+  codeUtilities
 } = require('./generators');
 
 // ============================================================================
@@ -471,8 +475,7 @@ function generateTypographyUtilities(config) {
   css += `.text-right { text-align: right; }\n`;
   css += `.text-justify { text-align: justify; }\n`;
 
-  // Text wrapping
-  css += `.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n`;
+  // Text wrapping (.truncate lives in overflowUtilities in generators.js — not duplicated here)
   css += `.whitespace-nowrap { white-space: nowrap; }\n`;
   css += `.whitespace-normal { white-space: normal; }\n`;
   css += `.break-words { word-break: break-word; }\n`;
@@ -582,7 +585,7 @@ function generateBaseStyles(config) {
   // Build a lookup map from font size name → CSS variable
   const fontSizeMap = {};
   (config.typography?.fontSizes || []).forEach(({ name }) => {
-    fontSizeMap[name] = `var(--emily-text-${name})`;
+    fontSizeMap[name] = `var(--text-${name})`;
   });
 
   // Line height hints per size — keeps headings tighter than body text
@@ -827,6 +830,7 @@ function buildFullFramework() {
   utilityCss += cursorUtilities();
   utilityCss += accessibilityUtilities();
   utilityCss += containerUtilities();
+  utilityCss += codeUtilities();
 
   // Add state, dark mode, and responsive variants to utilities
   utilityCss = addStateVariants(utilityCss);
@@ -887,6 +891,38 @@ function buildFullFramework() {
   p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
   }
+
+  /* Code blocks — VSCode Dark+ style by default */
+  pre {
+    background-color: #1e1e1e;
+    color: #d4d4d4;
+    padding: 1.25rem;
+    border-radius: 0 0 6px;
+    overflow-x: auto;
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875rem;
+    line-height: 1.7;
+    border: 1px solid #333;
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  /* Inline code */
+  code {
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875em;
+    background-color: #2d2d2d;
+    color: #d4d4d4;
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+  }
 ${bodyFont}`;
 
   // @font-face must sit outside @layer for broadest browser compatibility
@@ -989,8 +1025,12 @@ function build(options = {}) {
   console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
 
   if (!options.keepFull && fs.existsSync(cssPath)) {
-    fs.unlinkSync(cssPath);
-    console.log('Removed dist/emily.css for production build.');
+    try {
+      fs.unlinkSync(cssPath);
+      console.log('Removed dist/emily.css for production build.');
+    } catch (e) {
+      // Windows FUSE: can't delete, non-fatal
+    }
   }
 
   console.log('Build complete');
@@ -1018,4 +1058,5 @@ module.exports = {
   addStateVariants,
   addResponsiveVariants,
   generateFontCSS,
+  codeUtilities,
 };