Designex

Mix tasks for installing and invoking designex via the stand-alone designex cli

Installation

If you are going to build assets in production, then you add designex as dependency on all environments but only start it in dev:

def deps do
[
  {:designex, "~> 1.0", runtime: Mix.env() == :dev}
]
endcopy

However, if your assets are precompiled during development, then it only needs to be a dev dependency:

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

Once installed, change your config/config.exs to pick your designex version of choice:

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

Now you can install designex by running:

$ mix designex.install
copy

The executable is kept at _build/designex-TARGET. Where TARGET is your system target architecture.

If your platform isn't officially supported by Designex, you can supply a third party path to the binary the installer wants (beware that we cannot guarantee the compatibility of any third party executable): The installer also copy the node_modules needed into the assets path. Oclif currently do not pack dependencies

$ mix designex.install https://people.freebsd.org/~dch/pub/designex/v0.0.1/designex-linux-x64
copy

If you already use Node and have a node_modules folder, you must install the dependencies seperatly by by adding them to your package.json

$ mix designex.install --no-deps
copy

Then in you package.json add the dependencies needed by your scripts "dependencies": { "@tokens-studio/sd-transforms": "^1.2.9", "sd-tailwindcss-transformer": "^2.0.0", "style-dictionary": "^4.3.0" },

Profiles

The first argument to designex is the execution profile. You can define multiple execution profiles with the current directory, the OS environment, and default arguments to the designex task:

demo: [
  setup_args: ~w(
  --dir=demo
  --template=shadcn/tokens-studio/single
),
  build_args: ~w(
  --dir=demo
  --script=build.mjs
  --tokens=tokens
)
],
email: [
  setup_args: ~w(
  --dir=email
  --template=shadcn/tokens-studio/multi
),
  build_args: ~w(
  --dir=email
  --script=build.mjs
  --tokens=tokens
)
]copy

When mix designex demo is invoked, the task arguments will be appended to the ones configured above. Note profiles must be configured in your config/config.exs, as designex runs without starting your application (and therefore it won't pick settings in config/runtime.exs).

Designex Setup

To setup Invoke Designex Setup with your profile:

$ mix designex.setup demo
$ mix designex.setup email

copy

You can choose the template and directory by adding them to your designex profile

Designex build

To setup Invoke Designex Build with your profile:

$ mix designex demo
$ mix designex email
copy

or

$ mix designex.build demo
$ mix designex.build email
copy

You can choose the template and directory by adding them to your designex profile

Watch Mode

For development, we want to enable watch mode. So find the watchers configuration in your config/dev.exs and add:

designex: {Tailwind, :install_and_run, [:default, ~w(--watch)]}copy

Note we are enabling the file system watcher.

Finally, run the command:

$ mix designex default
copy

This command installs the Design tokens and scripts. It also generates a default configuration file called designex.config.js for you. This is the file we referenced when we configured designex in config/config.exs. See mix help designex.install to learn more.

Designex configuration

There are two global configurations for the designex application:

• :version - the expected designex version

• :commit - the expected designex commit

• :cacerts_path - the directory to find certificates for https connections

• :path - the path to find the designex executable at. By default, it is automatically downloaded and placed inside the _build directory of your current app

Overriding the :path is not recommended, as we will automatically download and manage designex for you. But in case you can't download it (for example, GitHub behind a proxy), you may want to set the :path to a configurable system location.

For instance, you can install designex globally with npm:

$ npm install -g designex
copy

On Unix, the executable will be at:

NPM_ROOT/designex/node_modules/designex-TARGET/bin/designexcopy

On Windows, it will be at:

NPM_ROOT/designex/node_modules/designex-windows-(32|64)/designex.execopy

Where NPM_ROOT is the result of npm root -g and TARGET is your system target architecture.

Once you find the location of the executable, you can store it in a MIX_DESIGNEX_PATH environment variable, which you can then read in your configuration file:

config :designex, path: System.get_env("MIX_DESIGNEX_PATH")copy