maru_design2 2.21.0 → 2.22.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [2.22.0](https://github.com/42maru-ai/maru-design2/compare/v2.21.1...v2.22.0) (2025-02-06)
+
+
+### Features
+
+* :art: Dropdown - add msg, update style ([aaed6af](https://github.com/42maru-ai/maru-design2/commit/aaed6af0f3460e659fb8ead331dddaee3369fbae))
+* :label: Table - update scrollIntoView type ([950a248](https://github.com/42maru-ai/maru-design2/commit/950a248d3584dc807b1a4686195977331c5fd23c))
+* :lipstick: MultiSelectDropdown - update style ([0095981](https://github.com/42maru-ai/maru-design2/commit/009598170d2face8a2a7befee381914aa996c027))
+* :sparkles: Dropdown - add menu bottom button [#76](https://github.com/42maru-ai/maru-design2/issues/76) ([e0a65d9](https://github.com/42maru-ai/maru-design2/commit/e0a65d974a314b450609b75aa7b77cfbca51b9da))
+* :sparkles: Dropdown - add searchPlaceholder ([5469d2c](https://github.com/42maru-ai/maru-design2/commit/5469d2c6a2dd51607d49503aae79919008ac9905))
+* :sparkles: Tooltip - add gap ([1ee621c](https://github.com/42maru-ai/maru-design2/commit/1ee621c38fee97bec234edee34d944e53027fbe7))
+
+
+### Bug Fixes
+
+* :art: Tooltip - update padding, gap ([a2b4c8b](https://github.com/42maru-ai/maru-design2/commit/a2b4c8bc05159d0bc44276fb6ff802ead0f11159))
+* :bento: Icon - add icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([11059c5](https://github.com/42maru-ai/maru-design2/commit/11059c59127ddb94c1ffcb4eb437501e474f7901))
+* :bug: Dropdown - add color to menu bottom button ([900077d](https://github.com/42maru-ai/maru-design2/commit/900077d8500efc378c202c572506cecdb93d7f29))
+* :bug: Table - fix table hover render bug [#459](https://github.com/42maru-ai/maru-design2/issues/459) ([3fc17bb](https://github.com/42maru-ai/maru-design2/commit/3fc17bbf382aefef24660ca7776553f110e25778))
+* :bug: Table - update header icon ([e9e09fc](https://github.com/42maru-ai/maru-design2/commit/e9e09fcc8246263868773867cbba4debbfd4d76c))
+* :bug: Table - update header icon tooltip gap ([e91fcb0](https://github.com/42maru-ai/maru-design2/commit/e91fcb0e22604c3ff097c06b86ff749caba43be8))
+* :coffin: MultiSelectDropdown - remove dead code ([89223f7](https://github.com/42maru-ai/maru-design2/commit/89223f7ce91a2fc6effb7b847ff36282d4636475))
+* :lipstick: - update tooltip font weight [#464](https://github.com/42maru-ai/maru-design2/issues/464) ([0692ad2](https://github.com/42maru-ai/maru-design2/commit/0692ad2e52435bb8f065253d1210880288f04939))
+* :lipstick: Colors - UPDATE positive color ([fba04e0](https://github.com/42maru-ai/maru-design2/commit/fba04e0432689f4c3a9de007a330571aeaf36014))
+* :lipstick: Input - update end node ([b3e2930](https://github.com/42maru-ai/maru-design2/commit/b3e2930206c3f420c8cbfc1fe81f3f84983182f6))
+* :lipstick: SearchInput - update active style, show clear ([0301368](https://github.com/42maru-ai/maru-design2/commit/0301368528473307b13514d15838a4dbf684fedc))
+* :twisted_rightwards_arrows: Dropdown - merge develop & resolve conflicts ([90724df](https://github.com/42maru-ai/maru-design2/commit/90724df20e4374b871c4252ef6a6f9762bc5f578))
+
+## [2.21.1](https://github.com/42maru-ai/maru-design2/compare/v2.21.0...v2.21.1) (2025-02-04)
+
+
+### Bug Fixes
+
+* :bento: Icon - delete folders 18, add 24 [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([dd80df3](https://github.com/42maru-ai/maru-design2/commit/dd80df307cef1ade9dfe6cdae3629e0ac7e356b4))
+* :bug: Table - add stopPropagation to action btns [#453](https://github.com/42maru-ai/maru-design2/issues/453) ([275ecfd](https://github.com/42maru-ai/maru-design2/commit/275ecfde6522090550f9f91ba72fedffb689327e))
+
 ## [2.21.0](https://github.com/42maru-ai/maru-design2/compare/v2.20.4...v2.21.0) (2025-02-03)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -155,6 +155,7 @@ export declare const ICONS: {
     readonly Download01_s1313: "Download01_s1313";
     readonly Download01_s1413: "Download01_s1413";
     readonly Download01_s1613: "Download01_s1613";
+    readonly Downstream_s1310: "Downstream_s1310";
     readonly Downstream_s1410: "Downstream_s1410";
     readonly Downstream_s2410: "Downstream_s2410";
     readonly Drag_s1613: "Drag_s1613";
@@ -201,7 +202,7 @@ export declare const ICONS: {
     readonly Folder_s2415: "Folder_s2415";
     readonly Folder_s2420: "Folder_s2420";
     readonly Folder_s2820: "Folder_s2820";
-    readonly Folders_s1815: "Folders_s1815";
+    readonly Folders_s2415: "Folders_s2415";
     readonly Globe01_s1615: "Globe01_s1615";
     readonly GraduationHat01_s1615: "GraduationHat01_s1615";
     readonly GraduationHat01_s2415: "GraduationHat01_s2415";
@@ -229,9 +230,11 @@ export declare const ICONS: {
     readonly MessageText_s1815: "MessageText_s1815";
     readonly MessageX_s1615: "MessageX_s1615";
     readonly Move_s1613: "Move_s1613";
+    readonly Network03_s1110: "Network03_s1110";
     readonly Network03_s1410: "Network03_s1410";
     readonly Network03_s2410: "Network03_s2410";
     readonly Network03_s2415: "Network03_s2415";
+    readonly Network04_s1310: "Network04_s1310";
     readonly Network04_s1410: "Network04_s1410";
     readonly Network04_s2410: "Network04_s2410";
     readonly Pause_s1615: "Pause_s1615";
@@ -322,6 +325,7 @@ export declare const ICONS: {
     readonly XDiamondBg_s2415: "XDiamondBg_s2415";
     readonly X_s1410: "X_s1410";
     readonly X_s1613: "X_s1613";
+    readonly X_s1615: "X_s1615";
     readonly X_s2420: "X_s2420";
     readonly Zap_s1810: "Zap_s1810";
     readonly Zap_s1812: "Zap_s1812";

package/dist/components/atoms/tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TDirection } from '../../../enums/direction';
+import { TTooltipGap } from '../../../enums/gap';
 import './tooltip.scss';
 export interface TooltipProps {
     /**
@@ -20,5 +21,9 @@ export interface TooltipProps {
      * 컴포넌트 createPortal 여부. (@v1 isOnDocument)
      */
     portal?: boolean;
+    /**
+     * 대상와 툴팁 사이의 거리. ['6px', '4px', '0px']
+     */
+    gap?: TTooltipGap;
 }
-export declare function Tooltip({ children, content, className, hidden, direction, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, content, className, hidden, direction, portal, gap, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dropdown/Dropdown.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TColor } from '../../../enums/color';
-import { TButtonType } from '../../../enums/type';
+import { TDropdownType } from '../../../enums/type';
+import { IconProps } from '../../atoms/icon';
 import './dropdown.scss';
 interface DropdownProps<T extends Record<string, any>> {
     data: T[];
@@ -17,24 +18,25 @@ interface DropdownProps<T extends Record<string, any>> {
      * 노출로 쓸 키
      */
     displayKey: string;
+    className?: string;
     /**
-     * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
+     * 드롭다운 버튼의 placeholder
      */
-    anchorEl?: HTMLElement | null;
-    className?: string;
+    placeholder?: string;
+    /**
+     * 메뉴 내 검색창의 placeholder
+     */
+    searchPlaceholder?: string;
+    disabled?: boolean;
     color?: TColor;
     /**
-     * 드롭다운 토글 버튼 사용자 정의 노드. (@v1 toggleChildren)
+     * true로 하면 드롭다운으로 이벤트가 가지 않음
      */
-    customButton?: React.ReactNode;
+    stopPropagation?: boolean;
     /**
-     * 메뉴 아이템 사용자 정의 노드. (@v1 CustomMenuFormat)
+     * 데이터 타입 (@v1 isSearch)
      */
-    customMenuItem?: ({ children, rowId, }: {
-        children: React.ReactNode;
-        rowId: string | number;
-    }) => JSX.Element;
-    disabled?: boolean;
+    type?: TDropdownType;
     /**
      * 에러났을때 메시지. (@v1 isValid, validMessage)
      */
@@ -48,19 +50,14 @@ interface DropdownProps<T extends Record<string, any>> {
      * 초기화 함수 (@v1 hasClearBtn, onClear)
      */
     onClear?: () => void;
-    placeholder?: string;
     /**
-     * 토글 화살표의 위치를 컴포넌트 시작점에 위치시킬지 여부. (@v1 IsToggleArrowStart)
+     * 데이터가 없을때의 문구
      */
-    startArrow?: boolean;
-    /**
-     * 드롭다운 토글 끝점에 위치시킬 노드. (@v1 endNode)
-     */
-    toggleEndNode?: React.ReactNode;
+    noDataMessage?: string;
     /**
-     * 데이터 타입 (@v1 isSearch)
+     * 검색 결과가 없을때의 문구
      */
-    type?: TButtonType;
+    noResultMessage?: string;
     /**
      * 토글, 메뉴 가로 크기(px) (@v1 menuPosition.width)
      */
@@ -69,7 +66,37 @@ interface DropdownProps<T extends Record<string, any>> {
      * 메뉴 세로 크기(px) (@v1 menuPosition.height)
      */
     height?: number;
-    stopPropagation?: boolean;
+    /**
+     * 드롭다운 토글 버튼 사용자 정의 노드. (@v1 toggleChildren)
+     */
+    customButton?: React.ReactNode;
+    /**
+     * 메뉴 아이템 사용자 정의 노드. (@v1 CustomMenuFormat)
+     */
+    customMenuItem?: ({ children, rowId, }: {
+        children: React.ReactNode;
+        rowId: string | number;
+    }) => JSX.Element;
+    /**
+     * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * 토글 화살표의 위치를 컴포넌트 시작점에 위치시킬지 여부. (@v1 IsToggleArrowStart)
+     */
+    startArrow?: boolean;
+    /**
+     * 드롭다운 토글 끝점에 위치시킬 노드. (@v1 endNode)
+     */
+    toggleEndNode?: React.ReactNode;
+    /**
+     * 메뉴 맨 밑에 버튼
+     */
+    menuBottomButton?: {
+        content: string;
+        startIcon?: IconProps;
+        onClick: () => void;
+    };
 }
-export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, anchorEl, className, color, customButton, customMenuItem, disabled, errorMessage, inlineLabel, label, onClear, placeholder, startArrow, toggleEndNode, type, width, height, stopPropagation, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, inlineLabel, label, onClear, noDataMessage, noResultMessage, width, height, customButton, customMenuItem, anchorEl, startArrow, toggleEndNode, menuBottomButton, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/molecules/dropdown/menu/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TColor } from '../../../../enums/color';
+import { IconProps } from '../../../atoms/icon';
+interface Props<T extends Record<string, any>> {
+    data: T[];
+    selectedId: string | undefined;
+    onSelect: (id?: string) => void;
+    idKey: string;
+    displayKey: string;
+    color?: TColor;
+    searchPlaceholder?: string;
+    noDataMessage?: string;
+    noResultMessage?: string;
+    width?: number;
+    height?: number;
+    customMenuItem?: ({ children, rowId, }: {
+        children: React.ReactNode;
+        rowId: string | number;
+    }) => JSX.Element;
+    isSearch: boolean;
+    parent: HTMLElement;
+    open: boolean;
+    onClose: () => void;
+    menuBottomButton?: {
+        content: string;
+        startIcon?: IconProps;
+        onClick: () => void;
+    };
+}
+declare function DropdownMenu<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, color, searchPlaceholder, noDataMessage, noResultMessage, width, height, customMenuItem: CustomMenuItem, isSearch, parent, open, onClose, menuBottomButton, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;

package/dist/components/molecules/dropdown/toggleButton/Clear.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    focus: boolean;
+    onClear: () => void;
+}
+declare function Clear({ focus, onClear }: Props): import("react/jsx-runtime").JSX.Element;
+export default Clear;

package/dist/components/molecules/dropdown/{toggles/Button.d.ts → toggleButton/index.d.ts}

@@ -1,25 +1,22 @@
 import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props<T extends Record<string, any>> {
-    open: boolean;
-    selected: T | undefined;
     displayKey: string;
-    color: TColor;
-    width?: number;
-    disabled?: boolean;
     placeholder?: string;
-    errored?: boolean;
+    disabled?: boolean;
+    color: TColor;
+    stopPropagation?: boolean;
     inlineLabel?: string;
+    width?: number;
+    customButton?: React.ReactNode;
     startArrow?: boolean;
     toggleEndNode?: React.ReactNode;
-    customButton?: React.ReactNode;
-    initFilteredData: () => void;
-    toggleMenuOpen: () => void;
-    initInputValue: () => void;
-    clearSelected: () => void;
-    onClear?: () => void;
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    stopPropagation?: boolean;
+    open: boolean;
+    selected: T | undefined;
+    errored?: boolean;
+    hasClearBtn: boolean;
+    onClear: () => void;
+    onClick: () => void;
 }
-declare function DropdownToggleButton<T extends Record<string, any>>({ open, selected, displayKey, color, width, disabled, placeholder, errored, inlineLabel, startArrow, toggleEndNode, customButton, initFilteredData, toggleMenuOpen, initInputValue, clearSelected, onClear, onKeyDown, stopPropagation, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownToggleButton<T extends Record<string, any>>({ displayKey, placeholder, disabled, color, stopPropagation, inlineLabel, width, customButton, startArrow, toggleEndNode, open, selected, errored, hasClearBtn, onClear, onClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export default DropdownToggleButton;

package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts

@@ -1,4 +1,5 @@
-import { TButtonType } from '../../../enums/type';
+import { TColor } from '../../../enums/color';
+import { TDropdownType } from '../../../enums/type';
 import './multi-select-dropdown.scss';
 export interface MultiSelectDropdownProps<T extends Record<string, any>> {
     data: T[];
@@ -15,36 +16,61 @@ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
      * 노출로 쓸 키
      */
     displayKey: string;
-    content: string;
     /**
-     * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
+     * 드롭다운 버튼에 노출할 컨텐츠
      */
-    anchorEl?: HTMLElement | null;
+    content: string;
     className?: string;
-    disabled?: boolean;
+    /**
+     * 드롭다운 버튼의 placeholder
+     */
     placeholder?: string;
     /**
-     * 데이터 타입 (@v1 isSearch)
-     * 검색할거면 input
+     * 메뉴 내 검색창의 placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * 전체 체크박스 옆에 노출할 라벨
+     */
+    allCheckLabel?: string;
+    disabled?: boolean;
+    color?: TColor;
+    /**
+     * true로 하면 드롭다운으로 이벤트가 가지 않음
      */
-    type?: TButtonType;
+    stopPropagation?: boolean;
+    /**
+     * 데이터 타입
+     */
+    type?: TDropdownType;
+    /**
+     * 에러났을때 메시지
+     */
+    errorMessage?: string;
+    label?: string;
+    /**
+     * 초기화 함수
+     */
+    onClear?: () => void;
     /**
-     * type=button일때는 전체 체크박스 옆에 노출되는 문구
-     * type=input일때는 인풋박스에 노출되는 placeholder
+     * 데이터가 없을때의 문구
      */
-    typeLabel?: string;
+    noDataMessage?: string;
     /**
-     * type=input일때 검색 결과 없을때 문구
+     * 검색 결과가 없을때의 문구
      */
     noResultMessage?: string;
     /**
-     * 토글, 메뉴 가로 크기(px) (@v1 menuPosition.width)
+     * 토글, 메뉴 가로 크기(px)
      */
     width?: number;
     /**
-     * 메뉴 세로 크기(px) (@v1 menuPosition.height)
+     * 메뉴 세로 크기(px)
      */
     height?: number;
-    stopPropagation?: boolean;
+    /**
+     * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
+     */
+    anchorEl?: HTMLElement | null;
 }
-export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, anchorEl, className, disabled, placeholder, type, typeLabel, noResultMessage, width, height, stopPropagation, }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts

@@ -1,18 +1,21 @@
-import { TButtonType } from '../../../../enums/type';
+import { TColor } from '../../../../enums/color';
 interface Props<T extends Record<string, any>> {
-    open: boolean;
-    parent: HTMLElement;
+    data: T[];
     selectedIds: string[];
+    onSelect: (ids: string[]) => void;
     idKey: string;
     displayKey: string;
-    data: T[];
-    type: TButtonType;
-    typeLabel?: string;
+    searchPlaceholder?: string;
+    allCheckLabel?: string;
+    color?: TColor;
+    noDataMessage?: string;
     noResultMessage?: string;
     width?: number;
     height?: number;
-    onSelect: (ids: string[]) => void;
-    closeMenu: () => void;
+    isSearch: boolean;
+    parent: HTMLElement;
+    open: boolean;
+    onClose: () => void;
 }
-declare function DropdownMenu<T extends Record<string, any>>({ open, parent, selectedIds, idKey, displayKey, data, type, typeLabel, noResultMessage, width, height, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, open, onClose, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export default DropdownMenu;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Arrow.d.ts

@@ -0,0 +1,9 @@
+import { TColor } from '../../../../enums/color';
+interface Props {
+    open: boolean;
+    focus: boolean;
+    color: TColor;
+    disabled?: boolean;
+}
+declare function Arrow({ open, focus, color, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default Arrow;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Clear.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    focus: boolean;
+    onClear: () => void;
+}
+declare function Clear({ focus, onClear }: Props): import("react/jsx-runtime").JSX.Element;
+export default Clear;

package/dist/components/molecules/multiSelectDropdown/toggleButton/index.d.ts

@@ -0,0 +1,17 @@
+import { TColor } from '../../../../enums/color';
+interface Props {
+    content: string;
+    placeholder?: string;
+    disabled?: boolean;
+    color: TColor;
+    stopPropagation?: boolean;
+    width?: number;
+    open: boolean;
+    selected: boolean;
+    errored?: boolean;
+    hasClearBtn: boolean;
+    onClear: () => void;
+    onClick: () => void;
+}
+declare function DropdownToggleButton({ content, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default DropdownToggleButton;

package/dist/components/molecules/table/types.d.ts

@@ -92,12 +92,11 @@ export interface TableProps {
     onRowClick?: (rowId: string) => void;
     /**
      * 선택된 행 스타일 지정, onRowClick과 조합해서 사용 가능 (@v1 focusedRowInfo)
-     * @scrollIntoView smooth / center / center
      */
     selectedRow?: {
         rowId: string;
         className?: string;
-        scrollIntoView?: boolean;
+        scrollIntoView?: boolean | ScrollIntoViewOptions;
     };
     /**
      * 하이라이팅할 행과 스타일 지정

package/dist/enums/color.d.ts

@@ -2,7 +2,7 @@ export type TTheme = 'blue' | 'green' | 'navy';
 declare const DColor: {
     readonly primary: "var(--p)";
     readonly secondary: "#8c8c8c";
-    readonly positive: "#58c5a6";
+    readonly positive: "#32a483";
     readonly warning: "#ffb020";
     readonly danger: "#e53e3e";
     readonly success: "#308acc";

package/dist/enums/gap.d.ts

@@ -1,2 +1,4 @@
 export declare const GAPS: readonly ["8px", "4px", "2px"];
 export type TGap = (typeof GAPS)[number];
+export declare const TOOLTIP_GAPS: readonly ["6px", "4px", "0px"];
+export type TTooltipGap = (typeof TOOLTIP_GAPS)[number];

package/dist/enums/type.d.ts

@@ -1,4 +1,4 @@
 export declare const INPUT_TYPES: readonly ["text", "password", "number"];
 export type TInputType = (typeof INPUT_TYPES)[number];
-export declare const BUTTON_TYPES: readonly ["button", "input"];
-export type TButtonType = (typeof BUTTON_TYPES)[number];
+export declare const DROPDOWN_TYPES: readonly ["button", "search"];
+export type TDropdownType = (typeof DROPDOWN_TYPES)[number];

package/dist/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
 declare const useColor: (color?: string) => {
-    keyColor: "var(--p)" | "#8c8c8c" | "#58c5a6" | "#ffb020" | "#e53e3e" | "#308acc";
+    keyColor: "var(--p)" | "#8c8c8c" | "#32a483" | "#ffb020" | "#e53e3e" | "#308acc";
 };
 export default useColor;