@descope/web-components-ui 1.0.35
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/README.md +191 -0
- package/dist/cjs/index.cjs.js +95 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/package.json +1 -0
- package/dist/index.esm.js +703 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/umd/146.js +1 -0
- package/dist/umd/221.js +37 -0
- package/dist/umd/221.js.LICENSE.txt +11 -0
- package/dist/umd/511.js +573 -0
- package/dist/umd/511.js.LICENSE.txt +23 -0
- package/dist/umd/54.js +971 -0
- package/dist/umd/54.js.LICENSE.txt +33 -0
- package/dist/umd/599.js +1 -0
- package/dist/umd/729.js +1 -0
- package/dist/umd/840.js +356 -0
- package/dist/umd/840.js.LICENSE.txt +61 -0
- package/dist/umd/9.js +312 -0
- package/dist/umd/9.js.LICENSE.txt +21 -0
- package/dist/umd/descope-button-js.js +1 -0
- package/dist/umd/descope-combo-js.js +1 -0
- package/dist/umd/descope-date-picker-js.js +1 -0
- package/dist/umd/descope-text-field-js.js +1 -0
- package/dist/umd/index.js +1 -0
- package/package.json +45 -0
- package/src/components/descope-button.js +39 -0
- package/src/components/descope-combo.js +26 -0
- package/src/components/descope-date-picker.js +19 -0
- package/src/components/descope-text-field.js +36 -0
- package/src/componentsHelpers/createProxy/helpers.js +33 -0
- package/src/componentsHelpers/createProxy/index.js +82 -0
- package/src/componentsHelpers/createStyleMixin/helpers.js +66 -0
- package/src/componentsHelpers/createStyleMixin/index.js +22 -0
- package/src/componentsHelpers/draggableMixin.js +32 -0
- package/src/componentsHelpers/index.js +11 -0
- package/src/componentsHelpers/inputMixin.js +46 -0
- package/src/constants.js +1 -0
- package/src/dev/index.js +6 -0
- package/src/helpers.js +8 -0
- package/src/index.cjs.js +3 -0
- package/src/index.js +8 -0
- package/src/index.umd.js +7 -0
- package/src/theme/components/button.js +86 -0
- package/src/theme/components/index.js +7 -0
- package/src/theme/components/textField.js +50 -0
- package/src/theme/globals.js +66 -0
- package/src/theme/index.js +4 -0
- package/src/themeHelpers/index.js +76 -0
- package/src/themeHelpers/processColors.js +29 -0
@@ -0,0 +1,703 @@
|
|
1
|
+
import '@vaadin/button';
|
2
|
+
import '@vaadin/text-field';
|
3
|
+
import '@vaadin/date-picker';
|
4
|
+
import merge from 'lodash.merge';
|
5
|
+
import set from 'lodash.set';
|
6
|
+
import Color from 'color';
|
7
|
+
|
8
|
+
const DESCOPE_PREFIX = 'descope';
|
9
|
+
|
10
|
+
const kebabCase = str => str
|
11
|
+
.replace(/([a-z])([A-Z])/g, "$1-$2")
|
12
|
+
.replace(/[\s_.]+/g, '-')
|
13
|
+
.toLowerCase();
|
14
|
+
|
15
|
+
const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
|
16
|
+
|
17
|
+
const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
|
18
|
+
|
19
|
+
const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
20
|
+
|
21
|
+
const createCssSelector = (wrappedComponentName = '', relativeSelectorOrSelectorFn = '') =>
|
22
|
+
typeof relativeSelectorOrSelectorFn === 'function' ?
|
23
|
+
relativeSelectorOrSelectorFn(wrappedComponentName) :
|
24
|
+
`${wrappedComponentName}${relativeSelectorOrSelectorFn}`;
|
25
|
+
|
26
|
+
class StyleBuilder {
|
27
|
+
constructor() {
|
28
|
+
this.styleMap = new Map();
|
29
|
+
}
|
30
|
+
|
31
|
+
add(selector, property, value) {
|
32
|
+
if (!this.styleMap.has(selector)) {
|
33
|
+
this.styleMap.set(selector, []);
|
34
|
+
}
|
35
|
+
|
36
|
+
this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
|
37
|
+
}
|
38
|
+
|
39
|
+
toString() {
|
40
|
+
return Array.from(this.styleMap.entries()).reduce((style, [selector, propValArr]) =>
|
41
|
+
style += `${selector} { \n${propValArr.map(({ property, value }) => `${property}: ${value}`).join(';\n')} \n}\n\n`
|
42
|
+
, '')
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
const normalizeConfig = (attr, config) => {
|
47
|
+
const defaultMapping = { selector: '', property: kebabCase(attr) };
|
48
|
+
|
49
|
+
if (!config || !Object.keys(config).length) return [defaultMapping];
|
50
|
+
|
51
|
+
if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
|
52
|
+
|
53
|
+
return [Object.assign({}, defaultMapping, config)];
|
54
|
+
};
|
55
|
+
|
56
|
+
const createStyle = (componentName, wrappedComponentName, mappings) => {
|
57
|
+
const style = new StyleBuilder();
|
58
|
+
|
59
|
+
Object.keys(mappings).forEach((attr) => {
|
60
|
+
const attrConfig = normalizeConfig(attr, mappings[attr]);
|
61
|
+
|
62
|
+
const cssVarName = getCssVarName(componentName, attr);
|
63
|
+
|
64
|
+
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
|
65
|
+
style.add(
|
66
|
+
createCssSelector(wrappedComponentName, relativeSelectorOrSelectorFn),
|
67
|
+
property,
|
68
|
+
createCssVarFallback(cssVarName)
|
69
|
+
);
|
70
|
+
});
|
71
|
+
});
|
72
|
+
|
73
|
+
return style.toString();
|
74
|
+
};
|
75
|
+
|
76
|
+
const createCssVarsList = (componentName, mappings) =>
|
77
|
+
Object.keys(mappings).reduce(
|
78
|
+
(acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
|
79
|
+
{}
|
80
|
+
);
|
81
|
+
|
82
|
+
const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
|
83
|
+
|
84
|
+
const createStyleMixin = ({ mappings = {} }) => (superclass) => {
|
85
|
+
return class CustomStyleMixinClass extends superclass {
|
86
|
+
static get cssVarList() {
|
87
|
+
return createCssVarsList(superclass.componentName, mappings)
|
88
|
+
}
|
89
|
+
|
90
|
+
constructor() {
|
91
|
+
super();
|
92
|
+
|
93
|
+
this.#createComponentStyle();
|
94
|
+
}
|
95
|
+
|
96
|
+
#createComponentStyle() {
|
97
|
+
const themeStyle = document.createElement('style');
|
98
|
+
themeStyle.id = 'style-mixin';
|
99
|
+
themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings);
|
100
|
+
this.shadowRoot.prepend(themeStyle);
|
101
|
+
}
|
102
|
+
}
|
103
|
+
};
|
104
|
+
|
105
|
+
const draggableMixin = (superclass) =>
|
106
|
+
class DraggableMixinClass extends superclass {
|
107
|
+
|
108
|
+
#styleEle = null;
|
109
|
+
|
110
|
+
static get observedAttributes() {
|
111
|
+
const superAttrs = superclass.observedAttributes || [];
|
112
|
+
return [...superAttrs, 'draggable']
|
113
|
+
}
|
114
|
+
|
115
|
+
constructor() {
|
116
|
+
super();
|
117
|
+
|
118
|
+
this.#styleEle = document.createElement('style');
|
119
|
+
this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
|
120
|
+
}
|
121
|
+
|
122
|
+
#handleDraggableStyle(isDraggable) {
|
123
|
+
if (isDraggable) {
|
124
|
+
this.shadowRoot.appendChild(this.#styleEle);
|
125
|
+
} else {
|
126
|
+
this.#styleEle.remove();
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
131
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
132
|
+
if (attrName === 'draggable') {
|
133
|
+
this.#handleDraggableStyle(newValue === 'true');
|
134
|
+
}
|
135
|
+
}
|
136
|
+
};
|
137
|
+
|
138
|
+
const observeAttributes = (ele, callback, excludeAttrs) => {
|
139
|
+
// sync all attrs on init
|
140
|
+
callback(...Array.from(ele.attributes).map(attr => attr.name));
|
141
|
+
|
142
|
+
const observer = new MutationObserver((mutationsList) => {
|
143
|
+
for (const mutation of mutationsList) {
|
144
|
+
if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
|
145
|
+
callback(mutation.attributeName);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
});
|
149
|
+
|
150
|
+
observer.observe(ele, { attributes: true });
|
151
|
+
};
|
152
|
+
|
153
|
+
const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
|
154
|
+
attrNames.forEach(attrName => {
|
155
|
+
const srcAttrVal = srcEle.getAttribute(attrName);
|
156
|
+
if (srcAttrVal !== null) {
|
157
|
+
if (targetEle.getAttribute(attrName) !== srcAttrVal) {
|
158
|
+
targetEle.setAttribute(attrName, srcAttrVal);
|
159
|
+
}
|
160
|
+
} else {
|
161
|
+
targetEle.removeAttribute(attrName);
|
162
|
+
}
|
163
|
+
});
|
164
|
+
};
|
165
|
+
|
166
|
+
const syncAttrs = (ele1, ele2, excludeAttrs) => {
|
167
|
+
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
|
168
|
+
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
|
169
|
+
};
|
170
|
+
|
171
|
+
const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
|
172
|
+
|
173
|
+
const template = `
|
174
|
+
${style ? `<style id="create-proxy">${style}</style>` : ''}
|
175
|
+
<${wrappedEleName}>
|
176
|
+
<slot></slot>
|
177
|
+
${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
|
178
|
+
</${wrappedEleName}>
|
179
|
+
`;
|
180
|
+
|
181
|
+
class ProxyElement extends HTMLElement {
|
182
|
+
static get componentName() {
|
183
|
+
return componentName;
|
184
|
+
}
|
185
|
+
|
186
|
+
constructor() {
|
187
|
+
super().attachShadow({ mode: "open" }).innerHTML = template;
|
188
|
+
this.hostElement = this.shadowRoot.host;
|
189
|
+
this.componentName = this.hostElement.tagName.toLowerCase();
|
190
|
+
this.wrappedComponentName = wrappedEleName;
|
191
|
+
}
|
192
|
+
|
193
|
+
#checkComponentName() {
|
194
|
+
if (this.componentName !== componentName) {
|
195
|
+
throw Error(`component name mismatch, expected "${componentName}", current "${actualComponentName}"`)
|
196
|
+
}
|
197
|
+
}
|
198
|
+
|
199
|
+
connectedCallback() {
|
200
|
+
if (this.shadowRoot.isConnected) {
|
201
|
+
this.#checkComponentName();
|
202
|
+
|
203
|
+
this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
|
204
|
+
this.setAttribute('tabindex', '0');
|
205
|
+
|
206
|
+
// we want to focus on the proxy element when focusing our WC
|
207
|
+
this.onfocus = (e) => {
|
208
|
+
this.proxyElement.focus();
|
209
|
+
};
|
210
|
+
|
211
|
+
// `onkeydown` is set on `proxyElement` support proper tab-index navigation
|
212
|
+
// this support is needed since both proxy host and element catch `focus`/`blur` event
|
213
|
+
// which causes faulty behaviour.
|
214
|
+
this.proxyElement.onkeydown = (e) => {
|
215
|
+
if (e.shiftKey && e.keyCode === 9) {
|
216
|
+
this.removeAttribute('tabindex');
|
217
|
+
// We want to defer the action of setting the tab index back
|
218
|
+
// so it will happen after focusing the previous element
|
219
|
+
setTimeout(() => this.setAttribute('tabindex', '0'), 0);
|
220
|
+
}
|
221
|
+
};
|
222
|
+
|
223
|
+
this.mouseoverCbRef = () => {
|
224
|
+
this.proxyElement.setAttribute('hover', '');
|
225
|
+
this.proxyElement.addEventListener('mouseleave', () =>
|
226
|
+
this.proxyElement.removeAttribute('hover'), { once: true });
|
227
|
+
};
|
228
|
+
|
229
|
+
this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
|
230
|
+
|
231
|
+
// sync events
|
232
|
+
this.addEventListener = this.proxyElement.addEventListener;
|
233
|
+
|
234
|
+
syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
|
235
|
+
}
|
236
|
+
}
|
237
|
+
|
238
|
+
disconnectedCallback() {
|
239
|
+
this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
|
240
|
+
}
|
241
|
+
|
242
|
+
attributeChangedCallback() {
|
243
|
+
if (!this.proxyElement) {
|
244
|
+
return;
|
245
|
+
}
|
246
|
+
}
|
247
|
+
}
|
248
|
+
|
249
|
+
return ProxyElement;
|
250
|
+
};
|
251
|
+
|
252
|
+
const inputMixin = (superclass) =>
|
253
|
+
class InputMixinClass extends superclass {
|
254
|
+
static get formAssociated() {
|
255
|
+
return true;
|
256
|
+
}
|
257
|
+
|
258
|
+
#internals
|
259
|
+
|
260
|
+
constructor() {
|
261
|
+
super();
|
262
|
+
|
263
|
+
this.#internals = this.attachInternals();
|
264
|
+
|
265
|
+
// this is needed in order to make sure the form input validation is working
|
266
|
+
if (!this.hasAttribute('tabindex')) {
|
267
|
+
this.setAttribute('tabindex', 0);
|
268
|
+
}
|
269
|
+
}
|
270
|
+
|
271
|
+
formAssociatedCallback() {
|
272
|
+
this.setValidity?.();
|
273
|
+
}
|
274
|
+
|
275
|
+
connectedCallback() {
|
276
|
+
super.connectedCallback();
|
277
|
+
|
278
|
+
// vaadin does not expose all those validation attributes so we need to take it from the input
|
279
|
+
// https://github.com/vaadin/web-components/issues/1177
|
280
|
+
const input = this.proxyElement.querySelector('input');
|
281
|
+
if (!input) throw Error('no input was found')
|
282
|
+
|
283
|
+
this.checkValidity = () => input.checkValidity();
|
284
|
+
this.reportValidity = () => input.reportValidity();
|
285
|
+
this.validity = input.validity;
|
286
|
+
|
287
|
+
this.setValidity = () => {
|
288
|
+
this.#internals.setValidity(input.validity, input.validationMessage);
|
289
|
+
};
|
290
|
+
|
291
|
+
input.oninput = () => {
|
292
|
+
this.value = input.value;
|
293
|
+
this.setValidity();
|
294
|
+
};
|
295
|
+
|
296
|
+
}
|
297
|
+
};
|
298
|
+
|
299
|
+
const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
|
300
|
+
|
301
|
+
const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
|
302
|
+
|
303
|
+
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
304
|
+
|
305
|
+
const componentName$3 = getComponentName("button");
|
306
|
+
|
307
|
+
const Button = compose(
|
308
|
+
createStyleMixin({
|
309
|
+
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
310
|
+
mappings: {
|
311
|
+
'backgroundColor': {},
|
312
|
+
'borderRadius': {},
|
313
|
+
'color': { selector: '::part(label)' },
|
314
|
+
'borderColor': {},
|
315
|
+
'borderStyle': {},
|
316
|
+
'borderWidth': {},
|
317
|
+
'fontSize': {},
|
318
|
+
'height': {},
|
319
|
+
'width': matchHostStyle({}),
|
320
|
+
'cursor': {},
|
321
|
+
'padding': {},
|
322
|
+
},
|
323
|
+
}),
|
324
|
+
draggableMixin,
|
325
|
+
)(
|
326
|
+
createProxy({
|
327
|
+
slots: ["prefix", "suffix"],
|
328
|
+
wrappedEleName: "vaadin-button",
|
329
|
+
style: `${editorOverrides}`,
|
330
|
+
excludeAttrsSync: ['tabindex'],
|
331
|
+
componentName: componentName$3
|
332
|
+
})
|
333
|
+
);
|
334
|
+
|
335
|
+
customElements.define(componentName$3, Button);
|
336
|
+
|
337
|
+
const componentName$2 = getComponentName("text-field");
|
338
|
+
|
339
|
+
const TextField = compose(
|
340
|
+
createStyleMixin({
|
341
|
+
mappings: {
|
342
|
+
'placeholderColor': { selector: '> input:placeholder-shown', property: 'color' },
|
343
|
+
'color': {},
|
344
|
+
'borderColor': { selector: '::part(input-field)' },
|
345
|
+
'borderWidth': { selector: '::part(input-field)' },
|
346
|
+
'borderStyle': { selector: '::part(input-field)' },
|
347
|
+
'borderRadius': { selector: '::part(input-field)' },
|
348
|
+
'boxShadow': { selector: '::part(input-field)' },
|
349
|
+
'height': { selector: '::part(input-field)' },
|
350
|
+
'padding': { selector: '::part(input-field)' },
|
351
|
+
'backgroundColor': { selector: '::part(input-field)' },
|
352
|
+
'labelColor': { selector: '::part(label)', property: 'color' },
|
353
|
+
},
|
354
|
+
}),
|
355
|
+
draggableMixin,
|
356
|
+
inputMixin
|
357
|
+
)(
|
358
|
+
createProxy({
|
359
|
+
slots: ["prefix", "suffix"],
|
360
|
+
wrappedEleName: "vaadin-text-field",
|
361
|
+
style: ``,
|
362
|
+
excludeAttrsSync: ['tabindex'],
|
363
|
+
componentName: componentName$2
|
364
|
+
})
|
365
|
+
);
|
366
|
+
|
367
|
+
customElements.define(componentName$2, TextField);
|
368
|
+
|
369
|
+
const template = document.createElement('template');
|
370
|
+
|
371
|
+
const componentName$1 = getComponentName("combo");
|
372
|
+
|
373
|
+
template.innerHTML = `
|
374
|
+
<descope-button></descope-button>
|
375
|
+
<descope-text-field></descope-text-field>
|
376
|
+
`;
|
377
|
+
|
378
|
+
class Combo extends HTMLElement {
|
379
|
+
constructor() {
|
380
|
+
super();
|
381
|
+
|
382
|
+
this.attachShadow({ mode: 'open' }).appendChild(
|
383
|
+
template.content.cloneNode(true)
|
384
|
+
);
|
385
|
+
}
|
386
|
+
}
|
387
|
+
|
388
|
+
customElements.define(componentName$1, Combo);
|
389
|
+
|
390
|
+
const componentName = getComponentName("date-picker");
|
391
|
+
|
392
|
+
const DatePicker = compose(
|
393
|
+
draggableMixin
|
394
|
+
)(
|
395
|
+
createProxy({
|
396
|
+
componentName,
|
397
|
+
slots: ["prefix", "suffix"],
|
398
|
+
wrappedEleName: "vaadin-date-picker",
|
399
|
+
style: ``,
|
400
|
+
})
|
401
|
+
);
|
402
|
+
|
403
|
+
customElements.define(componentName, DatePicker);
|
404
|
+
|
405
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
406
|
+
|
407
|
+
const transformTheme = (theme, path, getTransformation) => {
|
408
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
409
|
+
if (val?.constructor !== Object) {
|
410
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
411
|
+
} else {
|
412
|
+
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
413
|
+
}
|
414
|
+
}, {});
|
415
|
+
};
|
416
|
+
|
417
|
+
const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
|
418
|
+
|
419
|
+
const themeToCSSVarsObj = (theme) =>
|
420
|
+
transformTheme(theme, [], (path, val) => ({
|
421
|
+
[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
|
422
|
+
}));
|
423
|
+
|
424
|
+
const getThemeRefs = (theme, prefix) =>
|
425
|
+
transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
|
426
|
+
|
427
|
+
const globalsThemeToStyle = (theme, themeName = '') => `
|
428
|
+
*[data-theme="${themeName}"] {
|
429
|
+
${Object.entries(themeToCSSVarsObj(theme)).reduce(
|
430
|
+
(acc, entry) => (acc += `${entry.join(":")};\n`), ''
|
431
|
+
)}
|
432
|
+
}
|
433
|
+
`;
|
434
|
+
|
435
|
+
const componentsThemeToStyleObj = (componentsTheme) =>
|
436
|
+
transformTheme(componentsTheme, [], (path, val) => {
|
437
|
+
const [component, ...restPath] = path;
|
438
|
+
const property = restPath.pop();
|
439
|
+
|
440
|
+
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
441
|
+
// starts with underscore -> attribute selector
|
442
|
+
|
443
|
+
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
444
|
+
if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
|
445
|
+
|
446
|
+
const nextSection = restPath[idx + 1];
|
447
|
+
|
448
|
+
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
449
|
+
console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
|
450
|
+
return acc;
|
451
|
+
}
|
452
|
+
|
453
|
+
return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
454
|
+
}, '');
|
455
|
+
|
456
|
+
let selector = `${getComponentName(component)}${attrsSelector}`;
|
457
|
+
|
458
|
+
return {
|
459
|
+
[selector]: {
|
460
|
+
[getVarName([component, property])]: val
|
461
|
+
}
|
462
|
+
}
|
463
|
+
});
|
464
|
+
|
465
|
+
const componentsThemeToStyle = (componentsTheme, themeName = '') =>
|
466
|
+
Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
|
467
|
+
(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
|
468
|
+
''
|
469
|
+
);
|
470
|
+
|
471
|
+
const themeToStyle = ({ globals, components }, themeName) => `
|
472
|
+
${globalsThemeToStyle(globals, themeName)}
|
473
|
+
${componentsThemeToStyle(components, themeName)}
|
474
|
+
`;
|
475
|
+
|
476
|
+
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
477
|
+
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
478
|
+
const genContrast = (c, percentage = 0.9) => {
|
479
|
+
const isDark = c.isDark();
|
480
|
+
return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
|
481
|
+
};
|
482
|
+
|
483
|
+
const genColor = (color) => {
|
484
|
+
const mainColor = new Color(color.main || color);
|
485
|
+
|
486
|
+
return {
|
487
|
+
main: mainColor.hex(),
|
488
|
+
dark: color.dark || genDark(mainColor),
|
489
|
+
light: color.light || genLight(mainColor),
|
490
|
+
contrast: color.contrast || genContrast(mainColor),
|
491
|
+
}
|
492
|
+
};
|
493
|
+
|
494
|
+
const genColors = (colors) => {
|
495
|
+
return Object.keys(colors).reduce((acc, colorName) => {
|
496
|
+
const currentColor = colors[colorName];
|
497
|
+
|
498
|
+
return Object.assign(acc, {
|
499
|
+
[colorName]: genColor(currentColor),
|
500
|
+
})
|
501
|
+
}, {});
|
502
|
+
};
|
503
|
+
|
504
|
+
const colors = genColors({
|
505
|
+
surface: {
|
506
|
+
main: 'lightgray',
|
507
|
+
light: '#e1e1e1'
|
508
|
+
},
|
509
|
+
primary: "#0082B5",
|
510
|
+
secondary: "#7D14EB",
|
511
|
+
success: "green",
|
512
|
+
error: "red",
|
513
|
+
});
|
514
|
+
|
515
|
+
const typography = {
|
516
|
+
h1: {
|
517
|
+
font: ["Courier New", "Arial", "sans-serif"],
|
518
|
+
weight: "700",
|
519
|
+
size: "48px",
|
520
|
+
},
|
521
|
+
h2: {
|
522
|
+
font: ["Courier New", "sans-serif"],
|
523
|
+
weight: "500",
|
524
|
+
size: "38px",
|
525
|
+
},
|
526
|
+
h3: {
|
527
|
+
font: ["Courier New", "sans-serif"],
|
528
|
+
weight: "300",
|
529
|
+
size: "28px",
|
530
|
+
},
|
531
|
+
};
|
532
|
+
|
533
|
+
const spacing = {
|
534
|
+
xs: '2px',
|
535
|
+
sm: '4px',
|
536
|
+
md: '8px',
|
537
|
+
lg: '16px',
|
538
|
+
xl: '32px',
|
539
|
+
};
|
540
|
+
|
541
|
+
const border = {
|
542
|
+
sm: "1px",
|
543
|
+
md: "2px",
|
544
|
+
lg: "3px",
|
545
|
+
};
|
546
|
+
|
547
|
+
const radius = {
|
548
|
+
sm: "5px",
|
549
|
+
md: "25px",
|
550
|
+
lg: "50px",
|
551
|
+
};
|
552
|
+
|
553
|
+
const shadow = {
|
554
|
+
color: colors.primary.main,
|
555
|
+
size: {
|
556
|
+
sm: `0 0 10px`,
|
557
|
+
},
|
558
|
+
};
|
559
|
+
|
560
|
+
var globals = {
|
561
|
+
colors,
|
562
|
+
typography,
|
563
|
+
spacing,
|
564
|
+
border,
|
565
|
+
radius,
|
566
|
+
shadow,
|
567
|
+
};
|
568
|
+
|
569
|
+
const globalRefs$1 = getThemeRefs(globals);
|
570
|
+
|
571
|
+
const mode = {
|
572
|
+
primary: {
|
573
|
+
main: globalRefs$1.colors.primary.main,
|
574
|
+
dark: 'darkblue',
|
575
|
+
light: 'lightblue',
|
576
|
+
contrast: 'white'
|
577
|
+
},
|
578
|
+
secondary: globalRefs$1.colors.secondary,
|
579
|
+
success: globalRefs$1.colors.success,
|
580
|
+
error: globalRefs$1.colors.error,
|
581
|
+
surface: globalRefs$1.colors.surface,
|
582
|
+
};
|
583
|
+
|
584
|
+
const colorRef = getThemeRefs(mode.primary, 'button');
|
585
|
+
|
586
|
+
const button = {
|
587
|
+
borderRadius: globalRefs$1.radius.lg,
|
588
|
+
cursor: 'pointer',
|
589
|
+
|
590
|
+
size: {
|
591
|
+
xs: {
|
592
|
+
height: '10px',
|
593
|
+
fontSize: '10px',
|
594
|
+
padding: `0 ${globalRefs$1.spacing.xs}`
|
595
|
+
},
|
596
|
+
sm: {
|
597
|
+
height: '20px',
|
598
|
+
fontSize: '10px',
|
599
|
+
padding: `0 ${globalRefs$1.spacing.sm}`
|
600
|
+
},
|
601
|
+
md: {
|
602
|
+
height: '30px',
|
603
|
+
fontSize: '14px',
|
604
|
+
padding: `0 ${globalRefs$1.spacing.md}`
|
605
|
+
},
|
606
|
+
lg: {
|
607
|
+
height: '40px',
|
608
|
+
fontSize: '20px',
|
609
|
+
padding: `0 ${globalRefs$1.spacing.lg}`
|
610
|
+
},
|
611
|
+
xl: {
|
612
|
+
height: '50px',
|
613
|
+
fontSize: '25px',
|
614
|
+
padding: `0 ${globalRefs$1.spacing.xl}`
|
615
|
+
},
|
616
|
+
},
|
617
|
+
|
618
|
+
_fullwidth: {
|
619
|
+
width: '100%'
|
620
|
+
},
|
621
|
+
|
622
|
+
mode,
|
623
|
+
|
624
|
+
variant: {
|
625
|
+
contained: {
|
626
|
+
color: colorRef.contrast,
|
627
|
+
backgroundColor: colorRef.main,
|
628
|
+
_hover: {
|
629
|
+
backgroundColor: colorRef.dark,
|
630
|
+
},
|
631
|
+
},
|
632
|
+
outline: {
|
633
|
+
color: colorRef.main,
|
634
|
+
borderColor: colorRef.main,
|
635
|
+
borderWidth: '2px',
|
636
|
+
borderStyle: 'solid',
|
637
|
+
_hover: {
|
638
|
+
color: colorRef.dark,
|
639
|
+
borderColor: colorRef.dark,
|
640
|
+
_error: {
|
641
|
+
color: 'red',
|
642
|
+
}
|
643
|
+
}
|
644
|
+
},
|
645
|
+
link: {
|
646
|
+
color: colorRef.main,
|
647
|
+
},
|
648
|
+
}
|
649
|
+
};
|
650
|
+
|
651
|
+
const globalRefs = getThemeRefs(globals);
|
652
|
+
|
653
|
+
const textField = {
|
654
|
+
borderRadius: globalRefs.radius.lg,
|
655
|
+
color: globalRefs.colors.surface.contrast,
|
656
|
+
backgroundColor: globalRefs.colors.surface.light,
|
657
|
+
borderWidth: globalRefs.border.small,
|
658
|
+
borderStyle: 'solid',
|
659
|
+
borderColor: globalRefs.colors.surface.dark,
|
660
|
+
labelColor: globalRefs.colors.surface.contrast,
|
661
|
+
placeholderColor: globalRefs.colors.surface.dark,
|
662
|
+
_invalid: {
|
663
|
+
backgroundColor: globalRefs.colors.error.light,
|
664
|
+
borderColor: globalRefs.colors.error.dark,
|
665
|
+
},
|
666
|
+
|
667
|
+
size: {
|
668
|
+
sm: {
|
669
|
+
height: '20px',
|
670
|
+
fontSize: '10px',
|
671
|
+
padding: `0 ${globalRefs.spacing.xs}`
|
672
|
+
},
|
673
|
+
md: {
|
674
|
+
height: '30px',
|
675
|
+
fontSize: '14px',
|
676
|
+
padding: `0 ${globalRefs.spacing.sm}`
|
677
|
+
},
|
678
|
+
lg: {
|
679
|
+
height: '40px',
|
680
|
+
fontSize: '20px',
|
681
|
+
padding: `0 ${globalRefs.spacing.sm}`
|
682
|
+
},
|
683
|
+
xl: {
|
684
|
+
height: '50px',
|
685
|
+
fontSize: '25px',
|
686
|
+
padding: `0 ${globalRefs.spacing.md}`
|
687
|
+
},
|
688
|
+
},
|
689
|
+
|
690
|
+
_fullwidth: {
|
691
|
+
width: '100%'
|
692
|
+
},
|
693
|
+
};
|
694
|
+
|
695
|
+
var components = {
|
696
|
+
button,
|
697
|
+
textField
|
698
|
+
};
|
699
|
+
|
700
|
+
var index = { globals, components };
|
701
|
+
|
702
|
+
export { componentsThemeToStyle, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
|
703
|
+
//# sourceMappingURL=index.esm.js.map
|