@descope/web-components-ui 0.0.1

package/src/theme/components/switchToggle.js

@@ -0,0 +1,77 @@
+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 globalRefs = getThemeRefs(globals);
+const vars = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars.trackBorderStyle]: refs.borderStyle,
+  [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars.trackBorderColor]: refs.borderColor,
+  [vars.trackBackgroundColor]: refs.backgroundColor,
+  [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.knobLeftOffset]: knobMargin,
+  [vars.knobColor]: refs.labelTextColor,
+  [vars.knobTransitionDuration]: '0.3s',
+
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelFontWeight]: '400',
+  [vars.labelLineHeight]: '1.35em',
+  [vars.labelSpacing]: '1em',
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  _checked: {
+    [vars.trackBorderColor]: refs.borderColor,
+    [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
+    [vars.knobColor]: refs.valueTextColor,
+    [vars.knobTextColor]: refs.valueTextColor,
+  },
+
+  _disabled: {
+    [vars.knobColor]: globalRefs.colors.surface.light,
+    [vars.trackBorderColor]: globalRefs.colors.surface.light,
+    [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
+    [vars.labelTextColor]: refs.labelTextColor,
+    _checked: {
+      [vars.knobColor]: globalRefs.colors.surface.light,
+      [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
+    },
+  },
+
+  _invalid: {
+    [vars.trackBorderColor]: globalRefs.colors.error.main,
+    [vars.knobColor]: globalRefs.colors.error.main,
+  },
+};
+
+export default switchToggle;
+export { vars };

package/src/theme/components/textArea.js

@@ -0,0 +1,48 @@
+import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
+import { refs } from './inputWrapper';
+
+const vars = TextAreaClass.cssVarList;
+
+const textArea = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [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',
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
+
+  _readonly: {
+    [vars.inputResizeType]: 'none',
+  },
+};
+
+export default textArea;
+export { vars };

package/src/theme/components/textField.js

@@ -0,0 +1,63 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TextFieldClass.cssVarList;
+
+export const textField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [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,
+  [vars.helperTextColor]: refs.helperTextColor,
+  [vars.textAlign]: refs.textAlign,
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars.inputIconOffset]: globalRefs.spacing.md,
+  [vars.inputIconSize]: refs.inputIconSize,
+  [vars.inputIconColor]: refs.placeholderTextColor,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+};
+
+export default textField;
+export { vars };

package/src/theme/components/thirdPartyAppLogo.js

@@ -0,0 +1,36 @@
+import { ThirdPartyAppLogoClass } from '../../components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+const globalRefs = getThemeRefs(globals);
+const vars = ThirdPartyAppLogoClass.cssVarList;
+
+const thirdPartyAppLogo = {
+  [vars.gap]: globalRefs.spacing.lg,
+  [vars.arrowsColor]: globalRefs.colors.surface.dark,
+  [vars.thirdPartyAppLogoFallback]:
+    'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
+  [vars.companyLogoFallback]:
+    'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
+  size: {
+    xs: {
+      [vars.logoMaxHeight]: '30px',
+      [vars.logoMaxWidth]: '120px',
+    },
+    sm: {
+      [vars.logoMaxHeight]: '40px',
+      [vars.logoMaxWidth]: '160px',
+    },
+    md: {
+      [vars.logoMaxHeight]: '48px',
+      [vars.logoMaxWidth]: '200px',
+    },
+    lg: {
+      [vars.logoMaxHeight]: '60px',
+      [vars.logoMaxWidth]: '240px',
+    },
+  },
+};
+
+export default thirdPartyAppLogo;
+export { vars };

package/src/theme/components/totpImage.js

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

package/src/theme/components/uploadFile.js

@@ -0,0 +1,66 @@
+import { UploadFileClass } from '../../components/descope-upload-file/UploadFileClass';
+import { refs } from './inputWrapper';
+
+const vars = UploadFileClass.cssVarList;
+
+const uploadFile = {
+  [vars.hostDirection]: refs.direction,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.fontFamily]: refs.fontFamily,
+
+  [vars.iconSize]: '2em',
+
+  [vars.hostPadding]: '0.75em',
+  [vars.gap]: '0.5em',
+
+  [vars.fontSize]: '16px',
+  [vars.titleFontWeight]: '500',
+  [vars.lineHeight]: '1em',
+
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderColor]: refs.borderColor,
+  [vars.borderRadius]: refs.borderRadius,
+  [vars.borderStyle]: 'dashed',
+
+  _required: {
+    [vars.requiredIndicator]: refs.requiredIndicator,
+  },
+
+  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',
+    },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: refs.width,
+  },
+};
+
+export default uploadFile;
+export { vars };

package/src/theme/components/userAttribute.js

@@ -0,0 +1,20 @@
+import globals from '../globals';
+import { UserAttributeClass } from '../../components/descope-user-attribute/UserAttributeClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+export const vars = UserAttributeClass.cssVarList;
+
+const userAttribute = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.labelTextWidth]: '150px',
+  [vars.valueTextWidth]: '200px',
+  [vars.badgeMaxWidth]: '85px',
+  [vars.itemsGap]: '16px',
+  [vars.hostMinWidth]: '530px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default userAttribute;

package/src/theme/components/userAuthMethod.js

@@ -0,0 +1,20 @@
+import globals from '../globals';
+import { UserAuthMethodClass } from '../../components/descope-user-auth-method/UserAuthMethodClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+export const vars = UserAuthMethodClass.cssVarList;
+
+const userAuthMethod = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.labelTextWidth]: '200px',
+  [vars.itemsGap]: '16px',
+  [vars.hostMinWidth]: '530px',
+  [vars.iconSize]: '24px',
+  [vars.iconColor]: 'currentcolor',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default userAuthMethod;

package/src/theme/globals.js

@@ -0,0 +1,181 @@
+import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
+import { genColors } from '../helpers/themeHelpers/colorsHelpers';
+
+const direction = 'ltr';
+
+export const colors = genColors({
+  surface: {
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+});
+
+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',
+  },
+};
+
+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',
+  },
+};
+
+const spacing = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+};
+
+const border = {
+  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',
+};
+
+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',
+  },
+};
+
+const globals = {
+  colors,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow,
+  fonts,
+  direction,
+};
+
+export default globals;
+export const vars = getThemeVars(globals);

package/src/theme/index.js

@@ -0,0 +1,5 @@
+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 };