@descope/web-components-ui 1.0.40 → 1.0.42
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/dist/cjs/index.cjs.js +35 -18
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +416 -343
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/index.js +3 -3
- package/src/components/descope-checkbox/index.js +2 -2
- package/src/components/descope-combo/index.js +12 -12
- package/src/components/descope-container/Container.js +57 -51
- package/src/components/descope-container/index.js +1 -1
- package/src/components/descope-date-picker/index.js +13 -7
- package/src/components/descope-email-field/index.js +2 -2
- package/src/components/descope-number-field/index.js +2 -2
- package/src/components/descope-password-field/index.js +2 -2
- package/src/components/descope-switch-toggle/index.js +2 -2
- package/src/components/descope-text-area/index.js +2 -2
- package/src/components/descope-text-field/index.js +3 -3
- package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
- package/src/componentsHelpers/createProxy/helpers.js +31 -27
- package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
- package/src/componentsHelpers/createStyleMixin/index.js +76 -55
- package/src/componentsHelpers/draggableMixin.js +25 -26
- package/src/constants.js +1 -1
- package/src/dev/index.js +4 -3
- package/src/helpers.js +8 -6
- package/src/index.cjs.js +1 -1
- package/src/index.js +13 -13
- package/src/index.umd.js +11 -5
- package/src/theme/components/button.js +37 -37
- package/src/theme/components/container.js +10 -12
- package/src/theme/components/textArea.js +3 -3
- package/src/theme/components/textField.js +1 -1
- package/src/theme/globals.js +44 -36
- package/src/theme/index.js +2 -2
- package/src/themeHelpers/index.js +45 -30
- package/src/themeHelpers/processColors.js +10 -7
package/dist/index.esm.js
CHANGED
@@ -11,202 +11,247 @@ import Color from 'color';
|
|
11
11
|
|
12
12
|
const DESCOPE_PREFIX = 'descope';
|
13
13
|
|
14
|
-
const kebabCase = str =>
|
15
|
-
|
16
|
-
.replace(/[
|
17
|
-
.
|
14
|
+
const kebabCase = (str) =>
|
15
|
+
str
|
16
|
+
.replace(/([a-z])([A-Z])/g, '$1-$2')
|
17
|
+
.replace(/[\s_.]+/g, '-')
|
18
|
+
.toLowerCase();
|
18
19
|
|
19
20
|
const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
|
20
21
|
|
21
|
-
const getCssVarName = (...args) =>
|
22
|
+
const getCssVarName = (...args) =>
|
23
|
+
`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
|
22
24
|
|
23
|
-
const createCssVarFallback = (first, ...rest) =>
|
25
|
+
const createCssVarFallback = (first, ...rest) =>
|
26
|
+
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
24
27
|
|
25
|
-
const createCssSelector = (
|
26
|
-
|
27
|
-
|
28
|
-
|
28
|
+
const createCssSelector = (
|
29
|
+
baseSelector = '',
|
30
|
+
relativeSelectorOrSelectorFn = ''
|
31
|
+
) =>
|
32
|
+
typeof relativeSelectorOrSelectorFn === 'function'
|
33
|
+
? relativeSelectorOrSelectorFn(baseSelector)
|
34
|
+
: `${baseSelector}${relativeSelectorOrSelectorFn}`;
|
29
35
|
|
30
36
|
class StyleBuilder {
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
37
|
+
constructor() {
|
38
|
+
this.styleMap = new Map();
|
39
|
+
}
|
40
|
+
|
41
|
+
add(selector, property, value) {
|
42
|
+
if (!this.styleMap.has(selector)) {
|
43
|
+
this.styleMap.set(selector, []);
|
44
|
+
}
|
45
|
+
|
46
|
+
this.styleMap.set(selector, [
|
47
|
+
...this.styleMap.get(selector),
|
48
|
+
{ property, value }
|
49
|
+
]);
|
50
|
+
}
|
51
|
+
|
52
|
+
toString() {
|
53
|
+
return Array.from(this.styleMap.entries()).reduce(
|
54
|
+
(style, [selector, propValArr]) =>
|
55
|
+
(style += `${selector} { \n${propValArr
|
56
|
+
.map(({ property, value }) => `${property}: ${value}`)
|
57
|
+
.join(';\n')} \n}\n\n`),
|
58
|
+
''
|
59
|
+
);
|
60
|
+
}
|
48
61
|
}
|
49
62
|
|
50
63
|
const normalizeConfig = (attr, config) => {
|
51
|
-
|
64
|
+
const defaultMapping = { selector: '', property: kebabCase(attr) };
|
52
65
|
|
53
|
-
|
66
|
+
if (!config || !Object.keys(config).length) return [defaultMapping];
|
54
67
|
|
55
|
-
|
68
|
+
if (Array.isArray(config))
|
69
|
+
return config.map((entry) => Object.assign({}, defaultMapping, entry));
|
56
70
|
|
57
|
-
|
71
|
+
return [Object.assign({}, defaultMapping, config)];
|
58
72
|
};
|
59
73
|
|
60
74
|
const createStyle = (componentName, baseSelector, mappings) => {
|
61
|
-
|
75
|
+
const style = new StyleBuilder();
|
62
76
|
|
63
|
-
|
64
|
-
|
77
|
+
Object.keys(mappings).forEach((attr) => {
|
78
|
+
const attrConfig = normalizeConfig(attr, mappings[attr]);
|
65
79
|
|
66
|
-
|
80
|
+
const cssVarName = getCssVarName(componentName, attr);
|
67
81
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
82
|
+
attrConfig.forEach(
|
83
|
+
({ selector: relativeSelectorOrSelectorFn, property }) => {
|
84
|
+
style.add(
|
85
|
+
createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
|
86
|
+
property,
|
87
|
+
createCssVarFallback(cssVarName)
|
88
|
+
);
|
89
|
+
}
|
90
|
+
);
|
91
|
+
});
|
76
92
|
|
77
|
-
|
93
|
+
return style.toString();
|
78
94
|
};
|
79
95
|
|
80
96
|
const createCssVarsList = (componentName, mappings) =>
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
97
|
+
Object.keys(mappings).reduce(
|
98
|
+
(acc, attr) =>
|
99
|
+
Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
|
100
|
+
{}
|
101
|
+
);
|
85
102
|
|
86
103
|
// match the host selector with the inner element selector
|
87
104
|
// e.g. when we want to set the same size for the host & the inner element this can be useful
|
88
|
-
const matchHostStyle = (mappingObj) => [
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
105
|
+
const matchHostStyle = (mappingObj) => [
|
106
|
+
mappingObj,
|
107
|
+
{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
|
108
|
+
];
|
109
|
+
|
110
|
+
const createStyleMixin =
|
111
|
+
({ mappings = {} }) =>
|
112
|
+
(superclass) => {
|
113
|
+
const styleAttributes = Object.keys(mappings).map((key) =>
|
114
|
+
kebabCaseJoin('st', key)
|
115
|
+
);
|
116
|
+
return class CustomStyleMixinClass extends superclass {
|
117
|
+
static get observedAttributes() {
|
118
|
+
const superAttrs = superclass.observedAttributes || [];
|
119
|
+
return [...superAttrs, ...styleAttributes];
|
120
|
+
}
|
121
|
+
|
122
|
+
static get cssVarList() {
|
123
|
+
return createCssVarsList(superclass.componentName, mappings);
|
124
|
+
}
|
125
|
+
|
126
|
+
#styleEle = null;
|
127
|
+
|
128
|
+
constructor() {
|
129
|
+
super();
|
130
|
+
|
131
|
+
this.#createComponentStyle();
|
132
|
+
this.#createAttrOverrideStyle();
|
133
|
+
}
|
134
|
+
|
135
|
+
#createAttrOverrideStyle() {
|
136
|
+
this.#styleEle = document.createElement('style');
|
137
|
+
this.#styleEle.id = 'style-mixin-overrides';
|
138
|
+
|
139
|
+
this.#styleEle.innerText = '* {}';
|
140
|
+
this.shadowRoot.prepend(this.#styleEle);
|
141
|
+
}
|
142
|
+
|
143
|
+
#updateAttrOverrideStyle(attrName, value) {
|
144
|
+
const style = this.#styleEle.sheet.cssRules[0].style;
|
145
|
+
const varName = getCssVarName(
|
146
|
+
superclass.componentName,
|
147
|
+
attrName.replace(/^st-/, '')
|
148
|
+
);
|
149
|
+
|
150
|
+
if (value) style.setProperty(varName, value);
|
151
|
+
else style.removeProperty(varName);
|
152
|
+
}
|
153
|
+
|
154
|
+
#createComponentStyle() {
|
155
|
+
const themeStyle = document.createElement('style');
|
156
|
+
themeStyle.id = 'style-mixin-component';
|
157
|
+
themeStyle.innerHTML = createStyle(
|
158
|
+
superclass.componentName,
|
159
|
+
this.baseSelector,
|
160
|
+
mappings
|
161
|
+
);
|
162
|
+
this.shadowRoot.prepend(themeStyle);
|
163
|
+
}
|
164
|
+
|
165
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
166
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
167
|
+
|
168
|
+
if (styleAttributes.includes(attrName)) {
|
169
|
+
this.#updateAttrOverrideStyle(attrName, newValue);
|
170
|
+
}
|
171
|
+
}
|
172
|
+
|
173
|
+
// we need to see if this is needed
|
174
|
+
// connectedCallback() {
|
175
|
+
// super.connectedCallback?.();
|
176
|
+
// if (this.shadowRoot.isConnected) {
|
177
|
+
// Array.from(this.attributes).forEach(attr => {
|
178
|
+
// if (styleAttributes.includes(attr.nodeName)) {
|
179
|
+
// this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
|
180
|
+
// }
|
181
|
+
// });
|
182
|
+
// }
|
183
|
+
// }
|
184
|
+
};
|
185
|
+
};
|
145
186
|
|
146
187
|
const draggableMixin = (superclass) =>
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
};
|
188
|
+
class DraggableMixinClass extends superclass {
|
189
|
+
#styleEle = null;
|
190
|
+
|
191
|
+
static get observedAttributes() {
|
192
|
+
const superAttrs = superclass.observedAttributes || [];
|
193
|
+
return [...superAttrs, 'draggable'];
|
194
|
+
}
|
195
|
+
|
196
|
+
constructor() {
|
197
|
+
super();
|
198
|
+
|
199
|
+
this.#styleEle = document.createElement('style');
|
200
|
+
this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
|
201
|
+
}
|
202
|
+
|
203
|
+
#handleDraggableStyle(isDraggable) {
|
204
|
+
if (isDraggable) {
|
205
|
+
this.shadowRoot.appendChild(this.#styleEle);
|
206
|
+
} else {
|
207
|
+
this.#styleEle.remove();
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
212
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
213
|
+
if (attrName === 'draggable') {
|
214
|
+
this.#handleDraggableStyle(newValue === 'true');
|
215
|
+
}
|
216
|
+
}
|
217
|
+
};
|
178
218
|
|
179
219
|
const observeAttributes = (ele, callback, excludeAttrs) => {
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
};
|
220
|
+
// sync all attrs on init
|
221
|
+
callback(...Array.from(ele.attributes).map((attr) => attr.name));
|
222
|
+
|
223
|
+
const observer = new MutationObserver((mutationsList) => {
|
224
|
+
for (const mutation of mutationsList) {
|
225
|
+
if (
|
226
|
+
mutation.type === 'attributes' &&
|
227
|
+
!excludeAttrs.includes(mutation.attributeName)
|
228
|
+
) {
|
229
|
+
callback(mutation.attributeName);
|
230
|
+
}
|
231
|
+
}
|
232
|
+
});
|
193
233
|
|
194
|
-
|
195
|
-
attrNames.forEach(attrName => {
|
196
|
-
const srcAttrVal = srcEle.getAttribute(attrName);
|
197
|
-
if (srcAttrVal !== null) {
|
198
|
-
if (targetEle.getAttribute(attrName) !== srcAttrVal) {
|
199
|
-
targetEle.setAttribute(attrName, srcAttrVal);
|
200
|
-
}
|
201
|
-
} else {
|
202
|
-
targetEle.removeAttribute(attrName);
|
203
|
-
}
|
204
|
-
});
|
234
|
+
observer.observe(ele, { attributes: true });
|
205
235
|
};
|
206
236
|
|
237
|
+
const createSyncAttrsCb =
|
238
|
+
(srcEle, targetEle) =>
|
239
|
+
(...attrNames) => {
|
240
|
+
attrNames.forEach((attrName) => {
|
241
|
+
const srcAttrVal = srcEle.getAttribute(attrName);
|
242
|
+
if (srcAttrVal !== null) {
|
243
|
+
if (targetEle.getAttribute(attrName) !== srcAttrVal) {
|
244
|
+
targetEle.setAttribute(attrName, srcAttrVal);
|
245
|
+
}
|
246
|
+
} else {
|
247
|
+
targetEle.removeAttribute(attrName);
|
248
|
+
}
|
249
|
+
});
|
250
|
+
};
|
251
|
+
|
207
252
|
const syncAttrs = (ele1, ele2, excludeAttrs) => {
|
208
|
-
|
209
|
-
|
253
|
+
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
|
254
|
+
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
|
210
255
|
};
|
211
256
|
|
212
257
|
const createProxy = ({
|
@@ -341,26 +386,30 @@ const inputMixin = (superclass) =>
|
|
341
386
|
};
|
342
387
|
|
343
388
|
const componentNameValidationMixin = (superclass) =>
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
389
|
+
class DraggableMixinClass extends superclass {
|
390
|
+
#checkComponentName() {
|
391
|
+
const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
|
392
|
+
|
393
|
+
if (!superclass.componentName) {
|
394
|
+
throw Error(
|
395
|
+
`component name is not defined on super class, make sure you have a static get for "componentName"`
|
396
|
+
);
|
397
|
+
}
|
398
|
+
|
399
|
+
if (currentComponentName !== superclass.componentName) {
|
400
|
+
throw Error(
|
401
|
+
`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
|
402
|
+
);
|
403
|
+
}
|
404
|
+
}
|
405
|
+
|
406
|
+
connectedCallback() {
|
407
|
+
super.connectedCallback?.();
|
408
|
+
if (this.shadowRoot.isConnected) {
|
409
|
+
this.#checkComponentName();
|
410
|
+
}
|
411
|
+
}
|
412
|
+
};
|
364
413
|
|
365
414
|
const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
|
366
415
|
|
@@ -552,7 +601,7 @@ customElements.define(componentName$9, TextField);
|
|
552
601
|
|
553
602
|
const template = document.createElement('template');
|
554
603
|
|
555
|
-
const componentName$8 = getComponentName(
|
604
|
+
const componentName$8 = getComponentName('combo');
|
556
605
|
|
557
606
|
template.innerHTML = `
|
558
607
|
<descope-button></descope-button>
|
@@ -560,13 +609,13 @@ template.innerHTML = `
|
|
560
609
|
`;
|
561
610
|
|
562
611
|
class Combo extends HTMLElement {
|
563
|
-
|
564
|
-
|
612
|
+
constructor() {
|
613
|
+
super();
|
565
614
|
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
615
|
+
this.attachShadow({ mode: 'open' }).appendChild(
|
616
|
+
template.content.cloneNode(true)
|
617
|
+
);
|
618
|
+
}
|
570
619
|
}
|
571
620
|
|
572
621
|
customElements.define(componentName$8, Combo);
|
@@ -822,7 +871,7 @@ overrides$1 = `
|
|
822
871
|
|
823
872
|
customElements.define(componentName$4, TextArea);
|
824
873
|
|
825
|
-
const componentName$3 = getComponentName(
|
874
|
+
const componentName$3 = getComponentName('date-picker');
|
826
875
|
|
827
876
|
const DatePicker = compose(
|
828
877
|
draggableMixin,
|
@@ -830,66 +879,66 @@ const DatePicker = compose(
|
|
830
879
|
)(
|
831
880
|
createProxy({
|
832
881
|
componentName: componentName$3,
|
833
|
-
slots: [
|
834
|
-
wrappedEleName:
|
835
|
-
style:
|
882
|
+
slots: ['prefix', 'suffix'],
|
883
|
+
wrappedEleName: 'vaadin-date-picker',
|
884
|
+
style: ``
|
836
885
|
})
|
837
886
|
);
|
838
887
|
|
839
888
|
customElements.define(componentName$3, DatePicker);
|
840
889
|
|
841
|
-
const componentName$2 = getComponentName(
|
890
|
+
const componentName$2 = getComponentName('container');
|
842
891
|
|
843
892
|
class RawContainer extends HTMLElement {
|
844
|
-
|
845
|
-
|
846
|
-
|
847
|
-
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
|
854
|
-
|
855
|
-
|
856
|
-
|
893
|
+
static get componentName() {
|
894
|
+
return componentName$2;
|
895
|
+
}
|
896
|
+
constructor() {
|
897
|
+
super();
|
898
|
+
const template = document.createElement('template');
|
899
|
+
template.innerHTML = `<slot></slot>`;
|
900
|
+
|
901
|
+
this.attachShadow({ mode: 'open' });
|
902
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
903
|
+
|
904
|
+
this.baseSelector = ':host > slot';
|
905
|
+
}
|
857
906
|
}
|
858
907
|
|
859
908
|
const Container = compose(
|
860
|
-
|
861
|
-
|
862
|
-
|
863
|
-
|
864
|
-
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
869
|
-
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
|
909
|
+
createStyleMixin({
|
910
|
+
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
911
|
+
mappings: {
|
912
|
+
height: {},
|
913
|
+
width: {},
|
914
|
+
|
915
|
+
verticalPadding: [
|
916
|
+
{ property: 'padding-top' },
|
917
|
+
{ property: 'padding-bottom' }
|
918
|
+
],
|
919
|
+
horizontalPadding: [
|
920
|
+
{ property: 'padding-left' },
|
921
|
+
{ property: 'padding-right' }
|
922
|
+
],
|
923
|
+
|
924
|
+
display: {},
|
925
|
+
flexDirection: {},
|
926
|
+
justifyContent: {},
|
927
|
+
alignItems: {},
|
928
|
+
gap: {},
|
929
|
+
|
930
|
+
backgroundColor: {},
|
931
|
+
borderRadius: {},
|
932
|
+
|
933
|
+
borderColor: {},
|
934
|
+
borderStyle: {},
|
935
|
+
borderWidth: {},
|
936
|
+
|
937
|
+
boxShadow: {}
|
938
|
+
}
|
939
|
+
}),
|
940
|
+
draggableMixin,
|
941
|
+
componentNameValidationMixin
|
893
942
|
)(RawContainer);
|
894
943
|
|
895
944
|
customElements.define(componentName$2, Container);
|
@@ -906,21 +955,25 @@ const transformTheme = (theme, path, getTransformation) => {
|
|
906
955
|
}, {});
|
907
956
|
};
|
908
957
|
|
909
|
-
const stringifyArray = (strArr) =>
|
958
|
+
const stringifyArray = (strArr) =>
|
959
|
+
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
910
960
|
|
911
961
|
const themeToCSSVarsObj = (theme) =>
|
912
962
|
transformTheme(theme, [], (path, val) => ({
|
913
|
-
[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
|
963
|
+
[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
|
914
964
|
}));
|
915
965
|
|
916
966
|
const getThemeRefs = (theme, prefix) =>
|
917
|
-
transformTheme(theme, [], (path) =>
|
967
|
+
transformTheme(theme, [], (path) =>
|
968
|
+
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
969
|
+
);
|
918
970
|
|
919
971
|
const globalsThemeToStyle = (theme, themeName = '') => `
|
920
972
|
*[data-theme="${themeName}"] {
|
921
973
|
${Object.entries(themeToCSSVarsObj(theme)).reduce(
|
922
|
-
|
923
|
-
|
974
|
+
(acc, entry) => (acc += `${entry.join(':')};\n`),
|
975
|
+
''
|
976
|
+
)}
|
924
977
|
}
|
925
978
|
`;
|
926
979
|
|
@@ -933,16 +986,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
|
|
933
986
|
// starts with underscore -> attribute selector
|
934
987
|
|
935
988
|
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
936
|
-
if (section.startsWith('_'))
|
989
|
+
if (section.startsWith('_'))
|
990
|
+
return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
|
937
991
|
|
938
992
|
const nextSection = restPath[idx + 1];
|
939
993
|
|
940
994
|
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
941
|
-
console.error(
|
995
|
+
console.error(
|
996
|
+
'theme generator',
|
997
|
+
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
998
|
+
);
|
942
999
|
return acc;
|
943
1000
|
}
|
944
1001
|
|
945
|
-
return acc += `[${kebabCase(section)}="${restPath
|
1002
|
+
return (acc += `[${kebabCase(section)}="${restPath
|
1003
|
+
.splice(idx + 1, 1)
|
1004
|
+
.join('')}"]`);
|
946
1005
|
}, '');
|
947
1006
|
|
948
1007
|
let selector = `${getComponentName(component)}${attrsSelector}`;
|
@@ -951,12 +1010,17 @@ const componentsThemeToStyleObj = (componentsTheme) =>
|
|
951
1010
|
[selector]: {
|
952
1011
|
[property]: val
|
953
1012
|
}
|
954
|
-
}
|
1013
|
+
};
|
955
1014
|
});
|
956
1015
|
|
957
1016
|
const componentsThemeToStyle = (componentsTheme, themeName = '') =>
|
958
1017
|
Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
|
959
|
-
(acc, [selector, vars]) =>
|
1018
|
+
(acc, [selector, vars]) =>
|
1019
|
+
(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
|
1020
|
+
vars
|
1021
|
+
)
|
1022
|
+
.map(([key, val]) => `${key}: ${val}`)
|
1023
|
+
.join(';\n')} \n}\n\n`),
|
960
1024
|
''
|
961
1025
|
);
|
962
1026
|
|
@@ -965,7 +1029,7 @@ ${globalsThemeToStyle(globals, themeName)}
|
|
965
1029
|
${componentsThemeToStyle(components, themeName)}
|
966
1030
|
`;
|
967
1031
|
|
968
|
-
const useVar = varName => `var(${varName})`;
|
1032
|
+
const useVar = (varName) => `var(${varName})`;
|
969
1033
|
|
970
1034
|
const createHelperVars = (theme, prefix) => {
|
971
1035
|
const res = transformTheme(theme, [], (path, value) => {
|
@@ -977,17 +1041,20 @@ const createHelperVars = (theme, prefix) => {
|
|
977
1041
|
const theme = set({}, [...modifiedPath, varName], value);
|
978
1042
|
const useVars = { [property]: useVar(varName) };
|
979
1043
|
|
980
|
-
return { theme, useVars, vars }
|
1044
|
+
return { theme, useVars, vars };
|
981
1045
|
});
|
982
1046
|
|
983
|
-
return [res.theme, res.useVars, res.vars]
|
1047
|
+
return [res.theme, res.useVars, res.vars];
|
984
1048
|
};
|
985
1049
|
|
986
1050
|
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
987
1051
|
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
988
1052
|
const genContrast = (c, percentage = 0.9) => {
|
989
1053
|
const isDark = c.isDark();
|
990
|
-
return c
|
1054
|
+
return c
|
1055
|
+
.mix(Color(isDark ? 'white' : 'black'), percentage)
|
1056
|
+
.saturate(1)
|
1057
|
+
.hex();
|
991
1058
|
};
|
992
1059
|
|
993
1060
|
const genColor = (color) => {
|
@@ -997,8 +1064,8 @@ const genColor = (color) => {
|
|
997
1064
|
main: mainColor.hex(),
|
998
1065
|
dark: color.dark || genDark(mainColor),
|
999
1066
|
light: color.light || genLight(mainColor),
|
1000
|
-
contrast: color.contrast || genContrast(mainColor)
|
1001
|
-
}
|
1067
|
+
contrast: color.contrast || genContrast(mainColor)
|
1068
|
+
};
|
1002
1069
|
};
|
1003
1070
|
|
1004
1071
|
const genColors = (colors) => {
|
@@ -1006,68 +1073,76 @@ const genColors = (colors) => {
|
|
1006
1073
|
const currentColor = colors[colorName];
|
1007
1074
|
|
1008
1075
|
return Object.assign(acc, {
|
1009
|
-
[colorName]: genColor(currentColor)
|
1010
|
-
})
|
1076
|
+
[colorName]: genColor(currentColor)
|
1077
|
+
});
|
1011
1078
|
}, {});
|
1012
1079
|
};
|
1013
1080
|
|
1014
1081
|
const colors = genColors({
|
1015
1082
|
surface: {
|
1016
|
-
main:
|
1017
|
-
light:
|
1018
|
-
dark:
|
1083
|
+
main: 'lightgray',
|
1084
|
+
light: '#fff',
|
1085
|
+
dark: '#000'
|
1019
1086
|
},
|
1020
|
-
primary:
|
1021
|
-
secondary:
|
1022
|
-
success:
|
1023
|
-
error:
|
1087
|
+
primary: '#0082B5',
|
1088
|
+
secondary: '#7D14EB',
|
1089
|
+
success: 'green',
|
1090
|
+
error: 'red'
|
1024
1091
|
});
|
1025
1092
|
|
1026
1093
|
const typography = {
|
1027
1094
|
h1: {
|
1028
|
-
font: [
|
1029
|
-
weight:
|
1030
|
-
size:
|
1095
|
+
font: ['Courier New', 'Arial', 'sans-serif'],
|
1096
|
+
weight: '700',
|
1097
|
+
size: '48px'
|
1031
1098
|
},
|
1032
1099
|
h2: {
|
1033
|
-
font: [
|
1034
|
-
weight:
|
1035
|
-
size:
|
1100
|
+
font: ['Courier New', 'sans-serif'],
|
1101
|
+
weight: '500',
|
1102
|
+
size: '38px'
|
1036
1103
|
},
|
1037
1104
|
h3: {
|
1038
|
-
font: [
|
1039
|
-
weight:
|
1040
|
-
size:
|
1041
|
-
}
|
1105
|
+
font: ['Courier New', 'sans-serif'],
|
1106
|
+
weight: '300',
|
1107
|
+
size: '28px'
|
1108
|
+
}
|
1042
1109
|
};
|
1043
1110
|
|
1044
1111
|
const spacing = {
|
1045
|
-
xs:
|
1046
|
-
sm:
|
1047
|
-
md:
|
1048
|
-
lg:
|
1049
|
-
xl:
|
1112
|
+
xs: '2px',
|
1113
|
+
sm: '4px',
|
1114
|
+
md: '8px',
|
1115
|
+
lg: '16px',
|
1116
|
+
xl: '32px'
|
1050
1117
|
};
|
1051
1118
|
|
1052
1119
|
const border = {
|
1053
|
-
sm:
|
1054
|
-
md:
|
1055
|
-
lg:
|
1120
|
+
sm: '1px',
|
1121
|
+
md: '2px',
|
1122
|
+
lg: '3px'
|
1056
1123
|
};
|
1057
1124
|
|
1058
1125
|
const radius = {
|
1059
|
-
sm:
|
1060
|
-
md:
|
1061
|
-
lg:
|
1126
|
+
sm: '5px',
|
1127
|
+
md: '25px',
|
1128
|
+
lg: '50px'
|
1062
1129
|
};
|
1063
1130
|
|
1064
1131
|
const shadow = {
|
1065
|
-
|
1066
|
-
|
1067
|
-
|
1068
|
-
|
1069
|
-
|
1070
|
-
|
1132
|
+
wide: {
|
1133
|
+
sm: '0 2px 3px -0.5px',
|
1134
|
+
md: '0 4px 6px -1px',
|
1135
|
+
lg: '0 10px 15px -3px',
|
1136
|
+
xl: '0 20px 25px -5px',
|
1137
|
+
'2xl': '0 25px 50px -12px',
|
1138
|
+
},
|
1139
|
+
narrow: {
|
1140
|
+
sm: '0 1px 2px -1px',
|
1141
|
+
md: '0 2px 4px -2px',
|
1142
|
+
lg: '0 4px 6px -4px',
|
1143
|
+
xl: '0 8px 10px -6px',
|
1144
|
+
'2xl': '0 16px 16px -8px',
|
1145
|
+
}
|
1071
1146
|
};
|
1072
1147
|
|
1073
1148
|
var globals = {
|
@@ -1076,7 +1151,7 @@ var globals = {
|
|
1076
1151
|
spacing,
|
1077
1152
|
border,
|
1078
1153
|
radius,
|
1079
|
-
shadow
|
1154
|
+
shadow
|
1080
1155
|
};
|
1081
1156
|
|
1082
1157
|
const globalRefs$3 = getThemeRefs(globals);
|
@@ -1087,7 +1162,7 @@ const mode = {
|
|
1087
1162
|
secondary: globalRefs$3.colors.secondary,
|
1088
1163
|
success: globalRefs$3.colors.success,
|
1089
1164
|
error: globalRefs$3.colors.error,
|
1090
|
-
surface: globalRefs$3.colors.surface
|
1165
|
+
surface: globalRefs$3.colors.surface
|
1091
1166
|
};
|
1092
1167
|
|
1093
1168
|
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
|
@@ -1097,43 +1172,43 @@ const button = {
|
|
1097
1172
|
|
1098
1173
|
size: {
|
1099
1174
|
xs: {
|
1100
|
-
[vars$6.height]:
|
1101
|
-
[vars$6.fontSize]:
|
1102
|
-
[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}
|
1175
|
+
[vars$6.height]: '10px',
|
1176
|
+
[vars$6.fontSize]: '10px',
|
1177
|
+
[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
|
1103
1178
|
},
|
1104
1179
|
sm: {
|
1105
|
-
[vars$6.height]:
|
1106
|
-
[vars$6.fontSize]:
|
1107
|
-
[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}
|
1180
|
+
[vars$6.height]: '20px',
|
1181
|
+
[vars$6.fontSize]: '10px',
|
1182
|
+
[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
|
1108
1183
|
},
|
1109
1184
|
md: {
|
1110
|
-
[vars$6.height]:
|
1111
|
-
[vars$6.fontSize]:
|
1112
|
-
[vars$6.padding]: `0 ${globalRefs$3.spacing.md}
|
1185
|
+
[vars$6.height]: '30px',
|
1186
|
+
[vars$6.fontSize]: '14px',
|
1187
|
+
[vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
|
1113
1188
|
},
|
1114
1189
|
lg: {
|
1115
|
-
[vars$6.height]:
|
1116
|
-
[vars$6.fontSize]:
|
1117
|
-
[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}
|
1190
|
+
[vars$6.height]: '40px',
|
1191
|
+
[vars$6.fontSize]: '20px',
|
1192
|
+
[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
|
1118
1193
|
},
|
1119
1194
|
xl: {
|
1120
|
-
[vars$6.height]:
|
1121
|
-
[vars$6.fontSize]:
|
1122
|
-
[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}
|
1123
|
-
}
|
1195
|
+
[vars$6.height]: '50px',
|
1196
|
+
[vars$6.fontSize]: '25px',
|
1197
|
+
[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
|
1198
|
+
}
|
1124
1199
|
},
|
1125
1200
|
|
1126
1201
|
[vars$6.borderRadius]: globalRefs$3.radius.lg,
|
1127
|
-
[vars$6.cursor]:
|
1128
|
-
[vars$6.borderWidth]:
|
1129
|
-
[vars$6.borderStyle]:
|
1130
|
-
[vars$6.borderColor]:
|
1202
|
+
[vars$6.cursor]: 'pointer',
|
1203
|
+
[vars$6.borderWidth]: '2px',
|
1204
|
+
[vars$6.borderStyle]: 'solid',
|
1205
|
+
[vars$6.borderColor]: 'transparent',
|
1131
1206
|
|
1132
|
-
|
1133
|
-
[vars$6.width]:
|
1207
|
+
_fullWidth: {
|
1208
|
+
[vars$6.width]: '100%'
|
1134
1209
|
},
|
1135
1210
|
_loading: {
|
1136
|
-
[vars$6.cursor]:
|
1211
|
+
[vars$6.cursor]: 'wait'
|
1137
1212
|
},
|
1138
1213
|
|
1139
1214
|
variant: {
|
@@ -1141,11 +1216,11 @@ const button = {
|
|
1141
1216
|
[vars$6.color]: helperRefs$1.contrast,
|
1142
1217
|
[vars$6.backgroundColor]: helperRefs$1.main,
|
1143
1218
|
_hover: {
|
1144
|
-
[vars$6.backgroundColor]: helperRefs$1.dark
|
1219
|
+
[vars$6.backgroundColor]: helperRefs$1.dark
|
1145
1220
|
},
|
1146
1221
|
_loading: {
|
1147
|
-
[vars$6.backgroundColor]: helperRefs$1.main
|
1148
|
-
}
|
1222
|
+
[vars$6.backgroundColor]: helperRefs$1.main
|
1223
|
+
}
|
1149
1224
|
},
|
1150
1225
|
outline: {
|
1151
1226
|
[vars$6.color]: helperRefs$1.main,
|
@@ -1154,9 +1229,9 @@ const button = {
|
|
1154
1229
|
[vars$6.color]: helperRefs$1.dark,
|
1155
1230
|
[vars$6.borderColor]: helperRefs$1.dark,
|
1156
1231
|
_error: {
|
1157
|
-
[vars$6.color]: helperRefs$1.error
|
1158
|
-
}
|
1159
|
-
}
|
1232
|
+
[vars$6.color]: helperRefs$1.error
|
1233
|
+
}
|
1234
|
+
}
|
1160
1235
|
},
|
1161
1236
|
link: {
|
1162
1237
|
[vars$6.color]: helperRefs$1.main,
|
@@ -1166,10 +1241,10 @@ const button = {
|
|
1166
1241
|
[vars$6.borderRadius]: 0,
|
1167
1242
|
_hover: {
|
1168
1243
|
[vars$6.color]: helperRefs$1.main,
|
1169
|
-
[vars$6.textDecoration]:
|
1170
|
-
}
|
1171
|
-
}
|
1172
|
-
}
|
1244
|
+
[vars$6.textDecoration]: 'underline'
|
1245
|
+
}
|
1246
|
+
}
|
1247
|
+
}
|
1173
1248
|
};
|
1174
1249
|
|
1175
1250
|
const globalRefs$2 = getThemeRefs(globals);
|
@@ -1231,7 +1306,7 @@ const textField = (vars) => ({
|
|
1231
1306
|
[vars.backgroundColor]: globalRefs$2.colors.surface.main
|
1232
1307
|
},
|
1233
1308
|
|
1234
|
-
|
1309
|
+
_fullWidth: {
|
1235
1310
|
[vars.width]: '100%'
|
1236
1311
|
},
|
1237
1312
|
|
@@ -1274,12 +1349,12 @@ const textArea = {
|
|
1274
1349
|
[vars$3.borderStyle]: 'solid',
|
1275
1350
|
[vars$3.borderColor]: 'transparent',
|
1276
1351
|
|
1277
|
-
|
1352
|
+
_borderOffset: {
|
1278
1353
|
[vars$3.outlineOffset]: '2px'
|
1279
1354
|
},
|
1280
1355
|
|
1281
1356
|
_bordered: {
|
1282
|
-
[vars$3.
|
1357
|
+
[vars$3.borderColor]: globalRefs$1.colors.surface.main
|
1283
1358
|
},
|
1284
1359
|
|
1285
1360
|
_focused: {
|
@@ -1287,7 +1362,7 @@ const textArea = {
|
|
1287
1362
|
[vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
|
1288
1363
|
},
|
1289
1364
|
|
1290
|
-
|
1365
|
+
_fullWidth: {
|
1291
1366
|
[vars$3.width]: '100%'
|
1292
1367
|
},
|
1293
1368
|
|
@@ -1421,10 +1496,8 @@ const horizontalAlignment = {
|
|
1421
1496
|
end: { horizontalAlignment: 'end' }
|
1422
1497
|
};
|
1423
1498
|
|
1424
|
-
const [helperTheme,
|
1425
|
-
{ verticalAlignment, horizontalAlignment },
|
1426
|
-
'container'
|
1427
|
-
);
|
1499
|
+
const [helperTheme, helperVars, helperRefs] =
|
1500
|
+
createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
|
1428
1501
|
|
1429
1502
|
const container = {
|
1430
1503
|
...helperTheme,
|
@@ -1475,15 +1548,15 @@ const container = {
|
|
1475
1548
|
},
|
1476
1549
|
|
1477
1550
|
shadow: {
|
1478
|
-
sm: {
|
1479
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
|
1551
|
+
sm: {
|
1552
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
|
1553
|
+
},
|
1554
|
+
md: {
|
1555
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
|
1556
|
+
},
|
1557
|
+
lg: {
|
1558
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
|
1480
1559
|
},
|
1481
|
-
md: {
|
1482
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
|
1483
|
-
},
|
1484
|
-
lg: {
|
1485
|
-
[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
|
1486
|
-
}
|
1487
1560
|
},
|
1488
1561
|
|
1489
1562
|
borderRadius: {
|