feat(trading): amend market red and green colors (#4226)

apps/trading-e2e/src/integration/trading-positions.cy.ts

@@ -267,22 +267,22 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     cy.get('.ag-center-cols-container').within(() => {
       assertPNLColor(
         '[col-id="realisedPNL"]',
-        'text-vega-green',
+        'text-market-green-600',
-        'text-vega-pink'
+        'text-market-red'
       );
     });
     cy.get('.ag-center-cols-container').within(() => {
       assertPNLColor(
         '[col-id="unrealisedPNL"]',
-        'text-vega-green',
+        'text-market-green-600',
-        'text-vega-pink'
+        'text-market-red'
       );
     });
     cy.get('.ag-center-cols-container').within(() => {
       assertPNLColor(
         '[col-id="openVolume"]',
-        'text-vega-green',
+        'text-market-green-600',
-        'text-vega-pink'
+        'text-market-red'
       );
     });
   });

apps/trading/client-pages/market/market-selector-item.tsx

@@ -160,8 +160,9 @@ const DataRow = ({
 const PriceChange = ({ candles }: { candles: string[] }) => {
   const priceChange = candles ? priceChangePercentage(candles) : undefined;
   const priceChangeClasses = classNames('text-xs', {
-    'text-vega-pink': priceChange && priceChange < 0,
+    'text-market-red': priceChange && priceChange < 0,
-    'text-vega-green': priceChange && priceChange > 0,
+    'text-market-green-600 dark:text-market-green':
+      priceChange && priceChange > 0,
   });
   let prefix = '';
   if (priceChange && priceChange > 0) {

apps/trading/pages/styles.css

@@ -29,51 +29,49 @@ html.dark {
 
 /* PENNANT */
 
-html [data-theme='dark'] {
+html [data-theme='dark'],
-  --pennant-color-danger: theme('colors.vega.pink.DEFAULT');
+html [data-theme='light'] {
-
-  /* candles */
-  --pennant-color-buy-fill: theme('colors.vega.green.650');
-  --pennant-color-buy-stroke: theme('colors.vega.green.500');
   /* sell candles only use stroke as the candle is solid (without border) */
-  --pennant-color-sell-stroke: theme('colors.vega.pink.500');
+  --pennant-color-sell-stroke: theme('colors.market.red.500');
 
   /* studies */
-  --pennant-color-eldar-ray-bear-power: theme('colors.vega.pink.500');
+  --pennant-color-eldar-ray-bear-power: theme('colors.market.red.500');
-  --pennant-color-eldar-ray-bull-power: theme('colors.vega.green.650');
+  --pennant-color-eldar-ray-bull-power: theme('colors.market.green.600');
 
-  --pennant-color-macd-divergence-buy: theme('colors.vega.green.650');
+  --pennant-color-macd-divergence-buy: theme('colors.market.green.600');
-  --pennant-color-macd-divergence-sell: theme('colors.vega.pink.500');
+  --pennant-color-macd-divergence-sell: theme('colors.market.red.500');
   --pennant-color-macd-signal: theme('colors.vega.blue.500');
   --pennant-color-macd-macd: theme('colors.vega.yellow.500');
 
-  --pennant-color-volume-buy: theme('colors.vega.green.650');
+  --pennant-color-volume-sell: theme('colors.market.red.500');
-  --pennant-color-volume-sell: theme('colors.vega.pink.500');
-
-  /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.vega.green.650');
-  --pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
-  --pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
-  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
 }
 
 html [data-theme='light'] {
-  --pennant-color-danger: theme('colors.vega.pink.500');
-
   /* candles */
-  --pennant-color-buy-fill: theme('colors.vega.green.400');
+  --pennant-color-buy-fill: theme('colors.market.green.500');
-  --pennant-color-buy-stroke: theme('colors.vega.green.550');
+  --pennant-color-buy-stroke: theme('colors.market.green.600');
-  /* sell candles only use stroke as the candle is solid (without border) */
-  --pennant-color-sell-stroke: theme('colors.vega.pink.400');
-
-  --pennant-color-volume-buy: theme('colors.vega.green.400');
-  --pennant-color-volume-sell: theme('colors.vega.pink.400');
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.vega.green.400');
+  --pennant-color-depth-buy-fill: theme('colors.market.green.500');
-  --pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
+  --pennant-color-depth-buy-stroke: theme('colors.market.green.600');
-  --pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
+  --pennant-color-depth-sell-fill: theme('colors.market.red.500');
-  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
+  --pennant-color-depth-sell-stroke: theme('colors.market.red.600');
+
+  --pennant-color-volume-buy: theme('colors.market.green.500');
+}
+
+html [data-theme='dark'] {
+  /* candles */
+  --pennant-color-buy-fill: theme('colors.market.green.600');
+  --pennant-color-buy-stroke: theme('colors.market.green.500');
+
+  /* depth chart */
+  --pennant-color-depth-buy-fill: theme('colors.market.green.600');
+  --pennant-color-depth-buy-stroke: theme('colors.market.green.500');
+  --pennant-color-depth-sell-fill: theme('colors.market.red.600');
+  --pennant-color-depth-sell-stroke: theme('colors.market.red.500');
+
+  --pennant-color-volume-buy: theme('colors.market.green.600');
 }
 
 /* AG GRID - Do not edit without updating other global stylesheets for each app */

libs/datagrid/src/lib/cell-class-rules.ts

@@ -1,5 +1,6 @@
-export const positiveClassNames = 'text-vega-green-550 dark:text-vega-green';
+export const positiveClassNames =
-export const negativeClassNames = 'text-vega-pink dark:text-vega-pink';
+  'text-market-green-600 dark:text-market-green';
+export const negativeClassNames = 'text-market-red dark:text-market-red';
 
 const isPositive = ({ value }: { value: string | bigint | number }) =>
   !!value &&

libs/datagrid/src/lib/cells/flash-cell.tsx

@@ -71,8 +71,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
     if (value < previousValue) {
       ref.current?.animate(
         [
-          { color: theme.colors.vega.pink.DEFAULT },
+          { color: theme.colors.market.red.DEFAULT },
-          { color: theme.colors.vega.pink.DEFAULT, offset: 0.8 },
+          { color: theme.colors.market.red.DEFAULT, offset: 0.8 },
           { color: 'inherit' },
         ],
         FLASH_DURATION
@@ -80,8 +80,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
     } else if (value > previousValue) {
       ref.current?.animate(
         [
-          { color: theme.colors.vega.green.DEFAULT },
+          { color: theme.colors.market.green.DEFAULT },
-          { color: theme.colors.vega.green.DEFAULT, offset: 0.8 },
+          { color: theme.colors.market.green.DEFAULT, offset: 0.8 },
           { color: 'inherit' },
         ],
         FLASH_DURATION

libs/datagrid/src/lib/cells/size.tsx

@@ -19,19 +19,14 @@ export const Size = ({
       data-testid="size"
       className={classNames('text-right', {
         // BUY
-        'text-vega-green-550 dark:text-vega-green':
+        'text-market-green-600 dark:text-market-green':
           side === Schema.Side.SIDE_BUY && !forceTheme,
-        'text-vega-green-550':
+        'text-market-green-600':
           side === Schema.Side.SIDE_BUY && forceTheme === 'light',
-        'text-vega-green':
+        'text-market-green':
           side === Schema.Side.SIDE_BUY && forceTheme === 'dark',
         // SELL
-        'text-vega-pink-550 dark:text-vega-pink':
+        'text-market-red': side === Schema.Side.SIDE_SELL,
-          side === Schema.Side.SIDE_SELL && !forceTheme,
-        'text-vega-pink-550':
-          side === Schema.Side.SIDE_SELL && forceTheme === 'light',
-        'text-vega-pink':
-          side === Schema.Side.SIDE_SELL && forceTheme === 'dark',
       })}
     >
       {side === Schema.Side.SIDE_BUY

libs/fills/src/lib/fills-table.spec.tsx

@@ -85,7 +85,7 @@ describe('FillsTable', () => {
     });
 
     const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-green-550');
+    expect(amountCell).toHaveClass('text-market-green-600');
   });
 
   it('should format cells correctly for seller fill', async () => {
@@ -120,7 +120,7 @@ describe('FillsTable', () => {
     });
 
     const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-pink');
+    expect(amountCell).toHaveClass('text-market-red');
   });
 
   it('should format cells correctly for side unspecified', async () => {
@@ -155,7 +155,7 @@ describe('FillsTable', () => {
     });
 
     const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-pink');
+    expect(amountCell).toHaveClass('text-market-red');
   });
 
   it('should render correct maker or taker role', async () => {

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-vega-green/20 dark:bg-vega-green/50'
+          ? 'bg-market-green/20 dark:bg-market-green/50'
-          : 'bg-vega-pink/20 dark:bg-vega-pink/30'
+          : 'bg-market-red/20 dark:bg-market-red/30'
       )}
       style={{
         width: `${cumulativeValue}%`,
@@ -93,8 +93,8 @@ export const OrderbookRow = React.memo(
             valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)}
             className={
               type === VolumeType.ask
-                ? '!text-vega-pink dark:text-vega-pink'
+                ? 'text-market-red dark:text-market-red'
-                : 'text-vega-green-550 dark:text-vega-green'
+                : 'text-market-green-600 dark:text-market-green'
             }
           />
           <NumericCell

libs/positions/src/lib/positions-table.spec.tsx

@@ -102,8 +102,8 @@ it('add color and sign to amount, displays positive notional value', async () =>
   });
   let cells = screen.getAllByRole('gridcell');
 
-  expect(cells[2].classList.contains('text-vega-green-550')).toBeTruthy();
+  expect(cells[2].classList.contains('text-market-green-600')).toBeTruthy();
-  expect(cells[2].classList.contains('text-vega-pink')).toBeFalsy();
+  expect(cells[2].classList.contains('text-market-red')).toBeFalsy();
   expect(cells[2].textContent).toEqual('+100');
   expect(cells[1].textContent).toEqual('1,230.0');
   await act(async () => {
@@ -115,8 +115,8 @@ it('add color and sign to amount, displays positive notional value', async () =>
     );
   });
   cells = screen.getAllByRole('gridcell');
-  expect(cells[2].classList.contains('text-vega-green-550')).toBeFalsy();
+  expect(cells[2].classList.contains('text-market-green-600')).toBeFalsy();
-  expect(cells[2].classList.contains('text-vega-pink')).toBeTruthy();
+  expect(cells[2].classList.contains('text-market-red')).toBeTruthy();
   expect(cells[2].textContent?.startsWith('-100')).toBeTruthy();
   expect(cells[1].textContent).toEqual('1,230.0');
 });

libs/tailwindcss-config/src/theme.js

@@ -13,6 +13,24 @@ module.exports = {
     current: 'currentColor',
     black: '#000000',
     white: '#FFFFFF',
+    market: {
+      red: {
+        // same as vega-red
+        700: '#2F000C',
+        600: '#7B001F',
+        550: '#B3002E',
+        DEFAULT: '#EC003C',
+        500: '#EC003C',
+      },
+      green: {
+        // same as vega-green
+        700: '#012915',
+        600: '#01914B',
+        550: '#01C566',
+        DEFAULT: '#00F780',
+        500: '#00F780',
+      },
+    },
     vega: {
       // YELLOW
       yellow: {
@@ -32,7 +50,7 @@ module.exports = {
       green: {
         700: '#012915',
         650: '#015D30',
-        600: '#01914B',
+        600: '#008545',
         550: '#01C566',
         DEFAULT: '#00F780',
         500: '#00F780',
@@ -84,6 +102,20 @@ module.exports = {
         300: '#FFD7EA',
       },
 
+      // RED
+      red: {
+        700: '#2F000C',
+        650: '#550016',
+        600: '#7B001F',
+        550: '#B3002E',
+        DEFAULT: '#EC003C',
+        500: '#EC003C',
+        450: '#F03D6B',
+        400: '#F4668A',
+        350: '#F78FA9',
+        300: '#F8A3B9',
+      },
+
       // ORANGE
       orange: {
         700: '#2A1701',

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

@@ -19,8 +19,8 @@ import type { AgGridReactProps } from 'ag-grid-react';
 import type { Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
 
-export const BUY_CLASS = 'text-vega-green dark:text-vega-green';
+export const BUY_CLASS = 'text-market-green-600 dark:text-market-green';
-export const SELL_CLASS = 'text-vega-pink dark:text-vega-pink';
+export const SELL_CLASS = 'text-market-red dark:text-market-red';
 
 const changeCellClass = ({ node }: CellClassParams) => {
   let colorClass = '';

libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx

@@ -36,7 +36,7 @@ it('Renders a red line if the last value is less than the first', () => {
   const paths = screen.getAllByTestId('sparkline-path');
   const path = paths[0];
   expect(path).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-vega-pink dark:stroke-vega-pink'
+    '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
   );
 });
 
@@ -48,7 +48,7 @@ it('Renders a green line if the last value is greater than the first', () => {
   const paths = screen.getAllByTestId('sparkline-path');
   const path = paths[0];
   expect(path).toHaveClass(
-    '[vector-effect:non-scaling-stroke] stroke-vega-green dark:stroke-vega-green'
+    '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
   );
 });
 

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

@@ -9,8 +9,8 @@ function colorByChange(a: number, b: number) {
   return a === b
     ? 'stroke-black/40 dark:stroke-white/40'
     : a < b
-    ? 'stroke-vega-green dark:stroke-vega-green'
+    ? 'stroke-market-green-600 dark:stroke-market-green'
-    : 'stroke-vega-pink dark:stroke-vega-pink';
+    : 'stroke-market-red dark:stroke-market-red';
 }
 
 export interface SparklineProps {