@xqmsg/ui-core 0.9.3 → 0.11.0

package/src/components/table/loading/index.tsx

@@ -23,10 +23,10 @@ export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
       justifyContent="center"
       alignItems="center"
       height={20}
-      borderTopColor={colors.gray[100]}
+      borderTopColor={colors.fill.light.quaternary}
     >
       {isLoading ? (
-        <Spinner size="lg" color={colors.blue[500]} />
+        <Spinner size="lg" color={colors.fill.action} />
       ) : (
         <IconButton
           aria-label="Fetch more rows"

package/src/components/tabs/index.tsx

@@ -22,7 +22,7 @@ export const TabsWrapper: React.FC<TabsWrapperProps> = ({
       <TabList
         flexDirection={{ base: 'column', sm: 'row' }}
         border="1px"
-        borderColor={colors.gray[100]}
+        borderColor={colors.fill.light.quaternary}
         bg="white"
         borderRadius="md"
         borderBottom={0}

package/src/components/text/index.tsx

@@ -26,7 +26,7 @@ export const Text: React.FC<TextProps> = ({
   letterSpacing,
   fontWeight,
   variant,
-  color = colors.black,
+  color = colors.label.primary.light,
   className,
 }) => {
   return (

package/src/theme/components/alert.ts

@@ -19,25 +19,25 @@ const baseStyle = {
 
 function variantPositive() {
   return {
-    container: { bg: '#d8f1b8' },
+    container: { bg: colors.fill.success },
   };
 }
 
 function variantWarning() {
   return {
-    container: { bg: '#ffefb4' },
+    container: { bg: colors.fill.warning },
   };
 }
 
 function variantError() {
   return {
-    container: { bg: '#ffbdb9' },
+    container: { bg: colors.fill.error },
   };
 }
 
 function variantNeutral() {
   return {
-    container: { bg: '#7474800D' },
+    container: { bg: colors.fill.light.tertiary },
   };
 }
 

package/src/theme/components/button.ts

@@ -1,211 +1,70 @@
-import { mode, transparentize, getColor } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const baseStyle = {
-  lineHeight: 1,
-  borderRadius: 'md',
-  fontWeight: 'bold',
-  _focus: {
-    boxShadow: 'outline',
-  },
+import { defineStyle } from '@chakra-ui/system';
+import colors from '../foundations/colors';
+
+const baseStyle = defineStyle({
+  borderRadius: '4px',
+  fontSize: '18px',
+  bg: colors.fill.action,
+  color: colors.label.primary.dark,
+  px: '8px',
+  py: '4px',
+  bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
+  shadow: '1px 0.5px #0000001A',
   _disabled: {
-    opacity: 0.4,
-    cursor: 'not-allowed',
-    boxShadow: 'none',
+    backgroundColor: 'gray.100',
+    borderColor: 'gray.100',
+    color: 'gray.500',
+    pointerEvents: 'none',
   },
-};
-
-const focusShadow = (color: string) => `0 0 0 3px ${color}`;
-
-function variantGhost(props: Dict) {
-  const { colorScheme: c, theme } = props;
-
-  if (c === 'gray') {
-    const focusColor = getColor(theme, 'gray.100');
-    return {
-      color: mode(`gray.500`, `whiteAlpha.900`)(props),
-      _hover: { bg: mode(`gray.50`, `whiteAlpha.200`)(props) },
-      _active: { bg: mode(`gray.200`, `whiteAlpha.300`)(props) },
-      _focus: { boxShadow: focusShadow(focusColor) },
-    };
-  }
+  _hover: {
+    bg: colors.fill.action,
+  },
+  _active: {
+    color: colors.label.primary.dark,
+    bg: colors.fill.action,
+    bgGradient: colors.fill.light.quaternary,
+  },
+  _focus: {
+    bg: colors.fill.action,
+    border: `2px solid ${colors.border.focus}`,
+  },
+});
 
-  const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme);
-  const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme);
-  const focusColor = getColor(theme, `${c}.200`);
+const variantSolid = () => {
+  return { ...baseStyle };
+};
 
+const variantOutline = () => {
   return {
-    color: mode(`${c}.500`, `${c}.200`)(props),
-    bg: 'transparent',
+    ...baseStyle,
+    color: colors.fill.action,
+    bg: colors.label.primary.dark,
+    border: 'none',
     _hover: {
-      bg: mode(`${c}.50`, darkHoverBg)(props),
+      bg: colors.label.primary.dark,
     },
     _active: {
-      bg: mode(`${c}.100`, darkActiveBg)(props),
-    },
-    _focus: {
-      boxShadow: focusShadow(focusColor),
+      color: colors.fill.action,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary,
     },
-  };
-}
-
-function variantOutline(props: Dict) {
-  const { colorScheme: c } = props;
-  const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props);
-  return {
-    border: '1px solid',
-    borderColor: c === 'gray' ? borderColor : 'currentColor',
-    ...variantGhost(props),
-  };
-}
-
-type AccessibleColor = {
-  bg?: string;
-  color?: string;
-  hoverBg?: string;
-  activeBg?: string;
-};
-
-/** Accessible color overrides for less accessible colors. */
-const accessibleColorMap: { [key: string]: AccessibleColor } = {
-  yellow: {
-    bg: 'yellow.400',
-    color: 'black',
-    hoverBg: 'yellow.500',
-    activeBg: 'yellow.600',
-  },
-  cyan: {
-    bg: 'cyan.400',
-    color: 'black',
-    hoverBg: 'cyan.500',
-    activeBg: 'cyan.600',
-  },
-};
-
-function variantSolid(props: Dict) {
-  const { colorScheme: c, theme } = props;
-
-  if (c === 'gray')
-    return {
-      color: 'gray.500',
-      bg: mode(`gray.50`, `whiteAlpha.200`)(props),
-      _hover: { bg: mode(`gray.100`, `whiteAlpha.300`)(props) },
-      _active: { bg: mode(`gray.200`, `whiteAlpha.400`)(props) },
-    };
-
-  if (c === 'darkgray')
-    return {
-      color: 'white',
-      bg: 'gray.400',
-      _hover: { bg: 'gray.600' },
-      _active: { bg: 'gray.700' },
-    };
-
-  const {
-    bg = `${c}.500`,
-    color = 'white',
-    hoverBg = `${c}.600`,
-    activeBg = `${c}.700`,
-  } = accessibleColorMap[c] || {};
-  const focusColor = getColor(theme, `${c}.200`);
-  return {
-    bg: mode(bg, `${c}.200`)(props),
-    color: mode(color, `gray.800`)(props),
-    _hover: { bg: mode(hoverBg, `${c}.300`)(props) },
-    _active: { bg: mode(activeBg, `${c}.400`)(props) },
     _focus: {
-      boxShadow: focusShadow(focusColor),
-    },
-  };
-}
-
-/**
- * A variant that displays a solid variant when an active CSS class is
- * detected, otherwise display a ghost variant.  This is useful for pill nav filters.
- */
-function variantActiveSolid(props: Dict) {
-  return {
-    ...variantGhost({ ...props, colorScheme: 'gray' }),
-    '&.active': {
-      ...variantSolid(props),
+      bg: colors.label.primary.dark,
     },
   };
-}
-
-function variantLink(props: Dict) {
-  const { colorScheme: c } = props;
-  return {
-    padding: 0,
-    height: 'auto',
-    lineHeight: 'normal',
-    color: mode(`${c}.500`, `${c}.200`)(props),
-    _hover: { textDecoration: 'underline' },
-    _active: {
-      color: mode(`${c}.700`, `${c}.500`)(props),
-    },
-  };
-}
-
-const variantUnstyled = {
-  bg: 'none',
-  color: 'inherit',
-  display: 'inline',
-  lineHeight: 'inherit',
-  m: 0,
-  p: 0,
 };
 
 const variants = {
-  ghost: variantGhost,
-  outline: variantOutline,
-  solid: variantSolid,
-  activeSolid: variantActiveSolid,
-  link: variantLink,
-  unstyled: variantUnstyled,
-};
-
-const sizes = {
-  lg: {
-    borderRadius: 'full',
-    h: 12,
-    minW: 20,
-    fontSize: 'lg',
-    px: 6,
-  },
-  md: {
-    borderRadius: 'full',
-    h: 10,
-    minW: 20,
-    fontSize: 'md',
-    px: 4,
-  },
-  sm: {
-    borderRadius: 'full',
-    h: 8,
-    minW: 8,
-    fontSize: 'sm',
-    px: 3,
-  },
-  xs: {
-    borderRadius: 'full',
-    h: 6,
-    minW: 6,
-    fontSize: 'xs',
-    px: 2,
-  },
+  solid: variantSolid(),
+  outline: variantOutline(),
 };
 
 const defaultProps = {
-  variant: 'solid',
-  size: 'md',
-  colorScheme: 'primary',
+  solid: 'solid',
 };
 
 export default {
   baseStyle,
   variants,
-  sizes,
   defaultProps,
 };

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

@@ -1,29 +1,26 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
+import colors from '../foundations/colors';
 
 const parts = ['text', 'icon'];
 
-function baseStyleText(props: Dict) {
+function baseStyleText() {
   return {
-    color: mode('red.500', 'red.300')(props),
+    color: colors.label.error,
     mt: 1,
-    lineHeight: 'normal',
-    fontSize: 'sm',
+    ml: 1,
+    fontSize: '13px',
   };
 }
 
-function baseStyleIcon(props: Dict) {
+function baseStyleIcon() {
   return {
-    mr: '0.5em',
-    color: mode('red.500', 'red.300')(props),
+    ml: 1,
+    color: colors.label.error,
   };
 }
 
-const baseStyle = (props: Dict) => ({
-  text: baseStyleText(props),
-  icon: baseStyleIcon(props),
+const baseStyle = () => ({
+  text: baseStyleText(),
+  icon: baseStyleIcon(),
 });
 
 export default {

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

@@ -1,14 +1,14 @@
+import colors from '../foundations/colors';
+
 const baseStyle = {
-  fontSize: 'md',
-  mr: 3,
+  fontSize: '13px',
+  position: 'absolute',
+  top: 0,
+  display: 'flex',
+  ml: 1,
   mb: 1,
-  fontWeight: 'bold',
-  color: 'gray.700',
-  transition: 'all 0.2s',
+  color: colors.label.primary.light,
   opacity: 1,
-  _disabled: {
-    opacity: 0.4,
-  },
 };
 
 export default {

package/src/theme/components/form.ts

@@ -1,29 +1,26 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
+import colors from '../foundations/colors';
 
 const parts = ['requiredIndicator', 'helperText'];
 
-function baseStyleRequiredIndicator(props: Dict) {
+function baseStyleRequiredIndicator() {
   return {
     ml: 1,
-    color: mode('red.500', 'red.300')(props),
+    color: colors.label.error,
   };
 }
 
-function baseStyleHelperText(props: Dict) {
+function baseStyleHelperText() {
   return {
+    color: colors.label.secondary.light,
     mt: 1,
-    color: mode('gray.400', 'whiteAlpha.600')(props),
-    lineHeight: 'normal',
-    fontSize: 'sm',
+    ml: 1,
+    fontSize: '13px',
   };
 }
 
-const baseStyle = (props: Dict) => ({
-  requiredIndicator: baseStyleRequiredIndicator(props),
-  helperText: baseStyleHelperText(props),
+const baseStyle = () => ({
+  requiredIndicator: baseStyleRequiredIndicator(),
+  helperText: baseStyleHelperText(),
 });
 
 export default {

package/src/theme/components/input.ts

@@ -1,213 +1,39 @@
-import { getColor, mode, transparentize } 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 parts = ['field', 'addon'];
+const parts = ['field'];
 
 const baseStyle = {
   field: {
-    width: '100%',
-    outline: 0,
-    position: 'relative',
-    appearance: 'none',
-    transition: 'all 0.2s',
+    fontSize: '13px',
     '::placeholder': {
-      color: 'gray.300',
+      color: colors.label.secondary.light,
     },
-  },
-};
-
-const size = {
-  lg: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 12,
-    borderRadius: 'md',
-  },
-
-  md: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 10,
-    borderRadius: 'md',
-  },
-
-  sm: {
-    fontSize: 'sm',
-    pl: 3,
-    pr: 3,
-    h: 8,
-    borderRadius: 'sm',
-  },
-};
-
-const sizes = {
-  lg: {
-    field: size.lg,
-    addon: size.lg,
-  },
-  md: {
-    field: size.md,
-    addon: size.md,
-  },
-  sm: {
-    field: size.sm,
-    addon: size.sm,
-  },
-};
-
-function getDefaults(props: Dict) {
-  const { focusBorderColor: fc, errorBorderColor: ec } = props;
-  return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
-    errorBorderColor: ec || mode('red.500', 'red.300')(props),
-  };
-}
-
-function variantOutline(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      border: '1px solid',
-      borderColor: 'inherit',
-      bg: 'white',
-      _hover: {
-        borderColor: mode('gray.300', 'whiteAlpha.400')(props),
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-      },
-      _focus: {
-        zIndex: 1,
-        borderColor: getColor(theme, fc),
-        boxShadow: `0 0 0 2px ${transparentize(fc, 0.3)(theme)}`,
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-        boxShadow: 'none',
-        _focus: {
-          boxShadow: `0 0 0 2px ${transparentize(ec, 0.3)(theme)}`,
-        },
-      },
-    },
-    addon: {
-      border: '1px solid',
-      borderColor: mode('inherit', 'whiteAlpha.50')(props),
-      bg: mode('gray.100', 'whiteAlpha.300')(props),
-    },
-  };
-}
-
-function variantFilled(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.50', 'whiteAlpha.50')(props),
-      _hover: {
-        bg: mode('gray.100', 'whiteAlpha.100')(props),
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-      },
-      _focus: {
-        bg: 'transparent',
-        borderColor: getColor(theme, fc),
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-      },
+    py: '5px',
+    px: '8px',
+    border: '1px solid',
+    borderColor: colors.border.default,
+    _disabled: {
+      cursor: 'not-allowed',
+      bg: colors.fill.light.quaternary,
+      color: colors.label.secondary.light,
     },
-    addon: {
+    _focus: {
+      bg: '#ffffff',
       border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.100', 'whiteAlpha.50')(props),
+      borderColor: colors.border.focus,
     },
-  };
-}
-
-function variantFlushed(props: Dict) {
-  const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
-
-  return {
-    field: {
-      borderBottom: '1px solid inherit',
-      borderRadius: 0,
-      pl: 0,
-      pr: 0,
-      bg: 'transparent',
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all',
-      },
-      _focus: {
-        borderColor: getColor(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${getColor(theme, fc)}`,
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-      },
-    },
-    addon: {
-      borderBottom: '2px solid',
-      borderColor: 'inherit',
-      borderRadius: 0,
-      paddingX: 0,
-      bg: 'transparent',
-    },
-  };
-}
-
-const variantUnstyled = {
-  field: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto',
-  },
-  addon: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto',
   },
 };
 
-const variants = {
-  outline: variantOutline,
-  filled: variantFilled,
-  flushed: variantFlushed,
-  unstyled: variantUnstyled,
-};
+const variants = { default: baseStyle };
 
 const defaultProps = {
-  size: 'lg',
-  variant: 'outline',
+  variant: 'default',
 };
 
 export default {
   parts,
   baseStyle,
-  sizes,
   variants,
   defaultProps,
 };

package/src/theme/components/link.ts

@@ -1,10 +1,11 @@
 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: 'blue.500',
+  color: colors.fill.action,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {