SONAR-23136 Replace usage of secondary.dark with echoes design tokens

38 files changed, 65 insertions, 114 deletions

diff --git a/server/sonar-web/design-system/src/components/BarChart.tsx b/server/sonar-web/design-system/src/components/BarChart.tsx
index 5b15de8dafe..1601deeea2c 100644
--- a/server/sonar-web/design-system/src/components/BarChart.tsx
+++ b/server/sonar-web/design-system/src/components/BarChart.tsx
@@ -150,7 +150,7 @@ function Bars<T>(
 }
 
 const BarChartTick = styled.text`
-  fill: ${themeColor('pageContentLight')};
+  fill: var(--echoes-color-text-subdued);
   text-anchor: middle;
 `;
 
diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
index 909515ccd40..7444361630d 100644
--- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
+++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
@@ -27,7 +27,6 @@ import {
   PopupPlacement,
   PopupZLevel,
   themeColor,
-  themeContrast,
 } from '../helpers';
 import { useResizeObserver } from '../hooks/useResizeObserver';
 import { Dropdown } from './Dropdown';
@@ -181,6 +180,6 @@ const BreadcrumbWrapper = styled.nav`
   ${tw`sw-truncate`}
   ${tw`sw-typo-default`}
 
-  color: ${themeContrast('breadcrumb')};
+  color: var(--echoes-color-text-subdued);
   background-color: ${themeColor('breadcrumb')};
 `;
diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx
index af074f5bb47..8dbe5e64226 100644
--- a/server/sonar-web/design-system/src/components/BubbleChart.tsx
+++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx
@@ -438,6 +438,6 @@ const BubbleChartGrid = styled.line`
 const BubbleChartTick = styled.text`
   ${tw`sw-typo-default`}
   ${tw`sw-select-none`}
-  fill: ${themeColor('pageContentLight')};
+  fill: var(--echoes-color-text-subdued);
   text-anchor: var(--align);
 `;
diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
index 90fe7e05539..e3be15c7a1a 100644
--- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx
+++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
@@ -276,7 +276,7 @@ export const ItemHeaderHighlight = styled.span`
  */
 export const ItemHeader = styled(UnstyledItemHeader)`
   background-color: ${themeColor('dropdownMenuHeader')};
-  color: ${themeContrast('dropdownMenuHeader')};
+  color: var(--echoes-color-text-subdued);
 
   ${tw`sw-py-2 sw-px-3`}
 `;
diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx
index 6f249e84cf2..84ce1aa0920 100644
--- a/server/sonar-web/design-system/src/components/FacetItem.tsx
+++ b/server/sonar-web/design-system/src/components/FacetItem.tsx
@@ -134,7 +134,7 @@ const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean
     }
 
     & span.stat {
-      color: ${themeColor('facetItemLight')};
+      color: var(--echoes-color-text-subdued);
     }
   }
 
diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx
index 1aba9da6317..12d70dfa433 100644
--- a/server/sonar-web/design-system/src/components/Histogram.tsx
+++ b/server/sonar-web/design-system/src/components/Histogram.tsx
@@ -139,7 +139,7 @@ export class Histogram extends React.PureComponent<Props> {
 
 const HistogramTick = styled.text`
   ${tw`sw-typo-default`}
-  fill: ${themeColor('pageContentLight')};
+  fill: var(--echoes-color-text-subdued);
 
   ${TooltipWrapper} & {
     fill: ${themeContrast('primary')};
diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
index 72895b5662c..9114842a6c0 100644
--- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
+++ b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
@@ -22,6 +22,7 @@ import classNames from 'classnames';
 import { ReactNode } from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor } from '../helpers/theme';
+import { Note } from '../sonar-aligned';
 import { BareButton } from '../sonar-aligned/components/buttons';
 
 interface Props {
@@ -45,12 +46,6 @@ export function IllustratedSelectionCard(props: Props) {
   );
 }
 
-const Note = styled.span`
-  color: ${themeColor('pageContentLight')};
-
-  ${tw`sw-typo-default`}
-`;
-
 const ImageContainer = styled.div`
   min-height: 116px;
   flex: 1;
diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
index 33265d7d9ff..292af594cc4 100644
--- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
+++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
@@ -181,7 +181,7 @@ export const InteractiveIcon = styled(InteractiveIconBase)`
  * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information.
  */
 export const DiscreetInteractiveIcon = styled(InteractiveIcon)`
-  --color: ${themeColor('discreetInteractiveIcon')};
+  --color: var(--echoes-color-icon-subdued);
 `;
 
 /**
diff --git a/server/sonar-web/design-system/src/components/KeyboardHint.tsx b/server/sonar-web/design-system/src/components/KeyboardHint.tsx
index f1d86f1cfbd..935ce9275b7 100644
--- a/server/sonar-web/design-system/src/components/KeyboardHint.tsx
+++ b/server/sonar-web/design-system/src/components/KeyboardHint.tsx
@@ -19,7 +19,6 @@
  */
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { themeContrast } from '../helpers';
 import { Key } from '../helpers/keyboard';
 import { KeyboardHintKeys } from './KeyboardHintKeys';
 
@@ -45,7 +44,7 @@ export function KeyboardHint({ title, command, className }: Props) {
 const Body = styled.div`
   ${tw`sw-flex sw-gap-2 sw-justify-center`}
   flex-wrap: wrap;
-  color: ${themeContrast('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 function isMacOS() {
diff --git a/server/sonar-web/design-system/src/components/SelectionCard.tsx b/server/sonar-web/design-system/src/components/SelectionCard.tsx
index f81c23b68f2..74f7e24f024 100644
--- a/server/sonar-web/design-system/src/components/SelectionCard.tsx
+++ b/server/sonar-web/design-system/src/components/SelectionCard.tsx
@@ -141,7 +141,7 @@ const StyledButton = styled.button`
     ${tw`sw-cursor-not-allowed`}
 
     background-color: ${themeColor('selectionCardDisabled')};
-    color: ${themeColor('selectionCardDisabledText')};
+    color: var(--echoes-color-text-disabled);
     border: ${themeBorder('default', 'selectionCardBorderDisabled')};
   }
 `;
@@ -178,7 +178,7 @@ const StyledLabel = styled.label`
   cursor: inherit;
 
   .disabled & {
-    color: ${themeContrast('selectionCardDisabled')};
+    color: var(--echoes-color-text-disabled);
   }
 `;
 
diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx
index f986be03389..71275eb2237 100644
--- a/server/sonar-web/design-system/src/components/Text.tsx
+++ b/server/sonar-web/design-system/src/components/Text.tsx
@@ -125,7 +125,7 @@ const StyledText = styled.span`
  */
 export const StyledMutedText = styled(StyledText)`
   ${tw`sw-font-regular`};
-  color: ${themeColor('dropdownMenuSubTitle')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 /** @deprecated Use Heading from Echoes instead.
@@ -154,7 +154,7 @@ export const TextSubdued = styled.span`
 /** @deprecated Use Text (with `isSubdued` prop) from Echoes instead.
  */
 export const LightLabel = styled.span`
-  color: ${themeColor('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 /** @deprecated Use Label or Text (with `isHighlighted` prop) from Echoes instead.
diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx
index 58862d1a5d0..124fafaafdf 100644
--- a/server/sonar-web/design-system/src/components/Tooltip.tsx
+++ b/server/sonar-web/design-system/src/components/Tooltip.tsx
@@ -547,7 +547,7 @@ export const TooltipWrapperInner = styled.div`
   ${tw`sw-break-words`};
 
   hr {
-    background-color: ${themeColor('tooltipSeparator')};
+    background-color: var(--echoes-color-text-subdued);
 
     ${tw`sw-mx-4`};
   }
diff --git a/server/sonar-web/design-system/src/components/TutorialStep.tsx b/server/sonar-web/design-system/src/components/TutorialStep.tsx
index 12d050e8890..b54f815b53e 100644
--- a/server/sonar-web/design-system/src/components/TutorialStep.tsx
+++ b/server/sonar-web/design-system/src/components/TutorialStep.tsx
@@ -19,7 +19,7 @@
  */
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
+import { themeBorder, themeColor } from '../helpers/theme';
 
 interface Props {
   children: React.ReactNode;
@@ -69,7 +69,7 @@ const Step = styled.li<{ stepNumber?: number }>`
   ${tw`sw-mt-10`}
 
   &::before {
-    color: ${themeContrast('pageContentLight')};
+    color: var(--echoes-color-text-subdued);
     content: counter(li);
 
     ${tw`sw-inline-block`}
diff --git a/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx
index fc7c652ec26..c9562e9e5f0 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx
@@ -35,6 +35,6 @@ it('should render TextMuted', () => {
   render(<TextMuted text="Hi" />);
 
   expect(screen.getByText('Hi')).toHaveStyle({
-    color: 'rgb(106, 117, 144)',
+    color: 'var(--echoes-color-text-subdued)',
   });
 });
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
index 8e31fe80996..e3653d1d3e2 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
@@ -54,7 +54,7 @@ exports[`renders correctly with yValues 1`] = `
 
 .emotion-2 {
   font: var(--echoes-typography-text-default-regular);
-  fill: rgb(106,117,144);
+  fill: var(--echoes-color-text-subdued);
 }
 
 .e1vbniy52 .emotion-2 {
@@ -140,7 +140,7 @@ exports[`renders correctly with yValues and yTicks 1`] = `
 
 .emotion-2 {
   font: var(--echoes-typography-text-default-regular);
-  fill: rgb(106,117,144);
+  fill: var(--echoes-color-text-subdued);
 }
 
 .e1vbniy52 .emotion-2 {
@@ -256,7 +256,7 @@ exports[`renders correctly with yValues, yTicks, and yTooltips 1`] = `
 
 .emotion-2 {
   font: var(--echoes-typography-text-default-regular);
-  fill: rgb(106,117,144);
+  fill: var(--echoes-color-text-subdued);
 }
 
 .e1vbniy52 .emotion-2 {
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
index a45b1d68bd8..bc08e8388ec 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renders on mac 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  color: rgb(106,117,144);
+  color: var(--echoes-color-text-subdued);
 }
 
 .emotion-2 {
@@ -75,7 +75,7 @@ exports[`renders on windows 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  color: rgb(106,117,144);
+  color: var(--echoes-color-text-subdued);
 }
 
 .emotion-2 {
@@ -135,7 +135,7 @@ exports[`renders with command 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  color: rgb(106,117,144);
+  color: var(--echoes-color-text-subdued);
 }
 
 .emotion-2 {
@@ -190,7 +190,7 @@ exports[`renders with title 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  color: rgb(106,117,144);
+  color: var(--echoes-color-text-subdued);
 }
 
 .emotion-2 {
@@ -250,7 +250,7 @@ exports[`renders without title 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  color: rgb(106,117,144);
+  color: var(--echoes-color-text-subdued);
 }
 
 .emotion-2 {
diff --git a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx
index 24eb1a2f8a2..546b71710e7 100644
--- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx
+++ b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx
@@ -20,7 +20,7 @@
 
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../../helpers';
+import { themeBorder, themeColor } from '../../helpers';
 import { BareButton } from '../../sonar-aligned/components/buttons';
 
 interface CodeViewerExpanderProps {
@@ -38,7 +38,6 @@ export const CodeViewerExpander = styled(BareButton)<CodeViewerExpanderProps>`
   background-color: ${themeColor('codeLineEllipsis')};
 
   &:hover {
-    color: ${themeContrast('codeLineEllipsisHover')};
     background-color: ${themeColor('codeLineEllipsisHover')};
   }
 
@@ -76,6 +75,6 @@ export const LineSCMStyled = styled(BareButton)`
   ${tw`sw-w-full sw-h-full`}
 
   &:hover {
-    color: ${themeColor('codeLineMetaHover')};
+    color: var(--echoes-color-text-subdued);
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx b/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx
index c03f26ca4de..93d98fb276c 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx
@@ -21,7 +21,6 @@ import styled from '@emotion/styled';
 import { memo, useState } from 'react';
 import tw from 'twin.macro';
 import { PopupPlacement, PopupZLevel } from '../../helpers/positioning';
-import { themeColor } from '../../helpers/theme';
 import { DropdownToggler } from '../DropdownToggler';
 import { LineMeta } from './LineStyles';
 
@@ -90,6 +89,6 @@ const LineNumberStyled = styled.div`
   ${tw`sw-cursor-pointer`}
 
   &:hover {
-    color: ${themeColor('codeLineMetaHover')};
+    color: var(--echoes-color-text-bold);
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
index 4eb3f09ec62..f1c99be7e9b 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
@@ -38,12 +38,12 @@ export const LineSCMStyledDiv = styled.div`
 
   ${tw`sw-pr-2`}
   ${tw`sw-truncate`}
-${tw`sw-whitespace-nowrap`}
-${tw`sw-cursor-pointer`}
-${tw`sw-w-full sw-h-full`}
+  ${tw`sw-whitespace-nowrap`}
+  ${tw`sw-cursor-pointer`}
+  ${tw`sw-w-full sw-h-full`}
 
-&:hover {
-    color: ${themeColor('codeLineMetaHover')};
+  &:hover {
+    color: var(--echoes-color-text-bold);
   }
 `;
 
@@ -160,7 +160,6 @@ export const LineCodeEllipsisStyled = styled(BareButton)`
   background-color: ${themeColor('codeLineEllipsis')};
 
   &:hover {
-    color: ${themeColor('codeLineEllipsisHoverContrast')};
     background-color: ${themeColor('codeLineEllipsisHover')};
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
index 01cd28daf01..5a9f9478c96 100644
--- a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
@@ -19,7 +19,7 @@
  */
 
 import { useTheme } from '@emotion/react';
-import { themeColor, themeContrast } from '../../helpers/theme';
+import { themeColor } from '../../helpers/theme';
 import { CustomIcon, IconProps } from './Icon';
 
 /** @deprecated Use IconStatusResolved from Echoes instead, if possible.
@@ -28,7 +28,10 @@ import { CustomIcon, IconProps } from './Icon';
  * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
  * warning when revisiting old code, but all new code should use the icons from Echoes.
  */
-export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps }: IconProps) {
+export function StatusResolvedIcon({
+  fill = 'var(--echoes-color-icon-subdued)',
+  ...iconProps
+}: IconProps) {
   const theme = useTheme();
 
   return (
@@ -37,7 +40,7 @@ export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps }
       <path
         clipRule="evenodd"
         d="M11.3105 6.22789c.2884.29737.2811.77219-.0163 1.06054L8.27211 10.25c-.29414.2852-.76273.2816-1.05244-.0081l-2-1.99999c-.29289-.2929-.29289-.76777 0-1.06066.29289-.2929.76777-.2929 1.06066 0L7.7581 8.65901 10.25 6.21158c.2974-.28835.7722-.28105 1.0605.01631Z"
-        fill={themeContrast('iconStatusResolved')({ theme })}
+        fill="var(--echoes-color-icon-on-color)"
         fillRule="evenodd"
       />
     </CustomIcon>
diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
index 5acd32994b6..9a3acc81743 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -260,7 +260,7 @@ export const StyledInteractiveIcon = styled(InteractiveIcon)`
 `;
 
 export const StyledNote = styled.span`
-  color: ${themeColor('inputPlaceholder')};
+  color: var(--echoes-color-text-placeholder);
   top: calc(1px + ${theme('inset.2')});
 
   ${tw`sw-absolute`}
diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
index 86d80230b9c..bfb355172ea 100644
--- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
+++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
@@ -162,7 +162,7 @@ const InputValue = styled.span`
   ${tw`sw-truncate`};
 
   &.is-placeholder {
-    color: ${themeColor('inputPlaceholder')};
+    color: var(--echoes-color-text-placeholder);
   }
 
   &.is-disabled {
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
index 6b4ebff6bd3..7f7cd5bacde 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
@@ -19,7 +19,7 @@
  */
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { themeColor, themeContrast } from '../../helpers/theme';
+import { themeColor } from '../../helpers/theme';
 
 export const SubnavigationSubheading = styled.div`
   ${tw`sw-flex`}
@@ -28,7 +28,7 @@ export const SubnavigationSubheading = styled.div`
   ${tw`sw-px-4 sw-pt-6 sw-pb-2`}
   ${tw`sw-w-full`}
 
-  color: ${themeContrast('subnavigationSubheading')};
+  color: var(--echoes-color-text-subdued);
   background-color: ${themeColor('subnavigationSubheading')};
 `;
 SubnavigationSubheading.displayName = 'SubnavigationSubheading';
diff --git a/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx b/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx
index f739139de41..50de44f5277 100644
--- a/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx
+++ b/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx
@@ -70,7 +70,7 @@ const StyledToastContainer = styled(WrappedToastContainer)`
 
   .Toastify__close-button {
     ${tw`sw-pt-3 sw-pr-3`}
-    color: ${themeColor('toastCloseIcon')};
+    color: var(--echoes-color-icon-subdued);
     opacity: 1;
   }
 
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/input/SelectCommon.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/input/SelectCommon.tsx
index cd22d4c4cc6..66a331362f9 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/input/SelectCommon.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/input/SelectCommon.tsx
@@ -182,7 +182,7 @@ export function selectStyle<
     }),
     placeholder: (base) => ({
       ...base,
-      color: themeContrast('inputPlaceholder')({ theme }),
+      color: 'var(--echoes-color-text-placeholder)',
     }),
   };
 }
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
index 279def52d0e..bf259e4fd0c 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
@@ -20,10 +20,9 @@
 
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { themeColor } from '../../../helpers';
 
 export const Note = styled.span`
-  color: ${themeColor('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 
   ${tw`sw-typo-default`}
 `;
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 628f6b59228..f885de25948 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -112,7 +112,6 @@ export const lightTheme = {
     // Toasts
     toast: COLORS.white,
     toastText: secondary.darker,
-    toastCloseIcon: secondary.dark,
 
     toastErrorBorder: danger.light,
     toastErrorIconBackground: danger.lightest,
@@ -142,7 +141,6 @@ export const lightTheme = {
     dropdownMenuDisabled: COLORS.white,
     dropdownMenuHeader: COLORS.white,
     dropdownMenuDanger: danger.default,
-    dropdownMenuSubTitle: secondary.dark,
 
     // radio
     radio: primary.default,
@@ -264,7 +262,6 @@ export const lightTheme = {
     codeLineHover: secondary.light,
     codeLineHighlighted: COLORS.blueGrey[100],
     codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15],
-    codeLineMetaHover: secondary.dark,
     codeLineDuplication: secondary.default,
     codeLineCovered: COLORS.green[300],
     codeLineUncovered: danger.default,
@@ -275,7 +272,6 @@ export const lightTheme = {
     codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6],
     codeLineEllipsis: COLORS.white,
     codeLineEllipsisHover: secondary.light,
-    codeLineEllipsisHoverContrast: secondary.dark,
     codeLineIssueLocation: [...danger.lighter, 0.15],
     codeLineIssueLocationSelected: [...danger.lighter, 0.5],
     codeLineIssueMessageTooltip: secondary.darker,
@@ -310,14 +306,12 @@ export const lightTheme = {
     inputSuccessFocus: COLORS.yellowGreen[400],
     inputDisabled: secondary.light,
     inputDisabledBorder: secondary.default,
-    inputPlaceholder: secondary.dark,
 
     // required input
     inputRequired: danger.dark,
 
     // tooltip
     tooltipBackground: COLORS.blueGrey[600],
-    tooltipSeparator: secondary.dark,
     tooltipHighlight: secondary.default,
 
     // avatar
@@ -396,7 +390,6 @@ export const lightTheme = {
     bannerIcon: 'transparent',
     bannerIconHover: [...COLORS.red[600], OPACITY_20_PERCENT],
     bannerIconFocus: danger.default,
-    discreetInteractiveIcon: secondary.dark,
     destructiveIcon: 'transparent',
     destructiveIconHover: danger.lightest,
     destructiveIconFocus: danger.default,
@@ -423,7 +416,6 @@ export const lightTheme = {
     iconSuccess: COLORS.green[600],
     iconInfo: COLORS.blue[600],
     iconStatus: COLORS.blueGrey[200],
-    iconStatusResolved: secondary.dark,
     iconNotificationsOn: COLORS.indigo[300],
     iconHelperHint: COLORS.blueGrey[100],
     iconRuleInheritanceOverride: danger.light,
@@ -539,7 +531,6 @@ export const lightTheme = {
     facetItemSelected: COLORS.indigo[50],
     facetItemSelectedHover: COLORS.indigo[100],
     facetItemSelectedBorder: primary.light,
-    facetItemLight: secondary.dark,
     facetItemGraph: secondary.default,
     facetKeyboardHint: COLORS.blueGrey[50],
     facetToggleActive: COLORS.green[500],
@@ -596,7 +587,6 @@ export const lightTheme = {
 
     // page
     pageTitle: COLORS.blueGrey[700],
-    pageContentLight: secondary.dark,
     pageContent: secondary.darker,
     pageContentDark: COLORS.blueGrey[600],
     pageBlock: COLORS.white,
@@ -629,7 +619,6 @@ export const lightTheme = {
     // selection card
     selectionCardHeader: secondary.darker,
     selectionCardDisabled: secondary.light,
-    selectionCardDisabledText: secondary.dark,
     selectionCardBorder: COLORS.blueGrey[100],
     selectionCardBorderHover: COLORS.indigo[200],
     selectionCardBorderSelected: primary.light,
@@ -750,7 +739,6 @@ export const lightTheme = {
 
     // dropdown menu
     dropdownMenu: secondary.darker,
-    dropdownMenuHeader: secondary.dark,
 
     // toggle buttons
     toggle: secondary.darker,
@@ -760,7 +748,6 @@ export const lightTheme = {
     codeLineNewCodeUnderline: COLORS.indigo[500],
     codeLineCoveredUnderline: COLORS.green[700],
     codeLineUncoveredUnderline: COLORS.red[700],
-    codeLineEllipsisHover: secondary.dark,
     codeLineLocationMarker: COLORS.red[900],
     codeLineLocationMarkerSelected: COLORS.red[900],
     codeLineIssueMessageTooltip: COLORS.blueGrey[25],
@@ -801,9 +788,6 @@ export const lightTheme = {
     overviewCardErrorIcon: COLORS.red[500],
     overviewCardSuccessIcon: COLORS.green[500],
 
-    // breadcrumbs
-    breadcrumb: secondary.dark,
-
     // discreet select
     discreetBackground: secondary.darker,
     discreetHover: secondary.darker,
@@ -820,7 +804,6 @@ export const lightTheme = {
     iconSeverityMajor: COLORS.white,
     iconSeverityMinor: COLORS.white,
     iconSeverityInfo: COLORS.white,
-    iconStatusResolved: COLORS.white,
     iconHelperHint: secondary.darker,
     iconHelperHintRaised: COLORS.white,
 
@@ -881,10 +864,6 @@ export const lightTheme = {
     subnavigation: secondary.darker,
     subnavigationExecutionFlow: COLORS.blueGrey[700],
     subnavigationHover: COLORS.blueGrey[700],
-    subnavigationSubheading: secondary.dark,
-
-    // footer
-    footer: secondary.dark,
 
     // page
     pageBlock: secondary.darker,
@@ -900,9 +879,6 @@ export const lightTheme = {
     iconSeverityDisabled: COLORS.white,
     iconTypeDisabled: COLORS.white,
 
-    // selection card
-    selectionCardDisabled: secondary.dark,
-
     // bubble charts
     bubbleDefault: COLORS.blue[500],
 
diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
index cf98fb64906..6636295d126 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
@@ -20,13 +20,7 @@
 
 import styled from '@emotion/styled';
 import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
-import {
-  FlagMessage,
-  LAYOUT_VIEWPORT_MIN_WIDTH,
-  PageContentFontWrapper,
-  themeBorder,
-  themeColor,
-} from 'design-system';
+import { FlagMessage, LAYOUT_VIEWPORT_MIN_WIDTH, themeBorder, themeColor } from 'design-system';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import InstanceMessage from '../../components/common/InstanceMessage';
@@ -50,7 +44,7 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly<GlobalFooter
 
   return (
     <StyledFooter className="sw-p-6" id="footer">
-      <PageContentFontWrapper className="sw-typo-default sw-h-full sw-flex sw-flex-col sw-items-stretch">
+      <div className="sw-typo-default sw-h-full sw-flex sw-flex-col sw-items-stretch">
         {appState?.productionDatabase === false && (
           <FlagMessage className="sw-mb-4" id="evaluation_warning" variant="warning">
             <p>
@@ -121,12 +115,13 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly<GlobalFooter
             )}
           </ul>
         </div>
-      </PageContentFontWrapper>
+      </div>
     </StyledFooter>
   );
 }
 
 const StyledFooter = styled.div`
+  color: var(--echoes-color-text-subdued);
   background-color: ${themeColor('backgroundSecondary')};
   border-top: ${themeBorder('default')};
   box-sizing: border-box;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
index a2b6b3d4596..23d50b687ad 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
@@ -297,7 +297,7 @@ const getTooltip = (
 };
 
 const BubbleChartWrapper = styled.div`
-  color: ${themeColor('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 const YAxis = styled.div`
diff --git a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
index 2fd9f000a79..52fd0c40ce8 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { Badge, BranchIcon, themeBorder, themeContrast } from 'design-system';
+import { Badge, BranchIcon, themeBorder } from 'design-system';
 import * as React from 'react';
 import { ComponentQualifier } from '~sonar-aligned/types/component';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -88,7 +88,7 @@ export default function ComponentBreadcrumbs({
 }
 
 const DivStyled = styled.div`
-  color: ${themeContrast('breadcrumb')};
+  color: var(--echoes-color-text-subdued);
   &:not(:last-child) {
     border-bottom: ${themeBorder('default')};
   }
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
index a9f6ddb40d5..8ac33d714d0 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
@@ -199,6 +199,6 @@ const ComponentName = styled.div`
 `;
 
 const ExpandButton = styled(BareButton)`
-  color: ${themeContrast('subnavigationSubheading')};
+  color: var(--echoes-color-text-subdued);
   border-bottom: ${themeBorder('default', 'currentColor')};
 `;
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
index a3f5c1f9de8..a6be2eef8bf 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
@@ -84,7 +84,7 @@ export default function SubnavigationIssue(props: ConciseIssueProps) {
 }
 
 const IssueInfo = styled.div`
-  color: ${themeContrast('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 
   .active &,
   :hover & {
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
index 2196eb6b01f..5a5f401526d 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
@@ -18,13 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import {
-  BareButton,
-  ExecutionFlowIcon,
-  SubnavigationItem,
-  themeColor,
-  themeContrast,
-} from 'design-system';
+import { BareButton, ExecutionFlowIcon, SubnavigationItem, themeColor } from 'design-system';
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import SingleFileLocationNavigator from '../../../components/locations/SingleFileLocationNavigator';
@@ -122,7 +116,7 @@ const StyledHotspotTitle = styled(BareButton)`
 `;
 
 const StyledHotspotInfo = styled.div`
-  color: ${themeContrast('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 const StyledSeparator = styled.div`
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index e7b2b5f0f6c..f940641a50c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -112,7 +112,7 @@ export class GraphsTooltipsClass extends React.PureComponent<Props> {
           <Table
             columnCount={COLUMNS}
             noHeaderTopBorder
-            style={{ color: themeColor('dropdownMenuSubTitle')({ theme }) }}
+            style={{ color: 'var(--echoes-color-text-subdued)' }}
           >
             {addSeparator && <TableSeparator />}
             {events?.length > 0 && (
diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index 4439c0b6d6e..92ee6ea37cd 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -20,7 +20,7 @@
 import styled from '@emotion/styled';
 import { Button } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
-import { Spinner, themeColor } from 'design-system';
+import { Spinner } from 'design-system';
 import * as React from 'react';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { MetricType } from '~sonar-aligned/types/metrics';
@@ -124,7 +124,7 @@ export default function ListFooter(props: ListFooterProps) {
 }
 
 const StyledDiv = styled.div`
-  color: ${themeColor('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 
   margin-top: 1rem /* 16px */;
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
index d82b792b1e8..4878fca03fb 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
@@ -19,7 +19,7 @@
  */
 import styled from '@emotion/styled';
 import classNames from 'classnames';
-import { Badge, CommentIcon, SeparatorCircleIcon, themeColor } from 'design-system';
+import { Badge, CommentIcon, SeparatorCircleIcon } from 'design-system';
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { isDefined } from '../../../helpers/types';
@@ -163,5 +163,5 @@ export default function IssueMetaBar(props: Readonly<Props>) {
 }
 
 const IssueMetaListItem = styled.li`
-  color: ${themeColor('pageContentLight')};
+  color: var(--echoes-color-text-subdued);
 `;
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
index bf09cda52eb..ee0c157055e 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
@@ -18,13 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import {
-  FlagMessage,
-  PageContentFontWrapper,
-  RadioButton,
-  SelectionCard,
-  themeColor,
-} from 'design-system';
+import { FlagMessage, PageContentFontWrapper, RadioButton, SelectionCard } from 'design-system';
 import { noop } from 'lodash';
 import * as React from 'react';
 import { getNewCodeDefinition } from '../../api/newCodeDefinition';
@@ -188,5 +182,5 @@ export default function NewCodeDefinitionSelector(props: Props) {
 }
 
 const StyledGlobalSettingWrapper = styled.div<{ selected: boolean }>`
-  color: ${({ selected }) => (selected ? 'inherit' : themeColor('selectionCardDisabledText'))};
+  color: ${({ selected }) => (selected ? 'inherit' : 'var(--echoes-color-text-subdued)')};
 `;
diff --git a/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx b/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx
index d2cecf9b809..6dbc7341f9f 100644
--- a/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx
+++ b/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx
@@ -101,7 +101,7 @@ export function IssueSuggestionLine({
 
 const LineNumberStyled = styled.div`
   &:hover {
-    color: ${themeColor('codeLineMetaHover')};
+    color: var(--echoes-color-text-subdued);
   }
 
   &:focus-visible {