@descope/web-components-ui 1.0.40 → 1.0.42

package/src/dev/index.js

@@ -1,6 +1,7 @@
-import theme from '../theme'
-import { themeToStyle } from "../themeHelpers";
+import theme from '../theme';
+import { themeToStyle } from '../themeHelpers';
 
 // this file is used for exposing stuff to the dev env only
 
-export const getDefaultThemeStyles = (themeName) => themeToStyle(theme, themeName)
+export const getDefaultThemeStyles = (themeName) =>
+	themeToStyle(theme, themeName);

package/src/helpers.js

@@ -1,8 +1,10 @@
-export const kebabCase = str => str
-.replace(/([a-z])([A-Z])/g, "$1-$2")
-.replace(/[\s_.]+/g, '-')
-.toLowerCase();
+export const kebabCase = (str) =>
+	str
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/[\s_.]+/g, '-')
+		.toLowerCase();
 
-export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
+export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-export const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`
+export const getCssVarName = (...args) =>
+	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;

package/src/index.cjs.js

@@ -1,3 +1,3 @@
 // CJS is used by screen-renderer-service, we cannot load vaadin there,
 // so we are exporting only the css generation stuff
-export * from './themeHelpers'
+export * from './themeHelpers';

package/src/index.js

@@ -1,17 +1,17 @@
-import "./components/descope-button";
-import "./components/descope-combo";
-import "./components/descope-text-field";
-import "./components/descope-number-field";
-import "./components/descope-email-field";
-import "./components/descope-password-field";
-import "./components/descope-text-area";
-import "./components/descope-date-picker";
-import "./components/descope-container";
+import './components/descope-button';
+import './components/descope-combo';
+import './components/descope-text-field';
+import './components/descope-number-field';
+import './components/descope-email-field';
+import './components/descope-password-field';
+import './components/descope-text-area';
+import './components/descope-date-picker';
+import './components/descope-container';
 
 export {
 	globalsThemeToStyle,
 	componentsThemeToStyle,
-	themeToStyle,
-} from "./themeHelpers";
-export { genColor } from "./themeHelpers/processColors";
-export { default as defaultTheme } from "./theme";
+	themeToStyle
+} from './themeHelpers';
+export { genColor } from './themeHelpers/processColors';
+export { default as defaultTheme } from './theme';

package/src/index.umd.js

@@ -1,10 +1,16 @@
-const components = import.meta.webpackContext('./components', { recursive: true, regExp: /index.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
+const components = import.meta.webpackContext('./components', {
+	recursive: true,
+	regExp: /index.js$/,
+	mode: 'lazy',
+	chunkName: '[request]',
+	prefetch: true
+});
 
 // all components must be in a folder with the component name, and have an index.js file
 // e.g. ./descope-button/index.js
 module.exports = components.keys().reduce((acc, key) => {
-  const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1')
-  acc[componentName] = () => components(key)
+	const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
+	acc[componentName] = () => components(key);
 
-  return acc;
-}, {})
+	return acc;
+}, {});

package/src/theme/components/button.js

@@ -1,6 +1,6 @@
-import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../themeHelpers";
-import Button, { componentName } from "../../components/descope-button/Button";
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../themeHelpers';
+import Button, { componentName } from '../../components/descope-button/Button';
 
 const globalRefs = getThemeRefs(globals);
 const vars = Button.cssVarList;
@@ -10,7 +10,7 @@ const mode = {
 	secondary: globalRefs.colors.secondary,
 	success: globalRefs.colors.success,
 	error: globalRefs.colors.error,
-	surface: globalRefs.colors.surface,
+	surface: globalRefs.colors.surface
 };
 
 const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
@@ -20,43 +20,43 @@ const button = {
 
 	size: {
 		xs: {
-			[vars.height]: "10px",
-			[vars.fontSize]: "10px",
-			[vars.padding]: `0 ${globalRefs.spacing.xs}`,
+			[vars.height]: '10px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`
 		},
 		sm: {
-			[vars.height]: "20px",
-			[vars.fontSize]: "10px",
-			[vars.padding]: `0 ${globalRefs.spacing.sm}`,
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`
 		},
 		md: {
-			[vars.height]: "30px",
-			[vars.fontSize]: "14px",
-			[vars.padding]: `0 ${globalRefs.spacing.md}`,
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`
 		},
 		lg: {
-			[vars.height]: "40px",
-			[vars.fontSize]: "20px",
-			[vars.padding]: `0 ${globalRefs.spacing.lg}`,
+			[vars.height]: '40px',
+			[vars.fontSize]: '20px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`
 		},
 		xl: {
-			[vars.height]: "50px",
-			[vars.fontSize]: "25px",
-			[vars.padding]: `0 ${globalRefs.spacing.xl}`,
-		},
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`
+		}
 	},
 
 	[vars.borderRadius]: globalRefs.radius.lg,
-	[vars.cursor]: "pointer",
-	[vars.borderWidth]: "2px",
-	[vars.borderStyle]: "solid",
-	[vars.borderColor]: "transparent",
+	[vars.cursor]: 'pointer',
+	[vars.borderWidth]: '2px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
 
-	_fullwidth: {
-		[vars.width]: "100%",
+	_fullWidth: {
+		[vars.width]: '100%'
 	},
 	_loading: {
-		[vars.cursor]: "wait",
+		[vars.cursor]: 'wait'
 	},
 
 	variant: {
@@ -64,11 +64,11 @@ const button = {
 			[vars.color]: helperRefs.contrast,
 			[vars.backgroundColor]: helperRefs.main,
 			_hover: {
-				[vars.backgroundColor]: helperRefs.dark,
+				[vars.backgroundColor]: helperRefs.dark
 			},
 			_loading: {
-				[vars.backgroundColor]: helperRefs.main,
-			},
+				[vars.backgroundColor]: helperRefs.main
+			}
 		},
 		outline: {
 			[vars.color]: helperRefs.main,
@@ -77,9 +77,9 @@ const button = {
 				[vars.color]: helperRefs.dark,
 				[vars.borderColor]: helperRefs.dark,
 				_error: {
-					[vars.color]: helperRefs.error,
-				},
-			},
+					[vars.color]: helperRefs.error
+				}
+			}
 		},
 		link: {
 			[vars.color]: helperRefs.main,
@@ -89,10 +89,10 @@ const button = {
 			[vars.borderRadius]: 0,
 			_hover: {
 				[vars.color]: helperRefs.main,
-				[vars.textDecoration]: "underline",
-			},
-		},
-	},
+				[vars.textDecoration]: 'underline'
+			}
+		}
+	}
 };
 
 export default button;

package/src/theme/components/container.js

@@ -18,10 +18,8 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' }
 };
 
-const [helperTheme, helperRefs, helperVars] = createHelperVars(
-	{ verticalAlignment, horizontalAlignment },
-	'container'
-);
+const [helperTheme, helperVars, helperRefs] =
+	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container')
 
 const container = {
 	...helperTheme,
@@ -72,15 +70,15 @@ const container = {
 	},
 
 	shadow: {
-		sm: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
-		},
-		md: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
+		sm: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}` 
+		},		
+		md: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}` 
+		},		
+		lg: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}` 
 		},
-		lg: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
-		}
 	},
 
 	borderRadius: {

package/src/theme/components/textArea.js

@@ -15,12 +15,12 @@ const textArea = {
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
 
-	_borderoffset: {
+	_borderOffset: {
 		[vars.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars.inputBorderColor]: globalRefs.colors.surface.main
+		[vars.borderColor]: globalRefs.colors.surface.main
 	},
 
 	_focused: {
@@ -28,7 +28,7 @@ const textArea = {
 		[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
 	},
 
-	_fullwidth: {
+	_fullWidth: {
 		[vars.width]: '100%'
 	},
 

package/src/theme/components/textField.js

@@ -61,7 +61,7 @@ export const textField = (vars) => ({
 		[vars.backgroundColor]: globalRefs.colors.surface.main
 	},
 
-	_fullwidth: {
+	_fullWidth: {
 		[vars.width]: '100%'
 	},
 

package/src/theme/globals.js

@@ -1,62 +1,70 @@
-import { genColors } from "../themeHelpers/processColors";
+import { genColors } from '../themeHelpers/processColors';
 
 export const colors = genColors({
 	surface: {
-		main: "lightgray",
-		light: "#fff",
-		dark: "#000",
+		main: 'lightgray',
+		light: '#fff',
+		dark: '#000'
 	},
-	primary: "#0082B5",
-	secondary: "#7D14EB",
-	success: "green",
-	error: "red",
+	primary: '#0082B5',
+	secondary: '#7D14EB',
+	success: 'green',
+	error: 'red'
 });
 
 const typography = {
 	h1: {
-		font: ["Courier New", "Arial", "sans-serif"],
-		weight: "700",
-		size: "48px",
+		font: ['Courier New', 'Arial', 'sans-serif'],
+		weight: '700',
+		size: '48px'
 	},
 	h2: {
-		font: ["Courier New", "sans-serif"],
-		weight: "500",
-		size: "38px",
+		font: ['Courier New', 'sans-serif'],
+		weight: '500',
+		size: '38px'
 	},
 	h3: {
-		font: ["Courier New", "sans-serif"],
-		weight: "300",
-		size: "28px",
-	},
+		font: ['Courier New', 'sans-serif'],
+		weight: '300',
+		size: '28px'
+	}
 };
 
 const spacing = {
-	xs: "2px",
-	sm: "4px",
-	md: "8px",
-	lg: "16px",
-	xl: "32px",
+	xs: '2px',
+	sm: '4px',
+	md: '8px',
+	lg: '16px',
+	xl: '32px'
 };
 
 const border = {
-	sm: "1px",
-	md: "2px",
-	lg: "3px",
+	sm: '1px',
+	md: '2px',
+	lg: '3px'
 };
 
 const radius = {
-	sm: "5px",
-	md: "25px",
-	lg: "50px",
+	sm: '5px',
+	md: '25px',
+	lg: '50px'
 };
 
 const shadow = {
-	color: colors.primary.main,
-	size: {
-		sm: `0 0 10px`,
-		md: `0 0 20px`,
-		lg: `0 0 30px`,
-	},
+		wide: {
+			sm: '0 2px 3px -0.5px',
+			md: '0 4px 6px -1px',
+			lg: '0 10px 15px -3px',
+			xl: '0 20px 25px -5px',
+			'2xl': '0 25px 50px -12px',
+		},
+		narrow: {
+			sm: '0 1px 2px -1px',
+			md: '0 2px 4px -2px',
+			lg: '0 4px 6px -4px',
+			xl: '0 8px 10px -6px',
+			'2xl': '0 16px 16px -8px',
+		}
 };
 
 export default {
@@ -65,5 +73,5 @@ export default {
 	spacing,
 	border,
 	radius,
-	shadow,
+	shadow
 };

package/src/theme/index.js

@@ -1,4 +1,4 @@
-import globals from "./globals"
+import globals from './globals';
 import components from './components';
 
-export default { globals, components }
+export default { globals, components };

package/src/themeHelpers/index.js

@@ -1,10 +1,10 @@
-import merge from "lodash.merge";
-import set from "lodash.set";
-import { DESCOPE_PREFIX } from "../constants";
-import { getCssVarName, kebabCase } from "../helpers";
-import { getComponentName } from "../componentsHelpers";
+import merge from 'lodash.merge';
+import set from 'lodash.set';
+import { DESCOPE_PREFIX } from '../constants';
+import { getCssVarName, kebabCase } from '../helpers';
+import { getComponentName } from '../componentsHelpers';
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
 const transformTheme = (theme, path, getTransformation) => {
 	return Object.entries(theme).reduce((acc, [key, val]) => {
@@ -16,79 +16,94 @@ const transformTheme = (theme, path, getTransformation) => {
 	}, {});
 };
 
-const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ")
+const stringifyArray = (strArr) =>
+	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
 export const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
 	}));
 
 export const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+	transformTheme(theme, [], (path) =>
+		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+	);
 
 export const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
-)}
+		(acc, entry) => (acc += `${entry.join(':')};\n`),
+		''
+	)}
 }
-`
+`;
 
 const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
-		const [component, ...restPath] = path
-		const property = restPath.pop()
+		const [component, ...restPath] = path;
+		const property = restPath.pop();
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
+			if (section.startsWith('_'))
+				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
 
 			const nextSection = restPath[idx + 1];
 
 			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`)
+				console.error(
+					'theme generator',
+					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+				);
 				return acc;
 			}
 
-			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return (acc += `[${kebabCase(section)}="${restPath
+				.splice(idx + 1, 1)
+				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`
+		let selector = `${getComponentName(component)}${attrsSelector}`;
 
 		return {
 			[selector]: {
 				[property]: val
 			}
-		}
+		};
 	});
 
 export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
 	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
-		(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
+		(acc, [selector, vars]) =>
+			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
+				vars
+			)
+				.map(([key, val]) => `${key}: ${val}`)
+				.join(';\n')} \n}\n\n`),
 		''
 	);
 
 export const themeToStyle = ({ globals, components }, themeName) => `
 ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
-`
+`;
 
-const useVar = varName => `var(${varName})`
+const useVar = (varName) => `var(${varName})`;
 
 export const createHelperVars = (theme, prefix) => {
 	const res = transformTheme(theme, [], (path, value) => {
 		const modifiedPath = [...path];
-		const property = modifiedPath.splice(-1)
-		const varName = getCssVarName(prefix, property)
+		const property = modifiedPath.splice(-1);
+		const varName = getCssVarName(prefix, property);
 
-		const vars = { [property]: varName }
-		const theme = set({}, [...modifiedPath, varName], value)
-		const useVars = { [property]: useVar(varName) }
+		const vars = { [property]: varName };
+		const theme = set({}, [...modifiedPath, varName], value);
+		const useVars = { [property]: useVar(varName) };
 
-		return { theme, useVars, vars }
-	})
+		return { theme, useVars, vars };
+	});
 
-	return [res.theme, res.useVars, res.vars]
+	return [res.theme, res.useVars, res.vars];
 };

package/src/themeHelpers/processColors.js

@@ -1,10 +1,13 @@
-import Color from "color";
+import Color from 'color';
 
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
 	const isDark = c.isDark();
-	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+	return c
+		.mix(Color(isDark ? 'white' : 'black'), percentage)
+		.saturate(1)
+		.hex();
 };
 
 export const genColor = (color) => {
@@ -14,16 +17,16 @@ export const genColor = (color) => {
 		main: mainColor.hex(),
 		dark: color.dark || genDark(mainColor),
 		light: color.light || genLight(mainColor),
-		contrast: color.contrast || genContrast(mainColor),
-	}
-}
+		contrast: color.contrast || genContrast(mainColor)
+	};
+};
 
 export const genColors = (colors) => {
 	return Object.keys(colors).reduce((acc, colorName) => {
 		const currentColor = colors[colorName];
 
 		return Object.assign(acc, {
-			[colorName]: genColor(currentColor),
-		})
+			[colorName]: genColor(currentColor)
+		});
 	}, {});
 };