@descope/web-components-ui 1.0.319 → 1.0.321

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

@@ -0,0 +1,42 @@
+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,
+
+  _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,37 @@
+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.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 };