feat(#2465): vega-pink across frontend-monorepo (#2476)

* feat(#2465): change red to vega pink * feat(#2465): change red to vega pink part 2 * fix: update vega.red to vega.pink * feat: color the charts * feat: color the charts * feat: color the charts * fix: use dark pink and green * fix: use dark pink and green * feat(#2467): color long/short toggle and place order button * fix: colors wick showing within candle * fix: remove opacity from chart * fix: use vega dark pink and green for vol cell * fix: toggle and button colors * feat(#2465): toggle peer checked text white * fix: add liquidity supplied gap-2 in tooltip data grid * fix: add indicator temporarily * chore: update colors * chore: update from x-dark to vega-x * fix: rename symbols * chore: update sell candles to only use stroke as they are solidly filled * fix: remove use state * fix: remove network account types Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2023-01-06 11:58:55 -05:00 · 2023-01-06 11:58:55 -05:00 · bbdc64582a
commit bbdc64582a
parent dabae31bfd
38 changed files with 155 additions and 70 deletions
--- a/apps/console-lite-e2e/src/integration/market-trade.test.ts
+++ b/apps/console-lite-e2e/src/integration/market-trade.test.ts
@ -30,7 +30,6 @@ describe('Market trade with wallet disconnected', { tags: '@smoke' }, () => {
    cy.mockConsole();
    cy.visit(`/trading/${marketId}`);
    cy.wait('@Market');
-    console.log('marketId', marketId);
  });
  it('should not display steps', () => {
    cy.getByTestId('trading-connect-wallet')
--- a/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx
+++ b/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx
@ -45,7 +45,6 @@ const AccountsManager = () => {
    successCallback(rowsThisBlock, lastRow);
  };
  const { columnDefs, defaultColDef } = useAccountColumnDefinitions();
-  console.log(data, loading);
  return (
    <>
      <AsyncRenderer
--- a/apps/explorer/src/app/components/txs/tx-order-type.tsx
+++ b/apps/explorer/src/app/components/txs/tx-order-type.tsx
@ -137,8 +137,7 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
  // This will get unwieldy and should probably produce a different colour of tag
  if (type === 'Chain Event' && !!command?.chainEvent) {
    type = getLabelForChainEvent(command.chainEvent);
-    colours =
-      'text-white dark-text-white bg-vega-pink-dark dark:bg-vega-pink-dark';
+    colours = 'text-white dark-text-white bg-vega-pink dark:bg-vega-pink';
  } else if (type === 'Proposal' || type === 'Governance Proposal') {
    if (command && !!command.proposalSubmission) {
      type = getLabelForProposal(command.proposalSubmission);
--- a/apps/explorer/src/app/components/withdrawal/withdrawal-progress.tsx
+++ b/apps/explorer/src/app/components/withdrawal/withdrawal-progress.tsx
@ -84,13 +84,13 @@ export const WithdrawalProgress = ({ id, txStatus }: TxsStatsInfoProps) => {

 const classes = {
  indicatorFailed:
-    'rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-red-600 bg-red-600 text-center text-white font-bold leading-5',
+    'rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-pink-600 bg-vega-pink-600 text-center text-white font-bold leading-5',
  textFailed:
-    'absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-vega-red',
+    'absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-vega-pink',
  indicatorComplete:
-    'rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-vega-green-dark bg-vega-green-dark text-center text-white leading-5',
+    'rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-vega-green bg-vega-green text-center text-white leading-5',
  textComplete:
-    'absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-vega-green-dark',
+    'absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-vega-green',
  indicatorIncomplete:
    'rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-gray-300 text-center leading-5',
  textIncomplete:
@ -140,7 +140,7 @@ export function WithdrawalProgressSeparator({
  return (
    <div
      className={`flex-auto border-t-2 transition duration-500 ease-in-out ${
-        isComplete ? 'border-vega-green-dark' : 'border-gray-300'
+        isComplete ? 'border-vega-green' : 'border-gray-300'
      }`}
    ></div>
  );
--- a/apps/token/src/hooks/use-animate-value.ts
+++ b/apps/token/src/hooks/use-animate-value.ts
@ -30,9 +30,9 @@ export function useAnimateValue(
  ) {
    elRef.current?.animate(
      [
-        { backgroundColor: customColors.vega.red, color: colors.white },
+        { backgroundColor: customColors.vega.pink, color: colors.white },
        {
-          backgroundColor: customColors.vega.red,
+          backgroundColor: customColors.vega.pink,
          color: colors.white,
          offset: 0.8,
        },
--- a/apps/token/src/routes/claim/target-address-mismatch.tsx
+++ b/apps/token/src/routes/claim/target-address-mismatch.tsx
@ -25,7 +25,7 @@ export const TargetAddressMismatch = ({
          }}
          components={{
            bold: <strong />,
-            red: <span className={'text-vega-red'} />,
+            red: <span className={'text-vega-pink'} />,
          }}
        />
      </p>
--- a/apps/token/src/routes/proposals/components/propose/proposal-form-vote-and-enactment-deadline.tsx
+++ b/apps/token/src/routes/proposals/components/propose/proposal-form-vote-and-enactment-deadline.tsx
@ -231,7 +231,7 @@ const EnactmentForm = ({
          {deadlines.enactment && deadlines.enactment < deadlines.vote && (
            <span
              data-testid="enactment-before-voting-deadline"
-              className="block mt-4 text-vega-red-dark"
+              className="block mt-4 text-vega-pink"
            >
              {t('ProposalWillFailIfEnactmentIsEarlierThanVotingDeadline')}
            </span>
--- a/apps/token/src/routes/staking/disassociate/components/disassociate-page/disassociate-page.tsx
+++ b/apps/token/src/routes/staking/disassociate/components/disassociate-page/disassociate-page.tsx
@ -169,7 +169,7 @@ export const DisassociatePage = ({
        )}
      </p>
      <p data-testid="disassociation-warning">
-        <span className="text-vega-red">{t('Warning')}:</span>{' '}
+        <span className="text-vega-pink">{t('Warning')}:</span>{' '}
        {t(
          'Any tokens that have been nominated to a node will sacrifice rewards they are due for the current epoch. If you do not wish to sacrifice these, you should remove stake from a node at the end of an epoch before disassociation.'
        )}
--- a/apps/token/src/routes/staking/node/node.tsx
+++ b/apps/token/src/routes/staking/node/node.tsx
@ -96,7 +96,7 @@ export const StakingNode = ({ data, previousEpochData }: StakingNodeProps) => {

  if (!nodeInfo) {
    return (
-      <span data-testid="staking-node-not-found" className={'text-vega-red'}>
+      <span data-testid="staking-node-not-found" className={'text-vega-pink'}>
        {t('stakingNodeNotFound', { node })}
      </span>
    );
--- a/apps/token/src/routes/staking/node/staking-form.tsx
+++ b/apps/token/src/routes/staking/node/staking-form.tsx
@ -192,7 +192,7 @@ export const StakingForm = ({
        availableStakeToRemove.isEqualTo(0) && (
          <div className="mb-4">
            {lien.isGreaterThan(0) ? (
-              <span className="text-vega-red">
+              <span className="text-vega-pink">
                {t('stakeNodeWrongVegaKey')}
              </span>
            ) : (
--- a/apps/trading/client-pages/portfolio/account-history-container.tsx
+++ b/apps/trading/client-pages/portfolio/account-history-container.tsx
@ -151,7 +151,11 @@ const AccountHistoryManager = ({
                : t('Select account type')}
            </DropdownMenuTrigger>
            <DropdownMenuContent>
-              {Object.keys(Schema.AccountType).map((type) => (
+              {[
+                Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+                Schema.AccountType.ACCOUNT_TYPE_BOND,
+                Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+              ].map((type) => (
                <DropdownMenuItem
                  key={type}
                  onClick={() => setAccountType(type as Schema.AccountType)}
--- a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
+++ b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
@ -14,7 +14,7 @@ import type {
 } from '@vegaprotocol/market-list';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
 import { HeaderStat } from '../header';
-import { Link } from '@vegaprotocol/ui-toolkit';
+import { Indicator, Link } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
 import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
 import { DataGrid } from '@vegaprotocol/react-helpers';
@ -80,7 +80,7 @@ export const MarketLiquiditySupplied = ({
      )
    : '-';

-  const { percentage } = useCheckLiquidityStatus({
+  const { percentage, status } = useCheckLiquidityStatus({
    suppliedStake: market?.suppliedStake || 0,
    targetStake: market?.targetStake || 0,
    triggeringRatio,
@ -123,7 +123,7 @@ export const MarketLiquiditySupplied = ({
      description={description}
      testId="liquidity-supplied"
    >
-      {/* <Indicator variant={status} /> */}
+      <Indicator variant={status} />
      {supplied} ({formatNumberPercentage(percentage, 2)})
    </HeaderStat>
  );
--- a/apps/trading/pages/styles.css
+++ b/apps/trading/pages/styles.css
@ -12,6 +12,7 @@ body,
 html {
  --focus-border: theme('colors.vega.pink');
  --separator-border: theme('colors.neutral.300');
+  --pennant-color-danger: theme('colors.vega.pink');
 }

 html.dark {
@ -22,3 +23,36 @@ html.dark {
 .border-default {
  @apply border-neutral-300 dark:border-neutral-600;
 }
+
+/* Styles for charts */
+html [data-theme='dark'] {
+  --pennant-color-danger: theme('colors.vega.pink');
+
+  /* candles */
+  --pennant-color-buy-fill: theme('colors.vega.green-data-dark');
+  --pennant-color-buy-stroke: theme('colors.vega.green');
+  /* sell candles only use stroke as the candle is solid (without border) */
+  --pennant-color-sell-stroke: theme('colors.vega.pink');
+
+  /* depth chart */
+  --pennant-color-depth-buy-fill: theme('colors.vega.green-data-dark');
+  --pennant-color-depth-buy-stroke: theme('colors.vega.green');
+  --pennant-color-depth-sell-fill: theme('colors.vega.pink-data-dark');
+  --pennant-color-depth-sell-stroke: theme('colors.vega.pink');
+}
+
+html [data-theme='light'] {
+  --pennant-color-danger: theme('colors.vega.pink');
+
+  /* candles */
+  --pennant-color-buy-fill: theme('colors.vega.green-data-light');
+  --pennant-color-buy-stroke: theme('colors.vega.green-dark');
+  /* sell candles only use stroke as the candle is solid (without border) */
+  --pennant-color-sell-stroke: theme('colors.vega.pink-data-light');
+
+  /* depth chart */
+  --pennant-color-depth-buy-fill: theme('colors.vega.green-data-light');
+  --pennant-color-depth-buy-stroke: theme('colors.vega.green-dark');
+  --pennant-color-depth-sell-fill: theme('colors.vega.pink-data-light');
+  --pennant-color-depth-sell-stroke: theme('colors.vega.pink-dark');
+}
--- a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
@ -17,7 +17,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
  return (
    <>
      <div
-        className="text-xs text-vega-orange mb-4"
+        className="text-xs text-warning mb-4"
        data-testid="dealticket-warning-margin"
      >
        <p className="mb-2">
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
@ -1,13 +1,19 @@
 import { t } from '@vegaprotocol/react-helpers';
+import type { ButtonVariant } from '@vegaprotocol/ui-toolkit';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';

 interface Props {
  transactionStatus: 'default' | 'pending';
  disabled: boolean;
+  variant: ButtonVariant;
 }

-export const DealTicketButton = ({ transactionStatus, disabled }: Props) => {
+export const DealTicketButton = ({
+  transactionStatus,
+  disabled,
+  variant,
+}: Props) => {
  const { pubKey } = useVegaWallet();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
@ -16,7 +22,7 @@ export const DealTicketButton = ({ transactionStatus, disabled }: Props) => {
  return pubKey ? (
    <div className="mb-4">
      <Button
-        variant="primary"
+        variant={variant}
        fill
        type="submit"
        disabled={disabled || isPending}
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
@ -210,6 +210,7 @@ export const DealTicket = ({
      <DealTicketButton
        disabled={Object.keys(errors).length >= 1}
        transactionStatus={transactionStatus}
+        variant={order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'}
      />
      <SummaryMessage
        errorMessage={errors.summary?.message}
@ -275,7 +276,7 @@ const SummaryMessage = memo(
    ) {
      return (
        <div
-          className="text-sm text-vega-orange mb-4"
+          className="text-sm text-warning mb-4"
          data-testid="dealticket-warning-auction"
        >
          <p>
--- a/libs/deal-ticket/src/components/deal-ticket/side-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/side-selector.tsx
@ -14,6 +14,17 @@ export const SideSelector = ({ value, onSelect }: SideSelectorProps) => {
    { label: t('Short'), value: Schema.Side.SIDE_SELL },
  ];

+  const toggleType = (e: Schema.Side) => {
+    switch (e) {
+      case Schema.Side.SIDE_BUY:
+        return 'buy';
+      case Schema.Side.SIDE_SELL:
+        return 'sell';
+      default:
+        return 'primary';
+    }
+  };
+
  return (
    <FormGroup label={t('Direction')} labelFor="order-side-toggle">
      <Toggle
@ -21,7 +32,10 @@ export const SideSelector = ({ value, onSelect }: SideSelectorProps) => {
        name="order-side"
        toggles={toggles}
        checkedValue={value}
-        onChange={(e) => onSelect(e.target.value as Schema.Side)}
+        type={toggleType(value)}
+        onChange={(e) => {
+          onSelect(e.target.value as Schema.Side);
+        }}
      />
    </FormGroup>
  );
--- a/libs/fills/src/lib/fills-table.spec.tsx
+++ b/libs/fills/src/lib/fills-table.spec.tsx
@ -101,7 +101,7 @@ describe('FillsTable', () => {
    });

    const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-green-dark');
+    expect(amountCell).toHaveClass('text-vega-green');
  });

  it('should format cells correctly for seller fill', async () => {
@ -138,7 +138,7 @@ describe('FillsTable', () => {
    });

    const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-red-dark');
+    expect(amountCell).toHaveClass('text-vega-pink');
  });

  it('should render correct maker or taker role', async () => {
--- a/libs/governance/src/lib/voting-progress/voting-progress.tsx
+++ b/libs/governance/src/lib/voting-progress/voting-progress.tsx
@ -26,7 +26,7 @@ export const VoteProgress = ({
          }}
        />
        <div
-          className="absolute right-0 bg-vega-red h-1"
+          className="absolute right-0 bg-vega-pink h-1"
          data-testid="vote-progress-bar-against"
          style={{
            width: `${100 - progress.toNumber()}%`,
--- a/libs/liquidity/src/lib/utils/liquidity-utils.ts
+++ b/libs/liquidity/src/lib/utils/liquidity-utils.ts
@ -132,10 +132,17 @@ export const useCheckLiquidityStatus = ({
  percentage: BigNumber;
 } => {
  // percentage supplied
-  const percentage = new BigNumber(suppliedStake)
-    .dividedBy(targetStake)
-    .multipliedBy(100);
+  const percentage =
+    targetStake && suppliedStake && new BigNumber(targetStake).gt(0)
+      ? new BigNumber(suppliedStake).dividedBy(targetStake).multipliedBy(100)
+      : new BigNumber(0);
  // IF supplied_stake >= target_stake THEN
+  if (percentage.eq(0)) {
+    return {
+      status: Intent.None,
+      percentage,
+    };
+  }
  if (new BigNumber(suppliedStake).gte(new BigNumber(targetStake))) {
    // show a green status, e.g. "🟢 $13,666,999 liquidity supplied"
    return {
--- a/libs/orders/src/lib/components/order-list/order-list.tsx
+++ b/libs/orders/src/lib/components/order-list/order-list.tsx
@ -53,7 +53,7 @@ export const TransactionComplete = ({
      {transactionResult.status ? (
        <p>{t('Transaction successful')}</p>
      ) : (
-        <p className="text-vega-red">
+        <p className="text-vega-pink">
          {t('Transaction failed')}: {transactionResult.error}
        </p>
      )}
--- a/libs/positions/src/lib/close-position-dialog/complete.tsx
+++ b/libs/positions/src/lib/close-position-dialog/complete.tsx
@ -73,7 +73,7 @@ const Success = ({

  if (!order) {
    return (
-      <div className="text-vega-red">{t('Could retrieve closing order')}</div>
+      <div className="text-vega-pink">{t('Could retrieve closing order')}</div>
    );
  }
  return (
@ -95,7 +95,7 @@ const Error = ({
    closingOrderResult.rejectionReason &&
    Schema.OrderRejectionReasonMapping[closingOrderResult.rejectionReason];
  return (
-    <div className="text-vega-red">
+    <div className="text-vega-pink">
      {reason ? (
        <p>{reason}</p>
      ) : (
--- a/libs/positions/src/lib/close-position-dialog/requested.tsx
+++ b/libs/positions/src/lib/close-position-dialog/requested.tsx
@ -21,7 +21,9 @@ export const Requested = ({

  if (!order) {
    return (
-      <div className="text-vega-red">{t('Could not create closing order')}</div>
+      <div className="text-vega-pink">
+        {t('Could not create closing order')}
+      </div>
    );
  }

--- a/libs/positions/src/lib/positions-table.spec.tsx
+++ b/libs/positions/src/lib/positions-table.spec.tsx
@ -89,8 +89,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-dark')).toBeTruthy();
-  expect(cells[2].classList.contains('text-vega-red-dark')).toBeFalsy();
+  expect(cells[2].classList.contains('text-vega-green')).toBeTruthy();
+  expect(cells[2].classList.contains('text-vega-pink')).toBeFalsy();
  expect(cells[2].textContent).toEqual('+100');
  expect(cells[1].textContent).toEqual('1,230.0');
  await act(async () => {
@ -99,8 +99,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-dark')).toBeFalsy();
-  expect(cells[2].classList.contains('text-vega-red-dark')).toBeTruthy();
+  expect(cells[2].classList.contains('text-vega-green')).toBeFalsy();
+  expect(cells[2].classList.contains('text-vega-pink')).toBeTruthy();
  expect(cells[2].textContent?.startsWith('-100')).toBeTruthy();
  expect(cells[1].textContent).toEqual('1,230.0');
 });
--- a/libs/react-helpers/src/lib/data-grid/data-grid.tsx
+++ b/libs/react-helpers/src/lib/data-grid/data-grid.tsx
@ -13,7 +13,7 @@ export const DataGrid = ({ grid }: DataGridProps) => {
      {grid.map(
        ({ label, value }, index) =>
          value && (
-            <div key={index} className="grid grid-cols-2">
+            <div key={index} className="grid grid-cols-2 gap-2">
              <span data-testid="tooltip-label">{label}</span>
              <span data-testid="tooltip-value" className="text-right">
                {value}
--- a/libs/react-helpers/src/lib/grid/cell-class-rules.ts
+++ b/libs/react-helpers/src/lib/grid/cell-class-rules.ts
@ -1,5 +1,5 @@
-export const positiveClassNames = 'text-vega-green-dark dark:text-vega-green';
-export const negativeClassNames = 'text-vega-red-dark dark:text-vega-red';
+export const positiveClassNames = 'text-vega-green dark:text-vega-green';
+export const negativeClassNames = 'text-vega-pink dark:text-vega-pink';

 const isPositive = ({ value }: { value: string | bigint | number }) =>
  !!value &&
--- a/libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx
@ -38,6 +38,7 @@ export const CumulativeVol = React.memo(
          height: relativeBid && relativeAsk ? '50%' : '100%',
          width: `${relativeAsk}%`,
          backgroundColor: ASK_COLOR,
+          opacity: 0.6,
        }}
      ></div>
    ) : null;
@ -50,6 +51,7 @@ export const CumulativeVol = React.memo(
          top: relativeBid && relativeAsk ? '50%' : '0',
          width: `${relativeBid}%`,
          backgroundColor: BID_COLOR,
+          opacity: 0.6,
        }}
      ></div>
    ) : null;
--- a/libs/react-helpers/src/lib/grid/size.tsx
+++ b/libs/react-helpers/src/lib/grid/size.tsx
@ -16,9 +16,8 @@ export const Size = ({
    <span
      data-testid="size"
      className={classNames('text-right', {
-        'text-vega-green-dark dark:text-vega-green':
-          side === Schema.Side.SIDE_BUY,
-        'text-vega-red-dark dark:text-vega-red': side === Schema.Side.SIDE_SELL,
+        'text-vega-green dark:text-vega-green': side === Schema.Side.SIDE_BUY,
+        'text-vega-pink dark:text-vega-pink': side === Schema.Side.SIDE_SELL,
      })}
    >
      {side === Schema.Side.SIDE_BUY
--- a/libs/react-helpers/src/lib/grid/vol-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/vol-cell.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import type { ICellRendererParams } from 'ag-grid-community';
 import { PriceCell } from './price-cell';
 import classNames from 'classnames';
+import * as tailwind from '@vegaprotocol/tailwindcss-config';

 export enum VolumeType {
  bid,
@ -19,8 +20,8 @@ export interface IVolCellProps extends ICellRendererParams {
  valueFormatted: Omit<VolProps, 'value'>;
 }

-export const BID_COLOR = 'darkgreen';
-export const ASK_COLOR = 'maroon';
+export const BID_COLOR = tailwind.theme.colors.vega['green'];
+export const ASK_COLOR = tailwind.theme.colors.vega['pink'];

 export const Vol = React.memo(
  ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {
@ -40,6 +41,7 @@ export const Vol = React.memo(
          style={{
            width: relativeValue ? `${relativeValue}%` : '0%',
            backgroundColor: type === VolumeType.bid ? BID_COLOR : ASK_COLOR,
+            opacity: type === VolumeType.bid ? 0.6 : 0.6,
          }}
        ></div>
        <PriceCell value={value} valueFormatted={valueFormatted} />
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@ -14,15 +14,17 @@ module.exports = {
      yellow: '#DFFF0B',
      'yellow-dark': '#B6DC26',
      pink: '#FF077F',
-      'pink-dark': '#D70068',
+      'pink-data-light': '#FF6AB2',
+      'pink-dark': '#CF0064',
+      'pink-data-dark': '#7A033D',
      green: '#00F780',
-      'green-dark': '#008545',
-      red: '#FF261A',
-      'red-dark': '#EB001B',
+      'green-data-light': '#85FBC2',
+      'green-dark': '#00D46E',
+      'green-data-dark': '#006333',
      orange: '#FF7A1A',
      blue: '#1DA2FB',
    },
-    danger: '#FF261A',
+    danger: '#FF077F',
    warning: '#FF7A1A',
    success: '#00F780',
  },
--- a/libs/trades/src/lib/trades-table.tsx
+++ b/libs/trades/src/lib/trades-table.tsx
@ -14,8 +14,8 @@ import type { AgGridReactProps } from 'ag-grid-react';
 import type { Trade } from './trades-data-provider';
 import BigNumber from 'bignumber.js';

-export const UP_CLASS = 'text-vega-green-dark dark:text-vega-green';
-export const DOWN_CLASS = 'text-vega-red-dark dark:text-vega-red';
+export const UP_CLASS = 'text-vega-green dark:text-vega-green';
+export const DOWN_CLASS = 'text-vega-pink dark:text-vega-pink';

 const changeCellClass =
  (dataKey: string) =>
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@ -8,7 +8,7 @@ import type { IconName } from '../icon';
 import { Icon } from '../icon';
 import classnames from 'classnames';

-type ButtonVariant = 'default' | 'primary' | 'secondary';
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ternary';
 type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';

 const base = 'inline-block uppercase border rounded-md disabled:opacity-60';
@ -31,11 +31,18 @@ const primary = [
  'enabled:active:bg-vega-yellow-dark enabled:active:border-vega-yellow-dark',
 ];
 const secondary = [
-  'text-white',
+  'text-white dark:text-black',
  'border-vega-pink',
-  'bg-vega-pink',
-  'enabled:hover:bg-vega-pink-dark enabled:hover:border-vega-pink-dark',
-  'enabled:active:bg-vega-pink-dark enabled:active:border-vega-pink-dark',
+  'dark:bg-vega-pink bg-vega-pink-dark',
+  'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
+  'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
+];
+const ternary = [
+  'text-white dark:text-black',
+  'border-vega-green',
+  'dark:bg-vega-green bg-vega-green-dark',
+  'enabled:hover:bg-vega-green enabled:hover:border-vega-green',
+  'enabled:active:bg-vega-green enabled:active:border-vega-green',
 ];

 const getClassname = ({
@ -53,6 +60,7 @@ const getClassname = ({
    [defaultClasses.join(' ')]: variant === 'default',
    [primary.join(' ')]: variant === 'primary',
    [secondary.join(' ')]: variant === 'secondary',
+    [ternary.join(' ')]: variant === 'ternary',

    [lg]: size === 'lg',
    [md]: size === 'md',
--- a/libs/ui-toolkit/src/components/notification/notification.tsx
+++ b/libs/ui-toolkit/src/components/notification/notification.tsx
@ -36,8 +36,7 @@ export const Notification = ({
        {
          'border-gray-700 dark:border-gray-300': intent === Intent.None,
          'border-vega-blue': intent === Intent.Primary,
-          'border-vega-green-dark dark:border-vega-green':
-            intent === Intent.Success,
+          'border-vega-green dark:border-vega-green': intent === Intent.Success,
          'border-yellow-500': intent === Intent.Warning,
          'border-vega-pink': intent === Intent.Danger,
        },
@ -49,8 +48,7 @@ export const Notification = ({
          {
            'text-gray-700 dark:text-gray-300': intent === Intent.None,
            'text-vega-blue': intent === Intent.Primary,
-            'text-vega-green-dark dark:text-vega-green':
-              intent === Intent.Success,
+            'text-vega-green dark:text-vega-green': intent === Intent.Success,
            'text-yellow-600 dark:text-yellow-500': intent === Intent.Warning,
            'text-vega-pink': intent === Intent.Danger,
          },
--- 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-red-dark dark:stroke-vega-red'
+    '[vector-effect:non-scaling-stroke] stroke-vega-pink dark:stroke-vega-pink'
  );
 });

@ -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 dark:stroke-vega-green'
+    '[vector-effect:non-scaling-stroke] stroke-vega-green dark:stroke-vega-green'
  );
 });

--- 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 dark:stroke-vega-green'
-    : 'stroke-vega-red-dark dark:stroke-vega-red';
+    ? 'stroke-vega-green dark:stroke-vega-green'
+    : 'stroke-vega-pink dark:stroke-vega-pink';
 }

 export interface SparklineProps {
--- a/libs/ui-toolkit/src/components/toast/toasts-container.stories.tsx
+++ b/libs/ui-toolkit/src/components/toast/toasts-container.stories.tsx
@ -190,7 +190,7 @@ const Template: ComponentStory<typeof ToastsContainer> = (args) => {
        📈 + 🥪
      </button>
      <button
-        className="bg-red-200 dark:bg-red-800 p-2 mr-2"
+        className="bg-vega-pink-200 dark:bg-vega-pink-800 p-2 mr-2"
        onClick={() => closeAll()}
      >
        🧽
--- a/libs/ui-toolkit/src/components/toggle/toggle.tsx
+++ b/libs/ui-toolkit/src/components/toggle/toggle.tsx
@ -13,6 +13,7 @@ export interface ToggleProps {
  toggles: ToggleInput[];
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  checkedValue?: string | undefined | null;
+  type?: 'primary' | 'buy' | 'sell';
 }

 export const Toggle = ({
@ -21,6 +22,7 @@ export const Toggle = ({
  toggles,
  onChange,
  checkedValue,
+  type = 'primary',
  ...props
 }: ToggleProps) => {
  const fieldsetClasses =
@ -34,7 +36,14 @@ export const Toggle = ({
    'relative inline-block w-full text-center',
    'peer-checked:rounded-full',
    'px-10 py-2',
-    'peer-checked:bg-neutral-400 dark:peer-checked:bg-white',
+    {
+      'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black':
+        type === 'primary',
+      'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-dark':
+        type === 'buy',
+      'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-dark':
+        type === 'sell',
+    },
    'peer-checked:text-white dark:peer-checked:text-black',
    'cursor-pointer peer-checked:cursor-auto select-none'
  );
--- a/libs/ui-toolkit/src/components/traffic-light/traffic-light.tsx
+++ b/libs/ui-toolkit/src/components/traffic-light/traffic-light.tsx
@ -17,7 +17,7 @@ export const TrafficLight = ({
  const slippageClassName = classNames({
    'text-darkerGreen dark:text-lightGreen': value < q1,
    'text-amber': value >= q1 && value < q2,
-    'text-vega-red': value >= q2,
+    'text-vega-pink': value >= q2,
  });

  return <div className={slippageClassName}>{children || value}</div>;