@descope/web-components-ui 0.0.1

package/src/theme/components/calendar.js

@@ -0,0 +1,91 @@
+import globals from '../globals';
+import { CalendarClass } from '../../components/descope-date-field/descope-calendar/CalendarClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = CalendarClass.cssVarList;
+
+const calendar = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.fontSize,
+  [vars.hostDirection]: refs.direction,
+
+  [vars.calendarPadding]: '1em',
+
+  [vars.topNavVerticalPadding]: '1em',
+  [vars.topNavAlignment]: 'space-between',
+  [vars.topNavGap]: '0',
+  [vars.topNavSelectorsGap]: '0.5em',
+
+  [vars.bottomNavVerticalPadding]: '0.75em',
+  [vars.bottomNavHorizontalPadding]: '1.5em',
+  [vars.bottomNavAlignment]: 'space-between',
+  [vars.bottomNavGap]: '0.5em',
+
+  [vars.navMarginBottom]: '0.75em',
+  [vars.navBorderBottomWidth]: '1px',
+  [vars.navBorderBottomColor]: globalRefs.colors.surface.highlight,
+  [vars.navBorderBottomStyle]: 'solid',
+
+  [vars.yearInputWidth]: '6em',
+  [vars.monthInputWidth]: '8em',
+
+  [vars.navButtonSize]: '24px',
+  [vars.navButtonCursor]: 'pointer',
+
+  [vars.weekdayFontSize]: '0.875em',
+  [vars.weekdayFontWeight]: '500',
+
+  // day table cell
+  [vars.dayHeight]: '3.125em',
+
+  // day value
+  [vars.daySize]: '2.125em',
+  [vars.dayFontSize]: '1em',
+  [vars.dayRadius]: '50%',
+  [vars.dayTextAlign]: 'center',
+  [vars.dayPadding]: '0',
+  [vars.dayTextColor]: globalRefs.colors.surface.contrast,
+  [vars.dayFontWeight]: '500',
+  [vars.dayBackgroundColor]: 'transparent',
+  [vars.dayCursor]: 'pointer',
+  [vars.dayBackgroundColorHover]: globalRefs.colors.primary.highlight,
+
+  // selected day
+  [vars.daySelectedBackgroundColor]: globalRefs.colors.primary.main,
+  [vars.daySelectedTextdColor]: globalRefs.colors.primary.contrast,
+
+  // disabled day (out of min/max range)
+  [vars.dayDisabledTextdColor]: globalRefs.colors.surface.light,
+
+  // today
+  [vars.currentDayBorderColor]: globalRefs.colors.surface.light,
+  [vars.currentDayBorderWidth]: '1px',
+  [vars.currentDayBorderStyle]: 'solid',
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  [vars.navButtonRotation]: 'rotate(180deg)',
+
+  _disabled: {
+    [vars.navButtonOpacity]: '0.5',
+    [vars.dayBackgroundColorHover]: 'none',
+    [vars.navButtonCursor]: 'default',
+    [vars.dayCursor]: 'default',
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+    [vars.dayBlockAlign]: '0 auto',
+  },
+};
+
+export default calendar;
+export { vars };

package/src/theme/components/checkbox.js

@@ -0,0 +1,39 @@
+import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
+import { refs } from './inputWrapper';
+
+const vars = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
+
+const checkbox = {
+  [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.labelFontWeight]: '400',
+  [vars.labelLineHeight]: checkboxSize,
+  [vars.labelSpacing]: '1em',
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputSize]: checkboxSize,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+
+  // 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 checkbox;
+export { vars };

package/src/theme/components/codeSnippet.js

@@ -0,0 +1,145 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { CodeSnippetClass } from '../../components/descope-code-snippet/CodeSnippetClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = CodeSnippetClass.cssVarList;
+
+const light = {
+  color1: '#fa0',
+  color2: '#d73a49',
+  color3: '#6f42c1',
+  color4: '#005cc5',
+  color5: '#e36209',
+  color6: '#6a737d',
+  color7: '#22863a',
+  color8: '#24292e',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#b31d28',
+  color12: '#ffeef0',
+  color13: '#032f62',
+};
+
+const dark = {
+  color1: '#c9d1d9',
+  color2: '#ff7b72',
+  color3: '#d2a8ff',
+  color4: '#79c0ff',
+  color5: '#ffa657',
+  color6: '#8b949e',
+  color7: '#7ee787',
+  color8: '#c9d1d9',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#67060c',
+  color12: '#ffeef0',
+  color13: '#a5d6ff',
+};
+
+const CodeSnippet = {
+  [vars.rootBgColor]: globalRefs.colors.surface.main,
+  [vars.rootTextColor]: globalRefs.colors.surface.contrast,
+  [vars.docTagTextColor]: light.color2,
+  [vars.keywordTextColor]: light.color2,
+  [vars.metaKeywordTextColor]: light.color2,
+  [vars.templateTagTextColor]: light.color2,
+  [vars.templateVariableTextColor]: light.color2,
+  [vars.typeTextColor]: light.color2,
+  [vars.variableLanguageTextColor]: light.color2,
+  [vars.titleTextColor]: light.color3,
+  [vars.titleClassTextColor]: light.color3,
+  [vars.titleClassInheritedTextColor]: light.color3,
+  [vars.titleFunctionTextColor]: light.color3,
+  [vars.attrTextColor]: light.color4,
+  [vars.attributeTextColor]: light.color4,
+  [vars.literalTextColor]: light.color4,
+  [vars.metaTextColor]: light.color4,
+  [vars.numberTextColor]: light.color4,
+  [vars.operatorTextColor]: light.color4,
+  [vars.variableTextColor]: light.color4,
+  [vars.selectorAttrTextColor]: light.color4,
+  [vars.selectorClassTextColor]: light.color4,
+  [vars.selectorIdTextColor]: light.color4,
+  [vars.regexpTextColor]: light.color13,
+  [vars.stringTextColor]: light.color13,
+  [vars.metaStringTextColor]: light.color13,
+  [vars.builtInTextColor]: light.color5,
+  [vars.symbolTextColor]: light.color5,
+  [vars.commentTextColor]: light.color6,
+  [vars.codeTextColor]: light.color6,
+  [vars.formulaTextColor]: light.color6,
+  [vars.nameTextColor]: light.color7,
+  [vars.quoteTextColor]: light.color7,
+  [vars.selectorTagTextColor]: light.color7,
+  [vars.selectorPseudoTextColor]: light.color7,
+  [vars.substTextColor]: light.color8,
+  [vars.sectionTextColor]: light.color4,
+  [vars.bulletTextColor]: light.color9,
+  [vars.emphasisTextColor]: light.color8,
+  [vars.strongTextColor]: light.color8,
+  [vars.additionTextColor]: light.color7,
+  [vars.additionBgColor]: light.color10,
+  [vars.deletionTextColor]: light.color2,
+  [vars.deletionBgColor]: light.color10,
+  /* purposely ignored */
+  // [vars.charEscapeTextColor]: '',
+  // [vars.linkTextColor]: '',
+  // [vars.paramsTextColor]: '',
+  // [vars.propertyTextColor]: '',
+  // [vars.punctuationTextColor]: '',
+  // [vars.tagTextColor  ]: '',
+};
+
+export const codeSnippetDarkThemeOverrides = {
+  codeSnippet: {
+    [vars.rootBgColor]: globalRefs.colors.surface.main,
+    [vars.rootTextColor]: globalRefs.colors.surface.contrast,
+    [vars.docTagTextColor]: dark.color2,
+    [vars.keywordTextColor]: dark.color2,
+    [vars.metaKeywordTextColor]: dark.color2,
+    [vars.templateTagTextColor]: dark.color2,
+    [vars.templateVariableTextColor]: dark.color2,
+    [vars.typeTextColor]: dark.color2,
+    [vars.variableLanguageTextColor]: dark.color2,
+    [vars.titleTextColor]: dark.color3,
+    [vars.titleClassTextColor]: dark.color3,
+    [vars.titleClassInheritedTextColor]: dark.color3,
+    [vars.titleFunctionTextColor]: dark.color3,
+    [vars.attrTextColor]: dark.color4,
+    [vars.attributeTextColor]: dark.color4,
+    [vars.literalTextColor]: dark.color4,
+    [vars.metaTextColor]: dark.color4,
+    [vars.numberTextColor]: dark.color4,
+    [vars.operatorTextColor]: dark.color4,
+    [vars.variableTextColor]: dark.color4,
+    [vars.selectorAttrTextColor]: dark.color4,
+    [vars.selectorClassTextColor]: dark.color4,
+    [vars.selectorIdTextColor]: dark.color4,
+    [vars.regexpTextColor]: dark.color13,
+    [vars.stringTextColor]: dark.color13,
+    [vars.metaStringTextColor]: dark.color13,
+    [vars.builtInTextColor]: dark.color5,
+    [vars.symbolTextColor]: dark.color5,
+    [vars.commentTextColor]: dark.color6,
+    [vars.codeTextColor]: dark.color6,
+    [vars.formulaTextColor]: dark.color6,
+    [vars.nameTextColor]: dark.color7,
+    [vars.quoteTextColor]: dark.color7,
+    [vars.selectorTagTextColor]: dark.color7,
+    [vars.selectorPseudoTextColor]: dark.color7,
+    [vars.substTextColor]: dark.color8,
+    [vars.sectionTextColor]: dark.color4,
+    [vars.bulletTextColor]: dark.color9,
+    [vars.emphasisTextColor]: dark.color8,
+    [vars.strongTextColor]: dark.color8,
+    [vars.additionTextColor]: dark.color7,
+    [vars.additionBgColor]: dark.color10,
+    [vars.deletionTextColor]: dark.color2,
+    [vars.deletionBgColor]: dark.color10,
+  },
+};
+
+export default CodeSnippet;
+export { vars };

package/src/theme/components/comboBox.js

@@ -0,0 +1,93 @@
+import globals from '../globals';
+import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = ComboBoxClass.cssVarList;
+
+export const comboBox = {
+  [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.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.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,
+
+  _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',
+
+  [vars.overlay.contentHeight]: '100%',
+  [vars.overlay.contentOpacity]: '1',
+  _loading: {
+    [vars.overlay.loaderTop]: '50%',
+    [vars.overlay.loaderLeft]: '50%',
+    [vars.overlay.loaderRight]: 'auto',
+    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
+    // Margin has to be half of the width/height of the loader to center it
+    [vars.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars.overlay.loaderWidth]: '30px',
+    [vars.overlay.loaderHeight]: '30px',
+    [vars.overlay.loaderBorder]: '2px solid transparent',
+    [vars.overlay.loaderBorderColor]:
+      `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
+    [vars.overlay.loaderBorderRadius]: '50%',
+    [vars.overlay.contentHeight]: '100px',
+    [vars.overlay.contentOpacity]: '0',
+  },
+};
+
+export default comboBox;
+export { vars };

package/src/theme/components/container.js

@@ -0,0 +1,127 @@
+import { ContainerClass, componentName } from '../../components/descope-container/ContainerClass';
+import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = ContainerClass.cssVarList;
+
+const verticalAlignment = {
+  start: { verticalAlignment: 'start' },
+  center: { verticalAlignment: 'safe center' },
+  end: { verticalAlignment: 'end' },
+};
+
+const horizontalAlignment = {
+  start: { horizontalAlignment: 'start' },
+  center: { horizontalAlignment: 'safe center' },
+  end: { horizontalAlignment: 'end' },
+};
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    verticalAlignment,
+    horizontalAlignment,
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+
+const container = {
+  ...helperTheme,
+
+  [compVars.itemsGrow]: '0',
+  [compVars.hostWidth]: '100%',
+  [compVars.boxShadow]: 'none',
+
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
+
+  [compVars.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
+  [compVars.backgroundPositionX]: 'center',
+  [compVars.backgroundPositionY]: 'center',
+  [compVars.backgroundSize]: 'cover',
+  [compVars.backgroundRepeat]: 'no-repeat',
+
+  [compVars.color]: globalRefs.colors.surface.contrast,
+  [compVars.borderRadius]: '0px',
+  [compVars.hostDirection]: globalRefs.direction,
+
+  verticalPadding: {
+    sm: { [compVars.verticalPadding]: '5px' },
+    md: { [compVars.verticalPadding]: '10px' },
+    lg: { [compVars.verticalPadding]: '20px' },
+  },
+
+  horizontalPadding: {
+    sm: { [compVars.horizontalPadding]: '5px' },
+    md: { [compVars.horizontalPadding]: '10px' },
+    lg: { [compVars.horizontalPadding]: '20px' },
+  },
+
+  direction: {
+    row: {
+      [compVars.flexDirection]: 'row',
+      [compVars.alignItems]: helperRefs.verticalAlignment,
+      [compVars.justifyContent]: helperRefs.horizontalAlignment,
+      [compVars.flexWrap]: 'wrap',
+      horizontalAlignment: {
+        spaceBetween: {
+          [helperVars.horizontalAlignment]: 'space-between',
+        },
+      },
+    },
+    column: {
+      [compVars.flexDirection]: 'column',
+      [compVars.alignItems]: helperRefs.horizontalAlignment,
+      [compVars.justifyContent]: helperRefs.verticalAlignment,
+      verticalAlignment: {
+        spaceBetween: {
+          [helperVars.verticalAlignment]: 'space-between',
+        },
+      },
+    },
+  },
+
+  spaceBetween: {
+    sm: { [compVars.gap]: '10px' },
+    md: { [compVars.gap]: '20px' },
+    lg: { [compVars.gap]: '30px' },
+  },
+
+  shadow: {
+    sm: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+    },
+    md: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+    '2xl': {
+      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
+    },
+  },
+
+  borderRadius: {
+    sm: { [compVars.borderRadius]: globalRefs.radius.sm },
+    md: { [compVars.borderRadius]: globalRefs.radius.md },
+    lg: { [compVars.borderRadius]: globalRefs.radius.lg },
+    xl: { [compVars.borderRadius]: globalRefs.radius.xl },
+    '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
+    '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
+  },
+};
+
+export default container;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/dateField.js

@@ -0,0 +1,32 @@
+import { DateFieldClass } from '../../components/descope-date-field/DateFieldClass';
+import { refs } from './inputWrapper';
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+const shadowColor = '#00000020';
+const { shadow } = globalRefs;
+
+const vars = DateFieldClass.cssVarList;
+
+const dateField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.iconMargin]: '0.375em',
+
+  [vars.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
+  [vars.overlay.backgroundColor]: refs.backgroundColor,
+  [vars.overlay.backdropBackgroundColor]: 'transparent',
+  [vars.overlay.backdropPointerEvents]: 'all',
+  [vars.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor}, ${shadow.narrow.xl} ${shadowColor}`,
+  [vars.overlay.outlineWidth]: '0',
+  [vars.overlay.outlineColor]: 'transparent',
+  [vars.overlay.outlineStyle]: 'none',
+  [vars.overlay.padding]: '0',
+
+  [vars.rtlInputDirection]: 'ltr',
+  [vars.rtlInputAlignment]: 'right',
+};
+
+export default dateField;
+export { vars };

package/src/theme/components/divider.js

@@ -0,0 +1,49 @@
+import globals from '../globals';
+import { componentName, DividerClass } from '../../components/descope-divider/DividerClass';
+import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = DividerClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    thickness: '2px',
+    spacing: '10px',
+  },
+  componentName
+);
+
+const divider = {
+  ...helperTheme,
+
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.alignItems]: 'center',
+  [compVars.flexDirection]: 'row',
+  [compVars.alignSelf]: 'stretch',
+  [compVars.hostWidth]: '100%',
+  [compVars.stripeColor]: globalRefs.colors.surface.light,
+  [compVars.stripeColorOpacity]: '0.5',
+  [compVars.stripeHorizontalThickness]: helperRefs.thickness,
+  [compVars.labelTextWidth]: 'fit-content',
+  [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
+  [compVars.textAlign]: 'center',
+
+  _vertical: {
+    [compVars.minHeight]: '200px',
+    [compVars.flexDirection]: 'column',
+    [compVars.hostWidth]: 'fit-content',
+    [compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
+    [compVars.stripeVerticalThickness]: helperRefs.thickness,
+    [compVars.labelTextWidth]: 'fit-content',
+    [compVars.labelTextMaxWidth]: '100%',
+    [compVars.labelTextVerticalSpacing]: helperRefs.spacing,
+  },
+};
+
+export default divider;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/emailField.js

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

package/src/theme/components/enrichedText.js

@@ -0,0 +1,40 @@
+import globals from '../globals';
+import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
+import { EnrichedTextClass } from '../../components/descope-enriched-text/EnrichedTextClass';
+import { vars as textCompVars } from 'descope-text/theme';
+import { vars as linkCompVars } from './link';
+
+const globalRefs = getThemeRefs(globals);
+const vars = EnrichedTextClass.cssVarList;
+
+const enrichedText = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.hostWidth]: useVar(textCompVars.hostWidth),
+
+  [vars.textLineHeight]: useVar(textCompVars.textLineHeight),
+  [vars.textColor]: useVar(textCompVars.textColor),
+  [vars.textAlign]: useVar(textCompVars.textAlign),
+
+  [vars.fontSize]: useVar(textCompVars.fontSize),
+  [vars.fontWeight]: useVar(textCompVars.fontWeight),
+  [vars.fontFamily]: useVar(textCompVars.fontFamily),
+
+  [vars.linkColor]: useVar(linkCompVars.textColor),
+  [vars.linkTextDecoration]: 'none',
+  [vars.linkHoverTextDecoration]: 'underline',
+
+  [vars.fontWeightBold]: '900',
+  [vars.minWidth]: '0.25em',
+  [vars.minHeight]: '1.35em',
+
+  [vars.hostDisplay]: 'inline-block',
+
+  _empty: {
+    _hideWhenEmpty: {
+      [vars.hostDisplay]: 'none',
+    },
+  },
+};
+
+export default enrichedText;
+export { vars };