From d3fb144836124262eda76280a87eb2b75f5fa973 Mon Sep 17 00:00:00 2001 From: vpsmolina Date: Mon, 20 Jan 2025 12:38:08 +0300 Subject: [PATCH 1/2] fix: replaced deprecated colors --- docs/docs/components/core/navbars/Tabs.mdx | 2 +- .../core/popups/modalBase/AlertContent.mdx | 2 +- packages/calendar/src/Calendar/Calendar.tsx | 2 +- .../src/Calendar/components/Months.tsx | 8 +++++-- .../src/Calendar/components/Years.tsx | 6 ++++- .../src/controls/CheckBox/CheckSquare.tsx | 2 +- packages/core/src/controls/Swipe/Swipe.tsx | 2 +- .../__snapshots__/DropDown.test.tsx.snap | 4 ++-- .../components/DropDown/components/Chip.tsx | 2 +- .../DropDown/components/Selector.tsx | 4 ++-- .../__snapshots__/Chip.test.tsx.snap | 4 ++-- .../__snapshots__/ChipList.test.tsx.snap | 4 ++-- .../__snapshots__/Selector.test.tsx.snap | 22 +++++++++---------- .../__snapshots__/InputField.test.tsx.snap | 4 ++-- packages/core/src/inputs/style/validStyle.tsx | 2 +- packages/core/src/other/README.md | 2 +- .../__snapshots__/Status.test.tsx.snap | 2 +- .../Status/components/StatusTag.tsx | 4 ++-- .../__snapshots__/AlertContent.test.tsx.snap | 4 ++-- .../components/ModalBase/stylesCreate.ts | 2 +- .../__snapshots__/ModalAsk.test.tsx.snap | 4 ++-- .../__snapshots__/ModalError.test.tsx.snap | 4 ++-- .../__snapshots__/ModalSuccess.test.tsx.snap | 4 ++-- .../components/SnackbarBase/stylesCreate.ts | 2 +- .../TooltipBase/DescriptionText.tsx | 2 +- .../DescriptionText.test.tsx.snap | 2 +- .../components/TooltipBase/stylesCreate.ts | 6 ++--- .../core/src/styles/constants/colors/color.ts | 12 +++++----- .../core/src/styles/constants/colors/types.ts | 4 ++-- .../Home/Core/DragAndDrop/ui/index.tsx | 6 ++--- src/shared/lib/hooks/useNavigationTheme.ts | 2 +- .../Core/Progress/ui/SpinnerWidget.tsx | 2 +- 32 files changed, 71 insertions(+), 63 deletions(-) diff --git a/docs/docs/components/core/navbars/Tabs.mdx b/docs/docs/components/core/navbars/Tabs.mdx index 2710ad9e1..0511498d7 100644 --- a/docs/docs/components/core/navbars/Tabs.mdx +++ b/docs/docs/components/core/navbars/Tabs.mdx @@ -111,7 +111,7 @@ Background color for tab | Type | DEFAULT | |:-------|:-------------------| -| string | colors.ElementBase | +| string | colors.ElementAccent | Background color for active tab diff --git a/docs/docs/components/core/popups/modalBase/AlertContent.mdx b/docs/docs/components/core/popups/modalBase/AlertContent.mdx index aeec3c606..8f8f96054 100644 --- a/docs/docs/components/core/popups/modalBase/AlertContent.mdx +++ b/docs/docs/components/core/popups/modalBase/AlertContent.mdx @@ -61,7 +61,7 @@ Predefined name for AlertContent | TYPE | DEFAULT | |:-------|:----------------| -| string | colors.IconBase | +| string | colors.IconAccent | Predefined color for AlertContent diff --git a/packages/calendar/src/Calendar/Calendar.tsx b/packages/calendar/src/Calendar/Calendar.tsx index b0396ee8e..c7713abd2 100644 --- a/packages/calendar/src/Calendar/Calendar.tsx +++ b/packages/calendar/src/Calendar/Calendar.tsx @@ -96,7 +96,7 @@ const Calendar: FC = props => { const [yearRange, setYearRange] = useState( calculateYearRange(currentYear), ); - const dateDots = getDottedDates(dottedDates, colors.ElementBase); + const dateDots = getDottedDates(dottedDates, colors.ElementAccent); const dateToday = getMarkedToday(colorsArg); const themeStyles = useMemo( diff --git a/packages/calendar/src/Calendar/components/Months.tsx b/packages/calendar/src/Calendar/components/Months.tsx index ccec85aca..e472b2362 100644 --- a/packages/calendar/src/Calendar/components/Months.tsx +++ b/packages/calendar/src/Calendar/components/Months.tsx @@ -32,9 +32,13 @@ const Months: FC = props => { const getStyle = useCallback( ({pressed}: {pressed: boolean}) => [ styles.month, - {backgroundColor: pressed ? colors.BgAccentSoft : colors.BgPrimary}, + { + backgroundColor: pressed + ? colors.AdditionalSixthSoft + : colors.BgPrimary, + }, ], - [colors.BgAccentSoft, colors.BgPrimary], + [colors.AdditionalSixthSoft, colors.BgPrimary], ); const renderItem = useCallback( diff --git a/packages/calendar/src/Calendar/components/Years.tsx b/packages/calendar/src/Calendar/components/Years.tsx index 50b233a59..769512ee5 100644 --- a/packages/calendar/src/Calendar/components/Years.tsx +++ b/packages/calendar/src/Calendar/components/Years.tsx @@ -32,7 +32,11 @@ const Years: FC = props => { const getStyle = useCallback( ({pressed}: {pressed: boolean}) => [ styles.year, - {backgroundColor: pressed ? colors.BgAccentSoft : colors.BgPrimary}, + { + backgroundColor: pressed + ? colors.AdditionalSixthSoft + : colors.BgPrimary, + }, ], [], ); diff --git a/packages/core/src/controls/CheckBox/CheckSquare.tsx b/packages/core/src/controls/CheckBox/CheckSquare.tsx index 0de2e6245..46d6b94e0 100644 --- a/packages/core/src/controls/CheckBox/CheckSquare.tsx +++ b/packages/core/src/controls/CheckBox/CheckSquare.tsx @@ -20,7 +20,7 @@ const CheckSquare: FC = ({ ) : null} diff --git a/packages/core/src/controls/Swipe/Swipe.tsx b/packages/core/src/controls/Swipe/Swipe.tsx index 6e6bf8ec9..b6d051b5f 100644 --- a/packages/core/src/controls/Swipe/Swipe.tsx +++ b/packages/core/src/controls/Swipe/Swipe.tsx @@ -101,7 +101,7 @@ const Swipe: FC = ({ inputRange: [leftPos, rightPos], outputRange: [ passiveColor || colors.ElementMuted, - activeColor || colors.ElementBase, + activeColor || colors.ElementAccent, ], extrapolate: 'clamp', }); diff --git a/packages/core/src/inputs/components/DropDown/__tests__/__snapshots__/DropDown.test.tsx.snap b/packages/core/src/inputs/components/DropDown/__tests__/__snapshots__/DropDown.test.tsx.snap index 89e7a0c4d..4b40f3ca6 100644 --- a/packages/core/src/inputs/components/DropDown/__tests__/__snapshots__/DropDown.test.tsx.snap +++ b/packages/core/src/inputs/components/DropDown/__tests__/__snapshots__/DropDown.test.tsx.snap @@ -117,7 +117,7 @@ exports[`@lad-tech/mobydick-core/DropDown multiselect snapshot 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 8, "flexDirection": "row", "padding": 4, @@ -582,7 +582,7 @@ exports[`@lad-tech/mobydick-core/DropDown renders correctly 10 elements type val [ { "alignItems": "center", - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderColor": "transparent", "borderRadius": 8, "borderWidth": 1, diff --git a/packages/core/src/inputs/components/DropDown/components/Chip.tsx b/packages/core/src/inputs/components/DropDown/components/Chip.tsx index 4fd72ee8b..e38515dc2 100644 --- a/packages/core/src/inputs/components/DropDown/components/Chip.tsx +++ b/packages/core/src/inputs/components/DropDown/components/Chip.tsx @@ -53,7 +53,7 @@ const styleSource = createStyles(({colors, spaces}) => ({ borderRadius: spaces.Space8, padding: spaces.Space4, paddingLeft: spaces.Space8, - backgroundColor: colors.BgAccentSoft, + backgroundColor: colors.AdditionalSixthSoft, }, text: { marginRight: spaces.Space4, diff --git a/packages/core/src/inputs/components/DropDown/components/Selector.tsx b/packages/core/src/inputs/components/DropDown/components/Selector.tsx index 30d9cda8f..50ff31493 100644 --- a/packages/core/src/inputs/components/DropDown/components/Selector.tsx +++ b/packages/core/src/inputs/components/DropDown/components/Selector.tsx @@ -97,7 +97,7 @@ function renderItem(props: IRenderItemProps) { const backgroundColorItem = selectedItemColor ? {backgroundColor: selectedItemColor} - : {backgroundColor: theme.colors.BgAccentSoft}; + : {backgroundColor: theme.colors.AdditionalSixthSoft}; return ( (props: IRenderItemProps) { ]} onPress={() => renderItemOnPress(item)} underlayColor={ - selectedItemColor ? selectedItemColor : theme.colors.BgAccentSoft + selectedItemColor ? selectedItemColor : theme.colors.AdditionalSixthSoft }> { const getBackgroundColorText = useCallback(() => { switch (state) { case IStatusState.blue: - return colors.BgAccentSoft; + return colors.AdditionalSixthSoft; case IStatusState.red: return colors.BgError; case IStatusState.green: @@ -49,7 +49,7 @@ const StatusTag = ({state, text, style}: IProps) => { } }, [ state, - colors.BgAccentSoft, + colors.AdditionalSixthSoft, colors.BgError, colors.BgSuccess, colors.BgWarning, diff --git a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/AlertContent.test.tsx.snap b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/AlertContent.test.tsx.snap index 7d46b68bc..20c687fdf 100644 --- a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/AlertContent.test.tsx.snap +++ b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/AlertContent.test.tsx.snap @@ -5,7 +5,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly AlertContent style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, @@ -33,7 +33,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly AlertContent style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, diff --git a/packages/core/src/popups/components/ModalBase/stylesCreate.ts b/packages/core/src/popups/components/ModalBase/stylesCreate.ts index e97086c0b..6388da17b 100644 --- a/packages/core/src/popups/components/ModalBase/stylesCreate.ts +++ b/packages/core/src/popups/components/ModalBase/stylesCreate.ts @@ -29,7 +29,7 @@ const stylesCreate = createStyles(({spaces, colors}) => { alertView: { borderRadius: 100, padding: spaces.Space12, - backgroundColor: colors.BgAccentSoft, + backgroundColor: colors.AdditionalSixthSoft, }, text: { marginTop: spaces.Space24, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap index 11195d2e8..aa89d1388 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap @@ -76,7 +76,7 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = ` style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, @@ -378,7 +378,7 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly with optional style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap index 510be0ea0..49a2825dd 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap @@ -76,7 +76,7 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly 1`] = ` style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, @@ -310,7 +310,7 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly with option style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap index 885bcc9de..e9277e5f9 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap @@ -76,7 +76,7 @@ exports[`@lad-tech/mobydick-core/modalSuccess should renders correctly 1`] = ` style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, @@ -308,7 +308,7 @@ exports[`@lad-tech/mobydick-core/modalSuccess should renders correctly with opti style={ [ { - "backgroundColor": "rgba(43, 120, 238, 0.15)", + "backgroundColor": "rgba(91, 153, 249, 0.1)", "borderRadius": 100, "padding": 12, }, diff --git a/packages/core/src/popups/components/SnackbarBase/stylesCreate.ts b/packages/core/src/popups/components/SnackbarBase/stylesCreate.ts index 5559c5f33..64122ae38 100644 --- a/packages/core/src/popups/components/SnackbarBase/stylesCreate.ts +++ b/packages/core/src/popups/components/SnackbarBase/stylesCreate.ts @@ -26,7 +26,7 @@ const stylesCreate = createStyles(({colors, spaces}, placement?: IPosition) => { ...placementStyle(), }, container: { - backgroundColor: colors.BgContrast, + backgroundColor: colors.BgInverse, borderRadius: spaces.Space12, justifyContent: 'center', alignItems: 'center', diff --git a/packages/core/src/popups/components/TooltipBase/DescriptionText.tsx b/packages/core/src/popups/components/TooltipBase/DescriptionText.tsx index 3e1070a16..5e94a6647 100644 --- a/packages/core/src/popups/components/TooltipBase/DescriptionText.tsx +++ b/packages/core/src/popups/components/TooltipBase/DescriptionText.tsx @@ -12,7 +12,7 @@ const DescriptionText: FC = props => { return ( {descriptionText} diff --git a/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/DescriptionText.test.tsx.snap b/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/DescriptionText.test.tsx.snap index 3d1f1e905..97d2adb38 100644 --- a/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/DescriptionText.test.tsx.snap +++ b/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/DescriptionText.test.tsx.snap @@ -6,7 +6,7 @@ exports[`@lad-tech/mobydick-core/TooltipBase/DescriptionText should renders corr style={ [ { - "color": "#FFF", + "color": "#FFFFFF", "fontFamily": "Inter-Regular", "fontSize": 14, "fontWeight": "400", diff --git a/packages/core/src/popups/components/TooltipBase/stylesCreate.ts b/packages/core/src/popups/components/TooltipBase/stylesCreate.ts index d14b26177..37b7065e3 100644 --- a/packages/core/src/popups/components/TooltipBase/stylesCreate.ts +++ b/packages/core/src/popups/components/TooltipBase/stylesCreate.ts @@ -11,7 +11,7 @@ const stylesCreate = createStyles(({spaces, colors}, position?: IPosition) => { borderRightWidth: spaces.Space8, borderTopWidth: 0, borderLeftWidth: spaces.Space8, - borderBottomColor: colors.BgContrast, + borderBottomColor: colors.BgInverse, borderRightColor: 'transparent', borderTopColor: 'transparent', borderLeftColor: 'transparent', @@ -24,7 +24,7 @@ const stylesCreate = createStyles(({spaces, colors}, position?: IPosition) => { borderRightWidth: spaces.Space8, borderBottomWidth: 0, borderLeftWidth: spaces.Space8, - borderTopColor: colors.BgContrast, + borderTopColor: colors.BgInverse, borderRightColor: 'transparent', borderBottomColor: 'transparent', borderLeftColor: 'transparent', @@ -33,7 +33,7 @@ const stylesCreate = createStyles(({spaces, colors}, position?: IPosition) => { }; return { container: { - backgroundColor: colors.BgContrast, + backgroundColor: colors.BgInverse, paddingVertical: spaces.Space8, paddingHorizontal: spaces.Space16, borderRadius: spaces.Space8, diff --git a/packages/core/src/styles/constants/colors/color.ts b/packages/core/src/styles/constants/colors/color.ts index 4da3ddd73..05ccb8599 100644 --- a/packages/core/src/styles/constants/colors/color.ts +++ b/packages/core/src/styles/constants/colors/color.ts @@ -180,9 +180,9 @@ export const defaultElementDarkColor: IElementColors = { /** @deprecated use ElementAccent **/ ElementBase: '#4C94FF', /** @deprecated use ElementWarning **/ - ElementAttention: '#F86B5D', - /** @deprecated use ElementError **/ ElementAdditional: '#FAB742', + /** @deprecated use ElementError **/ + ElementAttention: '#F86B5D', }; export const defaultBorderLightColor: IBorderColors = { @@ -222,7 +222,7 @@ export const defaultBgLightColor: IBgColors = { /** @deprecated **/ BgWhiteSoft: 'rgba(255, 255, 255, 0.15)', - /** @deprecated **/ + /** @deprecated use AdditionalSixthSoft **/ BgAccentSoft: 'rgba(43, 120, 238, 0.15)', /** @deprecated **/ BgAccentNormal: 'rgba(43, 120, 238, 0.3)', @@ -230,7 +230,7 @@ export const defaultBgLightColor: IBgColors = { BgAccentHard: 'rgba(43, 120, 238, 0.45)', /** @deprecated **/ BgQuaternary: '#B6BBC6', - /** @deprecated **/ + /** @deprecated use BgInverse **/ BgContrast: '#20242D', /** @deprecated **/ BgContrastExtra: 'rgba(32, 36, 45, 0.75)', @@ -251,13 +251,13 @@ export const defaultBgDarkColor: IBgColors = { /** @deprecated **/ BgQuaternary: '#5E6678', - /** @deprecated **/ + /** @deprecated use BgInverse **/ BgContrast: '#FFF', /** @deprecated **/ BgContrastExtra: 'rgba(255, 255, 255, 0.75)', /** @deprecated **/ BgWhiteSoft: 'rgba(255, 255, 255, 0.15)', - /** @deprecated **/ + /** @deprecated use AdditionalSixthSoft **/ BgAccentSoft: 'rgba(43, 120, 238, 0.15)', /** @deprecated **/ BgAccentNormal: 'rgba(43, 120, 238, 0.3)', diff --git a/packages/core/src/styles/constants/colors/types.ts b/packages/core/src/styles/constants/colors/types.ts index f61ec09a2..8f796fb7f 100644 --- a/packages/core/src/styles/constants/colors/types.ts +++ b/packages/core/src/styles/constants/colors/types.ts @@ -87,7 +87,7 @@ export type IBgColors = { /** @deprecated **/ BgWhiteSoft: string; - /** @deprecated **/ + /** @deprecated use AdditionalSixthSoft **/ BgAccentSoft: string; /** @deprecated **/ BgAccentNormal: string; @@ -95,7 +95,7 @@ export type IBgColors = { BgAccentHard: string; /** @deprecated **/ BgQuaternary: string; - /** @deprecated **/ + /** @deprecated use BgInverse **/ BgContrast: string; /** @deprecated **/ BgContrastExtra: string; diff --git a/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx b/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx index a36088fdf..00763bbf9 100644 --- a/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx +++ b/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx @@ -16,9 +16,9 @@ const DragAndDropScreen = () => { const bgColors = [ colors.ElementMuted, - colors.ElementAdditional, - colors.ElementAttention, - colors.ElementBase, + colors.ElementWarning, + colors.ElementError, + colors.ElementAccent, colors.ElementNeutral, colors.ElementSuccess, colors.ElementWhite, diff --git a/src/shared/lib/hooks/useNavigationTheme.ts b/src/shared/lib/hooks/useNavigationTheme.ts index 1dc3f2b8a..111c3178d 100644 --- a/src/shared/lib/hooks/useNavigationTheme.ts +++ b/src/shared/lib/hooks/useNavigationTheme.ts @@ -8,7 +8,7 @@ export const useNavigationTheme = () => { const theme: Theme = { dark: currentTheme === CurrentTheme.dark, colors: { - primary: colors.BgContrast, + primary: colors.BgInverse, border: colors.BorderNormal, text: colors.TextPrimary, card: colors.BgPrimary, diff --git a/src/widgets/Core/Progress/ui/SpinnerWidget.tsx b/src/widgets/Core/Progress/ui/SpinnerWidget.tsx index 1483cfde7..ad333c0d5 100644 --- a/src/widgets/Core/Progress/ui/SpinnerWidget.tsx +++ b/src/widgets/Core/Progress/ui/SpinnerWidget.tsx @@ -21,7 +21,7 @@ export const SpinnerWidget = () => { - + ); From e5e88ef480eefd5c1e75963c60f4df8fc52f4e61 Mon Sep 17 00:00:00 2001 From: vpsmolina Date: Mon, 20 Jan 2025 12:45:49 +0300 Subject: [PATCH 2/2] chore: replaced color --- .../src/inputs/components/DropDown/components/Selector.tsx | 4 +++- src/widgets/Core/Popup/ui/TooltipWidget.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/inputs/components/DropDown/components/Selector.tsx b/packages/core/src/inputs/components/DropDown/components/Selector.tsx index 50ff31493..739e3afe5 100644 --- a/packages/core/src/inputs/components/DropDown/components/Selector.tsx +++ b/packages/core/src/inputs/components/DropDown/components/Selector.tsx @@ -109,7 +109,9 @@ function renderItem(props: IRenderItemProps) { ]} onPress={() => renderItemOnPress(item)} underlayColor={ - selectedItemColor ? selectedItemColor : theme.colors.AdditionalSixthSoft + selectedItemColor + ? selectedItemColor + : theme.colors.AdditionalSixthSoft }> ({ ref: { alignItems: 'center', padding: spaces.Space8, - backgroundColor: colors.BgSecondary, + backgroundColor: colors.ElementWarning, }, }));