@arraypress/theme-injector

CSS custom property theme engine. Injects theme configuration as CSS variables on :root. Supports background presets, auto-contrast colors, typography, border radius, surface styles, and custom CSS. Works with any CSS-variable-based design system.

Installation

npm install @arraypress/theme-injector

Peer dependencies:

npm install @arraypress/color-utils @arraypress/google-fonts

Usage

import { injectTheme } from '@arraypress/theme-injector';

// Apply a dark theme with Inter font and green accent
injectTheme({
  font: 'inter',
  headingFont: 'serif',
  headingWeight: 'bold',
  background: 'dark',
  accentColor: '#06d6a0',
  surface: 'shadow',
  borderRadius: 'rounded',
  contentWidth: 'standard',
  sectionPadding: 'default',
});

// Custom background with auto-contrast
injectTheme({
  font: 'poppins',
  background: 'custom',
  customBg: '#1a1a2e',
  accentColor: '#e94560',
  surface: 'flat',
  borderRadius: 'pill',
});

// Inject custom CSS
injectTheme({
  background: 'white',
  customCSS: '.hero { min-height: 80vh; }',
});

Theme Config

| Key | Type | Description | |-----|------|-------------| | font | string | Body font key (e.g. 'inter', 'poppins', 'system') | | headingFont | string | Heading font key. 'inherit' matches body font | | headingWeight | string | 'normal', 'bold', 'black' | | baseSize | string | 'compact' (14px), 'default' (16px), 'large' (18px), 'xlarge' (20px) | | headingSize | string | 'small' through 'massive' (scale multiplier) | | lineHeight | string | 'tight', 'default', 'relaxed', 'loose' | | letterSpacing | string | 'tight', 'default', 'wide', 'wider' | | background | string | 'dark', 'soft-dark', 'light', 'white', 'custom' | | customBg | string | Custom background hex (when background: 'custom') | | customCard | string | Custom card hex (auto-generated if omitted) | | customBorder | string | Custom border color (auto-generated if omitted) | | textColor | string | Override foreground text color | | mutedTextColor | string | Override muted text color | | accentColor | string | Primary/accent hex. Default '#06d6a0' | | buttonTextColor | string | Button text color. Auto-calculated if omitted | | surface | string | 'bordered', 'shadow', 'flat', 'glass' | | borderRadius | string | 'sharp', 'rounded', 'pill' | | buttonStyle | string | 'rounded', 'sharp', 'pill' | | linkColor | string | Link color | | linkHoverColor | string | Link hover color | | contentWidth | string | 'narrow' (960px), 'standard' (1200px), 'wide' (1440px) | | sectionPadding | string | 'compact' (2rem), 'default' (3rem), 'spacious' (5rem) | | customCSS | string | Raw CSS injected into <style> tag |

Exported Constants

• BACKGROUNDS — 4 color scheme presets (dark, soft-dark, light, white)
• FONT_WEIGHTS — Heading weight mappings (normal=500, bold=700, black=900)
• BASE_SIZES — Root font sizes (compact, default, large, xlarge)
• HEADING_SCALES — Heading size multipliers (small through massive)
• LINE_HEIGHTS — Line height values (tight, default, relaxed, loose)
• LETTER_SPACINGS — Letter spacing values (tight, default, wide, wider)
• CONTENT_WIDTHS — Max content widths (narrow, standard, wide)
• SECTION_PADDINGS — Section padding values (compact, default, spacious)
• RADII — Border radius presets with xl/lg/md/sm/full values

CSS Variables Set

The injector sets these CSS custom properties on :root:

• --font-sans — Body font family
• --heading-font — Heading font family
• --heading-weight — Heading font weight
• --heading-scale — Heading size multiplier
• --line-height — Body line height
• --color-background, --color-foreground — Page colors
• --color-card, --color-card-foreground — Card colors
• --color-secondary, --color-secondary-foreground — Secondary colors
• --color-muted, --color-muted-foreground — Muted colors
• --color-border — Border color
• --color-primary, --color-primary-foreground — Accent colors
• --card-shadow — Card shadow value
• --color-link, --color-link-hover — Link colors
• --content-width — Max content width
• --section-padding — Section vertical padding

License

MIT