From d72846670f30576a1e969cebd822fe03693f842c Mon Sep 17 00:00:00 2001 From: mulan xia Date: Tue, 30 Jan 2024 17:25:03 -0500 Subject: [PATCH] audit of pos/neg colors --- src/components/Button.tsx | 6 +++--- src/components/CopyButton.tsx | 4 ++-- src/components/DiffOutput.tsx | 2 +- src/components/WithConfirmationPopover.tsx | 4 ++-- src/constants/styles/colors.ts | 3 +++ src/lib/orders.ts | 6 +++--- src/pages/Profile.tsx | 6 +++--- src/styles/globalStyle.ts | 3 +++ src/styles/themes.ts | 9 +++++++++ src/views/AccountInfo/AccountInfoConnectedState.tsx | 2 +- src/views/PositionInfo.tsx | 6 +++--- src/views/dialogs/OnboardingDialog/GenerateKeys.tsx | 2 +- src/views/forms/AccountManagementForms/WithdrawForm.tsx | 2 +- src/views/forms/TransferForm.tsx | 2 +- .../notifications/BlockRewardNotification/index.tsx | 2 +- .../TransferStatusNotification/TransferStatusSteps.tsx | 2 +- src/views/tables/OrdersTable/OrderActionsCell.tsx | 2 +- 17 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index dff6cdb..2d03f59 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -102,13 +102,13 @@ const buttonActionVariants = { [ButtonAction.Create]: css` --button-textColor: var(--color-text-2); - --button-backgroundColor: var(--color-positive); + --button-backgroundColor: var(--color-success); --button-border: solid var(--border-width) var(--color-border-white); `, [ButtonAction.Destroy]: css` --button-textColor: var(--color-text-2); - --button-backgroundColor: var(--color-negative); + --button-backgroundColor: var(--color-error); --button-border: solid var(--border-width) var(--color-border-white); `, @@ -119,7 +119,7 @@ const buttonActionVariants = { `, [ButtonAction.Reset]: css` - --button-textColor: var(--color-negative); + --button-textColor: var(--color-error); --button-backgroundColor: var(--color-layer-3); --button-border: solid var(--border-width) var(--color-border-red); `, diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index bff3368..33da9d1 100644 --- a/src/components/CopyButton.tsx +++ b/src/components/CopyButton.tsx @@ -87,7 +87,7 @@ Styled.Icon = styled(Icon)<{ copied: boolean }>` ${({ copied }) => copied && css` - color: var(--color-positive); + color: var(--color-success); `} `; @@ -96,7 +96,7 @@ Styled.IconButton = styled(IconButton)<{ copied: boolean }>` copied && css` svg { - color: var(--color-positive); + color: var(--color-success); } `} `; diff --git a/src/components/DiffOutput.tsx b/src/components/DiffOutput.tsx index f6f52e4..665aacf 100644 --- a/src/components/DiffOutput.tsx +++ b/src/components/DiffOutput.tsx @@ -75,7 +75,7 @@ Styled.DiffValue = styled.div<{ hasInvalidNewValue?: boolean }>` ${({ hasInvalidNewValue }) => hasInvalidNewValue && css` - color: var(--color-negative); + color: var(--color-error); `} `; diff --git a/src/components/WithConfirmationPopover.tsx b/src/components/WithConfirmationPopover.tsx index f2aabcc..b65c5a7 100644 --- a/src/components/WithConfirmationPopover.tsx +++ b/src/components/WithConfirmationPopover.tsx @@ -117,7 +117,7 @@ Styled.ConfirmButton = styled(Styled.IconButton)` --button-backgroundColor: hsla(203, 25%, 19%, 1); svg { - color: var(--color-positive); + color: var(--color-success); } `; @@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)` --button-backgroundColor: hsla(296, 16%, 18%, 1); svg { - color: var(--color-negative); + color: var(--color-error); width: 0.8em; height: 0.8em; diff --git a/src/constants/styles/colors.ts b/src/constants/styles/colors.ts index b05a71d..dc9429e 100644 --- a/src/constants/styles/colors.ts +++ b/src/constants/styles/colors.ts @@ -54,6 +54,9 @@ type StatusColors = { success: string; warning: string; error: string; + successFaded: string; + warningFaded: string; + errorFaded: string; }; /** ##InvertDirectionalColors diff --git a/src/lib/orders.ts b/src/lib/orders.ts index 1aeb926..55c0e46 100644 --- a/src/lib/orders.ts +++ b/src/lib/orders.ts @@ -43,19 +43,19 @@ export const getStatusIconInfo = ({ case AbacusOrderStatus.filled: { return { statusIcon: IconName.OrderFilled, - statusIconColor: `var(--color-positive)`, + statusIconColor: `var(--color-success)`, }; } case AbacusOrderStatus.cancelled: { return { statusIcon: IconName.OrderCanceled, - statusIconColor: `var(--color-negative)`, + statusIconColor: `var(--color-error)`, }; } case AbacusOrderStatus.canceling: { return { statusIcon: IconName.OrderPending, - statusIconColor: `var(--color-negative)`, + statusIconColor: `var(--color-error)`, }; } case AbacusOrderStatus.untriggered: { diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index ff362bd..270131b 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -286,10 +286,10 @@ Styled.ConnectedIcon = styled.div` height: 0.5rem; width: 0.5rem; margin-right: 0.25rem; - background: var(--color-positive); + background: var(--color-success); border-radius: 50%; - box-shadow: 0 0 0 0.2rem var(--color-gradient-positive); + box-shadow: 0 0 0 0.2rem var(--color-gradient-success); `; Styled.Address = styled.h1` @@ -318,7 +318,7 @@ Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>` ${({ iconName }) => iconName === IconName.Close ? css` - --button-textColor: var(--color-negative); + --button-textColor: var(--color-error); --button-icon-size: 0.75em; ` : iconName === IconName.Transfer && diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index bf534cd..44b284d 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -29,6 +29,9 @@ export const GlobalStyle = createGlobalStyle` --color-success: ${({ theme }) => theme.success}; --color-warning: ${({ theme }) => theme.warning}; --color-error: ${({ theme }) => theme.error}; + --color-gradient-success: ${({ theme }) => theme.successFaded}; + --color-gradient-warning: ${({ theme }) => theme.warningFaded}; + --color-gradient-error: ${({ theme }) => theme.errorFaded}; --color-positive: ${({ theme }) => theme.positive}; --color-negative: ${({ theme }) => theme.negative}; diff --git a/src/styles/themes.ts b/src/styles/themes.ts index 3db52b8..6418027 100644 --- a/src/styles/themes.ts +++ b/src/styles/themes.ts @@ -31,6 +31,9 @@ const ClassicThemeBase: ThemeColorBase = { success: ColorToken.Green1, warning: ColorToken.Yellow0, error: ColorToken.Red2, + successFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16), + warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16), + errorFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16), positive: ColorToken.Green1, negative: ColorToken.Red2, @@ -80,6 +83,9 @@ const DarkThemeBase: ThemeColorBase = { success: ColorToken.Green0, warning: ColorToken.Yellow0, error: ColorToken.Red0, + successFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16), + warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16), + errorFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16), positive: ColorToken.Green0, negative: ColorToken.Red0, @@ -129,6 +135,9 @@ const LightThemeBase: ThemeColorBase = { success: ColorToken.Green2, warning: ColorToken.Yellow0, error: ColorToken.Red1, + successFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16), + warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16), + errorFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16), positive: ColorToken.Green2, negative: ColorToken.Red1, diff --git a/src/views/AccountInfo/AccountInfoConnectedState.tsx b/src/views/AccountInfo/AccountInfoConnectedState.tsx index 1627c7f..9996def 100644 --- a/src/views/AccountInfo/AccountInfoConnectedState.tsx +++ b/src/views/AccountInfo/AccountInfoConnectedState.tsx @@ -231,7 +231,7 @@ Styled.CircleContainer = styled.div` `; Styled.Icon = styled(Icon)` - color: var(--color-negative); + color: var(--color-error); `; Styled.WithUsage = styled.div` diff --git a/src/views/PositionInfo.tsx b/src/views/PositionInfo.tsx index ac79452..2ea9477 100644 --- a/src/views/PositionInfo.tsx +++ b/src/views/PositionInfo.tsx @@ -557,11 +557,11 @@ Styled.PositionTile = styled(PositionTile)``; Styled.ClosePositionButton = styled(Button)` --button-border: solid var(--border-width) var(--color-border-red); - --button-textColor: var(--color-negative); + --button-textColor: var(--color-error); `; Styled.ClosePositionToggleButton = styled(ToggleButton)` --button-border: solid var(--border-width) var(--color-border-red); - --button-toggle-off-textColor: var(--color-negative); - --button-toggle-on-textColor: var(--color-negative); + --button-toggle-off-textColor: var(--color-error); + --button-toggle-on-textColor: var(--color-error); `; diff --git a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx index c65186b..ab824d5 100644 --- a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx +++ b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx @@ -323,7 +323,7 @@ Styled.ReceiptArea = styled.div` `; Styled.Green = styled.span` - color: var(--color-positive); + color: var(--color-success); `; Styled.GreenCheckCircle = styled(GreenCheckCircle)` diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx index 8a9d413..33f26ef 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx @@ -453,6 +453,6 @@ Styled.FormInputButton = styled(Button)` Styled.CheckIcon = styled(Icon)` margin: 0 1ch; - color: var(--color-positive); + color: var(--color-success); font-size: 0.625rem; `; diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index 291e768..4775c85 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -441,7 +441,7 @@ Styled.DestinationInputLabel = styled.span` ${layoutMixins.inlineRow} svg { - color: var(--color-positive); + color: var(--color-success); } `; diff --git a/src/views/notifications/BlockRewardNotification/index.tsx b/src/views/notifications/BlockRewardNotification/index.tsx index 200522b..fce36ee 100644 --- a/src/views/notifications/BlockRewardNotification/index.tsx +++ b/src/views/notifications/BlockRewardNotification/index.tsx @@ -72,7 +72,7 @@ Styled.Notification = styled(Notification)` Styled.Output = styled(Output)` &:before { content: '+'; - color: var(--color-positive); + color: var(--color-success); margin-right: 0.5ch; } `; diff --git a/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx b/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx index 3cb050b..96c1adf 100644 --- a/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx +++ b/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx @@ -179,7 +179,7 @@ Styled.Icon = styled.div<{ state: 'complete' | 'default' }>` ${({ state }) => ({ ['complete']: css` - color: var(--color-positive); + color: var(--color-success); `, ['default']: css` color: var(--color-text-0); diff --git a/src/views/tables/OrdersTable/OrderActionsCell.tsx b/src/views/tables/OrdersTable/OrderActionsCell.tsx index e2fac52..fd4c867 100644 --- a/src/views/tables/OrdersTable/OrderActionsCell.tsx +++ b/src/views/tables/OrdersTable/OrderActionsCell.tsx @@ -82,6 +82,6 @@ Styled.ActionButton = styled(IconButton)` Styled.CancelButton = styled(Styled.ActionButton)` &:not(:disabled) { - --button-textColor: var(--color-negative); + --button-textColor: var(--color-error); } `;