@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/package.json
CHANGED
@@ -1,92 +1,26 @@
|
|
1
1
|
import Color from 'color';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
edgeColor: {
|
8
|
-
darkLight: 0.25,
|
9
|
-
highlight: 0.1,
|
10
|
-
},
|
11
|
-
};
|
12
|
-
|
13
|
-
const darken = (c, percentage) => c.darken(percentage).hex();
|
14
|
-
|
15
|
-
const contrast = (c) => {
|
3
|
+
// TODO: fix generated colors strategy
|
4
|
+
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
5
|
+
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
6
|
+
const genContrast = (c, percentage = 0.9) => {
|
16
7
|
const isDark = c.isDark();
|
17
8
|
return c
|
18
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
9
|
+
.mix(Color(isDark ? 'white' : 'black'), percentage)
|
19
10
|
.saturate(1)
|
20
11
|
.hex();
|
21
12
|
};
|
22
13
|
|
23
|
-
const
|
24
|
-
const isDark = c.lightness() < 0.5;
|
25
|
-
|
26
|
-
if (isDark) {
|
27
|
-
return c.lightness(percentage * 100).hex();
|
28
|
-
}
|
29
|
-
|
30
|
-
return c.lighten(percentage).hex();
|
31
|
-
};
|
32
|
-
|
33
|
-
const isNearBlack = (color) => color.luminosity() < 0.01;
|
34
|
-
const isNearWhite = (color) => color.luminosity() > 0.99;
|
35
|
-
|
36
|
-
const generateDarkColor = (color, theme) => {
|
37
|
-
if (color.dark) return color.dark;
|
38
|
-
|
39
|
-
if (theme === 'dark') {
|
40
|
-
return isNearWhite(color)
|
41
|
-
? darken(color, colorGaps.edgeColor.darkLight)
|
42
|
-
: lighten(color, colorGaps.darkLight);
|
43
|
-
}
|
44
|
-
|
45
|
-
return isNearBlack(color)
|
46
|
-
? lighten(color, colorGaps.edgeColor.darkLight)
|
47
|
-
: darken(color, colorGaps.darkLight);
|
48
|
-
};
|
49
|
-
|
50
|
-
const generateLightColor = (color, theme) => {
|
51
|
-
if (color.light) return color.light;
|
52
|
-
|
53
|
-
if (theme === 'dark') {
|
54
|
-
return isNearBlack(color)
|
55
|
-
? lighten(color, colorGaps.edgeColor.darkLight)
|
56
|
-
: darken(color, colorGaps.darkLight);
|
57
|
-
}
|
58
|
-
|
59
|
-
return isNearWhite(color)
|
60
|
-
? darken(color, colorGaps.edgeColor.darkLight)
|
61
|
-
: lighten(color, colorGaps.darkLight);
|
62
|
-
};
|
63
|
-
|
64
|
-
const generateHighlightColor = (color, theme) => {
|
65
|
-
if (color.highlight) return color.highlight;
|
66
|
-
|
67
|
-
if (theme === 'dark') {
|
68
|
-
return isNearBlack(color)
|
69
|
-
? lighten(color, colorGaps.edgeColor.highlight)
|
70
|
-
: darken(color, colorGaps.highlight);
|
71
|
-
}
|
72
|
-
|
73
|
-
return isNearWhite(color)
|
74
|
-
? darken(color, colorGaps.edgeColor.highlight)
|
75
|
-
: lighten(color, colorGaps.highlight);
|
76
|
-
};
|
77
|
-
|
78
|
-
export const genColor = (color, theme) => {
|
14
|
+
export const genColor = (color) => {
|
79
15
|
const mainColor = new Color(color.main || color);
|
80
16
|
|
81
|
-
|
17
|
+
return {
|
82
18
|
main: mainColor.hex(),
|
83
|
-
dark:
|
84
|
-
light:
|
85
|
-
highlight:
|
86
|
-
contrast: color.contrast ||
|
19
|
+
dark: color.dark || genDark(mainColor),
|
20
|
+
light: color.light || genLight(mainColor),
|
21
|
+
highlight: color.highlight || genLight(mainColor),
|
22
|
+
contrast: color.contrast || genContrast(mainColor),
|
87
23
|
};
|
88
|
-
|
89
|
-
return res;
|
90
24
|
};
|
91
25
|
|
92
26
|
export const genColors = (colors) => {
|
package/src/theme/globals.js
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
|
2
|
+
import { genColors } from '../helpers/themeHelpers/colorsHelpers';
|
2
3
|
|
3
4
|
const direction = 'ltr';
|
4
5
|
|
5
|
-
export const colors = {
|
6
|
+
export const colors = genColors({
|
6
7
|
surface: {
|
7
|
-
dark: '#636c74',
|
8
8
|
main: '#ffffff',
|
9
|
+
dark: '#636c74',
|
9
10
|
light: '#cfd3d7',
|
10
11
|
highlight: '#f4f5f6',
|
11
12
|
contrast: '#181a1c',
|
@@ -18,8 +19,8 @@ export const colors = {
|
|
18
19
|
contrast: '#ffffff',
|
19
20
|
},
|
20
21
|
secondary: {
|
21
|
-
dark: '#6410bc',
|
22
22
|
main: '#802ed6',
|
23
|
+
dark: '#6410bc',
|
23
24
|
light: '#be89f5',
|
24
25
|
highlight: '#ede7f6',
|
25
26
|
contrast: '#ffffff',
|
@@ -38,7 +39,7 @@ export const colors = {
|
|
38
39
|
highlight: '#fef1f1',
|
39
40
|
contrast: '#ffffff',
|
40
41
|
},
|
41
|
-
};
|
42
|
+
});
|
42
43
|
|
43
44
|
const fonts = {
|
44
45
|
font1: {
|