typewritingclass 0.2.0

package/src/theme/colors.ts

@@ -0,0 +1,326 @@
+export type ColorScale = {
+  50: string
+  100: string
+  200: string
+  300: string
+  400: string
+  500: string
+  600: string
+  700: string
+  800: string
+  900: string
+  950: string
+}
+
+export const slate: ColorScale = {
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#94a3b8',
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+  950: '#020617',
+}
+
+export const gray: ColorScale = {
+  50: '#f9fafb',
+  100: '#f3f4f6',
+  200: '#e5e7eb',
+  300: '#d1d5db',
+  400: '#9ca3af',
+  500: '#6b7280',
+  600: '#4b5563',
+  700: '#374151',
+  800: '#1f2937',
+  900: '#111827',
+  950: '#030712',
+}
+
+export const zinc: ColorScale = {
+  50: '#fafafa',
+  100: '#f4f4f5',
+  200: '#e4e4e7',
+  300: '#d4d4d8',
+  400: '#a1a1aa',
+  500: '#71717a',
+  600: '#52525b',
+  700: '#3f3f46',
+  800: '#27272a',
+  900: '#18181b',
+  950: '#09090b',
+}
+
+export const neutral: ColorScale = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#e5e5e5',
+  300: '#d4d4d4',
+  400: '#a3a3a3',
+  500: '#737373',
+  600: '#525252',
+  700: '#404040',
+  800: '#262626',
+  900: '#171717',
+  950: '#0a0a0a',
+}
+
+export const stone: ColorScale = {
+  50: '#fafaf9',
+  100: '#f5f5f4',
+  200: '#e7e5e4',
+  300: '#d6d3d1',
+  400: '#a8a29e',
+  500: '#78716c',
+  600: '#57534e',
+  700: '#44403c',
+  800: '#292524',
+  900: '#1c1917',
+  950: '#0c0a09',
+}
+
+export const red: ColorScale = {
+  50: '#fef2f2',
+  100: '#fee2e2',
+  200: '#fecaca',
+  300: '#fca5a5',
+  400: '#f87171',
+  500: '#ef4444',
+  600: '#dc2626',
+  700: '#b91c1c',
+  800: '#991b1b',
+  900: '#7f1d1d',
+  950: '#450a0a',
+}
+
+export const orange: ColorScale = {
+  50: '#fff7ed',
+  100: '#ffedd5',
+  200: '#fed7aa',
+  300: '#fdba74',
+  400: '#fb923c',
+  500: '#f97316',
+  600: '#ea580c',
+  700: '#c2410c',
+  800: '#9a3412',
+  900: '#7c2d12',
+  950: '#431407',
+}
+
+export const amber: ColorScale = {
+  50: '#fffbeb',
+  100: '#fef3c7',
+  200: '#fde68a',
+  300: '#fcd34d',
+  400: '#fbbf24',
+  500: '#f59e0b',
+  600: '#d97706',
+  700: '#b45309',
+  800: '#92400e',
+  900: '#78350f',
+  950: '#451a03',
+}
+
+export const yellow: ColorScale = {
+  50: '#fefce8',
+  100: '#fef9c3',
+  200: '#fef08a',
+  300: '#fde047',
+  400: '#facc15',
+  500: '#eab308',
+  600: '#ca8a04',
+  700: '#a16207',
+  800: '#854d0e',
+  900: '#713f12',
+  950: '#422006',
+}
+
+export const lime: ColorScale = {
+  50: '#f7fee7',
+  100: '#ecfccb',
+  200: '#d9f99d',
+  300: '#bef264',
+  400: '#a3e635',
+  500: '#84cc16',
+  600: '#65a30d',
+  700: '#4d7c0f',
+  800: '#3f6212',
+  900: '#365314',
+  950: '#1a2e05',
+}
+
+export const green: ColorScale = {
+  50: '#f0fdf4',
+  100: '#dcfce7',
+  200: '#bbf7d0',
+  300: '#86efac',
+  400: '#4ade80',
+  500: '#22c55e',
+  600: '#16a34a',
+  700: '#15803d',
+  800: '#166534',
+  900: '#14532d',
+  950: '#052e16',
+}
+
+export const emerald: ColorScale = {
+  50: '#ecfdf5',
+  100: '#d1fae5',
+  200: '#a7f3d0',
+  300: '#6ee7b7',
+  400: '#34d399',
+  500: '#10b981',
+  600: '#059669',
+  700: '#047857',
+  800: '#065f46',
+  900: '#064e3b',
+  950: '#022c22',
+}
+
+export const teal: ColorScale = {
+  50: '#f0fdfa',
+  100: '#ccfbf1',
+  200: '#99f6e4',
+  300: '#5eead4',
+  400: '#2dd4bf',
+  500: '#14b8a6',
+  600: '#0d9488',
+  700: '#0f766e',
+  800: '#115e59',
+  900: '#134e4a',
+  950: '#042f2e',
+}
+
+export const cyan: ColorScale = {
+  50: '#ecfeff',
+  100: '#cffafe',
+  200: '#a5f3fc',
+  300: '#67e8f9',
+  400: '#22d3ee',
+  500: '#06b6d4',
+  600: '#0891b2',
+  700: '#0e7490',
+  800: '#155e75',
+  900: '#164e63',
+  950: '#083344',
+}
+
+export const sky: ColorScale = {
+  50: '#f0f9ff',
+  100: '#e0f2fe',
+  200: '#bae6fd',
+  300: '#7dd3fc',
+  400: '#38bdf8',
+  500: '#0ea5e9',
+  600: '#0284c7',
+  700: '#0369a1',
+  800: '#075985',
+  900: '#0c4a6e',
+  950: '#082f49',
+}
+
+export const blue: ColorScale = {
+  50: '#eff6ff',
+  100: '#dbeafe',
+  200: '#bfdbfe',
+  300: '#93c5fd',
+  400: '#60a5fa',
+  500: '#3b82f6',
+  600: '#2563eb',
+  700: '#1d4ed8',
+  800: '#1e40af',
+  900: '#1e3a8a',
+  950: '#172554',
+}
+
+export const indigo: ColorScale = {
+  50: '#eef2ff',
+  100: '#e0e7ff',
+  200: '#c7d2fe',
+  300: '#a5b4fc',
+  400: '#818cf8',
+  500: '#6366f1',
+  600: '#4f46e5',
+  700: '#4338ca',
+  800: '#3730a3',
+  900: '#312e81',
+  950: '#1e1b4b',
+}
+
+export const violet: ColorScale = {
+  50: '#f5f3ff',
+  100: '#ede9fe',
+  200: '#ddd6fe',
+  300: '#c4b5fd',
+  400: '#a78bfa',
+  500: '#8b5cf6',
+  600: '#7c3aed',
+  700: '#6d28d9',
+  800: '#5b21b6',
+  900: '#4c1d95',
+  950: '#2e1065',
+}
+
+export const purple: ColorScale = {
+  50: '#faf5ff',
+  100: '#f3e8ff',
+  200: '#e9d5ff',
+  300: '#d8b4fe',
+  400: '#c084fc',
+  500: '#a855f7',
+  600: '#9333ea',
+  700: '#7e22ce',
+  800: '#6b21a8',
+  900: '#581c87',
+  950: '#3b0764',
+}
+
+export const fuchsia: ColorScale = {
+  50: '#fdf4ff',
+  100: '#fae8ff',
+  200: '#f5d0fe',
+  300: '#f0abfc',
+  400: '#e879f9',
+  500: '#d946ef',
+  600: '#c026d3',
+  700: '#a21caf',
+  800: '#86198f',
+  900: '#701a75',
+  950: '#4a044e',
+}
+
+export const pink: ColorScale = {
+  50: '#fdf2f8',
+  100: '#fce7f3',
+  200: '#fbcfe8',
+  300: '#f9a8d4',
+  400: '#f472b6',
+  500: '#ec4899',
+  600: '#db2777',
+  700: '#be185d',
+  800: '#9d174d',
+  900: '#831843',
+  950: '#500724',
+}
+
+export const rose: ColorScale = {
+  50: '#fff1f2',
+  100: '#ffe4e6',
+  200: '#fecdd3',
+  300: '#fda4af',
+  400: '#fb7185',
+  500: '#f43f5e',
+  600: '#e11d48',
+  700: '#be123c',
+  800: '#9f1239',
+  900: '#881337',
+  950: '#4c0519',
+}
+
+export const white = '#ffffff'
+export const black = '#000000'
+export const transparent = 'transparent'
+export const currentColor = 'currentColor'

package/src/theme/createTheme.ts

@@ -0,0 +1,238 @@
+/**
+ * Configuration object for defining a theme's design tokens.
+ *
+ * Pass this to {@link createTheme} to generate CSS custom properties and
+ * a type-safe `vars` accessor for use in style utilities.
+ *
+ * @example
+ * ```ts
+ * const config: ThemeConfig = {
+ *   name: 'light',
+ *   colors: {
+ *     blue: { 500: '#3b82f6', 600: '#2563eb' },
+ *   },
+ *   spacing: { 4: '1rem', 8: '2rem' },
+ * }
+ * ```
+ */
+export interface ThemeConfig {
+  /** Optional theme name. Defaults to `'default'` which targets `:root`. Any other name targets `[data-theme="<name>"]`. */
+  name?: string
+  /** Color palette scales, keyed by color name, then by shade (e.g., `{ blue: { 500: '#3b82f6' } }`). */
+  colors?: Record<string, Record<string | number, string>>
+  /** Spacing scale, keyed by size token (e.g., `{ 4: '1rem', 8: '2rem' }`). */
+  spacing?: Record<string | number, string>
+  /** Typography tokens for text sizes and font weights. */
+  typography?: {
+    /** Named text size presets with `fontSize` and `lineHeight` values. */
+    textSizes?: Record<string, { fontSize: string; lineHeight: string }>
+    /** Named font weight presets (e.g., `{ bold: '700' }`). */
+    fontWeights?: Record<string, string>
+  }
+  /** Named border style tokens (e.g., `{ default: '1px solid #e5e7eb' }`). */
+  borders?: Record<string, string>
+  /** Named box-shadow tokens (e.g., `{ md: '0 4px 6px rgba(0,0,0,0.1)' }`). */
+  shadows?: Record<string, string>
+}
+
+/**
+ * The result returned by {@link createTheme}.
+ *
+ * Contains the generated CSS text for injection and a `vars` object whose
+ * values are `var(--twc-...)` references ready to pass to style utilities.
+ */
+export interface ThemeResult {
+  /** The theme name, matching the `name` from {@link ThemeConfig} (defaults to `'default'`). */
+  name: string
+  /**
+   * A complete CSS rule string containing all custom property declarations.
+   *
+   * For the default theme this targets `:root`; for named themes it targets
+   * `[data-theme="<name>"]`. Inject with {@link injectTheme}.
+   */
+  cssText: string
+  /** Type-safe accessor whose leaf values are `var(--twc-...)` CSS references. */
+  vars: ThemeVars
+}
+
+/**
+ * Type-safe map of CSS `var()` references generated from a {@link ThemeConfig}.
+ *
+ * Every leaf value is a string like `var(--twc-color-blue-500)` that can be
+ * passed directly to style utilities such as `bg()`, `color()`, and `p()`.
+ *
+ * @example
+ * ```ts
+ * const { vars } = createTheme({ colors: { blue: { 500: '#3b82f6' } } })
+ * vars.colors.blue[500] // "var(--twc-color-blue-500)"
+ *
+ * // Use in style utilities:
+ * cx(bg(vars.colors.blue[500]))
+ * ```
+ */
+export interface ThemeVars {
+  /** Color `var()` references, organized by color name and shade. */
+  colors: Record<string, Record<string | number, string>>
+  /** Spacing `var()` references, keyed by size token. */
+  spacing: Record<string | number, string>
+  /** Typography `var()` references for text sizes and font weights. */
+  typography: {
+    /** Text size `var()` references with `fontSize` and `lineHeight` keys. */
+    textSizes: Record<string, { fontSize: string; lineHeight: string }>
+    /** Font weight `var()` references keyed by weight name. */
+    fontWeights: Record<string, string>
+  }
+  /** Border `var()` references keyed by border name. */
+  borders: Record<string, string>
+  /** Shadow `var()` references keyed by shadow name. */
+  shadows: Record<string, string>
+}
+
+/**
+ * Builds a CSS custom property name from the given path segments.
+ *
+ * @internal
+ * @param parts - One or more name segments to join with hyphens.
+ * @returns A CSS custom property name in the form `--twc-<parts joined by ->`.
+ */
+function varName(...parts: (string | number)[]): string {
+  return `--twc-${parts.join('-')}`
+}
+
+/**
+ * Wraps a CSS custom property name in a `var()` reference.
+ *
+ * @internal
+ * @param name - The full custom property name (e.g., `--twc-color-blue-500`).
+ * @returns A CSS `var()` expression (e.g., `var(--twc-color-blue-500)`).
+ */
+function varRef(name: string): string {
+  return `var(${name})`
+}
+
+/**
+ * Creates a theme from a configuration of design tokens.
+ *
+ * Converts all token values into CSS custom properties and returns:
+ * - `cssText`: a string ready to inject into a `<style>` element via {@link injectTheme}
+ * - `vars`: a mirrored object whose leaf values are `var(--twc-...)` references,
+ *   suitable for passing directly into style utilities like `bg()`, `color()`, `p()`, etc.
+ *
+ * The default theme (no `name` or `name: 'default'`) targets the `:root` selector.
+ * Named themes target `[data-theme="<name>"]` and can be activated with {@link setTheme}.
+ *
+ * @param config - The theme configuration containing design tokens.
+ * @returns A {@link ThemeResult} with `name`, `cssText`, and `vars`.
+ *
+ * @example
+ * ```ts
+ * import { createTheme, injectTheme } from 'typewritingclass/theme'
+ * import { cx, bg, p } from 'typewritingclass'
+ *
+ * const { cssText, vars } = createTheme({
+ *   name: 'light',
+ *   colors: {
+ *     blue: { 500: '#3b82f6', 600: '#2563eb' },
+ *     gray: { 100: '#f3f4f6', 900: '#111827' },
+ *   },
+ *   spacing: { 4: '1rem', 8: '2rem' },
+ *   shadows: { md: '0 4px 6px rgba(0,0,0,0.1)' },
+ * })
+ *
+ * // Inject the generated CSS custom properties into the document
+ * injectTheme(cssText)
+ *
+ * // Use vars in style utilities — they resolve to var(--twc-...) references
+ * cx(bg(vars.colors.blue[500]), p(vars.spacing[4]))
+ * // CSS: .abc { background-color: var(--twc-color-blue-500); padding: var(--twc-spacing-4); }
+ * ```
+ */
+export function createTheme(config: ThemeConfig): ThemeResult {
+  const name = config.name ?? 'default'
+  const properties: string[] = []
+
+  // Build vars proxy objects that resolve to var() references
+  const colorVars: Record<string, Record<string | number, string>> = {}
+  const spacingVars: Record<string | number, string> = {}
+  const typographyVars: ThemeVars['typography'] = { textSizes: {}, fontWeights: {} }
+  const borderVars: Record<string, string> = {}
+  const shadowVars: Record<string, string> = {}
+
+  // Colors
+  if (config.colors) {
+    for (const [colorName, scale] of Object.entries(config.colors)) {
+      colorVars[colorName] = {}
+      for (const [shade, hex] of Object.entries(scale)) {
+        const vn = varName('color', colorName, shade)
+        properties.push(`  ${vn}: ${hex};`)
+        colorVars[colorName][shade] = varRef(vn)
+      }
+    }
+  }
+
+  // Spacing
+  if (config.spacing) {
+    for (const [key, value] of Object.entries(config.spacing)) {
+      const vn = varName('spacing', key)
+      properties.push(`  ${vn}: ${value};`)
+      spacingVars[key] = varRef(vn)
+    }
+  }
+
+  // Typography
+  if (config.typography?.textSizes) {
+    for (const [sizeName, size] of Object.entries(config.typography.textSizes)) {
+      const fsvn = varName('text', sizeName, 'fs')
+      const lhvn = varName('text', sizeName, 'lh')
+      properties.push(`  ${fsvn}: ${size.fontSize};`)
+      properties.push(`  ${lhvn}: ${size.lineHeight};`)
+      typographyVars.textSizes[sizeName] = {
+        fontSize: varRef(fsvn),
+        lineHeight: varRef(lhvn),
+      }
+    }
+  }
+  if (config.typography?.fontWeights) {
+    for (const [weightName, weight] of Object.entries(config.typography.fontWeights)) {
+      const vn = varName('font', weightName)
+      properties.push(`  ${vn}: ${weight};`)
+      typographyVars.fontWeights[weightName] = varRef(vn)
+    }
+  }
+
+  // Borders
+  if (config.borders) {
+    for (const [borderName, value] of Object.entries(config.borders)) {
+      const vn = varName('border', borderName)
+      properties.push(`  ${vn}: ${value};`)
+      borderVars[borderName] = varRef(vn)
+    }
+  }
+
+  // Shadows
+  if (config.shadows) {
+    for (const [shadowName, value] of Object.entries(config.shadows)) {
+      const vn = varName('shadow', shadowName)
+      properties.push(`  ${vn}: ${value};`)
+      shadowVars[shadowName] = varRef(vn)
+    }
+  }
+
+  // Build CSS text
+  const selector = name === 'default' ? ':root' : `[data-theme="${name}"]`
+  const cssText = properties.length > 0
+    ? `${selector} {\n${properties.join('\n')}\n}`
+    : ''
+
+  return {
+    name,
+    cssText,
+    vars: {
+      colors: colorVars,
+      spacing: spacingVars,
+      typography: typographyVars,
+      borders: borderVars,
+      shadows: shadowVars,
+    },
+  }
+}

package/src/theme/filters.ts

@@ -0,0 +1,20 @@
+export const blur = {
+  none: '0',
+  sm: '4px',
+  DEFAULT: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  _2xl: '40px',
+  _3xl: '64px',
+}
+
+export const dropShadow = {
+  sm: '0 1px 1px rgb(0 0 0 / 0.05)',
+  DEFAULT: '0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06)',
+  md: '0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06)',
+  lg: '0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08)',
+  _2xl: '0 25px 25px rgb(0 0 0 / 0.15)',
+  none: '0 0 #0000',
+}

package/src/theme/index.ts

@@ -0,0 +1,9 @@
+export * as colors from './colors.ts'
+export * as spacing from './spacing.ts'
+export * as typography from './typography.ts'
+export * as sizes from './sizes.ts'
+export * as shadows from './shadows.ts'
+export * as borders from './borders.ts'
+export { createTheme } from './createTheme.ts'
+export type { ThemeConfig, ThemeResult, ThemeVars } from './createTheme.ts'
+export { injectTheme, setTheme } from './inject-theme.ts'

package/src/theme/inject-theme.ts

@@ -0,0 +1,81 @@
+/** Cached reference to the `<style id="twc-theme">` element used by {@link injectTheme}. */
+let themeStyleEl: HTMLStyleElement | null = null
+
+/**
+ * Injects theme CSS custom properties into the document.
+ *
+ * Creates (or reuses) a `<style id="twc-theme">` element in the document head
+ * and appends the provided CSS text to it. Each call appends to the existing
+ * content, so multiple themes can be injected sequentially.
+ *
+ * This function is a no-op in non-browser environments (SSR-safe).
+ *
+ * @param cssText - The CSS string to inject, typically the `cssText` property
+ *   from a {@link ThemeResult} returned by {@link createTheme}.
+ *
+ * @example
+ * ```ts
+ * import { createTheme, injectTheme } from 'typewritingclass/theme'
+ *
+ * const light = createTheme({
+ *   name: 'light',
+ *   colors: { blue: { 500: '#3b82f6' } },
+ * })
+ *
+ * const dark = createTheme({
+ *   name: 'dark',
+ *   colors: { blue: { 500: '#60a5fa' } },
+ * })
+ *
+ * // Inject both themes into a single <style> element
+ * injectTheme(light.cssText)
+ * injectTheme(dark.cssText)
+ * // <style id="twc-theme">
+ * //   [data-theme="light"] { --twc-color-blue-500: #3b82f6; }
+ * //   [data-theme="dark"]  { --twc-color-blue-500: #60a5fa; }
+ * // </style>
+ * ```
+ */
+export function injectTheme(cssText: string): void {
+  if (typeof document === 'undefined') return
+
+  if (!themeStyleEl) {
+    themeStyleEl = document.createElement('style')
+    themeStyleEl.id = 'twc-theme'
+    document.head.appendChild(themeStyleEl)
+  }
+
+  // Append to existing theme styles
+  themeStyleEl.textContent += (themeStyleEl.textContent ? '\n' : '') + cssText
+}
+
+/**
+ * Activates a named theme by setting the `data-theme` attribute on the
+ * document root element (`<html>`).
+ *
+ * The matching theme CSS must already be injected via {@link injectTheme}.
+ * The active theme's custom properties will take effect for any rules using
+ * `[data-theme="<name>"]` selectors generated by {@link createTheme}.
+ *
+ * This function is a no-op in non-browser environments (SSR-safe).
+ *
+ * @param name - The theme name to activate, matching the `name` used in
+ *   {@link ThemeConfig} when calling {@link createTheme}.
+ *
+ * @example
+ * ```ts
+ * import { setTheme } from 'typewritingclass/theme'
+ *
+ * // Switch to the dark theme at runtime
+ * setTheme('dark')
+ * // <html data-theme="dark"> ...
+ *
+ * // Switch back to light
+ * setTheme('light')
+ * // <html data-theme="light"> ...
+ * ```
+ */
+export function setTheme(name: string): void {
+  if (typeof document === 'undefined') return
+  document.documentElement.setAttribute('data-theme', name)
+}

package/src/theme/shadows.ts

@@ -0,0 +1,8 @@
+export const sm = '0 1px 2px 0 rgb(0 0 0 / 0.05)'
+export const DEFAULT = '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)'
+export const md = '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+export const lg = '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'
+export const xl = '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)'
+export const _2xl = '0 25px 50px -12px rgb(0 0 0 / 0.25)'
+export const inner = 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)'
+export const none = '0 0 #0000'