@dxos/lit-theme-editor 0.8.3 → 0.8.4-main.3f58842

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.
Files changed (39) hide show
  1. package/dist/tsconfig.tsbuildinfo +1 -1
  2. package/package.json +7 -7
  3. package/dist/types/src/dx-theme-editor/dx-range-spinbutton.d.ts +0 -16
  4. package/dist/types/src/dx-theme-editor/dx-range-spinbutton.d.ts.map +0 -1
  5. package/dist/types/src/dx-theme-editor/dx-range-spinbutton.js +0 -127
  6. package/dist/types/src/dx-theme-editor/dx-range-spinbutton.js.map +0 -1
  7. package/dist/types/src/dx-theme-editor/dx-theme-editor-alias-colors.d.ts +0 -21
  8. package/dist/types/src/dx-theme-editor/dx-theme-editor-alias-colors.d.ts.map +0 -1
  9. package/dist/types/src/dx-theme-editor/dx-theme-editor-alias-colors.js +0 -267
  10. package/dist/types/src/dx-theme-editor/dx-theme-editor-alias-colors.js.map +0 -1
  11. package/dist/types/src/dx-theme-editor/dx-theme-editor-physical-colors.d.ts +0 -19
  12. package/dist/types/src/dx-theme-editor/dx-theme-editor-physical-colors.d.ts.map +0 -1
  13. package/dist/types/src/dx-theme-editor/dx-theme-editor-physical-colors.js +0 -163
  14. package/dist/types/src/dx-theme-editor/dx-theme-editor-physical-colors.js.map +0 -1
  15. package/dist/types/src/dx-theme-editor/dx-theme-editor-semantic-colors.d.ts +0 -32
  16. package/dist/types/src/dx-theme-editor/dx-theme-editor-semantic-colors.d.ts.map +0 -1
  17. package/dist/types/src/dx-theme-editor/dx-theme-editor-semantic-colors.js +0 -474
  18. package/dist/types/src/dx-theme-editor/dx-theme-editor-semantic-colors.js.map +0 -1
  19. package/dist/types/src/dx-theme-editor/dx-theme-editor.d.ts +0 -16
  20. package/dist/types/src/dx-theme-editor/dx-theme-editor.d.ts.map +0 -1
  21. package/dist/types/src/dx-theme-editor/dx-theme-editor.js +0 -160
  22. package/dist/types/src/dx-theme-editor/dx-theme-editor.js.map +0 -1
  23. package/dist/types/src/dx-theme-editor/dx-theme-editor.lit-stories.d.ts +0 -22
  24. package/dist/types/src/dx-theme-editor/dx-theme-editor.lit-stories.d.ts.map +0 -1
  25. package/dist/types/src/dx-theme-editor/dx-theme-editor.lit-stories.js +0 -27
  26. package/dist/types/src/dx-theme-editor/dx-theme-editor.lit-stories.js.map +0 -1
  27. package/dist/types/src/dx-theme-editor/index.d.ts +0 -5
  28. package/dist/types/src/dx-theme-editor/index.d.ts.map +0 -1
  29. package/dist/types/src/dx-theme-editor/index.js +0 -8
  30. package/dist/types/src/dx-theme-editor/index.js.map +0 -1
  31. package/dist/types/src/dx-theme-editor/util.d.ts +0 -8
  32. package/dist/types/src/dx-theme-editor/util.d.ts.map +0 -1
  33. package/dist/types/src/dx-theme-editor/util.js +0 -61
  34. package/dist/types/src/dx-theme-editor/util.js.map +0 -1
  35. package/dist/types/src/index.d.ts +0 -2
  36. package/dist/types/src/index.d.ts.map +0 -1
  37. package/dist/types/src/index.js +0 -5
  38. package/dist/types/src/index.js.map +0 -1
  39. package/dist/types/tsconfig.tsbuildinfo +0 -1
@@ -1,16 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export type DxRangeSpinbuttonVariant = 'reverse-range' | 'reverse-order' | 'torsion';
3
- export declare class DxRangeSpinbutton extends LitElement {
4
- label: string;
5
- min: string | number;
6
- max: string | number;
7
- step: string | number;
8
- value: string | number;
9
- headingId: string;
10
- variant?: DxRangeSpinbuttonVariant;
11
- private handleInput;
12
- private calculateTorsionStyles;
13
- render(): import("lit").TemplateResult<1>;
14
- createRenderRoot(): this;
15
- }
16
- //# sourceMappingURL=dx-range-spinbutton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dx-range-spinbutton.d.ts","sourceRoot":"","sources":["../../../../src/dx-theme-editor/dx-range-spinbutton.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,MAAM,MAAM,wBAAwB,GAAG,eAAe,GAAG,eAAe,GAAG,SAAS,CAAC;AAErF,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,KAAK,EAAE,MAAM,CAAM;IAGnB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAK;IAGzB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAO;IAG3B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAK;IAG1B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAK;IAG3B,SAAS,EAAE,MAAM,CAAM;IAGvB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,sBAAsB;IAoBrB,MAAM;IAyCN,gBAAgB,IAAI,IAAI;CAGlC"}
@@ -1,127 +0,0 @@
1
- //
2
- // Copyright 2025 DXOS.org
3
- //
4
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
5
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
6
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
7
- 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;
8
- return c > 3 && r && Object.defineProperty(target, key, r), r;
9
- };
10
- import { LitElement, html } from 'lit';
11
- import { customElement, property } from 'lit/decorators.js';
12
- import { classMap } from 'lit/directives/class-map.js';
13
- import { styleMap } from 'lit/directives/style-map.js';
14
- let DxRangeSpinbutton = class DxRangeSpinbutton extends LitElement {
15
- constructor() {
16
- super(...arguments);
17
- this.label = '';
18
- this.min = 0;
19
- this.max = 100;
20
- this.step = 1;
21
- this.value = 0;
22
- this.headingId = '';
23
- }
24
- handleInput(e) {
25
- const value = e.target.value;
26
- this.value = value;
27
- // For torsion variant, calculate and apply styles
28
- if (this.variant === 'torsion') {
29
- const controlInputsDiv = e.target.closest('.control-inputs');
30
- if (controlInputsDiv) {
31
- const styles = this.calculateTorsionStyles(Number(value), Number(this.min), Number(this.max));
32
- Object.entries(styles).forEach(([key, value]) => {
33
- controlInputsDiv.style.setProperty(key, value);
34
- });
35
- }
36
- }
37
- // Dispatch custom event
38
- this.dispatchEvent(new CustomEvent('value-changed', {
39
- detail: { value: parseFloat(value) },
40
- bubbles: true,
41
- composed: true,
42
- }));
43
- }
44
- calculateTorsionStyles(value, min, max) {
45
- // Calculate the width per step
46
- const totalSteps = Math.abs(min) + Math.abs(max);
47
- const widthPerStep = 100 / totalSteps; // Using percentage for width
48
- // Calculate the width of the before element
49
- const beforeWidth = `${Math.abs(value) * widthPerStep}%`;
50
- // Calculate the position of the before element
51
- let beforeLeft = '50%';
52
- if (value < 0) {
53
- beforeLeft = `calc(50% - ${beforeWidth})`;
54
- }
55
- return {
56
- '--before-width': beforeWidth,
57
- '--before-left': beforeLeft,
58
- };
59
- }
60
- render() {
61
- const controlId = `${this.headingId}-${this.label.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
62
- // For torsion variant, calculate initial styles
63
- const isTorsion = this.variant === 'torsion';
64
- const initialStyles = isTorsion
65
- ? this.calculateTorsionStyles(Number(this.value), Number(this.min), Number(this.max))
66
- : {};
67
- return html `
68
- <label class="control-label" id="${controlId}-label" for="${controlId}-range">${this.label}:</label>
69
- <div
70
- class="${classMap({ 'control-inputs': true, ...(this.variant && { [this.variant]: true }) })}"
71
- style=${isTorsion ? styleMap(initialStyles) : undefined}
72
- >
73
- <input
74
- id="${controlId}-range"
75
- type="range"
76
- min="${this.min}"
77
- max="${this.max}"
78
- step="${this.step}"
79
- class="range-input dx-focus-ring"
80
- .value=${this.value.toString()}
81
- @input=${this.handleInput}
82
- aria-labelledby="${this.headingId} ${controlId}-label"
83
- />
84
- <input
85
- id="${controlId}-number"
86
- type="number"
87
- min="${this.min}"
88
- max="${this.max}"
89
- step="${this.step}"
90
- class="number-input dx-input dx-focus-ring"
91
- .value=${this.value.toString()}
92
- @input=${this.handleInput}
93
- aria-labelledby="${this.headingId} ${controlId}-label"
94
- />
95
- </div>
96
- `;
97
- }
98
- createRenderRoot() {
99
- return this;
100
- }
101
- };
102
- __decorate([
103
- property({ type: String })
104
- ], DxRangeSpinbutton.prototype, "label", void 0);
105
- __decorate([
106
- property({ type: String })
107
- ], DxRangeSpinbutton.prototype, "min", void 0);
108
- __decorate([
109
- property({ type: String })
110
- ], DxRangeSpinbutton.prototype, "max", void 0);
111
- __decorate([
112
- property({ type: String })
113
- ], DxRangeSpinbutton.prototype, "step", void 0);
114
- __decorate([
115
- property({ type: String })
116
- ], DxRangeSpinbutton.prototype, "value", void 0);
117
- __decorate([
118
- property({ type: String })
119
- ], DxRangeSpinbutton.prototype, "headingId", void 0);
120
- __decorate([
121
- property({ type: String })
122
- ], DxRangeSpinbutton.prototype, "variant", void 0);
123
- DxRangeSpinbutton = __decorate([
124
- customElement('dx-range-spinbutton')
125
- ], DxRangeSpinbutton);
126
- export { DxRangeSpinbutton };
127
- //# sourceMappingURL=dx-range-spinbutton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dx-range-spinbutton.js","sourceRoot":"","sources":["../../../../src/dx-theme-editor/dx-range-spinbutton.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAKhD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAEL,UAAK,GAAW,EAAE,CAAC;QAGnB,QAAG,GAAoB,CAAC,CAAC;QAGzB,QAAG,GAAoB,GAAG,CAAC;QAG3B,SAAI,GAAoB,CAAC,CAAC;QAG1B,UAAK,GAAoB,CAAC,CAAC;QAG3B,cAAS,GAAW,EAAE,CAAC;IA8FzB,CAAC;IAzFS,WAAW,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,kDAAkD;QAClD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,gBAAgB,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;YAC9E,IAAI,gBAAgB,EAAE,CAAC;gBACrB,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC9F,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;oBAC7C,gBAAgC,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBAClE,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,wBAAwB;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,sBAAsB,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;QACpE,+BAA+B;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACjD,MAAM,YAAY,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC,6BAA6B;QAEpE,4CAA4C;QAC5C,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,YAAY,GAAG,CAAC;QAEzD,+CAA+C;QAC/C,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,UAAU,GAAG,cAAc,WAAW,GAAG,CAAC;QAC5C,CAAC;QAED,OAAO;YACL,gBAAgB,EAAE,WAAW;YAC7B,eAAe,EAAE,UAAU;SAC5B,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC;QAE7F,gDAAgD;QAChD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QAC7C,MAAM,aAAa,GAAG,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACrF,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,IAAI,CAAA;yCAC0B,SAAS,gBAAgB,SAAS,WAAW,IAAI,CAAC,KAAK;;iBAE/E,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;gBACpF,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;;;gBAG/C,SAAS;;iBAER,IAAI,CAAC,GAAG;iBACR,IAAI,CAAC,GAAG;kBACP,IAAI,CAAC,IAAI;;mBAER,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;mBACrB,IAAI,CAAC,WAAW;6BACN,IAAI,CAAC,SAAS,IAAI,SAAS;;;gBAGxC,SAAS;;iBAER,IAAI,CAAC,GAAG;iBACR,IAAI,CAAC,GAAG;kBACP,IAAI,CAAC,IAAI;;mBAER,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;mBACrB,IAAI,CAAC,WAAW;6BACN,IAAI,CAAC,SAAS,IAAI,SAAS;;;KAGnD,CAAC;IACJ,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA7GC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACQ;AApBxB,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA+G7B"}
@@ -1,21 +0,0 @@
1
- import { type TokenSet } from '@ch-ui/tokens';
2
- import { LitElement } from 'lit';
3
- export type DxThemeEditorAliasColorsProps = {};
4
- export declare class DxThemeEditorAliasColors extends LitElement {
5
- tokenSet: TokenSet;
6
- searchTerm: string;
7
- private debouncedSaveAndRender;
8
- private handleTokenSetUpdate;
9
- private getSemanticTokenNames;
10
- private getUniqueAliasTokens;
11
- private updateAliasToken;
12
- private removeAliasToken;
13
- private addAliasToken;
14
- private handleSearchChange;
15
- private renderSemanticTokenSelect;
16
- connectedCallback(): void;
17
- disconnectedCallback(): void;
18
- render(): import("lit").TemplateResult<1>;
19
- createRenderRoot(): this;
20
- }
21
- //# sourceMappingURL=dx-theme-editor-alias-colors.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dx-theme-editor-alias-colors.d.ts","sourceRoot":"","sources":["../../../../src/dx-theme-editor/dx-theme-editor-alias-colors.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAmB,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,MAAM,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAE/C,qBACa,wBAAyB,SAAQ,UAAU;IAEtD,QAAQ,EAAE,QAAQ,CAAa;IAG/B,UAAU,EAAE,MAAM,CAAM;IAExB,OAAO,CAAC,sBAAsB,CAEtB;IAER,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,oBAAoB;IAgC5B,OAAO,CAAC,gBAAgB;IAqDxB,OAAO,CAAC,gBAAgB;IAgCxB,OAAO,CAAC,aAAa;IAwCrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,yBAAyB;IA2BxB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IA8DN,gBAAgB,IAAI,IAAI;CAGlC"}
@@ -1,267 +0,0 @@
1
- //
2
- // Copyright 2025 DXOS.org
3
- //
4
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
5
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
6
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
7
- 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;
8
- return c > 3 && r && Object.defineProperty(target, key, r), r;
9
- };
10
- import { LitElement, html } from 'lit';
11
- import { customElement, state } from 'lit/decorators.js';
12
- import { repeat } from 'lit/directives/repeat.js';
13
- import { debounce } from '@dxos/async';
14
- import { makeId } from '@dxos/react-hooks';
15
- import { restore, saveAndRender, tokenSetUpdateEvent } from './util';
16
- let DxThemeEditorAliasColors = class DxThemeEditorAliasColors extends LitElement {
17
- constructor() {
18
- super(...arguments);
19
- this.tokenSet = restore();
20
- this.searchTerm = '';
21
- this.debouncedSaveAndRender = debounce(() => {
22
- saveAndRender(this.tokenSet);
23
- }, 200);
24
- this.handleTokenSetUpdate = () => {
25
- this.tokenSet = restore();
26
- };
27
- }
28
- getSemanticTokenNames() {
29
- var _a, _b;
30
- if (!((_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.semantic) === null || _b === void 0 ? void 0 : _b.sememes)) {
31
- return [];
32
- }
33
- return Object.keys(this.tokenSet.colors.semantic.sememes);
34
- }
35
- getUniqueAliasTokens() {
36
- var _a, _b;
37
- if (!((_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.alias) === null || _b === void 0 ? void 0 : _b.aliases)) {
38
- return [];
39
- }
40
- const aliasMap = new Map();
41
- // Process all semantic tokens
42
- Object.entries(this.tokenSet.colors.alias.aliases).forEach(([semanticToken, conditions]) => {
43
- // Process each condition (root, attention)
44
- Object.entries(conditions).forEach(([condition, aliasNames]) => {
45
- // Process each alias name
46
- aliasNames.forEach((aliasName) => {
47
- // If the alias is not in the map yet, add it
48
- if (!aliasMap.has(aliasName)) {
49
- aliasMap.set(aliasName, { name: aliasName });
50
- }
51
- // Update the condition mapping
52
- const aliasInfo = aliasMap.get(aliasName);
53
- if (condition === 'root') {
54
- aliasInfo.root = semanticToken;
55
- }
56
- else if (condition === 'attention') {
57
- aliasInfo.attention = semanticToken;
58
- }
59
- });
60
- });
61
- });
62
- return Array.from(aliasMap.values()).sort((a, b) => a.name.localeCompare(b.name));
63
- }
64
- updateAliasToken(oldName, newName, rootToken, attentionToken) {
65
- var _a, _b;
66
- if (!((_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.alias) === null || _b === void 0 ? void 0 : _b.aliases)) {
67
- return;
68
- }
69
- // Create a deep copy of the tokenSet to avoid direct mutation
70
- const updatedTokenSet = JSON.parse(JSON.stringify(this.tokenSet));
71
- const aliases = updatedTokenSet.colors.alias.aliases;
72
- // Remove the old alias from all semantic tokens
73
- Object.entries(aliases).forEach(([semanticToken, conditions]) => {
74
- Object.entries(conditions).forEach(([condition, aliasNames]) => {
75
- const index = aliasNames.indexOf(oldName);
76
- if (index !== -1) {
77
- aliasNames.splice(index, 1);
78
- if (aliasNames.length === 0) {
79
- delete conditions[condition];
80
- }
81
- if (Object.keys(conditions).length === 0) {
82
- delete aliases[semanticToken];
83
- }
84
- }
85
- });
86
- });
87
- // Add the new alias to the specified semantic tokens
88
- if (rootToken) {
89
- if (!aliases[rootToken]) {
90
- aliases[rootToken] = {};
91
- }
92
- if (!aliases[rootToken].root) {
93
- aliases[rootToken].root = [];
94
- }
95
- aliases[rootToken].root.push(newName);
96
- }
97
- if (attentionToken) {
98
- if (!aliases[attentionToken]) {
99
- aliases[attentionToken] = {};
100
- }
101
- if (!aliases[attentionToken].attention) {
102
- aliases[attentionToken].attention = [];
103
- }
104
- aliases[attentionToken].attention.push(newName);
105
- }
106
- // Update the state
107
- this.tokenSet = updatedTokenSet;
108
- // Save and render changes
109
- this.debouncedSaveAndRender();
110
- }
111
- removeAliasToken(aliasName) {
112
- var _a, _b;
113
- if (!((_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.alias) === null || _b === void 0 ? void 0 : _b.aliases)) {
114
- return;
115
- }
116
- // Create a deep copy of the tokenSet to avoid direct mutation
117
- const updatedTokenSet = JSON.parse(JSON.stringify(this.tokenSet));
118
- const aliases = updatedTokenSet.colors.alias.aliases;
119
- // Remove the alias from all semantic tokens
120
- Object.entries(aliases).forEach(([semanticToken, conditions]) => {
121
- Object.entries(conditions).forEach(([condition, aliasNames]) => {
122
- const index = aliasNames.indexOf(aliasName);
123
- if (index !== -1) {
124
- aliasNames.splice(index, 1);
125
- if (aliasNames.length === 0) {
126
- delete conditions[condition];
127
- }
128
- if (Object.keys(conditions).length === 0) {
129
- delete aliases[semanticToken];
130
- }
131
- }
132
- });
133
- });
134
- // Update the state
135
- this.tokenSet = updatedTokenSet;
136
- // Save and render changes
137
- this.debouncedSaveAndRender();
138
- }
139
- addAliasToken() {
140
- var _a, _b, _c, _d;
141
- if (!((_b = (_a = this.tokenSet.colors) === null || _a === void 0 ? void 0 : _a.semantic) === null || _b === void 0 ? void 0 : _b.sememes) || !((_d = (_c = this.tokenSet.colors) === null || _c === void 0 ? void 0 : _c.alias) === null || _d === void 0 ? void 0 : _d.aliases)) {
142
- return;
143
- }
144
- // Get the first semantic token
145
- const semanticTokens = Object.keys(this.tokenSet.colors.semantic.sememes);
146
- if (semanticTokens.length === 0) {
147
- return;
148
- }
149
- const firstSemanticToken = semanticTokens[0];
150
- // Generate a random ID for the alias name
151
- const aliasName = makeId('alias--');
152
- // Create a deep copy of the tokenSet to avoid direct mutation
153
- const updatedTokenSet = JSON.parse(JSON.stringify(this.tokenSet));
154
- const aliases = updatedTokenSet.colors.alias.aliases;
155
- // Ensure the semantic token exists in the aliases structure
156
- if (!aliases[firstSemanticToken]) {
157
- aliases[firstSemanticToken] = {};
158
- }
159
- // Ensure the 'root' condition exists
160
- if (!aliases[firstSemanticToken].root) {
161
- aliases[firstSemanticToken].root = [];
162
- }
163
- // Add the new alias to the 'root' condition
164
- aliases[firstSemanticToken].root.push(aliasName);
165
- // Update the state
166
- this.tokenSet = updatedTokenSet;
167
- // Save and render changes
168
- this.debouncedSaveAndRender();
169
- }
170
- handleSearchChange(e) {
171
- this.searchTerm = e.target.value;
172
- }
173
- renderSemanticTokenSelect(condition, currentValue, onChange) {
174
- const semanticTokenNames = this.getSemanticTokenNames();
175
- return html `
176
- <label class="sr-only">${condition === 'root' ? 'Root' : 'Attention'}:</label>
177
- <select
178
- class="semantic-token-select dx-focus-ring"
179
- .value=${currentValue || ''}
180
- @change=${(e) => {
181
- const newValue = e.target.value;
182
- onChange(newValue);
183
- }}
184
- >
185
- <option value="">&mdash;</option>
186
- ${repeat(semanticTokenNames, (name) => name, (name) => html `<option value="${name}" ?selected=${name === currentValue}>${name}</option>`)}
187
- </select>
188
- `;
189
- }
190
- connectedCallback() {
191
- super.connectedCallback();
192
- saveAndRender(this.tokenSet);
193
- window.addEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
194
- }
195
- disconnectedCallback() {
196
- super.disconnectedCallback();
197
- window.removeEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
198
- }
199
- render() {
200
- const aliasTokens = this.getUniqueAliasTokens();
201
- const filteredTokens = aliasTokens.filter((token) => token.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
202
- return html `
203
- <input
204
- type="search"
205
- class="token-search dx-focus-ring"
206
- placeholder="Search alias tokens…"
207
- .value=${this.searchTerm}
208
- @input=${this.handleSearchChange}
209
- aria-label="Search tokens"
210
- />
211
- <div class="alias-token-list">
212
- <div class="alias-token-labels">
213
- <span>Name</span>
214
- <span>Root</span>
215
- <span>Attention</span>
216
- </div>
217
- ${repeat(filteredTokens, (token) => token.name, (token) => html `
218
- <div class="alias-token-item">
219
- <input
220
- type="text"
221
- class="alias-name-input dx-focus-ring"
222
- .value=${token.name}
223
- @change=${(e) => {
224
- const newName = e.target.value;
225
- this.updateAliasToken(token.name, newName, token.root, token.attention);
226
- }}
227
- aria-label="Alias token name"
228
- />
229
- <div class="condition-selector">
230
- ${this.renderSemanticTokenSelect('root', token.root, (newValue) => {
231
- this.updateAliasToken(token.name, token.name, newValue, token.attention);
232
- })}
233
- </div>
234
- <div class="condition-selector">
235
- ${this.renderSemanticTokenSelect('attention', token.attention, (newValue) => {
236
- this.updateAliasToken(token.name, token.name, token.root, newValue);
237
- })}
238
- </div>
239
- <button
240
- class="remove-alias-button dx-focus-ring dx-button"
241
- @click=${() => this.removeAliasToken(token.name)}
242
- aria-label="Remove alias token"
243
- >
244
- <span class="sr-only">Remove alias token</span>
245
- <dx-icon icon="ph--minus--regular" />
246
- </button>
247
- </div>
248
- `)}
249
- </div>
250
- <button class="add-alias-button dx-focus-ring dx-button" @click=${this.addAliasToken}>Add alias</button>
251
- `;
252
- }
253
- createRenderRoot() {
254
- return this;
255
- }
256
- };
257
- __decorate([
258
- state()
259
- ], DxThemeEditorAliasColors.prototype, "tokenSet", void 0);
260
- __decorate([
261
- state()
262
- ], DxThemeEditorAliasColors.prototype, "searchTerm", void 0);
263
- DxThemeEditorAliasColors = __decorate([
264
- customElement('dx-theme-editor-alias-colors')
265
- ], DxThemeEditorAliasColors);
266
- export { DxThemeEditorAliasColors };
267
- //# sourceMappingURL=dx-theme-editor-alias-colors.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dx-theme-editor-alias-colors.js","sourceRoot":"","sources":["../../../../src/dx-theme-editor/dx-theme-editor-alias-colors.ts"],"names":[],"mappings":"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"}
@@ -1,19 +0,0 @@
1
- import { type TokenSet } from '@ch-ui/tokens';
2
- import { LitElement } from 'lit';
3
- import './dx-range-spinbutton';
4
- export type DxThemeEditorPhysicalColorsProps = {};
5
- export declare class DxThemeEditorPhysicalColors extends LitElement {
6
- tokenSet: TokenSet;
7
- private debouncedSaveAndRender;
8
- private handleTokenSetUpdate;
9
- private updateSeriesProperty;
10
- private handleKeyPointChange;
11
- private handleControlPointChange;
12
- private handleTorsionChange;
13
- private renderSeriesControls;
14
- connectedCallback(): void;
15
- disconnectedCallback(): void;
16
- render(): unknown;
17
- createRenderRoot(): this;
18
- }
19
- //# sourceMappingURL=dx-theme-editor-physical-colors.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dx-theme-editor-physical-colors.d.ts","sourceRoot":"","sources":["../../../../src/dx-theme-editor/dx-theme-editor-physical-colors.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiC,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,gCAAgC,GAAG,EAAE,CAAC;AAQlD,qBACa,2BAA4B,SAAQ,UAAU;IAEzD,QAAQ,EAAE,QAAQ,CAAa;IAE/B,OAAO,CAAC,sBAAsB,CAEtB;IAER,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,oBAAoB;IAiFnB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAQN,gBAAgB,IAAI,IAAI;CAGlC"}
@@ -1,163 +0,0 @@
1
- //
2
- // Copyright 2025 DXOS.org
3
- //
4
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
5
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
6
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
7
- 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;
8
- return c > 3 && r && Object.defineProperty(target, key, r), r;
9
- };
10
- import { cssGradientFromCurve, helicalArcFromConfig } from '@ch-ui/colors';
11
- import { LitElement, html } from 'lit';
12
- import { customElement, state } from 'lit/decorators.js';
13
- import { repeat } from 'lit/directives/repeat.js';
14
- import { styleMap } from 'lit/directives/style-map.js';
15
- import { debounce } from '@dxos/async';
16
- import { restore, saveAndRender, tokenSetUpdateEvent } from './util';
17
- import './dx-range-spinbutton';
18
- const bindSeriesDefinitions = ['neutral', 'primary'];
19
- const isHelicalArcSeries = (o) => {
20
- return 'keyPoint' in (o !== null && o !== void 0 ? o : {});
21
- };
22
- let DxThemeEditorPhysicalColors = class DxThemeEditorPhysicalColors extends LitElement {
23
- constructor() {
24
- super(...arguments);
25
- this.tokenSet = restore();
26
- this.debouncedSaveAndRender = debounce(() => {
27
- saveAndRender(this.tokenSet);
28
- }, 200);
29
- this.handleTokenSetUpdate = () => {
30
- this.tokenSet = restore();
31
- };
32
- }
33
- updateSeriesProperty(series, property, value) {
34
- var _a, _b, _c, _d;
35
- 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])) {
36
- return;
37
- }
38
- // Create a deep copy of the tokenSet to avoid direct mutation
39
- const updatedTokenSet = JSON.parse(JSON.stringify(this.tokenSet));
40
- // Update the specific property
41
- updatedTokenSet.colors.physical.definitions.series[series][property] = value;
42
- // Update the state
43
- this.tokenSet = updatedTokenSet;
44
- // Save and render changes
45
- this.debouncedSaveAndRender();
46
- }
47
- handleKeyPointChange(series, index, value) {
48
- var _a, _b, _c, _d;
49
- 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])) {
50
- return;
51
- }
52
- const keyPoint = [...this.tokenSet.colors.physical.definitions.series[series].keyPoint];
53
- keyPoint[index] = value;
54
- this.updateSeriesProperty(series, 'keyPoint', keyPoint);
55
- }
56
- handleControlPointChange(series, property, value) {
57
- this.updateSeriesProperty(series, property, value);
58
- }
59
- handleTorsionChange(series, value) {
60
- this.updateSeriesProperty(series, 'torsion', value);
61
- }
62
- renderSeriesControls(series) {
63
- var _a, _b, _c, _d;
64
- 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];
65
- if (!isHelicalArcSeries(seriesData)) {
66
- return html `<div>Series ${series} not found</div>`;
67
- }
68
- const keyPoint = seriesData.keyPoint || [0, 0, 0];
69
- const lowerCp = seriesData.lowerCp || 0;
70
- const upperCp = seriesData.upperCp || 0;
71
- const torsion = seriesData.torsion || 0;
72
- // Create unique IDs for headings to reference in aria-labelledby
73
- const keyColorHeadingId = `${series}-key-color-heading`;
74
- const controlPointsHeadingId = `${series}-control-points-heading`;
75
- const torsionHeadingId = `${series}-torsion-heading`;
76
- return html `
77
- <div class="series-controls">
78
- <div
79
- class="series-preview"
80
- style=${styleMap({
81
- backgroundImage: cssGradientFromCurve(helicalArcFromConfig(seriesData), 21, [0, 1], 'p3'),
82
- })}
83
- ></div>
84
- <h3 class="series-title">${series} Series</h3>
85
-
86
- <dx-range-spinbutton
87
- label="Hue (0-360)"
88
- min="0"
89
- max="360"
90
- step="0.5"
91
- .value=${keyPoint[2]}
92
- headingId=${keyColorHeadingId}
93
- @value-changed=${(e) => this.handleKeyPointChange(series, 2, e.detail.value)}
94
- ></dx-range-spinbutton>
95
- <dx-range-spinbutton
96
- label="Torsion (-180 to 180)"
97
- min="-180"
98
- max="180"
99
- step="0.5"
100
- .value=${torsion}
101
- headingId=${torsionHeadingId}
102
- variant="torsion"
103
- @value-changed=${(e) => this.handleTorsionChange(series, e.detail.value)}
104
- ></dx-range-spinbutton>
105
- <dx-range-spinbutton
106
- label="Chroma (0-0.4)"
107
- min="0"
108
- max="0.4"
109
- step="0.001"
110
- .value=${keyPoint[1]}
111
- headingId=${keyColorHeadingId}
112
- @value-changed=${(e) => this.handleKeyPointChange(series, 1, e.detail.value)}
113
- ></dx-range-spinbutton>
114
-
115
- <div class="control-group">
116
- <dx-range-spinbutton
117
- label="Dark Control Point (0-1)"
118
- min="0"
119
- max="1"
120
- step="0.01"
121
- .value=${upperCp}
122
- headingId=${controlPointsHeadingId}
123
- variant="reverse-range"
124
- @value-changed=${(e) => this.handleControlPointChange(series, 'upperCp', e.detail.value)}
125
- ></dx-range-spinbutton>
126
- <dx-range-spinbutton
127
- label="Light Control Point (0-1)"
128
- min="0"
129
- max="1"
130
- step="0.01"
131
- .value=${lowerCp}
132
- headingId=${controlPointsHeadingId}
133
- variant="reverse-order"
134
- @value-changed=${(e) => this.handleControlPointChange(series, 'lowerCp', e.detail.value)}
135
- ></dx-range-spinbutton>
136
- </div>
137
- </div>
138
- `;
139
- }
140
- connectedCallback() {
141
- super.connectedCallback();
142
- saveAndRender(this.tokenSet);
143
- window.addEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
144
- }
145
- disconnectedCallback() {
146
- super.disconnectedCallback();
147
- window.removeEventListener(tokenSetUpdateEvent, this.handleTokenSetUpdate);
148
- }
149
- render() {
150
- return repeat(bindSeriesDefinitions, (series) => series, (series) => this.renderSeriesControls(series));
151
- }
152
- createRenderRoot() {
153
- return this;
154
- }
155
- };
156
- __decorate([
157
- state()
158
- ], DxThemeEditorPhysicalColors.prototype, "tokenSet", void 0);
159
- DxThemeEditorPhysicalColors = __decorate([
160
- customElement('dx-theme-editor-physical-colors')
161
- ], DxThemeEditorPhysicalColors);
162
- export { DxThemeEditorPhysicalColors };
163
- //# sourceMappingURL=dx-theme-editor-physical-colors.js.map