@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
78 lines (77 loc) • 5.14 kB
JavaScript
import { property as i } from "lit/decorators.js";
import { unsafeCSS as h, LitElement as n, html as w } from "lit";
import "../../chain-filter-963a1f6f.js";
const t = "wolf-ui-context-namespaces";
class m {
/**
* Creates a command object for a namespace and adds isHandled and addHandler to every function
* @returns
*/
static createCommand = () => {
const o = {};
return new Proxy(o, {
get: (r, e) => (r[e] || (r[e] = () => {
}, r[e].isHandled = () => !1, r[e].addHandler = (l) => {
o[e] = l, o[e].isHandled = () => !0, o[e].addHandler = (c) => {
};
}), o[e])
});
};
/**
* Gets the command object for a namespace
* @param namespace
* @returns
*/
static getCommand(o) {
return o.commands;
}
/**
* Gets the namespace object
* @param namespace
* @returns
*/
static getSpace(o, r = globalThis) {
r[t] || (r[t] = {}), r[t][o] || (r[t][o] = /* @__PURE__ */ new Map());
const e = r[t][o];
return e.has(o) || e.set(o, { commands: this.createCommand() }), e.get(o);
}
}
const g = `:host{color-scheme:light dark;--wolf-spacing-xs: 2px;--wolf-spacing-sm: 4px;--wolf-spacing-md: 6px;--wolf-spacing-lg: 8px;--wolf-spacing-xl: 10px;font-family:Roboto,sans-serif;--wolf-font-size-sm: 13.6px;--wolf-font-size-md: 16px;--wolf-font-size-lg: 19.2px;--wolf-line-height-base: 1.6;--wolf-border-radius: 4px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--wolf-border-color-dark: #b4b9bc;--wolf-box-shadow-color-default: 0 2px 4px rgba(71, 72, 74, .2);--wolf-icon-default-color: #686868}:host{display:block;box-sizing:border-box}:host .wolf-theme-provider{display:inherit}:host,:host([theme=light]){--wolf-theme-color: #ffffff;--wolf-background-color-default: #e9eaec;--wolf-background-color-darker: #dddddd;--wolf-theme-color-inverse: #121212;--wolf-box-shadow-color-default: 0 2px 4px rgba(71, 72, 74, .2);--wolf-color-primary: #2196f3;--wolf-color-primary-hover: #1976d2;--wolf-color-primary-active: #1565c0;--wolf-color-danger: #f44336;--wolf-color-danger-hover: #d32f2f;--wolf-color-danger-active: #c62828;--wolf-color-success: #4caf50;--wolf-color-success-hover: #388e3c;--wolf-color-success-active: #2e7d32;--wolf-color-warning: #ff9800;--wolf-color-warning-hover: #f57c00;--wolf-color-warning-active: #e65100;--wolf-color-info: #2196f3;--wolf-color-info-hover: #1976d2;--wolf-color-info-active: #1565c0;--wolf-color-text: rgba(0, 0, 0, .7);--wolf-color-text-light: #666666;--wolf-color-text-dark: #222222;--wolf-color-text-inverse: #ffffff;--wolf-border-color: #cccccc;background-color:var(--wolf-theme-color, #ffffff)}:host([theme=dark]){--wolf-theme-color: #121212;--wolf-theme-color-inverse: #ffffff;--wolf-background-color-default: #3e3e42;--wolf-background-color-darker: #333337;--wolf-box-shadow-color-default: 0 2px 4px rgba(180, 185, 188, .2);--wolf-color-primary: #64b5f6;--wolf-color-primary-hover: #42a5f5;--wolf-color-primary-active: #2196f3;--wolf-color-danger: #ef5350;--wolf-color-danger-hover: #e53935;--wolf-color-danger-active: #c62828;--wolf-color-success: #81c784;--wolf-color-success-hover: #66bb6a;--wolf-color-success-active: #4caf50;--wolf-color-warning: #ffb74d;--wolf-color-warning-hover: #ffa726;--wolf-color-warning-active: #ff9800;--wolf-color-info: #64b5f6;--wolf-color-info-hover: #42a5f5;--wolf-color-info-active: #2196f3;--wolf-color-text: #f5f5f5;--wolf-color-text-light: #dedede;--wolf-color-text-dark: #f0f0f0;--wolf-color-text-inverse: #333333;--wolf-border-color: #666666;background-color:var(--wolf-theme-color, #121212)}
`;
var p = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (f, o, r, e) => {
for (var l = e > 1 ? void 0 : e ? b(o, r) : o, c = f.length - 1, s; c >= 0; c--)
(s = f[c]) && (l = (e ? s(o, r, l) : s(l)) || l);
return e && l && p(o, r, l), l;
};
const y = "wolf-theme-provider";
class a extends n {
constructor() {
super(...arguments), this.theme = "light", this.useBrowserTheme = !1, this.switchTheme = (o) => {
this.theme = o.matches ? "dark" : "light";
}, this.setupCommands = () => {
const o = m.getSpace("wolf-theme-provider").commands;
o.setTheme.isHandled() || o.setTheme.addHandler((r) => {
this.theme = r;
}), o.getTheme.isHandled() || o.getTheme.addHandler(() => this.theme), o.toggleTheme.isHandled() || o.toggleTheme.addHandler(() => {
this.theme = this.theme === "light" ? "dark" : "light";
});
};
}
connectedCallback() {
super.connectedCallback(), this.setupCommands(), this.useBrowserTheme && (window.matchMedia("(prefers-color-scheme: dark)").matches ? this.theme = "dark" : this.theme = "light", window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this.switchTheme));
}
render() {
return w`<slot></slot>`;
}
}
a.styles = h(g);
d([
i({ reflect: !0 })
], a.prototype, "theme", 2);
d([
i({ type: Boolean, attribute: "use-browser-theme" })
], a.prototype, "useBrowserTheme", 2);
export {
a as WolfThemeProvider,
y as tagName
};