@dialpad/dialtone 9.58.0-beta.1 → 9.59.0-beta.1

package/README.md

@@ -26,9 +26,67 @@ npm install @dialpad/dialtone@latest @linusborg/vue-simple-portal @tiptap/vue-2
 
 ### Import packages:
 
+#### Dialtone Tokens
+
+##### Importing tokens via javascript function
+
+For efficiency, the Dialtone tokens are not included in the main dialtone css package, as it is an application side choice which theme to use.
+
+The simplest way to import the you want to use, and pass it into the `setTheme` javascript function that is included with Dialtone:
+
+```js
+import { setTheme } from '@dialpad/dialtone/themes/config';
+import DpLight from '@dialpad/dialtone/themes/dp-light';
+setTheme(DpLight);
+```
+
+possible themes are as follows:
+
+- DpLight - Dialpad Light
+- DpDark - Dialpad Dark
+- TmoLight - T-Mobile Light
+- TmoDark - T-Mobile Dark
+- ExpressiveLight - Marketing Light
+- ExpressiveDark - Marketing Dark
+- ExpressiveSmLight - Marketing Small Light
+- ExpressiveSmDark - Marketing Small Dark
+
+Note it is required to load a theme to use Dialtone. Without setting the theme via setTheme, or importing tokens manually, no CSS variables will be set and therefore no Dialtone styles will be displayed.
+
+##### Importing tokens via manually importing files
+
+You may want to use this method if you don't want to, or are unable to use javascript.
+
+You need to import two tokens files in order to apply a theme. A base tokens files, which is either light or dark, and
+a semantic brand tokens file which is named after a brand and theme 'tokens-dp-light', 'tokens-dp-dark', 'tokens-tmo-light', ...
+
+Dialtone tokens doesn't have a default export, so you need to access
+the files directly as following:
+
+- CSS
+
+```css
+@import "@dialpad/dialtone/tokens/tokens-base-light.css" // Base light theme
+@import "@dialpad/dialtone/tokens/tokens-dp-light.css" // Dialpad light brand
+```
+
+- LESS
+
+```less
+@import "@dialpad/dialtone/tokens/tokens-base-light.less" // Base light tokens
+@import "@dialpad/dialtone/tokens/tokens-dp-light.less" // Dialpad light brand
+```
+
+- JSON
+
+```js
+import "@dialpad/dialtone/tokens/tokens-base-light.json" // Base light tokens
+import "@dialpad/dialtone/tokens/tokens-dp-light.json" // Dialpad light brand
+```
+
 #### Dialtone CSS
 
-Dialtone CSS includes all utility classes as well as tokens.
+Dialtone CSS includes Dialtone utility classes and CSS reset.
 
 - CSS
 
@@ -108,32 +166,6 @@ import { DtButton } from "@dialpad/dialtone/vue3"
 import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
 ```
 
-#### Dialtone Tokens
-
-Dialtone tokens doesn't have a default export, so you need to access
-the files directly as following:
-
-- CSS
-
-```css
-@import "@dialpad/dialtone/tokens/variables-light.css" // Light tokens
-@import "@dialpad/dialtone/tokens/variables-dark.css" // Dark tokens
-```
-
-- LESS
-
-```less
-@import "@dialpad/dialtone/tokens/variables-light.less" // Light tokens
-@import "@dialpad/dialtone/tokens/variables-dark.less" // Dark tokens
-```
-
-- JSON
-
-```js
-import "@dialpad/dialtone/tokens/tokens-light.json" // Light tokens
-import "@dialpad/dialtone/tokens/tokens-dark.json" // Dark tokens
-```
-
 ## About this repo
 
 The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.
@@ -409,7 +441,7 @@ nx run release
 
 ##### Manually
 
-1. Merge your changes to the branch you want to release, commit and push to origin.
+1. Merge your changes to the branch you want to release, commit and push to origin. (Note: If your dialtone version number is behind the last production release number, it may fail. Merge in staging or update the version number manually.)
 2. Go to [GitHub](https://github.com/dialpad/dialtone/actions/workflows/release.yml) and click on `Run workflow`.
 3. Select `alpha`, `beta` or `next` branch.
 4. Select the `package` that you want to release or leave it empty to release all of them.

package/dist/css/tokens/tokens-base-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:12 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:22 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-base-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:12 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:22 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-dp-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:04 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:14 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-dp-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:03 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:13 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-expressive-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:08 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:18 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-expressive-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:07 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:17 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-expressive-sm-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:11 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:21 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-expressive-sm-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:09 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:20 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-tmo-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:06 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:16 GMT
  */
 
 :root {

package/dist/css/tokens/tokens-tmo-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 27 Jul 2024 02:54:05 GMT
+ * Generated on Wed, 31 Jul 2024 16:26:15 GMT
  */
 
 :root {

package/dist/themes/config.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(e){s("dialtone-css-theme",e.base.css),s("dialtone-css-brand",e.brand.css),a(e.base.name,e.brand.name)}function s(e,t){if(document.getElementById(e))document.getElementById(e).innerHTML=t;else{const n=document.createElement("style");n.setAttribute("type","text/css"),n.setAttribute("id",e),n.innerHTML=t,document.head.appendChild(n)}}function a(e,t){document.documentElement.setAttribute("data-dt-theme",e),document.documentElement.setAttribute("data-dt-brand",t)}exports.setTheme=d;

package/dist/themes/config.js

@@ -0,0 +1,17 @@
+function a(e) {
+  s("dialtone-css-theme", e.base.css), s("dialtone-css-brand", e.brand.css), d(e.base.name, e.brand.name);
+}
+function s(e, t) {
+  if (document.getElementById(e))
+    document.getElementById(e).innerHTML = t;
+  else {
+    const n = document.createElement("style");
+    n.setAttribute("type", "text/css"), n.setAttribute("id", e), n.innerHTML = t, document.head.appendChild(n);
+  }
+}
+function d(e, t) {
+  document.documentElement.setAttribute("data-dt-theme", e), document.documentElement.setAttribute("data-dt-brand", t);
+}
+export {
+  a as setTheme
+};