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