Updating Corex

View Source

How to pull a newer Corex release into your app and refresh design assets.

Usual update

In mix.exs:

{:corex, "~> 0.2.0"}

~> 0.2.0 keeps you on 0.2.x. Then:

mix deps.update corex corex_design corex_mcp
mix deps.get
mix compile

When release notes mention CSS or tokens:

mix corex.design.build

Or run a full asset build with mix assets.build.

For day-to-day patch notes, see CHANGELOG.md. The rest of this guide is the 0.1.x → 0.2.0 migration.

Upgrading to 0.2.0

Requirements

  • Elixir ~> 1.17

Packages

Design and MCP are separate Hex packages (they no longer ship inside corex).

Design (tokens, themes, component CSS):

{:corex_design, "~> 0.2", runtime: false, only: :dev}

Add :corex_design to your project's compilers when you want design assets to rebuild on mix compile (see Manual installation).

MCP (AI discovery; never enable in :prod):

{:corex_mcp, "~> 0.2", only: [:dev, :test]}

Keep plug Corex.MCP on the endpoint. Move any config :corex, mcp_* / MCP debug settings to config :corex_mcp (mcp_root, mcp_verbose_errors, debug). See MCP.

Design pipeline

  1. Add config :corex_design to config/config.exs (see Manual installation and Design).
  2. Add "corex.design.build" to assets.build and assets.deploy.
  3. Prefer a single CSS import (generated under assets/corex/):
@import "../corex/corex.css";
@source "../corex";
  1. Remove old copied design CSS that is not generated by mix corex.design.build.
  2. Run mix deps.get && mix corex.design.build.

Also:

  • Remove config :corex_design, variants: if present. Bundle filtering uses components: and semantics: only.
  • mix corex.design and --designex are retired; use mix corex.design.build.
  • mix corex.code is now mix corex.design.code (Makeup syntax CSS for <.code>).
  • Optional --a11y on mix corex.new scaffolds accessibility preference wiring. See Accessibility.

Ignore generated CSS in git (new apps with design get this from mix corex.new):

/assets/corex/

If assets/corex/ is already tracked:

echo '/assets/corex/' >> .gitignore
git rm -r --cached assets/corex
git commit -m "Stop tracking generated Corex Design CSS"

Then run mix corex.design.build on every clone / CI before Tailwind or asset builds.

Modifier classes

Per-component BEM palette/size modifiers are gone. Use shared ui-* classes on the host:

0.1.x0.2.0
button button--accentbutton ui-accent
accordion accordion--lgaccordion ui-size-lg
timer timer--rounded-xltimer ui-rounded-xl
button button--accent button--solidbutton ui-accent ui-solid
button button--ghost / button--outlinebutton ui-ghost (outline removed; drop --outline / ui-outline)

Stack freely: class="accordion ui-accent ui-size-lg ui-rounded-xl".

Axes: semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), variant (ui-solid, ui-ghost; subtle is default), size (ui-size-sm … ui-size-xl), radius (ui-rounded-*). Full reference: modifier guide.

No variant axis on switch, checkbox, radio-group, native-input, number-input, password-input, pin-input, tags-input, or selection hosts such as toggle and toggle-group. Drop ui-solid / ui-ghost / ui-outline from those hosts. Binary controls always paint the checked state with the semantic fill. Input fields keep the shared ui-input surface; semantic classes only tint focus and accent ink. ui-outline is removed entirely.

Token and config renames

0.1.x / early naming0.2.0
{role}-ink (on filled surfaces){role}-contrast
ink-{role} (text on neutral surfaces){role}-text
--theme-color-* aliasesremoved; use --color-*
--theme-* non-color tokensremoved; use public names (--radius-*, --spacing-*, --font-*, --duration-*, …)
layer / --color-layer / bg-layersurface / --color-surface / bg-surface
scales: [semantic: …]semantics: […]
theme profile / radius_curve / elevation / …removed (use numeric Dimensions scales)
.ui-chrome-*removed; use host class + part selectors
selected-* token aliasesremoved
ThemeDefinitionremoved; use config :corex_design only

Forms

  • Form components require an explicit id when you do not pass field. Prefer field={@form[:name]} with Ecto + to_form/1 so ids stay stable across LiveView patches.
  • Non-form hook hosts may still omit :id (derived from :name or a random prefix). Pass a stable :id when using controlled or server on_* handlers.
  • field={@form[:name]} no longer sets invalid by default. Pass auto_invalid for alert borders from visible errors, or set invalid={true} / invalid={false} explicitly (explicit wins).
<.select field={@form[:country]} auto_invalid class="select" …>
  • Do not set form_field or field_used on components; use field={@form[:…]} only.
  • Controlled mode on form fields applies only to select, radio, switch, checkbox (not every input).

JSON list datasets

Multi-select values (select, combobox, listbox, tags, pin, date-picker ranges, accordion, toggle-group, tree-view) encode as JSON in the DOM, for example data-default-value='["fra","bel"]'. Do not rely on comma-separated data-* strings in custom JS.

API renames

BeforeAfter
toast-create / toast-update / toast-remove / toast-dismisstoast_create / toast_update / toast_remove / toast_dismiss
toast payload / detail groupIdgroup_id
toggle-group_set_valuetoggle_group_set_value
marquee push %{marquee_id: …}%{id: …}
pagination <:prev> / <:next><:prev_trigger> / <:next_trigger>
color_picker label="…"<:label>…</:label>
file_upload_live field={:name}upload_name={:name}
combobox / color_picker positioning as :mapCorex.Positioning
color_picker Corex.Json.encode!(presets)Corex.Dataset.encode_json(presets)
mix corex.codemix corex.design.code

Zag-faithful attrs (checked / pressed / on_checked_change, and data_table selected) stay as-is. Prefer value / on_value_change for selection components.

Checklist

  1. Bump deps and add corex_design / corex_mcp if you use them.
  2. Move MCP config to config :corex_mcp.
  3. Wire config :corex_design, compilers, and mix corex.design.build.
  4. Grep templates for --accent, --ghost, --outline, and per-component size/radius BEM classes; rewrite to ui-*. Remove any remaining ui-outline.
  5. Grep for API renames (toast-create, groupId, <:prev>, color_picker label=, file_upload_live field=).
  6. Fix form controls missing id / field, and opt into auto_invalid where you want alert borders.
  7. Run mix test, mix assets.build, and spot-check forms, overlays, and tables.

For a full manual install path (first-time setup), see Manual installation.