@descope/web-components-ui 1.0.275 → 1.0.277
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +42 -93
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +51 -92
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4447.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-text-field/textFieldMappings.js +27 -12
- package/src/helpers/themeHelpers/colorsHelpers.js +11 -77
- package/src/theme/globals.js +5 -4
package/dist/umd/4447.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4447],{4447:(r,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4447],{4447:(e,r,t)=>{t.d(r,{Z:()=>s});const{host:o,label:p,placeholder:l,requiredIndicator:i,inputField:n,input:d,helperText:u,errorMessage:a,disabledPlaceholder:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},s={fontSize:[{},o],fontFamily:[p,n,u,a],hostWidth:{...o,property:"width"},hostMinWidth:{...o,property:"min-width"},hostDirection:{...o,property:"direction"},inputBackgroundColor:{...n,property:"background-color"},labelTextColor:[{...p,property:"color"},{...i,property:"color"},{...p,property:"-webkit-text-fill-color"},{...i,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...a,property:"color"},inputValueTextColor:{...n,property:"color"},inputCaretTextColor:{...d,property:"color"},labelRequiredIndicator:{...i,property:"content"},inputBorderColor:{...n,property:"border-color"},inputBorderWidth:{...n,property:"border-width"},inputBorderStyle:{...n,property:"border-style"},inputBorderRadius:{...n,property:"border-radius"},inputHeight:{...n,property:"height"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],inputOutlineColor:{...n,property:"outline-color"},inputOutlineStyle:{...n,property:"outline-style"},inputOutlineWidth:{...n,property:"outline-width"},inputOutlineOffset:{...n,property:"outline-offset"},inputTextAlign:{...d,property:"text-align"},inputPlaceholderColor:[{...l,property:"color"},{...c,property:"-webkit-text-fill-color"}]}}}]);
|
package/package.json
CHANGED
@@ -1,14 +1,24 @@
|
|
1
|
-
const {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
1
|
+
const {
|
2
|
+
host,
|
3
|
+
label,
|
4
|
+
placeholder,
|
5
|
+
requiredIndicator,
|
6
|
+
inputField,
|
7
|
+
input,
|
8
|
+
helperText,
|
9
|
+
errorMessage,
|
10
|
+
disabledPlaceholder,
|
11
|
+
} = {
|
12
|
+
host: { selector: () => ':host' },
|
13
|
+
label: { selector: '::part(label)' },
|
14
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
15
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
16
|
+
disabledPlaceholder: { selector: '> input:disabled::placeholder' },
|
17
|
+
inputField: { selector: '::part(input-field)' },
|
18
|
+
input: { selector: 'input' },
|
19
|
+
helperText: { selector: '::part(helper-text)' },
|
20
|
+
errorMessage: { selector: '::part(error-message)' },
|
21
|
+
};
|
12
22
|
|
13
23
|
export default {
|
14
24
|
// we apply font-size also on the host so we can set its width with em
|
@@ -24,6 +34,8 @@ export default {
|
|
24
34
|
labelTextColor: [
|
25
35
|
{ ...label, property: 'color' },
|
26
36
|
{ ...requiredIndicator, property: 'color' },
|
37
|
+
{ ...label, property: '-webkit-text-fill-color' },
|
38
|
+
{ ...requiredIndicator, property: '-webkit-text-fill-color' },
|
27
39
|
],
|
28
40
|
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
29
41
|
|
@@ -50,5 +62,8 @@ export default {
|
|
50
62
|
|
51
63
|
inputTextAlign: { ...input, property: 'text-align' },
|
52
64
|
|
53
|
-
inputPlaceholderColor:
|
65
|
+
inputPlaceholderColor: [
|
66
|
+
{ ...placeholder, property: 'color' },
|
67
|
+
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
68
|
+
],
|
54
69
|
};
|
@@ -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: {
|