ui-lit/theme/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { lch2rgb } from 'kailib';
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './reconfig';
import { stylesLight } from './light';
import { darkStyles } from './dark';
const endPallete = 1500;
const range = 2200;
let LitTheme = class LitTheme extends LitElement {
    constructor() {
        super(...arguments);
        this.theme = 'dark';
        this.params = {
            primary: [330, 75, 50],
            negative: [20, 75, 50],
            positive: [135, 75, 50],
        };
        this._changedParam = (e) => {
            this.params[e.detail.name] = e.detail.params;
            this.requestUpdate();
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener("changedPallete", this._changedParam);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener("changedPallete", this._changedParam);
    }
    willUpdate(_changedProperties) {
        if (_changedProperties.has('theme')) {
            document.dispatchEvent(new CustomEvent("themeHasChanged", {
                detail: this.theme
            }));
        }
    }
    _themeSwitch() {
        this.theme = this.theme === 'light' ? 'dark' : 'light';
        localStorage.appTheme = this.theme;
    }
    getLuminanceCoeff(n, pos, step, index) {
        const steps = range / step;
        const oneStepDiff = (1 / steps) * 100;
        const coff = (1.5 - n / 100);
        const limit = 700;
        if (pos > limit) {
            const leftSteps = (endPallete - limit) / step;
            const startDecrees = steps - leftSteps;
            const startDecreesValue = 100 - oneStepDiff * startDecrees * coff;
            const leftStep = startDecreesValue / leftSteps;
            const i = index - startDecrees;
            return startDecreesValue - leftStep * i;
        }
        return 100 - oneStepDiff * index * coff;
    }
    getChroma(n, pos, step) {
        const limit = 500;
        if (pos > limit) {
            const index = (pos - limit) / step;
            const steps = (endPallete - limit) / step;
            const oneStepDiff = (1 / steps) * 80;
            const res = n - oneStepDiff * index;
            if (res < 0)
                return 0;
            return res;
        }
        return n;
    }
    genPallete(hcl, name, step = 50, opacity = 100) {
        const result = [];
        for (let pos = endPallete - range, i = 0; pos <= endPallete; pos += step, i++) {
            result.push(`--${name}-${pos}: ${(lch2rgb(this.getLuminanceCoeff(hcl[2], pos, step, i), this.getChroma(hcl[1], pos, step), hcl[0], opacity))};`);
        }
        return result;
    }
    render() {
        return html `
            <style>
                :host{
                    ${this.genPallete(this.params.primary, "primary")}
                    ${this.genPallete(this.params.primary, "primary-op-08", 200, 80)}
                    ${this.genPallete(this.params.positive, "positive")}
                    ${this.genPallete(this.params.negative, "negative")}
                }
            </style>
            <slot @themeSwitch = "${this._themeSwitch}"></slot>`;
    }
};
LitTheme.styles = [css `
    :host{
        display: block;
        min-height: 100%;
        width: 100%;
    }
    `, stylesLight, darkStyles];
__decorate([
    property({ type: String, reflect: true })
], LitTheme.prototype, "theme", void 0);
__decorate([
    property({ type: Object })
], LitTheme.prototype, "params", void 0);
LitTheme = __decorate([
    customElement("lit-theme")
], LitTheme);
export { LitTheme };