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.