@dialpad/dialtone-tokens 2.0.0-next.8 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,6 +6,8 @@ Design tokens are all the defined values that are part of the design system, suc
6
6
  more. The goal is to store design tokens as JSON and output and publish them to many different formats (CSS, LESS,
7
7
  Android, iOS, etc.) upon build.
8
8
 
9
+ > **Dialtone v10:** see [DLT-2979](https://dialpad.atlassian.net/browse/DLT-2979) / [#1426](https://github.com/dialpad/dialtone/pull/1426) for the v10 upgrade and its breaking changes. This is a MAJOR version release.
10
+
9
11
  ## Usage
10
12
 
11
13
  To use Dialtone Tokens in your project:
@@ -34,15 +36,17 @@ Token CSS is wrapped in `@layer dialtone.base`. If your project can't use CSS Ca
34
36
 
35
37
  This mirrors the [no-layers build](https://dialtone.dialpad.com/guides/migration/css-cascade-layers/#no-layers-build) available in `@dialpad/dialtone-css` and `@dialpad/dialtone` — use it if you import token CSS directly rather than through those packages. Every token CSS file that carries `@layer` has a no-layers counterpart at the same path under `no-layers/`.
36
38
 
37
- If you theme at runtime with `initDialtoneTheme` from `themes/config`, pass `{ layers: false }` to load the no-layers core tokens instead — `setBrand`/`setContrast`/`setMaterial` need no equivalent option since brand, contrast, and material overrides were never wrapped in `@layer`:
39
+ If you theme at runtime, use `initDialtoneThemeNoLayers` from `themes/config-no-layers` to load the no-layers core tokens — `setBrand`/`setContrast`/`setMaterial` need no equivalent option since brand, contrast, and material overrides were never wrapped in `@layer`:
38
40
 
39
41
  ```js
40
- import { initDialtoneTheme } from '@dialpad/dialtone-tokens/themes/config';
42
+ import { initDialtoneThemeNoLayers } from '@dialpad/dialtone-tokens/themes/config-no-layers';
41
43
  import Dp from '@dialpad/dialtone-tokens/themes/dp';
42
44
 
43
- initDialtoneTheme(Dp, 'light', document.documentElement, { layers: false });
45
+ initDialtoneThemeNoLayers(Dp, 'light', document.documentElement);
44
46
  ```
45
47
 
48
+ `initDialtoneTheme(..., { layers: false })` from `themes/config` still works too, but resolves the no-layers core via a runtime dynamic import, so it applies a moment after the call returns rather than synchronously — prefer `initDialtoneThemeNoLayers` for new code.
49
+
46
50
  dialtone-tokens provides a postcss plugin that you can use to convert all tokens using rem to px. This could be useful if you are using dialtone in an embedded situation where you don't have control over the root font size.
47
51
 
48
52
  You can reference this script from:
package/dist/doc.json CHANGED
@@ -1,4 +1,4 @@
1
1
  [diffend] Oversized file quarantined before diffing.
2
2
  name: package/dist/doc.json
3
3
  size: 104434071 bytes
4
- sha256: 0015a9f80c8eecd0d544d283a5bf0e391b546bae6e3a526e0cf299e52cf04646
4
+ sha256: 0f012045c8bde85b7633d3aa46935106978ce7459ee282907157724a71360fe8
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core-no-layers.cjs`),t=require(`./config.cjs`);function n(n,r=`light`,i=document.documentElement,a={}){return t.initDialtoneTheme(n,r,i,{...a,layers:!1,core:e})}exports.initDialtoneThemeNoLayers=n;
@@ -0,0 +1,12 @@
1
+ import e from "./core-no-layers.js";
2
+ import { initDialtoneTheme as t } from "./config.js";
3
+ //#region themes/config-no-layers.js
4
+ function n(n, r = "light", i = document.documentElement, a = {}) {
5
+ return t(n, r, i, {
6
+ ...a,
7
+ layers: !1,
8
+ core: e
9
+ });
10
+ }
11
+ //#endregion
12
+ export { n as initDialtoneThemeNoLayers };
@@ -1,3 +1,3 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core.cjs`);var t=Object.freeze([`sandstone`,`steel`,`graphite`,`iron`,`amethyst`,`jade`]),n=new Set(t),r=!1,i=0,a=null;function o(e,t=document.documentElement,n=null){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}if(e===null){d(`dialtone-css-brand`,t?.shadowRoot??t),a&&(t?.setAttribute(`data-dt-brand`,a.brand),t?.setAttribute(`data-dt-material`,a.material??`sandstone`));return}return e.base?s(e,t,n):c(e,t)}function s(e,t=document.documentElement,n=null){t?.setAttribute(`data-dt-theme`,e.base.name),t?.setAttribute(`data-dt-brand`,e.brand.name);let r=t?.shadowRoot??t;u(`dialtone-css-theme`,e.base.css,r),u(`dialtone-css-brand`,e.brand.css,r),n?(u(`dialtone-css-contrast`,n.css,r),t?.setAttribute(`data-dt-contrast`,`high`)):(d(`dialtone-css-contrast`,r),t?.setAttribute(`data-dt-contrast`,`default`))}function c(e,t=document.documentElement){let n=t?.shadowRoot??t;if(e.core&&!r&&(u(`dialtone-css-core`,e.core,n),r=!0),e.baseColors&&!n?.querySelector(`#dialtone-css-base-colors`)&&u(`dialtone-css-base-colors`,e.baseColors,n),e.brand){let r=a?.brand;r&&e.brand.name===r?(d(`dialtone-css-brand`,n),t?.setAttribute(`data-dt-brand`,r),t?.setAttribute(`data-dt-material`,a?.material??`sandstone`)):(u(`dialtone-css-brand`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),m(e,t))}e.contrast&&(u(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name))}function l(t,n){let a=++i;t?(u(`dialtone-css-core`,e.core,n),r=!0):(u(`dialtone-css-core`,``,n),Promise.resolve().then(()=>require(`./core-no-layers.cjs`)).then(({default:e})=>{a===i&&(u(`dialtone-css-core`,e.core,n),r=!0)}).catch(e=>{a===i&&console.error(`[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.`,e)}))}function u(e,t,n,r=null){if(n?.querySelector(`#`+e)){let r=n.querySelector(`#`+e);r.innerHTML=t}else{let i=document.createElement(`style`);i.setAttribute(`type`,`text/css`),i.setAttribute(`id`,e),i.innerHTML=t;let a=n?.querySelector(`head`)??n,o=r?n?.querySelector(`#`+r):null;o&&o.parentNode===a?a.insertBefore(i,o):a?.appendChild(i)}}function d(e,t){t?.querySelector(`#`+e)?.remove()}function f(e,t=document.documentElement){if(e!==`light`&&e!==`dark`){console.warn(`Invalid mode: ${e}. Must be 'light' or 'dark'`);return}if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMode(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}t?.setAttribute(`data-dt-mode`,e)}function p(e,t=document.documentElement){if(!e||typeof e!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!e.brand||typeof e.brand!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand must be an object with {name, css} properties.`);if(typeof e.brand.name!=`string`||!e.brand.name||typeof e.brand.css!=`string`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBaseBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;u(`dialtone-css-brand-base`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),m(e,t),d(`dialtone-css-brand`,n),a&&(a.brand=e.brand.name,a.material=v(e)??`sandstone`)}function m(e,t){let r=e.material?.name;if(r){if(n.has(r)){t?.setAttribute(`data-dt-material`,r);return}console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${r}'; falling back to sandstone.`),t?.setAttribute(`data-dt-material`,`sandstone`)}}function h(e,t=document.documentElement){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setContrast(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;e&&e.contrast?(u(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name)):(d(`dialtone-css-contrast`,n),t?.setAttribute(`data-dt-contrast`,`default`))}function g(e,t=document.documentElement){if(e!=null&&typeof e!=`string`)throw TypeError(`[Dialtone] setMaterial: expected a string material name or null.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMaterial(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let r=e||`sandstone`;if(!n.has(r)){console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),t?.setAttribute(`data-dt-material`,`sandstone`);return}t?.setAttribute(`data-dt-material`,r)}function _(t,n=`light`,r=document.documentElement,i={}){let{layers:o=!0}=i;if(!t||typeof t!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!t.brand||typeof t.brand!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.`);if(typeof t.brand.name!=`string`||!t.brand.name||typeof t.brand.css!=`string`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(n!==`light`&&n!==`dark`)throw TypeError(`[Dialtone] initDialtoneTheme: mode must be 'light' or 'dark', got '${n}'.`);if(!r||typeof r!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: rootNode must be an HTMLElement or host element with shadowRoot.`);if(r instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to initDialtoneTheme(). Please pass the host element instead. The function will access shadowRoot automatically.
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core.cjs`);var t=Object.freeze([`sandstone`,`steel`,`graphite`,`iron`,`amethyst`,`jade`]),n=new Set(t),r=!1,i=0,a=null;function o(e,t=document.documentElement,n=null){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}if(e===null){d(`dialtone-css-brand`,t?.shadowRoot??t),a&&(t?.setAttribute(`data-dt-brand`,a.brand),t?.setAttribute(`data-dt-material`,a.material??`sandstone`));return}return e.base?s(e,t,n):c(e,t)}function s(e,t=document.documentElement,n=null){t?.setAttribute(`data-dt-theme`,e.base.name),t?.setAttribute(`data-dt-brand`,e.brand.name);let r=t?.shadowRoot??t;u(`dialtone-css-theme`,e.base.css,r),u(`dialtone-css-brand`,e.brand.css,r),n?(u(`dialtone-css-contrast`,n.css,r),t?.setAttribute(`data-dt-contrast`,`high`)):(d(`dialtone-css-contrast`,r),t?.setAttribute(`data-dt-contrast`,`default`))}function c(e,t=document.documentElement){let n=t?.shadowRoot??t;if(e.core&&!r&&(u(`dialtone-css-core`,e.core,n),r=!0),e.baseColors&&!n?.querySelector(`#dialtone-css-base-colors`)&&u(`dialtone-css-base-colors`,e.baseColors,n),e.brand){let r=a?.brand;r&&e.brand.name===r?(d(`dialtone-css-brand`,n),t?.setAttribute(`data-dt-brand`,r),t?.setAttribute(`data-dt-material`,a?.material??`sandstone`)):(u(`dialtone-css-brand`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),m(e,t))}e.contrast&&(u(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name))}function l(t,n,a=null){let o=++i;if(t){u(`dialtone-css-core`,e.core,n),r=!0;return}if(a){u(`dialtone-css-core`,a.core,n),r=!0;return}u(`dialtone-css-core`,``,n),Promise.resolve().then(()=>require(`./core-no-layers.cjs`)).then(({default:e})=>{o===i&&(u(`dialtone-css-core`,e.core,n),r=!0)}).catch(e=>{o===i&&console.error(`[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.`,e)})}function u(e,t,n,r=null){if(n?.querySelector(`#`+e)){let r=n.querySelector(`#`+e);r.innerHTML=t}else{let i=document.createElement(`style`);i.setAttribute(`type`,`text/css`),i.setAttribute(`id`,e),i.innerHTML=t;let a=n?.querySelector(`head`)??n,o=r?n?.querySelector(`#`+r):null;o&&o.parentNode===a?a.insertBefore(i,o):a?.appendChild(i)}}function d(e,t){t?.querySelector(`#`+e)?.remove()}function f(e,t=document.documentElement){if(e!==`light`&&e!==`dark`){console.warn(`Invalid mode: ${e}. Must be 'light' or 'dark'`);return}if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMode(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}t?.setAttribute(`data-dt-mode`,e)}function p(e,t=document.documentElement){if(!e||typeof e!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!e.brand||typeof e.brand!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand must be an object with {name, css} properties.`);if(typeof e.brand.name!=`string`||!e.brand.name||typeof e.brand.css!=`string`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBaseBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;u(`dialtone-css-brand-base`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),m(e,t),d(`dialtone-css-brand`,n),a&&(a.brand=e.brand.name,a.material=v(e)??`sandstone`)}function m(e,t){let r=e.material?.name;if(r){if(n.has(r)){t?.setAttribute(`data-dt-material`,r);return}console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${r}'; falling back to sandstone.`),t?.setAttribute(`data-dt-material`,`sandstone`)}}function h(e,t=document.documentElement){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setContrast(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;e&&e.contrast?(u(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name)):(d(`dialtone-css-contrast`,n),t?.setAttribute(`data-dt-contrast`,`default`))}function g(e,t=document.documentElement){if(e!=null&&typeof e!=`string`)throw TypeError(`[Dialtone] setMaterial: expected a string material name or null.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMaterial(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let r=e||`sandstone`;if(!n.has(r)){console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),t?.setAttribute(`data-dt-material`,`sandstone`);return}t?.setAttribute(`data-dt-material`,r)}function _(t,n=`light`,r=document.documentElement,i={}){let{layers:o=!0,core:s=null}=i;if(!t||typeof t!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!t.brand||typeof t.brand!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.`);if(typeof t.brand.name!=`string`||!t.brand.name||typeof t.brand.css!=`string`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(n!==`light`&&n!==`dark`)throw TypeError(`[Dialtone] initDialtoneTheme: mode must be 'light' or 'dark', got '${n}'.`);if(!r||typeof r!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: rootNode must be an HTMLElement or host element with shadowRoot.`);if(r instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to initDialtoneTheme(). Please pass the host element instead. The function will access shadowRoot automatically.
2
2
  Correct: initDialtoneTheme(brand, mode, hostElement)
3
- Incorrect: initDialtoneTheme(brand, mode, hostElement.shadowRoot)`);return}let s=r?.shadowRoot??r;if(r===document.documentElement&&document.querySelector(`#dialtone-css-core`)!==null)throw Error(`[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)`);let c=a;if(c)if(c.brand===t.brand.name&&c.mode===n){if(c.layers===o){console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}'. Re-applying the same theme may be unnecessary. If you need to switch themes dynamically, use setBaseBrand() or setMode() instead of calling initDialtoneTheme() again.`);return}console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}' using layers=${c.layers}. Reloading core tokens with layers=${o}.`),l(o,s),a.layers=o;return}else{console.warn(`[Dialtone] Theme already initialized. Previous: brand='${c.brand}', mode='${c.mode}'. New: brand='${t.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);return}l(o,s),u(`dialtone-css-base-colors`,e.baseColors,s),f(n,r),r?.setAttribute(`data-dt-contrast`,`default`),r?.setAttribute(`data-dt-material`,`sandstone`),p(t,r),a={brand:t.brand.name,mode:n,contrast:`default`,material:v(t)??`sandstone`,layers:o}}function v(e){return e?.material?.name??null}var y=e=>v(e)!==null,b=o,x=S;function S(e=document.documentElement){if(e instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to resetBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let t=e?.shadowRoot??e;a=null,r=!1,i++,d(`dialtone-css-core`,t),d(`dialtone-css-base-colors`,t),d(`dialtone-css-material`,t),d(`dialtone-css-brand-base`,t),d(`dialtone-css-brand`,t),d(`dialtone-css-contrast`,t),e?.removeAttribute(`data-dt-mode`),e?.removeAttribute(`data-dt-brand`),e?.removeAttribute(`data-dt-contrast`),e?.removeAttribute(`data-dt-material`)}exports.VALID_MATERIALS=t,exports.getBrandMaterial=v,exports.hasBrandMaterialLock=y,exports.initDialtoneTheme=_,exports.resetBrand=S,exports.resetTheme=x,exports.setBaseBrand=p,exports.setBrand=o,exports.setContrast=h,exports.setMaterial=g,exports.setMode=f,exports.setTheme=b;
3
+ Incorrect: initDialtoneTheme(brand, mode, hostElement.shadowRoot)`);return}let c=r?.shadowRoot??r;if(r===document.documentElement&&document.querySelector(`#dialtone-css-core`)!==null)throw Error(`[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)`);let d=a;if(d)if(d.brand===t.brand.name&&d.mode===n){if(d.layers===o){console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}'. Re-applying the same theme may be unnecessary. If you need to switch themes dynamically, use setBaseBrand() or setMode() instead of calling initDialtoneTheme() again.`);return}console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}' using layers=${d.layers}. Reloading core tokens with layers=${o}.`),l(o,c,s),a.layers=o;return}else{console.warn(`[Dialtone] Theme already initialized. Previous: brand='${d.brand}', mode='${d.mode}'. New: brand='${t.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);return}l(o,c,s),u(`dialtone-css-base-colors`,e.baseColors,c),f(n,r),r?.setAttribute(`data-dt-contrast`,`default`),r?.setAttribute(`data-dt-material`,`sandstone`),p(t,r),a={brand:t.brand.name,mode:n,contrast:`default`,material:v(t)??`sandstone`,layers:o}}function v(e){return e?.material?.name??null}var y=e=>v(e)!==null,b=o,x=S;function S(e=document.documentElement){if(e instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to resetBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let t=e?.shadowRoot??e;a=null,r=!1,i++,d(`dialtone-css-core`,t),d(`dialtone-css-base-colors`,t),d(`dialtone-css-material`,t),d(`dialtone-css-brand-base`,t),d(`dialtone-css-brand`,t),d(`dialtone-css-contrast`,t),e?.removeAttribute(`data-dt-mode`),e?.removeAttribute(`data-dt-brand`),e?.removeAttribute(`data-dt-contrast`),e?.removeAttribute(`data-dt-material`)}exports.VALID_MATERIALS=t,exports.getBrandMaterial=v,exports.hasBrandMaterialLock=y,exports.initDialtoneTheme=_,exports.resetBrand=S,exports.resetTheme=x,exports.setBaseBrand=p,exports.setBrand=o,exports.setContrast=h,exports.setMaterial=g,exports.setMode=f,exports.setTheme=b;
@@ -32,13 +32,21 @@ function c(e, t = document.documentElement) {
32
32
  }
33
33
  e.contrast && (u("dialtone-css-contrast", e.contrast.css, n), t?.setAttribute("data-dt-contrast", e.contrast.name));
34
34
  }
35
- function l(t, n) {
36
- let a = ++i;
37
- t ? (u("dialtone-css-core", e.core, n), r = !0) : (u("dialtone-css-core", "", n), import("./core-no-layers.js").then(({ default: e }) => {
38
- a === i && (u("dialtone-css-core", e.core, n), r = !0);
35
+ function l(t, n, a = null) {
36
+ let o = ++i;
37
+ if (t) {
38
+ u("dialtone-css-core", e.core, n), r = !0;
39
+ return;
40
+ }
41
+ if (a) {
42
+ u("dialtone-css-core", a.core, n), r = !0;
43
+ return;
44
+ }
45
+ u("dialtone-css-core", "", n), import("./core-no-layers.js").then(({ default: e }) => {
46
+ o === i && (u("dialtone-css-core", e.core, n), r = !0);
39
47
  }).catch((e) => {
40
- a === i && console.error("[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.", e);
41
- }));
48
+ o === i && console.error("[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.", e);
49
+ });
42
50
  }
43
51
  function u(e, t, n, r = null) {
44
52
  if (n?.querySelector("#" + e)) {
@@ -108,7 +116,7 @@ function g(e, t = document.documentElement) {
108
116
  t?.setAttribute("data-dt-material", r);
109
117
  }
110
118
  function _(t, n = "light", r = document.documentElement, i = {}) {
111
- let { layers: o = !0 } = i;
119
+ let { layers: o = !0, core: s = null } = i;
112
120
  if (!t || typeof t != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';");
113
121
  if (!t.brand || typeof t.brand != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.");
114
122
  if (typeof t.brand.name != "string" || !t.brand.name || typeof t.brand.css != "string") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.");
@@ -118,21 +126,21 @@ function _(t, n = "light", r = document.documentElement, i = {}) {
118
126
  console.warn("[Dialtone] You passed a ShadowRoot directly to initDialtoneTheme(). Please pass the host element instead. The function will access shadowRoot automatically.\nCorrect: initDialtoneTheme(brand, mode, hostElement)\nIncorrect: initDialtoneTheme(brand, mode, hostElement.shadowRoot)");
119
127
  return;
120
128
  }
121
- let s = r?.shadowRoot ?? r;
129
+ let c = r?.shadowRoot ?? r;
122
130
  if (r === document.documentElement && document.querySelector("#dialtone-css-core") !== null) throw Error("[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)");
123
- let c = a;
124
- if (c) if (c.brand === t.brand.name && c.mode === n) {
125
- if (c.layers === o) {
131
+ let d = a;
132
+ if (d) if (d.brand === t.brand.name && d.mode === n) {
133
+ if (d.layers === o) {
126
134
  console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}'. Re-applying the same theme may be unnecessary. If you need to switch themes dynamically, use setBaseBrand() or setMode() instead of calling initDialtoneTheme() again.`);
127
135
  return;
128
136
  }
129
- console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}' using layers=${c.layers}. Reloading core tokens with layers=${o}.`), l(o, s), a.layers = o;
137
+ console.warn(`[Dialtone] Theme already initialized with brand '${t.brand.name}' and mode '${n}' using layers=${d.layers}. Reloading core tokens with layers=${o}.`), l(o, c, s), a.layers = o;
130
138
  return;
131
139
  } else {
132
- console.warn(`[Dialtone] Theme already initialized. Previous: brand='${c.brand}', mode='${c.mode}'. New: brand='${t.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);
140
+ console.warn(`[Dialtone] Theme already initialized. Previous: brand='${d.brand}', mode='${d.mode}'. New: brand='${t.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);
133
141
  return;
134
142
  }
135
- l(o, s), u("dialtone-css-base-colors", e.baseColors, s), f(n, r), r?.setAttribute("data-dt-contrast", "default"), r?.setAttribute("data-dt-material", "sandstone"), p(t, r), a = {
143
+ l(o, c, s), u("dialtone-css-base-colors", e.baseColors, c), f(n, r), r?.setAttribute("data-dt-contrast", "default"), r?.setAttribute("data-dt-material", "sandstone"), p(t, r), a = {
136
144
  brand: t.brand.name,
137
145
  mode: n,
138
146
  contrast: "default",
@@ -0,0 +1,5 @@
1
+ export function initDialtoneThemeNoLayers(brandTheme: BrandTheme, mode?: Mode, rootNode?: ThemeRootNode, options?: Object): void;
2
+ export type BrandTheme = import('./config.js').BrandTheme;
3
+ export type Mode = import('./config.js').Mode;
4
+ export type ThemeRootNode = import('./config.js').ThemeRootNode;
5
+ //# sourceMappingURL=config-no-layers.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"config-no-layers.d.ts","sourceRoot":"","sources":["../../../themes/config-no-layers.js"],"names":[],"mappings":"AAgCA,sDAZW,UAAU,SACV,IAAI,aACJ,aAAa,YACb,MAAM,QAWhB;yBA9BY,OAAO,aAAa,EAAE,UAAU;mBAChC,OAAO,aAAa,EAAE,IAAI;4BAC1B,OAAO,aAAa,EAAE,aAAa"}
@@ -5,6 +5,7 @@ export function setContrast(contrastTheme: ContrastTheme | null, rootNode?: Them
5
5
  export function setMaterial(name: MaterialName | null, rootNode?: ThemeRootNode): void;
6
6
  export function initDialtoneTheme(brandTheme: BrandTheme, mode?: Mode, rootNode?: ThemeRootNode, options?: {
7
7
  layers?: boolean | undefined;
8
+ core?: CoreTheme | undefined;
8
9
  }): void;
9
10
  export function getBrandMaterial(brandTheme: BrandTheme): string | null;
10
11
  export function resetBrand(rootNode?: HTMLElement): void;
@@ -1 +1 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../themes/config.js"],"names":[],"mappings":"AA4GA,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AAmKD,8BAhBW,IAAI,aACJ,aAAa,QA+BvB;AAyBD,yCAjBW,UAAU,aACV,aAAa,QA6DvB;AAiDD,2CArBW,aAAa,GAAC,IAAI,aAClB,aAAa,QAsCvB;AAqBD,kCAPW,YAAY,GAAC,IAAI,aACjB,aAAa,QA+BvB;AAuDD,8CA7CW,UAAU,SACV,IAAI,aACJ,aAAa,YAErB;IAA0B,MAAM;CAMhC,QA8JF;AAMD,6CAHW,UAAU,GACR,MAAM,GAAC,IAAI,CAIvB;AAuCD,yDAiCC;AAvuBD,gDAA6G;AAqqBtG,iDAHI,UAAU,GACR,OAAO,CAEqE;AAtkBzF,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AA2kBD,yDAiCC;mBAntBY,OAAO,GAAC,MAAM;4BAKd,WAAW,GAAC,UAAU;;UAOrB,MAAM;gBACN,MAAM;;;WAOjB;QAAyB,IAAI,EAAlB,MAAM;QACQ,GAAG,EAAjB,MAAM;KACjB;;;;;;cAQA;QAA4B,IAAI,EAArB,MAAM;QACW,GAAG,EAApB,MAAM;KACnB;;2BAGY,WAAW,GAAC,OAAO,GAAC,UAAU,GAAC,MAAM,GAAC,UAAU,GAAC,MAAM"}
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../themes/config.js"],"names":[],"mappings":"AA4GA,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AAkLD,8BAhBW,IAAI,aACJ,aAAa,QA+BvB;AAyBD,yCAjBW,UAAU,aACV,aAAa,QA6DvB;AAiDD,2CArBW,aAAa,GAAC,IAAI,aAClB,aAAa,QAsCvB;AAqBD,kCAPW,YAAY,GAAC,IAAI,aACjB,aAAa,QA+BvB;AAkED,8CAxDW,UAAU,SACV,IAAI,aACJ,aAAa,YAErB;IAA0B,MAAM;IASJ,IAAI;CAGhC,QAmKF;AAMD,6CAHW,UAAU,GACR,MAAM,GAAC,IAAI,CAIvB;AAuCD,yDAiCC;AAjwBD,gDAA6G;AA+rBtG,iDAHI,UAAU,GACR,OAAO,CAEqE;AAhmBzF,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AAqmBD,yDAiCC;mBA7uBY,OAAO,GAAC,MAAM;4BAKd,WAAW,GAAC,UAAU;;UAOrB,MAAM;gBACN,MAAM;;;WAOjB;QAAyB,IAAI,EAAlB,MAAM;QACQ,GAAG,EAAjB,MAAM;KACjB;;;;;;cAQA;QAA4B,IAAI,EAArB,MAAM;QACW,GAAG,EAApB,MAAM;KACnB;;2BAGY,WAAW,GAAC,OAAO,GAAC,UAAU,GAAC,MAAM,GAAC,UAAU,GAAC,MAAM"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone-tokens",
3
- "version": "2.0.0-next.8",
3
+ "version": "2.0.1",
4
4
  "description": "Design tokens for Dialtone.",
5
5
  "type": "module",
6
6
  "files": [