As many of you already know, Dialtone 8 has been available on a separate branch for a while now and is being used in our primary applications. The migration to Dialtone 8 has been completed on Dialpad Meetings and is currently in progress for Dialpad. As of today we are promoting Dialtone 8 to the main branch. This means you no longer have to use the @next tag for Dialtone and Dialtone Vue and can update to the main branch in your applications. No further updates will be made to Dialtone 7 except for maybe emergency bug fixes. Dialtone 8 documentation will now exist on https://dialtone.dialpad.com. You may still see the documentation site for Dialtone 7 at https://dialtone.dialpad.com/legacy
What's new in Dialtone 8?
The core feature of Dialtone 8 is the adoption of Design Tokens. Design Tokens are independently stored and output values of the design system that offer a number of benefits:
Synchronized Naming: If a designer uses a design token in their figma design to set a color, the developer could use the design token of the same name in the code to use that same color.
Theming: Since our design tokens come with a new semantic color system, this allows us to theme applications any way we want, such as dark mode which is being released this week. This will perhaps even allow for user created themes in the future.
Multi-platform Support: Enables us to use the same design language on all our platforms. Dialpad, Dialpad Meetings, Web, Android, iOS, any other existing or future platforms.
Design is controlled by Designers: Designers can now make changes to tokens directly in figma, their changes there can be released to the dialtone-tokens repo and will affect the design language of all of our apps using design tokens.
Documentation: Every single available core design system value is documented and easy to find in our tokens documentation.
How do I migrate?
Pretty much every single variable name in Dialtone has changed due to the new tokens, so this will require a migration in consuming applications. The Dialpad Meetings migration has been completed and the Dialpad migration is underway. If you maintain a project separate from that we have a script that can assist you greatly in migrating. Please follow the Dialtone 8 migration guide in order to migrate.
How do I upgrade to the main branch release?
Dialtone
If you were running a dialtone-next installation alongside dialtone for migration purposes, uninstall the dialtone-next branch, if not, ignore this step:
npm uninstall @dialpad/dialtone-next
now install the latest version of the main branch:
npm install @dialpad/dialtone@latest
If you have not yet fully completed the migration to dialtone 8, you may still need dialtone 7 until your migration is complete. If this is the case you can install dialtone 7 alongside dialtone 8 named as "dialtone-legacy" in the same way we did with dialtone-next before:
npm install @dialpad/dialtone-legacy@npm:@dialpad/dialtone@legacy
You will have to update any old dialtone imports to reference dialtone-legacy and any dialtone-next imports to reference regular dialtone.
@import "./node_modules/@dialpad/dialtone-css/lib/dist/css/dialtone.css";
Note that we no longer output less files as part of our package. Dialtone 8 is purely CSS and should be used as such.
Dialtone Vue
You may have been using the next or next-vue3 branch which was the version of Dialtone Vue that implements Dialtone 8. If so you can simply update this to the latest version now:
// Vue 2
npm install @dialpad/dialtone-vue@latest
// Vue 3
npm install @dialpad/dialtone-vue@vue3
Dialtone Vue will not be incrementing a major version with this release. If you would like to use the most recent version of Dialtone Vue compatible with Dialtone 7 please use:
// Vue 2
npm install @dialpad/dialtone-vue@legacy
// Vue 3
npm install @dialpad/dialtone-vue@legacy-vue3
Next steps
Dialtone 8's documentation is not yet fully complete, and we will be working over the next couple of months to get it to where it needs to be. However, please check out the new Dialtone tokens documentation page, which documents all available Dialtone tokens.
We will be developing tooling over the next quarter to promote Dialtone adoption in consuming applications. This will likely come in the form of linter rules and diagnostic health scripts. The goal is to get our applications using Dialtone correctly, and as much as possible.
Thanks for everyone's support in this migration and I hope everyone enjoys the implementation of our biggest feature request, DARK MODE! 🌔