From 45fc4835829464ca25ef49bbf8e7c18916680067 Mon Sep 17 00:00:00 2001 From: jared-dickman Date: Tue, 6 Aug 2024 10:12:06 -0700 Subject: [PATCH] chore: cascader loading state (#360) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Gary Kaganas Co-authored-by: Gary Kaganas Co-authored-by: Gabriel Tibúrcio Co-authored-by: mparticle-automation --- src/components/data-entry/Form/Form.tsx | 2 +- .../data-entry/QueryItem/Cascader.stories.tsx | 80 ++++++----- .../data-entry/QueryItem/Cascader.tsx | 55 ++++++-- src/styles/_variables.css | 133 +++++++++--------- src/styles/style.ts | 83 +++++------ 5 files changed, 191 insertions(+), 162 deletions(-) diff --git a/src/components/data-entry/Form/Form.tsx b/src/components/data-entry/Form/Form.tsx index d8fb1991a..dc9fdaf35 100644 --- a/src/components/data-entry/Form/Form.tsx +++ b/src/components/data-entry/Form/Form.tsx @@ -7,7 +7,7 @@ export interface IFormProps extends AntFormProps { children: ReactNode } -export const Form = (props: IFormProps) => { +export const Form = (props: IFormProps) => { return ( {props.children} diff --git a/src/components/data-entry/QueryItem/Cascader.stories.tsx b/src/components/data-entry/QueryItem/Cascader.stories.tsx index c74d9844e..e46f39077 100644 --- a/src/components/data-entry/QueryItem/Cascader.stories.tsx +++ b/src/components/data-entry/QueryItem/Cascader.stories.tsx @@ -1,25 +1,7 @@ import { type Meta, type StoryObj } from '@storybook/react' -import { QueryItem } from 'src/components' +import { type IQueryItemCascaderProps, QueryItem } from 'src/components' -const meta: Meta = { - title: 'Aquarium/Data Entry/QueryItem/ValueSelector/Cascader', - component: QueryItem.ValueSelector.Cascader, - parameters: { - docs: { - description: { - component: - 'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.', - }, - }, - }, - - args: {}, -} -export default meta - -type Story = StoryObj - -const exampleOptions = [ +const options: IQueryItemCascaderProps['options'] = [ { value: 'United States1', label: 'United States', @@ -72,16 +54,35 @@ const exampleOptions = [ }, ] +const meta: Meta = { + title: 'Aquarium/Data Entry/QueryItem/ValueSelector/Cascader', + component: QueryItem.ValueSelector.Cascader, + parameters: { + docs: { + description: { + component: + 'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.', + }, + }, + }, + + args: { + options, + }, +} +export default meta + +type Story = StoryObj + export const Default: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Default', - options: exampleOptions, + placeholder: 'Default', }, } export const SimpleList: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Simple', + placeholder: 'Simple List', options: [ { value: 'United States', @@ -97,24 +98,21 @@ export const SimpleList: Story = { export const Error: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Error', - options: exampleOptions, + placeholder: 'Error', errorMessage: 'test error', }, } export const WithIcon: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Icon', - options: exampleOptions, + placeholder: 'With Icon', icon: 'event', }, } export const OnSelect: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Error', - options: exampleOptions, + placeholder: 'On Select', onChange: async value => { console.log(value) }, @@ -123,8 +121,7 @@ export const OnSelect: Story = { export const PreSelectedValue: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader PreSelected', - options: exampleOptions, + placeholder: 'PreSelected', value: ['Canada1', 'Ontario1', 'Toronto1'], onChange: async (values, _) => { console.log(values) @@ -134,10 +131,23 @@ export const PreSelectedValue: Story = { export const LoadData: Story = { args: { - placeholder: 'QueryItem.ValueSelector.Cascader Load', - options: exampleOptions, - loadData: (value: string) => { + placeholder: 'Load', + loadData: async (value: string) => { console.log(value) }, }, -} \ No newline at end of file +} + +export const Loading: Story = { + args: { + placeholder: 'Loading Story', + options: undefined, + loadData: async (value: string) => { + await new Promise((resolve, reject) => { + setTimeout(() => { + resolve(options) + }, 3000) + }) + }, + }, +} diff --git a/src/components/data-entry/QueryItem/Cascader.tsx b/src/components/data-entry/QueryItem/Cascader.tsx index e81a52659..7582fce0f 100644 --- a/src/components/data-entry/QueryItem/Cascader.tsx +++ b/src/components/data-entry/QueryItem/Cascader.tsx @@ -9,8 +9,10 @@ import { Input, Typography, Icon, + Skeleton, } from 'src/components' import { type Icons } from 'src/constants/Icons' +import { useMount } from 'src/hooks/useMount' import { debounce } from 'src/utils/utils' export interface ICascaderOption { @@ -26,7 +28,7 @@ export interface IQueryItemCascaderProps { errorMessage?: string placeholder?: string onChange?: (values: Array, selectedOptions: any) => Promise - loadData?: (value: string) => void + loadData?: (value: string) => Promise value?: Array disabled?: boolean } @@ -37,6 +39,7 @@ const Cascader = (props: IQueryItemCascaderProps) => { const options: ICascaderOption[] = [] const [items, setItems] = useState(props.options ?? options) const [searchValue, setSearchValue] = useState('') + const [isLoading, setIsLoading] = useState(false) const [selectedValue, setSelectedValue] = useState>(props.value ?? []) const [selectedDisplayValue, setSelectedDisplayValue] = useState( props.value && props.value.length > 0 ? (props.value.slice(-1)[0] as any).label : '', @@ -53,6 +56,18 @@ const Cascader = (props: IQueryItemCascaderProps) => { } }, [props.value]) + useMount(() => { + async function init(): Promise { + if (props.loadData && !items?.length) { + setIsLoading(true) + await props.loadData('') + setIsLoading(false) + } + } + + void init() + }) + const onSearch = ({ target: { value } }: { target: { value: string } }) => { if (debouncedLoadData) { if (value.length > 3) { @@ -70,32 +85,42 @@ const Cascader = (props: IQueryItemCascaderProps) => { let debouncedLoadData: (value: string) => void if (props.loadData) { - debouncedLoadData = useCallback(debounce(props.loadData, 500), []) + debouncedLoadData = useCallback( + debounce((value: string) => { + void props.loadData?.(value) + }, 500), + [], + ) } const baseProps: IBaseCascaderProps = { getPopupContainer: triggerNode => triggerNode.parentElement, searchValue, + disabled: props.disabled, value: selectedValue, onChange: (values: Array, selectedOptions: any): void => { setSelectedValue(values as string[]) setSelectedDisplayValue(selectedOptions.slice(-1)[0].label) - if (props.onChange) { - void props.onChange(values, selectedOptions) - } + void props.onChange?.(values, selectedOptions) }, dropdownRender: menu => (
- { - onSearch(a) - }} - /> - {menu} + {isLoading ? ( + + ) : ( + <> + { + onSearch(a) + }} + /> + {menu} + + )}
), showSearch: { diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 6c637daa2..0479fc55e 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,27 +1,26 @@ :root { --blue: #1677ff; - --purple: #722ed1; - --cyan: #13c2c2; - --green: #52c41a; - --magenta: #eb2f96; + --purple: #722ED1; + --cyan: #13C2C2; + --green: #52C41A; + --magenta: #EB2F96; --pink: #eb2f96; - --red: #f5222d; - --orange: #fa8c16; - --yellow: #fadb14; - --volcano: #fa541c; - --geekblue: #2f54eb; - --gold: #faad14; - --lime: #a0d911; + --red: #F5222D; + --orange: #FA8C16; + --yellow: #FADB14; + --volcano: #FA541C; + --geekblue: #2F54EB; + --gold: #FAAD14; + --lime: #A0D911; --color-primary: #3600d1; --color-success: #52c41a; --color-warning: #faad14; - --color-error: #f5222d; + --color-error: #ff4d4f; --color-info: #1677ff; --color-link: #1677ff; - --color-text-base: #0f0e0e; + --color-text-base: #000; --color-bg-base: #fff; - --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; --font-size: 14px; --line-width: 1px; @@ -49,23 +48,16 @@ --color-link-hover: #ab8eff; --control-outline: rgba(54, 0, 209, 0.1); --color-warning-outline: #fffbe6; - --color-error-outline: #fff1f0; + --color-error-outline: #fff2f0; --control-item-bg-hover: #f8f6fb; --control-item-bg-active: #ebe8f8; --control-item-bg-active-hover: #c3aeff; - --color-text: #0f0e0e; - --color-text-secondary: #212020; - --color-text-tertiary: #2c2d2b; - --color-text-quaternary: #505249; - --color-fill: #dcdcd8; - --color-fill-secondary: #ebe8f8; - --color-fill-tertiary: #faf9f8; - --color-fill-quaternary: #f8f6fb; - --color-bg-layout: #ffffff; - --color-bg-spotlight: #2c2d2b; + --color-fill: rgba(15, 14, 14, 0.15); + --color-fill-secondary: rgba(32, 0, 122, 0.06); + --color-fill-tertiary: rgba(15, 14, 14, 0.04); + --color-fill-quaternary: rgba(32, 0, 122, 0.03); --color-border: #c3aeff; --color-border-secondary: #eceae9; - --color-split: #eceae9; --color-primary-bg: #f8f6fb; --color-primary-bg-hover: #ebe8f8; --color-primary-border: #c3aeff; @@ -83,16 +75,6 @@ --color-warning-text-hover: #ad6800; --color-warning-text: #874d00; --color-warning-text-active: #613400; - --color-error-bg: #fff1f0; - --color-error-bg-hover: #ffccc7; - --color-error-border: #ffa39e; - --color-error-border-hover: #ff7875; - --color-error-hover: #ff4d4f; - --color-error-active: #cf1322; - --color-error-text-hover: #a8071a; - --color-error-text: #820014; - --color-error-text-active: #5c0011; - --color-bg-mask: rgba(0, 0, 0, 0.45); --border-radius-lg: 16px; --mp-brand-primary-1: #f8f6fb; --mp-brand-primary-2: #ebe8f8; @@ -104,7 +86,7 @@ --mp-brand-primary-8: #3600d1; --mp-brand-primary-9: #2c00aa; --mp-brand-primary-10: #20007a; - --mp-brand-secondary-1: #fff; + --mp-brand-secondary-1: #ffffff; --mp-brand-secondary-2: #faf9f8; --mp-brand-secondary-3: #eceae9; --mp-brand-secondary-4: #dcdcd8; @@ -280,14 +262,30 @@ --lime8: #5b8c00; --lime9: #3f6600; --lime10: #254000; + --color-text: rgba(0, 0, 0, 0.88); + --color-text-secondary: rgba(0, 0, 0, 0.65); + --color-text-tertiary: rgba(0, 0, 0, 0.45); + --color-text-quaternary: rgba(0, 0, 0, 0.25); + --color-bg-layout: #f5f5f5; --color-bg-container: #ffffff; --color-bg-elevated: #ffffff; + --color-bg-spotlight: rgba(0, 0, 0, 0.85); --color-bg-blur: transparent; --color-success-bg: #f6ffed; --color-success-bg-hover: #d9f7be; --color-success-border: #b7eb8f; --color-success-border-hover: #95de64; --color-success-active: #389e0d; + --color-error-bg: #fff2f0; + --color-error-bg-hover: #fff1f0; + --color-error-bg-active: #ffccc7; + --color-error-border: #ffccc7; + --color-error-border-hover: #ffa39e; + --color-error-hover: #ff7875; + --color-error-active: #d9363e; + --color-error-text-hover: #ff7875; + --color-error-text: #ff4d4f; + --color-error-text-active: #d9363e; --color-warning-bg: #fffbe6; --color-warning-bg-hover: #fff1b8; --color-warning-border: #ffe58f; @@ -303,6 +301,7 @@ --color-info-text: #1677ff; --color-info-text-active: #0958d9; --color-link-active: #0958d9; + --color-bg-mask: rgba(0, 0, 0, 0.45); --color-white: #fff; --font-size-sm: 12px; --font-size-lg: 16px; @@ -328,7 +327,7 @@ --size-lg: 24px; --size-md: 20px; --size-ms: 16px; - --size: 16rem; + --size: 16px; --size-sm: 12px; --size-xs: 8px; --size-xxs: 4px; @@ -342,28 +341,29 @@ --border-radius-xs: 2px; --border-radius-sm: 6px; --border-radius-outer: 6px; - --color-fill-content: #ebe8f8; - --color-fill-content-hover: #dcdcd8; - --color-fill-alter: #f8f6fb; - --color-bg-container-disabled: #faf9f8; + --color-fill-content: rgba(32, 0, 122, 0.06); + --color-fill-content-hover: rgba(15, 14, 14, 0.15); + --color-fill-alter: rgba(32, 0, 122, 0.03); + --color-bg-container-disabled: rgba(15, 14, 14, 0.04); --color-border-bg: #ffffff; - --color-text-placeholder: #505249; - --color-text-disabled: #505249; - --color-text-heading: #0f0e0e; - --color-text-label: #212020; - --color-text-description: #2c2d2b; + --color-split: rgba(44, 22, 11, 0.09); + --color-text-placeholder: rgba(0, 0, 0, 0.25); + --color-text-disabled: rgba(0, 0, 0, 0.25); + --color-text-heading: rgba(0, 0, 0, 0.88); + --color-text-label: rgba(0, 0, 0, 0.65); + --color-text-description: rgba(0, 0, 0, 0.45); --color-text-light-solid: #fff; - --color-highlight: #f5222d; - --color-bg-text-hover: #ebe8f8; - --color-bg-text-active: #dcdcd8; - --color-icon: #2c2d2b; - --color-icon-hover: #0f0e0e; + --color-highlight: #ff4d4f; + --color-bg-text-hover: rgba(32, 0, 122, 0.06); + --color-bg-text-active: rgba(15, 14, 14, 0.15); + --color-icon: rgba(0, 0, 0, 0.45); + --color-icon-hover: rgba(0, 0, 0, 0.88); --font-size-icon: 12px; --line-width-focus: 4px; --control-outline-width: 2px; --control-interactive-size: 16px; - --control-item-bg-active-disabled: #dcdcd8; - --control-tmp-outline: #f8f6fb; + --control-item-bg-active-disabled: rgba(15, 14, 14, 0.15); + --control-tmp-outline: rgba(32, 0, 122, 0.03); --font-weight-strong: 600; --opacity-loading: 0.65; --link-decoration: none; @@ -392,11 +392,9 @@ --margin-lg: 24px; --margin-xl: 32px; --margin-xxl: 48px; - --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), - 0 2px 4px 0 rgba(0, 0, 0, 0.02); + --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) ; --screen-xs: 480px; --screen-xs-min: 480px; --screen-xs-max: 575px; @@ -415,16 +413,11 @@ --screen-xxl: 1600px; --screen-xxl-min: 1600px; --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05); - --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), - 0 5px 12px 4px rgba(0, 0, 0, 0.09); - --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), - -9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), - 9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), - 0 -9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) ; + --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) ; --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08); --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08); --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08); diff --git a/src/styles/style.ts b/src/styles/style.ts index 6d8fc365e..870a0d169 100644 --- a/src/styles/style.ts +++ b/src/styles/style.ts @@ -14,10 +14,10 @@ export const Lime = '#A0D911' export const ColorPrimary = '#3600d1' export const ColorSuccess = '#52c41a' export const ColorWarning = '#faad14' -export const ColorError = '#f5222d' +export const ColorError = '#ff4d4f' export const ColorInfo = '#1677ff' export const ColorLink = '#1677ff' -export const ColorTextBase = '#0f0e0e' +export const ColorTextBase = '#000' export const ColorBgBase = '#fff' export const FontFamily = "'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" @@ -48,23 +48,16 @@ export const Motion = true export const ColorLinkHover = '#ab8eff' export const ControlOutline = 'rgba(54, 0, 209, 0.1)' export const ColorWarningOutline = '#fffbe6' -export const ColorErrorOutline = '#fff1f0' +export const ColorErrorOutline = '#fff2f0' export const ControlItemBgHover = '#f8f6fb' export const ControlItemBgActive = '#ebe8f8' export const ControlItemBgActiveHover = '#c3aeff' -export const ColorText = '#0f0e0e' -export const ColorTextSecondary = '#212020' -export const ColorTextTertiary = '#2c2d2b' -export const ColorTextQuaternary = '#505249' -export const ColorFill = '#dcdcd8' -export const ColorFillSecondary = '#ebe8f8' -export const ColorFillTertiary = '#faf9f8' -export const ColorFillQuaternary = '#f8f6fb' -export const ColorBgLayout = '#ffffff' -export const ColorBgSpotlight = '#2c2d2b' +export const ColorFill = 'rgba(15, 14, 14, 0.15)' +export const ColorFillSecondary = 'rgba(32, 0, 122, 0.06)' +export const ColorFillTertiary = 'rgba(15, 14, 14, 0.04)' +export const ColorFillQuaternary = 'rgba(32, 0, 122, 0.03)' export const ColorBorder = '#c3aeff' export const ColorBorderSecondary = '#eceae9' -export const ColorSplit = '#eceae9' export const ColorPrimaryBg = '#f8f6fb' export const ColorPrimaryBgHover = '#ebe8f8' export const ColorPrimaryBorder = '#c3aeff' @@ -82,16 +75,6 @@ export const ColorWarningHover = '#ffc53d' export const ColorWarningTextHover = '#ad6800' export const ColorWarningText = '#874d00' export const ColorWarningTextActive = '#613400' -export const ColorErrorBg = '#fff1f0' -export const ColorErrorBgHover = '#ffccc7' -export const ColorErrorBorder = '#ffa39e' -export const ColorErrorBorderHover = '#ff7875' -export const ColorErrorHover = '#ff4d4f' -export const ColorErrorActive = '#cf1322' -export const ColorErrorTextHover = '#a8071a' -export const ColorErrorText = '#820014' -export const ColorErrorTextActive = '#5c0011' -export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' export const BorderRadiusLg = '16px' export const MpBrandPrimary1 = '#f8f6fb' export const MpBrandPrimary2 = '#ebe8f8' @@ -279,14 +262,30 @@ export const Lime7 = '#7cb305' export const Lime8 = '#5b8c00' export const Lime9 = '#3f6600' export const Lime10 = '#254000' +export const ColorText = 'rgba(0, 0, 0, 0.88)' +export const ColorTextSecondary = 'rgba(0, 0, 0, 0.65)' +export const ColorTextTertiary = 'rgba(0, 0, 0, 0.45)' +export const ColorTextQuaternary = 'rgba(0, 0, 0, 0.25)' +export const ColorBgLayout = '#f5f5f5' export const ColorBgContainer = '#ffffff' export const ColorBgElevated = '#ffffff' +export const ColorBgSpotlight = 'rgba(0, 0, 0, 0.85)' export const ColorBgBlur = 'transparent' export const ColorSuccessBg = '#f6ffed' export const ColorSuccessBgHover = '#d9f7be' export const ColorSuccessBorder = '#b7eb8f' export const ColorSuccessBorderHover = '#95de64' export const ColorSuccessActive = '#389e0d' +export const ColorErrorBg = '#fff2f0' +export const ColorErrorBgHover = '#fff1f0' +export const ColorErrorBgActive = '#ffccc7' +export const ColorErrorBorder = '#ffccc7' +export const ColorErrorBorderHover = '#ffa39e' +export const ColorErrorHover = '#ff7875' +export const ColorErrorActive = '#d9363e' +export const ColorErrorTextHover = '#ff7875' +export const ColorErrorText = '#ff4d4f' +export const ColorErrorTextActive = '#d9363e' export const ColorWarningBg = '#fffbe6' export const ColorWarningBgHover = '#fff1b8' export const ColorWarningBorder = '#ffe58f' @@ -302,6 +301,7 @@ export const ColorInfoTextHover = '#4096ff' export const ColorInfoText = '#1677ff' export const ColorInfoTextActive = '#0958d9' export const ColorLinkActive = '#0958d9' +export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' export const ColorWhite = '#fff' export const FontSizeSm = '12px' export const FontSizeLg = '16px' @@ -327,7 +327,7 @@ export const SizeXl = '32px' export const SizeLg = '24px' export const SizeMd = '20px' export const SizeMs = '16px' -export const Size = '16rem' +export const Size = '16px' export const SizeSm = '12px' export const SizeXs = '8px' export const SizeXxs = '4px' @@ -341,28 +341,29 @@ export const LineWidthBold = '2px' export const BorderRadiusXs = '2px' export const BorderRadiusSm = '6px' export const BorderRadiusOuter = '6px' -export const ColorFillContent = '#ebe8f8' -export const ColorFillContentHover = '#dcdcd8' -export const ColorFillAlter = '#f8f6fb' -export const ColorBgContainerDisabled = '#faf9f8' +export const ColorFillContent = 'rgba(32, 0, 122, 0.06)' +export const ColorFillContentHover = 'rgba(15, 14, 14, 0.15)' +export const ColorFillAlter = 'rgba(32, 0, 122, 0.03)' +export const ColorBgContainerDisabled = 'rgba(15, 14, 14, 0.04)' export const ColorBorderBg = '#ffffff' -export const ColorTextPlaceholder = '#505249' -export const ColorTextDisabled = '#505249' -export const ColorTextHeading = '#0f0e0e' -export const ColorTextLabel = '#212020' -export const ColorTextDescription = '#2c2d2b' +export const ColorSplit = 'rgba(44, 22, 11, 0.09)' +export const ColorTextPlaceholder = 'rgba(0, 0, 0, 0.25)' +export const ColorTextDisabled = 'rgba(0, 0, 0, 0.25)' +export const ColorTextHeading = 'rgba(0, 0, 0, 0.88)' +export const ColorTextLabel = 'rgba(0, 0, 0, 0.65)' +export const ColorTextDescription = 'rgba(0, 0, 0, 0.45)' export const ColorTextLightSolid = '#fff' -export const ColorHighlight = '#f5222d' -export const ColorBgTextHover = '#ebe8f8' -export const ColorBgTextActive = '#dcdcd8' -export const ColorIcon = '#2c2d2b' -export const ColorIconHover = '#0f0e0e' +export const ColorHighlight = '#ff4d4f' +export const ColorBgTextHover = 'rgba(32, 0, 122, 0.06)' +export const ColorBgTextActive = 'rgba(15, 14, 14, 0.15)' +export const ColorIcon = 'rgba(0, 0, 0, 0.45)' +export const ColorIconHover = 'rgba(0, 0, 0, 0.88)' export const FontSizeIcon = '12px' export const LineWidthFocus = '4px' export const ControlOutlineWidth = '2px' export const ControlInteractiveSize = '16px' -export const ControlItemBgActiveDisabled = '#dcdcd8' -export const ControlTmpOutline = '#f8f6fb' +export const ControlItemBgActiveDisabled = 'rgba(15, 14, 14, 0.15)' +export const ControlTmpOutline = 'rgba(32, 0, 122, 0.03)' export const FontWeightStrong = 600 export const OpacityLoading = 0.65 export const LinkDecoration = 'none'