View Source mix designex.install (designex v1.0.2)

Installs Designex executable and assets.

$ mix designex.install
$ mix designex.install --if-missing

By default, it installs 1.0.2 but you can configure it in your config files, such as:

config :designex, :version, "1.0.2"

Options

* `--runtime-config` - load the runtime configuration
  before executing command

* `--if-missing` - install only if the given version
  does not exist

* `--no-deps` - does not install Designex Node dependencies. Use this in case you already have a node_modules folder.
Add instead the dependencies to your own package.json

  "dependencies": {
  "@tokens-studio/sd-transforms": "^1.2.9",
  "sd-tailwindcss-transformer": "^2.0.0",
  "style-dictionary": "^4.3.0"
  }

Assets

Whenever Designex is installed, a default designex configuration will be placed in a new assets/designex.config.js file. See the designex documentation on configuration options.

The default designex configuration includes Designex variants for Phoenix LiveView specific lifecycle classes:

  • phx-no-feedback - applied when feedback should be hidden from the user
  • phx-click-loading - applied when an event is sent to the server on click while the client awaits the server response
  • phx-submit-loading - applied when a form is submitted while the client awaits the server response
  • phx-submit-loading - applied when a form input is changed while the client awaits the server response

Therefore, you may apply a variant, such as phx-click-loading:animate-pulse to customize designex classes when Phoenix LiveView classes are applied.