@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/package.json
CHANGED
@@ -1,26 +1,92 @@
|
|
1
1
|
import Color from 'color';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
const colorGaps = {
|
4
|
+
darkLight: 0.4,
|
5
|
+
highlight: 0.8,
|
6
|
+
contrast: 1,
|
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) => {
|
7
16
|
const isDark = c.isDark();
|
8
17
|
return c
|
9
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
18
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
10
19
|
.saturate(1)
|
11
20
|
.hex();
|
12
21
|
};
|
13
22
|
|
14
|
-
|
23
|
+
const lighten = (c, percentage) => {
|
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) => {
|
15
79
|
const mainColor = new Color(color.main || color);
|
16
80
|
|
17
|
-
|
81
|
+
const res = {
|
18
82
|
main: mainColor.hex(),
|
19
|
-
dark:
|
20
|
-
light:
|
21
|
-
highlight:
|
22
|
-
contrast: color.contrast ||
|
83
|
+
dark: generateDarkColor(mainColor, theme),
|
84
|
+
light: generateLightColor(mainColor, theme),
|
85
|
+
highlight: generateHighlightColor(mainColor, theme),
|
86
|
+
contrast: color.contrast || contrast(mainColor),
|
23
87
|
};
|
88
|
+
|
89
|
+
return res;
|
24
90
|
};
|
25
91
|
|
26
92
|
export const genColors = (colors) => {
|
package/src/theme/globals.js
CHANGED
@@ -1,12 +1,11 @@
|
|
1
1
|
import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
|
2
|
-
import { genColors } from '../helpers/themeHelpers/colorsHelpers';
|
3
2
|
|
4
3
|
const direction = 'ltr';
|
5
4
|
|
6
|
-
export const colors =
|
5
|
+
export const colors = {
|
7
6
|
surface: {
|
8
|
-
main: '#ffffff',
|
9
7
|
dark: '#636c74',
|
8
|
+
main: '#ffffff',
|
10
9
|
light: '#cfd3d7',
|
11
10
|
highlight: '#f4f5f6',
|
12
11
|
contrast: '#181a1c',
|
@@ -19,8 +18,8 @@ export const colors = genColors({
|
|
19
18
|
contrast: '#ffffff',
|
20
19
|
},
|
21
20
|
secondary: {
|
22
|
-
main: '#802ed6',
|
23
21
|
dark: '#6410bc',
|
22
|
+
main: '#802ed6',
|
24
23
|
light: '#be89f5',
|
25
24
|
highlight: '#ede7f6',
|
26
25
|
contrast: '#ffffff',
|
@@ -39,7 +38,7 @@ export const colors = genColors({
|
|
39
38
|
highlight: '#fef1f1',
|
40
39
|
contrast: '#ffffff',
|
41
40
|
},
|
42
|
-
}
|
41
|
+
};
|
43
42
|
|
44
43
|
const fonts = {
|
45
44
|
font1: {
|