mix corex.design (Corex v0.1.0-alpha.13)

Setup Corex design assets into your project. You can select a target directory, defaults to assets/corex. You can use the --force option to overwrite existing files.

Examples

mix corex.design
mix corex.design assets/design
mix corex.design --force
mix corex.design --designex

With Design Tokens

You can also generate Tailwind CSS tokens and utilities from design tokens directly in Elixir using Style Dictionary and Token Studio.

First install designex, add to your mix.exs:

def deps do
  [
    {:designex, "~> 1.0", only: :dev}
  ]
end

Add the configuration for Designex

config :designex,
version: "1.0.2",
commit: "1da4b31",
cd: Path.expand("../assets", __DIR__),
dir: "corex",
corex: [
build_args: ~w(
--dir=design
--script=build.mjs
--tokens=tokens
)
]

Then run the task with the --designex option: This will copy the Corex design file including the design tokens and build scripts You may have to use the --force option to overwrite existing files.

mix corex.design --designex
mix corex.design --designex --force

You can now build the design tokens

mix designex corex

Optionally you can add the build into your assets build pipeline by adding the following to your mix.exs:

"assets.build": ["compile", "tailwind my_app", "esbuild my_app", "designex corex"],

the designex corex task will be run automatically when you run mix assets.build.

You can also watch for changes in the design tokens by adding the following to your config/dev.exs:

watchers: [
  esbuild: {Esbuild, :install_and_run, [:my_app, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:my_app, ~w(--watch)]},
  designex: {Designex, :install_and_run, [:corex, ~w(--watch)]}
]