@descope/web-components-ui 1.0.83 → 1.0.85

package/src/theme/components/checkbox.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import Checkbox from '../../components/descope-checkbox/Checkbox';
+import Checkbox from '../../components/boolean-fields/descope-checkbox/Checkbox';
 
 const globalRefs = getThemeRefs(globals);
 const vars = Checkbox.cssVarList;
@@ -17,36 +17,33 @@ const checkbox = {
 	[vars.checkboxHeight]: 'calc(1em - 2px)',
 	[vars.labelMargin]: 'calc(1em + 5px)',
 
+	[vars.checkboxRadius]: globalRefs.radius.sm,
+
 	size: {
 		xs: {
 			[vars.labelFontSize]: '12px',
 			[vars.labelLineHeight]: '1.1em',
 			[vars.checkmarkSize]: '18px',
-			[vars.checkboxRadius]: globalRefs.radius.sm,
 		},
 		sm: {
 			[vars.labelFontSize]: '14px',
 			[vars.labelLineHeight]: '1.2em',
 			[vars.checkmarkSize]: '22px',
-			[vars.checkboxRadius]: globalRefs.radius.sm,
 		},
 		md: {
 			[vars.labelFontSize]: '16px',
 			[vars.labelLineHeight]: '1.35em',
 			[vars.checkmarkSize]: '26px',
-			[vars.checkboxRadius]: globalRefs.radius.sm,
 		},
 		lg: {
 			[vars.labelFontSize]: '20px',
 			[vars.labelLineHeight]: '1.5em',
 			[vars.checkmarkSize]: '34px',
-			[vars.checkboxRadius]: globalRefs.radius.sm,
 		},
 		xl: {
 			[vars.labelFontSize]: '20px',
 			[vars.labelLineHeight]: '1.75em',
 			[vars.checkmarkSize]: '38px',
-			[vars.checkboxRadius]: globalRefs.radius.sm,
 		}
 	},
 

package/src/theme/components/container.js

@@ -43,6 +43,7 @@ const container = {
 			[vars.flexDirection]: 'row',
 			[vars.alignItems]: helperRefs.verticalAlignment,
 			[vars.justifyContent]: helperRefs.horizontalAlignment,
+			[vars.flexWrap]: 'wrap',
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}

package/src/theme/components/switchToggle.js

@@ -1,10 +1,77 @@
-import SwitchToggle from '../../components/descope-switch-toggle/SwitchToggle';
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import SwitchToggle from '../../components/boolean-fields/descope-switch-toggle/SwitchToggle';
 
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
+const trackBorderWidth = '2px';
+
+const globalRefs = getThemeRefs(globals);
 const vars = SwitchToggle.cssVarList;
 
 const switchToggle = {
-    [vars.width]: '70px',
-    [vars.cursor]: [{}, { selector: '> label' }]
+    size: {
+        xs: { [vars.fontSize]: '8px' },
+        sm: { [vars.fontSize]: '12px' },
+        md: { [vars.fontSize]: '16px' },
+        lg: { [vars.fontSize]: '20px' },
+        xl: { [vars.fontSize]: '24px' }
+    },
+
+    [vars.cursor]: 'pointer',
+
+    [vars.trackBorderStyle]: 'solid',
+    [vars.trackBorderWidth]: trackBorderWidth,
+    [vars.trackBorderColor]: globalRefs.colors.surface.contrast,
+
+    [vars.trackBackgroundColor]: 'none',
+    [vars.trackRadius]: globalRefs.radius.md,
+    [vars.trackWidth]: '2.5em',
+    [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.labelTextColor]: globalRefs.colors.surface.contrast,
+    [vars.labelFontWeight]: '400',
+    [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+    [vars.labelMargin]: '0.25em',
+
+    _fullWidth: {
+        [vars.width]: '100%',
+    },
+
+    _checked: {
+        [vars.trackBorderColor]: globalRefs.colors.primary.main,
+        [vars.knobPosition]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
+        [vars.knobColor]: globalRefs.colors.primary.main,
+        [vars.knobTextColor]: globalRefs.colors.primary.contrast,
+    },
+
+    _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,
+    },
+
+    _focusRing: {
+        [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
+    },
 };
 
-export default switchToggle;
+export default switchToggle;