Corex Design

Optional config-driven tokens, themes, and component CSS for Corex. Declare themes and semantics in config :corex_design, then generate CSS with mix corex.design.build.

Full app wiring (html attributes, pickers, fonts, icons) lives in Corex Hexdocs: Design, Theming, Dark mode, Modifiers. Upgrading from 0.1.x: Updating Corex.

Requirements

Packages

Package Kind Purpose mix corex.new
corex Hex dep Unstyled Phoenix components, hooks, LiveView API Always
corex_design Hex dep (runtime: false) Config-driven tokens, themes, and component CSS (Design) On by default; --no-design to skip
corex_mcp Hex dep (only: [:dev, :test]) Dev MCP server for AI component and design discovery (MCP); never enable in :prod On by default; --no-mcp to skip
corex_new Mix archive Greenfield generator (mix corex.new) Install once with mix archive.install hex corex_new

Install

# mix.exs
{:corex_design, "~> 0.2", runtime: false}
# config/config.exs
config :corex_design,
  output: "assets/corex",
  default_theme: :neo,
  default_mode: :light,
  themes: [:neo],
  modes: [:light, :dark],
  scales: [],
  components: [:button, :dialog, :typo, :layout-heading],
  semantics: [:accent, :brand, :alert],
  accessibility: false

Add /assets/corex/ to .gitignore. Do not commit the generated tree.

Wire mix corex.design.build into assets.build and assets.deploy (same layer as Tailwind/esbuild). After changing config :corex_design, re-run mix corex.design.build (or mix assets.build). Design CSS is not part of mix compile.

See Corex Manual installation.

Build

Command Purpose
mix corex.design.build Write assets/corex/ (corex.css, recipes.css, themes, components)
mix corex.design.options List allowed config values and your resolved config
mix corex.design.validate Validate config :corex_design 
@import "../corex/corex.css";
@source "../corex";

One consumption mode: import corex.css. Do not cherry-pick individual component CSS files.

Bundle filtering

Key Default Effect
components nil (all) Emit only listed component CSS (deps auto-included)
semantics nil (all) Emit only listed roles (accent, brand, alert, info, success)
themes nil (all) Emit only listed theme CSS; map form for custom themes
modes [:light, :dark] Emit only listed color modes
default_theme :uno (package fallback) Theme used when CSS loads with no data-theme. mix corex.new scaffolds neo without --theme.
default_mode :light Build default mode
accessibility false true (all six axes), or axis list (:text, :contrast, :motion, :cursor, :focus, :links) 
components: ~w(button dialog accordion typo layout-heading)a,
semantics: ~w(accent brand alert)a,
themes: ~w(neo uno)a,
modes: [:light],
accessibility: [:text, :focus, :links]

Motion and contrast prefer OS media queries (prefers-reduced-motion, prefers-contrast). User prefs cover text zoom, focus rings, and link underlines by default.

Tokens

Public color names (authoring = CSS):

Themes use perceptual color seeds and contrast-aware roles. Custom themes author seeds plus per-mode token defs. See the built-in theme presets and the Theming guide.

Scales

scales: [
  space: [md: 4],
  size: [md: 11],
  text: [md: 1.05],
  radius: [md: 0.5],
  weight: [normal: 450]
]

Host class opt-in

Design styles apply only when the host carries the component class:

<.accordion class="accordion ui-accent">...</.accordion>
<.accordion class="my-accordion">...</.accordion>

Omit the component class for a fully custom instance.

Become a sponsor

Corex is open source. If you rely on it in production or want to help sustain development, become a sponsor on GitHub.

Netoum