@xqmsg/ui-core 0.9.3 → 0.11.0

package/src/theme/components/select.ts

@@ -1,14 +1,10 @@
-import { mode } from '@chakra-ui/theme-tools';
 import Input from './input';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
-const { sizes, defaultProps, variants } = Input;
+const { defaultProps, variants } = Input;
 
 const parts = ['field', 'icon'];
 
-function baseStyleField(props: Dict) {
+function baseStyleField() {
   return {
     ...Input.baseStyle.field,
     appearance: 'none',
@@ -16,7 +12,7 @@ function baseStyleField(props: Dict) {
     lineHeight: 'normal',
     bg: 'white',
     '> option': {
-      bg: mode('white', 'gray.700')(props),
+      // bg: mode('white', 'gray.700')(props),
     },
   };
 }
@@ -27,15 +23,14 @@ const baseStyleInput = {
   _disabled: { opacity: 0.5 },
 };
 
-const baseStyle = (props: Dict) => ({
-  field: baseStyleField(props),
+const baseStyle = () => ({
+  field: baseStyleField(),
   icon: baseStyleInput,
 });
 
 export default {
   parts,
   baseStyle,
-  sizes,
   variants,
   defaultProps,
 };

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/components/textarea.ts

@@ -1,54 +1,18 @@
 import Input from './input';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Dict = Record<string, any>;
-
 const baseStyle = {
   ...Input.baseStyle.field,
   display: 'block', // Removes gap below textarea because it defaults to inline.
   paddingY: '8px',
-  minHeight: '80px',
+  height: '80px',
   lineHeight: 'short',
 };
 
-const codeVariant = (props: Dict) => {
-  const { _focus } = Input.variants.outline(props).field;
-  return {
-    bg: 'blue.900',
-    color: 'white',
-    fontFamily: 'mono',
-    fontSize: 'sm',
-    border: '1px',
-    borderColor: 'blue.900',
-    borderRadius: 'lg',
-    p: 6,
-    wordBreak: 'break-all',
-    _focus,
-  };
-};
-
-const variants = {
-  outline: (props: Dict) => Input.variants.outline(props).field,
-  flushed: (props: Dict) => Input.variants.flushed(props).field,
-  filled: (props: Dict) => Input.variants.filled(props).field,
-  code: (props: Dict) => codeVariant(props),
-  unstyled: Input.variants.unstyled.field,
-};
-
-const sizes = {
-  sm: Input.sizes.sm.field,
-  md: Input.sizes.md.field,
-  lg: Input.sizes.lg.field,
-};
-
 const defaultProps = {
-  size: 'lg',
-  variant: 'outline',
+  variant: 'default',
 };
 
 export default {
   baseStyle,
-  sizes,
-  variants,
   defaultProps,
 };

package/src/theme/customXQChakraTheme.ts

@@ -12,7 +12,6 @@ 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';
@@ -36,7 +35,6 @@ const customXQChakraTheme = extendTheme({
     FormLabel,
     Input,
     Link,
-    Menu,
     Modal,
     Select,
     Switch,

package/src/theme/foundations/colors.ts

@@ -63,18 +63,42 @@ 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' },
+  error: '#FF0000',
+};
+
+const border = {
+  focus: '#3A6CD980',
+  default: '#9999991A',
+};
+
+const fill = {
+  light: {
+    primary: '#74748033',
+    secondary: '#74748029',
+    tertiary: '#7474801F',
+    quaternary: ':#7474800D',
+  },
+  success: '#d8f1b8',
+  error: '#ffbdb9',
+  warning: '#ffefb4',
+  action: '#0082ff',
+};
+
+const semantic = {
+  action: '#488ef7',
+  success: '#5fcf65',
+  warning: '#f8c352',
+  error: '#f96057',
 };
 
 const colors = {
+  label,
+  border,
+  fill,
+  semantic,
   transparent: 'transparent',
   current: 'currentColor',
   black: '#000000',
@@ -83,9 +107,6 @@ const colors = {
   coolGray: '#F6F7FB',
   darkBlue: '#292f4c',
   backdrop: '#fbfcff',
-  ...aliases,
-  label,
-
   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/components/input/components/InputTag/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface InputTagProps {
-    value: any;
-    onDelete?: any;
-}
-declare const InputTag: React.FC<InputTagProps>;
-export default InputTag;

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/components/input/components/InputTag/index.tsx

@@ -1,24 +0,0 @@
-import { Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
-import React from 'react';
-
-interface InputTagProps {
-  value: any;
-  onDelete?: any;
-}
-
-const InputTag: React.FC<InputTagProps> = ({ value, onDelete }) => {
-  return (
-    <Tag
-      size={'md'}
-      key={value}
-      borderRadius="full"
-      variant="solid"
-      backgroundColor="#eeeeee"
-    >
-      <TagLabel color={'gray.700'}>{value}</TagLabel>
-      {onDelete && <TagCloseButton color={'gray.700'} onClick={onDelete} />}
-    </Tag>
-  );
-};
-
-export default InputTag;

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,
-};