@descope/web-components-ui 1.0.113 → 1.0.115

package/src/theme/components/container.js

@@ -4,7 +4,7 @@ import { ContainerClass, componentName } from "../../components/descope-containe
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = ContainerClass.cssVarList
+const compVars = ContainerClass.cssVarList
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -25,94 +25,82 @@ const [helperTheme, helperRefs, helperVars] =
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
 	}, componentName)
 
+const { shadowColor } = helperRefs;
+
 const container = {
 	...helperTheme,
-	[vars.width]: '100%',
-	[vars.boxShadow]: 'none',
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-	[vars.color]: globalRefs.colors.surface.contrast,
+
+	[compVars.hostWidth]: '100%',
+	[compVars.boxShadow]: 'none',
+	[compVars.backgroundColor]: globalRefs.colors.surface.light,
+	[compVars.color]: globalRefs.colors.surface.contrast,
+
 	verticalPadding: {
-		sm: { [vars.verticalPadding]: '5px' },
-		md: { [vars.verticalPadding]: '10px' },
-		lg: { [vars.verticalPadding]: '20px' },
+		sm: { [compVars.verticalPadding]: '5px' },
+		md: { [compVars.verticalPadding]: '10px' },
+		lg: { [compVars.verticalPadding]: '20px' },
 	},
+
 	horizontalPadding: {
-		sm: { [vars.horizontalPadding]: '5px' },
-		md: { [vars.horizontalPadding]: '10px' },
-		lg: { [vars.horizontalPadding]: '20px' },
+		sm: { [compVars.horizontalPadding]: '5px' },
+		md: { [compVars.horizontalPadding]: '10px' },
+		lg: { [compVars.horizontalPadding]: '20px' },
 	},
+
 	direction: {
 		row: {
-			[vars.flexDirection]: 'row',
-			[vars.alignItems]: helperRefs.verticalAlignment,
-			[vars.justifyContent]: helperRefs.horizontalAlignment,
-			[vars.flexWrap]: 'wrap',
+			[compVars.flexDirection]: 'row',
+			[compVars.alignItems]: helperRefs.verticalAlignment,
+			[compVars.justifyContent]: helperRefs.horizontalAlignment,
+			[compVars.flexWrap]: 'wrap',
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: {
+					[helperVars.horizontalAlignment]: 'space-between'
+				},
 			}
 		},
-
 		column: {
-			[vars.flexDirection]: 'column',
-			[vars.alignItems]: helperRefs.horizontalAlignment,
-			[vars.justifyContent]: helperRefs.verticalAlignment,
+			[compVars.flexDirection]: 'column',
+			[compVars.alignItems]: helperRefs.horizontalAlignment,
+			[compVars.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+				spaceBetween: {
+					[helperVars.verticalAlignment]: 'space-between'
+				}
 			}
 		},
 	},
 
 	spaceBetween: {
-		sm: {
-			[vars.gap]: '10px'
-		},
-		md: {
-			[vars.gap]: '20px'
-		},
-		lg: {
-			[vars.gap]: '30px'
-		}
+		sm: { [compVars.gap]: '10px' },
+		md: { [compVars.gap]: '20px' },
+		lg: { [compVars.gap]: '30px' }
 	},
 
 	shadow: {
-		sm: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
-		},
-		md: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
-		},
-		lg: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
-		},
-		xl: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
-		},
+		sm: { [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}` },
+		md: { [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}` },
+		lg: { [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}` },
+		xl: { [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}` },
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`
 		},
 	},
 
 	borderRadius: {
-		sm: {
-			[vars.borderRadius]: globalRefs.radius.sm
-		},
-		md: {
-			[vars.borderRadius]: globalRefs.radius.md
-		},
-		lg: {
-			[vars.borderRadius]: globalRefs.radius.lg
-		},
-		xl: {
-			[vars.borderRadius]: globalRefs.radius.xl
-		},
-		'2xl': {
-			[vars.borderRadius]: globalRefs.radius['2xl']
-		},
-		'3xl': {
-			[vars.borderRadius]: globalRefs.radius['3xl']
-		},
+		sm: { [compVars.borderRadius]: globalRefs.radius.sm },
+		md: { [compVars.borderRadius]: globalRefs.radius.md },
+		lg: { [compVars.borderRadius]: globalRefs.radius.lg },
+		xl: { [compVars.borderRadius]: globalRefs.radius.xl },
+		'2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
+		'3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
 	}
 };
 
 export default container;
+
+export const vars = {
+	...compVars,
+	...helperVars
+};

package/src/theme/components/divider.js

@@ -1,36 +1,48 @@
+import globals from '../globals';
 import { componentName, DividerClass } from '../../components/descope-divider/DividerClass';
 import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
-import globals from '../globals';
 
 const globalRefs = getThemeRefs(globals);
+const compVars = DividerClass.cssVarList;
 
-const vars = DividerClass.cssVarList;
-
-const thickness = '2px'
-const textPaddingSize = '10px'
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
+const [
+	helperTheme,
+	helperRefs,
+	helperVars
+] = createHelperVars({
+	thickness: '2px',
+	spacing: '10px'
+}, componentName);
 
 const divider = {
 	...helperTheme,
-	[vars.alignItems]: 'center',
-	[vars.dividerHeight]: helperRefs.thickness,
-	[vars.backgroundColor]: globalRefs.colors.surface.main,
-	[vars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars.width]: '100%',
-	[vars.flexDirection]: 'row',
-	[vars.alignSelf]: 'strech',
-	[vars.textWidth]: 'fit-content',
-	[vars.maxTextWidth]: 'calc(100% - 100px)',
+
+	[compVars.alignItems]: 'center',
+	[compVars.flexDirection]: 'row',
+	[compVars.alignSelf]: 'stretch',
+	[compVars.hostWidth]: '100%',
+	[compVars.stripeColor]: globalRefs.colors.surface.main,
+	[compVars.stripeColorOpacity]: '0.5',
+	[compVars.stripeHorizontalThickness]: helperRefs.thickness,
+	[compVars.labelTextWidth]: 'fit-content',
+	[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
+	[compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
+
 	_vertical: {
-		[vars.padding]: `0 calc(${thickness} * 3)`,
-		[vars.width]: 'fit-content',
-		[vars.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars.flexDirection]: 'column',
-		[vars.minHeight]: '200px',
-		[vars.textWidth]: 'fit-content',
-		[vars.dividerWidth]: helperRefs.thickness,
-		[vars.maxTextWidth]: '100%',
+		[compVars.minHeight]: '200px',
+		[compVars.flexDirection]: 'column',
+		[compVars.hostWidth]: 'fit-content',
+		[compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
+		[compVars.stripeVerticalThickness]: helperRefs.thickness,
+		[compVars.labelTextWidth]: 'fit-content',
+		[compVars.labelTextMaxWidth]: '100%',
+		[compVars.labelTextVerticalSpacing]: helperRefs.spacing,
 	}
 };
 
 export default divider;
+
+export const vars = {
+	...compVars,
+	...helperVars
+};

package/src/theme/components/emailField.js

@@ -1,8 +1,27 @@
 import { EmailFieldClass } from '../../components/descope-email-field/EmailFieldClass';
-import { textField } from './textField';
+import { refs } from './inputWrapper';
+
+const vars = EmailFieldClass.cssVarList;
 
 const emailField = {
-	...textField(EmailFieldClass.cssVarList)
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars.inputBorderWidth]: refs.borderWidth,
+	[vars.inputBorderStyle]: refs.borderStyle,
+	[vars.inputBorderColor]: refs.borderColor,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputHeight]: refs.inputHeight
 };
 
 export default emailField;
+export { vars };

package/src/theme/components/image.js

@@ -5,3 +5,4 @@ const vars = ImageClass.cssVarList
 const image = {};
 
 export default image;
+export { vars }

package/src/theme/components/index.js

@@ -1,24 +1,25 @@
-import button from './button';
-import textField from './textField';
-import passwordField from './passwordField';
-import numberField from './numberField';
-import emailField from './emailField';
-import textArea from './textArea';
-import checkbox from './checkbox';
-import switchToggle from './switchToggle';
-import container from './container';
-import logo from './logo';
-import text from './text';
-import link from './link';
-import divider from './divider';
-import passcode from './passcode';
+import * as button from './button';
+import * as textField from './textField';
+import * as passwordField from './passwordField';
+import * as numberField from './numberField';
+import * as emailField from './emailField';
+import * as textArea from './textArea';
+import * as checkbox from './checkbox';
+import * as switchToggle from './switchToggle';
+import * as container from './container';
+import * as logo from './logo';
+import * as text from './text';
+import * as link from './link';
+import * as divider from './divider';
+import * as passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
-import comboBox from './comboBox';
-import image from './image';
-import phoneField from './phoneField';
-import newPassword from './newPassword';
+import * as comboBox from './comboBox';
+import * as image from './image';
+import * as phoneField from './phoneField';
+import * as newPassword from './newPassword';
+import * as inputWrapper from './inputWrapper';
 
-export default {
+const components = {
 	button,
 	textField,
 	passwordField,
@@ -39,4 +40,11 @@ export default {
 	image,
 	phoneField,
 	newPassword,
+	inputWrapper,
 };
+
+const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
+const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
+
+export default theme;
+export { vars }

package/src/theme/components/inputWrapper.js

@@ -0,0 +1,72 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { createHelperVars } from '../../helpers/themeHelpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+const componentName = getComponentName('input-wrapper');
+const globalRefs = getThemeRefs(globals);
+
+const [theme, refs, vars] = createHelperVars({
+    labelTextColor: globalRefs.colors.surface.contrast,
+    valueTextColor: globalRefs.colors.surface.contrast,
+    placeholderTextColor: globalRefs.colors.surface.main,
+    requiredIndicator: "'*'",
+
+    borderWidth: globalRefs.border.xs,
+    borderRadius: globalRefs.radius.xs,
+    borderColor: 'transparent',
+
+    outlineWidth: globalRefs.border.sm,
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
+
+    inputHeight: '2em',
+
+    backgroundColor: globalRefs.colors.surface.light,
+
+    fontFamily: globalRefs.fonts.font1.family,
+
+    size: {
+        xs: { fontSize: '8px' },
+        sm: { fontSize: '10px' },
+        md: { fontSize: '14px' },
+        lg: { fontSize: '20px' },
+        xl: { fontSize: '25px' }
+    },
+
+    _fullWidth: {
+        width: '100%',
+    },
+
+    _focused: {
+        outlineColor: globalRefs.colors.surface.main,
+        _invalid: {
+            outlineColor: globalRefs.colors.error.light,
+        }
+    },
+
+    _bordered: {
+        borderColor: globalRefs.colors.surface.main,
+        borderStyle: 'solid',
+        _invalid: {
+            borderColor: globalRefs.colors.error.main,
+        }
+    },
+
+    _disabled: {
+        labelTextColor: globalRefs.colors.surface.main,
+        valueTextColor: globalRefs.colors.surface.dark,
+        placeholderTextColor: globalRefs.colors.surface.dark,
+        backgroundColor: globalRefs.colors.surface.main
+    },
+
+    _invalid: {
+        labelTextColor: globalRefs.colors.error.main,
+        valueTextColor: globalRefs.colors.error.main,
+        placeholderTextColor: globalRefs.colors.error.light,
+    }
+}, componentName);
+
+export { refs, vars };
+export default theme;

package/src/theme/components/link.js

@@ -7,13 +7,14 @@ const vars = LinkClass.cssVarList;
 
 const link = {
 	[vars.cursor]: 'pointer',
-	[vars.borderBottomWidth]: '2px',
-	[vars.borderBottomStyle]: 'solid',
-	[vars.borderBottomColor]: 'transparent',
-	[vars.color]: globalRefs.colors.primary.main,
+
+	[vars.textUnderlineWidth]: '2px',
+	[vars.textUnderlineStyle]: 'solid',
+	[vars.textUnderlineColor]: 'transparent',
+	[vars.textColor]: globalRefs.colors.primary.main,
 
 	_hover: {
-		[vars.borderBottomColor]: globalRefs.colors.primary.main
+		[vars.textUnderlineColor]: globalRefs.colors.primary.main
 	},
 
 	textAlign: {
@@ -23,35 +24,28 @@ const link = {
 	},
 
 	_fullWidth: {
-		[vars.width]: '100%'
+		[vars.hostWidth]: '100%'
+	},
+
+	_hover: {
+		[vars.textUnderlineColor]: 'currentColor'
 	},
 
 	mode: {
 		primary: {
-			[vars.color]: globalRefs.colors.primary.main,
-			_hover: {
-				[vars.borderBottomColor]: globalRefs.colors.primary.main
-			}
+			[vars.textColor]: globalRefs.colors.primary.main,
 		},
 		secondary: {
-			[vars.color]: globalRefs.colors.secondary.main,
-			_hover: {
-				[vars.borderBottomColor]: globalRefs.colors.secondary.main
-			}
+			[vars.textColor]: globalRefs.colors.secondary.main,
 		},
 		error: {
-			[vars.color]: globalRefs.colors.error.main,
-			_hover: {
-				[vars.borderBottomColor]: globalRefs.colors.error.main
-			}
+			[vars.textColor]: globalRefs.colors.error.main,
 		},
 		success: {
-			[vars.color]: globalRefs.colors.success.main,
-			_hover: {
-				[vars.borderBottomColor]: globalRefs.colors.success.main
-			}
+			[vars.textColor]: globalRefs.colors.success.main,
 		}
 	}
 };
 
 export default link;
+export { vars }

package/src/theme/components/loader/index.js

@@ -1,2 +1,4 @@
-export { default as loaderLinear } from './loaderLinear';
-export { default as loaderRadial } from './loaderRadial';
+import * as loaderLinear from './loaderLinear'
+import * as loaderRadial from './loaderRadial'
+
+export { loaderLinear, loaderRadial };

package/src/theme/components/loader/loaderLinear.js

@@ -1,38 +1,32 @@
-import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
-import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
 
 const globalRefs = getThemeRefs(globals);
-
 const vars = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-	[vars.display]: 'inline-block',
+	[vars.hostDisplay]: 'inline-block',
+	[vars.hostWidth]: '100%',
+
 	[vars.barColor]: globalRefs.colors.surface.contrast,
 	[vars.barWidth]: '20%',
-	[vars.surfaceColor]: globalRefs.colors.surface.main,
-	[vars.borderRadius]: '4px',
+
+	[vars.barBackgroundColor]: globalRefs.colors.surface.main,
+	[vars.barBorderRadius]: '4px',
+
 	[vars.animationDuration]: '2s',
 	[vars.animationTimingFunction]: 'linear',
 	[vars.animationIterationCount]: 'infinite',
-	[vars.width]: '100%',
+
 	size: {
-		xs: {
-			[vars.height]: '6px'
-		},
-		sm: {
-			[vars.height]: '8px'
-		},
-		md: {
-			[vars.height]: '10px'
-		},
-		lg: {
-			[vars.height]: '12px'
-		},
-		xl: {
-			[vars.height]: '14px'
-		}
+		xs: { [vars.barHeight]: '8px' },
+		sm: { [vars.barHeight]: '10px' },
+		md: { [vars.barHeight]: '14px' },
+		lg: { [vars.barHeight]: '20px' },
+		xl: { [vars.barHeight]: '25px' }
 	},
+
 	mode: {
 		primary: {
 			[vars.barColor]: globalRefs.colors.primary.main
@@ -41,9 +35,11 @@ const loaderLinear = {
 			[vars.barColor]: globalRefs.colors.secondary.main
 		}
 	},
+
 	_hidden: {
-		[vars.display]: 'none'
+		[vars.hostDisplay]: 'none'
 	}
 };
 
 export default loaderLinear;
+export { vars }

package/src/theme/components/loader/loaderRadial.js

@@ -1,62 +1,48 @@
-import { LoaderRadialClass } from '../../../components/descope-loader-radial/LoaderRadialClass';
-import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
+import { LoaderRadialClass, componentName } from '../../../components/descope-loader-radial/LoaderRadialClass';
+import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
-
 const vars = LoaderRadialClass.cssVarList;
 
-const loaderRadial = {
-	[vars.display]: 'inline-block',
-	[vars.color]: globalRefs.colors.surface.contrast,
-	[vars.animationDuration]: '2s',
-	[vars.animationTimingFunction]: 'linear',
-	[vars.animationIterationCount]: 'infinite',
-	[vars.spinnerStyle]: 'solid',
-	[vars.spinnerWidth]: '4px',
-	[vars.spinnerRadius]: '50%',
-	[vars.spinnerTopColor]: 'currentColor',
-	[vars.spinnerBottomColor]: 'transparent',
-	[vars.spinnerRightColor]: 'currentColor',
-	[vars.spinnerLeftColor]: 'transparent',
-	size: {
-		xs: {
-			[vars.width]: '20px',
-			[vars.height]: '20px',
-			[vars.spinnerWidth]: '2px'
-		},
-		sm: {
-			[vars.width]: '30px',
-			[vars.height]: '30px',
-			[vars.spinnerWidth]: '3px'
-		},
-		md: {
-			[vars.width]: '40px',
-			[vars.height]: '40px',
-			[vars.spinnerWidth]: '4px'
-		},
-		lg: {
-			[vars.width]: '60px',
-			[vars.height]: '60px',
-			[vars.spinnerWidth]: '5px'
-		},
-		xl: {
-			[vars.width]: '80px',
-			[vars.height]: '80px',
-			[vars.spinnerWidth]: '6px'
-		}
-	},
+const [helperTheme, helperRefs] = createHelperVars({
+	spinnerColor: globalRefs.colors.surface.contrast,
 	mode: {
 		primary: {
-			[vars.color]: globalRefs.colors.primary.main
+			spinnerColor: globalRefs.colors.primary.main
 		},
 		secondary: {
-			[vars.color]: globalRefs.colors.secondary.main
+			spinnerColor: globalRefs.colors.secondary.main
 		}
+	}
+}, componentName);
+
+const loaderRadial = {
+	...helperTheme,
+
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.spinnerBorderStyle]: 'solid',
+	[vars.spinnerBorderWidth]: '0.2em',
+	[vars.spinnerBorderRadius]: '50%',
+	[vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+	[vars.spinnerQuadrant2Color]: 'transparent',
+	[vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+	[vars.spinnerQuadrant4Color]: 'transparent',
+
+	size: {
+		xs: { [vars.spinnerSize]: '20px' },
+		sm: { [vars.spinnerSize]: '30px' },
+		md: { [vars.spinnerSize]: '40px' },
+		lg: { [vars.spinnerSize]: '60px' },
+		xl: { [vars.spinnerSize]: '80px' }
 	},
+
 	_hidden: {
-		[vars.display]: 'none'
+		[vars.hostDisplay]: 'none'
 	}
 };
 
 export default loaderRadial;
+export { vars }

package/src/theme/components/logo.js

@@ -7,3 +7,4 @@ const logo = {
 };
 
 export default logo;
+export { vars }