@xqmsg/ui-core 0.10.0 → 0.12.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,7 +19,7 @@ const baseStyle = {
 
 function variantPositive() {
   return {
-    container: { bg: colors.fill.positive },
+    container: { bg: colors.fill.success },
   };
 }
 
@@ -37,7 +37,7 @@ function variantError() {
 
 function variantNeutral() {
   return {
-    container: { bg: colors.fill.light },
+    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/input.ts

@@ -14,7 +14,7 @@ const baseStyle = {
     borderColor: colors.border.default,
     _disabled: {
       cursor: 'not-allowed',
-      bg: colors.fill.light,
+      bg: colors.fill.light.quaternary,
       color: colors.label.secondary.light,
     },
     _focus: {

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: {

package/src/theme/components/table.ts

@@ -0,0 +1,34 @@
+import colors from '../foundations/colors';
+
+const parts = ['th', 'td', 'tr', 'body'];
+
+const baseStyle = {
+  th: {
+    height: 'fit-content',
+    width: '100%',
+    bg: colors.label.primary.dark,
+    padding: '5px 8px !important',
+  },
+  tr: {
+    fontSize: '13px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+
+    height: 'fit-content',
+    borderRadius: 'md',
+    _odd: {
+      background: colors.fill.light.tertiary,
+    },
+  },
+  td: {
+    padding: '5px 8px !important',
+    borderRadius: 'md',
+    width: '100%',
+  },
+};
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/components/tabs.ts

@@ -206,12 +206,12 @@ const variantSimple = {
     position: 'relative',
     borderColor: 'transparent',
     '&.active': {
-      color: colors.blue[500],
+      color: colors.fill.action,
       bg: 'transparent',
-      borderBottom: '1px solid blue.500',
+      borderBottom: `1px solid ${colors.fill.action}`,
     },
     _selected: {
-      color: colors.blue[500],
+      color: colors.fill.action,
       bg: 'transparent',
       _after: {
         content: '""',

package/src/theme/customXQChakraTheme.ts

@@ -12,10 +12,10 @@ import FormError from './components/form-error';
 import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
-import Menu from './components/menu';
 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';
@@ -36,10 +36,10 @@ const customXQChakraTheme = extendTheme({
     FormLabel,
     Input,
     Link,
-    Menu,
     Modal,
     Select,
     Switch,
+    Table,
     Tabs,
     Textarea,
     Text,

package/src/theme/foundations/colors.ts

@@ -63,13 +63,6 @@ const green: ColorHues = {
   900: 'hsl(138, 42%, 6%)',
 };
 
-const aliases: Record<string, ColorHues> = {
-  primary: blue,
-  success: green,
-  warning: orange,
-  danger: red,
-};
-
 const label = {
   primary: { light: '#000000', dark: '#FFFFFF' },
   secondary: { light: '#3C3C4399' },
@@ -82,14 +75,30 @@ const border = {
 };
 
 const fill = {
-  light: '#7474800D',
-  positive: '#d8f1b8',
+  light: {
+    primary: '#74748033',
+    secondary: '#74748029',
+    tertiary: '#7474801F',
+    quaternary: ':#7474800D',
+  },
+  success: '#d8f1b8',
   error: '#ffbdb9',
   warning: '#ffefb4',
-  blue: '#0082ff',
+  action: '#0082ff',
+};
+
+const semantic = {
+  action: '#488ef7',
+  success: '#5fcf65',
+  warning: '#f8c352',
+  error: '#f96057',
 };
 
 const colors = {
+  label,
+  border,
+  fill,
+  semantic,
   transparent: 'transparent',
   current: 'currentColor',
   black: '#000000',
@@ -98,10 +107,6 @@ const colors = {
   coolGray: '#F6F7FB',
   darkBlue: '#292f4c',
   backdrop: '#fbfcff',
-  ...aliases,
-  label,
-  border,
-  fill,
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',

package/src/theme/foundations/shadows.ts

@@ -9,9 +9,9 @@ const shadows = {
   xl:
     '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
   '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  insetOutline: `inset 0 0 0 2px ${colors.blue[200]}`,
-  outline: `0 0 0 2px ${colors.blue[200]}`,
-  outlineDanger600: `0 0 0 2px ${colors.red[600]}`,
+  insetOutline: `inset 0 0 0 2px ${colors.fill.action}`,
+  outline: `0 0 0 2px ${colors.fill.action}`,
+  outlineDanger600: `0 0 0 2px ${colors.fill.error}`,
   inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
   none: 'none',
   'dark-lg':

package/dist/theme/components/menu.d.ts

@@ -1,48 +0,0 @@
-declare const _default: {
-    parts: string[];
-    baseStyle: (props: Record<string, any>) => {
-        list: {
-            bg: string;
-            boxShadow: string;
-            color: string;
-            minW: string;
-            py: number;
-            zIndex: string;
-            borderRadius: string;
-            borderWidth: number;
-            overflow: string;
-        };
-        item: {
-            fontSize: string;
-            py: number;
-            px: number;
-            transition: string;
-            _focus: {
-                bg: string;
-            };
-            _hover: {
-                bg: string;
-            };
-            _active: {
-                bg: string;
-            };
-            _expanded: {
-                bg: string;
-            };
-            _disabled: {
-                opacity: number;
-                cursor: string;
-            };
-        };
-        groupTitle: {
-            mx: number;
-            my: number;
-            fontWeight: string;
-            fontSize: string;
-        };
-        command: {
-            opacity: number;
-        };
-    };
-};
-export default _default;

package/src/theme/components/menu.ts

@@ -1,70 +0,0 @@
-import { mode } from '@chakra-ui/theme-tools';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const parts = ['item', 'command', 'list', 'button', 'groupTitle'];
-
-function baseStyleList(props: Dict) {
-  return {
-    bg: mode(`#fff`, `gray.700`)(props),
-    boxShadow: mode(`2xl`, `dark-lg`)(props),
-    color: 'inherit',
-    minW: '3xs',
-    py: 2,
-    zIndex: 'docked',
-    borderRadius: 'md',
-    borderWidth: 0,
-    overflow: 'hidden',
-  };
-}
-
-function baseStyleItem(props: Dict) {
-  return {
-    fontSize: 'sm',
-    py: 2,
-    px: 4,
-    transition: 'background 50ms ease-in 0s',
-    _focus: {
-      bg: mode(`blue.50`, `whiteAlpha.200`)(props),
-    },
-    _hover: {
-      bg: mode(`blue.50`, `whiteAlpha.200`)(props),
-    },
-    _active: {
-      bg: mode(`gray.200`, `whiteAlpha.200`)(props),
-    },
-    _expanded: {
-      bg: mode(`gray.100`, `whiteAlpha.100`)(props),
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: 'not-allowed',
-    },
-  };
-}
-
-const baseStyleGroupTitle = {
-  mx: 4,
-  my: 2,
-  fontWeight: 'semibold',
-  fontSize: 'sm',
-};
-
-const baseStyleCommand = {
-  opacity: 0.6,
-};
-
-const baseStyle = (props: Dict) => {
-  return {
-    list: baseStyleList(props),
-    item: baseStyleItem(props),
-    groupTitle: baseStyleGroupTitle,
-    command: baseStyleCommand,
-  };
-};
-
-export default {
-  parts,
-  baseStyle,
-};