typewritingclass 0.2.1 → 0.2.3

package/src/theme/createTheme.ts

@@ -1,238 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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/shadows.ts

@@ -1,8 +0,0 @@
-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'

package/src/theme/sizes.ts

@@ -1,37 +0,0 @@
-export const full = '100%'
-export const screen = '100vw'
-export const screenH = '100vh'
-export const min = 'min-content'
-export const max = 'max-content'
-export const fit = 'fit-content'
-export const auto = 'auto'
-
-// ---------------------------------------------------------------------------
-// Max-width scale (Tailwind v3 defaults)
-// ---------------------------------------------------------------------------
-
-export const maxWidths = {
-  none: 'none',
-  0: '0rem',
-  xs: '20rem',
-  sm: '24rem',
-  md: '28rem',
-  lg: '32rem',
-  xl: '36rem',
-  '2xl': '42rem',
-  '3xl': '48rem',
-  '4xl': '56rem',
-  '5xl': '64rem',
-  '6xl': '72rem',
-  '7xl': '80rem',
-  full: '100%',
-  min: 'min-content',
-  max: 'max-content',
-  fit: 'fit-content',
-  prose: '65ch',
-  screenSm: '640px',
-  screenMd: '768px',
-  screenLg: '1024px',
-  screenXl: '1280px',
-  screen2xl: '1536px',
-} as const

package/src/theme/spacing.ts

@@ -1,44 +0,0 @@
-const spacingScale: Record<number, string> = {
-  0: '0px',
-  0.5: '0.125rem',
-  1: '0.25rem',
-  1.5: '0.375rem',
-  2: '0.5rem',
-  2.5: '0.625rem',
-  3: '0.75rem',
-  3.5: '0.875rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  7: '1.75rem',
-  8: '2rem',
-  9: '2.25rem',
-  10: '2.5rem',
-  11: '2.75rem',
-  12: '3rem',
-  14: '3.5rem',
-  16: '4rem',
-  20: '5rem',
-  24: '6rem',
-  28: '7rem',
-  32: '8rem',
-  36: '9rem',
-  40: '10rem',
-  44: '11rem',
-  48: '12rem',
-  52: '13rem',
-  56: '14rem',
-  60: '15rem',
-  64: '16rem',
-  72: '18rem',
-  80: '20rem',
-  96: '24rem',
-}
-
-export function resolveSpacing(value: number | string): string {
-  if (typeof value === 'string') return value
-  if (value in spacingScale) return spacingScale[value]
-  return `${value * 0.25}rem`
-}
-
-export { spacingScale }

package/src/theme/typography.ts

@@ -1,72 +0,0 @@
-export interface TextSize {
-  fontSize: string
-  lineHeight: string
-}
-
-export const xs: TextSize = { fontSize: '0.75rem', lineHeight: '1rem' }
-export const sm: TextSize = { fontSize: '0.875rem', lineHeight: '1.25rem' }
-export const base: TextSize = { fontSize: '1rem', lineHeight: '1.5rem' }
-export const lg: TextSize = { fontSize: '1.125rem', lineHeight: '1.75rem' }
-export const xl: TextSize = { fontSize: '1.25rem', lineHeight: '1.75rem' }
-export const _2xl: TextSize = { fontSize: '1.5rem', lineHeight: '2rem' }
-export const _3xl: TextSize = { fontSize: '1.875rem', lineHeight: '2.25rem' }
-export const _4xl: TextSize = { fontSize: '2.25rem', lineHeight: '2.5rem' }
-export const _5xl: TextSize = { fontSize: '3rem', lineHeight: '1' }
-export const _6xl: TextSize = { fontSize: '3.75rem', lineHeight: '1' }
-export const _7xl: TextSize = { fontSize: '4.5rem', lineHeight: '1' }
-export const _8xl: TextSize = { fontSize: '6rem', lineHeight: '1' }
-export const _9xl: TextSize = { fontSize: '8rem', lineHeight: '1' }
-
-export const thin = '100'
-export const extralight = '200'
-export const light = '300'
-export const normal = '400'
-export const medium = '500'
-export const semibold = '600'
-export const bold = '700'
-export const extrabold = '800'
-export const black_ = '900'
-
-// ---------------------------------------------------------------------------
-// Font families (Tailwind v3 defaults)
-// ---------------------------------------------------------------------------
-
-export const fontFamilies = {
-  sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-  serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
-  mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-} as const
-
-// ---------------------------------------------------------------------------
-// Letter spacing / tracking (Tailwind v3 defaults)
-// ---------------------------------------------------------------------------
-
-export const letterSpacings = {
-  tighter: '-0.05em',
-  tight: '-0.025em',
-  normal: '0em',
-  wide: '0.025em',
-  wider: '0.05em',
-  widest: '0.1em',
-} as const
-
-// ---------------------------------------------------------------------------
-// Line height / leading (Tailwind v3 defaults)
-// ---------------------------------------------------------------------------
-
-export const lineHeights = {
-  none: '1',
-  tight: '1.25',
-  snug: '1.375',
-  normal: '1.5',
-  relaxed: '1.625',
-  loose: '2',
-  '3': '.75rem',
-  '4': '1rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '8': '2rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-} as const