SONAR-23136 Accessibility - Replace old blueGrey[300] color code by new Echoes tokens

23 files changed, 77 insertions, 68 deletions

diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx
index dee353256f2..024a4eb8774 100644
--- a/server/sonar-web/design-system/src/components/Accordion.tsx
+++ b/server/sonar-web/design-system/src/components/Accordion.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
@@ -101,7 +102,7 @@ const accordionStyle = (props: ThemedProps) => css`
 
   & > button:disabled,
   & > button:disabled:hover {
-    color: ${themeContrast('buttonDisabled')(props)};
+    color: var(--echoes-color-text-disabled);
     background-color: ${themeColor('buttonDisabled')(props)};
     border: ${themeBorder('default', 'buttonDisabledBorder')(props)};
 
diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
index dff4f3b11e6..90fe7e05539 100644
--- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx
+++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
@@ -381,7 +382,7 @@ const itemStyle = (props: ThemedProps) => css`
 
   &:disabled,
   &.disabled {
-    color: ${themeContrast('dropdownMenuDisabled')(props)};
+    color: var(--echoes-color-text-disabled);
     background-color: ${themeColor('dropdownMenuDisabled')(props)};
     pointer-events: none !important;
 
diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx
index 761cecb2b8a..6f249e84cf2 100644
--- a/server/sonar-web/design-system/src/components/FacetItem.tsx
+++ b/server/sonar-web/design-system/src/components/FacetItem.tsx
@@ -17,11 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import * as React from 'react';
 import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../helpers';
+import { themeBorder, themeColor } from '../helpers';
 import { isDefined } from '../helpers/types';
 import { ButtonProps, ButtonSecondary } from '../sonar-aligned/components/buttons';
 
@@ -142,7 +143,7 @@ const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean
     border-color: transparent;
 
     & span.container span.stat {
-      color: ${themeContrast('buttonDisabled')};
+      color: var(--echoes-color-text-disabled);
     }
 
     &:hover {
diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
index f5bc0f996f1..33265d7d9ff 100644
--- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
+++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
@@ -124,7 +125,7 @@ const buttonIconStyle = (props: ThemedProps & { size: InteractiveIconSize }) =>
 
   &:disabled,
   &:disabled:hover {
-    color: ${themeContrast('buttonDisabled')(props)};
+    color: var(--echoes-color-icon-disabled);
     background-color: var(--background);
 
     ${tw`sw-cursor-not-allowed`}
diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx
index 5da1315a8a4..ed4114e1be3 100644
--- a/server/sonar-web/design-system/src/components/Link.tsx
+++ b/server/sonar-web/design-system/src/components/Link.tsx
@@ -300,7 +300,7 @@ StandoutLink.displayName = 'StandoutLink';
 /** @deprecated Use either Link or LinkStandalone from Echoes instead.
  */
 export const IssueIndicatorLink = styled(BaseLink)`
-  color: ${themeColor('codeLineMeta')};
+  color: var(--echoes-color-text-subdued);
   text-decoration: none;
 
   ${tw`sw-whitespace-nowrap`}
diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
index 35666e032cd..999716d190d 100644
--- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx
+++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
@@ -140,6 +140,6 @@ const NavBarTabLinkWrapper = styled.li`
   & > a.disabled-link.hover {
     ${tw`sw-cursor-default`};
     border-bottom: ${themeBorder('xsActive', 'transparent', 1)};
-    color: ${themeContrast('subnavigationDisabled')};
+    color: var(--echoes-color-text-disabled);
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/Switch.tsx b/server/sonar-web/design-system/src/components/Switch.tsx
index 397338b3d04..23a4b968e4b 100644
--- a/server/sonar-web/design-system/src/components/Switch.tsx
+++ b/server/sonar-web/design-system/src/components/Switch.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import { ForwardedRef, forwardRef } from 'react';
 import tw from 'twin.macro';
@@ -75,7 +76,7 @@ const CheckIconContainer = styled.div<StyledProps>`
   ${tw`sw-flex sw-items-center sw-justify-center`}
   ${tw`sw-w-4 sw-h-4`}
   color: ${({ disabled }) =>
-    disabled ? themeContrast('switchButtonDisabled') : themeContrast('switchButton')};
+    disabled ? 'var(--echoes-color-icon-disabled)' : themeContrast('switchButton')};
   background: ${({ disabled }) =>
     disabled ? themeColor('switchButtonDisabled') : themeColor('switchButton')};
   border: none;
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
index e5eec82049d..1d7d505e179 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -76,7 +76,7 @@ exports[`should highlight code content correctly 1`] = `
 
 .emotion-4:disabled,
 .emotion-4:disabled:hover {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-disabled);
   background-color: rgb(239,242,249);
   border: 1px solid rgb(197,205,223);
   cursor: not-allowed;
@@ -283,7 +283,7 @@ exports[`should show full size when multiline with no editing 1`] = `
 
 .emotion-4:disabled,
 .emotion-4:disabled:hover {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-disabled);
   background-color: rgb(239,242,249);
   border: 1px solid rgb(197,205,223);
   cursor: not-allowed;
@@ -494,7 +494,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
 
 .emotion-4:disabled,
 .emotion-4:disabled:hover {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-disabled);
   background-color: rgb(239,242,249);
   border: 1px solid rgb(197,205,223);
   cursor: not-allowed;
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap
index 902ffbdee49..ac4eb0e769e 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap
@@ -49,7 +49,7 @@ exports[`should render favorite empty 1`] = `
 
 .emotion-1:disabled,
 .emotion-1:disabled:hover {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-icon-disabled);
   background-color: var(--background);
   cursor: not-allowed;
 }
@@ -132,7 +132,7 @@ exports[`should render favorite filled 1`] = `
 
 .emotion-1:disabled,
 .emotion-1:disabled:hover {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-icon-disabled);
   background-color: var(--background);
   cursor: not-allowed;
 }
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap
index 0c1e1918e4f..3be6058daf7 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly when covered 1`] = `
 .emotion-0 {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
   height: 100%;
@@ -46,7 +46,7 @@ exports[`should render correctly when covered 1`] = `
 
 exports[`should render correctly when no data 1`] = `
 .emotion-0 {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
   height: 100%;
@@ -72,7 +72,7 @@ exports[`should render correctly when no data 1`] = `
 
 exports[`should render correctly when partially covered with 5/10 conditions 1`] = `
 .emotion-0 {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
   height: 100%;
@@ -133,7 +133,7 @@ exports[`should render correctly when partially covered with 5/10 conditions 1`]
 
 exports[`should render correctly when partially covered without conditions 1`] = `
 .emotion-0 {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
   height: 100%;
@@ -194,7 +194,7 @@ exports[`should render correctly when partially covered without conditions 1`] =
 
 exports[`should render correctly when uncovered 1`] = `
 .emotion-0 {
-  color: rgb(166,173,194);
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
   height: 100%;
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 bcdf9f50b08..24eb1a2f8a2 100644
--- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx
+++ b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../../helpers';
@@ -33,7 +34,7 @@ export const CodeViewerExpander = styled(BareButton)<CodeViewerExpanderProps>`
   ${tw`sw-w-full`}
   ${tw`sw-box-border`}
 
-  color: ${themeContrast('codeLineEllipsis')};
+  color: var(--echoes-color-text-subdued);
   background-color: ${themeColor('codeLineEllipsis')};
 
   &:hover {
@@ -49,7 +50,7 @@ export const CodeViewerExpander = styled(BareButton)<CodeViewerExpanderProps>`
 `;
 
 export const IssueIndicatorButton = styled(BareButton)`
-  color: ${themeColor('codeLineMeta')};
+  color: var(--echoes-color-text-subdued);
   text-decoration: none;
 
   ${tw`sw-whitespace-nowrap`}
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 a4213b78d44..4eb3f09ec62 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
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../../helpers/theme';
@@ -63,7 +64,7 @@ export const LineStyled = styled.tr`
 LineStyled.displayName = 'LineStyled';
 
 export const LineMeta = styled.td`
-  color: ${themeColor('codeLineMeta')};
+  color: var(--echoes-color-text-subdued);
   background-color: var(--line-background);
   outline: none;
 
@@ -148,15 +149,16 @@ export const UncoveredUnderlineLabel = styled(UnderlineLabel)`
 export const LineCodeEllipsisStyled = styled(BareButton)`
   ${tw`sw-flex sw-items-center sw-gap-2`}
   ${tw`sw-px-2 sw-py-1`}
-${tw`sw-code`}
-${tw`sw-w-full`}
-${tw`sw-box-border`}
-color: ${themeColor('codeLineEllipsisContrast')};
-  background-color: ${themeColor('codeLineEllipsis')};
+  ${tw`sw-code`}
+  ${tw`sw-w-full`}
+  ${tw`sw-box-border`}
 
   border-top: ${themeBorder('default', 'codeLineBorder')};
   border-bottom: ${themeBorder('default', 'codeLineBorder')};
 
+  color: var(--echoes-color-text-subdued);
+  background-color: ${themeColor('codeLineEllipsis')};
+
   &:hover {
     color: ${themeColor('codeLineEllipsisHoverContrast')};
     background-color: ${themeColor('codeLineEllipsisHover')};
diff --git a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
index 34c09a7906e..976037d15bb 100644
--- a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
@@ -29,6 +29,8 @@ interface Props extends IconProps {
   qualifier: string | null | undefined;
 }
 
+const defaultIconfill = 'var(--echoes-color-icon-subdued)';
+
 export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly<Props>) {
   const theme = useTheme();
 
@@ -37,13 +39,13 @@ export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly<Props>
   }
 
   const icon = {
+    app: ApplicationIcon({ fill: fill ?? defaultIconfill, ...iconProps }),
     dir: <DirectoryIcon fill={fill ?? themeColor('iconDirectory')({ theme })} {...iconProps} />,
-    fil: <FileIcon fill={fill ?? themeColor('iconFile')({ theme })} {...iconProps} />,
-    trk: <ProjectIcon fill={fill ?? themeColor('iconProject')({ theme })} {...iconProps} />,
-    uts: <TestFileIcon fill={fill ?? themeColor('iconProject')({ theme })} {...iconProps} />,
-    app: ApplicationIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }),
-    vw: PortfolioIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }),
-    svw: SubPortfolioIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }),
+    fil: <FileIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    svw: SubPortfolioIcon({ fill: fill ?? defaultIconfill, ...iconProps }),
+    trk: <ProjectIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    uts: <TestFileIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    vw: PortfolioIcon({ fill: fill ?? defaultIconfill, ...iconProps }),
   }[qualifier.toLowerCase()];
 
   return icon ?? null;
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx
index bf8c4b08331..65451a5ddd6 100644
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
@@ -26,16 +27,17 @@ export function SoftwareImpactSeverityBlockerIcon({
   ...iconProps
 }: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
+
   const color = disabled
-    ? 'iconSoftwareImpactSeverityDisabled'
-    : 'iconSoftwareImpactSeverityBlocker';
+    ? 'var(--echoes-color-icon-disabled)'
+    : themeColor('iconSoftwareImpactSeverityBlocker')({ theme });
 
   return (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6H4Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
index dd5cd03ed2e..e9734376f44 100644
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
@@ -26,14 +27,17 @@ export function SoftwareImpactSeverityHighIcon({
   ...iconProps
 }: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
-  const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityHigh';
+
+  const color = disabled
+    ? 'var(--echoes-color-icon-disabled)'
+    : themeColor('iconSoftwareImpactSeverityHigh')({ theme });
 
   return (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM4.3983 5.57213C4.31781 5.61338 4.26697 5.6977 4.26697 5.78993V9.48856C4.26697 9.65858 4.43265 9.77626 4.58796 9.71657L6.91569 8.82188C6.96948 8.80121 7.02875 8.80121 7.08253 8.82188L9.41026 9.71657C9.56557 9.77626 9.73125 9.65858 9.73125 9.48856V5.78993C9.73125 5.6977 9.68041 5.61338 9.59992 5.57213L7.10536 4.29371C7.03847 4.25944 6.95975 4.25944 6.89286 4.29371L4.3983 5.57213Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
index ef943283fed..012f9436b69 100644
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
@@ -26,14 +27,17 @@ export function SoftwareImpactSeverityLowIcon({
   ...iconProps
 }: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
-  const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityLow';
+
+  const color = disabled
+    ? 'var(--echoes-color-icon-disabled)'
+    : themeColor('iconSoftwareImpactSeverityLow')({ theme });
 
   return (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM3.94899 6.55761L6.46964 9.07825C6.76253 9.37115 7.2374 9.37115 7.5303 9.07825L10.0509 6.55761C10.3438 6.26472 10.3438 5.78984 10.0509 5.49695C9.75805 5.20406 9.28317 5.20406 8.99028 5.49695L6.99997 7.48727L5.00965 5.49695C4.71676 5.20406 4.24188 5.20406 3.94899 5.49695C3.6561 5.78984 3.6561 6.26472 3.94899 6.55761Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
index 417ff73c76c..bcf632761d1 100644
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
@@ -26,16 +27,17 @@ export function SoftwareImpactSeverityMediumIcon({
   ...iconProps
 }: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
+
   const color = disabled
-    ? 'iconSoftwareImpactSeverityDisabled'
-    : 'iconSoftwareImpactSeverityMedium';
+    ? 'var(--echoes-color-icon-disabled)'
+    : themeColor('iconSoftwareImpactSeverityMedium')({ theme });
 
   return (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM10.051 7.83547L7.53033 5.31482C7.23744 5.02193 6.76256 5.02193 6.46967 5.31482L3.94903 7.83547C3.65613 8.12836 3.65613 8.60324 3.94903 8.89613C4.24192 9.18902 4.71679 9.18902 5.00969 8.89613L7 6.90581L8.99031 8.89613C9.28321 9.18902 9.75808 9.18902 10.051 8.89613C10.3439 8.60324 10.3439 8.12836 10.051 7.83547Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>
diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx
index 4649d739fb3..3ba931e3cbe 100644
--- a/server/sonar-web/design-system/src/components/input/InputField.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputField.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { forwardRef } from 'react';
@@ -117,7 +118,7 @@ const baseStyle = (props: ThemedProps) => css`
 
   &:disabled,
   &:disabled:hover {
-    color: ${themeContrast('inputDisabled')(props)};
+    color: var(--echoes-color-text-disabled);
     background-color: ${themeColor('inputDisabled')(props)};
     border: ${themeBorder('default', 'inputDisabledBorder')(props)};
     outline: none;
diff --git a/server/sonar-web/design-system/src/components/input/RadioButton.tsx b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
index f36d7ec762f..12edde48727 100644
--- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import React from 'react';
@@ -88,7 +89,7 @@ const LabelStyled = styled.label<{ disabled?: boolean }>`
   ${tw`sw-cursor-pointer`}
 
   &.disabled {
-    color: ${themeColor('radioDisabledLabel')};
+    color: var(--echoes-color-text-disabled);
     ${tw`sw-cursor-not-allowed`}
   }
 `;
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 d5f40048bda..86d80230b9c 100644
--- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
+++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { useIntl } from 'react-intl';
@@ -165,6 +166,6 @@ const InputValue = styled.span`
   }
 
   &.is-disabled {
-    color: ${themeContrast('inputDisabled')};
+    color: var(--echoes-color-text-disabled);
   }
 `;
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
index 6d456808a05..3301bd71d36 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
@@ -17,12 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { MouseEvent, ReactNode, forwardRef, useCallback } from 'react';
 import tw from 'twin.macro';
 import { BaseLink, LinkProps } from '../../../components/Link';
-import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme';
+import { themeBorder, themeColor } from '../../../helpers/theme';
 import { ThemedProps } from '../../../types/theme';
 
 type AllowedButtonAttributes = Pick<
@@ -153,7 +154,7 @@ export const buttonStyle = (props: ThemedProps) => css`
 
   &:disabled,
   &:disabled:hover {
-    color: ${themeContrast('buttonDisabled')(props)};
+    color: var(--echoes-color-text-disabled);
     background-color: ${themeColor('buttonDisabled')(props)};
     border: ${themeBorder('default', 'buttonDisabledBorder')(props)};
 
@@ -176,7 +177,7 @@ const BaseButtonLink = styled(BaseLink)`
   ${({ disabled, theme }) =>
     disabled
       ? `&, &:hover, &:focus, &:active {
-        color: ${themeContrast('buttonDisabled')({ theme })};
+        color: var(--echoes-color-text-disabled);
         background-color: ${themeColor('buttonDisabled')({ theme })};
         border: ${themeBorder('default', 'buttonDisabledBorder')({ theme })};
         cursor: not-allowed;
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 a5c8b75b996..cd22d4c4cc6 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
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { useTheme as themeInfo } from '@emotion/react';
 import { RefObject } from 'react';
 import { useIntl } from 'react-intl';
@@ -153,7 +154,7 @@ export function selectStyle<
           : 'none',
       borderRadius: '4px',
       ...(isDisabled && {
-        color: themeContrast('inputDisabled')({ theme }),
+        color: 'var(--echoes-color-text-disabled)',
         background: themeColor('inputDisabled')({ theme }),
         border: themeBorder('default', 'inputDisabledBorder')({ theme }),
         outline: 'none',
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 77a4f2920dc..e57adf7d130 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { OPACITY_20_PERCENT, OPACITY_75_PERCENT } from '../helpers/constants';
 import COLORS from './colors';
 
@@ -76,7 +77,6 @@ export const lightTheme = {
     danger: danger.dark,
 
     // text
-    textDisabled: COLORS.blueGrey[300],
     textSubdued: COLORS.blueGrey[400],
     textSuccess: COLORS.yellowGreen[700],
 
@@ -156,7 +156,6 @@ export const lightTheme = {
     radioDisabled: secondary.default,
     radioDisabledBackground: secondary.light,
     radioDisabledBorder: secondary.default,
-    radioDisabledLabel: COLORS.blueGrey[300],
 
     // switch
     switch: secondary.default,
@@ -178,7 +177,6 @@ export const lightTheme = {
 
     //separator-circle
     separatorCircle: COLORS.blueGrey[200],
-    separatorSlash: COLORS.blueGrey[300],
 
     // rule breakdown table
     breakdownBorder: COLORS.grey[100],
@@ -270,7 +268,6 @@ export const lightTheme = {
     codeLineHover: secondary.light,
     codeLineHighlighted: COLORS.blueGrey[100],
     codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15],
-    codeLineMeta: COLORS.blueGrey[300],
     codeLineMetaHover: secondary.dark,
     codeLineDuplication: secondary.default,
     codeLineCovered: COLORS.green[300],
@@ -281,7 +278,6 @@ export const lightTheme = {
     codeLineIssuePointerBorder: COLORS.white,
     codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6],
     codeLineEllipsis: COLORS.white,
-    codeLineEllipsisContrast: COLORS.blueGrey[300],
     codeLineEllipsisHover: secondary.light,
     codeLineEllipsisHoverContrast: secondary.dark,
     codeLineIssueLocation: [...danger.lighter, 0.15],
@@ -416,16 +412,10 @@ export const lightTheme = {
     iconSoftwareImpactSeverityMedium: COLORS.orange[400],
     iconSoftwareImpactSeverityLow: COLORS.yellow[500],
     iconSoftwareImpactSeverityInfo: COLORS.blue[600],
-    iconSoftwareImpactSeverityDisabled: COLORS.blueGrey[300],
     iconSeverityMajor: danger.light,
     iconSeverityMinor: COLORS.yellowGreen[400],
     iconSeverityInfo: COLORS.blue[400],
-    iconSeverityDisabled: COLORS.blueGrey[300],
-    iconTypeDisabled: COLORS.blueGrey[300],
     iconDirectory: COLORS.orange[300],
-    iconFile: COLORS.blueGrey[300],
-    iconProject: COLORS.blueGrey[300],
-    iconUnitTest: COLORS.blueGrey[300],
     iconFavorite: COLORS.tangerine[400],
     iconCheck: COLORS.green[500],
     iconPositiveUpdate: COLORS.green[300],
@@ -557,7 +547,6 @@ export const lightTheme = {
     facetItemSelected: COLORS.indigo[50],
     facetItemSelectedHover: COLORS.indigo[100],
     facetItemSelectedBorder: primary.light,
-    facetItemDisabled: COLORS.blueGrey[300],
     facetItemLight: secondary.dark,
     facetItemGraph: secondary.default,
     facetKeyboardHint: COLORS.blueGrey[50],
@@ -572,7 +561,6 @@ export const lightTheme = {
     subnavigationBorder: COLORS.grey[100],
     subnavigationSeparator: COLORS.grey[50],
     subnavigationSubheading: COLORS.blueGrey[25],
-    subnavigationDisabled: COLORS.blueGrey[300],
     subnavigationExecutionFlow: COLORS.blueGrey[25],
     subnavigationExecutionFlowBorder: secondary.default,
     subnavigationExecutionFlowSeparator: COLORS.blueGrey[100],
@@ -626,7 +614,6 @@ export const lightTheme = {
     pageBlockBorder: COLORS.blueGrey[100],
 
     // core concepts
-    coreConceptsCloseIcon: COLORS.blueGrey[300],
     coreConceptsTitle: secondary.darker,
     coreConceptsBody: secondary.darker,
     coreConceptsHomeBorder: COLORS.blueGrey[100],
@@ -746,7 +733,6 @@ export const lightTheme = {
     // switch
     switchHover: primary.light,
     switchButton: primary.default,
-    switchButtonDisabled: COLORS.blueGrey[300],
 
     // sidebar
     sidebarBackground: COLORS.blueGrey[200],
@@ -762,7 +748,6 @@ export const lightTheme = {
     bannerMessage: COLORS.red[900],
 
     // buttons
-    buttonDisabled: COLORS.blueGrey[300],
     buttonSecondary: secondary.darker,
 
     // danger buttons
@@ -777,7 +762,6 @@ export const lightTheme = {
 
     // dropdown menu
     dropdownMenu: secondary.darker,
-    dropdownMenuDisabled: COLORS.blueGrey[300],
     dropdownMenuHeader: secondary.dark,
 
     // toggle buttons
@@ -788,7 +772,6 @@ export const lightTheme = {
     codeLineNewCodeUnderline: COLORS.indigo[500],
     codeLineCoveredUnderline: COLORS.green[700],
     codeLineUncoveredUnderline: COLORS.red[700],
-    codeLineEllipsis: COLORS.blueGrey[300],
     codeLineEllipsisHover: secondary.dark,
     codeLineLocationMarker: COLORS.red[900],
     codeLineLocationMarkerSelected: COLORS.red[900],
@@ -805,7 +788,6 @@ export const lightTheme = {
 
     // input field
     inputBackground: secondary.darker,
-    inputDisabled: COLORS.blueGrey[300],
 
     // tooltip
     tooltipBackground: secondary.light,