@descope/web-components-ui 1.0.237 → 1.0.239
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +151 -137
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +151 -137
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-grid/GridClass.js +7 -0
- package/src/components/descope-modal/ModalClass.js +4 -1
- package/src/theme/components/badge.js +3 -3
- package/src/theme/components/grid.js +6 -5
- package/src/theme/components/modal.js +5 -0
- package/src/theme/components/notificationCard.js +3 -3
package/dist/index.esm.js
CHANGED
@@ -7087,6 +7087,7 @@ const GridMixin = (superclass) =>
|
|
7087
7087
|
const {
|
7088
7088
|
host,
|
7089
7089
|
headerRow,
|
7090
|
+
headerRowCell,
|
7090
7091
|
contentRow,
|
7091
7092
|
firstRow,
|
7092
7093
|
sortIndicators,
|
@@ -7097,6 +7098,7 @@ const {
|
|
7097
7098
|
} = {
|
7098
7099
|
host: { selector: () => 'vaadin-grid' },
|
7099
7100
|
headerRow: { selector: () => '::part(header-cell)' },
|
7101
|
+
headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
|
7100
7102
|
contentRow: { selector: () => '::part(cell)' },
|
7101
7103
|
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
7102
7104
|
selectedRow: { selector: () => '::part(selected-row-cell)' },
|
@@ -7117,6 +7119,10 @@ const GridClass = compose(
|
|
7117
7119
|
fontSize: [{ ...headerRow }, { ...contentRow }],
|
7118
7120
|
fontWeight: { ...contentRow },
|
7119
7121
|
valueTextColor: { ...contentRow, property: 'color' },
|
7122
|
+
backgroundColor: [
|
7123
|
+
{ ...host, property: 'background-color' },
|
7124
|
+
{ ...contentRow, property: 'background-color' },
|
7125
|
+
],
|
7120
7126
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7121
7127
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7122
7128
|
inputBorderColor: { ...host, property: 'border-color' },
|
@@ -7125,6 +7131,7 @@ const GridClass = compose(
|
|
7125
7131
|
inputBorderRadius: { ...host, property: 'border-radius' },
|
7126
7132
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7127
7133
|
selectedTextColor: { ...selectedRow, property: 'color' },
|
7134
|
+
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7128
7135
|
separatorColor: [
|
7129
7136
|
{ ...firstRow, property: 'border-bottom-color' },
|
7130
7137
|
{ ...rowSeparator, property: 'border-top-color' },
|
@@ -7487,15 +7494,15 @@ const globals = {
|
|
7487
7494
|
};
|
7488
7495
|
const vars$v = getThemeVars(globals);
|
7489
7496
|
|
7490
|
-
const globalRefs$
|
7497
|
+
const globalRefs$h = getThemeRefs(globals);
|
7491
7498
|
const compVars$4 = ButtonClass.cssVarList;
|
7492
7499
|
|
7493
7500
|
const mode = {
|
7494
|
-
primary: globalRefs$
|
7495
|
-
secondary: globalRefs$
|
7496
|
-
success: globalRefs$
|
7497
|
-
error: globalRefs$
|
7498
|
-
surface: globalRefs$
|
7501
|
+
primary: globalRefs$h.colors.primary,
|
7502
|
+
secondary: globalRefs$h.colors.secondary,
|
7503
|
+
success: globalRefs$h.colors.success,
|
7504
|
+
error: globalRefs$h.colors.error,
|
7505
|
+
surface: globalRefs$h.colors.surface,
|
7499
7506
|
};
|
7500
7507
|
|
7501
7508
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$D);
|
@@ -7503,15 +7510,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
7503
7510
|
const button = {
|
7504
7511
|
...helperTheme$3,
|
7505
7512
|
|
7506
|
-
[compVars$4.fontFamily]: globalRefs$
|
7513
|
+
[compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
|
7507
7514
|
|
7508
7515
|
[compVars$4.cursor]: 'pointer',
|
7509
7516
|
[compVars$4.hostHeight]: '3em',
|
7510
7517
|
[compVars$4.hostWidth]: 'auto',
|
7511
|
-
[compVars$4.hostDirection]: globalRefs$
|
7518
|
+
[compVars$4.hostDirection]: globalRefs$h.direction,
|
7512
7519
|
|
7513
|
-
[compVars$4.borderRadius]: globalRefs$
|
7514
|
-
[compVars$4.borderWidth]: globalRefs$
|
7520
|
+
[compVars$4.borderRadius]: globalRefs$h.radius.sm,
|
7521
|
+
[compVars$4.borderWidth]: globalRefs$h.border.xs,
|
7515
7522
|
[compVars$4.borderStyle]: 'solid',
|
7516
7523
|
[compVars$4.borderColor]: 'transparent',
|
7517
7524
|
|
@@ -7547,10 +7554,10 @@ const button = {
|
|
7547
7554
|
},
|
7548
7555
|
|
7549
7556
|
_disabled: {
|
7550
|
-
[helperVars$3.main]: globalRefs$
|
7551
|
-
[helperVars$3.dark]: globalRefs$
|
7552
|
-
[helperVars$3.light]: globalRefs$
|
7553
|
-
[helperVars$3.contrast]: globalRefs$
|
7557
|
+
[helperVars$3.main]: globalRefs$h.colors.surface.main,
|
7558
|
+
[helperVars$3.dark]: globalRefs$h.colors.surface.dark,
|
7559
|
+
[helperVars$3.light]: globalRefs$h.colors.surface.light,
|
7560
|
+
[helperVars$3.contrast]: globalRefs$h.colors.surface.contrast,
|
7554
7561
|
},
|
7555
7562
|
|
7556
7563
|
variant: {
|
@@ -7592,7 +7599,7 @@ const button = {
|
|
7592
7599
|
},
|
7593
7600
|
|
7594
7601
|
_focused: {
|
7595
|
-
[compVars$4.outlineColor]: globalRefs$
|
7602
|
+
[compVars$4.outlineColor]: globalRefs$h.colors.surface.main,
|
7596
7603
|
},
|
7597
7604
|
};
|
7598
7605
|
|
@@ -7608,21 +7615,21 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
7608
7615
|
});
|
7609
7616
|
|
7610
7617
|
const componentName$3 = getComponentName('input-wrapper');
|
7611
|
-
const globalRefs$
|
7618
|
+
const globalRefs$g = getThemeRefs(globals);
|
7612
7619
|
|
7613
7620
|
const [theme$1, refs, vars$t] = createHelperVars(
|
7614
7621
|
{
|
7615
|
-
labelTextColor: globalRefs$
|
7616
|
-
valueTextColor: globalRefs$
|
7617
|
-
placeholderTextColor: globalRefs$
|
7622
|
+
labelTextColor: globalRefs$g.colors.surface.contrast,
|
7623
|
+
valueTextColor: globalRefs$g.colors.surface.contrast,
|
7624
|
+
placeholderTextColor: globalRefs$g.colors.surface.main,
|
7618
7625
|
requiredIndicator: "'*'",
|
7619
|
-
errorMessageTextColor: globalRefs$
|
7626
|
+
errorMessageTextColor: globalRefs$g.colors.error.main,
|
7620
7627
|
|
7621
|
-
borderWidth: globalRefs$
|
7622
|
-
borderRadius: globalRefs$
|
7628
|
+
borderWidth: globalRefs$g.border.xs,
|
7629
|
+
borderRadius: globalRefs$g.radius.xs,
|
7623
7630
|
borderColor: 'transparent',
|
7624
7631
|
|
7625
|
-
outlineWidth: globalRefs$
|
7632
|
+
outlineWidth: globalRefs$g.border.sm,
|
7626
7633
|
outlineStyle: 'solid',
|
7627
7634
|
outlineColor: 'transparent',
|
7628
7635
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7633,11 +7640,11 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
7633
7640
|
horizontalPadding: '0.5em',
|
7634
7641
|
verticalPadding: '0.5em',
|
7635
7642
|
|
7636
|
-
backgroundColor: globalRefs$
|
7643
|
+
backgroundColor: globalRefs$g.colors.surface.light,
|
7637
7644
|
|
7638
|
-
fontFamily: globalRefs$
|
7645
|
+
fontFamily: globalRefs$g.fonts.font1.family,
|
7639
7646
|
|
7640
|
-
direction: globalRefs$
|
7647
|
+
direction: globalRefs$g.direction,
|
7641
7648
|
|
7642
7649
|
size: {
|
7643
7650
|
xs: { fontSize: '12px' },
|
@@ -7651,27 +7658,27 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
7651
7658
|
},
|
7652
7659
|
|
7653
7660
|
_focused: {
|
7654
|
-
outlineColor: globalRefs$
|
7661
|
+
outlineColor: globalRefs$g.colors.surface.main,
|
7655
7662
|
_invalid: {
|
7656
|
-
outlineColor: globalRefs$
|
7663
|
+
outlineColor: globalRefs$g.colors.error.main,
|
7657
7664
|
},
|
7658
7665
|
},
|
7659
7666
|
|
7660
7667
|
_bordered: {
|
7661
|
-
outlineWidth: globalRefs$
|
7662
|
-
borderColor: globalRefs$
|
7668
|
+
outlineWidth: globalRefs$g.border.xs,
|
7669
|
+
borderColor: globalRefs$g.colors.surface.main,
|
7663
7670
|
borderStyle: 'solid',
|
7664
7671
|
_invalid: {
|
7665
|
-
borderColor: globalRefs$
|
7672
|
+
borderColor: globalRefs$g.colors.error.main,
|
7666
7673
|
},
|
7667
7674
|
},
|
7668
7675
|
|
7669
7676
|
_disabled: {
|
7670
|
-
labelTextColor: globalRefs$
|
7671
|
-
borderColor: globalRefs$
|
7672
|
-
valueTextColor: globalRefs$
|
7673
|
-
placeholderTextColor: globalRefs$
|
7674
|
-
backgroundColor: globalRefs$
|
7677
|
+
labelTextColor: globalRefs$g.colors.surface.main,
|
7678
|
+
borderColor: globalRefs$g.colors.surface.main,
|
7679
|
+
valueTextColor: globalRefs$g.colors.surface.dark,
|
7680
|
+
placeholderTextColor: globalRefs$g.colors.surface.dark,
|
7681
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
7675
7682
|
},
|
7676
7683
|
},
|
7677
7684
|
componentName$3
|
@@ -7717,7 +7724,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
7717
7724
|
vars: vars$s
|
7718
7725
|
});
|
7719
7726
|
|
7720
|
-
const globalRefs$
|
7727
|
+
const globalRefs$f = getThemeRefs(globals);
|
7721
7728
|
const vars$r = PasswordClass.cssVarList;
|
7722
7729
|
|
7723
7730
|
const password = {
|
@@ -7741,7 +7748,7 @@ const password = {
|
|
7741
7748
|
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7742
7749
|
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7743
7750
|
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7744
|
-
[vars$r.revealButtonOffset]: globalRefs$
|
7751
|
+
[vars$r.revealButtonOffset]: globalRefs$f.spacing.md,
|
7745
7752
|
[vars$r.revealButtonSize]: refs.toggleButtonSize,
|
7746
7753
|
};
|
7747
7754
|
|
@@ -7815,7 +7822,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
7815
7822
|
vars: vars$p
|
7816
7823
|
});
|
7817
7824
|
|
7818
|
-
const globalRefs$
|
7825
|
+
const globalRefs$e = getThemeRefs(globals);
|
7819
7826
|
const vars$o = TextAreaClass.cssVarList;
|
7820
7827
|
|
7821
7828
|
const textArea = {
|
@@ -7842,7 +7849,7 @@ const textArea = {
|
|
7842
7849
|
[vars$o.inputMinHeight]: '5em',
|
7843
7850
|
|
7844
7851
|
_disabled: {
|
7845
|
-
[vars$o.inputBackgroundColor]: globalRefs$
|
7852
|
+
[vars$o.inputBackgroundColor]: globalRefs$e.colors.surface.light,
|
7846
7853
|
},
|
7847
7854
|
|
7848
7855
|
_readonly: {
|
@@ -7899,7 +7906,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
7899
7906
|
const knobMargin = '2px';
|
7900
7907
|
const checkboxHeight = '1.25em';
|
7901
7908
|
|
7902
|
-
const globalRefs$
|
7909
|
+
const globalRefs$d = getThemeRefs(globals);
|
7903
7910
|
const vars$m = SwitchToggleClass.cssVarList;
|
7904
7911
|
|
7905
7912
|
const switchToggle = {
|
@@ -7917,7 +7924,7 @@ const switchToggle = {
|
|
7917
7924
|
[vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7918
7925
|
[vars$m.trackBorderColor]: refs.borderColor,
|
7919
7926
|
[vars$m.trackBackgroundColor]: 'none',
|
7920
|
-
[vars$m.trackBorderRadius]: globalRefs$
|
7927
|
+
[vars$m.trackBorderRadius]: globalRefs$d.radius.md,
|
7921
7928
|
[vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7922
7929
|
[vars$m.trackHeight]: checkboxHeight,
|
7923
7930
|
|
@@ -7944,19 +7951,19 @@ const switchToggle = {
|
|
7944
7951
|
},
|
7945
7952
|
|
7946
7953
|
_disabled: {
|
7947
|
-
[vars$m.knobColor]: globalRefs$
|
7948
|
-
[vars$m.trackBorderColor]: globalRefs$
|
7949
|
-
[vars$m.trackBackgroundColor]: globalRefs$
|
7954
|
+
[vars$m.knobColor]: globalRefs$d.colors.surface.light,
|
7955
|
+
[vars$m.trackBorderColor]: globalRefs$d.colors.surface.main,
|
7956
|
+
[vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
|
7950
7957
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
7951
7958
|
_checked: {
|
7952
|
-
[vars$m.knobColor]: globalRefs$
|
7953
|
-
[vars$m.trackBackgroundColor]: globalRefs$
|
7959
|
+
[vars$m.knobColor]: globalRefs$d.colors.surface.light,
|
7960
|
+
[vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
|
7954
7961
|
},
|
7955
7962
|
},
|
7956
7963
|
|
7957
7964
|
_invalid: {
|
7958
|
-
[vars$m.trackBorderColor]: globalRefs$
|
7959
|
-
[vars$m.knobColor]: globalRefs$
|
7965
|
+
[vars$m.trackBorderColor]: globalRefs$d.colors.error.main,
|
7966
|
+
[vars$m.knobColor]: globalRefs$d.colors.error.main,
|
7960
7967
|
},
|
7961
7968
|
};
|
7962
7969
|
|
@@ -7966,7 +7973,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
7966
7973
|
vars: vars$m
|
7967
7974
|
});
|
7968
7975
|
|
7969
|
-
const globalRefs$
|
7976
|
+
const globalRefs$c = getThemeRefs(globals);
|
7970
7977
|
|
7971
7978
|
const compVars$3 = ContainerClass.cssVarList;
|
7972
7979
|
|
@@ -7998,8 +8005,8 @@ const container = {
|
|
7998
8005
|
|
7999
8006
|
[compVars$3.hostWidth]: '100%',
|
8000
8007
|
[compVars$3.boxShadow]: 'none',
|
8001
|
-
[compVars$3.backgroundColor]: globalRefs$
|
8002
|
-
[compVars$3.color]: globalRefs$
|
8008
|
+
[compVars$3.backgroundColor]: globalRefs$c.colors.surface.light,
|
8009
|
+
[compVars$3.color]: globalRefs$c.colors.surface.contrast,
|
8003
8010
|
[compVars$3.borderRadius]: '0px',
|
8004
8011
|
|
8005
8012
|
verticalPadding: {
|
@@ -8046,30 +8053,30 @@ const container = {
|
|
8046
8053
|
|
8047
8054
|
shadow: {
|
8048
8055
|
sm: {
|
8049
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8056
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.sm} ${shadowColor$1}`,
|
8050
8057
|
},
|
8051
8058
|
md: {
|
8052
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8059
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.md} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.md} ${shadowColor$1}`,
|
8053
8060
|
},
|
8054
8061
|
lg: {
|
8055
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8062
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.lg} ${shadowColor$1}`,
|
8056
8063
|
},
|
8057
8064
|
xl: {
|
8058
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8065
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.xl} ${shadowColor$1}`,
|
8059
8066
|
},
|
8060
8067
|
'2xl': {
|
8061
8068
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
8062
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8069
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide['2xl']} ${shadowColor$1}`,
|
8063
8070
|
},
|
8064
8071
|
},
|
8065
8072
|
|
8066
8073
|
borderRadius: {
|
8067
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
8068
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
8069
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
8070
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
8071
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
8072
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
8074
|
+
sm: { [compVars$3.borderRadius]: globalRefs$c.radius.sm },
|
8075
|
+
md: { [compVars$3.borderRadius]: globalRefs$c.radius.md },
|
8076
|
+
lg: { [compVars$3.borderRadius]: globalRefs$c.radius.lg },
|
8077
|
+
xl: { [compVars$3.borderRadius]: globalRefs$c.radius.xl },
|
8078
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$c.radius['2xl'] },
|
8079
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$c.radius['3xl'] },
|
8073
8080
|
},
|
8074
8081
|
};
|
8075
8082
|
|
@@ -8108,64 +8115,64 @@ var totpImage = /*#__PURE__*/Object.freeze({
|
|
8108
8115
|
vars: vars$j
|
8109
8116
|
});
|
8110
8117
|
|
8111
|
-
const globalRefs$
|
8118
|
+
const globalRefs$b = getThemeRefs(globals);
|
8112
8119
|
const vars$i = TextClass.cssVarList;
|
8113
8120
|
|
8114
8121
|
const text = {
|
8115
|
-
[vars$i.hostDirection]: globalRefs$
|
8122
|
+
[vars$i.hostDirection]: globalRefs$b.direction,
|
8116
8123
|
[vars$i.textLineHeight]: '1.35em',
|
8117
8124
|
[vars$i.textAlign]: 'left',
|
8118
|
-
[vars$i.textColor]: globalRefs$
|
8125
|
+
[vars$i.textColor]: globalRefs$b.colors.surface.dark,
|
8119
8126
|
variant: {
|
8120
8127
|
h1: {
|
8121
|
-
[vars$i.fontSize]: globalRefs$
|
8122
|
-
[vars$i.fontWeight]: globalRefs$
|
8123
|
-
[vars$i.fontFamily]: globalRefs$
|
8128
|
+
[vars$i.fontSize]: globalRefs$b.typography.h1.size,
|
8129
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h1.weight,
|
8130
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h1.font,
|
8124
8131
|
},
|
8125
8132
|
h2: {
|
8126
|
-
[vars$i.fontSize]: globalRefs$
|
8127
|
-
[vars$i.fontWeight]: globalRefs$
|
8128
|
-
[vars$i.fontFamily]: globalRefs$
|
8133
|
+
[vars$i.fontSize]: globalRefs$b.typography.h2.size,
|
8134
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h2.weight,
|
8135
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h2.font,
|
8129
8136
|
},
|
8130
8137
|
h3: {
|
8131
|
-
[vars$i.fontSize]: globalRefs$
|
8132
|
-
[vars$i.fontWeight]: globalRefs$
|
8133
|
-
[vars$i.fontFamily]: globalRefs$
|
8138
|
+
[vars$i.fontSize]: globalRefs$b.typography.h3.size,
|
8139
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h3.weight,
|
8140
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h3.font,
|
8134
8141
|
},
|
8135
8142
|
subtitle1: {
|
8136
|
-
[vars$i.fontSize]: globalRefs$
|
8137
|
-
[vars$i.fontWeight]: globalRefs$
|
8138
|
-
[vars$i.fontFamily]: globalRefs$
|
8143
|
+
[vars$i.fontSize]: globalRefs$b.typography.subtitle1.size,
|
8144
|
+
[vars$i.fontWeight]: globalRefs$b.typography.subtitle1.weight,
|
8145
|
+
[vars$i.fontFamily]: globalRefs$b.typography.subtitle1.font,
|
8139
8146
|
},
|
8140
8147
|
subtitle2: {
|
8141
|
-
[vars$i.fontSize]: globalRefs$
|
8142
|
-
[vars$i.fontWeight]: globalRefs$
|
8143
|
-
[vars$i.fontFamily]: globalRefs$
|
8148
|
+
[vars$i.fontSize]: globalRefs$b.typography.subtitle2.size,
|
8149
|
+
[vars$i.fontWeight]: globalRefs$b.typography.subtitle2.weight,
|
8150
|
+
[vars$i.fontFamily]: globalRefs$b.typography.subtitle2.font,
|
8144
8151
|
},
|
8145
8152
|
body1: {
|
8146
|
-
[vars$i.fontSize]: globalRefs$
|
8147
|
-
[vars$i.fontWeight]: globalRefs$
|
8148
|
-
[vars$i.fontFamily]: globalRefs$
|
8153
|
+
[vars$i.fontSize]: globalRefs$b.typography.body1.size,
|
8154
|
+
[vars$i.fontWeight]: globalRefs$b.typography.body1.weight,
|
8155
|
+
[vars$i.fontFamily]: globalRefs$b.typography.body1.font,
|
8149
8156
|
},
|
8150
8157
|
body2: {
|
8151
|
-
[vars$i.fontSize]: globalRefs$
|
8152
|
-
[vars$i.fontWeight]: globalRefs$
|
8153
|
-
[vars$i.fontFamily]: globalRefs$
|
8158
|
+
[vars$i.fontSize]: globalRefs$b.typography.body2.size,
|
8159
|
+
[vars$i.fontWeight]: globalRefs$b.typography.body2.weight,
|
8160
|
+
[vars$i.fontFamily]: globalRefs$b.typography.body2.font,
|
8154
8161
|
},
|
8155
8162
|
},
|
8156
8163
|
|
8157
8164
|
mode: {
|
8158
8165
|
primary: {
|
8159
|
-
[vars$i.textColor]: globalRefs$
|
8166
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
8160
8167
|
},
|
8161
8168
|
secondary: {
|
8162
|
-
[vars$i.textColor]: globalRefs$
|
8169
|
+
[vars$i.textColor]: globalRefs$b.colors.secondary.main,
|
8163
8170
|
},
|
8164
8171
|
error: {
|
8165
|
-
[vars$i.textColor]: globalRefs$
|
8172
|
+
[vars$i.textColor]: globalRefs$b.colors.error.main,
|
8166
8173
|
},
|
8167
8174
|
success: {
|
8168
|
-
[vars$i.textColor]: globalRefs$
|
8175
|
+
[vars$i.textColor]: globalRefs$b.colors.success.main,
|
8169
8176
|
},
|
8170
8177
|
},
|
8171
8178
|
|
@@ -8198,14 +8205,14 @@ var text$1 = /*#__PURE__*/Object.freeze({
|
|
8198
8205
|
vars: vars$i
|
8199
8206
|
});
|
8200
8207
|
|
8201
|
-
const globalRefs$
|
8208
|
+
const globalRefs$a = getThemeRefs(globals);
|
8202
8209
|
const vars$h = LinkClass.cssVarList;
|
8203
8210
|
|
8204
8211
|
const link = {
|
8205
|
-
[vars$h.hostDirection]: globalRefs$
|
8212
|
+
[vars$h.hostDirection]: globalRefs$a.direction,
|
8206
8213
|
[vars$h.cursor]: 'pointer',
|
8207
8214
|
|
8208
|
-
[vars$h.textColor]: globalRefs$
|
8215
|
+
[vars$h.textColor]: globalRefs$a.colors.primary.main,
|
8209
8216
|
|
8210
8217
|
textAlign: {
|
8211
8218
|
right: { [vars$h.textAlign]: 'right' },
|
@@ -8219,16 +8226,16 @@ const link = {
|
|
8219
8226
|
|
8220
8227
|
mode: {
|
8221
8228
|
primary: {
|
8222
|
-
[vars$h.textColor]: globalRefs$
|
8229
|
+
[vars$h.textColor]: globalRefs$a.colors.primary.main,
|
8223
8230
|
},
|
8224
8231
|
secondary: {
|
8225
|
-
[vars$h.textColor]: globalRefs$
|
8232
|
+
[vars$h.textColor]: globalRefs$a.colors.secondary.main,
|
8226
8233
|
},
|
8227
8234
|
error: {
|
8228
|
-
[vars$h.textColor]: globalRefs$
|
8235
|
+
[vars$h.textColor]: globalRefs$a.colors.error.main,
|
8229
8236
|
},
|
8230
8237
|
success: {
|
8231
|
-
[vars$h.textColor]: globalRefs$
|
8238
|
+
[vars$h.textColor]: globalRefs$a.colors.success.main,
|
8232
8239
|
},
|
8233
8240
|
},
|
8234
8241
|
};
|
@@ -8239,7 +8246,7 @@ var link$1 = /*#__PURE__*/Object.freeze({
|
|
8239
8246
|
vars: vars$h
|
8240
8247
|
});
|
8241
8248
|
|
8242
|
-
const globalRefs$
|
8249
|
+
const globalRefs$9 = getThemeRefs(globals);
|
8243
8250
|
const compVars$2 = DividerClass.cssVarList;
|
8244
8251
|
|
8245
8252
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -8253,12 +8260,12 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8253
8260
|
const divider = {
|
8254
8261
|
...helperTheme$1,
|
8255
8262
|
|
8256
|
-
[compVars$2.hostDirection]: globalRefs$
|
8263
|
+
[compVars$2.hostDirection]: globalRefs$9.direction,
|
8257
8264
|
[compVars$2.alignItems]: 'center',
|
8258
8265
|
[compVars$2.flexDirection]: 'row',
|
8259
8266
|
[compVars$2.alignSelf]: 'stretch',
|
8260
8267
|
[compVars$2.hostWidth]: '100%',
|
8261
|
-
[compVars$2.stripeColor]: globalRefs$
|
8268
|
+
[compVars$2.stripeColor]: globalRefs$9.colors.surface.main,
|
8262
8269
|
[compVars$2.stripeColorOpacity]: '0.5',
|
8263
8270
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8264
8271
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -8319,17 +8326,17 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
8319
8326
|
vars: vars$f
|
8320
8327
|
});
|
8321
8328
|
|
8322
|
-
const globalRefs$
|
8329
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8323
8330
|
const vars$e = LoaderLinearClass.cssVarList;
|
8324
8331
|
|
8325
8332
|
const loaderLinear = {
|
8326
8333
|
[vars$e.hostDisplay]: 'inline-block',
|
8327
8334
|
[vars$e.hostWidth]: '100%',
|
8328
8335
|
|
8329
|
-
[vars$e.barColor]: globalRefs$
|
8336
|
+
[vars$e.barColor]: globalRefs$8.colors.surface.contrast,
|
8330
8337
|
[vars$e.barWidth]: '20%',
|
8331
8338
|
|
8332
|
-
[vars$e.barBackgroundColor]: globalRefs$
|
8339
|
+
[vars$e.barBackgroundColor]: globalRefs$8.colors.surface.main,
|
8333
8340
|
[vars$e.barBorderRadius]: '4px',
|
8334
8341
|
|
8335
8342
|
[vars$e.animationDuration]: '2s',
|
@@ -8346,10 +8353,10 @@ const loaderLinear = {
|
|
8346
8353
|
|
8347
8354
|
mode: {
|
8348
8355
|
primary: {
|
8349
|
-
[vars$e.barColor]: globalRefs$
|
8356
|
+
[vars$e.barColor]: globalRefs$8.colors.primary.main,
|
8350
8357
|
},
|
8351
8358
|
secondary: {
|
8352
|
-
[vars$e.barColor]: globalRefs$
|
8359
|
+
[vars$e.barColor]: globalRefs$8.colors.secondary.main,
|
8353
8360
|
},
|
8354
8361
|
},
|
8355
8362
|
|
@@ -8364,18 +8371,18 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
8364
8371
|
vars: vars$e
|
8365
8372
|
});
|
8366
8373
|
|
8367
|
-
const globalRefs$
|
8374
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8368
8375
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
8369
8376
|
|
8370
8377
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8371
8378
|
{
|
8372
|
-
spinnerColor: globalRefs$
|
8379
|
+
spinnerColor: globalRefs$7.colors.surface.contrast,
|
8373
8380
|
mode: {
|
8374
8381
|
primary: {
|
8375
|
-
spinnerColor: globalRefs$
|
8382
|
+
spinnerColor: globalRefs$7.colors.primary.main,
|
8376
8383
|
},
|
8377
8384
|
secondary: {
|
8378
|
-
spinnerColor: globalRefs$
|
8385
|
+
spinnerColor: globalRefs$7.colors.secondary.main,
|
8379
8386
|
},
|
8380
8387
|
},
|
8381
8388
|
},
|
@@ -8419,7 +8426,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
8419
8426
|
vars: vars$d
|
8420
8427
|
});
|
8421
8428
|
|
8422
|
-
const globalRefs$
|
8429
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8423
8430
|
const vars$c = ComboBoxClass.cssVarList;
|
8424
8431
|
|
8425
8432
|
const comboBox = {
|
@@ -8443,12 +8450,12 @@ const comboBox = {
|
|
8443
8450
|
[vars$c.inputBackgroundColor]: refs.backgroundColor,
|
8444
8451
|
[vars$c.inputHorizontalPadding]: refs.horizontalPadding,
|
8445
8452
|
[vars$c.inputHeight]: refs.inputHeight,
|
8446
|
-
[vars$c.inputDropdownButtonColor]: globalRefs$
|
8453
|
+
[vars$c.inputDropdownButtonColor]: globalRefs$6.colors.surface.contrast,
|
8447
8454
|
[vars$c.inputDropdownButtonCursor]: 'pointer',
|
8448
8455
|
[vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8449
|
-
[vars$c.inputDropdownButtonOffset]: globalRefs$
|
8450
|
-
[vars$c.overlayItemPaddingInlineStart]: globalRefs$
|
8451
|
-
[vars$c.overlayItemPaddingInlineEnd]: globalRefs$
|
8456
|
+
[vars$c.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
|
8457
|
+
[vars$c.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
|
8458
|
+
[vars$c.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
|
8452
8459
|
|
8453
8460
|
_readonly: {
|
8454
8461
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
@@ -8641,26 +8648,26 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
8641
8648
|
vars: vars$7
|
8642
8649
|
});
|
8643
8650
|
|
8644
|
-
const globalRefs$
|
8651
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8645
8652
|
|
8646
8653
|
const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
|
8647
8654
|
|
8648
8655
|
const buttonSelectionGroupItem = {
|
8649
8656
|
[vars$6.hostDirection]: 'inherit',
|
8650
|
-
[vars$6.backgroundColor]: globalRefs$
|
8651
|
-
[vars$6.labelTextColor]: globalRefs$
|
8652
|
-
[vars$6.borderColor]: globalRefs$
|
8657
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.light,
|
8658
|
+
[vars$6.labelTextColor]: globalRefs$5.colors.surface.contrast,
|
8659
|
+
[vars$6.borderColor]: globalRefs$5.colors.surface.main,
|
8653
8660
|
[vars$6.borderStyle]: 'solid',
|
8654
|
-
[vars$6.borderRadius]: globalRefs$
|
8661
|
+
[vars$6.borderRadius]: globalRefs$5.radius.sm,
|
8655
8662
|
|
8656
8663
|
_hover: {
|
8657
8664
|
[vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8658
8665
|
},
|
8659
8666
|
|
8660
8667
|
_selected: {
|
8661
|
-
[vars$6.borderColor]: globalRefs$
|
8662
|
-
[vars$6.backgroundColor]: globalRefs$
|
8663
|
-
[vars$6.labelTextColor]: globalRefs$
|
8668
|
+
[vars$6.borderColor]: globalRefs$5.colors.surface.contrast,
|
8669
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.contrast,
|
8670
|
+
[vars$6.labelTextColor]: globalRefs$5.colors.surface.light,
|
8664
8671
|
},
|
8665
8672
|
};
|
8666
8673
|
|
@@ -8670,7 +8677,7 @@ var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8670
8677
|
vars: vars$6
|
8671
8678
|
});
|
8672
8679
|
|
8673
|
-
const globalRefs$
|
8680
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8674
8681
|
const vars$5 = ButtonSelectionGroupClass.cssVarList;
|
8675
8682
|
|
8676
8683
|
const buttonSelectionGroup = {
|
@@ -8679,7 +8686,7 @@ const buttonSelectionGroup = {
|
|
8679
8686
|
[vars$5.labelTextColor]: refs.labelTextColor,
|
8680
8687
|
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
8681
8688
|
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
8682
|
-
[vars$5.itemsSpacing]: globalRefs$
|
8689
|
+
[vars$5.itemsSpacing]: globalRefs$4.spacing.sm,
|
8683
8690
|
[vars$5.hostWidth]: refs.width,
|
8684
8691
|
};
|
8685
8692
|
|
@@ -8767,7 +8774,10 @@ const ModalClass = compose(
|
|
8767
8774
|
property: 'display',
|
8768
8775
|
important: true,
|
8769
8776
|
},
|
8770
|
-
backgroundColor:
|
8777
|
+
backgroundColor: [
|
8778
|
+
{ selector: () => '::part(content)', property: 'background-color' },
|
8779
|
+
{ selector: () => '::part(overlay)', property: 'background-color' },
|
8780
|
+
],
|
8771
8781
|
width: { selector: () => '::part(overlay)', property: 'width' },
|
8772
8782
|
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8773
8783
|
},
|
@@ -8789,9 +8799,12 @@ const ModalClass = compose(
|
|
8789
8799
|
})
|
8790
8800
|
);
|
8791
8801
|
|
8802
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8803
|
+
|
8792
8804
|
const compVars = ModalClass.cssVarList;
|
8793
8805
|
|
8794
8806
|
const modal = {
|
8807
|
+
[compVars.overlayBackgroundColor]: globalRefs$3.colors.surface.light,
|
8795
8808
|
[compVars.overlayShadow]: 'none',
|
8796
8809
|
[compVars.overlayWidth]: '700px',
|
8797
8810
|
};
|
@@ -8813,12 +8826,13 @@ const grid = {
|
|
8813
8826
|
[vars$3.hostWidth]: '100%',
|
8814
8827
|
[vars$3.hostHeight]: '100%',
|
8815
8828
|
[vars$3.hostMinHeight]: '400px',
|
8829
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.surface.light,
|
8816
8830
|
|
8817
8831
|
[vars$3.fontSize]: refs.fontSize,
|
8818
8832
|
[vars$3.fontFamily]: refs.fontFamily,
|
8819
8833
|
|
8820
|
-
[vars$3.sortIndicatorsColor]: globalRefs$2.colors.
|
8821
|
-
[vars$3.activeSortIndicator]: globalRefs$2.colors.
|
8834
|
+
[vars$3.sortIndicatorsColor]: globalRefs$2.colors.surface.main,
|
8835
|
+
[vars$3.activeSortIndicator]: globalRefs$2.colors.surface.dark,
|
8822
8836
|
[vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
|
8823
8837
|
|
8824
8838
|
[vars$3.inputBorderWidth]: refs.borderWidth,
|
@@ -8826,11 +8840,11 @@ const grid = {
|
|
8826
8840
|
[vars$3.inputBorderRadius]: refs.borderRadius,
|
8827
8841
|
[vars$3.inputBorderColor]: 'transparent',
|
8828
8842
|
|
8829
|
-
[vars$3.
|
8843
|
+
[vars$3.headerRowTextColor]: globalRefs$2.colors.surface.dark,
|
8844
|
+
[vars$3.separatorColor]: globalRefs$2.colors.surface.main,
|
8830
8845
|
|
8831
8846
|
[vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
|
8832
|
-
[vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.
|
8833
|
-
[vars$3.selectedTextColor]: globalRefs$2.colors.primary.contrast,
|
8847
|
+
[vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.contrast,
|
8834
8848
|
|
8835
8849
|
_bordered: {
|
8836
8850
|
[vars$3.inputBorderColor]: refs.borderColor,
|
@@ -8968,9 +8982,9 @@ const notification = {
|
|
8968
8982
|
[vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
|
8969
8983
|
[vars$2.textColor]: globalRefs$1.colors.surface.contrast,
|
8970
8984
|
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
|
8971
|
-
[vars$2.verticalPadding]: '0.
|
8972
|
-
[vars$2.horizontalPadding]: '
|
8973
|
-
[vars$2.borderRadius]: globalRefs$1.radius.
|
8985
|
+
[vars$2.verticalPadding]: '0.625em',
|
8986
|
+
[vars$2.horizontalPadding]: '1.5em',
|
8987
|
+
[vars$2.borderRadius]: globalRefs$1.radius.xs,
|
8974
8988
|
|
8975
8989
|
_bordered: {
|
8976
8990
|
[vars$2.borderWidth]: globalRefs$1.border.sm,
|
@@ -9076,7 +9090,7 @@ const badge = {
|
|
9076
9090
|
[vars$1.horizontalPadding]: '0.5em',
|
9077
9091
|
|
9078
9092
|
[vars$1.borderWidth]: globalRefs.border.xs,
|
9079
|
-
[vars$1.borderRadius]: globalRefs.radius.
|
9093
|
+
[vars$1.borderRadius]: globalRefs.radius.xs,
|
9080
9094
|
[vars$1.borderColor]: 'transparent',
|
9081
9095
|
[vars$1.borderStyle]: 'solid',
|
9082
9096
|
|
@@ -9111,9 +9125,9 @@ const badge = {
|
|
9111
9125
|
},
|
9112
9126
|
},
|
9113
9127
|
error: {
|
9114
|
-
[vars$1.
|
9128
|
+
[vars$1.textColor]: globalRefs.colors.error.main,
|
9115
9129
|
_bordered: {
|
9116
|
-
[vars$1.
|
9130
|
+
[vars$1.borderColor]: globalRefs.colors.error.light,
|
9117
9131
|
},
|
9118
9132
|
},
|
9119
9133
|
success: {
|