@descope/web-components-ui 0.0.1

package/src/theme/components/multiSelectComboBox.js

@@ -0,0 +1,86 @@
+import globals from '../globals';
+import { MultiSelectComboBoxClass } from '../../components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = MultiSelectComboBoxClass.cssVarList;
+
+export const multiSelectComboBox = {
+  [vars.hostWidth]: refs.width,
+  [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputVerticalPadding]: refs.verticalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
+  [vars.inputDropdownButtonCursor]: 'pointer',
+  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
+  [vars.chipFontSize]: refs.chipFontSize,
+  [vars.chipTextColor]: globalRefs.colors.surface.contrast,
+  [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelLeftPosition]: refs.labelLeftPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  labelType: {
+    floating: {
+      [vars.inputHorizontalPadding]: '0.25em',
+      _hasValue: {
+        [vars.inputHorizontalPadding]: '0.45em',
+      },
+    },
+  },
+
+  _readonly: {
+    [vars.inputDropdownButtonCursor]: 'default',
+  },
+
+  // Overlay theme exposed via the component:
+  [vars.overlayFontSize]: refs.fontSize,
+  [vars.overlayFontFamily]: refs.fontFamily,
+  [vars.overlayCursor]: 'pointer',
+  [vars.overlayItemBoxShadow]: 'none',
+  [vars.overlayBackground]: refs.backgroundColor,
+  [vars.overlayTextColor]: refs.valueTextColor,
+
+  // Overlay direct theme:
+  [vars.overlay.minHeight]: '400px',
+  [vars.overlay.margin]: '0',
+};
+
+export default multiSelectComboBox;
+export { vars };

package/src/theme/components/newPassword.js

@@ -0,0 +1,40 @@
+import globals from '../globals';
+import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
+import { refs } from './inputWrapper';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+const vars = NewPasswordClass.cssVarList;
+
+const newPassword = {
+  [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.spaceBetweenInputs]: '1em',
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.policyPreviewBackgroundColor]: 'none',
+  [vars.policyPreviewPadding]: globalRefs.spacing.lg,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  _required: {
+    // NewPassword doesn't pass `required` attribute to its Password components.
+    // That's why we fake the required indicator on each input.
+    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
+    [vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+  },
+};
+
+export default newPassword;
+export { vars };

package/src/theme/components/notificationCard.js

@@ -0,0 +1,54 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { NotificationCardClass } from '../../components/descope-notification/descope-notification-card/NotificationCardClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = NotificationCardClass.cssVarList;
+
+const shadowColor = '#00000020';
+
+const notification = {
+  [vars.hostMinWidth]: '415px',
+  [vars.fontFamily]: globalRefs.fonts.font1.family,
+  [vars.fontSize]: globalRefs.typography.body1.size,
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+  [vars.textColor]: globalRefs.colors.surface.contrast,
+  [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+  [vars.verticalPadding]: '0.625em',
+  [vars.horizontalPadding]: '1.5em',
+  [vars.borderRadius]: globalRefs.radius.xs,
+
+  _bordered: {
+    [vars.borderWidth]: globalRefs.border.sm,
+    [vars.borderStyle]: 'solid',
+    [vars.borderColor]: 'transparent',
+  },
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  mode: {
+    primary: {
+      [vars.backgroundColor]: globalRefs.colors.primary.main,
+      [vars.textColor]: globalRefs.colors.primary.contrast,
+      [vars.borderColor]: globalRefs.colors.primary.light,
+    },
+    success: {
+      [vars.backgroundColor]: globalRefs.colors.success.main,
+      [vars.textColor]: globalRefs.colors.success.contrast,
+      [vars.borderColor]: globalRefs.colors.success.light,
+    },
+    error: {
+      [vars.backgroundColor]: globalRefs.colors.error.main,
+      [vars.textColor]: globalRefs.colors.error.contrast,
+      [vars.borderColor]: globalRefs.colors.error.light,
+    },
+  },
+};
+
+export default notification;
+export { vars };

package/src/theme/components/notpImage.js

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

package/src/theme/components/numberField.js

@@ -0,0 +1,50 @@
+import { NumberFieldClass } from '../../components/descope-number-field/NumberFieldClass';
+import { refs } from './inputWrapper';
+
+const vars = NumberFieldClass.cssVarList;
+
+const numberField = {
+  [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.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.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [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,
+
+  // 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 numberField;
+export { vars };

package/src/theme/components/passcode.js

@@ -0,0 +1,47 @@
+import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
+import { refs } from './inputWrapper';
+
+const vars = PasscodeClass.cssVarList;
+
+const passcode = {
+  [vars.hostDirection]: refs.direction,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.fontSize,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.digitValueTextColor]: refs.valueTextColor,
+  [vars.digitPadding]: '0',
+  [vars.digitTextAlign]: 'center',
+  [vars.digitSpacing]: '4px',
+  [vars.hostWidth]: refs.width,
+  [vars.digitOutlineColor]: 'transparent',
+  [vars.digitOutlineWidth]: refs.outlineWidth,
+  [vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars.digitSize]: refs.inputHeight,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  size: {
+    xs: { [vars.spinnerSize]: '15px' },
+    sm: { [vars.spinnerSize]: '20px' },
+    md: { [vars.spinnerSize]: '20px' },
+    lg: { [vars.spinnerSize]: '20px' },
+  },
+
+  _hideCursor: {
+    [vars.digitCaretTextColor]: 'transparent',
+  },
+
+  _loading: {
+    [vars.overlayOpacity]: refs.overlayOpacity,
+  },
+};
+
+export default passcode;
+export { vars };

package/src/theme/components/password.js

@@ -0,0 +1,55 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { PasswordClass } from '../../components/descope-password/PasswordClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = PasswordClass.cssVarList;
+
+const password = {
+  [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.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: 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.revealButtonOffset]: globalRefs.spacing.md,
+  [vars.revealButtonSize]: refs.toggleButtonSize,
+  [vars.revealButtonColor]: refs.placeholderTextColor,
+  [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,
+
+  // 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 password;
+export { vars };

package/src/theme/components/phoneField.js

@@ -0,0 +1,44 @@
+import { PhoneFieldClass } from '../../components/phone-fields/descope-phone-field/PhoneFieldClass';
+import { refs } from './inputWrapper';
+
+const vars = PhoneFieldClass.cssVarList;
+
+const phoneField = {
+  [vars.hostWidth]: refs.width,
+  [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.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.phoneInputWidth]: refs.minWidth,
+  [vars.countryCodeInputWidth]: '5em',
+  [vars.countryCodeDropdownWidth]: '20em',
+  [vars.marginInlineStart]: '-0.25em',
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
+};
+
+export default phoneField;
+export { vars };

package/src/theme/components/phoneInputBoxField.js

@@ -0,0 +1,50 @@
+import { PhoneFieldInputBoxClass } from '../../components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
+import { refs } from './inputWrapper';
+
+const vars = PhoneFieldInputBoxClass.cssVarList;
+
+const phoneInputBoxField = {
+  [vars.hostWidth]: '16em',
+  [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.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [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.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars.inputHorizontalPadding]: '0',
+
+  // 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]: refs.width,
+  },
+};
+
+export default phoneInputBoxField;
+export { vars };

package/src/theme/components/policyValidation.js

@@ -0,0 +1,29 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { PolicyValidationClass } from '../../components/descope-policy-validation/PolicyValidationClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = PolicyValidationClass.cssVarList;
+
+const policyValidation = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.labelFontSize,
+  [vars.textColor]: refs.labelTextColor,
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderStyle]: refs.borderStyle,
+  [vars.borderColor]: refs.borderColor,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.backgroundColor]: 'none',
+  [vars.padding]: '0px',
+  [vars.labelMargin]: globalRefs.spacing.sm,
+  [vars.itemsSpacing]: globalRefs.spacing.lg,
+  [vars.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars.itemSymbolSuccessColor]: globalRefs.colors.success.main,
+  [vars.itemSymbolErrorColor]: globalRefs.colors.error.main,
+};
+
+export default policyValidation;
+export { vars };

package/src/theme/components/radioGroup/radioButton.js

@@ -0,0 +1,44 @@
+import { RadioButtonClass } from '../../../components/descope-radio-group/RadioButtonClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const vars = RadioButtonClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+export const radioButton = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.radioSize]: 'calc(1em + 6px)',
+  [vars.radioMargin]: 'auto 4px',
+  [vars.radioCheckedSize]: `calc(var(${vars.radioSize})/5)`,
+  [vars.radioCheckedColor]: globalRefs.colors.surface.light,
+  [vars.radioBackgroundColor]: globalRefs.colors.surface.light,
+  [vars.radioBorderColor]: 'none',
+  [vars.radioBorderWidth]: 0,
+
+  _checked: {
+    [vars.radioBackgroundColor]: globalRefs.colors.surface.contrast,
+  },
+
+  _hover: {
+    cursor: 'pointer',
+  },
+
+  size: {
+    xs: {
+      [vars.fontSize]: '12px',
+    },
+    sm: {
+      [vars.fontSize]: '14px',
+    },
+    md: {
+      [vars.fontSize]: '16px',
+    },
+    lg: {
+      [vars.fontSize]: '18px',
+    },
+  },
+};
+
+export default radioButton;
+export { vars };

package/src/theme/components/radioGroup/radioGroup.js

@@ -0,0 +1,42 @@
+import { RadioGroupClass } from '../../../components/descope-radio-group/RadioGroupClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const vars = RadioGroupClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+export const radioGroup = {
+  [vars.buttonsRowGap]: '9px',
+  [vars.hostWidth]: refs.width,
+  [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.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars.helperTextColor]: refs.helperTextColor,
+  [vars.itemsLabelColor]: globalRefs.colors.surface.contrast,
+
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.buttonsSpacing]: 'space-between',
+  },
+
+  _disabled: {
+    [vars.itemsLabelColor]: globalRefs.colors.surface.light,
+  },
+};
+
+export default radioGroup;
+export { vars };

package/src/theme/components/samlGroupMappings.js

@@ -0,0 +1,20 @@
+import { SamlGroupMappingsClass } from '../../components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
+import { refs } from './inputWrapper';
+
+const vars = SamlGroupMappingsClass.cssVarList;
+
+export const samlGroupMappings = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.groupNameInputMarginBottom]: '1em',
+
+  // 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 samlGroupMappings;
+export { vars };

package/src/theme/components/scopesList.js

@@ -0,0 +1,15 @@
+import { ScopesListClass } from '../../components/descope-scopes-list/ScopesListClass';
+import theme, { vars as inputVars } from './inputWrapper';
+
+export const vars = ScopesListClass.cssVarList;
+
+const scopesList = {
+  [vars.requiredInputBorderColor]: theme._disabled[inputVars.borderColor],
+  [vars.requiredInputValueTextColor]: theme._disabled[inputVars.valueTextColor],
+  [vars.hostWidth]: '280px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default scopesList;

package/src/theme/components/securityQuestionsSetup.js

@@ -0,0 +1,12 @@
+import { SecurityQuestionsSetupClass } from '../../components/descope-security-questions-setup/SecurityQuestionsSetupClass';
+
+export const vars = SecurityQuestionsSetupClass.cssVarList;
+
+const securityQuestionsSetup = {
+  [vars.hostWidth]: 'fit-content',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default securityQuestionsSetup;

package/src/theme/components/securityQuestionsVerify.js

@@ -0,0 +1,16 @@
+import { SecurityQuestionsVerifyClass } from '../../components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
+import { refs } from './inputWrapper';
+
+export const vars = SecurityQuestionsVerifyClass.cssVarList;
+
+const securityQuestionsVerify = {
+  [vars.hostWidth]: 'min-content',
+  [vars.questionCursor]: 'pointer',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+  [vars.questionFontSize]: refs.fontSize,
+  [vars.questionFontFamily]: refs.fontFamily,
+};
+
+export default securityQuestionsVerify;