@descope/web-components-ui 0.0.1

package/src/theme/components/grid.js

@@ -0,0 +1,52 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { GridClass } from '../../components/descope-grid/GridClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = GridClass.cssVarList;
+
+export const grid = {
+  [vars.hostWidth]: '100%',
+  [vars.hostHeight]: '100%',
+  [vars.hostMinHeight]: '400px',
+  [vars.fontWeight]: '400',
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+
+  [vars.sortIndicatorsColor]: globalRefs.colors.surface.light,
+  [vars.activeSortIndicator]: globalRefs.colors.surface.dark,
+  [vars.resizeHandleColor]: globalRefs.colors.surface.light,
+
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderStyle]: refs.borderStyle,
+  [vars.borderRadius]: refs.borderRadius,
+  [vars.borderColor]: 'transparent',
+
+  [vars.headerRowTextColor]: globalRefs.colors.surface.dark,
+  [vars.separatorColor]: globalRefs.colors.surface.light,
+
+  [vars.valueTextColor]: globalRefs.colors.surface.contrast,
+  [vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.toggleDetailsPanelButtonSize]: '1em',
+  [vars.toggleDetailsPanelButtonOpenedColor]: globalRefs.colors.surface.contrast,
+  [vars.toggleDetailsPanelButtonClosedColor]: globalRefs.colors.surface.light,
+  [vars.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars.detailsPanelBackgroundColor]: globalRefs.colors.surface.highlight,
+  [vars.detailsPanelBorderTopColor]: globalRefs.colors.surface.light,
+  [vars.detailsPanelLabelsColor]: globalRefs.colors.surface.dark,
+  [vars.detailsPanelLabelsFontSize]: '0.8em',
+  [vars.detailsPanelItemsGap]: '2em',
+  [vars.detailsPanelPadding]: '12px 0',
+
+  _bordered: {
+    [vars.borderColor]: refs.borderColor,
+  },
+};
+
+export default grid;
+export { vars };

package/src/theme/components/hybridField.js

@@ -0,0 +1,22 @@
+import { HybridFieldClass } from '../../components/descope-hybrid-field/HybridFieldClass';
+import { refs } from './inputWrapper';
+
+const vars = HybridFieldClass.cssVarList;
+
+const hybridField = {
+  [vars.hostDirection]: refs.direction,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default hybridField;
+export { vars };

package/src/theme/components/icon.js

@@ -0,0 +1,7 @@
+import { IconClass } from '../../components/descope-icon/IconClass';
+
+export const vars = IconClass.cssVarList;
+
+const icon = {};
+
+export default icon;

package/src/theme/components/image.js

@@ -0,0 +1,8 @@
+import { ImageClass } from '../../components/descope-image/ImageClass';
+
+const vars = ImageClass.cssVarList;
+
+const image = {};
+
+export default image;
+export { vars };

package/src/theme/components/index.js

@@ -0,0 +1,124 @@
+import * as button from './button';
+import * as textField from './textField';
+import * as password from './password';
+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 totpImage from './totpImage';
+import * as notpImage from './notpImage';
+import * as text from 'descope-text/theme';
+import * as enrichedText from './enrichedText';
+import * as link from './link';
+import * as divider from './divider';
+import * as passcode from './passcode';
+import { loaderRadial, loaderLinear } from './loader';
+import * as comboBox from './comboBox';
+import * as image from './image';
+import * as phoneField from './phoneField';
+import * as phoneInputBoxField from './phoneInputBoxField';
+import * as newPassword from './newPassword';
+import * as inputWrapper from './inputWrapper';
+import * as uploadFile from './uploadFile';
+import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
+import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
+import * as buttonMultiSelectionGroup from './buttonSelectionGroup/buttonMultiSelectionGroup';
+import * as modal from './modal';
+import * as grid from './grid';
+import * as notificationCard from './notificationCard';
+import * as multiSelectComboBox from './multiSelectComboBox';
+import * as badge from './badge';
+import * as avatar from 'descope-avatar/theme';
+import * as mappingsField from './mappingsField';
+import * as userAttribute from './userAttribute';
+import * as userAuthMethod from './userAuthMethod';
+import * as samlGroupMappings from './samlGroupMappings';
+import * as policyValidation from './policyValidation';
+import * as icon from './icon';
+import * as codeSnippet from './codeSnippet';
+import * as radioGroup from './radioGroup/radioGroup';
+import * as radioButton from './radioGroup/radioButton';
+import * as calendar from './calendar';
+import * as dateField from './dateField';
+import * as list from './list/list';
+import * as listItem from './list/listItem';
+import * as appsList from './appsList';
+import * as scopesList from './scopesList';
+import * as thirdPartyAppLogo from './thirdPartyAppLogo';
+import * as securityQuestionsSetup from './securityQuestionsSetup';
+import * as securityQuestionsVerify from './securityQuestionsVerify';
+import * as hybridField from './hybridField';
+import * as alert from './alert';
+
+const components = {
+  button,
+  textField,
+  password,
+  numberField,
+  emailField,
+  textArea,
+  checkbox,
+  switchToggle,
+  container,
+  logo,
+  totpImage,
+  notpImage,
+  text,
+  enrichedText,
+  link,
+  divider,
+  passcode,
+  loaderRadial,
+  loaderLinear,
+  comboBox,
+  image,
+  phoneField,
+  phoneInputBoxField,
+  newPassword,
+  inputWrapper,
+  uploadFile,
+  buttonSelectionGroupItem,
+  buttonSelectionGroup,
+  buttonMultiSelectionGroup,
+  modal,
+  grid,
+  notificationCard,
+  multiSelectComboBox,
+  badge,
+  avatar,
+  mappingsField,
+  userAttribute,
+  userAuthMethod,
+  samlGroupMappings,
+  policyValidation,
+  icon,
+  codeSnippet,
+  radioGroup,
+  radioButton,
+  calendar,
+  dateField,
+  list,
+  listItem,
+  appsList,
+  scopesList,
+  thirdPartyAppLogo,
+  securityQuestionsSetup,
+  securityQuestionsVerify,
+  hybridField,
+  alert,
+};
+
+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/inputWrapper.js

@@ -0,0 +1,130 @@
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+const componentName = getComponentName('input-wrapper');
+const globalRefs = getThemeRefs(globals);
+
+const [theme, refs, vars] = createHelperVars(
+  {
+    labelTextColor: globalRefs.colors.surface.dark,
+    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
+    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
+    valueTextColor: globalRefs.colors.surface.contrast,
+    placeholderTextColor: globalRefs.colors.surface.dark,
+    requiredIndicator: "'*'",
+    helperTextColor: globalRefs.colors.surface.dark,
+    errorMessageTextColor: globalRefs.colors.error.main,
+    successMessageTextColor: globalRefs.colors.success.main,
+
+    borderWidth: globalRefs.border.xs,
+    borderRadius: globalRefs.radius.xs,
+    borderColor: 'transparent',
+
+    outlineWidth: globalRefs.border.sm,
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
+
+    minWidth: '10em',
+    toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
+    inputHeight: '3em',
+    horizontalPadding: '0.5em',
+    verticalPadding: '0.5em',
+
+    textAlign: 'start',
+
+    backgroundColor: globalRefs.colors.surface.main,
+
+    fontFamily: globalRefs.fonts.font1.family,
+
+    direction: globalRefs.direction,
+
+    overlayOpacity: '0.3',
+
+    errorMessageIcon: '',
+    errorMessageIconSize: '0',
+    errorMessageIconPadding: '0',
+    errorMessageIconPosition: '0 0.4em',
+    errorMessageIconRepeat: 'no-repeat',
+
+    size: {
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
+    },
+
+    labelType: {
+      static: {
+        valueInputHeight: '3em',
+        valueInputMarginBottom: 'auto',
+      },
+      floating: {
+        labelPosition: 'absolute',
+        labelTopPosition: '0',
+        labelHorizontalPosition: '0.9em',
+        labelFontSize: '1em',
+        placeholderOpacity: 0,
+        inputHeight: '3.5em',
+        inputVerticalAlignment: 'flex-end',
+        inputTransformY: 'translateY(1.55em)',
+        inputTransition: 'all 75ms ease-in-out',
+        marginInlineStart: '0',
+        valueInputHeight: '1.5702em',
+        valueInputMarginBottom: '0.5em',
+
+        _focused: {
+          labelFontSize: '0.75em',
+          inputTransformY: 'translateY(1.05em)',
+          labelFontWeight: '400',
+          placeholderOpacity: 1,
+        },
+
+        _readOnly: {
+          placeholderOpacity: 0,
+        },
+
+        _hasValue: {
+          inputTransformY: 'translateY(1.05em)',
+          labelFontSize: '0.75em',
+          labelFontWeight: '400',
+        },
+      },
+    },
+
+    _fullWidth: {
+      width: '100%',
+    },
+
+    _focused: {
+      outlineColor: globalRefs.colors.surface.light,
+      _invalid: {
+        outlineColor: globalRefs.colors.error.main,
+      },
+    },
+
+    _bordered: {
+      outlineWidth: globalRefs.border.xs,
+      borderColor: globalRefs.colors.surface.light,
+      borderStyle: 'solid',
+      _invalid: {
+        borderColor: globalRefs.colors.error.main,
+      },
+    },
+
+    _disabled: {
+      labelTextColor: globalRefs.colors.surface.light,
+      borderColor: globalRefs.colors.surface.light,
+      valueTextColor: globalRefs.colors.surface.light,
+      placeholderTextColor: globalRefs.colors.surface.light,
+      helperTextColor: globalRefs.colors.surface.light,
+      backgroundColor: globalRefs.colors.surface.main,
+    },
+  },
+  componentName
+);
+
+export { refs, vars };
+export default theme;

package/src/theme/components/link.js

@@ -0,0 +1,36 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { LinkClass } from '../../components/descope-link/LinkClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = LinkClass.cssVarList;
+
+const link = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.cursor]: 'pointer',
+
+  [vars.textColor]: globalRefs.colors.primary.main,
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  _hover: {
+    [vars.textDecoration]: 'underline',
+  },
+
+  mode: {
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+    },
+  },
+};
+
+export default link;
+export { vars };

package/src/theme/components/list/list.js

@@ -0,0 +1,56 @@
+import globals from '../../globals';
+import { getThemeRefs, createHelperVars, useVar } from '../../../helpers/themeHelpers';
+import { ListClass, componentName } from '../../../components/descope-list/ListClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = ListClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  { shadowColor: '#00000020' },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+
+const list = {
+  ...helperTheme,
+
+  [compVars.hostWidth]: '100%',
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+  [compVars.borderColor]: globalRefs.colors.surface.light,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.gap]: globalRefs.spacing.md,
+  [compVars.verticalPadding]: globalRefs.spacing.lg,
+  [compVars.horizontalPadding]: globalRefs.spacing.lg,
+  [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+  [compVars.maxHeight]: '100%',
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.minItemsWidth]: '150px',
+
+  _empty: {
+    [compVars.minHeight]: '150px',
+    [compVars.emptyStateTextColor]: globalRefs.colors.surface.dark,
+    [compVars.emptyStateTextFontFamily]: globalRefs.fonts.font1.family,
+  },
+
+  variant: {
+    tiles: {
+      [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
+        compVars.minItemsWidth
+      )}, 100%), 1fr))`,
+      [compVars.maxItemsWidth]: '200px',
+      [compVars.itemsHorizontalAlign]: 'center',
+    },
+  },
+};
+
+export default list;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/list/listItem.js

@@ -0,0 +1,41 @@
+import globals from '../../globals';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import { ListItemClass } from '../../../components/descope-list/ListItemClass';
+
+const globalRefs = getThemeRefs(globals);
+
+export const vars = ListItemClass.cssVarList;
+
+const list = {
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+  [vars.padding]: globalRefs.spacing.lg,
+  [vars.gap]: globalRefs.spacing.md,
+  [vars.borderStyle]: 'solid',
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderColor]: globalRefs.colors.surface.main,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.cursor]: 'pointer',
+  [vars.alignItems]: 'center',
+  [vars.flexDirection]: 'row',
+  [vars.transition]: 'border-color 0.2s, background-color 0.2s',
+
+  variant: {
+    tile: {
+      [vars.alignItems]: 'flex-start',
+      [vars.flexDirection]: 'column',
+      [vars.borderColor]: globalRefs.colors.surface.light,
+    },
+  },
+
+  _hover: {
+    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
+  },
+
+  _active: {
+    [vars.backgroundColor]: globalRefs.colors.surface.main,
+    [vars.borderColor]: globalRefs.colors.primary.light,
+    [vars.outline]: `1px solid ${globalRefs.colors.primary.light}`,
+  },
+};
+
+export default list;

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

@@ -0,0 +1,4 @@
+import * as loaderLinear from './loaderLinear';
+import * as loaderRadial from './loaderRadial';
+
+export { loaderLinear, loaderRadial };

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

@@ -0,0 +1,45 @@
+import globals from '../../globals';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = LoaderLinearClass.cssVarList;
+
+const loaderLinear = {
+  [vars.hostDisplay]: 'inline-block',
+  [vars.hostWidth]: '100%',
+
+  [vars.barColor]: globalRefs.colors.surface.contrast,
+  [vars.barWidth]: '20%',
+
+  [vars.barBackgroundColor]: globalRefs.colors.surface.light,
+  [vars.barBorderRadius]: '4px',
+
+  [vars.animationDuration]: '2s',
+  [vars.animationTimingFunction]: 'linear',
+  [vars.animationIterationCount]: 'infinite',
+  [vars.verticalPadding]: '0.25em',
+
+  size: {
+    xs: { [vars.barHeight]: '2px' },
+    sm: { [vars.barHeight]: '4px' },
+    md: { [vars.barHeight]: '6px' },
+    lg: { [vars.barHeight]: '8px' },
+  },
+
+  mode: {
+    primary: {
+      [vars.barColor]: globalRefs.colors.primary.main,
+    },
+    secondary: {
+      [vars.barColor]: globalRefs.colors.secondary.main,
+    },
+  },
+
+  _hidden: {
+    [vars.hostDisplay]: 'none',
+  },
+};
+
+export default loaderLinear;
+export { vars };

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

@@ -0,0 +1,57 @@
+import globals from '../../globals';
+import {
+  LoaderRadialClass,
+  componentName,
+} from '../../../components/descope-loader-radial/LoaderRadialClass';
+import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = LoaderRadialClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    spinnerColor: globalRefs.colors.surface.contrast,
+    mode: {
+      primary: {
+        spinnerColor: globalRefs.colors.primary.main,
+      },
+      secondary: {
+        spinnerColor: globalRefs.colors.secondary.main,
+      },
+    },
+  },
+  componentName
+);
+
+const loaderRadial = {
+  ...helperTheme,
+
+  [compVars.animationDuration]: '2s',
+  [compVars.animationTimingFunction]: 'linear',
+  [compVars.animationIterationCount]: 'infinite',
+  [compVars.spinnerBorderStyle]: 'solid',
+  [compVars.spinnerBorderWidth]: '0.2em',
+  [compVars.spinnerBorderRadius]: '50%',
+  [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant2Color]: 'transparent',
+  [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant4Color]: 'transparent',
+
+  size: {
+    xs: { [compVars.spinnerSize]: '20px' },
+    sm: { [compVars.spinnerSize]: '30px' },
+    md: { [compVars.spinnerSize]: '40px' },
+    lg: { [compVars.spinnerSize]: '60px' },
+    xl: { [compVars.spinnerSize]: '80px' },
+  },
+
+  _hidden: {
+    [compVars.hostDisplay]: 'none',
+  },
+};
+
+export default loaderRadial;
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/logo.js

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

package/src/theme/components/mappingsField.js

@@ -0,0 +1,30 @@
+import globals from '../globals';
+import { MappingsFieldClass } from '../../components/mapping-fields/descope-mappings-field/MappingsFieldClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = MappingsFieldClass.cssVarList;
+
+export const mappingsField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.separatorFontSize]: '14px',
+  [vars.labelsFontSize]: '14px',
+  [vars.labelsLineHeight]: '1',
+  [vars.labelsMarginBottom]: '6px',
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.itemMarginBottom]: '1em',
+  // To be positioned correctly, the min width has to match the text field min width
+  [vars.valueLabelMinWidth]: refs.minWidth,
+  // To be positioned correctly, the min width has to match the combo box field min width
+  [vars.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
+  [vars.separatorWidth]: '70px',
+  [vars.removeButtonWidth]: '60px',
+};
+
+export default mappingsField;
+export { vars };

package/src/theme/components/modal.js

@@ -0,0 +1,19 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { ModalClass } from '../../components/descope-modal/ModalClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = ModalClass.cssVarList;
+
+const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
+  [compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
+  [compVars.overlayWidth]: '540px',
+};
+
+export default modal;
+
+export const vars = {
+  ...compVars,
+};