feat: use market red for buy/sell toggle variants

apps/trading/client-pages/market/trade-grid.tsx

@@ -316,7 +316,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
       <div className="border-b border-default min-w-0">
         <HeaderStats market={market} />
       </div>
-      <div className="col-span-2 bg-vega-green">
+      <div className="col-span-2">
         <OracleBanner marketId={market?.id || ''} />
       </div>
       {sidebarOpen && (

apps/trading/pages/styles.css

@@ -48,30 +48,38 @@ html [data-theme='light'] {
 
 html [data-theme='light'] {
   /* candles */
-  --pennant-color-buy-fill: theme('colors.market.green.500');
+  --pennant-color-buy-fill: theme(colors.market.green.500);
-  --pennant-color-buy-stroke: theme('colors.market.green.600');
+  --pennant-color-buy-stroke: theme(colors.market.green.600);
+
+  /* sell uses stroke for fill and stroke */
+  --pennant-color-sell-stroke: theme(colors.market.red.500);
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.market.green.500');
+  --pennant-color-depth-buy-fill: theme(colors.market.green.500);
-  --pennant-color-depth-buy-stroke: theme('colors.market.green.600');
+  --pennant-color-depth-buy-stroke: theme(colors.market.green.600);
-  --pennant-color-depth-sell-fill: theme('colors.market.red.500');
+  --pennant-color-depth-sell-fill: theme(colors.market.red.500);
-  --pennant-color-depth-sell-stroke: theme('colors.market.red.600');
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.600);
 
-  --pennant-color-volume-buy: theme('colors.market.green.500');
+  --pennant-color-volume-buy: theme(colors.market.green.400);
+  --pennant-color-volume-sell: theme(colors.market.red.400);
 }
 
 html [data-theme='dark'] {
   /* candles */
-  --pennant-color-buy-fill: theme('colors.market.green.600');
+  --pennant-color-buy-fill: theme(colors.market.green.600);
-  --pennant-color-buy-stroke: theme('colors.market.green.500');
+  --pennant-color-buy-stroke: theme(colors.market.green.500);
+
+  /* sell uses stroke for fill and stroke */
+  --pennant-color-sell-stroke: theme(colors.market.red.500);
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.market.green.600');
+  --pennant-color-depth-buy-fill: theme(colors.market.green.600);
-  --pennant-color-depth-buy-stroke: theme('colors.market.green.500');
+  --pennant-color-depth-buy-stroke: theme(colors.market.green.500);
-  --pennant-color-depth-sell-fill: theme('colors.market.red.600');
+  --pennant-color-depth-sell-fill: theme(colors.market.red.600);
-  --pennant-color-depth-sell-stroke: theme('colors.market.red.500');
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.500);
 
-  --pennant-color-volume-buy: theme('colors.market.green.600');
+  --pennant-color-volume-buy: theme(colors.market.green.600);
+  --pennant-color-volume-sell: theme(colors.market.red.600);
 }
 
 /* AG GRID - Do not edit without updating other global stylesheets for each app */

libs/accounts/src/lib/accounts-table.tsx

@@ -33,7 +33,7 @@ const colorClass = (percentageUsed: number, neutral = false) => {
   return classNames('text-right', {
     'text-neutral-500 dark:text-neutral-400': percentageUsed < 75 && !neutral,
     'text-vega-orange': percentageUsed >= 75 && percentageUsed < 90,
-    'text-vega-pink': percentageUsed >= 90,
+    'text-vega-red': percentageUsed >= 90,
   });
 };
 

libs/accounts/src/lib/margin-health-chart.tsx

@@ -189,7 +189,7 @@ export const MarginHealthChart = ({
         >
           <div
             data-testid="margin-health-chart-red"
-            className="bg-vega-pink-550"
+            className="bg-vega-red-550"
             style={{
               height: '100%',
               width: `${red * 100}%`,

libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx

@@ -1,17 +1,24 @@
 import { t } from '@vegaprotocol/i18n';
-import type { ButtonVariant } from '@vegaprotocol/ui-toolkit';
+import { Side } from '@vegaprotocol/types';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
 
 interface Props {
-  variant: ButtonVariant;
+  side: Side;
 }
 
-export const DealTicketButton = ({ variant }: Props) => {
+export const DealTicketButton = ({ side }: Props) => {
+  const buttonClasses = classNames(
+    'px-10 py-2 uppercase rounded-md text-white w-full',
+    {
+      'bg-market-red-500': side === Side.SIDE_SELL,
+      'bg-market-green-550': side === Side.SIDE_BUY,
+    }
+  );
   return (
     <div className="mb-2">
-      <Button variant={variant} fill type="submit" data-testid="place-order">
+      <button type="submit" data-testid="place-order" className={buttonClasses}>
         {t('Place order')}
-      </Button>
+      </button>
     </div>
   );
 };

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -476,11 +476,7 @@ export const DealTicket = ({
           pubKey={pubKey}
           onClickCollateral={onClickCollateral}
         />
-        <DealTicketButton
+        <DealTicketButton side={order.side} />
-          variant={
-            order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'
-          }
-        />
         <DealTicketFeeDetails
           onMarketClick={onMarketClick}
           feeEstimate={feeEstimate}

libs/market-depth/src/lib/orderbook-row.tsx

@@ -28,8 +28,8 @@ const CumulationBar = ({
       className={classNames(
         'absolute top-0 left-0 h-full transition-all',
         type === VolumeType.bid
-          ? 'bg-market-green/20 dark:bg-market-green/50'
+          ? 'bg-market-green-300 dark:bg-market-green/50'
-          : 'bg-market-red/20 dark:bg-market-red/30'
+          : 'bg-market-red-300 dark:bg-market-red/30'
       )}
       style={{
         width: `${cumulativeValue}%`,

libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx

@@ -104,7 +104,7 @@ export const OracleBasicProfile = ({
               'text-vega-blue': intent === Intent.Primary,
               'text-vega-green dark:text-vega-green': intent === Intent.Success,
               'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
-              'text-vega-pink': intent === Intent.Danger,
+              'text-vega-red': intent === Intent.Danger,
             },
             'flex items-start align-text-bottom p-1'
           )}

libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx

@@ -40,7 +40,7 @@ export const OracleProfileTitle = ({ provider }: { provider: Provider }) => {
             'text-vega-blue': intent === Intent.Primary,
             'text-vega-green dark:text-vega-green': intent === Intent.Success,
             'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
-            'text-vega-pink': intent === Intent.Danger,
+            'text-vega-red': intent === Intent.Danger,
           },
           'flex items-start align-text-bottom p-1'
         )}

libs/tailwindcss-config/src/theme.js

@@ -21,6 +21,8 @@ module.exports = {
         550: '#B3002E',
         DEFAULT: '#EC003C',
         500: '#EC003C',
+        400: '#F57382',
+        300: '#FDD9DC',
       },
       green: {
         // same as vega-green
@@ -29,6 +31,8 @@ module.exports = {
         550: '#01C566',
         DEFAULT: '#00F780',
         500: '#00F780',
+        400: '#74BE8E',
+        300: '#DDFEE8',
       },
     },
     vega: {

libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx

@@ -25,7 +25,7 @@ export const NotificationBanner = ({
           'bg-vega-green-300 dark:bg-vega-green-700': intent === Intent.Success,
           'bg-vega-orange-300 dark:bg-vega-orange-700':
             intent === Intent.Warning,
-          'bg-vega-pink-300 dark:bg-vega-pink-700': intent === Intent.Danger,
+          'bg-vega-red-300 dark:bg-vega-red-700': intent === Intent.Danger,
         },
         {
           'border-b-vega-light-200 dark:border-b-vega-dark-200 ':
@@ -40,7 +40,7 @@ export const NotificationBanner = ({
           'border-b-vega-orange-500 dark:border-b-vega-orange-500':
             intent === Intent.Warning,
 
-          'border-b-vega-pink-500 dark:border-b-vega-pink-500':
+          'border-b-vega-red-500 dark:border-b-vega-red-500':
             intent === Intent.Danger,
         }
       )}
@@ -59,7 +59,7 @@ export const NotificationBanner = ({
             'text-vega-orange-500 dark:text-vega-orange-500':
               intent === Intent.Warning,
 
-            'text-vega-pink-500 dark:text-vega-pink-500':
+            'text-vega-red-500 dark:text-vega-red-500':
               intent === Intent.Danger,
           })}
         />

libs/ui-toolkit/src/components/toggle/toggle.tsx

@@ -38,14 +38,12 @@ export const Toggle = ({
     'relative inline-flex w-full h-full text-center items-center justify-center',
     'peer-checked:rounded-full',
     {
-      'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black':
+      'peer-checked:bg-neutral-400 dark:peer-checked:bg-white peer-checked:text-white dark:peer-checked:text-black':
         type === 'primary',
-      'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-550':
+      'peer-checked:bg-market-green-550 peer-checked:text-white':
         type === 'buy',
-      'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-550':
+      'peer-checked:bg-market-red-500 peer-checked:text-white': type === 'sell',
-        type === 'sell',
     },
-    'peer-checked:text-white dark:peer-checked:text-black',
     'cursor-pointer peer-checked:cursor-auto select-none',
     {
       'px-10 py-2': size === 'lg',