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

package/src/theme/components/text.ts

@@ -1,93 +1,93 @@
-import { Text } from '@chakra-ui/react';
-
-const { defaultProps } = Text;
-
-function variantTitleSmall() {
-  return {
-    fontWeight: 700,
-    fontSize: '13px',
-    lineHeight: '16px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantTitleMedium() {
-  return {
-    fontWeight: 600,
-    fontSize: '18px',
-    lineHeight: '26px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantTitleLarge() {
-  return {
-    fontWeight: 700,
-    fontSize: '26px',
-    lineHeight: '32px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantSubtitleSmall() {
-  return {
-    fontWeight: 500,
-    fontSize: '11px',
-    lineHeight: '13px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantSubtitleMedium() {
-  return {
-    fontWeight: 500,
-    fontSize: '12px',
-    lineHeight: '16px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantSubtitleLarge() {
-  return {
-    fontWeight: 500,
-    fontSize: '13px',
-    lineHeight: '16px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantDescriptionSmall() {
-  return {
-    fontWeight: 400,
-    fontSize: '11px',
-    lineHeight: '13px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantDescriptionMedium() {
-  return {
-    fontWeight: 400,
-    fontSize: '12px',
-    lineHeight: '16px',
-    letterSpacing: '0.02em',
-  };
-}
-function variantDescriptionLarge() {
-  return {
-    fontWeight: 400,
-    fontSize: '13px',
-    lineHeight: '16px',
-    letterSpacing: '0.02em',
-  };
-}
-
-const variants = {
-  'title-small': variantTitleSmall,
-  'title-medium': variantTitleMedium,
-  'title-large': variantTitleLarge,
-  'subtitle-small': variantSubtitleSmall,
-  'subtitle-medium': variantSubtitleMedium,
-  'subtitle-large': variantSubtitleLarge,
-  'description-small': variantDescriptionSmall,
-  'description-medium': variantDescriptionMedium,
-  'description-large': variantDescriptionLarge,
-};
-
-export default {
-  variants,
-  defaultProps: { ...defaultProps, variant: variants['description-large'] },
-};
+import { Text } from '@chakra-ui/react';
+
+const { defaultProps } = Text;
+
+function variantTitleSmall() {
+  return {
+    fontWeight: 700,
+    fontSize: '13px',
+    lineHeight: '16px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantTitleMedium() {
+  return {
+    fontWeight: 600,
+    fontSize: '18px',
+    lineHeight: '26px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantTitleLarge() {
+  return {
+    fontWeight: 700,
+    fontSize: '26px',
+    lineHeight: '32px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantSubtitleSmall() {
+  return {
+    fontWeight: 500,
+    fontSize: '11px',
+    lineHeight: '13px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantSubtitleMedium() {
+  return {
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '16px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantSubtitleLarge() {
+  return {
+    fontWeight: 500,
+    fontSize: '13px',
+    lineHeight: '16px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantDescriptionSmall() {
+  return {
+    fontWeight: 400,
+    fontSize: '11px',
+    lineHeight: '13px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantDescriptionMedium() {
+  return {
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '16px',
+    letterSpacing: '0.02em',
+  };
+}
+function variantDescriptionLarge() {
+  return {
+    fontWeight: 400,
+    fontSize: '13px',
+    lineHeight: '16px',
+    letterSpacing: '0.02em',
+  };
+}
+
+const variants = {
+  'title-small': variantTitleSmall,
+  'title-medium': variantTitleMedium,
+  'title-large': variantTitleLarge,
+  'subtitle-small': variantSubtitleSmall,
+  'subtitle-medium': variantSubtitleMedium,
+  'subtitle-large': variantSubtitleLarge,
+  'description-small': variantDescriptionSmall,
+  'description-medium': variantDescriptionMedium,
+  'description-large': variantDescriptionLarge,
+};
+
+export default {
+  variants,
+  defaultProps: { ...defaultProps, variant: variants['description-large'] },
+};

package/src/theme/components/textarea.ts

@@ -1,41 +1,42 @@
-import Input from './input';
-import { defineStyle } from '@chakra-ui/react';
-
-const baseStyle = {
-  ...Input.baseStyle.field,
-  fontSize: '13px',
-
-  display: 'block', // Removes gap below textarea because it defaults to inline.
-  paddingY: '8px',
-  paddingX: '5px',
-  height: '78px',
-  lineHeight: 'short',
-};
-
-const mobileInputs = defineStyle({
-  ...baseStyle,
-  ...Input.variants.mobile.field,
-  border: 'none',
-  borderRadius: 0,
-  paddingY: '14px',
-  paddingX: '16px',
-  padding: '14px 16px',
-  cursor: 'pointer',
-  lineHeight: '21px',
-  fontWeight: 400,
-  resize: 'none',
-  overflowY: 'auto',
-  fontSize: '17px',
-});
-
-const variants = { default: baseStyle, mobile: mobileInputs };
-
-const defaultProps = {
-  variant: 'default',
-};
-
-export default {
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import Input from './input';
+import { defineStyle } from '@chakra-ui/react';
+
+const baseStyle = {
+  ...Input.baseStyle.field,
+  fontSize: '13px',
+
+  display: 'block', // Removes gap below textarea because it defaults to inline.
+  paddingY: '8px',
+  paddingX: '5px',
+  height: '78px',
+  lineHeight: 'short',
+};
+
+const mobileInputs = defineStyle({
+  ...baseStyle,
+  ...Input.variants.mobile.field,
+  border: 'none',
+  borderRadius: 0,
+  paddingY: '16px',
+  paddingX: '0',
+  // padding: '16px 16px',
+  cursor: 'pointer',
+  lineHeight: '21px',
+  fontWeight: 400,
+  resize: 'none',
+  overflowY: 'auto',
+  fontSize: '17px',
+  minHeight: '208px',
+});
+
+const variants = { default: baseStyle, mobile: mobileInputs };
+
+const defaultProps = {
+  variant: 'default',
+};
+
+export default {
+  baseStyle,
+  variants,
+  defaultProps,
+};

package/src/theme/customXQChakraTheme.ts

@@ -1,54 +1,54 @@
-import { extendTheme } from '@chakra-ui/react';
-import breakpoints from './foundations/breakpoints';
-import colors from './foundations/colors';
-import shadows from './foundations/shadows';
-import typography from './foundations/typography';
-import Alert from './components/alert';
-import Badge from './components/badge';
-import Button from './components/button';
-import Checkbox from './components/checkbox';
-import Code from './components/code';
-import Form from './components/form';
-import FormError from './components/form-error';
-import FormLabel from './components/form-label';
-import Input from './components/input';
-import Link from './components/link';
-import Modal from './components/modal';
-import Select from './components/select';
-import Switch from './components/switch';
-import Table from './components/table';
-import Tabs from './components/tabs';
-import Textarea from './components/textarea';
-import Text from './components/text';
-import styles from './styles';
-
-const customXQChakraTheme = extendTheme({
-  breakpoints,
-  colors,
-  shadows,
-  ...typography,
-  components: {
-    Alert,
-    Badge,
-    Button,
-    Checkbox,
-    Code,
-    Form,
-    FormError,
-    FormLabel,
-    Input,
-    Link,
-    Modal,
-    Select,
-    Switch,
-    Table,
-    Tabs,
-    Textarea,
-    Text,
-  },
-  styles,
-});
-
-export type CustomTheme = typeof customXQChakraTheme;
-
-export default customXQChakraTheme;
+import { extendTheme } from '@chakra-ui/react';
+import breakpoints from './foundations/breakpoints';
+import colors from './foundations/colors';
+import shadows from './foundations/shadows';
+import typography from './foundations/typography';
+import Alert from './components/alert';
+import Badge from './components/badge';
+import Button from './components/button';
+import Checkbox from './components/checkbox';
+import Code from './components/code';
+import Form from './components/form';
+import FormError from './components/form-error';
+import FormLabel from './components/form-label';
+import Input from './components/input';
+import Link from './components/link';
+import Modal from './components/modal';
+import Select from './components/select';
+import Switch from './components/switch';
+import Table from './components/table';
+import Tabs from './components/tabs';
+import Textarea from './components/textarea';
+import Text from './components/text';
+import styles from './styles';
+
+const customXQChakraTheme = extendTheme({
+  breakpoints,
+  colors,
+  shadows,
+  ...typography,
+  components: {
+    Alert,
+    Badge,
+    Button,
+    Checkbox,
+    Code,
+    Form,
+    FormError,
+    FormLabel,
+    Input,
+    Link,
+    Modal,
+    Select,
+    Switch,
+    Table,
+    Tabs,
+    Textarea,
+    Text,
+  },
+  styles,
+});
+
+export type CustomTheme = typeof customXQChakraTheme;
+
+export default customXQChakraTheme;

package/src/theme/foundations/breakpoints.ts

@@ -1,18 +1,18 @@
-import {
-  createBreakpoints,
-  BaseBreakpointConfig,
-} from '@chakra-ui/theme-tools';
-
-/**
- * Breakpoints for responsive design
- */
-const breakpointValues: BaseBreakpointConfig = {
-  sm: '30em',
-  md: '48em',
-  lg: '62em',
-  xl: '80em',
-};
-
-const breakpoints = createBreakpoints(breakpointValues);
-
-export default breakpoints;
+import {
+  createBreakpoints,
+  BaseBreakpointConfig,
+} from '@chakra-ui/theme-tools';
+
+/**
+ * Breakpoints for responsive design
+ */
+const breakpointValues: BaseBreakpointConfig = {
+  sm: '30em',
+  md: '48em',
+  lg: '62em',
+  xl: '80em',
+};
+
+const breakpoints = createBreakpoints(breakpointValues);
+
+export default breakpoints;