feat(#500): colors fixes (#512)

* feat(#500): mute price decimal places * feat(colors): remove alpha chanel from shades of gray * feat(colors): simplify intent colors * feat(colors): fix intent mapping * feat(colors): fix lint issues * feat(colors): fix lint issues
2022-06-10 17:07:44 +02:00 · 2022-06-10 17:07:44 +02:00 · 72f94d2e6d
commit 72f94d2e6d
parent dbae9623a7
50 changed files with 215 additions and 227 deletions
--- a/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts
@ -1,15 +1,15 @@
-import { TailwindIntents } from '@vegaprotocol/ui-toolkit';
+import { Intent } from '@vegaprotocol/ui-toolkit';
 import { MarketState } from '@vegaprotocol/types';

-export const MARKET_STATUS: Record<MarketState | '', TailwindIntents> = {
-  [MarketState.Active]: TailwindIntents.Success,
-  [MarketState.Cancelled]: TailwindIntents.Highlight,
-  [MarketState.Closed]: TailwindIntents.Help,
-  [MarketState.Pending]: TailwindIntents.Warning,
-  [MarketState.Proposed]: TailwindIntents.Prompt,
-  [MarketState.Rejected]: TailwindIntents.Danger,
-  [MarketState.Settled]: TailwindIntents.Highlight,
-  [MarketState.Suspended]: TailwindIntents.Warning,
-  [MarketState.TradingTerminated]: TailwindIntents.Danger,
-  '': TailwindIntents.Highlight,
+export const MARKET_STATUS: Record<MarketState | '', Intent> = {
+  [MarketState.Active]: Intent.Success,
+  [MarketState.Cancelled]: Intent.Primary,
+  [MarketState.Closed]: Intent.None,
+  [MarketState.Pending]: Intent.Warning,
+  [MarketState.Proposed]: Intent.Warning,
+  [MarketState.Rejected]: Intent.Danger,
+  [MarketState.Settled]: Intent.Primary,
+  [MarketState.Suspended]: Intent.Warning,
+  [MarketState.TradingTerminated]: Intent.Danger,
+  '': Intent.Primary,
 };
--- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx
@ -43,7 +43,7 @@ const getColor = (change: number | string) => {
  if (parseFloat(change as string) < 0) {
    return theme.colors.vega.pink;
  }
-  return theme.colors.intent.highlight;
+  return theme.colors.black[10];
 };

 const SimpleMarketPercentChangeWrapper = (props: Props) => {
--- a/apps/token/src/components/app-banner/app-banner.tsx
+++ b/apps/token/src/components/app-banner/app-banner.tsx
@ -12,7 +12,7 @@ export const AppBanner = () => {
  return (
    <div className="bg-white p-8 text-black" role="alert">
      <p>
-        <span className="inline-block relative top-[1px] text-intent-danger text-ui mr-[5px]">
+        <span className="inline-block relative top-[1px] text-danger text-ui mr-[5px]">
          <Error />
        </span>
        {bannerMessage}
--- a/apps/token/src/components/locked-progress/locked-progress.tsx
+++ b/apps/token/src/components/locked-progress/locked-progress.tsx
@ -72,7 +72,7 @@ export const LockedProgress = ({
  unlocked,
  leftLabel,
  rightLabel,
-  leftColor = Colors.pink,
+  leftColor = Colors.vega.pink,
  rightColor = Colors.green.DEFAULT,
  light = false,
 }: LockedProgressProps) => {
--- a/apps/token/src/components/transaction-callout/transaction-requested.tsx
+++ b/apps/token/src/components/transaction-callout/transaction-requested.tsx
@ -6,7 +6,7 @@ export const TransactionRequested = () => {
  return (
    <Callout
      iconName="hand-up"
-      intent={Intent.Prompt}
+      intent={Intent.Warning}
      title={t('Awaiting action in Ethereum wallet (e.g. MetaMask)')}
    />
  );
--- a/apps/token/src/hooks/use-animate-value.ts
+++ b/apps/token/src/hooks/use-animate-value.ts
@ -31,9 +31,9 @@ export function useAnimateValue(
  ) {
    elRef.current?.animate(
      [
-        { backgroundColor: Colors.red.vega, color: Colors.white.DEFAULT },
+        { backgroundColor: Colors.vega.red, color: Colors.white.DEFAULT },
        {
-          backgroundColor: Colors.red.vega,
+          backgroundColor: Colors.vega.red,
          color: Colors.white.DEFAULT,
          offset: 0.8,
        },
@ -55,11 +55,11 @@ export function useAnimateValue(
    elRef.current?.animate(
      [
        {
-          backgroundColor: Colors.green.vega,
+          backgroundColor: Colors.vega.green,
          color: Colors.white.DEFAULT,
        },
        {
-          backgroundColor: Colors.green.vega,
+          backgroundColor: Colors.vega.green,
          color: Colors.white.DEFAULT,
          offset: 0.8,
        },
--- a/apps/token/src/routes/claim/code-used.tsx
+++ b/apps/token/src/routes/claim/code-used.tsx
@ -6,7 +6,7 @@ import { AddLockedTokenAddress } from '../../components/add-locked-token';
 export const CodeUsed = () => {
  const { t } = useTranslation();
  return (
-    <Callout intent={Intent.Prompt} iconName="error" title={t('codeUsed')}>
+    <Callout intent={Intent.Warning} iconName="error" title={t('codeUsed')}>
      <p>{t('codeUsedText')}</p>
      <AddLockedTokenAddress />
    </Callout>
--- a/apps/token/src/routes/governance/components/current-proposal-state/current-proposal-state.tsx
+++ b/apps/token/src/routes/governance/components/current-proposal-state/current-proposal-state.tsx
@ -14,7 +14,7 @@ export const CurrentProposalState = ({
    state === ProposalState.Failed ||
    state === ProposalState.Rejected
  ) {
-    className = 'text-intent-danger';
+    className = 'text-danger';
  } else if (
    state === ProposalState.Enacted ||
    state === ProposalState.Passed
--- a/apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx
+++ b/apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx
@ -11,7 +11,7 @@ const StatusPass = ({ children }: { children: React.ReactNode }) => (
 );

 const StatusFail = ({ children }: { children: React.ReactNode }) => (
-  <span className="text-intent-danger">{children}</span>
+  <span className="text-danger">{children}</span>
 );

 export const CurrentProposalStatus = ({
--- a/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx
+++ b/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx
@ -134,9 +134,7 @@ export const VoteButtons = ({
    (voteState === VoteState.Yes || voteState === VoteState.No)
  ) {
    const className =
-      voteState === VoteState.Yes
-        ? 'text-intent-success'
-        : 'text-intent-danger';
+      voteState === VoteState.Yes ? 'text-success' : 'text-danger';
    return (
      <p>
        <span>{t('youVoted')}:</span>{' '}
--- a/apps/token/src/routes/governance/components/vote-details/vote-details.tsx
+++ b/apps/token/src/routes/governance/components/vote-details/vote-details.tsx
@ -62,9 +62,7 @@ export const VoteDetails = ({ proposal }: VoteDetailsProps) => {
                progress={yesPercentage}
              />
            </th>
-            <th className="text-intent-danger w-[18%] text-right">
-              {t('against')}
-            </th>
+            <th className="text-danger w-[18%] text-right">{t('against')}</th>
          </tr>
        </thead>
        <tbody>
@ -98,7 +96,7 @@ export const VoteDetails = ({ proposal }: VoteDetailsProps) => {
        {participationMet ? (
          <span className="text-vega-green mx-4">{t('met')}</span>
        ) : (
-          <span className="text-intent-danger mx-4">{t('notMet')}</span>
+          <span className="text-danger mx-4">{t('notMet')}</span>
        )}{' '}
        {formatNumber(totalTokensVoted, defaultDecimals)}{' '}
        {formatNumber(totalTokensPercentage, defaultDecimals)}%
--- a/apps/token/src/routes/redemption/home/redemption-information.tsx
+++ b/apps/token/src/routes/redemption/home/redemption-information.tsx
@ -131,7 +131,7 @@ export const RedemptionInformation = () => {
      <Callout
        title={t('Stake your Locked VEGA tokens!')}
        iconName="hand-up"
-        intent={Intent.Prompt}
+        intent={Intent.Warning}
      >
        <p className="mb-12">{t('Find out more about Staking.')}</p>
        <Link to="/staking" className="underline text-white">
--- a/apps/token/src/routes/staking/associate/associate-transaction.tsx
+++ b/apps/token/src/routes/staking/associate/associate-transaction.tsx
@ -1,10 +1,4 @@
-import {
-  Button,
-  Callout,
-  Link,
-  Intent,
-  Loader,
-} from '@vegaprotocol/ui-toolkit';
+import { Button, Callout, Link, Loader } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/network-switcher';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@ -67,11 +61,7 @@ export const AssociateTransaction = ({

  if (derivedTxState === TxState.Pending) {
    return (
-      <Callout
-        icon={<Loader size="small" />}
-        intent={Intent.Progress}
-        title={title}
-      >
+      <Callout icon={<Loader size="small" />} title={title}>
        <p data-testid="transaction-pending-body" className="mb-8">
          {t('Associating {{amount}} VEGA tokens with Vega key {{vegaKey}}', {
            amount,
--- a/apps/token/src/routes/staking/associate/contract-associate.tsx
+++ b/apps/token/src/routes/staking/associate/contract-associate.tsx
@ -31,13 +31,13 @@ export const ContractAssociate = ({
  let pageContent = null;
  if (new BigNumber(balanceFormatted).isEqualTo('0')) {
    pageContent = (
-      <div className="text-intent-danger">
+      <div className="text-danger">
        {t('You have no VEGA tokens currently vesting.')}
      </div>
    );
  } else if (new BigNumber(balanceFormatted).minus(lien).isEqualTo('0')) {
    pageContent = (
-      <div className="text-intent-danger">
+      <div className="text-danger">
        {t(
          'All VEGA tokens vesting in the connected wallet have already been associated.'
        )}
--- a/apps/token/src/routes/staking/associate/wallet-associate.tsx
+++ b/apps/token/src/routes/staking/associate/wallet-associate.tsx
@ -81,7 +81,7 @@ export const WalletAssociate = ({
    new BigNumber(walletAssociatedBalance || 0).isEqualTo('0')
  ) {
    pageContent = (
-      <div className="text-intent-danger">
+      <div className="text-danger">
        {t(
          'You have no VEGA tokens in your connected wallet. You will need to buy some VEGA tokens from an exchange in order to stake using this method.'
        )}
@ -92,7 +92,7 @@ export const WalletAssociate = ({
    !new BigNumber(walletAssociatedBalance || 0).isEqualTo('0')
  ) {
    pageContent = (
-      <div className="text-intent-danger">
+      <div className="text-danger">
        {t(
          'All VEGA tokens in the connected wallet is already associated with a Vega wallet/key'
        )}
--- a/apps/token/src/routes/tranches/tranche-progress.tsx
+++ b/apps/token/src/routes/tranches/tranche-progress.tsx
@ -29,7 +29,7 @@ export const TrancheProgress = ({
        <span className="tranches__progress-title">{t('Locked')}</span>
        <ProgressBar
          width={220}
-          color={Colors.pink}
+          color={Colors.vega.pink}
          percentage={lockedPercentage}
        />
        <span className="tranches__progress-numbers">
--- a/apps/token/src/routes/tranches/vesting-chart.tsx
+++ b/apps/token/src/routes/tranches/vesting-chart.tsx
@ -33,8 +33,8 @@ export const VestingChart = () => {
        <AreaChart data={data}>
          <defs>
            {[
-              ['pink', Colors.pink],
-              ['green', Colors.green.vega],
+              ['pink', Colors.vega.pink],
+              ['green', Colors.vega.green],
              ['orange', Colors.orange],
              ['yellow', Colors.yellow.DEFAULT],
            ].map(([key, color]) => (
@ -95,7 +95,7 @@ export const VestingChart = () => {
            dot={false}
            type="linear"
            dataKey="team"
-            stroke={Colors.pink}
+            stroke={Colors.vega.pink}
            fill="url(#pink)"
            yAxisId={0}
            strokeWidth={2}
@ -107,7 +107,7 @@ export const VestingChart = () => {
            dot={false}
            type="monotone"
            dataKey="earlyInvestors"
-            stroke={Colors.green.vega}
+            stroke={Colors.vega.green}
            fill="url(#green)"
            yAxisId={0}
            strokeWidth={2}
--- a/apps/token/src/routes/withdraw/index.tsx
+++ b/apps/token/src/routes/withdraw/index.tsx
@ -139,7 +139,7 @@ export const WithdrawContainer = ({ currVegaKey }: WithdrawContainerProps) => {
        <div className="mb-24">
          <Callout
            title={t('pendingWithdrawalsCalloutTitle')}
-            intent={Intent.Prompt}
+            intent={Intent.Warning}
          >
            <p className="mb-8">{t('pendingWithdrawalsCalloutText')}</p>
            <p>
--- a/libs/deal-ticket/src/components/deal-ticket-manager.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket-manager.tsx
@ -41,7 +41,7 @@ export const DealTicketManager = ({
      return Intent.Danger;
    }

-    return Intent.Progress;
+    return Intent.None;
  };

  useEffect(() => {
--- a/libs/market-list/jest.config.js
+++ b/libs/market-list/jest.config.js
@ -6,4 +6,5 @@ module.exports = {
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../coverage/libs/market-list',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };
--- a/libs/market-list/src/lib/components/landing/landing-dialog.tsx
+++ b/libs/market-list/src/lib/components/landing/landing-dialog.tsx
@ -26,7 +26,7 @@ export const LandingDialog = ({ open, setOpen }: LandingDialogProps) => {
    <AsyncRenderer loading={loading} error={error} data={data}>
      <Dialog
        title={t('Select a market to get started')}
-        intent={Intent.Prompt}
+        intent={Intent.Warning}
        open={open}
        onChange={setClose}
        titleClassNames="font-bold font-sans text-3xl tracking-tight mb-0 pl-8"
--- a/libs/market-list/src/lib/components/landing/select-market-dialog.tsx
+++ b/libs/market-list/src/lib/components/landing/select-market-dialog.tsx
@ -14,7 +14,7 @@ export const SelectMarketDialog = ({
  return (
    <Dialog
      title={t('Select a market')}
-      intent={Intent.Prompt}
+      intent={Intent.Warning}
      open={dialogOpen}
      onChange={() => setDialogOpen(false)}
      titleClassNames="font-bold font-sans text-3xl tracking-tight mb-0 pl-8"
--- a/libs/market-list/src/lib/components/landing/select-market-list.spec.tsx
+++ b/libs/market-list/src/lib/components/landing/select-market-list.spec.tsx
@ -12,7 +12,7 @@ jest.mock(

 describe('SelectMarketList', () => {
  it('should render', () => {
-    render(
+    const { container } = render(
      <SelectMarketList
        data={mockData.data as MarketList}
        onSelect={jest.fn()}
@ -20,7 +20,7 @@ describe('SelectMarketList', () => {
    );
    expect(screen.getByText('AAPL.MF21')).toBeTruthy();
    expect(screen.getByText('-3.14%')).toBeTruthy();
-    expect(screen.getByText('141.75')).toBeTruthy();
+    expect(container).toHaveTextContent(/141\.75/);
    expect(screen.getByText('Or view full market list')).toBeTruthy();
  });

--- a/libs/market-list/src/setup-tests.ts
+++ b/libs/market-list/src/setup-tests.ts
@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/libs/market-list/tsconfig.spec.json
+++ b/libs/market-list/tsconfig.spec.json
@ -3,7 +3,7 @@
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "@testing-library/jest-dom"]
  },
  "include": [
    "**/*.test.ts",
--- a/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
+++ b/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
@ -1,7 +1,7 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
 import { defaultFieldFormatter } from '../table-row';
-import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
+import { Card, Indicator, Intent } from '@vegaprotocol/ui-toolkit';
 import { useMemo } from 'react';

 export const PromotedStatsItem = ({
@ -16,9 +16,9 @@ export const PromotedStatsItem = ({
    () =>
      goodThreshold
        ? goodThreshold(value)
-          ? TailwindIntents.Success
-          : TailwindIntents.Danger
-        : TailwindIntents.Highlight,
+          ? Intent.Success
+          : Intent.Danger
+        : Intent.Primary,
    [goodThreshold, value]
  );
  return (
--- a/libs/network-stats/src/components/table-row/table-row.tsx
+++ b/libs/network-stats/src/components/table-row/table-row.tsx
@ -1,7 +1,7 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
 import { useMemo } from 'react';
-import { Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
+import { Indicator, Intent } from '@vegaprotocol/ui-toolkit';

 export const defaultFieldFormatter = (field: unknown) =>
  field === undefined ? 'no data' : field;
@ -18,9 +18,9 @@ export const TableRow = ({
    () =>
      goodThreshold
        ? goodThreshold(value)
-          ? TailwindIntents.Success
-          : TailwindIntents.Danger
-        : TailwindIntents.Highlight,
+          ? Intent.Success
+          : Intent.Danger
+        : Intent.None,
    [goodThreshold, value]
  );
  return (
--- a/libs/react-helpers/src/lib/format/number.ts
+++ b/libs/react-helpers/src/lib/format/number.ts
@ -39,6 +39,13 @@ export const getNumberFormat = memoize(
    })
 );

+export const getDecimalSeparator = memoize(
+  () =>
+    getNumberFormat(1)
+      .formatToParts(1.1)
+      .find((part) => part.type === 'decimal')?.value
+);
+
 export const formatNumber = (rawValue: string | number, formatDecimals = 0) => {
  return getNumberFormat(formatDecimals).format(Number(rawValue));
 };
--- a/libs/react-helpers/src/lib/grid/flash-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/flash-cell.tsx
@ -71,8 +71,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
    if (value < previousValue) {
      ref.current?.animate(
        [
-          { color: theme.colors.pink },
-          { color: theme.colors.pink, offset: 0.8 },
+          { color: theme.colors.vega.pink },
+          { color: theme.colors.vega.pink, 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.green.vega },
-          { color: theme.colors.green.vega, offset: 0.8 },
+          { color: theme.colors.vega.green },
+          { color: theme.colors.vega.green, offset: 0.8 },
          { color: 'inherit' },
        ],
        FLASH_DURATION
--- a/libs/react-helpers/src/lib/grid/price-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/price-cell.tsx
@ -1,4 +1,5 @@
 import React from 'react';
+import { getDecimalSeparator } from '../format';
 export interface IPriceCellProps {
  value: number | bigint | null | undefined;
  valueFormatted: string;
@ -13,12 +14,22 @@ export const PriceCell = React.memo(
    ) {
      return <span data-testid="price">-</span>;
    }
+    const decimalSeparator = getDecimalSeparator();
+    const valueSplit = decimalSeparator
+      ? valueFormatted.split(decimalSeparator)
+      : [value];
    return (
      <span
        className="font-mono relative text-ui-small"
        data-testid={testId || 'price'}
      >
-        {valueFormatted}
+        {valueSplit[0]}
+        {valueSplit[1] ? decimalSeparator : null}
+        {valueSplit[1] ? (
+          <span className="text-black-muted dark:text-white-muted">
+            {valueSplit[1]}
+          </span>
+        ) : null}
      </span>
    );
  }
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@ -1,5 +1,11 @@
 const defaultTheme = require('tailwindcss/defaultTheme');

+const shadeOfGray = (shade) => {
+  const decValue = Math.round((255 * shade) / 100);
+  const hexValue = decValue.toString(16).padStart(2, '0');
+  return `#${hexValue}${hexValue}${hexValue}`;
+};
+
 module.exports = {
  screens: {
    xs: '500px',
@ -16,64 +22,61 @@ module.exports = {
      yellow: '#EDFF22',
      pink: '#FF2D5E',
      green: '#00F780',
+      red: '#FF261A',
    },
    red: {
      DEFAULT: '#ED1515',
-      transparent: 'rgba(255, 38, 65, 0.3)',
-      vega: '#FF261A',
      dark: '#EB001B',
+      bar: 'rgba(47, 246, 139, 0.45)', // #2FF68B 45%
    },
    green: {
      DEFAULT: '#26FF8A',
-      transparent: 'rgba(38, 255, 138, 0.3)',
      dark: '#008545',
-      vega: '#00F780',
+      bar: 'rgba(47, 246, 139, 0.45)', // #2FF68B 45%
    },
    text: '#C7C7C7',
    deemphasise: '#8A9BA8',
    white: {
      DEFAULT: '#FFF',
-      '02': 'rgba(255, 255, 255, 0.02)',
-      '05': 'rgba(255, 255, 255, 0.05)',
-      10: 'rgba(255, 255, 255, 0.10)',
-      25: 'rgba(255, 255, 255, 0.25)',
-      40: 'rgba(255, 255, 255, 0.40)',
-      60: 'rgba(255, 255, 255, 0.60)',
-      80: 'rgba(255, 255, 255, 0.80)',
-      95: 'rgba(255, 255, 255, 0.95)',
-      100: 'rgba(255, 255, 255, 1.00)',
+      strong: '#FFF',
+      normal: '#F5F8FA',
+      muted: '#676767',
+      '02': shadeOfGray(2),
+      '05': shadeOfGray(5),
+      10: shadeOfGray(10),
+      25: shadeOfGray(25),
+      40: shadeOfGray(40),
+      60: shadeOfGray(60),
+      80: shadeOfGray(80),
+      95: shadeOfGray(95),
+      100: shadeOfGray(100),
    },
    black: {
      DEFAULT: '#000',
-      '02': 'rgba(0, 0, 0, 0.02)',
-      '05': 'rgba(0, 0, 0, 0.05)',
-      10: 'rgba(0, 0, 0, 0.10)',
-      25: 'rgba(0, 0, 0, 0.25)',
-      40: 'rgba(0, 0, 0, 0.40)',
-      60: 'rgba(0, 0, 0, 0.60)',
-      80: 'rgba(0, 0, 0, 0.80)',
-      95: 'rgba(0, 0, 0, 0.95)',
-      100: 'rgba(0, 0, 0, 1)',
+      strong: '#000',
+      normal: '#000',
+      muted: '#BFCCD6',
+      '02': shadeOfGray(100 - 2),
+      '05': shadeOfGray(100 - 5),
+      10: shadeOfGray(100 - 10),
+      25: shadeOfGray(100 - 25),
+      40: shadeOfGray(100 - 40),
+      60: shadeOfGray(100 - 60),
+      80: shadeOfGray(100 - 80),
+      95: shadeOfGray(100 - 95),
+      100: shadeOfGray(100 - 100),
    },
    blue: '#1DA2FB',
    coral: '#FF6057',
-    pink: '#FF2D5E',
    orange: '#D9822B',
    yellow: {
      DEFAULT: '#EDFF22',
      dark: '#474B0A', // yellow 0.3 opacity on black
    },
-    intent: {
-      danger: '#FF261A',
-      warning: '#FF7A1A',
-      prompt: '#EDFF22',
-      success: '#26FF8A',
-      help: '#494949',
-      highlight: '#E5E5E5',
-    },
-    'intent-background': {
-      danger: '#9E0025', // for white text
-    },
+    danger: '#FF261A',
+    warning: '#FF7A1A',
+    success: '#26FF8A',
+    'danger-bg': '#9E0025', // for white text
  },
  spacing: {
    0: '0px',
--- a/libs/tailwindcss-config/src/vega-custom-classes.js
+++ b/libs/tailwindcss-config/src/vega-custom-classes.js
@ -13,8 +13,8 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
      overflowX: 'auto',
      padding: '1em',
      background: theme.colors.white.DEFAULT,
-      color: theme.colors.intent.help,
-      border: '1px solid #696969',
+      color: theme.colors.black[25],
+      border: `1px solid #${theme.colors.black[40]}`,
    },
    '.dark .syntax-highlighter-wrapper .hljs': {
      background: '#2C2C2C',
@ -24,7 +24,7 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
      color: theme.colors.vega.pink,
    },
    '.syntax-highlighter-wrapper .hljs-number': {
-      color: theme.colors.intent.warning,
+      color: theme.colors.warning,
    },
    '.syntax-highlighter-wrapper .hljs-string': {
      color: theme.colors.blue,
--- a/libs/ui-toolkit/src/components/callout/callout.spec.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.spec.tsx
@ -15,17 +15,31 @@ it('renders title and icon', () => {
  expect(screen.getByText('title')).toBeInTheDocument();
 });

-const intents = Object.values(Intent).filter((i) => i !== Intent.Progress);
+it(`Applies class for success intent`, () => {
+  render(<Callout intent={Intent.Danger} />);
+  expect(screen.getByTestId('callout')).toHaveClass('shadow-danger');
+});

-it.each(intents)('Applies class for %s', (intent) => {
-  render(<Callout intent={intent} />);
+it(`Applies class for warning intent`, () => {
+  render(<Callout intent={Intent.Warning} />);
+  expect(screen.getByTestId('callout')).toHaveClass('shadow-warning');
+});
+
+it(`Applies class for danger intent`, () => {
+  render(<Callout intent={Intent.Danger} />);
+  expect(screen.getByTestId('callout')).toHaveClass('shadow-danger');
+});
+
+it(`Applies class for primary intent`, () => {
+  render(<Callout intent={Intent.Primary} />);
  expect(screen.getByTestId('callout')).toHaveClass(
-    `shadow-intent-${intent.toLowerCase()}`
+    'shadow-vega-pink',
+    'dark:shadow-vega-yellow'
  );
 });

-it(`Applies class for progress`, () => {
-  render(<Callout intent={Intent.Progress} />);
+it(`Applies class for none intent`, () => {
+  render(<Callout />);
  expect(screen.getByTestId('callout')).toHaveClass(
    'shadow-black',
    'dark:shadow-white'
--- a/libs/ui-toolkit/src/components/callout/callout.stories.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.stories.tsx
@ -24,6 +24,12 @@ Default.args = {
  children: 'Content',
 };

+export const Primary = Template.bind({});
+Primary.args = {
+  intent: Intent.Primary,
+  children: 'Content',
+};
+
 export const Danger = Template.bind({});
 Danger.args = {
  intent: Intent.Danger,
@ -36,33 +42,15 @@ Warning.args = {
  children: 'Content',
 };

-export const Prompt = Template.bind({});
-Prompt.args = {
-  intent: Intent.Prompt,
-  children: 'Content',
-};
-
-export const Progress = Template.bind({});
-Progress.args = {
-  intent: Intent.Progress,
-  children: 'Content',
-};
-
 export const Success = Template.bind({});
 Success.args = {
  intent: Intent.Success,
  children: 'Content',
 };

-export const Help = Template.bind({});
-Help.args = {
-  intent: Intent.Help,
-  children: 'Content',
-};
-
 export const IconAndContent = Template.bind({});
 IconAndContent.args = {
-  intent: Intent.Help,
+  intent: Intent.None,
  title: 'This is what this thing does',
  iconName: 'endorsed',
  children: (
@ -77,7 +65,7 @@ IconAndContent.args = {

 export const CustomIconAndContent = Template.bind({});
 CustomIconAndContent.args = {
-  intent: Intent.Help,
+  intent: Intent.None,
  title: 'This is what this thing does',
  icon: (
    <span role="img" aria-label="tick">
@ -96,7 +84,7 @@ CustomIconAndContent.args = {

 export const Loading = Template.bind({});
 Loading.args = {
-  intent: Intent.Help,
+  intent: Intent.None,
  title: 'This is what this thing does',
  isLoading: true,
  children: (
--- a/libs/ui-toolkit/src/components/callout/callout.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.tsx
@ -77,7 +77,7 @@ export function Callout({
  iconName,
  iconDescription,
  isLoading,
-  intent = Intent.Help,
+  intent = Intent.None,
  headingLevel,
 }: CalloutProps) {
  const iconElement = getIconElement({
--- a/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx
+++ b/libs/ui-toolkit/src/components/dialog/dialog.stories.tsx
@ -56,5 +56,5 @@ Modal.args = {
  open: false,
  title: 'Modal (Prompt)',
  children: <p>Some content</p>,
-  intent: Intent.Prompt,
+  intent: Intent.Warning,
 };
--- a/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
+++ b/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
@ -1,5 +1,6 @@
 import type { Story, Meta } from '@storybook/react';
 import { Indicator } from './indicator';
+import { Intent } from '../../utils/intent';

 export default {
  component: Indicator,
@ -10,22 +11,22 @@ const Template: Story = (args) => <Indicator {...args} />;

 export const Default = Template.bind({});

-export const Highlight = Template.bind({});
-Highlight.args = {
-  variant: 'highlight',
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: Intent.Primary,
 };

 export const Success = Template.bind({});
 Success.args = {
-  variant: 'success',
+  variant: Intent.Success,
 };

 export const Warning = Template.bind({});
 Warning.args = {
-  variant: 'warning',
+  variant: Intent.Warning,
 };

 export const Danger = Template.bind({});
 Danger.args = {
-  variant: 'danger',
+  variant: Intent.Danger,
 };
--- a/libs/ui-toolkit/src/components/indicator/indicator.tsx
+++ b/libs/ui-toolkit/src/components/indicator/indicator.tsx
@ -1,8 +1,12 @@
 import classNames from 'classnames';
-import type { TailwindIntents } from '../../utils/intent';
+import { Intent } from '../../utils/intent';
 import { getVariantBackground } from '../../utils/intent';

-export const Indicator = ({ variant }: { variant?: TailwindIntents }) => {
+interface IndicatorProps {
+  variant?: Intent;
+}
+
+export const Indicator = ({ variant = Intent.None }: IndicatorProps) => {
  const names = classNames(
    'inline-block w-8 h-8 mb-2 mr-8 rounded',
    getVariantBackground(variant)
--- a/libs/ui-toolkit/src/components/input-error/input-error.tsx
+++ b/libs/ui-toolkit/src/components/input-error/input-error.tsx
@ -27,14 +27,14 @@ export const InputError = ({
      'text-ui',
    ],
    {
-      'border-intent-danger': intent === 'danger',
-      'border-intent-warning': intent === 'warning',
+      'border-danger': intent === 'danger',
+      'border-warning': intent === 'warning',
    },
    className
  );
  const iconClassName = classNames(['mx-8'], {
-    'fill-intent-danger': intent === 'danger',
-    'fill-intent-warning': intent === 'warning',
+    'fill-danger': intent === 'danger',
+    'fill-warning': intent === 'warning',
  });
  return (
    <div
--- a/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx
+++ b/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx
@ -1,5 +1,6 @@
 import type { Story, Meta } from '@storybook/react';
 import { Lozenge } from './lozenge';
+import { Intent } from '../../utils/intent';

 export default {
  component: Lozenge,
@ -10,22 +11,22 @@ const Template: Story = (args) => <Lozenge {...args}>lozenge</Lozenge>;

 export const Default = Template.bind({});

-export const Highlight = Template.bind({});
-Highlight.args = {
-  variant: 'highlight',
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: Intent.Primary,
 };

 export const Success = Template.bind({});
 Success.args = {
-  variant: 'success',
+  variant: Intent.Success,
 };

 export const Warning = Template.bind({});
 Warning.args = {
-  variant: 'warning',
+  variant: Intent.Warning,
 };

 export const Danger = Template.bind({});
 Danger.args = {
-  variant: 'danger',
+  variant: Intent.Danger,
 };
--- a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
+++ b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
 import { getVariantBackground } from '../../utils/intent';
-import { TailwindIntents } from '../../utils/intent';
+import { Intent } from '../../utils/intent';

 interface LozengeProps {
  children: ReactNode;
-  variant?: TailwindIntents;
+  variant?: Intent;
  className?: string;
 }

@ -22,7 +22,7 @@ const getLozengeClasses = (

 export const Lozenge = ({
  children,
-  variant = TailwindIntents.Highlight,
+  variant = Intent.None,
  className,
 }: LozengeProps) => {
  return (
--- a/libs/ui-toolkit/src/components/price-change/price-change-cell.tsx
+++ b/libs/ui-toolkit/src/components/price-change/price-change-cell.tsx
@ -1,7 +1,6 @@
 import {
  addDecimalsFormatNumber,
  formatNumberPercentage,
-  PriceCell,
 } from '@vegaprotocol/react-helpers';
 import BigNumber from 'bignumber.js';
 import React from 'react';
@ -55,32 +54,16 @@ export const PriceCellChange = React.memo(
        )} flex items-center gap-4 justify-end`}
      >
        <Arrow value={change} />
-        <span className="flex items-center gap-6">
+        <span className="flex items-center gap-6 font-mono">
          <span>
-            {
-              <PriceCell
-                value={changePercentage}
-                valueFormatted={formatNumberPercentage(
-                  new BigNumber(changePercentage.toString()),
-                  2
-                )}
-              />
-            }
+            {formatNumberPercentage(
+              new BigNumber(changePercentage.toString()),
+              2
+            )}
            &nbsp;
          </span>
          <span>
-            (
-            {
-              <PriceCell
-                value={BigInt(change)}
-                valueFormatted={addDecimalsFormatNumber(
-                  change.toString(),
-                  decimalPlaces ?? 0,
-                  3
-                )}
-              />
-            }
-            )
+            {addDecimalsFormatNumber(change.toString(), decimalPlaces ?? 0, 3)}
          </span>
        </span>
      </span>
--- a/libs/ui-toolkit/src/components/radio-group/radio-group.tsx
+++ b/libs/ui-toolkit/src/components/radio-group/radio-group.tsx
@ -41,7 +41,7 @@ export const Radio = ({ id, value, label, disabled, hasError }: RadioProps) => {
    'dark:bg-white-25',
    {
      'border-black-60 dark:border-white-60': !hasError,
-      'border-intent-danger dark:border-intent-danger': hasError,
+      'border-danger dark:border-danger': hasError,
    }
  );
  return (
--- a/libs/ui-toolkit/src/primitives/colors.stories.mdx
+++ b/libs/ui-toolkit/src/primitives/colors.stories.mdx
@ -53,12 +53,11 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
  <ColorItem
    title="theme.color.intent"
    subtitle="Intent"
-    colors={theme.colors.intent}
-  />
-  <ColorItem
-    title="theme.color.intent-background"
-    subtitle="Intent background"
-    colors={theme.colors['intent-background']}
+    colors={{
+      success: theme.colors.success,
+      warning: theme.colors.warning,
+      danger: theme.colors.danger,
+    }}
  />
 </ColorPalette>

@ -71,7 +70,7 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
    colors={{
      black: theme.colors.black.DEFAULT,
      white: theme.colors.white.DEFAULT,
-      danger: theme.colors['intent-background'].danger,
+      danger: theme.colors['danger-bg'],
    }}
  />
 </ColorPalette>
--- a/libs/ui-toolkit/src/utils/intent.tsx
+++ b/libs/ui-toolkit/src/utils/intent.tsx
@ -1,40 +1,29 @@
 export enum Intent {
-  Danger = 'danger',
-  Warning = 'warning',
-  Prompt = 'prompt',
-  Progress = 'progress',
-  Success = 'success',
-  Help = 'help',
-}
-
-export enum TailwindIntents {
-  Danger = 'danger',
-  Warning = 'warning',
-  Prompt = 'prompt',
-  Success = 'success',
-  Help = 'help',
-  Highlight = 'highlight',
+  None,
+  Primary,
+  Success,
+  Warning,
+  Danger,
 }

 export const getIntentShadow = (intent?: Intent) => {
  return {
    'shadow-callout': true,
-    'shadow-intent-danger': intent === Intent.Danger,
-    'shadow-intent-warning': intent === Intent.Warning,
-    'shadow-intent-prompt': intent === Intent.Prompt,
-    'shadow-black dark:shadow-white': intent === Intent.Progress,
-    'shadow-intent-success': intent === Intent.Success,
-    'shadow-intent-help': intent === Intent.Help,
+    'shadow-danger': intent === Intent.Danger,
+    'shadow-warning': intent === Intent.Warning,
+    'shadow-success': intent === Intent.Success,
+    'shadow-black dark:shadow-white': intent === Intent.None,
+    'shadow-vega-pink dark:shadow-vega-yellow': intent === Intent.Primary,
  };
 };

-export const getVariantBackground = (variant?: TailwindIntents) => {
+export const getVariantBackground = (variant?: Intent) => {
  return {
-    'bg-intent-danger text-white': variant === TailwindIntents.Danger,
-    'bg-intent-warning text-black': variant === TailwindIntents.Warning,
-    'bg-intent-prompt text-black': variant === TailwindIntents.Prompt,
-    'bg-intent-success text-black': variant === TailwindIntents.Success,
-    'bg-intent-help text-white': variant === TailwindIntents.Help,
-    'bg-intent-highlight text-black': variant === TailwindIntents.Highlight,
+    'bg-black dark:bg-white': variant === Intent.None,
+    'bg-vega-pink text-black dark:bg-vega-yellow dark:text-black-normal':
+      variant === Intent.Primary,
+    'bg-danger text-white': variant === Intent.Danger,
+    'bg-warning text-black': variant === Intent.Warning,
+    'bg-success text-black': variant === Intent.Success,
  };
 };
--- a/libs/wallet/src/manage-dialog.tsx
+++ b/libs/wallet/src/manage-dialog.tsx
@ -23,7 +23,7 @@ export const VegaManageDialog = ({
      title={t('SELECT A VEGA KEY')}
      open={dialogOpen}
      onChange={setDialogOpen}
-      intent={Intent.Prompt}
+      intent={Intent.Warning}
    >
      <div className="text-ui">
        {keypairs ? (
--- a/libs/wallet/src/rest-connector-form.tsx
+++ b/libs/wallet/src/rest-connector-form.tsx
@ -82,7 +82,7 @@ export function RestConnectorForm({
        )}
      </FormGroup>
      {error && (
-        <p className="text-intent-danger mb-12" data-testid="form-error">
+        <p className="text-danger mb-12" data-testid="form-error">
          {error}
        </p>
      )}
--- a/libs/web3/src/lib/transaction-dialog/transaction-dialog.tsx
+++ b/libs/web3/src/lib/transaction-dialog/transaction-dialog.tsx
@ -66,12 +66,12 @@ export const TransactionDialog = ({
      [EthTxStatus.Requested]: {
        title: t('Confirm transaction'),
        icon: <Icon name="hand-up" size={20} />,
-        intent: Intent.Prompt,
+        intent: Intent.Warning,
      },
      [EthTxStatus.Pending]: {
        title: t(`${name} pending`),
        icon: <Loader size="small" />,
-        intent: Intent.Progress,
+        intent: Intent.None,
      },
      [EthTxStatus.Complete]: {
        title: t(`${name} complete`),
--- a/libs/web3/src/lib/web3-connect-dialog.tsx
+++ b/libs/web3/src/lib/web3-connect-dialog.tsx
@ -22,7 +22,7 @@ export const Web3ConnectDialog = ({
    <Dialog
      open={dialogOpen}
      onChange={setDialogOpen}
-      intent={Intent.Prompt}
+      intent={Intent.Warning}
      title={t('Connect to your Ethereum wallet')}
    >
      <ul data-testid="web3-connector-list">
--- a/libs/withdraws/src/lib/withdraw-dialog.tsx
+++ b/libs/withdraws/src/lib/withdraw-dialog.tsx
@ -108,13 +108,13 @@ const getProps = (
    [VegaTxStatus.Requested]: {
      title: t('Confirm withdrawal'),
      icon: <Icon name="hand-up" size={20} />,
-      intent: Intent.Prompt,
+      intent: Intent.Warning,
      children: <Step>Confirm withdrawal in Vega wallet</Step>,
    },
    [VegaTxStatus.Pending]: {
      title: t('Withdrawal transaction pending'),
      icon: <Loader size="small" />,
-      intent: Intent.Progress,
+      intent: Intent.None,
      children: <Step>Awaiting transaction</Step>,
    },
  };
@ -139,13 +139,13 @@ const getProps = (
    [EthTxStatus.Requested]: {
      title: t('Confirm transaction'),
      icon: <Icon name="hand-up" size={20} />,
-      intent: Intent.Prompt,
+      intent: Intent.Warning,
      children: <Step>{t('Confirm transaction in wallet')}</Step>,
    },
    [EthTxStatus.Pending]: {
      title: t('Ethereum transaction pending'),
      icon: <Loader size="small" />,
-      intent: Intent.Progress,
+      intent: Intent.None,
      children: (
        <Step>
          <span>