@descope/web-components-ui 1.0.274 → 1.0.275
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +81 -15
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +80 -24
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/helpers/themeHelpers/colorsHelpers.js +77 -11
- package/src/theme/globals.js +4 -5
package/dist/index.esm.js
CHANGED
@@ -8650,45 +8650,101 @@ const createHelperVars = (theme, prefix) => {
|
|
8650
8650
|
return [res.theme, res.useVars, res.vars];
|
8651
8651
|
};
|
8652
8652
|
|
8653
|
-
|
8654
|
-
|
8655
|
-
|
8656
|
-
|
8653
|
+
const colorGaps = {
|
8654
|
+
darkLight: 0.4,
|
8655
|
+
highlight: 0.8,
|
8656
|
+
contrast: 1,
|
8657
|
+
edgeColor: {
|
8658
|
+
darkLight: 0.25,
|
8659
|
+
highlight: 0.1,
|
8660
|
+
},
|
8661
|
+
};
|
8662
|
+
|
8663
|
+
const darken = (c, percentage) => c.darken(percentage).hex();
|
8664
|
+
|
8665
|
+
const contrast = (c) => {
|
8657
8666
|
const isDark = c.isDark();
|
8658
8667
|
return c
|
8659
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
8668
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
8660
8669
|
.saturate(1)
|
8661
8670
|
.hex();
|
8662
8671
|
};
|
8663
8672
|
|
8664
|
-
const
|
8673
|
+
const lighten = (c, percentage) => {
|
8674
|
+
const isDark = c.lightness() < 0.5;
|
8675
|
+
|
8676
|
+
if (isDark) {
|
8677
|
+
return c.lightness(percentage * 100).hex();
|
8678
|
+
}
|
8679
|
+
|
8680
|
+
return c.lighten(percentage).hex();
|
8681
|
+
};
|
8682
|
+
|
8683
|
+
const isNearBlack = (color) => color.luminosity() < 0.01;
|
8684
|
+
const isNearWhite = (color) => color.luminosity() > 0.99;
|
8685
|
+
|
8686
|
+
const generateDarkColor = (color, theme) => {
|
8687
|
+
if (color.dark) return color.dark;
|
8688
|
+
|
8689
|
+
if (theme === 'dark') {
|
8690
|
+
return isNearWhite(color)
|
8691
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
8692
|
+
: lighten(color, colorGaps.darkLight);
|
8693
|
+
}
|
8694
|
+
|
8695
|
+
return isNearBlack(color)
|
8696
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
8697
|
+
: darken(color, colorGaps.darkLight);
|
8698
|
+
};
|
8699
|
+
|
8700
|
+
const generateLightColor = (color, theme) => {
|
8701
|
+
if (color.light) return color.light;
|
8702
|
+
|
8703
|
+
if (theme === 'dark') {
|
8704
|
+
return isNearBlack(color)
|
8705
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
8706
|
+
: darken(color, colorGaps.darkLight);
|
8707
|
+
}
|
8708
|
+
|
8709
|
+
return isNearWhite(color)
|
8710
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
8711
|
+
: lighten(color, colorGaps.darkLight);
|
8712
|
+
};
|
8713
|
+
|
8714
|
+
const generateHighlightColor = (color, theme) => {
|
8715
|
+
if (color.highlight) return color.highlight;
|
8716
|
+
|
8717
|
+
if (theme === 'dark') {
|
8718
|
+
return isNearBlack(color)
|
8719
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
8720
|
+
: darken(color, colorGaps.highlight);
|
8721
|
+
}
|
8722
|
+
|
8723
|
+
return isNearWhite(color)
|
8724
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
8725
|
+
: lighten(color, colorGaps.highlight);
|
8726
|
+
};
|
8727
|
+
|
8728
|
+
const genColor = (color, theme) => {
|
8665
8729
|
const mainColor = new Color(color.main || color);
|
8666
8730
|
|
8667
|
-
|
8731
|
+
const res = {
|
8668
8732
|
main: mainColor.hex(),
|
8669
|
-
dark:
|
8670
|
-
light:
|
8671
|
-
highlight:
|
8672
|
-
contrast: color.contrast ||
|
8733
|
+
dark: generateDarkColor(mainColor, theme),
|
8734
|
+
light: generateLightColor(mainColor, theme),
|
8735
|
+
highlight: generateHighlightColor(mainColor, theme),
|
8736
|
+
contrast: color.contrast || contrast(mainColor),
|
8673
8737
|
};
|
8674
|
-
};
|
8675
|
-
|
8676
|
-
const genColors = (colors) => {
|
8677
|
-
return Object.keys(colors).reduce((acc, colorName) => {
|
8678
|
-
const currentColor = colors[colorName];
|
8679
8738
|
|
8680
|
-
|
8681
|
-
[colorName]: genColor(currentColor),
|
8682
|
-
});
|
8683
|
-
}, {});
|
8739
|
+
return res;
|
8684
8740
|
};
|
8685
8741
|
|
8686
8742
|
const direction = 'ltr';
|
8687
8743
|
|
8688
|
-
const colors$1 =
|
8744
|
+
const colors$1 = {
|
8689
8745
|
surface: {
|
8690
|
-
main: '#ffffff',
|
8691
8746
|
dark: '#636c74',
|
8747
|
+
main: '#ffffff',
|
8692
8748
|
light: '#cfd3d7',
|
8693
8749
|
highlight: '#f4f5f6',
|
8694
8750
|
contrast: '#181a1c',
|
@@ -8701,8 +8757,8 @@ const colors$1 = genColors({
|
|
8701
8757
|
contrast: '#ffffff',
|
8702
8758
|
},
|
8703
8759
|
secondary: {
|
8704
|
-
main: '#802ed6',
|
8705
8760
|
dark: '#6410bc',
|
8761
|
+
main: '#802ed6',
|
8706
8762
|
light: '#be89f5',
|
8707
8763
|
highlight: '#ede7f6',
|
8708
8764
|
contrast: '#ffffff',
|
@@ -8721,7 +8777,7 @@ const colors$1 = genColors({
|
|
8721
8777
|
highlight: '#fef1f1',
|
8722
8778
|
contrast: '#ffffff',
|
8723
8779
|
},
|
8724
|
-
}
|
8780
|
+
};
|
8725
8781
|
|
8726
8782
|
const fonts = {
|
8727
8783
|
font1: {
|