ThemeEx.Theme (theme_ex v0.3.0)

Main theme structure based on the Theme UI specification.

This module defines the complete theme structure including colors, fonts, typography scales, breakpoints, and other design tokens following the Theme UI specification (https://theme-ui.com/theme-spec).

Theme Structure

A theme consists of the following optional properties:

:colors - Color palette with semantic colors and modes
:fonts - Font family definitions for different text elements
:fontWeights - Font weight specifications
:lineHeights - Line height definitions
:fontSizes - Typography scale as an array of sizes
:space - Spacing scale for margins, padding, and layout
:sizes - Size scale for widths, heights, and dimensions
:radii - Border radius scale
:shadows - Box shadow definitions
:zIndices - Z-index values for layering
:breakpoints - Media query breakpoints for responsive design
:styles - Component and element styles
:variants - Style variations and component variants

Examples

# Minimal theme
%ThemeEx.Theme{
  colors: %ThemeEx.Colors{primary: "#0066cc"}
}

# Complete theme
%ThemeEx.Theme{
  colors: %ThemeEx.Colors{
    text: "#000000",
    background: "#ffffff",
    primary: "#0066cc",
    modes: %{"dark" => %{"text" => "#ffffff", "background" => "#000000"}}
  },
  fonts: %ThemeEx.Fonts{
    body: "system-ui, sans-serif",
    heading: "Georgia, serif"
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
  space: [0, 4, 8, 16, 32, 64, 128],
  breakpoints: ["40em", "52em", "64em"]
}

Summary

Types

t()

Types

t()

@type t() :: %ThemeEx.Theme{
  breakpoints: [String.t()] | nil,
  colors: ThemeEx.Colors.t() | nil,
  fontSizes: [number()] | nil,
  fontWeights: ThemeEx.FontWeights.t() | nil,
  fonts: ThemeEx.Fonts.t() | nil,
  lineHeights: ThemeEx.LineHeights.t() | nil,
  radii: [number() | String.t()] | nil,
  shadows: [String.t()] | nil,
  sizes: [number() | String.t()] | nil,
  space: [number() | String.t()] | nil,
  styles: map() | nil,
  variants: map() | nil,
  zIndices: map() | nil
}