@xqmsg/ui-core 0.23.1-rc.1 → 0.23.1-rc.3

package/src/theme/components/alert.ts

@@ -1,60 +1,60 @@
-import colors from '../foundations/colors';
-
-const parts = ['container', 'description', 'icon'];
-
-const baseStyle = {
-  container: {
-    px: '8px',
-    py: '8px',
-  },
-
-  description: {
-    width: '100%',
-    fontSize: '13px',
-    textAlign: 'left',
-    color: colors.label.primary.light,
-    lineHeight: '16px',
-  },
-};
-
-function variantPositive() {
-  return {
-    container: { bg: colors.fill.success },
-  };
-}
-
-function variantWarning() {
-  return {
-    container: { bg: colors.fill.warning },
-  };
-}
-
-function variantError() {
-  return {
-    container: { bg: colors.fill.error },
-  };
-}
-
-function variantNeutral() {
-  return {
-    container: { bg: colors.fill.light.tertiary },
-  };
-}
-
-const variants = {
-  positive: variantPositive,
-  warning: variantWarning,
-  error: variantError,
-  neutral: variantNeutral,
-};
-
-const defaultProps = {
-  variant: 'positive',
-};
-
-export default {
-  parts,
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import colors from '../foundations/colors';
+
+const parts = ['container', 'description', 'icon'];
+
+const baseStyle = {
+  container: {
+    px: '8px',
+    py: '8px',
+  },
+
+  description: {
+    width: '100%',
+    fontSize: '13px',
+    textAlign: 'left',
+    color: colors.label.primary.light,
+    lineHeight: '16px',
+  },
+};
+
+function variantPositive() {
+  return {
+    container: { bg: colors.fill.success },
+  };
+}
+
+function variantWarning() {
+  return {
+    container: { bg: colors.fill.warning },
+  };
+}
+
+function variantError() {
+  return {
+    container: { bg: colors.fill.error },
+  };
+}
+
+function variantNeutral() {
+  return {
+    container: { bg: colors.fill.light.tertiary },
+  };
+}
+
+const variants = {
+  positive: variantPositive,
+  warning: variantWarning,
+  error: variantError,
+  neutral: variantNeutral,
+};
+
+const defaultProps = {
+  variant: 'positive',
+};
+
+export default {
+  parts,
+  baseStyle,
+  variants,
+  defaultProps,
+};

package/src/theme/components/badge.ts

@@ -1,59 +1,59 @@
-import { getColor, mode, transparentize } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const baseStyle = {
-  px: 1,
-  textTransform: 'uppercase',
-  fontSize: 'xs',
-  borderRadius: 'sm',
-  fontWeight: 'bold',
-};
-
-function variantSolid(props: Dict) {
-  const { colorScheme: c, theme } = props;
-  const dark = transparentize(`${c}.500`, 0.6)(theme);
-  return {
-    bg: mode(`${c}.500`, dark)(props),
-    color: mode(`white`, `whiteAlpha.800`)(props),
-  };
-}
-
-function variantSubtle(props: Dict) {
-  const { colorScheme: c, theme } = props;
-  const darkBg = transparentize(`${c}.200`, 0.16)(theme);
-  return {
-    bg: mode(`${c}.100`, darkBg)(props),
-    color: mode(`${c}.800`, `${c}.200`)(props),
-  };
-}
-
-function variantOutline(props: Dict) {
-  const { colorScheme: c, theme } = props;
-  const darkColor = transparentize(`${c}.200`, 0.8)(theme);
-  const lightColor = getColor(theme, `${c}.500`);
-  const color = mode(lightColor, darkColor)(props);
-
-  return {
-    color,
-    boxShadow: `inset 0 0 0px 1px ${color}`,
-  };
-}
-
-const variants = {
-  solid: variantSolid,
-  subtle: variantSubtle,
-  outline: variantOutline,
-};
-
-const defaultProps = {
-  variant: 'subtle',
-  colorScheme: 'gray',
-};
-
-export default {
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import { getColor, mode, transparentize } from '@chakra-ui/theme-tools';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Dict = Record<string, any>;
+
+const baseStyle = {
+  px: 1,
+  textTransform: 'uppercase',
+  fontSize: 'xs',
+  borderRadius: 'sm',
+  fontWeight: 'bold',
+};
+
+function variantSolid(props: Dict) {
+  const { colorScheme: c, theme } = props;
+  const dark = transparentize(`${c}.500`, 0.6)(theme);
+  return {
+    bg: mode(`${c}.500`, dark)(props),
+    color: mode(`white`, `whiteAlpha.800`)(props),
+  };
+}
+
+function variantSubtle(props: Dict) {
+  const { colorScheme: c, theme } = props;
+  const darkBg = transparentize(`${c}.200`, 0.16)(theme);
+  return {
+    bg: mode(`${c}.100`, darkBg)(props),
+    color: mode(`${c}.800`, `${c}.200`)(props),
+  };
+}
+
+function variantOutline(props: Dict) {
+  const { colorScheme: c, theme } = props;
+  const darkColor = transparentize(`${c}.200`, 0.8)(theme);
+  const lightColor = getColor(theme, `${c}.500`);
+  const color = mode(lightColor, darkColor)(props);
+
+  return {
+    color,
+    boxShadow: `inset 0 0 0px 1px ${color}`,
+  };
+}
+
+const variants = {
+  solid: variantSolid,
+  subtle: variantSubtle,
+  outline: variantOutline,
+};
+
+const defaultProps = {
+  variant: 'subtle',
+  colorScheme: 'gray',
+};
+
+export default {
+  baseStyle,
+  variants,
+  defaultProps,
+};

package/src/theme/components/button.ts

@@ -1,163 +1,163 @@
-import { defineStyle } from '@chakra-ui/system';
-import colors from '../foundations/colors';
-
-const baseStyle = defineStyle({
-  borderRadius: '4px',
-  fontSize: '13px',
-  fontWeight: 400,
-  bg: colors.fill.action,
-  color: colors.label.primary.dark,
-  h: '26px',
-  border: 'none',
-  px: '8px',
-  py: '4px',
-  bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
-  shadow: '0.5px 0.5px 1px 1px #0000001A',
-  _disabled: {
-    backgroundColor: 'gray.100',
-    borderColor: 'gray.100',
-    color: 'gray.500',
-    pointerEvents: 'none',
-  },
-  _hover: {
-    bg: colors.fill.action,
-  },
-  _active: {
-    color: colors.label.primary.dark,
-    bg: colors.fill.action,
-    bgGradient: colors.fill.light.quaternary,
-  },
-  _focus: {
-    outline: `2px solid ${colors.border.focus}`,
-    outlineOffset: '0px',
-  },
-});
-
-const variantPrimary = () => {
-  return { ...baseStyle };
-};
-
-const variantSecondary = () => {
-  return {
-    ...baseStyle,
-    color: colors.black,
-    bg: colors.label.primary.dark,
-    _hover: {
-      bg: colors.label.primary.dark,
-    },
-    _active: {
-      color: colors.black,
-      bg: colors.label.primary.dark,
-      bgGradient: colors.fill.light.quaternary,
-    },
-    _focus: {
-      bg: colors.label.primary.dark,
-    },
-  };
-};
-
-const variantTertiary = () => {
-  return {
-    ...baseStyle,
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
-    _hover: {
-      bg: colors.blur.quaternary.dark,
-    },
-    _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark,
-    },
-    _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark,
-    },
-    _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark,
-    },
-  };
-};
-
-const variantPrimaryFlat = () => {
-  return {
-    ...baseStyle,
-    bg: colors.fill.action,
-    bgGradient: null,
-    minWidth: '172.5px',
-    padding: '10px 16px',
-    borderRadius: '8px',
-    border: '0.5px',
-    gap: '8px',
-    height: '44px',
-    // margin: '8px',
-    fontSize: '17px',
-    fontWeight: '500',
-    lineHeight: '24px',
-    letterSpacing: '0.02em',
-    textAlign: 'center',
-    boxShadow: '0px 0.5px 1px 0.5px #0000001A',
-  };
-};
-
-const variantSecondaryFlat = () => {
-  return {
-    ...variantPrimaryFlat(),
-    fontWeight: '400',
-    color: colors.black,
-    bg: colors.label.primary.dark,
-    _hover: {
-      bg: colors.label.primary.dark,
-    },
-    _active: {
-      color: colors.black,
-      bg: colors.label.primary.dark,
-      bgGradient: colors.fill.light.quaternary,
-    },
-    _focus: {
-      bg: colors.label.primary.dark,
-    },
-  };
-};
-const variantTertiaryFlat = () => {
-  return {
-    ...variantPrimaryFlat(),
-    fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
-    _hover: {
-      bg: colors.blur.quaternary.dark,
-    },
-    _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark,
-    },
-    _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark,
-    },
-    _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark,
-    },
-  };
-};
-
-const variants = {
-  primary: variantPrimary(),
-  secondary: variantSecondary(),
-  tertiary: variantTertiary(),
-  'flat-primary': variantPrimaryFlat(),
-  'flat-secondary': variantSecondaryFlat(),
-  'flat-tertiary': variantTertiaryFlat(),
-};
-
-const defaultProps = {
-  variant: 'primary',
-};
-
-export default {
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import { defineStyle } from '@chakra-ui/system';
+import colors from '../foundations/colors';
+
+const baseStyle = defineStyle({
+  borderRadius: '4px',
+  fontSize: '13px',
+  fontWeight: 400,
+  bg: colors.fill.action,
+  color: colors.label.primary.dark,
+  h: '26px',
+  border: 'none',
+  px: '8px',
+  py: '4px',
+  bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
+  shadow: '0.5px 0.5px 1px 1px #0000001A',
+  _disabled: {
+    backgroundColor: 'gray.100',
+    borderColor: 'gray.100',
+    color: 'gray.500',
+    pointerEvents: 'none',
+  },
+  _hover: {
+    bg: colors.fill.action,
+  },
+  _active: {
+    color: colors.label.primary.dark,
+    bg: colors.fill.action,
+    bgGradient: colors.fill.light.quaternary,
+  },
+  _focus: {
+    outline: `2px solid ${colors.border.focus}`,
+    outlineOffset: '0px',
+  },
+});
+
+const variantPrimary = () => {
+  return { ...baseStyle };
+};
+
+const variantSecondary = () => {
+  return {
+    ...baseStyle,
+    color: colors.black,
+    bg: colors.label.primary.dark,
+    _hover: {
+      bg: colors.label.primary.dark,
+    },
+    _active: {
+      color: colors.black,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary,
+    },
+    _focus: {
+      bg: colors.label.primary.dark,
+    },
+  };
+};
+
+const variantTertiary = () => {
+  return {
+    ...baseStyle,
+    color: colors.label.primary.dark,
+    bg: colors.blur.quaternary.dark,
+    _hover: {
+      bg: colors.blur.quaternary.dark,
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.tertiary.dark,
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.quaternary.dark,
+    },
+    _disabled: {
+      backgroundColor: colors.blur.quaternary.dark,
+      color: colors.blur.tertiary.dark,
+    },
+  };
+};
+
+const variantPrimaryFlat = () => {
+  return {
+    ...baseStyle,
+    bg: colors.fill.action,
+    bgGradient: null,
+    minWidth: '120px',
+    padding: '10px 16px',
+    borderRadius: '8px',
+    border: '0.5px',
+    gap: '8px',
+    height: '44px',
+    // margin: '8px',
+    fontSize: '17px',
+    fontWeight: '500',
+    lineHeight: '24px',
+    letterSpacing: '0.02em',
+    textAlign: 'center',
+    boxShadow: '0px 0.5px 1px 0.5px #0000001A',
+  };
+};
+
+const variantSecondaryFlat = () => {
+  return {
+    ...variantPrimaryFlat(),
+    fontWeight: '400',
+    color: colors.black,
+    bg: colors.label.primary.dark,
+    _hover: {
+      bg: colors.label.primary.dark,
+    },
+    _active: {
+      color: colors.black,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary,
+    },
+    _focus: {
+      bg: colors.label.primary.dark,
+    },
+  };
+};
+const variantTertiaryFlat = () => {
+  return {
+    ...variantPrimaryFlat(),
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.blur.quaternary.dark,
+    _hover: {
+      bg: colors.blur.quaternary.dark,
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.tertiary.dark,
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.quaternary.dark,
+    },
+    _disabled: {
+      backgroundColor: colors.blur.quaternary.dark,
+      color: colors.blur.tertiary.dark,
+    },
+  };
+};
+
+const variants = {
+  primary: variantPrimary(),
+  secondary: variantSecondary(),
+  tertiary: variantTertiary(),
+  'flat-primary': variantPrimaryFlat(),
+  'flat-secondary': variantSecondaryFlat(),
+  'flat-tertiary': variantTertiaryFlat(),
+};
+
+const defaultProps = {
+  variant: 'primary',
+};
+
+export default {
+  baseStyle,
+  variants,
+  defaultProps,
+};

package/src/theme/components/checkbox.ts

@@ -1,28 +1,28 @@
-import { checkboxAnatomy } from '@chakra-ui/anatomy';
-import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
-
-const {
-  definePartsStyle,
-  defineMultiStyleConfig,
-} = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
-
-const roundedCheckbox = definePartsStyle({
-  control: {
-    //borderRadius: 50,
-  },
-  label: {
-    fontSize: '17px',
-    fontWeight: 400,
-    lineHeight: '20px',
-    padding: '12px 16px 12px 0px',
-  },
-  height: '44px',
-});
-
-const variants = {
-  mobile: roundedCheckbox,
-};
-
-export default defineMultiStyleConfig({
-  variants,
-});
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const {
+  definePartsStyle,
+  defineMultiStyleConfig,
+} = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const roundedCheckbox = definePartsStyle({
+  control: {
+    //borderRadius: 50,
+  },
+  label: {
+    fontSize: '17px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    padding: '12px 16px 12px 0px',
+  },
+  height: '44px',
+});
+
+const variants = {
+  mobile: roundedCheckbox,
+};
+
+export default defineMultiStyleConfig({
+  variants,
+});

package/src/theme/components/code.ts

@@ -1,16 +1,16 @@
-import Badge from './badge';
-
-const { variants, defaultProps } = Badge;
-
-const baseStyle = {
-  fontFamily: 'mono',
-  fontSize: 'sm',
-  px: '0.2em',
-  borderRadius: 'sm',
-};
-
-export default {
-  baseStyle,
-  variants,
-  defaultProps,
-};
+import Badge from './badge';
+
+const { variants, defaultProps } = Badge;
+
+const baseStyle = {
+  fontFamily: 'mono',
+  fontSize: 'sm',
+  px: '0.2em',
+  borderRadius: 'sm',
+};
+
+export default {
+  baseStyle,
+  variants,
+  defaultProps,
+};