@dialpad/dialtone-tokens 2.0.0 → 2.0.2
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 +5 -3
- package/dist/doc.json +1 -1
- package/dist/themes/config-no-layers.cjs +1 -0
- package/dist/themes/config-no-layers.js +12 -0
- package/dist/themes/config.cjs +2 -2
- package/dist/themes/config.js +71 -58
- package/dist/themes/materials.cjs +1 -0
- package/dist/themes/materials.js +30 -0
- package/dist/types/themes/config-no-layers.d.ts +5 -0
- package/dist/types/themes/config-no-layers.d.ts.map +1 -0
- package/dist/types/themes/config.d.ts +1 -0
- package/dist/types/themes/config.d.ts.map +1 -1
- package/dist/types/themes/materials.d.ts +28 -0
- package/dist/types/themes/materials.d.ts.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,15 +36,17 @@ Token CSS is wrapped in `@layer dialtone.base`. If your project can't use CSS Ca
|
|
|
36
36
|
|
|
37
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/`.
|
|
38
38
|
|
|
39
|
-
If you theme at runtime
|
|
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`:
|
|
40
40
|
|
|
41
41
|
```js
|
|
42
|
-
import {
|
|
42
|
+
import { initDialtoneThemeNoLayers } from '@dialpad/dialtone-tokens/themes/config-no-layers';
|
|
43
43
|
import Dp from '@dialpad/dialtone-tokens/themes/dp';
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
initDialtoneThemeNoLayers(Dp, 'light', document.documentElement);
|
|
46
46
|
```
|
|
47
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
|
+
|
|
48
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.
|
|
49
51
|
|
|
50
52
|
You can reference this script from:
|
package/dist/doc.json
CHANGED
|
@@ -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 };
|
package/dist/themes/config.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core.cjs`);var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./materials.cjs`),t=require(`./core.cjs`);var n=Object.freeze([`sandstone`,`steel`,`graphite`,`iron`,`amethyst`,`jade`]),r=new Set(n),i=!1,a=0,o=null;function s(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){f(`dialtone-css-brand`,t?.shadowRoot??t),o&&(t?.setAttribute(`data-dt-brand`,o.brand),g(o.material??`sandstone`,t));return}return e.base?c(e,t,n):l(e,t)}function c(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;d(`dialtone-css-theme`,e.base.css,r),d(`dialtone-css-brand`,e.brand.css,r),n?(d(`dialtone-css-contrast`,n.css,r),t?.setAttribute(`data-dt-contrast`,`high`)):(f(`dialtone-css-contrast`,r),t?.setAttribute(`data-dt-contrast`,`default`))}function l(e,t=document.documentElement){let n=t?.shadowRoot??t;if(e.core&&!i&&(d(`dialtone-css-core`,e.core,n),i=!0),e.baseColors&&!n?.querySelector(`#dialtone-css-base-colors`)&&d(`dialtone-css-base-colors`,e.baseColors,n),e.brand){let r=o?.brand;r&&e.brand.name===r?(f(`dialtone-css-brand`,n),t?.setAttribute(`data-dt-brand`,r),g(o?.material??`sandstone`,t)):(d(`dialtone-css-brand`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),h(e,t))}e.contrast&&(d(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name))}function u(e,n,r=null){let o=++a;if(e){d(`dialtone-css-core`,t.core,n),i=!0;return}if(r){d(`dialtone-css-core`,r.core,n),i=!0;return}d(`dialtone-css-core`,``,n),Promise.resolve().then(()=>require(`./core-no-layers.cjs`)).then(({default:e})=>{o===a&&(d(`dialtone-css-core`,e.core,n),i=!0)}).catch(e=>{o===a&&console.error(`[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.`,e)})}function d(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 f(e,t){t?.querySelector(`#`+e)?.remove()}function p(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 m(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;d(`dialtone-css-brand-base`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),h(e,t),f(`dialtone-css-brand`,n),o&&(o.brand=e.brand.name,o.material=b(e)??`sandstone`)}function h(e,t){let n=e.material?.name;if(n){if(r.has(n)){g(n,t);return}console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${n}'; falling back to sandstone.`),g(`sandstone`,t)}}function g(t,n){let r=n?.shadowRoot??n,i=e[t];i?d(`dialtone-css-material`,i.css,r):f(`dialtone-css-material`,r),n?.setAttribute(`data-dt-material`,t)}function _(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?(d(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name)):(f(`dialtone-css-contrast`,n),t?.setAttribute(`data-dt-contrast`,`default`))}function v(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 n=e||`sandstone`;if(!r.has(n)){console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),g(`sandstone`,t);return}g(n,t)}function y(e,n=`light`,r=document.documentElement,i={}){let{layers:a=!0,core:s=null}=i;if(!e||typeof e!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: 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] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.`);if(typeof e.brand.name!=`string`||!e.brand.name||typeof e.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
|
|
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 l=o;if(l)if(l.brand===e.brand.name&&l.mode===n){if(l.layers===a){console.warn(`[Dialtone] Theme already initialized with brand '${e.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 '${e.brand.name}' and mode '${n}' using layers=${l.layers}. Reloading core tokens with layers=${a}.`),u(a,c,s),o.layers=a;return}else{console.warn(`[Dialtone] Theme already initialized. Previous: brand='${l.brand}', mode='${l.mode}'. New: brand='${e.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);return}u(a,c,s),d(`dialtone-css-base-colors`,t.baseColors,c),p(n,r),r?.setAttribute(`data-dt-contrast`,`default`),r?.setAttribute(`data-dt-material`,`sandstone`),m(e,r),o={brand:e.brand.name,mode:n,contrast:`default`,material:b(e)??`sandstone`,layers:a}}function b(e){return e?.material?.name??null}var x=e=>b(e)!==null,S=s,C=w;function w(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;o=null,i=!1,a++,f(`dialtone-css-core`,t),f(`dialtone-css-base-colors`,t),f(`dialtone-css-material`,t),f(`dialtone-css-brand-base`,t),f(`dialtone-css-brand`,t),f(`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=n,exports.getBrandMaterial=b,exports.hasBrandMaterialLock=x,exports.initDialtoneTheme=y,exports.resetBrand=w,exports.resetTheme=C,exports.setBaseBrand=m,exports.setBrand=s,exports.setContrast=_,exports.setMaterial=v,exports.setMode=p,exports.setTheme=S;
|
package/dist/themes/config.js
CHANGED
|
@@ -1,46 +1,55 @@
|
|
|
1
|
-
import e from "./
|
|
1
|
+
import e from "./materials.js";
|
|
2
|
+
import t from "./core.js";
|
|
2
3
|
//#region themes/config.js
|
|
3
|
-
var
|
|
4
|
+
var n = Object.freeze([
|
|
4
5
|
"sandstone",
|
|
5
6
|
"steel",
|
|
6
7
|
"graphite",
|
|
7
8
|
"iron",
|
|
8
9
|
"amethyst",
|
|
9
10
|
"jade"
|
|
10
|
-
]),
|
|
11
|
-
function
|
|
11
|
+
]), r = new Set(n), i = !1, a = 0, o = null;
|
|
12
|
+
function s(e, t = document.documentElement, n = null) {
|
|
12
13
|
if (t instanceof ShadowRoot) {
|
|
13
14
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setBrand(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
if (e === null) {
|
|
17
|
-
|
|
18
|
+
f("dialtone-css-brand", t?.shadowRoot ?? t), o && (t?.setAttribute("data-dt-brand", o.brand), g(o.material ?? "sandstone", t));
|
|
18
19
|
return;
|
|
19
20
|
}
|
|
20
|
-
return e.base ?
|
|
21
|
+
return e.base ? c(e, t, n) : l(e, t);
|
|
21
22
|
}
|
|
22
|
-
function
|
|
23
|
+
function c(e, t = document.documentElement, n = null) {
|
|
23
24
|
t?.setAttribute("data-dt-theme", e.base.name), t?.setAttribute("data-dt-brand", e.brand.name);
|
|
24
25
|
let r = t?.shadowRoot ?? t;
|
|
25
|
-
|
|
26
|
+
d("dialtone-css-theme", e.base.css, r), d("dialtone-css-brand", e.brand.css, r), n ? (d("dialtone-css-contrast", n.css, r), t?.setAttribute("data-dt-contrast", "high")) : (f("dialtone-css-contrast", r), t?.setAttribute("data-dt-contrast", "default"));
|
|
26
27
|
}
|
|
27
|
-
function
|
|
28
|
+
function l(e, t = document.documentElement) {
|
|
28
29
|
let n = t?.shadowRoot ?? t;
|
|
29
|
-
if (e.core && !
|
|
30
|
-
let r =
|
|
31
|
-
r && e.brand.name === r ? (
|
|
30
|
+
if (e.core && !i && (d("dialtone-css-core", e.core, n), i = !0), e.baseColors && !n?.querySelector("#dialtone-css-base-colors") && d("dialtone-css-base-colors", e.baseColors, n), e.brand) {
|
|
31
|
+
let r = o?.brand;
|
|
32
|
+
r && e.brand.name === r ? (f("dialtone-css-brand", n), t?.setAttribute("data-dt-brand", r), g(o?.material ?? "sandstone", t)) : (d("dialtone-css-brand", e.brand.css, n), t?.setAttribute("data-dt-brand", e.brand.name), h(e, t));
|
|
32
33
|
}
|
|
33
|
-
e.contrast && (
|
|
34
|
+
e.contrast && (d("dialtone-css-contrast", e.contrast.css, n), t?.setAttribute("data-dt-contrast", e.contrast.name));
|
|
34
35
|
}
|
|
35
|
-
function
|
|
36
|
-
let
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
function u(e, n, r = null) {
|
|
37
|
+
let o = ++a;
|
|
38
|
+
if (e) {
|
|
39
|
+
d("dialtone-css-core", t.core, n), i = !0;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (r) {
|
|
43
|
+
d("dialtone-css-core", r.core, n), i = !0;
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
d("dialtone-css-core", "", n), import("./core-no-layers.js").then(({ default: e }) => {
|
|
47
|
+
o === a && (d("dialtone-css-core", e.core, n), i = !0);
|
|
39
48
|
}).catch((e) => {
|
|
40
|
-
|
|
41
|
-
})
|
|
49
|
+
o === a && console.error("[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.", e);
|
|
50
|
+
});
|
|
42
51
|
}
|
|
43
|
-
function
|
|
52
|
+
function d(e, t, n, r = null) {
|
|
44
53
|
if (n?.querySelector("#" + e)) {
|
|
45
54
|
let r = n.querySelector("#" + e);
|
|
46
55
|
r.innerHTML = t;
|
|
@@ -51,10 +60,10 @@ function u(e, t, n, r = null) {
|
|
|
51
60
|
o && o.parentNode === a ? a.insertBefore(i, o) : a?.appendChild(i);
|
|
52
61
|
}
|
|
53
62
|
}
|
|
54
|
-
function
|
|
63
|
+
function f(e, t) {
|
|
55
64
|
t?.querySelector("#" + e)?.remove();
|
|
56
65
|
}
|
|
57
|
-
function
|
|
66
|
+
function p(e, t = document.documentElement) {
|
|
58
67
|
if (e !== "light" && e !== "dark") {
|
|
59
68
|
console.warn(`Invalid mode: ${e}. Must be 'light' or 'dark'`);
|
|
60
69
|
return;
|
|
@@ -65,7 +74,7 @@ function f(e, t = document.documentElement) {
|
|
|
65
74
|
}
|
|
66
75
|
t?.setAttribute("data-dt-mode", e);
|
|
67
76
|
}
|
|
68
|
-
function
|
|
77
|
+
function m(e, t = document.documentElement) {
|
|
69
78
|
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';");
|
|
70
79
|
if (!e.brand || typeof e.brand != "object") throw TypeError("[Dialtone] setBaseBrand: brandTheme.brand must be an object with {name, css} properties.");
|
|
71
80
|
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.");
|
|
@@ -74,83 +83,87 @@ function p(e, t = document.documentElement) {
|
|
|
74
83
|
return;
|
|
75
84
|
}
|
|
76
85
|
let n = t?.shadowRoot ?? t;
|
|
77
|
-
|
|
86
|
+
d("dialtone-css-brand-base", e.brand.css, n), t?.setAttribute("data-dt-brand", e.brand.name), h(e, t), f("dialtone-css-brand", n), o && (o.brand = e.brand.name, o.material = b(e) ?? "sandstone");
|
|
78
87
|
}
|
|
79
|
-
function
|
|
80
|
-
let
|
|
81
|
-
if (
|
|
82
|
-
if (
|
|
83
|
-
|
|
88
|
+
function h(e, t) {
|
|
89
|
+
let n = e.material?.name;
|
|
90
|
+
if (n) {
|
|
91
|
+
if (r.has(n)) {
|
|
92
|
+
g(n, t);
|
|
84
93
|
return;
|
|
85
94
|
}
|
|
86
|
-
console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${
|
|
95
|
+
console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${n}'; falling back to sandstone.`), g("sandstone", t);
|
|
87
96
|
}
|
|
88
97
|
}
|
|
89
|
-
function
|
|
98
|
+
function g(t, n) {
|
|
99
|
+
let r = n?.shadowRoot ?? n, i = e[t];
|
|
100
|
+
i ? d("dialtone-css-material", i.css, r) : f("dialtone-css-material", r), n?.setAttribute("data-dt-material", t);
|
|
101
|
+
}
|
|
102
|
+
function _(e, t = document.documentElement) {
|
|
90
103
|
if (t instanceof ShadowRoot) {
|
|
91
104
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setContrast(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
92
105
|
return;
|
|
93
106
|
}
|
|
94
107
|
let n = t?.shadowRoot ?? t;
|
|
95
|
-
e && e.contrast ? (
|
|
108
|
+
e && e.contrast ? (d("dialtone-css-contrast", e.contrast.css, n), t?.setAttribute("data-dt-contrast", e.contrast.name)) : (f("dialtone-css-contrast", n), t?.setAttribute("data-dt-contrast", "default"));
|
|
96
109
|
}
|
|
97
|
-
function
|
|
110
|
+
function v(e, t = document.documentElement) {
|
|
98
111
|
if (e != null && typeof e != "string") throw TypeError("[Dialtone] setMaterial: expected a string material name or null.");
|
|
99
112
|
if (t instanceof ShadowRoot) {
|
|
100
113
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setMaterial(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
101
114
|
return;
|
|
102
115
|
}
|
|
103
|
-
let
|
|
104
|
-
if (!
|
|
105
|
-
console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),
|
|
116
|
+
let n = e || "sandstone";
|
|
117
|
+
if (!r.has(n)) {
|
|
118
|
+
console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`), g("sandstone", t);
|
|
106
119
|
return;
|
|
107
120
|
}
|
|
108
|
-
|
|
121
|
+
g(n, t);
|
|
109
122
|
}
|
|
110
|
-
function
|
|
111
|
-
let { layers:
|
|
112
|
-
if (!
|
|
113
|
-
if (!
|
|
114
|
-
if (typeof
|
|
123
|
+
function y(e, n = "light", r = document.documentElement, i = {}) {
|
|
124
|
+
let { layers: a = !0, core: s = null } = i;
|
|
125
|
+
if (!e || typeof e != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';");
|
|
126
|
+
if (!e.brand || typeof e.brand != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.");
|
|
127
|
+
if (typeof e.brand.name != "string" || !e.brand.name || typeof e.brand.css != "string") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.");
|
|
115
128
|
if (n !== "light" && n !== "dark") throw TypeError(`[Dialtone] initDialtoneTheme: mode must be 'light' or 'dark', got '${n}'.`);
|
|
116
129
|
if (!r || typeof r != "object") throw TypeError("[Dialtone] initDialtoneTheme: rootNode must be an HTMLElement or host element with shadowRoot.");
|
|
117
130
|
if (r instanceof ShadowRoot) {
|
|
118
131
|
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
132
|
return;
|
|
120
133
|
}
|
|
121
|
-
let
|
|
134
|
+
let c = r?.shadowRoot ?? r;
|
|
122
135
|
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
|
|
124
|
-
if (
|
|
125
|
-
if (
|
|
126
|
-
console.warn(`[Dialtone] Theme already initialized with brand '${
|
|
136
|
+
let l = o;
|
|
137
|
+
if (l) if (l.brand === e.brand.name && l.mode === n) {
|
|
138
|
+
if (l.layers === a) {
|
|
139
|
+
console.warn(`[Dialtone] Theme already initialized with brand '${e.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
140
|
return;
|
|
128
141
|
}
|
|
129
|
-
console.warn(`[Dialtone] Theme already initialized with brand '${
|
|
142
|
+
console.warn(`[Dialtone] Theme already initialized with brand '${e.brand.name}' and mode '${n}' using layers=${l.layers}. Reloading core tokens with layers=${a}.`), u(a, c, s), o.layers = a;
|
|
130
143
|
return;
|
|
131
144
|
} else {
|
|
132
|
-
console.warn(`[Dialtone] Theme already initialized. Previous: brand='${
|
|
145
|
+
console.warn(`[Dialtone] Theme already initialized. Previous: brand='${l.brand}', mode='${l.mode}'. New: brand='${e.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);
|
|
133
146
|
return;
|
|
134
147
|
}
|
|
135
|
-
|
|
136
|
-
brand:
|
|
148
|
+
u(a, c, s), d("dialtone-css-base-colors", t.baseColors, c), p(n, r), r?.setAttribute("data-dt-contrast", "default"), r?.setAttribute("data-dt-material", "sandstone"), m(e, r), o = {
|
|
149
|
+
brand: e.brand.name,
|
|
137
150
|
mode: n,
|
|
138
151
|
contrast: "default",
|
|
139
|
-
material:
|
|
140
|
-
layers:
|
|
152
|
+
material: b(e) ?? "sandstone",
|
|
153
|
+
layers: a
|
|
141
154
|
};
|
|
142
155
|
}
|
|
143
|
-
function
|
|
156
|
+
function b(e) {
|
|
144
157
|
return e?.material?.name ?? null;
|
|
145
158
|
}
|
|
146
|
-
var
|
|
147
|
-
function
|
|
159
|
+
var x = (e) => b(e) !== null, S = s, C = w;
|
|
160
|
+
function w(e = document.documentElement) {
|
|
148
161
|
if (e instanceof ShadowRoot) {
|
|
149
162
|
console.warn("[Dialtone] You passed a ShadowRoot directly to resetBrand(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
150
163
|
return;
|
|
151
164
|
}
|
|
152
165
|
let t = e?.shadowRoot ?? e;
|
|
153
|
-
|
|
166
|
+
o = null, i = !1, a++, f("dialtone-css-core", t), f("dialtone-css-base-colors", t), f("dialtone-css-material", t), f("dialtone-css-brand-base", t), f("dialtone-css-brand", t), f("dialtone-css-contrast", t), e?.removeAttribute("data-dt-mode"), e?.removeAttribute("data-dt-brand"), e?.removeAttribute("data-dt-contrast"), e?.removeAttribute("data-dt-material");
|
|
154
167
|
}
|
|
155
168
|
//#endregion
|
|
156
|
-
export {
|
|
169
|
+
export { n as VALID_MATERIALS, b as getBrandMaterial, x as hasBrandMaterialLock, y as initDialtoneTheme, w as resetBrand, C as resetTheme, m as setBaseBrand, s as setBrand, _ as setContrast, v as setMaterial, p as setMode, S as setTheme };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require(`./chunks/chunk-qndmjIgv.js`);let t=require(`@dialpad/dialtone-tokens/layered/material/tokens-amethyst.css?inline`);t=e.t(t);let n=require(`@dialpad/dialtone-tokens/layered/material/tokens-graphite.css?inline`);n=e.t(n);let r=require(`@dialpad/dialtone-tokens/layered/material/tokens-iron.css?inline`);r=e.t(r);let i=require(`@dialpad/dialtone-tokens/layered/material/tokens-jade.css?inline`);i=e.t(i);let a=require(`@dialpad/dialtone-tokens/layered/material/tokens-steel.css?inline`);a=e.t(a);var o={amethyst:{name:`amethyst`,css:t.default},graphite:{name:`graphite`,css:n.default},iron:{name:`iron`,css:r.default},jade:{name:`jade`,css:i.default},steel:{name:`steel`,css:a.default}};module.exports=o;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import e from "@dialpad/dialtone-tokens/layered/material/tokens-amethyst.css?inline";
|
|
2
|
+
import t from "@dialpad/dialtone-tokens/layered/material/tokens-graphite.css?inline";
|
|
3
|
+
import n from "@dialpad/dialtone-tokens/layered/material/tokens-iron.css?inline";
|
|
4
|
+
import r from "@dialpad/dialtone-tokens/layered/material/tokens-jade.css?inline";
|
|
5
|
+
import i from "@dialpad/dialtone-tokens/layered/material/tokens-steel.css?inline";
|
|
6
|
+
//#region themes/materials.js
|
|
7
|
+
var a = {
|
|
8
|
+
amethyst: {
|
|
9
|
+
name: "amethyst",
|
|
10
|
+
css: e
|
|
11
|
+
},
|
|
12
|
+
graphite: {
|
|
13
|
+
name: "graphite",
|
|
14
|
+
css: t
|
|
15
|
+
},
|
|
16
|
+
iron: {
|
|
17
|
+
name: "iron",
|
|
18
|
+
css: n
|
|
19
|
+
},
|
|
20
|
+
jade: {
|
|
21
|
+
name: "jade",
|
|
22
|
+
css: r
|
|
23
|
+
},
|
|
24
|
+
steel: {
|
|
25
|
+
name: "steel",
|
|
26
|
+
css: i
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
export { a as 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":"
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../themes/config.js"],"names":[],"mappings":"AAgHA,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AAkLD,8BAhBW,IAAI,aACJ,aAAa,QA+BvB;AAyBD,yCAjBW,UAAU,aACV,aAAa,QA6DvB;AAmED,2CArBW,aAAa,GAAC,IAAI,aAClB,aAAa,QAsCvB;AAyBD,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,yDAgCC;AAtxBD,gDAA6G;AAqtBtG,iDAHI,UAAU,GACR,OAAO,CAEqE;AAtnBzF,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AA2nBD,yDAgCC;mBAlwBY,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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
namespace amethyst {
|
|
3
|
+
export let name: string;
|
|
4
|
+
export { MaterialAmethyst as css };
|
|
5
|
+
}
|
|
6
|
+
namespace graphite {
|
|
7
|
+
let name_1: string;
|
|
8
|
+
export { name_1 as name };
|
|
9
|
+
export { MaterialGraphite as css };
|
|
10
|
+
}
|
|
11
|
+
namespace iron {
|
|
12
|
+
let name_2: string;
|
|
13
|
+
export { name_2 as name };
|
|
14
|
+
export { MaterialIron as css };
|
|
15
|
+
}
|
|
16
|
+
namespace jade {
|
|
17
|
+
let name_3: string;
|
|
18
|
+
export { name_3 as name };
|
|
19
|
+
export { MaterialJade as css };
|
|
20
|
+
}
|
|
21
|
+
namespace steel {
|
|
22
|
+
let name_4: string;
|
|
23
|
+
export { name_4 as name };
|
|
24
|
+
export { MaterialSteel as css };
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export default _default;
|
|
28
|
+
//# sourceMappingURL=materials.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"materials.d.ts","sourceRoot":"","sources":["../../../themes/materials.js"],"names":[],"mappings":""}
|