@descope/web-components-ui 1.0.287 → 1.0.289
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +76 -11
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.esm.js +76 -11
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +4 -0
- package/src/helpers/themeHelpers/colorsHelpers.js +71 -11
- package/src/index.d.ts +3 -0
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +1 -0
package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>p});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),c=o(9690);const a=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:a,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n descope-button {\n max-width: 100%;\n }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n max-width: 100%\n\t\t\t}\n\t\t</style>\n <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n <slot></slot>\n </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,i.oP)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const p=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>c.n.componentName,property:c.n.cssVarList.hostDirection},backgroundColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.labelTextColor},borderColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderColor},borderWidth:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderWidth},borderStyle:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderStyle},borderRadius:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderRadius},outlineColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.outlineColor}}}),s.e4,s.Ae)(l);o(2018),customElements.define(a,p)}}]);
|
package/package.json
CHANGED
@@ -92,6 +92,10 @@ export const ButtonSelectionGroupItemClass = compose(
|
|
92
92
|
selector: () => ButtonClass.componentName,
|
93
93
|
property: ButtonClass.cssVarList.borderColor,
|
94
94
|
},
|
95
|
+
borderWidth: {
|
96
|
+
selector: () => ButtonClass.componentName,
|
97
|
+
property: ButtonClass.cssVarList.borderWidth,
|
98
|
+
},
|
95
99
|
borderStyle: {
|
96
100
|
selector: () => ButtonClass.componentName,
|
97
101
|
property: ButtonClass.cssVarList.borderStyle,
|
@@ -1,26 +1,86 @@
|
|
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 (theme === 'dark') {
|
38
|
+
return isNearWhite(color)
|
39
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
40
|
+
: lighten(color, colorGaps.darkLight);
|
41
|
+
}
|
42
|
+
|
43
|
+
return isNearBlack(color)
|
44
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
45
|
+
: darken(color, colorGaps.darkLight);
|
46
|
+
};
|
47
|
+
|
48
|
+
const generateLightColor = (color, theme) => {
|
49
|
+
if (theme === 'dark') {
|
50
|
+
return isNearBlack(color)
|
51
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
52
|
+
: darken(color, colorGaps.darkLight);
|
53
|
+
}
|
54
|
+
|
55
|
+
return isNearWhite(color)
|
56
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
57
|
+
: lighten(color, colorGaps.darkLight);
|
58
|
+
};
|
59
|
+
|
60
|
+
const generateHighlightColor = (color, theme) => {
|
61
|
+
if (theme === 'dark') {
|
62
|
+
return isNearBlack(color)
|
63
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
64
|
+
: darken(color, colorGaps.highlight);
|
65
|
+
}
|
66
|
+
|
67
|
+
return isNearWhite(color)
|
68
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
69
|
+
: lighten(color, colorGaps.highlight);
|
70
|
+
};
|
71
|
+
|
72
|
+
export const genColor = (color, theme) => {
|
15
73
|
const mainColor = new Color(color.main || color);
|
16
74
|
|
17
|
-
|
75
|
+
const res = {
|
18
76
|
main: mainColor.hex(),
|
19
|
-
dark: color.dark ||
|
20
|
-
light: color.light ||
|
21
|
-
highlight: color.highlight ||
|
22
|
-
contrast: color.contrast ||
|
77
|
+
dark: color.dark || generateDarkColor(mainColor, theme),
|
78
|
+
light: color.light || generateLightColor(mainColor, theme),
|
79
|
+
highlight: color.highlight || generateHighlightColor(mainColor, theme),
|
80
|
+
contrast: color.contrast || contrast(mainColor),
|
23
81
|
};
|
82
|
+
|
83
|
+
return res;
|
24
84
|
};
|
25
85
|
|
26
86
|
export const genColors = (colors) => {
|
package/src/index.d.ts
CHANGED
@@ -51,6 +51,8 @@ export type Theme = {
|
|
51
51
|
typography: Record<string, any>;
|
52
52
|
shadow: Record<string, string>;
|
53
53
|
spacing: Record<string, string>;
|
54
|
+
radius: Record<string, string>;
|
55
|
+
border: Record<string, string>;
|
54
56
|
};
|
55
57
|
components: {
|
56
58
|
button: Record<string, any>;
|
@@ -60,5 +62,6 @@ export type Theme = {
|
|
60
62
|
link: Record<string, any>;
|
61
63
|
text: Record<string, any>;
|
62
64
|
inputWrapper: Record<string, any>;
|
65
|
+
buttonSelectionGroupItem: Record<string, any>;
|
63
66
|
};
|
64
67
|
};
|
@@ -14,6 +14,7 @@ const buttonSelectionGroupItem = {
|
|
14
14
|
[vars.borderStyle]: 'solid',
|
15
15
|
[vars.borderRadius]: globalRefs.radius.sm,
|
16
16
|
[vars.outlineColor]: 'transparent',
|
17
|
+
[vars.borderWidth]: globalRefs.border.xs,
|
17
18
|
|
18
19
|
_hover: {
|
19
20
|
[vars.backgroundColor]: globalRefs.colors.surface.highlight,
|