diff --git a/apps/trading-e2e/src/integration/trading-positions.cy.ts b/apps/trading-e2e/src/integration/trading-positions.cy.ts index b8e922dc2..3e73a8850 100644 --- a/apps/trading-e2e/src/integration/trading-positions.cy.ts +++ b/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-vega-pink' + 'text-market-green-600', + 'text-market-red' ); }); cy.get('.ag-center-cols-container').within(() => { assertPNLColor( '[col-id="unrealisedPNL"]', - 'text-vega-green', - 'text-vega-pink' + 'text-market-green-600', + 'text-market-red' ); }); cy.get('.ag-center-cols-container').within(() => { assertPNLColor( '[col-id="openVolume"]', - 'text-vega-green', - 'text-vega-pink' + 'text-market-green-600', + 'text-market-red' ); }); }); diff --git a/apps/trading/client-pages/market/market-selector-item.tsx b/apps/trading/client-pages/market/market-selector-item.tsx index 9b0b4f9cc..b5694d59f 100644 --- a/apps/trading/client-pages/market/market-selector-item.tsx +++ b/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-vega-green': priceChange && priceChange > 0, + 'text-market-red': priceChange && priceChange < 0, + 'text-market-green-600 dark:text-market-green': + priceChange && priceChange > 0, }); let prefix = ''; if (priceChange && priceChange > 0) { diff --git a/apps/trading/pages/styles.css b/apps/trading/pages/styles.css index 9c38191bb..c3a3dcfa6 100644 --- a/apps/trading/pages/styles.css +++ b/apps/trading/pages/styles.css @@ -29,51 +29,49 @@ html.dark { /* PENNANT */ -html [data-theme='dark'] { - --pennant-color-danger: theme('colors.vega.pink.DEFAULT'); - - /* candles */ - --pennant-color-buy-fill: theme('colors.vega.green.650'); - --pennant-color-buy-stroke: theme('colors.vega.green.500'); +html [data-theme='dark'], +html [data-theme='light'] { /* 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-bull-power: theme('colors.vega.green.650'); + --pennant-color-eldar-ray-bear-power: theme('colors.market.red.500'); + --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-sell: theme('colors.vega.pink.500'); + --pennant-color-macd-divergence-buy: theme('colors.market.green.600'); + --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.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'); + --pennant-color-volume-sell: theme('colors.market.red.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-stroke: theme('colors.vega.green.550'); - /* 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'); + --pennant-color-buy-fill: theme('colors.market.green.500'); + --pennant-color-buy-stroke: theme('colors.market.green.600'); /* depth chart */ - --pennant-color-depth-buy-fill: theme('colors.vega.green.400'); - --pennant-color-depth-buy-stroke: theme('colors.vega.green.550'); - --pennant-color-depth-sell-fill: theme('colors.vega.pink.400'); - --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550'); + --pennant-color-depth-buy-fill: theme('colors.market.green.500'); + --pennant-color-depth-buy-stroke: theme('colors.market.green.600'); + --pennant-color-depth-sell-fill: theme('colors.market.red.500'); + --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 */ diff --git a/libs/datagrid/src/lib/cell-class-rules.ts b/libs/datagrid/src/lib/cell-class-rules.ts index 055cdafdb..61c95ee56 100644 --- a/libs/datagrid/src/lib/cell-class-rules.ts +++ b/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 negativeClassNames = 'text-vega-pink dark:text-vega-pink'; +export const positiveClassNames = + '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 && diff --git a/libs/datagrid/src/lib/cells/flash-cell.tsx b/libs/datagrid/src/lib/cells/flash-cell.tsx index b28e02e6a..9090747de 100644 --- a/libs/datagrid/src/lib/cells/flash-cell.tsx +++ b/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.vega.pink.DEFAULT, offset: 0.8 }, + { color: theme.colors.market.red.DEFAULT }, + { 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.vega.green.DEFAULT, offset: 0.8 }, + { color: theme.colors.market.green.DEFAULT }, + { color: theme.colors.market.green.DEFAULT, offset: 0.8 }, { color: 'inherit' }, ], FLASH_DURATION diff --git a/libs/datagrid/src/lib/cells/size.tsx b/libs/datagrid/src/lib/cells/size.tsx index 37d3458d8..b24e5dc2f 100644 --- a/libs/datagrid/src/lib/cells/size.tsx +++ b/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': - 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', + 'text-market-red': side === Schema.Side.SIDE_SELL, })} > {side === Schema.Side.SIDE_BUY diff --git a/libs/fills/src/lib/fills-table.spec.tsx b/libs/fills/src/lib/fills-table.spec.tsx index 7e5b5ba10..1bec08f2b 100644 --- a/libs/fills/src/lib/fills-table.spec.tsx +++ b/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 () => { diff --git a/libs/market-depth/src/lib/orderbook-row.tsx b/libs/market-depth/src/lib/orderbook-row.tsx index 227ae0215..caced7013 100644 --- a/libs/market-depth/src/lib/orderbook-row.tsx +++ b/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-vega-pink/20 dark:bg-vega-pink/30' + ? 'bg-market-green/20 dark:bg-market-green/50' + : '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-vega-green-550 dark:text-vega-green' + ? 'text-market-red dark:text-market-red' + : 'text-market-green-600 dark:text-market-green' } /> }); let cells = screen.getAllByRole('gridcell'); - expect(cells[2].classList.contains('text-vega-green-550')).toBeTruthy(); - expect(cells[2].classList.contains('text-vega-pink')).toBeFalsy(); + expect(cells[2].classList.contains('text-market-green-600')).toBeTruthy(); + 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-vega-pink')).toBeTruthy(); + expect(cells[2].classList.contains('text-market-green-600')).toBeFalsy(); + expect(cells[2].classList.contains('text-market-red')).toBeTruthy(); expect(cells[2].textContent?.startsWith('-100')).toBeTruthy(); expect(cells[1].textContent).toEqual('1,230.0'); }); diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js index eb43b5df6..e7d715401 100644 --- a/libs/tailwindcss-config/src/theme.js +++ b/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', diff --git a/libs/trades/src/lib/trades-table.tsx b/libs/trades/src/lib/trades-table.tsx index d68c5e141..efda46753 100644 --- a/libs/trades/src/lib/trades-table.tsx +++ b/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 SELL_CLASS = 'text-vega-pink dark:text-vega-pink'; +export const BUY_CLASS = 'text-market-green-600 dark:text-market-green'; +export const SELL_CLASS = 'text-market-red dark:text-market-red'; const changeCellClass = ({ node }: CellClassParams) => { let colorClass = ''; diff --git a/libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx b/libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx index d7c5b7bad..7011f0a48 100644 --- a/libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx +++ b/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' ); }); diff --git a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx index 01ee9041f..db12c550d 100644 --- a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx +++ b/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-vega-pink dark:stroke-vega-pink'; + ? 'stroke-market-green-600 dark:stroke-market-green' + : 'stroke-market-red dark:stroke-market-red'; } export interface SparklineProps {