@dxos/lit-theme-editor 0.8.2-main.10c050d

package/dist/src/dx-theme-editor/dx-theme-editor-physical-colors.js

@@ -0,0 +1,163 @@
+//
+// Copyright 2025 DXOS.org
+//
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { cssGradientFromCurve, helicalArcFromConfig } from '@ch-ui/colors';
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { debounce } from '@dxos/async';
+import { restore, saveAndRender, tokenSetUpdateEvent } from './util';
+import './dx-range-spinbutton';
+const bindSeriesDefinitions = ['neutral', 'primary'];
+const isHelicalArcSeries = (o) => {
+    return 'keyPoint' in (o !== null && o !== void 0 ? o : {});
+};
+let DxThemeEditorPhysicalColors = class DxThemeEditorPhysicalColors extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tokenSet = restore();
+        this.debouncedSaveAndRender = debounce(() => {
+            saveAndRender(this.tokenSet);
+        }, 200);
+        this.handleTokenSetUpdate = () => {
+            this.tokenSet = restore();
+        };
+    }
+    updateSeriesProperty(series, property, value) {
+        var _a, _b, _c, _d;
+        if (!((_d = (_c = (_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.physical) === null || _b === void 0 ? void 0 : _b.definitions) === null || _c === void 0 ? void 0 : _c.series) === null || _d === void 0 ? void 0 : _d[series])) {
+            return;
+        }
+        // Create a deep copy of the tokenSet to avoid direct mutation
+        const updatedTokenSet = JSON.parse(JSON.stringify(this.tokenSet));
+        // Update the specific property
+        updatedTokenSet.colors.physical.definitions.series[series][property] = value;
+        // Update the state
+        this.tokenSet = updatedTokenSet;
+        // Save and render changes
+        this.debouncedSaveAndRender();
+    }
+    handleKeyPointChange(series, index, value) {
+        var _a, _b, _c, _d;
+        if (!isHelicalArcSeries((_d = (_c = (_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.physical) === null || _b === void 0 ? void 0 : _b.definitions) === null || _c === void 0 ? void 0 : _c.series) === null || _d === void 0 ? void 0 : _d[series])) {
+            return;
+        }
+        const keyPoint = [...this.tokenSet.colors.physical.definitions.series[series].keyPoint];
+        keyPoint[index] = value;
+        this.updateSeriesProperty(series, 'keyPoint', keyPoint);
+    }
+    handleControlPointChange(series, property, value) {
+        this.updateSeriesProperty(series, property, value);
+    }
+    handleTorsionChange(series, value) {
+        this.updateSeriesProperty(series, 'torsion', value);
+    }
+    renderSeriesControls(series) {
+        var _a, _b, _c, _d;
+        const seriesData = (_d = (_c = (_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.physical) === null || _b === void 0 ? void 0 : _b.definitions) === null || _c === void 0 ? void 0 : _c.series) === null || _d === void 0 ? void 0 : _d[series];
+        if (!isHelicalArcSeries(seriesData)) {
+            return html `<div>Series ${series} not found</div>`;
+        }
+        const keyPoint = seriesData.keyPoint || [0, 0, 0];
+        const lowerCp = seriesData.lowerCp || 0;
+        const upperCp = seriesData.upperCp || 0;
+        const torsion = seriesData.torsion || 0;
+        // Create unique IDs for headings to reference in aria-labelledby
+        const keyColorHeadingId = `${series}-key-color-heading`;
+        const controlPointsHeadingId = `${series}-control-points-heading`;
+        const torsionHeadingId = `${series}-torsion-heading`;
+        return html `
+      <div class="series-controls">
+        <div
+          class="series-preview"
+          style=${styleMap({
+            backgroundImage: cssGradientFromCurve(helicalArcFromConfig(seriesData), 21, [0, 1], 'p3'),
+        })}
+        ></div>
+        <h3 class="series-title">${series} Series</h3>
+
+        <dx-range-spinbutton
+          label="Hue (0-360)"
+          min="0"
+          max="360"
+          step="0.5"
+          .value=${keyPoint[2]}
+          headingId=${keyColorHeadingId}
+          @value-changed=${(e) => this.handleKeyPointChange(series, 2, e.detail.value)}
+        ></dx-range-spinbutton>
+        <dx-range-spinbutton
+          label="Torsion (-180 to 180)"
+          min="-180"
+          max="180"
+          step="0.5"
+          .value=${torsion}
+          headingId=${torsionHeadingId}
+          variant="torsion"
+          @value-changed=${(e) => this.handleTorsionChange(series, e.detail.value)}
+        ></dx-range-spinbutton>
+        <dx-range-spinbutton
+          label="Chroma (0-0.4)"
+          min="0"
+          max="0.4"
+          step="0.001"
+          .value=${keyPoint[1]}
+          headingId=${keyColorHeadingId}
+          @value-changed=${(e) => this.handleKeyPointChange(series, 1, e.detail.value)}
+        ></dx-range-spinbutton>
+
+        <div class="control-group">
+          <dx-range-spinbutton
+            label="Dark Control Point (0-1)"
+            min="0"
+            max="1"
+            step="0.01"
+            .value=${upperCp}
+            headingId=${controlPointsHeadingId}
+            variant="reverse-range"
+            @value-changed=${(e) => this.handleControlPointChange(series, 'upperCp', e.detail.value)}
+          ></dx-range-spinbutton>
+          <dx-range-spinbutton
+            label="Light Control Point (0-1)"
+            min="0"
+            max="1"
+            step="0.01"
+            .value=${lowerCp}
+            headingId=${controlPointsHeadingId}
+            variant="reverse-order"
+            @value-changed=${(e) => this.handleControlPointChange(series, 'lowerCp', e.detail.value)}
+          ></dx-range-spinbutton>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        saveAndRender(this.tokenSet);
+        window.addEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
+    }
+    render() {
+        return repeat(bindSeriesDefinitions, (series) => series, (series) => this.renderSeriesControls(series));
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    state()
+], DxThemeEditorPhysicalColors.prototype, "tokenSet", void 0);
+DxThemeEditorPhysicalColors = __decorate([
+    customElement('dx-theme-editor-physical-colors')
+], DxThemeEditorPhysicalColors);
+export { DxThemeEditorPhysicalColors };
+//# sourceMappingURL=dx-theme-editor-physical-colors.js.map

package/dist/src/dx-theme-editor/dx-theme-editor-physical-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-theme-editor-physical-colors.js","sourceRoot":"","sources":["../../../src/dx-theme-editor/dx-theme-editor-physical-colors.ts"],"names":[],"mappings":"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"}

package/dist/src/dx-theme-editor/dx-theme-editor-semantic-colors.d.ts

@@ -0,0 +1,32 @@
+import { type TokenSet } from '@ch-ui/tokens';
+import { LitElement } from 'lit';
+import './dx-range-spinbutton';
+export type DxThemeEditorSemanticColorsProps = {};
+export declare class DxThemeEditorSemanticColors extends LitElement {
+    tokenSet: TokenSet;
+    searchTerm: string;
+    private debouncedSaveAndRender;
+    private handleTokenSetUpdate;
+    private getPhysicalColorSeries;
+    private getSemanticTokens;
+    private updateSemanticToken;
+    private handleTokenNameChange;
+    private handleSeriesChange;
+    private handleBothSeriesChange;
+    private handleLuminosityChange;
+    private handleAlphaChange;
+    private addSemanticToken;
+    private removeSemanticToken;
+    private getAliasTokensForSemantic;
+    private addAliasToken;
+    private removeAliasToken;
+    private updateAliasToken;
+    private checkDuplicateAlias;
+    private renderTokenControls;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSearchChange;
+    render(): import("lit").TemplateResult<1>;
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=dx-theme-editor-semantic-colors.d.ts.map

package/dist/src/dx-theme-editor/dx-theme-editor-semantic-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-theme-editor-semantic-colors.d.ts","sourceRoot":"","sources":["../../../src/dx-theme-editor/dx-theme-editor-semantic-colors.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAwB,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,gCAAgC,GAAG,EAAE,CAAC;AAMlD,qBACa,2BAA4B,SAAQ,UAAU;IAEzD,QAAQ,EAAE,QAAQ,CAAa;IAG/B,UAAU,EAAE,MAAM,CAAM;IAExB,OAAO,CAAC,sBAAsB,CAEtB;IAER,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,gBAAgB;IAkCxB,OAAO,CAAC,gBAAgB;IA2CxB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,mBAAmB;IAsLlB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,kBAAkB;IAIjB,MAAM;IAwBN,gBAAgB,IAAI,IAAI;CAGlC"}