@descope/web-components-ui 1.0.135 → 1.0.148

package/src/theme/components/text.js

@@ -6,84 +6,84 @@ const globalRefs = getThemeRefs(globals);
 const vars = TextClass.cssVarList;
 
 const text = {
-	[vars.textLineHeight]: '1em',
-	[vars.textAlign]: 'left',
-	[vars.textColor]: globalRefs.colors.surface.dark,
-	variant: {
-		h1: {
-			[vars.fontSize]: globalRefs.typography.h1.size,
-			[vars.fontWeight]: globalRefs.typography.h1.weight,
-			[vars.fontFamily]: globalRefs.typography.h1.font
-		},
-		h2: {
-			[vars.fontSize]: globalRefs.typography.h2.size,
-			[vars.fontWeight]: globalRefs.typography.h2.weight,
-			[vars.fontFamily]: globalRefs.typography.h2.font
-		},
-		h3: {
-			[vars.fontSize]: globalRefs.typography.h3.size,
-			[vars.fontWeight]: globalRefs.typography.h3.weight,
-			[vars.fontFamily]: globalRefs.typography.h3.font
-		},
-		subtitle1: {
-			[vars.fontSize]: globalRefs.typography.subtitle1.size,
-			[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
-			[vars.fontFamily]: globalRefs.typography.subtitle1.font
-		},
-		subtitle2: {
-			[vars.fontSize]: globalRefs.typography.subtitle2.size,
-			[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
-			[vars.fontFamily]: globalRefs.typography.subtitle2.font
-		},
-		body1: {
-			[vars.fontSize]: globalRefs.typography.body1.size,
-			[vars.fontWeight]: globalRefs.typography.body1.weight,
-			[vars.fontFamily]: globalRefs.typography.body1.font
-		},
-		body2: {
-			[vars.fontSize]: globalRefs.typography.body2.size,
-			[vars.fontWeight]: globalRefs.typography.body2.weight,
-			[vars.fontFamily]: globalRefs.typography.body2.font
-		}
-	},
+  [vars.textLineHeight]: '1em',
+  [vars.textAlign]: 'left',
+  [vars.textColor]: globalRefs.colors.surface.dark,
+  variant: {
+    h1: {
+      [vars.fontSize]: globalRefs.typography.h1.size,
+      [vars.fontWeight]: globalRefs.typography.h1.weight,
+      [vars.fontFamily]: globalRefs.typography.h1.font,
+    },
+    h2: {
+      [vars.fontSize]: globalRefs.typography.h2.size,
+      [vars.fontWeight]: globalRefs.typography.h2.weight,
+      [vars.fontFamily]: globalRefs.typography.h2.font,
+    },
+    h3: {
+      [vars.fontSize]: globalRefs.typography.h3.size,
+      [vars.fontWeight]: globalRefs.typography.h3.weight,
+      [vars.fontFamily]: globalRefs.typography.h3.font,
+    },
+    subtitle1: {
+      [vars.fontSize]: globalRefs.typography.subtitle1.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars.fontSize]: globalRefs.typography.subtitle2.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
+    },
+    body1: {
+      [vars.fontSize]: globalRefs.typography.body1.size,
+      [vars.fontWeight]: globalRefs.typography.body1.weight,
+      [vars.fontFamily]: globalRefs.typography.body1.font,
+    },
+    body2: {
+      [vars.fontSize]: globalRefs.typography.body2.size,
+      [vars.fontWeight]: globalRefs.typography.body2.weight,
+      [vars.fontFamily]: globalRefs.typography.body2.font,
+    },
+  },
 
-	mode: {
-		primary: {
-			[vars.textColor]: globalRefs.colors.primary.main
-		},
-		secondary: {
-			[vars.textColor]: globalRefs.colors.secondary.main
-		},
-		error: {
-			[vars.textColor]: globalRefs.colors.error.main
-		},
-		success: {
-			[vars.textColor]: globalRefs.colors.success.main
-		}
-	},
+  mode: {
+    primary: {
+      [vars.textColor]: globalRefs.colors.primary.main,
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+    },
+  },
 
-	textAlign: {
-		right: { [vars.textAlign]: 'right' },
-		left: { [vars.textAlign]: 'left' },
-		center: { [vars.textAlign]: 'center' }
-	},
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
 
-	_fullWidth: {
-		[vars.hostWidth]: '100%',
-	},
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
 
-	_italic: {
-		[vars.fontStyle]: 'italic'
-	},
+  _italic: {
+    [vars.fontStyle]: 'italic',
+  },
 
-	_uppercase: {
-		[vars.textTransform]: 'uppercase'
-	},
+  _uppercase: {
+    [vars.textTransform]: 'uppercase',
+  },
 
-	_lowercase: {
-		[vars.textTransform]: 'lowercase'
-	}
+  _lowercase: {
+    [vars.textTransform]: 'lowercase',
+  },
 };
 
 export default text;
-export { vars }
+export { vars };

package/src/theme/components/textArea.js

@@ -7,33 +7,35 @@ const globalRefs = getThemeRefs(globals);
 const vars = TextAreaClass.cssVarList;
 
 const textArea = {
-	[vars.hostWidth]: refs.width,
-	[vars.hostMinWidth]: refs.minWidth,
-	[vars.fontSize]: '14px',
-	[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',
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.fontSize]: globalRefs.typography.body2.size,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [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',
+  [vars.inputMinHeight]: '5em',
 
-	_disabled: {
-		[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
-	},
+  _disabled: {
+    [vars.inputBackgroundColor]: globalRefs.colors.surface.light,
+  },
 
-	_readonly: {
-		[vars.inputResizeType]: 'none',
-	}
+  _readonly: {
+    [vars.inputResizeType]: 'none',
+  },
 };
 
 export default textArea;
-export { vars }
+export { vars };

package/src/theme/components/textField.js

@@ -3,27 +3,28 @@ import { refs } from './inputWrapper';
 
 const vars = TextFieldClass.cssVarList;
 
-export const textField = ({
-	[vars.hostWidth]: refs.width,
-	[vars.hostMinWidth]: refs.minWidth,
-	[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,
-	[vars.inputHorizontalPadding]: refs.horizontalPadding
-});
+export const textField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [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,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+};
 
 export default textField;
-export { vars }
+export { vars };

package/src/theme/components/totpImage.js

@@ -1,10 +1,10 @@
-import { TotpImageClass } from "../../components/descope-totp-image/TotpImageClass";
+import { TotpImageClass } from '../../components/descope-totp-image/TotpImageClass';
 
-const vars = TotpImageClass.cssVarList
+const vars = TotpImageClass.cssVarList;
 
 const logo = {
-	[vars.fallbackUrl]: 'url(https://app.descope.com/images/99ae31fd143ba38e072d.svg)'
+  [vars.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 export default logo;
-export { vars }
+export { vars };

package/src/theme/components/uploadFile.js

@@ -0,0 +1,60 @@
+import { UploadFileClass } from '../../components/descope-upload-file/UploadFileClass';
+import { refs } from './inputWrapper';
+
+const vars = UploadFileClass.cssVarList;
+
+const uploadFile = {
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.requiredIndicator]: refs.requiredIndicator,
+  [vars.fontFamily]: refs.fontFamily,
+
+  [vars.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
+  [vars.iconSize]: '2em',
+
+  [vars.hostPadding]: '0.75em',
+  [vars.gap]: '0.5em',
+
+  [vars.fontSize]: '16px',
+  [vars.titleFontWeight]: '500',
+  [vars.fileNameFontWeight]: '300',
+  [vars.lineHeight]: '1em',
+
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderColor]: refs.borderColor,
+  [vars.borderRadius]: refs.borderRadius,
+  [vars.borderStyle]: 'dashed',
+
+  size: {
+    xs: {
+      [vars.hostHeight]: '196px',
+      [vars.hostWidth]: '200px',
+      [vars.titleFontSize]: '0.875em',
+      [vars.descriptionFontSize]: '0.875em',
+      [vars.lineHeight]: '1.25em',
+    },
+    sm: {
+      [vars.hostHeight]: '216px',
+      [vars.hostWidth]: '230px',
+      [vars.titleFontSize]: '1em',
+      [vars.descriptionFontSize]: '0.875em',
+      [vars.lineHeight]: '1.25em',
+    },
+    md: {
+      [vars.hostHeight]: '256px',
+      [vars.hostWidth]: '312px',
+      [vars.titleFontSize]: '1.125em',
+      [vars.descriptionFontSize]: '1em',
+      [vars.lineHeight]: '1.5em',
+    },
+    lg: {
+      [vars.hostHeight]: '280px',
+      [vars.hostWidth]: '336px',
+      [vars.titleFontSize]: '1.125em',
+      [vars.descriptionFontSize]: '1.125em',
+      [vars.lineHeight]: '1.75em',
+    },
+  },
+};
+
+export default uploadFile;
+export { vars };

package/src/theme/globals.js

@@ -1,153 +1,152 @@
 import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
 import { genColors } from '../helpers/themeHelpers/colorsHelpers';
 
-
 export const colors = genColors({
-	surface: {
-		main: 'lightgray',
-		light: '#fff',
-		dark: '#000',
-	},
-	primary: '#0082B5',
-	secondary: '#7D14EB',
-	success: 'green',
-	error: 'red'
+  surface: {
+    main: 'lightgray',
+    light: '#fff',
+    dark: '#000',
+  },
+  primary: '#006af5',
+  secondary: '#7D14EB',
+  success: 'green',
+  error: '#e21d12',
 });
 
 const fonts = {
-	font1: {
-		family: [
-			"Roboto",
-			"ui-sans-serif",
-			"system-ui",
-			"-apple-system",
-			"BlinkMacSystemFont",
-			"Segoe UI",
-			"Helvetica Neue",
-			"Arial",
-			"Noto Sans",
-			"sans-serif",
-			"Apple Color Emoji",
-			"Segoe UI Emoji",
-			"Segoe UI Symbol",
-			"Noto Color Emoji"
-		],
-		label: "Roboto",
-		url: "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
-	},
-	font2: {
-		family: [
-			"ui-sans-serif",
-			"system-ui",
-			"-apple-system",
-			"BlinkMacSystemFont",
-			"Segoe UI",
-			"Roboto",
-			"Helvetica Neue",
-			"Arial",
-			"Noto Sans",
-			"sans-serif",
-			"Apple Color Emoji",
-			"Segoe UI Emoji",
-			"Segoe UI Symbol",
-			"Noto Color Emoji"
-		],
-		label: "Sans Serif"
-	}
+  font1: {
+    family: [
+      'Roboto',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Roboto',
+    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
+  },
+  font2: {
+    family: [
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Sans Serif',
+  },
 };
 
 const fontsRef = getThemeRefs({ fonts }).fonts;
 
 const typography = {
-	h1: {
-		font: fontsRef.font1.family,
-		weight: '900',
-		size: '48px'
-	},
-	h2: {
-		font: fontsRef.font1.family,
-		weight: '800',
-		size: '38px'
-	},
-	h3: {
-		font: fontsRef.font1.family,
-		weight: '600',
-		size: '28px'
-	},
-	subtitle1: {
-		font: fontsRef.font2.family,
-		weight: '500',
-		size: '22px'
-	},
-	subtitle2: {
-		font: fontsRef.font2.family,
-		weight: '400',
-		size: '20px'
-	},
-	body1: {
-		font: fontsRef.font1.family,
-		weight: '400',
-		size: '16px'
-	},
-	body2: {
-		font: fontsRef.font1.family,
-		weight: '400',
-		size: '14px'
-	}
+  h1: {
+    font: fontsRef.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef.font1.family,
+    weight: '800',
+    size: '38px',
+  },
+  h3: {
+    font: fontsRef.font1.family,
+    weight: '600',
+    size: '28px',
+  },
+  subtitle1: {
+    font: fontsRef.font2.family,
+    weight: '500',
+    size: '22px',
+  },
+  subtitle2: {
+    font: fontsRef.font2.family,
+    weight: '400',
+    size: '20px',
+  },
+  body1: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '16px',
+  },
+  body2: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '14px',
+  },
 };
 
 const spacing = {
-	xs: '2px',
-	sm: '4px',
-	md: '8px',
-	lg: '16px',
-	xl: '32px'
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
 };
 
 const border = {
-	xs: '1px',
-	sm: '2px',
-	md: '3px',
-	lg: '4px',
-	xl: '5px'
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
 };
 
 const radius = {
-	xs: '5px',
-	sm: '10px',
-	md: '15px',
-	lg: '20px',
-	xl: '25px',
-	'2xl': '30px',
-	'3xl': '35px'
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
 };
 
 const shadow = {
-	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'
-	}
+  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',
+  },
 };
 
 const globals = {
-	colors,
-	typography,
-	spacing,
-	border,
-	radius,
-	shadow,
-	fonts
+  colors,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow,
+  fonts,
 };
 
-export default globals
-export const vars = getThemeVars(globals)
+export default globals;
+export const vars = getThemeVars(globals);

package/src/theme/index.js

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