@descope/web-components-ui 1.0.114 → 1.0.115

package/src/theme/components/switchToggle.js

@@ -1,76 +1,62 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import { SwitchToggleClass } from '../../components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
+import { refs } from './inputWrapper';
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
-const trackBorderWidth = '2px';
 
 const globalRefs = getThemeRefs(globals);
 const vars = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-    size: {
-        xs: { [vars.fontSize]: '8px' },
-        sm: { [vars.fontSize]: '12px' },
-        md: { [vars.fontSize]: '16px' },
-        lg: { [vars.fontSize]: '20px' },
-        xl: { [vars.fontSize]: '24px' }
-    },
+    [vars.fontSize]: refs.fontSize,
+    [vars.fontFamily]: refs.fontFamily,
 
-    [vars.cursor]: 'pointer',
+    [vars.inputOutlineWidth]: refs.outlineWidth,
+    [vars.inputOutlineOffset]: refs.outlineOffset,
+    [vars.inputOutlineColor]: refs.outlineColor,
+    [vars.inputOutlineStyle]: refs.outlineStyle,
 
-    [vars.trackBorderStyle]: 'solid',
-    [vars.trackBorderWidth]: trackBorderWidth,
+    [vars.trackBorderStyle]: refs.borderStyle,
+    [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
     [vars.trackBorderColor]: globalRefs.colors.surface.contrast,
-
     [vars.trackBackgroundColor]: 'none',
-    [vars.trackRadius]: globalRefs.radius.md,
-    [vars.trackWidth]: '2.5em',
+    [vars.trackBorderRadius]: globalRefs.radius.md,
+    [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
     [vars.trackHeight]: checkboxHeight,
 
     [vars.knobSize]: `calc(1em - ${knobMargin})`,
     [vars.knobRadius]: '50%',
     [vars.knobTopOffset]: '1px',
-    [vars.knobColor]: globalRefs.colors.surface.contrast,
-    [vars.knobPosition]: knobMargin,
-    [vars.knobTransition]: '0.3s',
+    [vars.knobLeftOffset]: knobMargin,
+    [vars.knobColor]: refs.valueTextColor,
+    [vars.knobTransitionDuration]: '0.3s',
 
-    [vars.labelTextColor]: globalRefs.colors.surface.contrast,
+    [vars.labelTextColor]: refs.labelTextColor,
     [vars.labelFontWeight]: '400',
     [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-    [vars.labelMargin]: '0.25em',
+    [vars.labelSpacing]: '0.25em',
+    [vars.labelRequiredIndicator]: refs.requiredIndicator,
 
-    _fullWidth: {
-        [vars.width]: '100%',
-    },
+    [vars.hostWidth]: refs.width,
 
     _checked: {
         [vars.trackBorderColor]: globalRefs.colors.primary.main,
-        [vars.knobPosition]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
+        [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
         [vars.knobColor]: globalRefs.colors.primary.main,
-        [vars.knobTextColor]: globalRefs.colors.primary.contrast,
+        [vars.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars.cursor]: 'not-allowed', // todo: fix cursor
         [vars.knobColor]: globalRefs.colors.surface.main,
         [vars.trackBorderColor]: globalRefs.colors.surface.main,
         [vars.trackBackgroundColor]: globalRefs.colors.surface.light,
     },
 
-    _focused: {
-        [vars.switchOutlineWidth]: '2px',
-        [vars.switchOutlineOffset]: '1px',
-        [vars.switchOutlineColor]: globalRefs.colors.primary.main,
-        [vars.switchOutlineStyle]: 'solid'
-    },
-
     _invalid: {
-        [vars.switchOutlineColor]: globalRefs.colors.error.main,
         [vars.trackBorderColor]: globalRefs.colors.error.main,
         [vars.knobColor]: globalRefs.colors.error.main,
-        [vars.labelTextColor]: globalRefs.colors.error.main
     },
 };
 

package/src/theme/components/text.js

@@ -3,13 +3,12 @@ import { getThemeRefs } from '../../helpers/themeHelpers';
 import { TextClass } from '../../components/descope-text/TextClass';
 
 const globalRefs = getThemeRefs(globals);
-
 const vars = TextClass.cssVarList;
 
 const text = {
-	[vars.lineHeight]: '1em',
+	[vars.textLineHeight]: '1em',
 	[vars.textAlign]: 'left',
-	[vars.color]: globalRefs.colors.surface.dark,
+	[vars.textColor]: globalRefs.colors.surface.dark,
 	variant: {
 		h1: {
 			[vars.fontSize]: globalRefs.typography.h1.size,
@@ -47,38 +46,44 @@ const text = {
 			[vars.fontFamily]: globalRefs.typography.body2.font
 		}
 	},
+
 	mode: {
 		primary: {
-			[vars.color]: globalRefs.colors.primary.main
+			[vars.textColor]: globalRefs.colors.primary.main
 		},
 		secondary: {
-			[vars.color]: globalRefs.colors.secondary.main
+			[vars.textColor]: globalRefs.colors.secondary.main
 		},
 		error: {
-			[vars.color]: globalRefs.colors.error.main
+			[vars.textColor]: globalRefs.colors.error.main
 		},
 		success: {
-			[vars.color]: globalRefs.colors.success.main
+			[vars.textColor]: globalRefs.colors.success.main
 		}
 	},
+
 	textAlign: {
 		right: { [vars.textAlign]: 'right' },
 		left: { [vars.textAlign]: 'left' },
 		center: { [vars.textAlign]: 'center' }
 	},
+
 	_fullWidth: {
-		[vars.width]: '100%',
+		[vars.hostWidth]: '100%',
 	},
+
 	_italic: {
 		[vars.fontStyle]: 'italic'
 	},
+
 	_uppercase: {
 		[vars.textTransform]: 'uppercase'
 	},
+
 	_lowercase: {
 		[vars.textTransform]: 'lowercase'
 	}
 };
 
 export default text;
-export { vars }
+export { vars }

package/src/theme/components/textArea.js

@@ -1,55 +1,38 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
+import { refs } from './inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextAreaClass.cssVarList;
 
 const textArea = {
-	[vars.labelColor]: globalRefs.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs.colors.surface.main,
-	[vars.color]: globalRefs.colors.surface.contrast,
+	[vars.hostWidth]: refs.width,
 	[vars.fontSize]: '14px',
-
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-	[vars.resize]: 'vertical',
-
-	[vars.borderRadius]: globalRefs.radius.sm,
-	[vars.borderWidth]: '1px',
-	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
-	[vars.outlineWidth]: '2px',
-	[vars.outlineStyle]: 'solid',
-	[vars.outlineColor]: 'transparent',
-	[vars.outlineOffset]: '0',
-
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
-
-	_focused: {
-		[vars.outlineColor]: globalRefs.colors.surface.main
-	},
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputBorderWidth]: refs.borderWidth,
+	[vars.inputBorderStyle]: refs.borderStyle,
+	[vars.inputBorderColor]: refs.borderColor,
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputResizeType]: 'vertical',
 
 	_disabled: {
-		[vars.cursor]: 'not-allowed'
-	},
-
-	_bordered: {
-		[vars.borderColor]: globalRefs.colors.surface.main,
-	},
-
-	_invalid: {
-		[vars.labelColor]: globalRefs.colors.error.main,
-		[vars.borderColor]: globalRefs.colors.error.main,
-		[vars.outlineColor]: globalRefs.colors.error.light,
-		[vars.placeholderColor]: globalRefs.colors.error.light,
+		[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
 	},
 
 	_readonly: {
-		[vars.resize]: 'none',
+		[vars.inputResizeType]: 'none',
 	}
 };
 
 export default textArea;
-export { vars }
+export { vars }

package/src/theme/components/textField.js

@@ -1,74 +1,27 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
 import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
-
-const globalRefs = getThemeRefs(globals);
+import { refs } from './inputWrapper';
 
 const vars = TextFieldClass.cssVarList;
 
-export const textField = (vars) => ({
-	[vars.padding]: '0 1em',
-
-	[vars.outlineWidth]: '2px',
-	[vars.outlineStyle]: 'solid',
-	[vars.outlineColor]: 'transparent',
-
-	[vars.height]: '2em',
-
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
-
-	[vars.color]: globalRefs.colors.surface.contrast,
-	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs.colors.surface.main,
-
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-
-	[vars.borderWidth]: '1px',
-	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs.radius.xs,
-
-	_disabled: {
-		[vars.color]: globalRefs.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs.colors.surface.light,
-		[vars.backgroundColor]: globalRefs.colors.surface.main
-	},
-
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
-
-	_focused: {
-		[vars.outlineColor]: globalRefs.colors.surface.main
-	},
-
-	_bordered: {
-		[vars.borderColor]: globalRefs.colors.surface.main
-	},
-
-	_invalid: {
-		[vars.borderColor]: globalRefs.colors.error.main,
-		[vars.color]: globalRefs.colors.error.main,
-		[vars.outlineColor]: globalRefs.colors.error.light,
-		[vars.placeholderColor]: globalRefs.colors.error.light
-	}
+export const textField = ({
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[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.inputHeight]: refs.inputHeight,
 });
 
-export default textField(vars);
-export { vars }
+export default textField;
+export { vars }