@descope/web-components-ui 1.0.53 → 1.0.54
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +384 -235
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -1
- package/dist/umd/942.js +1 -0
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -0
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-link/Link.js +90 -0
- package/src/components/descope-link/index.js +6 -0
- package/src/componentsHelpers/createProxy/helpers.js +12 -7
- package/src/componentsHelpers/createProxy/index.js +6 -14
- package/src/componentsHelpers/hoverableMixin.js +23 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/link.js +57 -0
package/dist/index.esm.js
CHANGED
@@ -249,6 +249,30 @@ const draggableMixin = (superclass) =>
|
|
249
249
|
|
250
250
|
class DescopeBaseClass extends HTMLElement {}
|
251
251
|
|
252
|
+
const hoverableMixin =
|
253
|
+
(relativeSelector = '') =>
|
254
|
+
(superclass) =>
|
255
|
+
class HovrerableMixinClass extends superclass {
|
256
|
+
connectedCallback() {
|
257
|
+
super.connectedCallback?.();
|
258
|
+
|
259
|
+
const onMouseOver = (e) => {
|
260
|
+
this.shadowRoot.host.setAttribute('hover', 'true');
|
261
|
+
e.target.addEventListener(
|
262
|
+
'mouseleave',
|
263
|
+
() => this.shadowRoot.host.removeAttribute('hover'),
|
264
|
+
{ once: true }
|
265
|
+
);
|
266
|
+
};
|
267
|
+
|
268
|
+
const baseElement = this.shadowRoot.querySelector(
|
269
|
+
this.baseSelector + relativeSelector
|
270
|
+
);
|
271
|
+
|
272
|
+
baseElement.addEventListener('mouseover', onMouseOver);
|
273
|
+
}
|
274
|
+
};
|
275
|
+
|
252
276
|
const observeAttributes = (
|
253
277
|
ele,
|
254
278
|
callback,
|
@@ -270,7 +294,7 @@ const observeAttributes = (
|
|
270
294
|
if (
|
271
295
|
mutation.type === 'attributes' &&
|
272
296
|
!excludeAttrs.includes(mutation.attributeName) &&
|
273
|
-
(!includeAttrs.length || includeAttrs.includes(
|
297
|
+
(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
|
274
298
|
) {
|
275
299
|
callback([mutation.attributeName]);
|
276
300
|
}
|
@@ -281,16 +305,17 @@ const observeAttributes = (
|
|
281
305
|
};
|
282
306
|
|
283
307
|
const createSyncAttrsCb =
|
284
|
-
(srcEle, targetEle) =>
|
308
|
+
(srcEle, targetEle, mapAttrs = {}) =>
|
285
309
|
(...attrNames) => {
|
286
310
|
attrNames.forEach((attrName) => {
|
311
|
+
const targetAttrName = mapAttrs[attrName] || attrName;
|
287
312
|
const srcAttrVal = srcEle.getAttribute(attrName);
|
288
313
|
if (srcAttrVal !== null) {
|
289
|
-
if (targetEle.getAttribute(
|
290
|
-
targetEle.setAttribute(
|
314
|
+
if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
|
315
|
+
targetEle.setAttribute(targetAttrName, srcAttrVal);
|
291
316
|
}
|
292
317
|
} else {
|
293
|
-
targetEle.removeAttribute(
|
318
|
+
targetEle.removeAttribute(targetAttrName);
|
294
319
|
}
|
295
320
|
});
|
296
321
|
};
|
@@ -300,8 +325,12 @@ const syncAttrs = (ele1, ele2, options) => {
|
|
300
325
|
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
|
301
326
|
};
|
302
327
|
|
303
|
-
const forwardAttrs = (source, dest, options) => {
|
304
|
-
observeAttributes(
|
328
|
+
const forwardAttrs = (source, dest, options = {}) => {
|
329
|
+
observeAttributes(
|
330
|
+
source,
|
331
|
+
createSyncAttrsCb(source, dest, options.mapAttrs),
|
332
|
+
options
|
333
|
+
);
|
305
334
|
};
|
306
335
|
|
307
336
|
const createProxy = ({
|
@@ -354,19 +383,9 @@ const createProxy = ({
|
|
354
383
|
}
|
355
384
|
};
|
356
385
|
|
357
|
-
this.mouseoverCbRef = () => {
|
358
|
-
this.proxyElement.setAttribute('hover', '');
|
359
|
-
this.proxyElement.addEventListener(
|
360
|
-
'mouseleave',
|
361
|
-
() => this.proxyElement.removeAttribute('hover'),
|
362
|
-
{ once: true }
|
363
|
-
);
|
364
|
-
};
|
365
|
-
|
366
|
-
this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
|
367
|
-
|
368
386
|
// sync events
|
369
|
-
this.addEventListener = (...args) =>
|
387
|
+
this.addEventListener = (...args) =>
|
388
|
+
this.proxyElement.addEventListener(...args);
|
370
389
|
|
371
390
|
syncAttrs(this.proxyElement, this.hostElement, {
|
372
391
|
excludeAttrs: excludeAttrsSync
|
@@ -385,7 +404,7 @@ const createProxy = ({
|
|
385
404
|
}
|
386
405
|
}
|
387
406
|
|
388
|
-
return ProxyElement;
|
407
|
+
return compose(hoverableMixin())(ProxyElement);
|
389
408
|
};
|
390
409
|
|
391
410
|
const attrs = {
|
@@ -516,7 +535,7 @@ const compose =
|
|
516
535
|
(val) =>
|
517
536
|
fns.reduceRight((res, fn) => fn(res), val);
|
518
537
|
|
519
|
-
const componentName$
|
538
|
+
const componentName$g = getComponentName('button');
|
520
539
|
|
521
540
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
522
541
|
const resetStyles = `
|
@@ -539,7 +558,7 @@ const iconStyles = `
|
|
539
558
|
}
|
540
559
|
`;
|
541
560
|
|
542
|
-
const selectors$
|
561
|
+
const selectors$4 = {
|
543
562
|
label: '::part(label)'
|
544
563
|
};
|
545
564
|
|
@@ -548,7 +567,7 @@ const Button = compose(
|
|
548
567
|
mappings: {
|
549
568
|
backgroundColor: {},
|
550
569
|
borderRadius: {},
|
551
|
-
color: { selector: selectors$
|
570
|
+
color: { selector: selectors$4.label },
|
552
571
|
borderColor: {},
|
553
572
|
borderStyle: {},
|
554
573
|
borderWidth: {},
|
@@ -556,8 +575,8 @@ const Button = compose(
|
|
556
575
|
height: {},
|
557
576
|
width: matchHostStyle(),
|
558
577
|
cursor: {},
|
559
|
-
padding: [{ selector: selectors$
|
560
|
-
textDecoration: { selector: selectors$
|
578
|
+
padding: [{ selector: selectors$4.label }],
|
579
|
+
textDecoration: { selector: selectors$4.label }
|
561
580
|
}
|
562
581
|
}),
|
563
582
|
draggableMixin,
|
@@ -569,7 +588,7 @@ const Button = compose(
|
|
569
588
|
style: () =>
|
570
589
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
571
590
|
excludeAttrsSync: ['tabindex'],
|
572
|
-
componentName: componentName$
|
591
|
+
componentName: componentName$g
|
573
592
|
})
|
574
593
|
);
|
575
594
|
|
@@ -602,9 +621,9 @@ const loadingIndicatorStyles = `
|
|
602
621
|
}
|
603
622
|
`;
|
604
623
|
|
605
|
-
customElements.define(componentName$
|
624
|
+
customElements.define(componentName$g, Button);
|
606
625
|
|
607
|
-
const selectors$
|
626
|
+
const selectors$3 = {
|
608
627
|
label: '::part(label)',
|
609
628
|
input: '::part(input-field)',
|
610
629
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
@@ -612,34 +631,34 @@ const selectors$2 = {
|
|
612
631
|
};
|
613
632
|
|
614
633
|
var textFieldMappings = {
|
615
|
-
color: { selector: selectors$
|
616
|
-
backgroundColor: { selector: selectors$
|
617
|
-
color: { selector: selectors$
|
634
|
+
color: { selector: selectors$3.input },
|
635
|
+
backgroundColor: { selector: selectors$3.input },
|
636
|
+
color: { selector: selectors$3.input },
|
618
637
|
width: matchHostStyle({}),
|
619
638
|
borderColor: [
|
620
|
-
{ selector: selectors$
|
621
|
-
{ selector: selectors$
|
639
|
+
{ selector: selectors$3.input },
|
640
|
+
{ selector: selectors$3.readOnlyInput }
|
622
641
|
],
|
623
642
|
borderWidth: [
|
624
|
-
{ selector: selectors$
|
625
|
-
{ selector: selectors$
|
643
|
+
{ selector: selectors$3.input },
|
644
|
+
{ selector: selectors$3.readOnlyInput }
|
626
645
|
],
|
627
646
|
borderStyle: [
|
628
|
-
{ selector: selectors$
|
629
|
-
{ selector: selectors$
|
647
|
+
{ selector: selectors$3.input },
|
648
|
+
{ selector: selectors$3.readOnlyInput }
|
630
649
|
],
|
631
|
-
borderRadius: { selector: selectors$
|
632
|
-
boxShadow: { selector: selectors$
|
650
|
+
borderRadius: { selector: selectors$3.input },
|
651
|
+
boxShadow: { selector: selectors$3.input },
|
633
652
|
fontSize: {},
|
634
|
-
height: { selector: selectors$
|
635
|
-
padding: { selector: selectors$
|
636
|
-
outline: { selector: selectors$
|
637
|
-
outlineOffset: { selector: selectors$
|
653
|
+
height: { selector: selectors$3.input },
|
654
|
+
padding: { selector: selectors$3.input },
|
655
|
+
outline: { selector: selectors$3.input },
|
656
|
+
outlineOffset: { selector: selectors$3.input },
|
638
657
|
|
639
|
-
placeholderColor: { selector: selectors$
|
658
|
+
placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
|
640
659
|
};
|
641
660
|
|
642
|
-
const componentName$
|
661
|
+
const componentName$f = getComponentName('text-field');
|
643
662
|
|
644
663
|
let overrides$6 = ``;
|
645
664
|
|
@@ -656,7 +675,7 @@ const TextField = compose(
|
|
656
675
|
wrappedEleName: 'vaadin-text-field',
|
657
676
|
style: () => overrides$6,
|
658
677
|
excludeAttrsSync: ['tabindex'],
|
659
|
-
componentName: componentName$
|
678
|
+
componentName: componentName$f
|
660
679
|
})
|
661
680
|
);
|
662
681
|
|
@@ -701,11 +720,11 @@ overrides$6 = `
|
|
701
720
|
}
|
702
721
|
`;
|
703
722
|
|
704
|
-
customElements.define(componentName$
|
723
|
+
customElements.define(componentName$f, TextField);
|
705
724
|
|
706
725
|
const template = document.createElement('template');
|
707
726
|
|
708
|
-
const componentName$
|
727
|
+
const componentName$e = getComponentName('combo');
|
709
728
|
|
710
729
|
template.innerHTML = `
|
711
730
|
<descope-button></descope-button>
|
@@ -722,9 +741,9 @@ class Combo extends DescopeBaseClass {
|
|
722
741
|
}
|
723
742
|
}
|
724
743
|
|
725
|
-
customElements.define(componentName$
|
744
|
+
customElements.define(componentName$e, Combo);
|
726
745
|
|
727
|
-
const componentName$
|
746
|
+
const componentName$d = getComponentName('number-field');
|
728
747
|
|
729
748
|
let overrides$5 = ``;
|
730
749
|
|
@@ -743,7 +762,7 @@ const NumberField = compose(
|
|
743
762
|
wrappedEleName: 'vaadin-number-field',
|
744
763
|
style: () => overrides$5,
|
745
764
|
excludeAttrsSync: ['tabindex'],
|
746
|
-
componentName: componentName$
|
765
|
+
componentName: componentName$d
|
747
766
|
})
|
748
767
|
);
|
749
768
|
|
@@ -787,9 +806,9 @@ overrides$5 = `
|
|
787
806
|
}
|
788
807
|
`;
|
789
808
|
|
790
|
-
customElements.define(componentName$
|
809
|
+
customElements.define(componentName$d, NumberField);
|
791
810
|
|
792
|
-
const componentName$
|
811
|
+
const componentName$c = getComponentName('email-field');
|
793
812
|
|
794
813
|
let overrides$4 = ``;
|
795
814
|
|
@@ -808,7 +827,7 @@ const EmailField = compose(
|
|
808
827
|
wrappedEleName: 'vaadin-email-field',
|
809
828
|
style: () => overrides$4,
|
810
829
|
excludeAttrsSync: ['tabindex'],
|
811
|
-
componentName: componentName$
|
830
|
+
componentName: componentName$c
|
812
831
|
})
|
813
832
|
);
|
814
833
|
|
@@ -852,9 +871,9 @@ overrides$4 = `
|
|
852
871
|
}
|
853
872
|
`;
|
854
873
|
|
855
|
-
customElements.define(componentName$
|
874
|
+
customElements.define(componentName$c, EmailField);
|
856
875
|
|
857
|
-
const componentName$
|
876
|
+
const componentName$b = getComponentName('password-field');
|
858
877
|
|
859
878
|
let overrides$3 = ``;
|
860
879
|
|
@@ -879,7 +898,7 @@ const PasswordField = compose(
|
|
879
898
|
wrappedEleName: 'vaadin-password-field',
|
880
899
|
style: () => overrides$3,
|
881
900
|
excludeAttrsSync: ['tabindex'],
|
882
|
-
componentName: componentName$
|
901
|
+
componentName: componentName$b
|
883
902
|
})
|
884
903
|
);
|
885
904
|
|
@@ -923,11 +942,11 @@ overrides$3 = `
|
|
923
942
|
}
|
924
943
|
`;
|
925
944
|
|
926
|
-
customElements.define(componentName$
|
945
|
+
customElements.define(componentName$b, PasswordField);
|
927
946
|
|
928
|
-
const componentName$
|
947
|
+
const componentName$a = getComponentName('text-area');
|
929
948
|
|
930
|
-
const selectors$
|
949
|
+
const selectors$2 = {
|
931
950
|
label: '::part(label)',
|
932
951
|
input: '::part(input-field)',
|
933
952
|
required: '::part(required-indicator)::after'
|
@@ -939,16 +958,16 @@ const TextArea = compose(
|
|
939
958
|
createStyleMixin({
|
940
959
|
mappings: {
|
941
960
|
resize: { selector: '> textarea' },
|
942
|
-
color: { selector: selectors$
|
961
|
+
color: { selector: selectors$2.label },
|
943
962
|
cursor: {},
|
944
963
|
width: matchHostStyle(),
|
945
|
-
backgroundColor: { selector: selectors$
|
946
|
-
borderWidth: { selector: selectors$
|
947
|
-
borderStyle: { selector: selectors$
|
948
|
-
borderColor: { selector: selectors$
|
949
|
-
borderRadius: { selector: selectors$
|
950
|
-
outline: { selector: selectors$
|
951
|
-
outlineOffset: { selector: selectors$
|
964
|
+
backgroundColor: { selector: selectors$2.input },
|
965
|
+
borderWidth: { selector: selectors$2.input },
|
966
|
+
borderStyle: { selector: selectors$2.input },
|
967
|
+
borderColor: { selector: selectors$2.input },
|
968
|
+
borderRadius: { selector: selectors$2.input },
|
969
|
+
outline: { selector: selectors$2.input },
|
970
|
+
outlineOffset: { selector: selectors$2.input }
|
952
971
|
}
|
953
972
|
}),
|
954
973
|
draggableMixin,
|
@@ -960,7 +979,7 @@ const TextArea = compose(
|
|
960
979
|
wrappedEleName: 'vaadin-text-area',
|
961
980
|
style: () => overrides$2,
|
962
981
|
excludeAttrsSync: ['tabindex'],
|
963
|
-
componentName: componentName$
|
982
|
+
componentName: componentName$a
|
964
983
|
})
|
965
984
|
);
|
966
985
|
|
@@ -985,29 +1004,29 @@ overrides$2 = `
|
|
985
1004
|
}
|
986
1005
|
`;
|
987
1006
|
|
988
|
-
customElements.define(componentName$
|
1007
|
+
customElements.define(componentName$a, TextArea);
|
989
1008
|
|
990
|
-
const componentName$
|
1009
|
+
const componentName$9 = getComponentName('date-picker');
|
991
1010
|
|
992
1011
|
const DatePicker = compose(
|
993
1012
|
draggableMixin,
|
994
1013
|
componentNameValidationMixin
|
995
1014
|
)(
|
996
1015
|
createProxy({
|
997
|
-
componentName: componentName$
|
1016
|
+
componentName: componentName$9,
|
998
1017
|
slots: ['prefix', 'suffix'],
|
999
1018
|
wrappedEleName: 'vaadin-date-picker',
|
1000
1019
|
style: ``
|
1001
1020
|
})
|
1002
1021
|
);
|
1003
1022
|
|
1004
|
-
customElements.define(componentName$
|
1023
|
+
customElements.define(componentName$9, DatePicker);
|
1005
1024
|
|
1006
|
-
const componentName$
|
1025
|
+
const componentName$8 = getComponentName('container');
|
1007
1026
|
|
1008
1027
|
class RawContainer extends DescopeBaseClass {
|
1009
1028
|
static get componentName() {
|
1010
|
-
return componentName$
|
1029
|
+
return componentName$8;
|
1011
1030
|
}
|
1012
1031
|
constructor() {
|
1013
1032
|
super();
|
@@ -1063,13 +1082,13 @@ const Container = compose(
|
|
1063
1082
|
componentNameValidationMixin
|
1064
1083
|
)(RawContainer);
|
1065
1084
|
|
1066
|
-
customElements.define(componentName$
|
1085
|
+
customElements.define(componentName$8, Container);
|
1067
1086
|
|
1068
|
-
const componentName$
|
1087
|
+
const componentName$7 = getComponentName('text');
|
1069
1088
|
|
1070
1089
|
class RawText extends DescopeBaseClass {
|
1071
1090
|
static get componentName() {
|
1072
|
-
return componentName$
|
1091
|
+
return componentName$7;
|
1073
1092
|
}
|
1074
1093
|
constructor() {
|
1075
1094
|
super();
|
@@ -1107,7 +1126,7 @@ const Text = compose(
|
|
1107
1126
|
componentNameValidationMixin
|
1108
1127
|
)(RawText);
|
1109
1128
|
|
1110
|
-
customElements.define(componentName$
|
1129
|
+
customElements.define(componentName$7, Text);
|
1111
1130
|
|
1112
1131
|
const getChildObserver = (callback) => {
|
1113
1132
|
return new MutationObserver((mutationsList) => {
|
@@ -1203,6 +1222,83 @@ const enforceNestingElementsStylesMixin =
|
|
1203
1222
|
};
|
1204
1223
|
};
|
1205
1224
|
|
1225
|
+
const componentName$6 = getComponentName('link');
|
1226
|
+
class RawLink extends DescopeBaseClass {
|
1227
|
+
static get componentName() {
|
1228
|
+
return componentName$6;
|
1229
|
+
}
|
1230
|
+
constructor() {
|
1231
|
+
super();
|
1232
|
+
const template = document.createElement('template');
|
1233
|
+
|
1234
|
+
template.innerHTML = `
|
1235
|
+
<style>
|
1236
|
+
:host {
|
1237
|
+
display: inline-block;
|
1238
|
+
}
|
1239
|
+
:host a {
|
1240
|
+
display: inline-block;
|
1241
|
+
}
|
1242
|
+
</style>
|
1243
|
+
<div>
|
1244
|
+
<a>
|
1245
|
+
<slot name="text"></slot>
|
1246
|
+
</a>
|
1247
|
+
</div>
|
1248
|
+
`;
|
1249
|
+
|
1250
|
+
this.attachShadow({ mode: 'open' });
|
1251
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1252
|
+
|
1253
|
+
forwardAttrs(this.shadowRoot.host, this.shadowRoot.querySelector('a'), {
|
1254
|
+
includeAttrs: ['href', 'target', 'tooltip'],
|
1255
|
+
mapAttrs: {
|
1256
|
+
tooltip: 'title'
|
1257
|
+
}
|
1258
|
+
});
|
1259
|
+
|
1260
|
+
this.baseSelector = ':host > div';
|
1261
|
+
}
|
1262
|
+
}
|
1263
|
+
|
1264
|
+
const selectors$1 = {
|
1265
|
+
anchor: { selector: '> a' }
|
1266
|
+
};
|
1267
|
+
|
1268
|
+
const { anchor } = selectors$1;
|
1269
|
+
|
1270
|
+
const Link = compose(
|
1271
|
+
enforceNestingElementsStylesMixin({
|
1272
|
+
nestingElementTagName: 'descope-text',
|
1273
|
+
nestingElementDestSlotName: 'text',
|
1274
|
+
forwardAttrOptions: {
|
1275
|
+
includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
|
1276
|
+
}
|
1277
|
+
}),
|
1278
|
+
createStyleMixin({
|
1279
|
+
mappings: {
|
1280
|
+
width: matchHostStyle(),
|
1281
|
+
textAlign: {},
|
1282
|
+
color: anchor,
|
1283
|
+
cursor: anchor,
|
1284
|
+
borderBottomWidth: anchor,
|
1285
|
+
borderBottomStyle: anchor,
|
1286
|
+
borderBottomColor: anchor
|
1287
|
+
},
|
1288
|
+
nestedMappings: {
|
1289
|
+
color: {
|
1290
|
+
selector: ` ${Text.componentName}`,
|
1291
|
+
property: Text.cssVarList.color
|
1292
|
+
}
|
1293
|
+
}
|
1294
|
+
}),
|
1295
|
+
hoverableMixin(anchor.selector),
|
1296
|
+
draggableMixin,
|
1297
|
+
componentNameValidationMixin
|
1298
|
+
)(RawLink);
|
1299
|
+
|
1300
|
+
customElements.define(componentName$6, Link);
|
1301
|
+
|
1206
1302
|
const componentName$5 = getComponentName('divider');
|
1207
1303
|
class RawDivider extends DescopeBaseClass {
|
1208
1304
|
static get componentName() {
|
@@ -1594,150 +1690,150 @@ var globals = {
|
|
1594
1690
|
fonts
|
1595
1691
|
};
|
1596
1692
|
|
1597
|
-
const globalRefs$
|
1598
|
-
const vars$
|
1693
|
+
const globalRefs$5 = getThemeRefs(globals);
|
1694
|
+
const vars$a = Button.cssVarList;
|
1599
1695
|
|
1600
1696
|
const mode = {
|
1601
|
-
primary: globalRefs$
|
1602
|
-
secondary: globalRefs$
|
1603
|
-
success: globalRefs$
|
1604
|
-
error: globalRefs$
|
1605
|
-
surface: globalRefs$
|
1697
|
+
primary: globalRefs$5.colors.primary,
|
1698
|
+
secondary: globalRefs$5.colors.secondary,
|
1699
|
+
success: globalRefs$5.colors.success,
|
1700
|
+
error: globalRefs$5.colors.error,
|
1701
|
+
surface: globalRefs$5.colors.surface
|
1606
1702
|
};
|
1607
1703
|
|
1608
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1704
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$g);
|
1609
1705
|
|
1610
1706
|
const button = {
|
1611
1707
|
...helperTheme$1,
|
1612
1708
|
|
1613
1709
|
size: {
|
1614
1710
|
xs: {
|
1615
|
-
[vars$
|
1616
|
-
[vars$
|
1617
|
-
[vars$
|
1711
|
+
[vars$a.height]: '10px',
|
1712
|
+
[vars$a.fontSize]: '10px',
|
1713
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.xs}`
|
1618
1714
|
},
|
1619
1715
|
sm: {
|
1620
|
-
[vars$
|
1621
|
-
[vars$
|
1622
|
-
[vars$
|
1716
|
+
[vars$a.height]: '20px',
|
1717
|
+
[vars$a.fontSize]: '10px',
|
1718
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.sm}`
|
1623
1719
|
},
|
1624
1720
|
md: {
|
1625
|
-
[vars$
|
1626
|
-
[vars$
|
1627
|
-
[vars$
|
1721
|
+
[vars$a.height]: '30px',
|
1722
|
+
[vars$a.fontSize]: '14px',
|
1723
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.md}`
|
1628
1724
|
},
|
1629
1725
|
lg: {
|
1630
|
-
[vars$
|
1631
|
-
[vars$
|
1632
|
-
[vars$
|
1726
|
+
[vars$a.height]: '40px',
|
1727
|
+
[vars$a.fontSize]: '20px',
|
1728
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.lg}`
|
1633
1729
|
},
|
1634
1730
|
xl: {
|
1635
|
-
[vars$
|
1636
|
-
[vars$
|
1637
|
-
[vars$
|
1731
|
+
[vars$a.height]: '50px',
|
1732
|
+
[vars$a.fontSize]: '25px',
|
1733
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.xl}`
|
1638
1734
|
}
|
1639
1735
|
},
|
1640
1736
|
|
1641
|
-
[vars$
|
1642
|
-
[vars$
|
1643
|
-
[vars$
|
1644
|
-
[vars$
|
1645
|
-
[vars$
|
1737
|
+
[vars$a.borderRadius]: globalRefs$5.radius.lg,
|
1738
|
+
[vars$a.cursor]: 'pointer',
|
1739
|
+
[vars$a.borderWidth]: '2px',
|
1740
|
+
[vars$a.borderStyle]: 'solid',
|
1741
|
+
[vars$a.borderColor]: 'transparent',
|
1646
1742
|
|
1647
1743
|
_fullWidth: {
|
1648
|
-
[vars$
|
1744
|
+
[vars$a.width]: '100%'
|
1649
1745
|
},
|
1650
1746
|
_loading: {
|
1651
|
-
[vars$
|
1747
|
+
[vars$a.cursor]: 'wait'
|
1652
1748
|
},
|
1653
1749
|
|
1654
1750
|
variant: {
|
1655
1751
|
contained: {
|
1656
|
-
[vars$
|
1657
|
-
[vars$
|
1752
|
+
[vars$a.color]: helperRefs$1.contrast,
|
1753
|
+
[vars$a.backgroundColor]: helperRefs$1.main,
|
1658
1754
|
_hover: {
|
1659
|
-
[vars$
|
1755
|
+
[vars$a.backgroundColor]: helperRefs$1.dark
|
1660
1756
|
},
|
1661
1757
|
_loading: {
|
1662
|
-
[vars$
|
1758
|
+
[vars$a.backgroundColor]: helperRefs$1.main
|
1663
1759
|
}
|
1664
1760
|
},
|
1665
1761
|
outline: {
|
1666
|
-
[vars$
|
1667
|
-
[vars$
|
1762
|
+
[vars$a.color]: helperRefs$1.main,
|
1763
|
+
[vars$a.borderColor]: helperRefs$1.main,
|
1668
1764
|
_hover: {
|
1669
|
-
[vars$
|
1670
|
-
[vars$
|
1765
|
+
[vars$a.color]: helperRefs$1.dark,
|
1766
|
+
[vars$a.borderColor]: helperRefs$1.dark,
|
1671
1767
|
_error: {
|
1672
|
-
[vars$
|
1768
|
+
[vars$a.color]: helperRefs$1.error
|
1673
1769
|
}
|
1674
1770
|
}
|
1675
1771
|
},
|
1676
1772
|
link: {
|
1677
|
-
[vars$
|
1678
|
-
[vars$
|
1679
|
-
[vars$
|
1680
|
-
[vars$
|
1681
|
-
[vars$
|
1773
|
+
[vars$a.color]: helperRefs$1.main,
|
1774
|
+
[vars$a.padding]: 0,
|
1775
|
+
[vars$a.margin]: 0,
|
1776
|
+
[vars$a.lineHeight]: helperRefs$1.height,
|
1777
|
+
[vars$a.borderRadius]: 0,
|
1682
1778
|
_hover: {
|
1683
|
-
[vars$
|
1684
|
-
[vars$
|
1779
|
+
[vars$a.color]: helperRefs$1.main,
|
1780
|
+
[vars$a.textDecoration]: 'underline'
|
1685
1781
|
}
|
1686
1782
|
}
|
1687
1783
|
}
|
1688
1784
|
};
|
1689
1785
|
|
1690
|
-
const globalRefs$
|
1786
|
+
const globalRefs$4 = getThemeRefs(globals);
|
1691
1787
|
|
1692
|
-
const vars$
|
1788
|
+
const vars$9 = TextField.cssVarList;
|
1693
1789
|
|
1694
1790
|
const textField = (vars) => ({
|
1695
1791
|
size: {
|
1696
1792
|
xs: {
|
1697
1793
|
[vars.height]: '14px',
|
1698
1794
|
[vars.fontSize]: '8px',
|
1699
|
-
[vars.padding]: `0 ${globalRefs$
|
1795
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.xs}`
|
1700
1796
|
},
|
1701
1797
|
sm: {
|
1702
1798
|
[vars.height]: '20px',
|
1703
1799
|
[vars.fontSize]: '10px',
|
1704
|
-
[vars.padding]: `0 ${globalRefs$
|
1800
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.sm}`
|
1705
1801
|
},
|
1706
1802
|
md: {
|
1707
1803
|
[vars.height]: '30px',
|
1708
1804
|
[vars.fontSize]: '14px',
|
1709
|
-
[vars.padding]: `0 ${globalRefs$
|
1805
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.md}`
|
1710
1806
|
},
|
1711
1807
|
lg: {
|
1712
1808
|
[vars.height]: '40px',
|
1713
1809
|
[vars.fontSize]: '16px',
|
1714
|
-
[vars.padding]: `0 ${globalRefs$
|
1810
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.lg}`
|
1715
1811
|
},
|
1716
1812
|
xl: {
|
1717
1813
|
[vars.height]: '50px',
|
1718
1814
|
[vars.fontSize]: '25px',
|
1719
|
-
[vars.padding]: `0 ${globalRefs$
|
1815
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.xl}`
|
1720
1816
|
}
|
1721
1817
|
},
|
1722
1818
|
|
1723
|
-
[vars.color]: globalRefs$
|
1724
|
-
[vars.placeholderColor]: globalRefs$
|
1819
|
+
[vars.color]: globalRefs$4.colors.surface.contrast,
|
1820
|
+
[vars.placeholderColor]: globalRefs$4.colors.surface.contrast,
|
1725
1821
|
|
1726
|
-
[vars.backgroundColor]: globalRefs$
|
1822
|
+
[vars.backgroundColor]: globalRefs$4.colors.surface.light,
|
1727
1823
|
|
1728
1824
|
[vars.borderWidth]: '1px',
|
1729
1825
|
[vars.borderStyle]: 'solid',
|
1730
1826
|
[vars.borderColor]: 'transparent',
|
1731
|
-
[vars.borderRadius]: globalRefs$
|
1827
|
+
[vars.borderRadius]: globalRefs$4.radius.sm,
|
1732
1828
|
|
1733
1829
|
_borderOffset: {
|
1734
1830
|
[vars.outlineOffset]: '2px'
|
1735
1831
|
},
|
1736
1832
|
|
1737
1833
|
_disabled: {
|
1738
|
-
[vars.color]: globalRefs$
|
1739
|
-
[vars.placeholderColor]: globalRefs$
|
1740
|
-
[vars.backgroundColor]: globalRefs$
|
1834
|
+
[vars.color]: globalRefs$4.colors.surface.dark,
|
1835
|
+
[vars.placeholderColor]: globalRefs$4.colors.surface.light,
|
1836
|
+
[vars.backgroundColor]: globalRefs$4.colors.surface.main
|
1741
1837
|
},
|
1742
1838
|
|
1743
1839
|
_fullWidth: {
|
@@ -1745,27 +1841,27 @@ const textField = (vars) => ({
|
|
1745
1841
|
},
|
1746
1842
|
|
1747
1843
|
_focused: {
|
1748
|
-
[vars.outline]: `2px solid ${globalRefs$
|
1844
|
+
[vars.outline]: `2px solid ${globalRefs$4.colors.surface.main}`
|
1749
1845
|
},
|
1750
1846
|
|
1751
1847
|
_bordered: {
|
1752
|
-
[vars.borderColor]: globalRefs$
|
1848
|
+
[vars.borderColor]: globalRefs$4.colors.surface.main
|
1753
1849
|
},
|
1754
1850
|
|
1755
1851
|
_hasErrorMessage: {
|
1756
|
-
[vars.borderColor]: globalRefs$
|
1757
|
-
[vars.color]: globalRefs$
|
1758
|
-
[vars.placeholderColor]: globalRefs$
|
1852
|
+
[vars.borderColor]: globalRefs$4.colors.error.main,
|
1853
|
+
[vars.color]: globalRefs$4.colors.error.main,
|
1854
|
+
[vars.placeholderColor]: globalRefs$4.colors.error.light
|
1759
1855
|
}
|
1760
1856
|
});
|
1761
1857
|
|
1762
|
-
var textField$1 = textField(vars$
|
1858
|
+
var textField$1 = textField(vars$9);
|
1763
1859
|
|
1764
|
-
const vars$
|
1860
|
+
const vars$8 = PasswordField.cssVarList;
|
1765
1861
|
|
1766
1862
|
const passwordField = {
|
1767
|
-
...textField(vars$
|
1768
|
-
[vars$
|
1863
|
+
...textField(vars$8),
|
1864
|
+
[vars$8.revealCursor]: 'pointer'
|
1769
1865
|
};
|
1770
1866
|
|
1771
1867
|
const numberField = {
|
@@ -1776,48 +1872,48 @@ const emailField = {
|
|
1776
1872
|
...textField(EmailField.cssVarList)
|
1777
1873
|
};
|
1778
1874
|
|
1779
|
-
const globalRefs$
|
1780
|
-
const vars$
|
1875
|
+
const globalRefs$3 = getThemeRefs(globals);
|
1876
|
+
const vars$7 = TextArea.cssVarList;
|
1781
1877
|
|
1782
1878
|
const textArea = {
|
1783
|
-
[vars$
|
1784
|
-
[vars$
|
1785
|
-
[vars$
|
1879
|
+
[vars$7.color]: globalRefs$3.colors.primary.main,
|
1880
|
+
[vars$7.backgroundColor]: globalRefs$3.colors.surface.light,
|
1881
|
+
[vars$7.resize]: 'vertical',
|
1786
1882
|
|
1787
|
-
[vars$
|
1788
|
-
[vars$
|
1789
|
-
[vars$
|
1790
|
-
[vars$
|
1883
|
+
[vars$7.borderRadius]: globalRefs$3.radius.sm,
|
1884
|
+
[vars$7.borderWidth]: '1px',
|
1885
|
+
[vars$7.borderStyle]: 'solid',
|
1886
|
+
[vars$7.borderColor]: 'transparent',
|
1791
1887
|
|
1792
1888
|
_borderOffset: {
|
1793
|
-
[vars$
|
1889
|
+
[vars$7.outlineOffset]: '2px'
|
1794
1890
|
},
|
1795
1891
|
|
1796
1892
|
_bordered: {
|
1797
|
-
[vars$
|
1893
|
+
[vars$7.borderColor]: globalRefs$3.colors.surface.main
|
1798
1894
|
},
|
1799
1895
|
|
1800
1896
|
_focused: {
|
1801
|
-
[vars$
|
1897
|
+
[vars$7.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
|
1802
1898
|
},
|
1803
1899
|
|
1804
1900
|
_fullWidth: {
|
1805
|
-
[vars$
|
1901
|
+
[vars$7.width]: '100%'
|
1806
1902
|
},
|
1807
1903
|
|
1808
1904
|
_disabled: {
|
1809
|
-
[vars$
|
1905
|
+
[vars$7.cursor]: 'not-allowed'
|
1810
1906
|
},
|
1811
1907
|
|
1812
1908
|
_invalid: {
|
1813
|
-
[vars$
|
1909
|
+
[vars$7.outline]: `2px solid ${globalRefs$3.colors.error.main}`
|
1814
1910
|
}
|
1815
1911
|
};
|
1816
1912
|
|
1817
|
-
const vars$
|
1913
|
+
const vars$6 = Checkbox.cssVarList;
|
1818
1914
|
|
1819
1915
|
const checkbox = {
|
1820
|
-
[vars$
|
1916
|
+
[vars$6.cursor]: 'pointer'
|
1821
1917
|
};
|
1822
1918
|
|
1823
1919
|
const componentName$2 = getComponentName('switch-toggle');
|
@@ -1894,16 +1990,16 @@ overrides$1 = `
|
|
1894
1990
|
}
|
1895
1991
|
`;
|
1896
1992
|
|
1897
|
-
const vars$
|
1993
|
+
const vars$5 = SwitchToggle.cssVarList;
|
1898
1994
|
|
1899
1995
|
const swtichToggle = {
|
1900
|
-
[vars$
|
1901
|
-
[vars$
|
1996
|
+
[vars$5.width]: '70px',
|
1997
|
+
[vars$5.cursor]: [{}, { selector: '> label' }]
|
1902
1998
|
};
|
1903
1999
|
|
1904
|
-
const globalRefs$
|
2000
|
+
const globalRefs$2 = getThemeRefs(globals);
|
1905
2001
|
|
1906
|
-
const vars$
|
2002
|
+
const vars$4 = Container.cssVarList;
|
1907
2003
|
|
1908
2004
|
const verticalAlignment = {
|
1909
2005
|
start: { verticalAlignment: 'start' },
|
@@ -1926,31 +2022,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1926
2022
|
|
1927
2023
|
const container = {
|
1928
2024
|
...helperTheme,
|
1929
|
-
[vars$
|
2025
|
+
[vars$4.display]: 'flex',
|
1930
2026
|
verticalPadding: {
|
1931
|
-
sm: { [vars$
|
1932
|
-
md: { [vars$
|
1933
|
-
lg: { [vars$
|
2027
|
+
sm: { [vars$4.verticalPadding]: '5px' },
|
2028
|
+
md: { [vars$4.verticalPadding]: '10px' },
|
2029
|
+
lg: { [vars$4.verticalPadding]: '20px' },
|
1934
2030
|
},
|
1935
2031
|
horizontalPadding: {
|
1936
|
-
sm: { [vars$
|
1937
|
-
md: { [vars$
|
1938
|
-
lg: { [vars$
|
2032
|
+
sm: { [vars$4.horizontalPadding]: '5px' },
|
2033
|
+
md: { [vars$4.horizontalPadding]: '10px' },
|
2034
|
+
lg: { [vars$4.horizontalPadding]: '20px' },
|
1939
2035
|
},
|
1940
2036
|
direction: {
|
1941
2037
|
row: {
|
1942
|
-
[vars$
|
1943
|
-
[vars$
|
1944
|
-
[vars$
|
2038
|
+
[vars$4.flexDirection]: 'row',
|
2039
|
+
[vars$4.alignItems]: helperRefs.verticalAlignment,
|
2040
|
+
[vars$4.justifyContent]: helperRefs.horizontalAlignment,
|
1945
2041
|
horizontalAlignment: {
|
1946
2042
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1947
2043
|
}
|
1948
2044
|
},
|
1949
2045
|
|
1950
2046
|
column: {
|
1951
|
-
[vars$
|
1952
|
-
[vars$
|
1953
|
-
[vars$
|
2047
|
+
[vars$4.flexDirection]: 'column',
|
2048
|
+
[vars$4.alignItems]: helperRefs.horizontalAlignment,
|
2049
|
+
[vars$4.justifyContent]: helperRefs.verticalAlignment,
|
1954
2050
|
verticalAlignment: {
|
1955
2051
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1956
2052
|
}
|
@@ -1959,131 +2055,183 @@ const container = {
|
|
1959
2055
|
|
1960
2056
|
spaceBetween: {
|
1961
2057
|
sm: {
|
1962
|
-
[vars$
|
2058
|
+
[vars$4.gap]: '10px'
|
1963
2059
|
},
|
1964
2060
|
md: {
|
1965
|
-
[vars$
|
2061
|
+
[vars$4.gap]: '20px'
|
1966
2062
|
},
|
1967
2063
|
lg: {
|
1968
|
-
[vars$
|
2064
|
+
[vars$4.gap]: '30px'
|
1969
2065
|
}
|
1970
2066
|
},
|
1971
2067
|
|
1972
2068
|
shadow: {
|
1973
2069
|
sm: {
|
1974
|
-
[vars$
|
2070
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1975
2071
|
},
|
1976
2072
|
md: {
|
1977
|
-
[vars$
|
2073
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1978
2074
|
},
|
1979
2075
|
lg: {
|
1980
|
-
[vars$
|
2076
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1981
2077
|
},
|
1982
2078
|
xl: {
|
1983
|
-
[vars$
|
2079
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1984
2080
|
},
|
1985
2081
|
'2xl': {
|
1986
2082
|
[helperVars.shadowColor]: '#00000050',
|
1987
|
-
[vars$
|
2083
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1988
2084
|
},
|
1989
2085
|
},
|
1990
2086
|
|
1991
2087
|
borderRadius: {
|
1992
2088
|
sm: {
|
1993
|
-
[vars$
|
2089
|
+
[vars$4.borderRadius]: globalRefs$2.radius.sm
|
1994
2090
|
},
|
1995
2091
|
md: {
|
1996
|
-
[vars$
|
2092
|
+
[vars$4.borderRadius]: globalRefs$2.radius.md
|
1997
2093
|
},
|
1998
2094
|
lg: {
|
1999
|
-
[vars$
|
2095
|
+
[vars$4.borderRadius]: globalRefs$2.radius.lg
|
2000
2096
|
},
|
2001
2097
|
}
|
2002
2098
|
};
|
2003
2099
|
|
2004
|
-
const vars$
|
2100
|
+
const vars$3 = Logo.cssVarList;
|
2005
2101
|
|
2006
2102
|
const logo = {
|
2007
|
-
[vars$
|
2103
|
+
[vars$3.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
2008
2104
|
};
|
2009
2105
|
|
2010
|
-
const globalRefs = getThemeRefs(globals);
|
2106
|
+
const globalRefs$1 = getThemeRefs(globals);
|
2011
2107
|
|
2012
|
-
const vars$
|
2108
|
+
const vars$2 = Text.cssVarList;
|
2013
2109
|
|
2014
2110
|
const text = {
|
2015
|
-
[vars$
|
2016
|
-
[vars$
|
2017
|
-
[vars$
|
2018
|
-
[vars$
|
2111
|
+
[vars$2.lineHeight]: '1em',
|
2112
|
+
[vars$2.display]: 'inline-block',
|
2113
|
+
[vars$2.textAlign]: 'left',
|
2114
|
+
[vars$2.color]: globalRefs$1.colors.surface.dark,
|
2019
2115
|
variant: {
|
2020
2116
|
h1: {
|
2021
|
-
[vars$
|
2022
|
-
[vars$
|
2023
|
-
[vars$
|
2117
|
+
[vars$2.fontSize]: globalRefs$1.typography.h1.size,
|
2118
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h1.weight,
|
2119
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h1.font
|
2024
2120
|
},
|
2025
2121
|
h2: {
|
2026
|
-
[vars$
|
2027
|
-
[vars$
|
2028
|
-
[vars$
|
2122
|
+
[vars$2.fontSize]: globalRefs$1.typography.h2.size,
|
2123
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h2.weight,
|
2124
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h2.font
|
2029
2125
|
},
|
2030
2126
|
h3: {
|
2031
|
-
[vars$
|
2032
|
-
[vars$
|
2033
|
-
[vars$
|
2127
|
+
[vars$2.fontSize]: globalRefs$1.typography.h3.size,
|
2128
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h3.weight,
|
2129
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h3.font
|
2034
2130
|
},
|
2035
2131
|
subtitle1: {
|
2036
|
-
[vars$
|
2037
|
-
[vars$
|
2038
|
-
[vars$
|
2132
|
+
[vars$2.fontSize]: globalRefs$1.typography.subtitle1.size,
|
2133
|
+
[vars$2.fontWeight]: globalRefs$1.typography.subtitle1.weight,
|
2134
|
+
[vars$2.fontFamily]: globalRefs$1.typography.subtitle1.font
|
2039
2135
|
},
|
2040
2136
|
subtitle2: {
|
2041
|
-
[vars$
|
2042
|
-
[vars$
|
2043
|
-
[vars$
|
2137
|
+
[vars$2.fontSize]: globalRefs$1.typography.subtitle2.size,
|
2138
|
+
[vars$2.fontWeight]: globalRefs$1.typography.subtitle2.weight,
|
2139
|
+
[vars$2.fontFamily]: globalRefs$1.typography.subtitle2.font
|
2044
2140
|
},
|
2045
2141
|
body1: {
|
2046
|
-
[vars$
|
2047
|
-
[vars$
|
2048
|
-
[vars$
|
2142
|
+
[vars$2.fontSize]: globalRefs$1.typography.body1.size,
|
2143
|
+
[vars$2.fontWeight]: globalRefs$1.typography.body1.weight,
|
2144
|
+
[vars$2.fontFamily]: globalRefs$1.typography.body1.font
|
2049
2145
|
},
|
2050
2146
|
body2: {
|
2051
|
-
[vars$
|
2052
|
-
[vars$
|
2053
|
-
[vars$
|
2147
|
+
[vars$2.fontSize]: globalRefs$1.typography.body2.size,
|
2148
|
+
[vars$2.fontWeight]: globalRefs$1.typography.body2.weight,
|
2149
|
+
[vars$2.fontFamily]: globalRefs$1.typography.body2.font
|
2054
2150
|
}
|
2055
2151
|
},
|
2056
2152
|
mode: {
|
2057
2153
|
primary: {
|
2058
|
-
[vars$
|
2154
|
+
[vars$2.color]: globalRefs$1.colors.primary.main
|
2059
2155
|
},
|
2060
2156
|
secondary: {
|
2061
|
-
[vars$
|
2157
|
+
[vars$2.color]: globalRefs$1.colors.secondary.main
|
2062
2158
|
},
|
2063
2159
|
error: {
|
2064
|
-
[vars$
|
2160
|
+
[vars$2.color]: globalRefs$1.colors.error.main
|
2065
2161
|
},
|
2066
2162
|
success: {
|
2067
|
-
[vars$
|
2163
|
+
[vars$2.color]: globalRefs$1.colors.success.main
|
2068
2164
|
}
|
2069
2165
|
},
|
2070
2166
|
textAlign: {
|
2071
|
-
right: { [vars$
|
2072
|
-
left: { [vars$
|
2073
|
-
center: { [vars$
|
2167
|
+
right: { [vars$2.textAlign]: 'right' },
|
2168
|
+
left: { [vars$2.textAlign]: 'left' },
|
2169
|
+
center: { [vars$2.textAlign]: 'center' }
|
2074
2170
|
},
|
2075
2171
|
_fullWidth: {
|
2076
|
-
[vars$
|
2077
|
-
[vars$
|
2172
|
+
[vars$2.width]: '100%',
|
2173
|
+
[vars$2.display]: 'block'
|
2078
2174
|
},
|
2079
2175
|
_italic: {
|
2080
|
-
[vars$
|
2176
|
+
[vars$2.fontStyle]: 'italic'
|
2081
2177
|
},
|
2082
2178
|
_uppercase: {
|
2083
|
-
[vars$
|
2179
|
+
[vars$2.textTransform]: 'uppercase'
|
2084
2180
|
},
|
2085
2181
|
_lowercase: {
|
2086
|
-
[vars$
|
2182
|
+
[vars$2.textTransform]: 'lowercase'
|
2183
|
+
}
|
2184
|
+
};
|
2185
|
+
|
2186
|
+
const globalRefs = getThemeRefs(globals);
|
2187
|
+
const vars$1 = Link.cssVarList;
|
2188
|
+
|
2189
|
+
const link = {
|
2190
|
+
[vars$1.cursor]: 'pointer',
|
2191
|
+
[vars$1.borderBottomWidth]: '2px',
|
2192
|
+
[vars$1.borderBottomStyle]: 'solid',
|
2193
|
+
[vars$1.borderBottomColor]: 'transparent',
|
2194
|
+
[vars$1.color]: globalRefs.colors.primary.main,
|
2195
|
+
|
2196
|
+
_hover: {
|
2197
|
+
[vars$1.borderBottomColor]: globalRefs.colors.primary.main
|
2198
|
+
},
|
2199
|
+
|
2200
|
+
textAlign: {
|
2201
|
+
right: { [vars$1.textAlign]: 'right' },
|
2202
|
+
left: { [vars$1.textAlign]: 'left' },
|
2203
|
+
center: { [vars$1.textAlign]: 'center' }
|
2204
|
+
},
|
2205
|
+
|
2206
|
+
_fullWidth: {
|
2207
|
+
[vars$1.width]: '100%'
|
2208
|
+
},
|
2209
|
+
|
2210
|
+
mode: {
|
2211
|
+
primary: {
|
2212
|
+
[vars$1.color]: globalRefs.colors.primary.main,
|
2213
|
+
_hover: {
|
2214
|
+
[vars$1.borderBottomColor]: globalRefs.colors.primary.main
|
2215
|
+
}
|
2216
|
+
},
|
2217
|
+
secondary: {
|
2218
|
+
[vars$1.color]: globalRefs.colors.secondary.main,
|
2219
|
+
_hover: {
|
2220
|
+
[vars$1.borderBottomColor]: globalRefs.colors.secondary.main
|
2221
|
+
}
|
2222
|
+
},
|
2223
|
+
error: {
|
2224
|
+
[vars$1.color]: globalRefs.colors.error.main,
|
2225
|
+
_hover: {
|
2226
|
+
[vars$1.borderBottomColor]: globalRefs.colors.error.main
|
2227
|
+
}
|
2228
|
+
},
|
2229
|
+
success: {
|
2230
|
+
[vars$1.color]: globalRefs.colors.success.main,
|
2231
|
+
_hover: {
|
2232
|
+
[vars$1.borderBottomColor]: globalRefs.colors.success.main
|
2233
|
+
}
|
2234
|
+
}
|
2087
2235
|
}
|
2088
2236
|
};
|
2089
2237
|
|
@@ -2253,6 +2401,7 @@ var components = {
|
|
2253
2401
|
container,
|
2254
2402
|
logo,
|
2255
2403
|
text,
|
2404
|
+
link,
|
2256
2405
|
divider,
|
2257
2406
|
passcode
|
2258
2407
|
};
|