@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

package/src/theme/components/form-error.ts

@@ -1,31 +1,31 @@
-import colors from '../foundations/colors';
-
-const parts = ['text', 'icon'];
-
-function baseStyleText() {
-  return {
-    color: colors.label.error,
-    position: 'absolute',
-    bottom: 0,
-    // mt: 1,
-    ml: 1,
-    fontSize: '11px',
-  };
-}
-
-function baseStyleIcon() {
-  return {
-    ml: 1,
-    color: colors.label.error,
-  };
-}
-
-const baseStyle = () => ({
-  text: baseStyleText(),
-  icon: baseStyleIcon(),
-});
-
-export default {
-  parts,
-  baseStyle,
-};
+import colors from '../foundations/colors';
+
+const parts = ['text', 'icon'];
+
+function baseStyleText() {
+  return {
+    color: colors.label.error,
+    position: 'absolute',
+    bottom: 0,
+    // mt: 1,
+    ml: 1,
+    fontSize: '11px',
+  };
+}
+
+function baseStyleIcon() {
+  return {
+    ml: 1,
+    color: colors.label.error,
+  };
+}
+
+const baseStyle = () => ({
+  text: baseStyleText(),
+  icon: baseStyleIcon(),
+});
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/components/form-label.ts

@@ -1,17 +1,17 @@
-import colors from '../foundations/colors';
-
-const baseStyle = {
-  fontSize: '11px',
-  fontWeight: 400,
-  position: 'absolute',
-  top: 0,
-  display: 'flex',
-  ml: 1,
-  // mb: 1,
-  color: colors.label.primary.light,
-  opacity: 1,
-};
-
-export default {
-  baseStyle,
-};
+import colors from '../foundations/colors';
+
+const baseStyle = {
+  fontSize: '11px',
+  fontWeight: 400,
+  position: 'absolute',
+  top: 0,
+  display: 'flex',
+  ml: 1,
+  // mb: 1,
+  color: colors.label.primary.light,
+  opacity: 1,
+};
+
+export default {
+  baseStyle,
+};

package/src/theme/components/form.ts

@@ -1,29 +1,29 @@
-import colors from '../foundations/colors';
-
-const parts = ['requiredIndicator', 'helperText'];
-
-function baseStyleRequiredIndicator() {
-  return {
-    ml: 1,
-    color: colors.label.error,
-  };
-}
-
-function baseStyleHelperText() {
-  return {
-    // mt: 1,
-    ml: 1,
-    color: colors.label.secondary.light,
-    fontSize: '11px',
-  };
-}
-
-const baseStyle = () => ({
-  requiredIndicator: baseStyleRequiredIndicator(),
-  helperText: baseStyleHelperText(),
-});
-
-export default {
-  parts,
-  baseStyle,
-};
+import colors from '../foundations/colors';
+
+const parts = ['requiredIndicator', 'helperText'];
+
+function baseStyleRequiredIndicator() {
+  return {
+    ml: 1,
+    color: colors.label.error,
+  };
+}
+
+function baseStyleHelperText() {
+  return {
+    // mt: 1,
+    ml: 1,
+    color: colors.label.secondary.light,
+    fontSize: '11px',
+  };
+}
+
+const baseStyle = () => ({
+  requiredIndicator: baseStyleRequiredIndicator(),
+  helperText: baseStyleHelperText(),
+});
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/components/input.ts

@@ -1,57 +1,65 @@
-import colors from '../foundations/colors';
-
-const parts = ['field'];
-
-const baseStyle = {
-  field: {
-    fontSize: '13px',
-    h: '26px',
-    '::placeholder': {
-      color: colors.label.secondary.light,
-    },
-    py: '5px',
-    px: '8px',
-    border: '.5px solid',
-    borderColor: colors.border.default,
-    _disabled: {
-      opacity: 1,
-      cursor: 'not-allowed',
-      bg: colors.fill.light.quaternary,
-      color: colors.label.secondary.light,
-      border: '1px solid',
-      borderColor: '#9999991A',
-    },
-    _focus: {
-      bg: '#ffffff',
-      border: '2px solid',
-      borderColor: colors.border.focus,
-    },
-  },
-};
-
-const mobileInputs = {
-  ...baseStyle,
-  field: {
-    fontSize: '17px',
-    border: 'none',
-    py: '14px',
-    px: '16px',
-    cursor: 'pointer',
-    lineHeight: '21px',
-    fontWeight: 400,
-    borderRadius: 0,
-  },
-};
-
-const variants = { default: baseStyle, mobile: mobileInputs };
-
-const defaultProps = {
-  variant: 'default',
-};
-
-export default {
-  parts,
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import colors from '../foundations/colors';
+
+const parts = ['field'];
+
+const baseStyle = {
+  field: {
+    fontSize: '13px',
+    h: '26px',
+    '::placeholder': {
+      color: colors.label.secondary.light,
+    },
+    py: '5px',
+    px: '8px',
+    border: '.5px solid',
+    borderColor: colors.border.default,
+    _disabled: {
+      opacity: 1,
+      cursor: 'not-allowed',
+      bg: colors.fill.light.quaternary,
+      color: colors.label.secondary.light,
+      border: '1px solid',
+      borderColor: '#9999991A',
+    },
+    _focus: {
+      bg: '#ffffff',
+      border: '2px solid',
+      borderColor: colors.border.focus,
+    },
+    _placeholder: {
+      color: colors.label.secondary.light,
+    },
+  },
+};
+
+const mobileInputs = {
+  ...baseStyle,
+  field: {
+    fontSize: '17px',
+    py: '14px',
+    px: '16px',
+    cursor: 'pointer',
+    lineHeight: '21px',
+    fontWeight: 400,
+    borderRadius: 0,
+    height: '48px',
+    padding: '12px 16px 12px 0px',
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderColor: 'rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none',
+  },
+};
+
+const variants = { default: baseStyle, mobile: mobileInputs };
+
+const defaultProps = {
+  variant: 'default',
+};
+
+export default {
+  parts,
+  baseStyle,
+  variants,
+  defaultProps,
+};

package/src/theme/components/link.ts

@@ -1,118 +1,118 @@
-import { getColor } from '@chakra-ui/theme-tools';
-import colors from '../foundations/colors';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const baseStyle = {
-  color: colors.fill.action,
-  textDecoration: 'underline',
-  transition: 'none',
-  _hover: {
-    color: 'orange.500',
-  },
-};
-
-function variantSidebar() {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    // height: '56px',
-    pl: 4,
-    pr: 4,
-    py: 2,
-    color: 'gray.500',
-    lineHeight: 1.5,
-    outline: 'none',
-    transition: 'none',
-    textDecoration: 'none',
-    _focus: {
-      boxShadow: 'none',
-    },
-    _hover: {
-      color: 'primary.500',
-      textDecoration: 'none',
-    },
-    '&.active': {
-      color: 'primary.500',
-      fontWeight: 'semibold',
-    },
-  };
-}
-
-// This variant represent the same as the sidebar one above but when the route matches exactly
-// and not only for a child sub route match. I did it as a separate variant instead of a
-// prop to get around React complaining that the dom element was not recognized.
-function variantSidebarExact() {
-  // props: Dict
-  const base = variantSidebar();
-  // const { theme } = props;
-  // const primaryColor = getColor(theme, 'primary.500');
-
-  return {
-    ...base,
-    '&.active': {
-      // ...base['&.active'],
-      // boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
-    },
-  };
-}
-
-function variantSubNavigation(props: Dict) {
-  const { theme } = props;
-  const primaryColor = getColor(theme, 'primary.500');
-
-  return {
-    display: 'block',
-    pl: 10,
-    mb: 3,
-    color: 'gray.900',
-    lineHeight: 'shorter',
-    fontSize: 'sm',
-    outline: 'none',
-    transition: 'none',
-    textDecoration: 'none',
-    _focus: {
-      boxShadow: 'none',
-    },
-    _hover: {
-      color: 'primary.500',
-      textDecoration: 'none',
-    },
-    '&.active': {
-      color: 'primary.500',
-      boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
-      fontWeight: 'semibold',
-    },
-  };
-}
-
-function variantNavlink(props: Dict) {
-  const { colorScheme: c, size } = props;
-
-  return {
-    color: 'gray.500',
-    fontWeight: 'normal',
-    textDecoration: 'none',
-    fontSize: size || 'md',
-    _hover: {
-      color: `${c}.500`,
-      textDecoration: 'none',
-    },
-    '&.active': {
-      color: `${c}.500`,
-    },
-  };
-}
-
-const variants = {
-  sidebar: variantSidebar,
-  sidebarExact: variantSidebarExact,
-  subNavigation: variantSubNavigation,
-  navlink: variantNavlink,
-};
-
-export default {
-  baseStyle,
-  variants,
-};
+import { getColor } from '@chakra-ui/theme-tools';
+import colors from '../foundations/colors';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Dict = Record<string, any>;
+
+const baseStyle = {
+  color: colors.fill.action,
+  textDecoration: 'underline',
+  transition: 'none',
+  _hover: {
+    color: 'orange.500',
+  },
+};
+
+function variantSidebar() {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    // height: '56px',
+    pl: 4,
+    pr: 4,
+    py: 2,
+    color: 'gray.500',
+    lineHeight: 1.5,
+    outline: 'none',
+    transition: 'none',
+    textDecoration: 'none',
+    _focus: {
+      boxShadow: 'none',
+    },
+    _hover: {
+      color: 'primary.500',
+      textDecoration: 'none',
+    },
+    '&.active': {
+      color: 'primary.500',
+      fontWeight: 'semibold',
+    },
+  };
+}
+
+// This variant represent the same as the sidebar one above but when the route matches exactly
+// and not only for a child sub route match. I did it as a separate variant instead of a
+// prop to get around React complaining that the dom element was not recognized.
+function variantSidebarExact() {
+  // props: Dict
+  const base = variantSidebar();
+  // const { theme } = props;
+  // const primaryColor = getColor(theme, 'primary.500');
+
+  return {
+    ...base,
+    '&.active': {
+      // ...base['&.active'],
+      // boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
+    },
+  };
+}
+
+function variantSubNavigation(props: Dict) {
+  const { theme } = props;
+  const primaryColor = getColor(theme, 'primary.500');
+
+  return {
+    display: 'block',
+    pl: 10,
+    mb: 3,
+    color: 'gray.900',
+    lineHeight: 'shorter',
+    fontSize: 'sm',
+    outline: 'none',
+    transition: 'none',
+    textDecoration: 'none',
+    _focus: {
+      boxShadow: 'none',
+    },
+    _hover: {
+      color: 'primary.500',
+      textDecoration: 'none',
+    },
+    '&.active': {
+      color: 'primary.500',
+      boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
+      fontWeight: 'semibold',
+    },
+  };
+}
+
+function variantNavlink(props: Dict) {
+  const { colorScheme: c, size } = props;
+
+  return {
+    color: 'gray.500',
+    fontWeight: 'normal',
+    textDecoration: 'none',
+    fontSize: size || 'md',
+    _hover: {
+      color: `${c}.500`,
+      textDecoration: 'none',
+    },
+    '&.active': {
+      color: `${c}.500`,
+    },
+  };
+}
+
+const variants = {
+  sidebar: variantSidebar,
+  sidebarExact: variantSidebarExact,
+  subNavigation: variantSubNavigation,
+  navlink: variantNavlink,
+};
+
+export default {
+  baseStyle,
+  variants,
+};

package/src/theme/components/modal.ts

@@ -1,45 +1,45 @@
-const parts = [
-  'overlay',
-  'dialogContainer',
-  'dialog',
-  'header',
-  'closeButton',
-  'body',
-  'footer',
-];
-
-const baseStyle = {
-  width: 'fit-content',
-  height: 'fit-content',
-  background: '#F6F6F6',
-  backdropFilter: 'blur(25px)',
-  header: {
-    pt: '32px',
-    px: '32px',
-    pb: '16px',
-    fontSize: '18px',
-    fontWeight: 600,
-    lineHeight: '26px',
-  },
-  body: {
-    pt: 0,
-    pb: '32px',
-    px: '32px',
-    fontSize: '13px',
-    fontWeight: 400,
-    lineHeight: '16px',
-    whiteSpace: 'pre-line',
-  },
-  footer: {
-    py: '16px',
-    px: '32px',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    width: '100%',
-  },
-};
-
-export default {
-  parts,
-  baseStyle,
-};
+const parts = [
+  'overlay',
+  'dialogContainer',
+  'dialog',
+  'header',
+  'closeButton',
+  'body',
+  'footer',
+];
+
+const baseStyle = {
+  width: 'fit-content',
+  height: 'fit-content',
+  background: '#F6F6F6',
+  backdropFilter: 'blur(25px)',
+  header: {
+    pt: '32px',
+    px: '32px',
+    pb: '16px',
+    fontSize: '18px',
+    fontWeight: 600,
+    lineHeight: '26px',
+  },
+  body: {
+    pt: 0,
+    pb: '32px',
+    px: '32px',
+    fontSize: '13px',
+    fontWeight: 400,
+    lineHeight: '16px',
+    whiteSpace: 'pre-line',
+  },
+  footer: {
+    py: '16px',
+    px: '32px',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+};
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/components/select.ts

@@ -1,36 +1,36 @@
-import Input from './input';
-
-const { defaultProps, variants } = Input;
-
-const parts = ['field', 'icon'];
-
-function baseStyleField() {
-  return {
-    ...Input.baseStyle.field,
-    appearance: 'none',
-    paddingBottom: '1px',
-    lineHeight: 'normal',
-    bg: 'white',
-    '> option': {
-      // bg: mode('white', 'gray.700')(props),
-    },
-  };
-}
-
-const baseStyleInput = {
-  color: 'currentColor',
-  fontSize: '1.25rem',
-  _disabled: { opacity: 0.5 },
-};
-
-const baseStyle = () => ({
-  field: baseStyleField(),
-  icon: baseStyleInput,
-});
-
-export default {
-  parts,
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import Input from './input';
+
+const { defaultProps, variants } = Input;
+
+const parts = ['field', 'icon'];
+
+function baseStyleField() {
+  return {
+    ...Input.baseStyle.field,
+    appearance: 'none',
+    paddingBottom: '1px',
+    lineHeight: 'normal',
+    bg: 'white',
+    '> option': {
+      // bg: mode('white', 'gray.700')(props),
+    },
+  };
+}
+
+const baseStyleInput = {
+  color: 'currentColor',
+  fontSize: '1.25rem',
+  _disabled: { opacity: 0.5 },
+};
+
+const baseStyle = () => ({
+  field: baseStyleField(),
+  icon: baseStyleInput,
+});
+
+export default {
+  parts,
+  baseStyle,
+  variants,
+  defaultProps,
+};