audit of pos/neg colors

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);
   `,

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);
       }
     `}
 `;

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);
     `}
 `;
 

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;
 

src/constants/styles/colors.ts

@@ -54,6 +54,9 @@ type StatusColors = {
   success: string;
   warning: string;
   error: string;
+  successFaded: string;
+  warningFaded: string;
+  errorFaded: string;
 };
 
 /** ##InvertDirectionalColors

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: {

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 &&

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

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,

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`

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);
 `;

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)`

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;
 `;

src/views/forms/TransferForm.tsx

@@ -441,7 +441,7 @@ Styled.DestinationInputLabel = styled.span`
   ${layoutMixins.inlineRow}
 
   svg {
-    color: var(--color-positive);
+    color: var(--color-success);
   }
 `;
 

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

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);

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);
   }
 `;