@descope/web-components-ui 1.0.114 → 1.0.116

package/src/theme/components/emailField.js

@@ -1,9 +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 const vars = EmailFieldClass.cssVarList
+export { vars };

package/src/theme/components/image.js

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

package/src/theme/components/index.js

@@ -17,6 +17,7 @@ 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';
 
 const components = {
 	button,
@@ -39,11 +40,11 @@ const components = {
 	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 }
+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,33 +24,25 @@ 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,
 		}
 	}
 };

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,10 +35,11 @@ const loaderLinear = {
 			[vars.barColor]: globalRefs.colors.secondary.main
 		}
 	},
+
 	_hidden: {
-		[vars.display]: 'none'
+		[vars.hostDisplay]: 'none'
 	}
 };
 
 export default loaderLinear;
-export { vars }
+export { vars }

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

@@ -1,63 +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 }
+export { vars }

package/src/theme/components/logo.js

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

package/src/theme/components/newPassword.js

@@ -1,36 +1,21 @@
 import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
+import { refs } from "./inputWrapper"
 
 const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
-	[vars.inputsGap]: '1em',
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.spaceBetweenInputs]: '1em',
 
 	_required: {
-		[vars.requiredContent]: "'*'",
-	},
-
-	_fullWidth: {
-		[vars.componentWidth]: '100%'
-	},
-
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
+		// NewPassword doesn't pass `required` attribute to its PasswordFields.
+		// That's why we fake the required indicator on each input.
+		// We do that by injecting `::after` element, and populating it with requiredIndicator content.
+		[vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+	}
 };
 
 export default newPassword;
-export { vars }
+export { vars }

package/src/theme/components/numberField.js

@@ -1,9 +1,27 @@
 import { NumberFieldClass } from '../../components/descope-number-field/NumberFieldClass';
-import { textField } from './textField';
+import { refs } from './inputWrapper';
+
+const vars = NumberFieldClass.cssVarList;
 
 const numberField = {
-	...textField(NumberFieldClass.cssVarList)
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[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.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputHeight]: refs.inputHeight,
 };
 
 export default numberField;
-export const vars = NumberFieldClass.cssVarList
+export { vars };

package/src/theme/components/passcode.js

@@ -1,43 +1,32 @@
-import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
 import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
+import { refs } from './inputWrapper';
 
-const vars = PasscodeClass.cssVarList
 const globalRefs = getThemeRefs(globals);
+const vars = PasscodeClass.cssVarList
 
 const passcode = {
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-	[vars.outlineWidth]: '2px',
-	[vars.outlineColor]: 'transparent',
-	[vars.padding]: '0',
-	[vars.textAlign]: 'center',
-	[vars.borderColor]: 'transparent',
-	[vars.digitsGap]: '0',
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.digitValueTextColor]: refs.valueTextColor,
+	[vars.digitPadding]: '0',
+	[vars.digitTextAlign]: 'center',
+	[vars.digitSpacing]: '0',
+	[vars.hostWidth]: refs.width,
+	[vars.digitOutlineColor]: 'transparent',
+	[vars.digitOutlineWidth]: '2px',
 	[vars.focusedDigitFieldOutlineColor]: globalRefs.colors.surface.main,
-	[vars.color]: globalRefs.colors.surface.contrast,
 
 	_hideCursor: {
-		[vars.caretColor]: 'transparent',
-	},
-
-	_disabled: {
-		[vars.backgroundColor]: globalRefs.colors.surface.main
-	},
-
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
-
-	_bordered: {
-		[vars.borderColor]: globalRefs.colors.surface.main
+		[vars.digitCaretTextColor]: 'transparent',
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs.colors.error.main,
-		[vars.color]: globalRefs.colors.error.main,
 		[vars.focusedDigitFieldOutlineColor]: globalRefs.colors.error.light,
-	},
+	}
 }
 
 export default passcode;
-export { vars }
+export { vars }

package/src/theme/components/passwordField.js

@@ -1,73 +1,27 @@
 import { PasswordFieldClass } from '../../components/descope-password-field/PasswordFieldClass';
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-
-const globalRefs = getThemeRefs(globals);
+import { refs } from './inputWrapper';
 
 const vars = PasswordFieldClass.cssVarList;
 
 const passwordField = {
-	[vars.wrapperBorderStyle]: 'solid',
-	[vars.wrapperBorderWidth]: '1px',
-	[vars.wrapperBorderColor]: 'transparent',
-	[vars.wrapperBorderRadius]: globalRefs.radius.xs,
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-
-	[vars.outlineWidth]: '2px',
-	[vars.outlineStyle]: 'solid',
-	[vars.outlineColor]: 'transparent',
-
-	[vars.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs.colors.surface.main}`,
-
-
-	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
-	[vars.inputTextColor]: globalRefs.colors.surface.contrast,
-	[vars.placeholderTextColor]: globalRefs.colors.surface.main,
-
-	[vars.pointerCursor]: 'pointer',
-
-	[vars.padding]: '0',
-	[vars.height]: '2em',
-
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
-
-	_bordered: {
-		[vars.padding]: '0 0.5em',
-		[vars.wrapperBorderColor]: globalRefs.colors.surface.main
-	},
-
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
-
-	_focused: {
-		[vars.outlineColor]: globalRefs.colors.surface.main
-	},
-
-	_invalid: {
-		[vars.labelTextColor]: globalRefs.colors.error.main,
-		[vars.inputTextColor]: globalRefs.colors.error.main,
-		[vars.placeholderTextColor]: globalRefs.colors.error.light,
-		[vars.wrapperBorderColor]: globalRefs.colors.error.main,
-		[vars.outlineColor]: globalRefs.colors.error.light,
-	},
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputHeight]: refs.inputHeight,
+	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[vars.inputPlaceholderTextColor]: 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,
 };
 
 export default passwordField;
-export { vars }
+export { vars }