@descope/web-components-ui 1.0.272 → 1.0.274
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +128 -90
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +176 -93
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2481.js +1 -1
- package/dist/umd/7044.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-notification-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +5 -0
- package/src/components/descope-grid/GridClass.js +7 -5
- package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js +1 -0
- package/src/components/descope-notification/NotificationClass.js +3 -0
- package/src/components/descope-password/PasswordClass.js +2 -4
- package/src/darkTheme.js +48 -0
- package/src/helpers/themeHelpers/colorsHelpers.js +2 -0
- package/src/index.d.ts +2 -2
- package/src/index.js +1 -0
- package/src/theme/components/badge.js +1 -1
- package/src/theme/components/button.js +7 -5
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +9 -4
- package/src/theme/components/comboBox.js +1 -1
- package/src/theme/components/container.js +1 -1
- package/src/theme/components/divider.js +1 -1
- package/src/theme/components/grid.js +10 -10
- package/src/theme/components/inputWrapper.js +9 -9
- package/src/theme/components/loader/loaderLinear.js +1 -1
- package/src/theme/components/modal.js +1 -1
- package/src/theme/components/multiSelectComboBox.js +2 -2
- package/src/theme/components/password.js +1 -0
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +2 -2
- package/src/theme/components/textArea.js +0 -7
- package/src/theme/globals.js +34 -8
package/dist/index.d.ts
CHANGED
@@ -7,8 +7,8 @@ export {
|
|
7
7
|
componentsThemeManager,
|
8
8
|
} from './helpers/themeHelpers';
|
9
9
|
export { genColor } from './helpers/themeHelpers/colorsHelpers';
|
10
|
-
export { defaultTheme, themeVars } from './
|
11
|
-
|
10
|
+
export { defaultTheme, themeVars } from './defaultTheme';
|
11
|
+
export { default as darkTheme } from './darkTheme';
|
12
12
|
export { ButtonClass } from './components/descope-button';
|
13
13
|
export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
|
14
14
|
export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';
|
package/dist/index.esm.js
CHANGED
@@ -3173,10 +3173,7 @@ const PasswordClass = compose(
|
|
3173
3173
|
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
3174
3174
|
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
3175
3175
|
|
3176
|
-
inputValueTextColor:
|
3177
|
-
{ ...inputElement$2, property: 'color' },
|
3178
|
-
{ ...revealButtonIcon, property: 'color' },
|
3179
|
-
],
|
3176
|
+
inputValueTextColor: { ...inputElement$2, property: 'color' },
|
3180
3177
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
3181
3178
|
|
3182
3179
|
revealButtonOffset: [
|
@@ -3184,6 +3181,7 @@ const PasswordClass = compose(
|
|
3184
3181
|
{ ...revealButtonContainer, property: 'margin-left' },
|
3185
3182
|
],
|
3186
3183
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3184
|
+
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
3187
3185
|
},
|
3188
3186
|
}),
|
3189
3187
|
draggableMixin,
|
@@ -6894,6 +6892,7 @@ class RawSelectItem extends createBaseClass({
|
|
6894
6892
|
`;
|
6895
6893
|
|
6896
6894
|
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
6895
|
+
forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
|
6897
6896
|
}
|
6898
6897
|
|
6899
6898
|
handleFocus() {
|
@@ -6942,6 +6941,10 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6942
6941
|
selector: () => ButtonClass.componentName,
|
6943
6942
|
property: ButtonClass.cssVarList.borderRadius,
|
6944
6943
|
},
|
6944
|
+
outlineColor: {
|
6945
|
+
selector: () => ButtonClass.componentName,
|
6946
|
+
property: ButtonClass.cssVarList.outlineColor,
|
6947
|
+
},
|
6945
6948
|
},
|
6946
6949
|
}),
|
6947
6950
|
draggableMixin,
|
@@ -7122,6 +7125,7 @@ class GridTextColumnClass extends GridSortColumn {
|
|
7122
7125
|
_defaultRenderer(cell, _col, model) {
|
7123
7126
|
const content = model.item[this.path] || '';
|
7124
7127
|
cell.innerHTML = content;
|
7128
|
+
cell.title = content;
|
7125
7129
|
if (Array.isArray(content)) {
|
7126
7130
|
cell.innerHTML = content.join(', ');
|
7127
7131
|
}
|
@@ -7451,12 +7455,11 @@ const GridClass = compose(
|
|
7451
7455
|
],
|
7452
7456
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7453
7457
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7454
|
-
|
7455
|
-
|
7456
|
-
|
7457
|
-
|
7458
|
+
borderColor: { ...host$1, property: 'border-color' },
|
7459
|
+
borderWidth: { ...host$1, property: 'border-width' },
|
7460
|
+
borderStyle: { ...host$1, property: 'border-style' },
|
7461
|
+
borderRadius: { ...host$1, property: 'border-radius' },
|
7458
7462
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7459
|
-
selectedTextColor: { ...selectedRow, property: 'color' },
|
7460
7463
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7461
7464
|
separatorColor: [
|
7462
7465
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -7481,6 +7484,9 @@ const GridClass = compose(
|
|
7481
7484
|
}
|
7482
7485
|
vaadin-grid-cell-content {
|
7483
7486
|
display: flex;
|
7487
|
+
}
|
7488
|
+
vaadin-grid::part(selected-row-cell) {
|
7489
|
+
background-image: none;
|
7484
7490
|
}
|
7485
7491
|
`,
|
7486
7492
|
excludeAttrsSync: ['columns', 'tabindex'],
|
@@ -8399,6 +8405,9 @@ const NotificationMixin = (superclass) =>
|
|
8399
8405
|
'descope-notification-container'
|
8400
8406
|
);
|
8401
8407
|
|
8408
|
+
// we are overriding the container position to be absolute because we want to keep in inside the flow/widget boundaries
|
8409
|
+
NotificationMixinClass._container.style.position = 'absolute';
|
8410
|
+
|
8402
8411
|
// we're adding the container to body to avoid Vaadin's container's `openChanged`
|
8403
8412
|
// from breaking when trying to remove it directly from the body.
|
8404
8413
|
document.body.appendChild(NotificationMixinClass._container);
|
@@ -8641,6 +8650,7 @@ const createHelperVars = (theme, prefix) => {
|
|
8641
8650
|
return [res.theme, res.useVars, res.vars];
|
8642
8651
|
};
|
8643
8652
|
|
8653
|
+
// TODO: fix generated colors strategy
|
8644
8654
|
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
8645
8655
|
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
8646
8656
|
const genContrast = (c, percentage = 0.9) => {
|
@@ -8658,6 +8668,7 @@ const genColor = (color) => {
|
|
8658
8668
|
main: mainColor.hex(),
|
8659
8669
|
dark: color.dark || genDark(mainColor),
|
8660
8670
|
light: color.light || genLight(mainColor),
|
8671
|
+
highlight: color.highlight || genLight(mainColor),
|
8661
8672
|
contrast: color.contrast || genContrast(mainColor),
|
8662
8673
|
};
|
8663
8674
|
};
|
@@ -8674,16 +8685,42 @@ const genColors = (colors) => {
|
|
8674
8685
|
|
8675
8686
|
const direction = 'ltr';
|
8676
8687
|
|
8677
|
-
const colors = genColors({
|
8688
|
+
const colors$1 = genColors({
|
8678
8689
|
surface: {
|
8679
|
-
main: '
|
8680
|
-
|
8681
|
-
|
8682
|
-
|
8683
|
-
|
8684
|
-
|
8685
|
-
|
8686
|
-
|
8690
|
+
main: '#ffffff',
|
8691
|
+
dark: '#636c74',
|
8692
|
+
light: '#cfd3d7',
|
8693
|
+
highlight: '#f4f5f6',
|
8694
|
+
contrast: '#181a1c',
|
8695
|
+
},
|
8696
|
+
primary: {
|
8697
|
+
main: '#006af5',
|
8698
|
+
dark: '#004094',
|
8699
|
+
light: '#71aeff',
|
8700
|
+
highlight: '#f0f6ff',
|
8701
|
+
contrast: '#ffffff',
|
8702
|
+
},
|
8703
|
+
secondary: {
|
8704
|
+
main: '#802ed6',
|
8705
|
+
dark: '#6410bc',
|
8706
|
+
light: '#be89f5',
|
8707
|
+
highlight: '#ede7f6',
|
8708
|
+
contrast: '#ffffff',
|
8709
|
+
},
|
8710
|
+
success: {
|
8711
|
+
main: '#008000',
|
8712
|
+
dark: '#005700',
|
8713
|
+
light: '#8bc38b',
|
8714
|
+
highlight: '#f5faf5',
|
8715
|
+
contrast: '#ffffff',
|
8716
|
+
},
|
8717
|
+
error: {
|
8718
|
+
main: '#e21d12',
|
8719
|
+
dark: '#b3170f',
|
8720
|
+
light: '#f4807a',
|
8721
|
+
highlight: '#fef1f1',
|
8722
|
+
contrast: '#ffffff',
|
8723
|
+
},
|
8687
8724
|
});
|
8688
8725
|
|
8689
8726
|
const fonts = {
|
@@ -8812,7 +8849,7 @@ const shadow = {
|
|
8812
8849
|
};
|
8813
8850
|
|
8814
8851
|
const globals = {
|
8815
|
-
colors,
|
8852
|
+
colors: colors$1,
|
8816
8853
|
typography,
|
8817
8854
|
spacing,
|
8818
8855
|
border,
|
@@ -8823,15 +8860,15 @@ const globals = {
|
|
8823
8860
|
};
|
8824
8861
|
const vars$y = getThemeVars(globals);
|
8825
8862
|
|
8826
|
-
const globalRefs$
|
8863
|
+
const globalRefs$h = getThemeRefs(globals);
|
8827
8864
|
const compVars$4 = ButtonClass.cssVarList;
|
8828
8865
|
|
8829
8866
|
const mode = {
|
8830
|
-
primary: globalRefs$
|
8831
|
-
secondary: globalRefs$
|
8832
|
-
success: globalRefs$
|
8833
|
-
error: globalRefs$
|
8834
|
-
surface: globalRefs$
|
8867
|
+
primary: globalRefs$h.colors.primary,
|
8868
|
+
secondary: globalRefs$h.colors.secondary,
|
8869
|
+
success: globalRefs$h.colors.success,
|
8870
|
+
error: globalRefs$h.colors.error,
|
8871
|
+
surface: globalRefs$h.colors.surface,
|
8835
8872
|
};
|
8836
8873
|
|
8837
8874
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
|
@@ -8839,15 +8876,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
8839
8876
|
const button = {
|
8840
8877
|
...helperTheme$3,
|
8841
8878
|
|
8842
|
-
[compVars$4.fontFamily]: globalRefs$
|
8879
|
+
[compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
|
8843
8880
|
|
8844
8881
|
[compVars$4.cursor]: 'pointer',
|
8845
8882
|
[compVars$4.hostHeight]: '3em',
|
8846
8883
|
[compVars$4.hostWidth]: 'auto',
|
8847
|
-
[compVars$4.hostDirection]: globalRefs$
|
8884
|
+
[compVars$4.hostDirection]: globalRefs$h.direction,
|
8848
8885
|
|
8849
|
-
[compVars$4.borderRadius]: globalRefs$
|
8850
|
-
[compVars$4.borderWidth]: globalRefs$
|
8886
|
+
[compVars$4.borderRadius]: globalRefs$h.radius.sm,
|
8887
|
+
[compVars$4.borderWidth]: globalRefs$h.border.xs,
|
8851
8888
|
[compVars$4.borderStyle]: 'solid',
|
8852
8889
|
[compVars$4.borderColor]: 'transparent',
|
8853
8890
|
|
@@ -8890,10 +8927,10 @@ const button = {
|
|
8890
8927
|
},
|
8891
8928
|
|
8892
8929
|
_disabled: {
|
8893
|
-
[helperVars$3.main]: globalRefs$
|
8894
|
-
[helperVars$3.dark]: globalRefs$
|
8895
|
-
[helperVars$3.light]: globalRefs$
|
8896
|
-
[helperVars$3.contrast]: globalRefs$
|
8930
|
+
[helperVars$3.main]: globalRefs$h.colors.surface.light,
|
8931
|
+
[helperVars$3.dark]: globalRefs$h.colors.surface.dark,
|
8932
|
+
[helperVars$3.light]: globalRefs$h.colors.surface.light,
|
8933
|
+
[helperVars$3.contrast]: globalRefs$h.colors.surface.main,
|
8897
8934
|
},
|
8898
8935
|
|
8899
8936
|
variant: {
|
@@ -8913,12 +8950,14 @@ const button = {
|
|
8913
8950
|
|
8914
8951
|
outline: {
|
8915
8952
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8916
|
-
[compVars$4.borderColor]:
|
8953
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
8917
8954
|
_hover: {
|
8918
8955
|
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
8956
|
+
[compVars$4.borderColor]: helperRefs$3.dark,
|
8919
8957
|
},
|
8920
8958
|
_active: {
|
8921
8959
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8960
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
8922
8961
|
},
|
8923
8962
|
},
|
8924
8963
|
|
@@ -8929,13 +8968,13 @@ const button = {
|
|
8929
8968
|
[compVars$4.labelTextDecoration]: 'underline',
|
8930
8969
|
},
|
8931
8970
|
_active: {
|
8932
|
-
[compVars$4.labelTextColor]: helperRefs$3.
|
8971
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8933
8972
|
},
|
8934
8973
|
},
|
8935
8974
|
},
|
8936
8975
|
|
8937
8976
|
_focused: {
|
8938
|
-
[compVars$4.outlineColor]:
|
8977
|
+
[compVars$4.outlineColor]: helperRefs$3.light,
|
8939
8978
|
},
|
8940
8979
|
};
|
8941
8980
|
|
@@ -8951,21 +8990,21 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
8951
8990
|
});
|
8952
8991
|
|
8953
8992
|
const componentName = getComponentName('input-wrapper');
|
8954
|
-
const globalRefs$
|
8993
|
+
const globalRefs$g = getThemeRefs(globals);
|
8955
8994
|
|
8956
8995
|
const [theme$1, refs, vars$w] = createHelperVars(
|
8957
8996
|
{
|
8958
|
-
labelTextColor: globalRefs$
|
8959
|
-
valueTextColor: globalRefs$
|
8960
|
-
placeholderTextColor: globalRefs$
|
8997
|
+
labelTextColor: globalRefs$g.colors.surface.dark,
|
8998
|
+
valueTextColor: globalRefs$g.colors.surface.contrast,
|
8999
|
+
placeholderTextColor: globalRefs$g.colors.surface.dark,
|
8961
9000
|
requiredIndicator: "'*'",
|
8962
|
-
errorMessageTextColor: globalRefs$
|
9001
|
+
errorMessageTextColor: globalRefs$g.colors.error.main,
|
8963
9002
|
|
8964
|
-
borderWidth: globalRefs$
|
8965
|
-
borderRadius: globalRefs$
|
9003
|
+
borderWidth: globalRefs$g.border.xs,
|
9004
|
+
borderRadius: globalRefs$g.radius.xs,
|
8966
9005
|
borderColor: 'transparent',
|
8967
9006
|
|
8968
|
-
outlineWidth: globalRefs$
|
9007
|
+
outlineWidth: globalRefs$g.border.sm,
|
8969
9008
|
outlineStyle: 'solid',
|
8970
9009
|
outlineColor: 'transparent',
|
8971
9010
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -8976,11 +9015,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
8976
9015
|
horizontalPadding: '0.5em',
|
8977
9016
|
verticalPadding: '0.5em',
|
8978
9017
|
|
8979
|
-
backgroundColor: globalRefs$
|
9018
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
8980
9019
|
|
8981
|
-
fontFamily: globalRefs$
|
9020
|
+
fontFamily: globalRefs$g.fonts.font1.family,
|
8982
9021
|
|
8983
|
-
direction: globalRefs$
|
9022
|
+
direction: globalRefs$g.direction,
|
8984
9023
|
|
8985
9024
|
overlayOpacity: '0.3',
|
8986
9025
|
|
@@ -8996,27 +9035,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
8996
9035
|
},
|
8997
9036
|
|
8998
9037
|
_focused: {
|
8999
|
-
outlineColor: globalRefs$
|
9038
|
+
outlineColor: globalRefs$g.colors.surface.light,
|
9000
9039
|
_invalid: {
|
9001
|
-
outlineColor: globalRefs$
|
9040
|
+
outlineColor: globalRefs$g.colors.error.main,
|
9002
9041
|
},
|
9003
9042
|
},
|
9004
9043
|
|
9005
9044
|
_bordered: {
|
9006
|
-
outlineWidth: globalRefs$
|
9007
|
-
borderColor: globalRefs$
|
9045
|
+
outlineWidth: globalRefs$g.border.xs,
|
9046
|
+
borderColor: globalRefs$g.colors.surface.light,
|
9008
9047
|
borderStyle: 'solid',
|
9009
9048
|
_invalid: {
|
9010
|
-
borderColor: globalRefs$
|
9049
|
+
borderColor: globalRefs$g.colors.error.main,
|
9011
9050
|
},
|
9012
9051
|
},
|
9013
9052
|
|
9014
9053
|
_disabled: {
|
9015
|
-
labelTextColor: globalRefs$
|
9016
|
-
borderColor: globalRefs$
|
9017
|
-
valueTextColor: globalRefs$
|
9018
|
-
placeholderTextColor: globalRefs$
|
9019
|
-
backgroundColor: globalRefs$
|
9054
|
+
labelTextColor: globalRefs$g.colors.surface.light,
|
9055
|
+
borderColor: globalRefs$g.colors.surface.light,
|
9056
|
+
valueTextColor: globalRefs$g.colors.surface.light,
|
9057
|
+
placeholderTextColor: globalRefs$g.colors.surface.light,
|
9058
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
9020
9059
|
},
|
9021
9060
|
},
|
9022
9061
|
componentName
|
@@ -9067,7 +9106,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
9067
9106
|
vars: vars$v
|
9068
9107
|
});
|
9069
9108
|
|
9070
|
-
const globalRefs$
|
9109
|
+
const globalRefs$f = getThemeRefs(globals);
|
9071
9110
|
const vars$u = PasswordClass.cssVarList;
|
9072
9111
|
|
9073
9112
|
const password = {
|
@@ -9091,8 +9130,9 @@ const password = {
|
|
9091
9130
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
9092
9131
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
9093
9132
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
9094
|
-
[vars$u.revealButtonOffset]: globalRefs$
|
9133
|
+
[vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
|
9095
9134
|
[vars$u.revealButtonSize]: refs.toggleButtonSize,
|
9135
|
+
[vars$u.revealButtonColor]: refs.placeholderTextColor,
|
9096
9136
|
};
|
9097
9137
|
|
9098
9138
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -9165,7 +9205,6 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
9165
9205
|
vars: vars$s
|
9166
9206
|
});
|
9167
9207
|
|
9168
|
-
const globalRefs$f = getThemeRefs(globals);
|
9169
9208
|
const vars$r = TextAreaClass.cssVarList;
|
9170
9209
|
|
9171
9210
|
const textArea = {
|
@@ -9196,10 +9235,6 @@ const textArea = {
|
|
9196
9235
|
center: { [vars$r.inputTextAlign]: 'center' },
|
9197
9236
|
},
|
9198
9237
|
|
9199
|
-
_disabled: {
|
9200
|
-
[vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
9201
|
-
},
|
9202
|
-
|
9203
9238
|
_readonly: {
|
9204
9239
|
[vars$r.inputResizeType]: 'none',
|
9205
9240
|
},
|
@@ -9271,7 +9306,7 @@ const switchToggle = {
|
|
9271
9306
|
[vars$p.trackBorderStyle]: refs.borderStyle,
|
9272
9307
|
[vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
9273
9308
|
[vars$p.trackBorderColor]: refs.borderColor,
|
9274
|
-
[vars$p.trackBackgroundColor]:
|
9309
|
+
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
9275
9310
|
[vars$p.trackBorderRadius]: globalRefs$e.radius.md,
|
9276
9311
|
[vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
9277
9312
|
[vars$p.trackHeight]: checkboxHeight,
|
@@ -9280,7 +9315,7 @@ const switchToggle = {
|
|
9280
9315
|
[vars$p.knobRadius]: '50%',
|
9281
9316
|
[vars$p.knobTopOffset]: '1px',
|
9282
9317
|
[vars$p.knobLeftOffset]: knobMargin,
|
9283
|
-
[vars$p.knobColor]: refs.
|
9318
|
+
[vars$p.knobColor]: refs.labelTextColor,
|
9284
9319
|
[vars$p.knobTransitionDuration]: '0.3s',
|
9285
9320
|
|
9286
9321
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
@@ -9292,7 +9327,6 @@ const switchToggle = {
|
|
9292
9327
|
|
9293
9328
|
_checked: {
|
9294
9329
|
[vars$p.trackBorderColor]: refs.borderColor,
|
9295
|
-
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
9296
9330
|
[vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
|
9297
9331
|
[vars$p.knobColor]: refs.valueTextColor,
|
9298
9332
|
[vars$p.knobTextColor]: refs.valueTextColor,
|
@@ -9300,7 +9334,7 @@ const switchToggle = {
|
|
9300
9334
|
|
9301
9335
|
_disabled: {
|
9302
9336
|
[vars$p.knobColor]: globalRefs$e.colors.surface.light,
|
9303
|
-
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.
|
9337
|
+
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
|
9304
9338
|
[vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
9305
9339
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
9306
9340
|
_checked: {
|
@@ -9353,7 +9387,7 @@ const container = {
|
|
9353
9387
|
|
9354
9388
|
[compVars$3.hostWidth]: '100%',
|
9355
9389
|
[compVars$3.boxShadow]: 'none',
|
9356
|
-
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.
|
9390
|
+
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
|
9357
9391
|
[compVars$3.color]: globalRefs$d.colors.surface.contrast,
|
9358
9392
|
[compVars$3.borderRadius]: '0px',
|
9359
9393
|
[compVars$3.hostDirection]: globalRefs$d.direction,
|
@@ -9524,10 +9558,10 @@ const text = {
|
|
9524
9558
|
|
9525
9559
|
mode: {
|
9526
9560
|
primary: {
|
9527
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
9561
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.contrast,
|
9528
9562
|
},
|
9529
9563
|
secondary: {
|
9530
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
9564
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.dark,
|
9531
9565
|
},
|
9532
9566
|
error: {
|
9533
9567
|
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
@@ -9626,7 +9660,7 @@ const divider = {
|
|
9626
9660
|
[compVars$2.flexDirection]: 'row',
|
9627
9661
|
[compVars$2.alignSelf]: 'stretch',
|
9628
9662
|
[compVars$2.hostWidth]: '100%',
|
9629
|
-
[compVars$2.stripeColor]: globalRefs$a.colors.surface.
|
9663
|
+
[compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
|
9630
9664
|
[compVars$2.stripeColorOpacity]: '0.5',
|
9631
9665
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
9632
9666
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -9708,7 +9742,7 @@ const loaderLinear = {
|
|
9708
9742
|
[vars$g.barColor]: globalRefs$9.colors.surface.contrast,
|
9709
9743
|
[vars$g.barWidth]: '20%',
|
9710
9744
|
|
9711
|
-
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.
|
9745
|
+
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
|
9712
9746
|
[vars$g.barBorderRadius]: '4px',
|
9713
9747
|
|
9714
9748
|
[vars$g.animationDuration]: '2s',
|
@@ -9822,7 +9856,7 @@ const comboBox = {
|
|
9822
9856
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
9823
9857
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
9824
9858
|
[vars$e.inputHeight]: refs.inputHeight,
|
9825
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
9859
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
|
9826
9860
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
9827
9861
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9828
9862
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -10028,20 +10062,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
|
|
10028
10062
|
|
10029
10063
|
const buttonSelectionGroupItem = {
|
10030
10064
|
[vars$8.hostDirection]: 'inherit',
|
10031
|
-
[vars$8.backgroundColor]: globalRefs$6.colors.surface.
|
10065
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
10032
10066
|
[vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
10033
|
-
[vars$8.borderColor]: globalRefs$6.colors.surface.
|
10067
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.light,
|
10034
10068
|
[vars$8.borderStyle]: 'solid',
|
10035
10069
|
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
10070
|
+
[vars$8.outlineColor]: 'transparent',
|
10036
10071
|
|
10037
10072
|
_hover: {
|
10038
|
-
[vars$8.backgroundColor]:
|
10073
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
|
10074
|
+
},
|
10075
|
+
|
10076
|
+
_focused: {
|
10077
|
+
[vars$8.outlineColor]: globalRefs$6.colors.surface.light,
|
10039
10078
|
},
|
10040
10079
|
|
10041
10080
|
_selected: {
|
10042
10081
|
[vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
|
10043
10082
|
[vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
10044
|
-
[vars$8.labelTextColor]: globalRefs$6.colors.surface.
|
10083
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
|
10045
10084
|
},
|
10046
10085
|
};
|
10047
10086
|
|
@@ -10092,7 +10131,7 @@ const globalRefs$4 = getThemeRefs(globals);
|
|
10092
10131
|
const compVars = ModalClass.cssVarList;
|
10093
10132
|
|
10094
10133
|
const modal = {
|
10095
|
-
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.
|
10134
|
+
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
|
10096
10135
|
[compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
|
10097
10136
|
[compVars.overlayWidth]: '540px',
|
10098
10137
|
};
|
@@ -10115,28 +10154,28 @@ const grid = {
|
|
10115
10154
|
[vars$4.hostHeight]: '100%',
|
10116
10155
|
[vars$4.hostMinHeight]: '400px',
|
10117
10156
|
[vars$4.fontWeight]: '400',
|
10118
|
-
[vars$4.backgroundColor]: globalRefs$3.colors.surface.
|
10157
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
|
10119
10158
|
|
10120
10159
|
[vars$4.fontSize]: refs.fontSize,
|
10121
10160
|
[vars$4.fontFamily]: refs.fontFamily,
|
10122
10161
|
|
10123
|
-
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.
|
10162
|
+
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
|
10124
10163
|
[vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
|
10125
|
-
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.
|
10164
|
+
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
|
10126
10165
|
|
10127
|
-
[vars$4.
|
10128
|
-
[vars$4.
|
10129
|
-
[vars$4.
|
10130
|
-
[vars$4.
|
10166
|
+
[vars$4.borderWidth]: refs.borderWidth,
|
10167
|
+
[vars$4.borderStyle]: refs.borderStyle,
|
10168
|
+
[vars$4.borderRadius]: refs.borderRadius,
|
10169
|
+
[vars$4.borderColor]: 'transparent',
|
10131
10170
|
|
10132
10171
|
[vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
|
10133
|
-
[vars$4.separatorColor]: globalRefs$3.colors.surface.
|
10172
|
+
[vars$4.separatorColor]: globalRefs$3.colors.surface.light,
|
10134
10173
|
|
10135
10174
|
[vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
|
10136
|
-
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.
|
10175
|
+
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
|
10137
10176
|
|
10138
10177
|
_bordered: {
|
10139
|
-
[vars$4.
|
10178
|
+
[vars$4.borderColor]: refs.borderColor,
|
10140
10179
|
},
|
10141
10180
|
};
|
10142
10181
|
|
@@ -10226,7 +10265,7 @@ const multiSelectComboBox = {
|
|
10226
10265
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
10227
10266
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
10228
10267
|
[vars$2.inputHeight]: refs.inputHeight,
|
10229
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
10268
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
|
10230
10269
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
10231
10270
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
10232
10271
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
@@ -10234,7 +10273,7 @@ const multiSelectComboBox = {
|
|
10234
10273
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
10235
10274
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
10236
10275
|
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
10237
|
-
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.
|
10276
|
+
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
|
10238
10277
|
|
10239
10278
|
_readonly: {
|
10240
10279
|
[vars$2.inputDropdownButtonCursor]: 'default',
|
@@ -10295,7 +10334,7 @@ const badge = {
|
|
10295
10334
|
default: {
|
10296
10335
|
[vars$1.textColor]: globalRefs.colors.surface.dark,
|
10297
10336
|
_bordered: {
|
10298
|
-
[vars$1.borderColor]: globalRefs.colors.surface.
|
10337
|
+
[vars$1.borderColor]: globalRefs.colors.surface.light,
|
10299
10338
|
},
|
10300
10339
|
},
|
10301
10340
|
primary: {
|
@@ -10379,5 +10418,49 @@ const vars = Object.keys(components).reduce(
|
|
10379
10418
|
const defaultTheme = { globals, components: theme };
|
10380
10419
|
const themeVars = { globals: vars$y, components: vars };
|
10381
10420
|
|
10382
|
-
|
10421
|
+
const colors = {
|
10422
|
+
surface: {
|
10423
|
+
main: '#181a1c',
|
10424
|
+
dark: '#bec4ca',
|
10425
|
+
light: '#555f68',
|
10426
|
+
highlight: '#22262a',
|
10427
|
+
contrast: '#f5f6f7',
|
10428
|
+
},
|
10429
|
+
primary: {
|
10430
|
+
main: '#1f80ff',
|
10431
|
+
dark: '#71aeff',
|
10432
|
+
light: '#004094',
|
10433
|
+
highlight: '#00214d',
|
10434
|
+
contrast: '#000000',
|
10435
|
+
},
|
10436
|
+
secondary: {
|
10437
|
+
main: '#a665eb',
|
10438
|
+
dark: '#b9a0f3',
|
10439
|
+
light: '#683ae6',
|
10440
|
+
highlight: '#361299',
|
10441
|
+
contrast: '#000000',
|
10442
|
+
},
|
10443
|
+
success: {
|
10444
|
+
main: '#27963c',
|
10445
|
+
dark: '#8bc3a2',
|
10446
|
+
light: '#004d0f',
|
10447
|
+
highlight: '#001f00',
|
10448
|
+
contrast: '#000000',
|
10449
|
+
},
|
10450
|
+
error: {
|
10451
|
+
main: '#f85249',
|
10452
|
+
dark: '#fa7c75',
|
10453
|
+
light: '#c51107',
|
10454
|
+
highlight: '#4a0603',
|
10455
|
+
contrast: '#000000',
|
10456
|
+
},
|
10457
|
+
};
|
10458
|
+
|
10459
|
+
const darkTheme = merge({}, defaultTheme, {
|
10460
|
+
globals: {
|
10461
|
+
colors,
|
10462
|
+
},
|
10463
|
+
});
|
10464
|
+
|
10465
|
+
export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
10383
10466
|
//# sourceMappingURL=index.esm.js.map
|