@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.
Files changed (49) hide show
  1. package/README.md +191 -0
  2. package/dist/cjs/index.cjs.js +95 -0
  3. package/dist/cjs/index.cjs.js.map +1 -0
  4. package/dist/cjs/package.json +1 -0
  5. package/dist/index.esm.js +703 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/umd/146.js +1 -0
  8. package/dist/umd/221.js +37 -0
  9. package/dist/umd/221.js.LICENSE.txt +11 -0
  10. package/dist/umd/511.js +573 -0
  11. package/dist/umd/511.js.LICENSE.txt +23 -0
  12. package/dist/umd/54.js +971 -0
  13. package/dist/umd/54.js.LICENSE.txt +33 -0
  14. package/dist/umd/599.js +1 -0
  15. package/dist/umd/729.js +1 -0
  16. package/dist/umd/840.js +356 -0
  17. package/dist/umd/840.js.LICENSE.txt +61 -0
  18. package/dist/umd/9.js +312 -0
  19. package/dist/umd/9.js.LICENSE.txt +21 -0
  20. package/dist/umd/descope-button-js.js +1 -0
  21. package/dist/umd/descope-combo-js.js +1 -0
  22. package/dist/umd/descope-date-picker-js.js +1 -0
  23. package/dist/umd/descope-text-field-js.js +1 -0
  24. package/dist/umd/index.js +1 -0
  25. package/package.json +45 -0
  26. package/src/components/descope-button.js +39 -0
  27. package/src/components/descope-combo.js +26 -0
  28. package/src/components/descope-date-picker.js +19 -0
  29. package/src/components/descope-text-field.js +36 -0
  30. package/src/componentsHelpers/createProxy/helpers.js +33 -0
  31. package/src/componentsHelpers/createProxy/index.js +82 -0
  32. package/src/componentsHelpers/createStyleMixin/helpers.js +66 -0
  33. package/src/componentsHelpers/createStyleMixin/index.js +22 -0
  34. package/src/componentsHelpers/draggableMixin.js +32 -0
  35. package/src/componentsHelpers/index.js +11 -0
  36. package/src/componentsHelpers/inputMixin.js +46 -0
  37. package/src/constants.js +1 -0
  38. package/src/dev/index.js +6 -0
  39. package/src/helpers.js +8 -0
  40. package/src/index.cjs.js +3 -0
  41. package/src/index.js +8 -0
  42. package/src/index.umd.js +7 -0
  43. package/src/theme/components/button.js +86 -0
  44. package/src/theme/components/index.js +7 -0
  45. package/src/theme/components/textField.js +50 -0
  46. package/src/theme/globals.js +66 -0
  47. package/src/theme/index.js +4 -0
  48. package/src/themeHelpers/index.js +76 -0
  49. 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