@forgespace/branding-mcp 0.4.0

package/src/__tests__/unit/design-tokens.test.ts

@@ -0,0 +1,184 @@
+import { exportDesignTokens } from '../../lib/branding-core/exporters/design-tokens.js';
+import { exportCssVariables } from '../../lib/branding-core/exporters/css-variables.js';
+import { exportTailwindPreset } from '../../lib/branding-core/exporters/tailwind-preset.js';
+import { exportSassVariables } from '../../lib/branding-core/exporters/sass-variables.js';
+import { exportReactTheme } from '../../lib/branding-core/exporters/react-theme.js';
+import { exportFigmaTokens } from '../../lib/branding-core/exporters/figma-tokens.js';
+import { generateColorPalette } from '../../lib/branding-core/generators/color-palette.js';
+import { generateTypographySystem } from '../../lib/branding-core/generators/typography-system.js';
+import { generateSpacingScale } from '../../lib/branding-core/generators/spacing-scale.js';
+import { generateShadowSystem } from '../../lib/branding-core/generators/shadow-system.js';
+import { generateBorderSystem } from '../../lib/branding-core/generators/border-system.js';
+import { generateMotionSystem } from '../../lib/branding-core/generators/motion-system.js';
+import type { BrandIdentity } from '../../lib/types.js';
+
+function createTestBrand(): BrandIdentity {
+  return {
+    id: 'test_brand',
+    name: 'Test Brand',
+    industry: 'tech',
+    style: 'tech',
+    colors: generateColorPalette('#6B4CE6'),
+    typography: generateTypographySystem(),
+    spacing: generateSpacingScale(),
+    createdAt: '2026-01-01T00:00:00Z',
+  };
+}
+
+function createFullTestBrand(): BrandIdentity {
+  return {
+    ...createTestBrand(),
+    shadows: generateShadowSystem('#6B4CE6'),
+    borders: generateBorderSystem('tech'),
+    motion: generateMotionSystem('tech'),
+  };
+}
+
+describe('exportDesignTokens', () => {
+  it('exports W3C format tokens', () => {
+    const tokens = exportDesignTokens(createTestBrand());
+    expect(tokens.$schema).toContain('design-tokens');
+    expect(tokens.color).toBeDefined();
+    expect(tokens.typography).toBeDefined();
+    expect(tokens.spacing).toBeDefined();
+  });
+
+  it('includes primary color token', () => {
+    const tokens = exportDesignTokens(createTestBrand());
+    expect(tokens.color.primary).toBeDefined();
+    expect(tokens.color.primary.value.$type).toBe('color');
+  });
+
+  it('includes typography font tokens', () => {
+    const tokens = exportDesignTokens(createTestBrand());
+    expect(tokens.typography['font-heading']).toBeDefined();
+    expect(tokens.typography['font-body']).toBeDefined();
+  });
+
+  it('includes spacing tokens', () => {
+    const tokens = exportDesignTokens(createTestBrand());
+    expect(Object.keys(tokens.spacing).length).toBeGreaterThan(0);
+  });
+
+  it('includes shadow tokens when present', () => {
+    const tokens = exportDesignTokens(createFullTestBrand());
+    expect(tokens.shadow).toBeDefined();
+    expect(tokens.shadow!['sm'].$type).toBe('shadow');
+  });
+
+  it('includes border tokens when present', () => {
+    const tokens = exportDesignTokens(createFullTestBrand());
+    expect(tokens.border).toBeDefined();
+    expect(tokens.border!['radius-md'].$type).toBe('dimension');
+    expect(tokens.border!['width-thin'].$type).toBe('dimension');
+  });
+
+  it('includes motion tokens when present', () => {
+    const tokens = exportDesignTokens(createFullTestBrand());
+    expect(tokens.motion).toBeDefined();
+    expect(tokens.motion!['duration-fast'].$type).toBe('duration');
+    expect(tokens.motion!['easing-ease-out'].$type).toBe('cubicBezier');
+  });
+
+  it('omits new tokens when not in brand', () => {
+    const tokens = exportDesignTokens(createTestBrand());
+    expect(tokens.shadow).toBeUndefined();
+    expect(tokens.border).toBeUndefined();
+    expect(tokens.motion).toBeUndefined();
+  });
+});
+
+describe('exportCssVariables', () => {
+  it('generates valid CSS custom properties', () => {
+    const css = exportCssVariables(createTestBrand());
+    expect(css).toContain(':root {');
+    expect(css).toContain('--color-primary:');
+    expect(css).toContain('--font-heading:');
+    expect(css).toContain('--spacing-');
+    expect(css).toContain('}');
+  });
+
+  it('includes shadow, border, and motion variables', () => {
+    const css = exportCssVariables(createFullTestBrand());
+    expect(css).toContain('--shadow-sm:');
+    expect(css).toContain('--radius-md:');
+    expect(css).toContain('--border-thin:');
+    expect(css).toContain('--duration-fast:');
+    expect(css).toContain('--ease-ease-out:');
+    expect(css).toContain('--transition-fade:');
+  });
+});
+
+describe('exportTailwindPreset', () => {
+  it('generates valid Tailwind config', () => {
+    const preset = exportTailwindPreset(createTestBrand());
+    expect(preset).toContain('export default');
+    expect(preset).toContain('"primary"');
+    expect(preset).toContain('"fontFamily"');
+  });
+
+  it('includes shadow, border, and motion in Tailwind config', () => {
+    const preset = exportTailwindPreset(createFullTestBrand());
+    expect(preset).toContain('"boxShadow"');
+    expect(preset).toContain('"borderRadius"');
+    expect(preset).toContain('"borderWidth"');
+    expect(preset).toContain('"transitionDuration"');
+    expect(preset).toContain('"transitionTimingFunction"');
+  });
+});
+
+describe('exportSassVariables', () => {
+  it('generates valid Sass variables', () => {
+    const sass = exportSassVariables(createTestBrand());
+    expect(sass).toContain('$color-primary:');
+    expect(sass).toContain('$font-heading:');
+    expect(sass).toContain('$spacing-');
+  });
+
+  it('includes shadow, border, and motion variables', () => {
+    const sass = exportSassVariables(createFullTestBrand());
+    expect(sass).toContain('$shadow-md:');
+    expect(sass).toContain('$radius-lg:');
+    expect(sass).toContain('$border-thick:');
+    expect(sass).toContain('$duration-normal:');
+    expect(sass).toContain('$ease-spring:');
+  });
+});
+
+describe('exportReactTheme', () => {
+  it('generates valid React theme', () => {
+    const theme = exportReactTheme(createTestBrand());
+    expect(theme).toContain('export const theme');
+    expect(theme).toContain('export type Theme');
+    expect(theme).toContain('"primary"');
+  });
+
+  it('includes shadow, border, and motion in React theme', () => {
+    const theme = exportReactTheme(createFullTestBrand());
+    expect(theme).toContain('"shadows"');
+    expect(theme).toContain('"radii"');
+    expect(theme).toContain('"borderWidths"');
+    expect(theme).toContain('"motion"');
+  });
+});
+
+describe('exportFigmaTokens', () => {
+  it('generates Figma token structure', () => {
+    const tokens = exportFigmaTokens(createTestBrand());
+    expect(tokens.color).toBeDefined();
+    expect(tokens.typography).toBeDefined();
+    expect(tokens.spacing).toBeDefined();
+    expect(tokens.color.primary.type).toBe('color');
+  });
+
+  it('includes shadow, border, and motion groups', () => {
+    const tokens = exportFigmaTokens(createFullTestBrand());
+    expect(tokens.shadow).toBeDefined();
+    expect(tokens.shadow!.md.type).toBe('boxShadow');
+    expect(tokens.border).toBeDefined();
+    expect(tokens.border!['radius-lg'].type).toBe('borderRadius');
+    expect(tokens.border!['width-medium'].type).toBe('borderWidth');
+    expect(tokens.motion).toBeDefined();
+    expect(tokens.motion!['duration-fast'].type).toBe('duration');
+  });
+});

package/src/__tests__/unit/favicon-generator.test.ts

@@ -0,0 +1,80 @@
+import { generateFavicons } from '../../lib/branding-core/generators/favicon-generator.js';
+import {
+  generateSvgLogo,
+  defaultLogoConfig,
+} from '../../lib/branding-core/generators/logo-generator.js';
+import type { FaviconSize } from '../../lib/types.js';
+
+const SIZES: FaviconSize[] = [16, 32, 180, 512];
+
+describe('generateFavicons', () => {
+  const logo = generateSvgLogo(defaultLogoConfig('Test', '#6B4CE6'));
+  const iconSvg = logo.variants.icon;
+
+  it('generates all 4 sizes', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    expect(
+      Object.keys(favicons.sizes)
+        .map(Number)
+        .sort((a, b) => a - b)
+    ).toEqual(SIZES);
+  });
+
+  it('all outputs are valid SVG strings', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    for (const size of SIZES) {
+      const svg = favicons.sizes[size];
+      expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+      expect(svg).toContain('</svg>');
+    }
+  });
+
+  it('each size has correct width/height attributes', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    for (const size of SIZES) {
+      expect(favicons.sizes[size]).toContain(`width="${size}"`);
+      expect(favicons.sizes[size]).toContain(`height="${size}"`);
+    }
+  });
+
+  it('preserves viewBox from icon SVG', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    for (const size of SIZES) {
+      expect(favicons.sizes[size]).toContain('viewBox="0 0 64 64"');
+    }
+  });
+
+  it('16px has optimized stroke-width', () => {
+    const svgWithStroke = iconSvg.replace('<circle', '<circle stroke-width="1"');
+    const favicons = generateFavicons(svgWithStroke, '#6B4CE6');
+    expect(favicons.sizes[16]).toContain('stroke-width="2"');
+  });
+
+  it('32px has optimized stroke-width', () => {
+    const svgWithStroke = iconSvg.replace('<circle', '<circle stroke-width="1"');
+    const favicons = generateFavicons(svgWithStroke, '#6B4CE6');
+    expect(favicons.sizes[32]).toContain('stroke-width="2"');
+  });
+
+  it('512px preserves original stroke-width', () => {
+    const svgWithStroke = iconSvg.replace('<circle', '<circle stroke-width="1"');
+    const favicons = generateFavicons(svgWithStroke, '#6B4CE6');
+    expect(favicons.sizes[512]).toContain('stroke-width="1"');
+  });
+
+  it('works with different brand colors', () => {
+    const favicons = generateFavicons(iconSvg, '#FF5500');
+    expect(Object.keys(favicons.sizes)).toHaveLength(4);
+  });
+
+  it('uses brand color in SVG', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    expect(favicons.sizes[512]).toContain('#6B4CE6');
+  });
+
+  it('180px size for apple-touch-icon', () => {
+    const favicons = generateFavicons(iconSvg, '#6B4CE6');
+    expect(favicons.sizes[180]).toContain('width="180"');
+    expect(favicons.sizes[180]).toContain('height="180"');
+  });
+});

package/src/__tests__/unit/gradient-system.test.ts

@@ -0,0 +1,122 @@
+import { generateGradientSystem } from '../../lib/branding-core/generators/gradient-system.js';
+import { generateColorPalette } from '../../lib/branding-core/generators/color-palette.js';
+import type { BrandStyle, GradientPresetName } from '../../lib/types.js';
+
+const PRESET_NAMES: GradientPresetName[] = ['hero', 'button', 'card', 'text', 'background'];
+
+const ALL_STYLES: BrandStyle[] = [
+  'minimal',
+  'bold',
+  'elegant',
+  'playful',
+  'corporate',
+  'tech',
+  'organic',
+  'retro',
+];
+
+describe('generateGradientSystem', () => {
+  const colors = generateColorPalette('#6B4CE6');
+
+  it('generates all 5 gradient presets', () => {
+    const system = generateGradientSystem(colors);
+    expect(Object.keys(system.presets)).toEqual(PRESET_NAMES);
+  });
+
+  it('generates valid CSS gradient syntax', () => {
+    const system = generateGradientSystem(colors);
+    for (const preset of Object.values(system.presets)) {
+      expect(preset.cssValue).toMatch(/^(linear-gradient|radial-gradient|conic-gradient)\(/);
+    }
+  });
+
+  it('stops have sorted positions 0-100', () => {
+    const system = generateGradientSystem(colors);
+    for (const preset of Object.values(system.presets)) {
+      for (let i = 0; i < preset.stops.length; i++) {
+        expect(preset.stops[i].position).toBeGreaterThanOrEqual(0);
+        expect(preset.stops[i].position).toBeLessThanOrEqual(100);
+        if (i > 0) {
+          expect(preset.stops[i].position).toBeGreaterThanOrEqual(preset.stops[i - 1].position);
+        }
+      }
+    }
+  });
+
+  it('stops contain valid hex colors', () => {
+    const system = generateGradientSystem(colors);
+    for (const preset of Object.values(system.presets)) {
+      for (const stop of preset.stops) {
+        expect(stop.color).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+    }
+  });
+
+  it('bold style produces 3-stop gradients for hero preset', () => {
+    const system = generateGradientSystem(colors, 'bold');
+    expect(system.presets.hero.stops.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('minimal style produces 2-stop gradients for hero preset', () => {
+    const system = generateGradientSystem(colors, 'minimal');
+    expect(system.presets.hero.stops).toHaveLength(2);
+  });
+
+  it('playful style uses conic gradient type', () => {
+    const system = generateGradientSystem(colors, 'playful');
+    expect(system.presets.hero.type).toBe('conic');
+    expect(system.presets.hero.cssValue).toContain('conic-gradient');
+  });
+
+  it('organic style uses radial gradient type', () => {
+    const system = generateGradientSystem(colors, 'organic');
+    expect(system.presets.hero.type).toBe('radial');
+    expect(system.presets.hero.cssValue).toContain('radial-gradient');
+  });
+
+  it('works with default parameters', () => {
+    const system = generateGradientSystem(colors);
+    expect(system.presets).toBeDefined();
+    expect(Object.keys(system.presets)).toHaveLength(5);
+  });
+
+  it('each BrandStyle produces valid gradients', () => {
+    for (const style of ALL_STYLES) {
+      const system = generateGradientSystem(colors, style);
+      expect(Object.keys(system.presets)).toHaveLength(5);
+      for (const preset of Object.values(system.presets)) {
+        expect(preset.stops.length).toBeGreaterThanOrEqual(2);
+        expect(preset.cssValue).toBeTruthy();
+      }
+    }
+  });
+
+  it('card preset uses neutral colors', () => {
+    const system = generateGradientSystem(colors);
+    const cardStops = system.presets.card.stops;
+    expect(cardStops).toHaveLength(2);
+  });
+
+  it('background preset uses neutral extremes', () => {
+    const system = generateGradientSystem(colors);
+    const bgStops = system.presets.background.stops;
+    expect(bgStops).toHaveLength(2);
+  });
+
+  it('radial gradients omit angle property', () => {
+    const system = generateGradientSystem(colors, 'organic');
+    expect(system.presets.hero.angle).toBeUndefined();
+  });
+
+  it('linear gradients include angle property', () => {
+    const system = generateGradientSystem(colors, 'minimal');
+    expect(system.presets.hero.angle).toBeDefined();
+    expect(typeof system.presets.hero.angle).toBe('number');
+  });
+
+  it('produces distinct gradients for different styles', () => {
+    const minimal = generateGradientSystem(colors, 'minimal');
+    const bold = generateGradientSystem(colors, 'bold');
+    expect(minimal.presets.hero.cssValue).not.toBe(bold.presets.hero.cssValue);
+  });
+});

package/src/__tests__/unit/logo-generator.test.ts

@@ -0,0 +1,146 @@
+import {
+  generateSvgLogo,
+  defaultLogoConfig,
+} from '../../lib/branding-core/generators/logo-generator.js';
+import type { BrandStyle, LogoConfig, LogoVariant } from '../../lib/types.js';
+
+const ALL_VARIANTS: LogoVariant[] = ['wordmark', 'monogram', 'abstract', 'icon'];
+
+const ALL_STYLES: BrandStyle[] = [
+  'minimal',
+  'bold',
+  'elegant',
+  'playful',
+  'corporate',
+  'tech',
+  'organic',
+  'retro',
+];
+
+describe('generateSvgLogo', () => {
+  const config: LogoConfig = {
+    ...defaultLogoConfig('TestBrand', '#6B4CE6'),
+    font: 'Playfair Display',
+    style: 'elegant',
+  };
+
+  it('returns all 4 variants', () => {
+    const result = generateSvgLogo(config);
+    expect(Object.keys(result.variants)).toEqual(ALL_VARIANTS);
+  });
+
+  it('svg field matches wordmark variant (backward compat)', () => {
+    const result = generateSvgLogo(config);
+    expect(result.svg).toBe(result.variants.wordmark);
+  });
+
+  it('wordmark contains brand name text', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.wordmark).toContain('TestBrand');
+  });
+
+  it('monogram contains first letter', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.monogram).toContain('>T<');
+  });
+
+  it('abstract has multiple shape elements', () => {
+    const result = generateSvgLogo(config);
+    const shapeCount = (
+      result.variants.abstract.match(/<(circle|rect|polygon|path|line|ellipse)/g) ?? []
+    ).length;
+    expect(shapeCount).toBeGreaterThanOrEqual(2);
+  });
+
+  it('icon has 64x64 dimensions', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.icon).toContain('width="64"');
+    expect(result.variants.icon).toContain('height="64"');
+  });
+
+  it('all variants are valid SVG', () => {
+    const result = generateSvgLogo(config);
+    for (const svg of Object.values(result.variants)) {
+      expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+      expect(svg).toContain('viewBox=');
+      expect(svg).toContain('</svg>');
+    }
+  });
+
+  it('uses brand font instead of hardcoded Inter', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.wordmark).toContain('Playfair Display');
+    expect(result.variants.monogram).toContain('Playfair Display');
+    expect(result.variants.icon).toContain('Playfair Display');
+  });
+
+  it('wordmark dimensions are 400x120', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.wordmark).toContain('width="400"');
+    expect(result.variants.wordmark).toContain('height="120"');
+  });
+
+  it('monogram dimensions are 120x120', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.monogram).toContain('width="120"');
+    expect(result.variants.monogram).toContain('height="120"');
+  });
+
+  it('abstract dimensions are 120x120', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.abstract).toContain('width="120"');
+    expect(result.variants.abstract).toContain('height="120"');
+  });
+
+  it('style-aware monogram shapes vary per BrandStyle', () => {
+    const shapes = new Set<string>();
+    for (const style of ALL_STYLES) {
+      const result = generateSvgLogo({ ...config, style });
+      shapes.add(result.variants.monogram);
+    }
+    expect(shapes.size).toBeGreaterThan(1);
+  });
+
+  it('style-aware abstract shapes vary per BrandStyle', () => {
+    const shapes = new Set<string>();
+    for (const style of ALL_STYLES) {
+      const result = generateSvgLogo({ ...config, style });
+      shapes.add(result.variants.abstract);
+    }
+    expect(shapes.size).toBeGreaterThan(1);
+  });
+
+  it('works with default config (no style)', () => {
+    const defaultCfg = defaultLogoConfig('MyBrand', '#FF5500');
+    const result = generateSvgLogo(defaultCfg);
+    expect(result.svg).toBeTruthy();
+    expect(Object.keys(result.variants)).toHaveLength(4);
+  });
+
+  it('uses brand color in SVG elements', () => {
+    const result = generateSvgLogo(config);
+    expect(result.variants.wordmark).toContain('#6B4CE6');
+    expect(result.variants.icon).toContain('#6B4CE6');
+  });
+
+  it('no longer contains png field', () => {
+    const result = generateSvgLogo(config);
+    expect(result).not.toHaveProperty('png');
+  });
+
+  it('handles single-character brand name', () => {
+    const shortConfig = { ...config, text: 'X' };
+    const result = generateSvgLogo(shortConfig);
+    expect(result.variants.wordmark).toContain('>X<');
+    expect(result.variants.monogram).toContain('>X<');
+  });
+
+  it('default logo config returns expected structure', () => {
+    const cfg = defaultLogoConfig('Acme', '#000000');
+    expect(cfg.text).toBe('Acme');
+    expect(cfg.font).toBe('Inter');
+    expect(cfg.color).toBe('#000000');
+    expect(cfg.width).toBe(400);
+    expect(cfg.height).toBe(120);
+  });
+});

package/src/__tests__/unit/motion-system.test.ts

@@ -0,0 +1,91 @@
+import { generateMotionSystem } from '../../lib/branding-core/generators/motion-system.js';
+import type { BrandStyle } from '../../lib/types.js';
+
+describe('generateMotionSystem', () => {
+  it('generates all duration levels', () => {
+    const system = generateMotionSystem();
+    const names = Object.keys(system.durations);
+    expect(names).toEqual(['instant', 'fast', 'normal', 'slow', 'slower']);
+  });
+
+  it('instant duration is always 0ms', () => {
+    const styles: BrandStyle[] = ['minimal', 'elegant', 'playful'];
+    for (const style of styles) {
+      const system = generateMotionSystem(style);
+      expect(system.durations.instant).toBe('0ms');
+    }
+  });
+
+  it('durations increase monotonically', () => {
+    const system = generateMotionSystem();
+    const order = ['instant', 'fast', 'normal', 'slow', 'slower'] as const;
+    for (let i = 1; i < order.length; i++) {
+      const prev = parseInt(system.durations[order[i - 1]]);
+      const curr = parseInt(system.durations[order[i]]);
+      expect(curr).toBeGreaterThanOrEqual(prev);
+    }
+  });
+
+  it('elegant has longer durations than tech', () => {
+    const elegant = generateMotionSystem('elegant');
+    const tech = generateMotionSystem('tech');
+    expect(parseInt(elegant.durations.normal)).toBeGreaterThan(parseInt(tech.durations.normal));
+  });
+
+  it('generates all easing presets', () => {
+    const system = generateMotionSystem();
+    expect(system.easings['ease-in']).toBeDefined();
+    expect(system.easings['ease-out']).toBeDefined();
+    expect(system.easings['ease-in-out']).toBeDefined();
+    expect(system.easings.spring).toBeDefined();
+    expect(system.easings.bounce).toBeDefined();
+  });
+
+  it('easings are valid cubic-bezier strings', () => {
+    const system = generateMotionSystem();
+    for (const value of Object.values(system.easings)) {
+      expect(value).toMatch(/^cubic-bezier\([\d., -]+\)$/);
+    }
+  });
+
+  it('generates transition presets', () => {
+    const system = generateMotionSystem();
+    expect(system.transitions.fade).toBeDefined();
+    expect(system.transitions.slide).toBeDefined();
+    expect(system.transitions.scale).toBeDefined();
+    expect(system.transitions.color).toBeDefined();
+    expect(system.transitions.all).toBeDefined();
+  });
+
+  it('transition presets include duration and easing', () => {
+    const system = generateMotionSystem();
+    expect(system.transitions.fade).toContain('ms');
+    expect(system.transitions.fade).toContain('cubic-bezier');
+  });
+
+  it('duration values are formatted as ms strings', () => {
+    const system = generateMotionSystem();
+    for (const value of Object.values(system.durations)) {
+      expect(value).toMatch(/^\d+ms$/);
+    }
+  });
+
+  it('works for all brand styles', () => {
+    const styles: BrandStyle[] = [
+      'minimal',
+      'bold',
+      'elegant',
+      'playful',
+      'corporate',
+      'tech',
+      'organic',
+      'retro',
+    ];
+    for (const style of styles) {
+      const system = generateMotionSystem(style);
+      expect(Object.keys(system.durations)).toHaveLength(5);
+      expect(Object.keys(system.easings)).toHaveLength(5);
+      expect(Object.keys(system.transitions)).toHaveLength(5);
+    }
+  });
+});