@descope/web-components-ui 1.0.112 → 1.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.112",
+	"version": "1.0.114",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -19,7 +19,7 @@
 		"lint": "echo \"Error: no lint specified\" && exit 0",
 		"build:umd": "webpack -c webpack.prod.js",
 		"build:lib": "rollup -c",
-		"build": "npm run build:umd && npm run build:lib && cp index.d.ts dist",
+		"build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
 		"start": "webpack serve -c webpack.dev.js --port=8888",
 		"format": "prettier . -w --ignore-path .gitignore"
 	},

package/src/dev/index.js

@@ -1,2 +1,2 @@
-export { default as defaultTheme } from '../theme';
+export { defaultTheme } from '../theme';
 export { themeToStyle } from '../helpers/themeHelpers';

package/src/helpers/themeHelpers/index.js

@@ -40,6 +40,11 @@ export const getThemeRefs = (theme, prefix) =>
 		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
 	);
 
+export const getThemeVars = (theme, prefix) =>
+	transformTheme(theme, [], (path) =>
+		set({}, path, getVarName(prefix ? [prefix, ...path] : path))
+	);
+
 export const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
@@ -55,7 +60,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		const property = restPath.pop();
 		const componentName = getComponentName(component);
 
-		if(property === 'undefined'){
+		if (property === 'undefined') {
 			console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`)
 		}
 

package/src/index.cjs.js

@@ -1,7 +1,9 @@
-// CJS is used by screen-renderer-service, we cannot load vaadin there,
-// so we are exporting only the css generation stuff
+// CJS is used by screen-renderer-service, we cannot export client stuff here (except HTMLElement class),
+
 export * from './helpers/themeHelpers';
 export * from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+
 export { CheckboxClass } from './components/boolean-fields/descope-checkbox/CheckboxClass'
 export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle/SwitchToggleClass'
 export { ButtonClass } from './components/descope-button/ButtonClass';

package/src/index.d.ts

@@ -0,0 +1,49 @@
+declare module '@descope/web-components-ui';
+
+export {
+	globalsThemeToStyle,
+	createComponentsTheme,
+	themeToStyle,
+	componentsThemeManager,
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+
+export { ButtonClass } from './components/descope-button';
+export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
+export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';
+export { LoaderLinearClass } from './components/descope-loader-linear';
+export { LoaderRadialClass } from './components/descope-loader-radial';
+export { ContainerClass } from './components/descope-container';
+export { DividerClass } from './components/descope-divider';
+export { EmailFieldClass } from './components/descope-email-field';
+export { LinkClass } from './components/descope-link';
+export { LogoClass } from './components/descope-logo';
+export { NumberFieldClass } from './components/descope-number-field';
+export { PasscodeClass } from './components/descope-passcode';
+export { PasswordFieldClass } from './components/descope-password-field';
+export { TextClass } from './components/descope-text';
+export { TextAreaClass } from './components/descope-text-area';
+export { TextFieldClass } from './components/descope-text-field';
+export { ImageClass } from './components/descope-image';
+export { PhoneFieldClass } from './components/descope-phone-field';
+export { NewPasswordClass } from './components/descope-new-password';
+
+export type Theme = {
+	globals: {
+		colors: Record<string, string>;
+		fonts: Record<string, any>;
+		typography: Record<string, any>;
+		shadow: Record<string, string>;
+		spacing: Record<string, string>;
+	};
+	components: {
+		button: Record<string, any>;
+		textField: Record<string, any>;
+		logo: Record<string, any>;
+		container: Record<string, any>;
+		link: Record<string, any>;
+		button: Record<string, any>;
+		text: Record<string, any>;
+	};
+};

package/src/index.js

@@ -26,4 +26,4 @@ export {
 	componentsThemeManager
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
-export { default as defaultTheme } from './theme';
+export { defaultTheme, themeVars } from './theme';

package/src/theme/components/button.js

@@ -3,7 +3,7 @@ import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import { componentName, ButtonClass } from '../../components/descope-button/ButtonClass';
 
 const globalRefs = getThemeRefs(globals);
-const vars = ButtonClass.cssVarList;
+const compVars = ButtonClass.cssVarList;
 
 const mode = {
 	primary: globalRefs.colors.primary,
@@ -13,7 +13,7 @@ const mode = {
 	surface: globalRefs.colors.surface
 };
 
-const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -21,68 +21,69 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme,
 
-	[vars.cursor]: 'pointer',
+	[compVars.cursor]: 'pointer',
 
-	[vars.borderRadius]: globalRefs.radius.sm,
-	[vars.borderWidth]: '2px',
-	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
+	[compVars.borderRadius]: globalRefs.radius.sm,
+	[compVars.borderWidth]: '2px',
+	[compVars.borderStyle]: 'solid',
+	[compVars.borderColor]: 'transparent',
 
-	[vars.gap]: '0.25em',
+	[compVars.gap]: '0.25em',
 
-	[vars.verticalPadding]: `calc(var(${vars.fontSize}) / ${verticalPaddingRatio})`,
-	[vars.horizontalPadding]: `calc(var(${vars.fontSize}) / ${horizontalPaddingRatio})`,
+	[compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
+	[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
 
 	size: {
-		xs: { [vars.fontSize]: '12px' },
-		sm: { [vars.fontSize]: '14px' },
-		md: { [vars.fontSize]: '18px' },
-		lg: { [vars.fontSize]: '22px' },
-		xl: { [vars.fontSize]: '26px' }
+		xs: { [compVars.fontSize]: '12px' },
+		sm: { [compVars.fontSize]: '14px' },
+		md: { [compVars.fontSize]: '18px' },
+		lg: { [compVars.fontSize]: '22px' },
+		xl: { [compVars.fontSize]: '26px' }
 	},
 
 	_fullWidth: {
-		[vars.width]: '100%'
+		[compVars.width]: '100%'
 	},
 
 	_loading: {
-		[vars.cursor]: 'wait'
+		[compVars.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars.color]: helperRefs.contrast,
-			[vars.backgroundColor]: helperRefs.main,
+			[compVars.color]: helperRefs.contrast,
+			[compVars.backgroundColor]: helperRefs.main,
 			_hover: {
-				[vars.backgroundColor]: helperRefs.dark
+				[compVars.backgroundColor]: helperRefs.dark
 			},
 			_active: {
-				[vars.backgroundColor]: helperRefs.dark
+				[compVars.backgroundColor]: helperRefs.dark
 			}
 		},
 
 		outline: {
-			[vars.color]: helperRefs.main,
-			[vars.borderColor]: 'currentColor',
+			[compVars.color]: helperRefs.main,
+			[compVars.borderColor]: 'currentColor',
 			_hover: {
-				[vars.color]: helperRefs.dark,
+				[compVars.color]: helperRefs.dark,
 			},
 			_active: {
-				[vars.color]: helperRefs.light,
+				[compVars.color]: helperRefs.light,
 			}
 		},
 
 		link: {
-			[vars.color]: helperRefs.main,
+			[compVars.color]: helperRefs.main,
 			_hover: {
-				[vars.color]: helperRefs.main,
-				[vars.textDecoration]: 'underline'
+				[compVars.color]: helperRefs.main,
+				[compVars.textDecoration]: 'underline'
 			},
 			_active: {
-				[vars.color]: helperRefs.dark
+				[compVars.color]: helperRefs.dark
 			}
 		}
 	}
 };
 
 export default button;
+export const vars = { ...compVars, ...helperVars }

package/src/theme/components/checkbox.js

@@ -62,3 +62,4 @@ const checkbox = {
 };
 
 export default checkbox;
+export { vars }

package/src/theme/components/comboBox.js

@@ -53,3 +53,4 @@ export const comboBox = {
 };
 
 export default comboBox;
+export { vars }

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' },
@@ -27,35 +27,35 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars.width]: '100%',
-	[vars.boxShadow]: 'none',
-	[vars.backgroundColor]: globalRefs.colors.surface.light,
-	[vars.color]: globalRefs.colors.surface.contrast,
+	[compVars.width]: '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' },
 			}
 		},
 
 		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' }
 			}
@@ -64,55 +64,56 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars.gap]: '10px'
+			[compVars.gap]: '10px'
 		},
 		md: {
-			[vars.gap]: '20px'
+			[compVars.gap]: '20px'
 		},
 		lg: {
-			[vars.gap]: '30px'
+			[compVars.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[compVars.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}`
+			[compVars.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}`
+			[compVars.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}`
+			[compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars.borderRadius]: globalRefs.radius.sm
+			[compVars.borderRadius]: globalRefs.radius.sm
 		},
 		md: {
-			[vars.borderRadius]: globalRefs.radius.md
+			[compVars.borderRadius]: globalRefs.radius.md
 		},
 		lg: {
-			[vars.borderRadius]: globalRefs.radius.lg
+			[compVars.borderRadius]: globalRefs.radius.lg
 		},
 		xl: {
-			[vars.borderRadius]: globalRefs.radius.xl
+			[compVars.borderRadius]: globalRefs.radius.xl
 		},
 		'2xl': {
-			[vars.borderRadius]: globalRefs.radius['2xl']
+			[compVars.borderRadius]: globalRefs.radius['2xl']
 		},
 		'3xl': {
-			[vars.borderRadius]: globalRefs.radius['3xl']
+			[compVars.borderRadius]: globalRefs.radius['3xl']
 		},
 	}
 };
 
 export default container;
+export const vars = { ...compVars, ...helperVars }

package/src/theme/components/divider.js

@@ -4,33 +4,34 @@ import globals from '../globals';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = DividerClass.cssVarList;
+const compVars = DividerClass.cssVarList;
 
 const thickness = '2px'
 const textPaddingSize = '10px'
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, 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.dividerHeight]: helperRefs.thickness,
+	[compVars.backgroundColor]: globalRefs.colors.surface.main,
+	[compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
+	[compVars.width]: '100%',
+	[compVars.flexDirection]: 'row',
+	[compVars.alignSelf]: 'strech',
+	[compVars.textWidth]: 'fit-content',
+	[compVars.maxTextWidth]: 'calc(100% - 100px)',
 	_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.padding]: `0 calc(${thickness} * 3)`,
+		[compVars.width]: 'fit-content',
+		[compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
+		[compVars.flexDirection]: 'column',
+		[compVars.minHeight]: '200px',
+		[compVars.textWidth]: 'fit-content',
+		[compVars.dividerWidth]: helperRefs.thickness,
+		[compVars.maxTextWidth]: '100%',
 	}
 };
 
 export default divider;
+export const vars = { ...compVars, ...helperVars }

package/src/theme/components/emailField.js

@@ -6,3 +6,4 @@ const emailField = {
 };
 
 export default emailField;
+export const vars = EmailFieldClass.cssVarList

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,24 @@
-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';
 
-export default {
+const components = {
 	button,
 	textField,
 	passwordField,
@@ -39,4 +39,11 @@ export default {
 	image,
 	phoneField,
 	newPassword,
-};
+}
+
+
+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/link.js

@@ -55,3 +55,4 @@ const link = {
 };
 
 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

@@ -47,3 +47,4 @@ const loaderLinear = {
 };
 
 export default loaderLinear;
+export { vars }

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

@@ -60,3 +60,4 @@ const loaderRadial = {
 };
 
 export default loaderRadial;
+export { vars }

package/src/theme/components/logo.js

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

package/src/theme/components/newPassword.js

@@ -33,3 +33,4 @@ const newPassword = {
 };
 
 export default newPassword;
+export { vars }

package/src/theme/components/numberField.js

@@ -6,3 +6,4 @@ const numberField = {
 };
 
 export default numberField;
+export const vars = NumberFieldClass.cssVarList

package/src/theme/components/passcode.js

@@ -40,3 +40,4 @@ const passcode = {
 }
 
 export default passcode;
+export { vars }

package/src/theme/components/passwordField.js

@@ -70,3 +70,4 @@ const passwordField = {
 };
 
 export default passwordField;
+export { vars }

package/src/theme/components/phoneField.js

@@ -68,5 +68,5 @@ const phoneField = {
 };
 
 export default phoneField;
-
+export { vars }
 

package/src/theme/components/switchToggle.js

@@ -75,3 +75,4 @@ const switchToggle = {
 };
 
 export default switchToggle;
+export { vars }

package/src/theme/components/text.js

@@ -81,3 +81,4 @@ const text = {
 };
 
 export default text;
+export { vars }

package/src/theme/components/textArea.js

@@ -52,3 +52,4 @@ const textArea = {
 };
 
 export default textArea;
+export { vars }

package/src/theme/components/textField.js

@@ -71,3 +71,4 @@ export const textField = (vars) => ({
 });
 
 export default textField(vars);
+export { vars }

package/src/theme/globals.js

@@ -1,6 +1,7 @@
-import { getThemeRefs } from '../helpers/themeHelpers';
+import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
 import { genColors } from '../helpers/themeHelpers/colorsHelpers';
 
+
 export const colors = genColors({
 	surface: {
 		main: 'lightgray',
@@ -138,7 +139,7 @@ const shadow = {
 	}
 };
 
-export default {
+const globals = {
 	colors,
 	typography,
 	spacing,
@@ -147,3 +148,6 @@ export default {
 	shadow,
 	fonts
 };
+
+export default globals
+export const vars = getThemeVars(globals)

package/src/theme/index.js

@@ -1,4 +1,5 @@
-import globals from './globals';
-import components from './components';
+import globals, { vars as globalsVars } from './globals';
+import components, { vars as componentsVars } from './components';
 
-export default { globals, components };
+export const defaultTheme = { globals, components };
+export const themeVars = { globals: globalsVars, components: componentsVars }