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

14 files changed, 28 insertions, 46 deletions

diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx
index acf9a366e1f..d392798c9df 100644
--- a/server/sonar-web/design-system/src/components/FacetBox.tsx
+++ b/server/sonar-web/design-system/src/components/FacetBox.tsx
@@ -214,7 +214,7 @@ const HeaderTitle = styled.span<{
   ${tw`sw-typo-semibold`};
 
   color: ${({ disabled }) =>
-    disabled ? themeColor('facetHeaderDisabled') : themeColor('facetHeader')};
+    disabled ? 'var(--echoes-color-text-disabled)' : themeColor('facetHeader')};
 
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'inherit')};
 `;
diff --git a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
index 7ebad7a3529..85a7863d68b 100644
--- a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
+++ b/server/sonar-web/design-system/src/components/NewCodeLegend.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 tw from 'twin.macro';
@@ -36,10 +37,10 @@ const NewCodeLegendText = styled.span`
   ${tw`sw-align-middle`}
   ${tw`sw-typo-default`}
   ${tw`sw-ml-2`}
-  color: ${themeColor('graphCursorLineColor')};
+  color: var(--echoes-color-text-subdued);
 `;
 
-export function NewCodeLegend(props: { className?: string; text: string }) {
+export function NewCodeLegend(props: Readonly<{ className?: string; text: string }>) {
   const { className, text } = props;
 
   return (
diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx
index 25df5241e02..f986be03389 100644
--- a/server/sonar-web/design-system/src/components/Text.tsx
+++ b/server/sonar-web/design-system/src/components/Text.tsx
@@ -148,7 +148,7 @@ const StyledTextSuccess = styled(StyledText)`
  */
 export const TextSubdued = styled.span`
   ${tw`sw-font-regular`};
-  color: ${themeColor('textSubdued')};
+  color: var(--echoes-color-text-subdued);
 `;
 
 /** @deprecated Use Text (with `isSubdued` prop) from Echoes instead.
diff --git a/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx b/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
index 90ad071ca2b..08b33e90c88 100644
--- a/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
@@ -40,10 +40,10 @@ export function HelperHintIcon({ raised, ...iconProps }: Props) {
       {raised ? (
         // eslint-disable-next-line react/jsx-fragments
         <Fragment>
-          <circle cx="8" cy="8" fill={themeColor('iconHelperHintRaised')({ theme })} r="7" />
+          <circle cx="8" cy="8" fill="var(--echoes-color-icon-subdued)" r="7" />
           <path
             d="M6.82812 10.2301H8.44318V10.0852C8.4517 9.25426 8.75 8.86648 9.4233 8.46165C10.2202 7.98864 10.7401 7.36222 10.7401 6.3608C10.7401 4.86932 9.53835 4 7.84659 4C6.29972 4 5.03835 4.80966 5 6.5142H6.73864C6.7642 5.8196 7.27983 5.44886 7.83807 5.44886C8.41335 5.44886 8.87784 5.83239 8.87784 6.42472C8.87784 6.98295 8.47301 7.35369 7.94886 7.68608C7.23295 8.13778 6.83239 8.59375 6.82812 10.0852V10.2301ZM7.66761 12.9574C8.21307 12.9574 8.68608 12.5014 8.69034 11.9347C8.68608 11.3764 8.21307 10.9205 7.66761 10.9205C7.10511 10.9205 6.64063 11.3764 6.64489 11.9347C6.64063 12.5014 7.10511 12.9574 7.66761 12.9574Z"
-            fill={themeContrast('iconHelperHintRaised')({ theme })}
+            fill="var(--echoes-color-icon-subdued)"
           />
         </Fragment>
       ) : (
diff --git a/server/sonar-web/design-system/src/components/icons/InProgressVisual.tsx b/server/sonar-web/design-system/src/components/icons/InProgressVisual.tsx
index f3853570fcb..8ed51369992 100644
--- a/server/sonar-web/design-system/src/components/icons/InProgressVisual.tsx
+++ b/server/sonar-web/design-system/src/components/icons/InProgressVisual.tsx
@@ -41,7 +41,7 @@ export function InProgressVisual() {
       <path
         clipRule="evenodd"
         d="M20 157a7 7 0 0 1-7-7V61a7 7 0 0 1 7-7h28.5v6H20a1 1 0 0 0-1 1v16.88h63v6.24H19V150a1 1 0 0 0 1 1h128a1 1 0 0 0 1-1V61a1 1 0 0 0-1-1h-11v-6h11a7 7 0 0 1 7 7v89a7 7 0 0 1-7 7H20Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
diff --git a/server/sonar-web/design-system/src/components/icons/OverviewQGNotComputedIcon.tsx b/server/sonar-web/design-system/src/components/icons/OverviewQGNotComputedIcon.tsx
index aa7ba5e6b8c..66ff62e433e 100644
--- a/server/sonar-web/design-system/src/components/icons/OverviewQGNotComputedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/OverviewQGNotComputedIcon.tsx
@@ -67,13 +67,13 @@ export function OverviewQGNotComputedIcon({ className }: Readonly<Props>) {
       <path
         clipRule="evenodd"
         d="M88 67.5746H21V61.3297H88V67.5746Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
         clipRule="evenodd"
         d="M18 133C18 136.866 21.134 140 25 140H153C156.866 140 160 136.866 160 133V78H154V133C154 133.552 153.552 134 153 134H25C24.4477 134 24 133.552 24 133V44C24 43.4477 24.4477 43 25 43H72V37H25C21.134 37 18 40.134 18 44V133Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
diff --git a/server/sonar-web/design-system/src/components/icons/OverviewQGPassedIcon.tsx b/server/sonar-web/design-system/src/components/icons/OverviewQGPassedIcon.tsx
index 33c8150d414..5d2adba3cd7 100644
--- a/server/sonar-web/design-system/src/components/icons/OverviewQGPassedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/OverviewQGPassedIcon.tsx
@@ -45,14 +45,10 @@ export function OverviewQGPassedIcon({ className }: { className?: string }) {
         d="M55 43.5982L70 43.5982L70 34.9911L55 34.9911L55 43.5982Z"
         fill={themeColor('illustrationSecondary')({ theme })}
       />
-      <path
-        d="M15 52.2054L87 52.2054"
-        stroke={themeColor('illustrationOutline')({ theme })}
-        strokeWidth="6"
-      />
+      <path d="M15 52.2054L87 52.2054" stroke="var(--echoes-color-icon-subdued)" strokeWidth="6" />
       <path
         d="M87 26.3839H19C16.7909 26.3839 15 28.1748 15 30.3839V126.746C15 128.955 16.7909 130.746 19 130.746H147C149.209 130.746 151 128.955 151 126.746V62.9643M136 26.3839H147C149.209 26.3839 151 28.1748 151 30.3839V42.5223"
-        stroke={themeColor('illustrationOutline')({ theme })}
+        stroke="var(--echoes-color-icon-subdued)"
         strokeWidth="6"
       />
       <path
diff --git a/server/sonar-web/design-system/src/components/icons/TrendIcon.tsx b/server/sonar-web/design-system/src/components/icons/TrendIcon.tsx
index 331c0b513d9..d6e67dec2b6 100644
--- a/server/sonar-web/design-system/src/components/icons/TrendIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/TrendIcon.tsx
@@ -25,7 +25,7 @@ import {
   IconProps,
 } from '@sonarsource/echoes-react';
 import { themeColor } from '../../helpers/theme';
-import { ThemeColors } from '../../types';
+import { CSSColor, ThemeColors } from '../../types';
 
 export const enum TrendDirection {
   Down = 'down',
@@ -71,11 +71,11 @@ export function TrendIcon(props: Readonly<Props>) {
   );
 }
 
-const ICON_COLORS: Record<TrendType, ThemeColors> = {
+const ICON_COLORS: Record<TrendType, ThemeColors | CSSColor> = {
   [TrendType.Positive]: 'iconTrendPositive',
   [TrendType.Negative]: 'iconTrendNegative',
   [TrendType.Neutral]: 'iconTrendNeutral',
-  [TrendType.Disabled]: 'iconTrendDisabled',
+  [TrendType.Disabled]: 'var(--echoes-color-icon-disabled)',
 };
 
 const TrendIconWrapper = styled.span<{
diff --git a/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx b/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx
index 89eb7240cf6..045f90d4590 100644
--- a/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx
+++ b/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx
@@ -47,13 +47,13 @@ export function FishVisual({ className }: Props) {
         <path
           clipRule="evenodd"
           d="M26.371 19.118C13.431 33.093 5.526 51.785 5.526 72.328c0 25.124 11.826 47.485 30.228 61.828 13.287 10.356 29.995 16.525 48.152 16.525 43.288 0 78.379-35.08 78.379-78.353 0-20.543-7.905-39.235-20.845-53.21l3.691-3.416c13.767 14.868 22.184 34.767 22.184 56.626 0 46.051-37.344 83.382-83.41 83.382-19.315 0-37.104-6.567-51.244-17.588C13.091 122.868.496 99.068.496 72.328c0-21.86 8.418-41.758 22.184-56.626l3.691 3.416Z"
-          fill={themeColor('illustrationOutline')({ theme })}
+          fill="var(--echoes-color-icon-subdued)"
           fillRule="evenodd"
         />
         <path
           clipRule="evenodd"
           d="m27.073 19.091-.338.364C13.877 33.343 6.023 51.916 6.023 72.328c0 24.964 11.75 47.184 30.036 61.436 13.203 10.291 29.805 16.42 47.847 16.42 43.014 0 77.883-34.858 77.883-77.856 0-20.413-7.855-38.986-20.713-52.873l-.337-.364L145.158 15l.337.364c13.849 14.956 22.317 34.975 22.317 56.964 0 46.325-37.567 83.879-83.906 83.879-19.43 0-37.326-6.607-51.55-17.693C12.669 123.17 0 99.227 0 72.328c0-21.99 8.468-42.008 22.316-56.964l.337-.364 4.42 4.091Zm-.702.027-.013.015C13.426 33.105 5.526 51.791 5.526 72.328c0 25.124 11.826 47.485 30.228 61.828 13.287 10.356 29.995 16.525 48.152 16.525 43.288 0 78.379-35.08 78.379-78.353 0-20.536-7.9-39.223-20.832-53.196a.18.18 0 0 0-.013-.014l3.691-3.416.014.015.322.35c13.568 14.828 21.848 34.58 21.848 56.26 0 46.052-37.344 83.383-83.41 83.383-19.315 0-37.104-6.567-51.244-17.588C13.091 122.868.496 99.068.496 72.328c0-21.68 8.28-41.433 21.848-56.261l.32-.347.016-.018 3.691 3.416Z"
-          fill={themeColor('illustrationOutline')({ theme })}
+          fill="var(--echoes-color-icon-subdued)"
           fillRule="evenodd"
         />
         <path
@@ -81,7 +81,7 @@ export function FishVisual({ className }: Props) {
         <path
           clipRule="evenodd"
           d="M115.047 107.823a1.78 1.78 0 1 1-3.301-1.332 1.78 1.78 0 0 1 3.301 1.332Zm-1.879 4.479a5.15 5.15 0 0 0 2.154-9.918 5.15 5.15 0 0 0-5.285 8.676l-1.572 3.898-8.012-3.231-1.26 3.123 8.012 3.232-6.841 16.96c-6.675-3.451-9.804-11.129-8.727-13.8l-2.842-1.147c-2.348 5.824 2.488 12.284 6.155 17.183 1.94 2.591 3.552 4.745 3.601 6.137.995-.964 3.62-1.374 6.785-1.869 6.029-.943 14.017-2.191 16.422-8.155l-2.842-1.146c-1.125 2.79-8.357 5.916-15.41 4.013l6.822-16.916 7.526 3.035 1.26-3.124-7.526-3.035 1.58-3.916Zm8.945 16.385-5.849 2.487 8.336 3.363-2.487-5.85ZM91.8 116.461l2.487 5.849-8.336-3.362 5.85-2.487Z"
-          fill={themeColor('illustrationOutline')({ theme })}
+          fill="var(--echoes-color-icon-subdued)"
           fillRule="evenodd"
         />
       </g>
diff --git a/server/sonar-web/design-system/src/components/visual-components/FlagVisual.tsx b/server/sonar-web/design-system/src/components/visual-components/FlagVisual.tsx
index 1c4cda42755..fdf6064bfba 100644
--- a/server/sonar-web/design-system/src/components/visual-components/FlagVisual.tsx
+++ b/server/sonar-web/design-system/src/components/visual-components/FlagVisual.tsx
@@ -42,7 +42,7 @@ export function FlagVisual({ className }: Props) {
       <path
         clipRule="evenodd"
         d="M18.34 162h38.32c-2.83-6.1-9.95-11-19.16-11s-16.33 4.9-19.16 11Zm-7.12 3.01C12.92 153.72 24.03 145 37.5 145s24.59 8.72 26.28 20.01c.24 1.64-1.12 2.99-2.78 2.99H14c-1.66 0-3.02-1.35-2.78-2.99Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
@@ -52,19 +52,19 @@ export function FlagVisual({ className }: Props) {
       <path
         clipRule="evenodd"
         d="M37.5 27a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Zm0 6a12.5 12.5 0 1 0 0-25 12.5 12.5 0 0 0 0 25Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
         clipRule="evenodd"
         d="M40 33.41h-5V144.6h5V33.4ZM29 27v124h17V27H29Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
         clipRule="evenodd"
         d="M40 37h41.11v6H46v55h89.42a1 1 0 0 0 .88-1.46l-11.84-22.81a7 7 0 0 1 0-6.46l11.84-22.8a1 1 0 0 0-.88-1.47h-6.3v-6h6.3a7 7 0 0 1 6.2 10.23l-11.83 22.8a1 1 0 0 0 0 .93l11.84 22.81a7 7 0 0 1-6.21 10.23H40V37Z"
-        fill={themeColor('illustrationOutline')({ theme })}
+        fill="var(--echoes-color-icon-subdued)"
         fillRule="evenodd"
       />
       <path
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index e57adf7d130..628f6b59228 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -77,7 +77,6 @@ export const lightTheme = {
     danger: danger.dark,
 
     // text
-    textSubdued: COLORS.blueGrey[400],
     textSuccess: COLORS.yellowGreen[700],
 
     //Project list card
@@ -171,8 +170,6 @@ export const lightTheme = {
     sidebarBackground: COLORS.blueGrey[700],
     sidebarItemActive: COLORS.blueGrey[800],
     sidebarBorder: COLORS.blueGrey[500],
-    sidebarTextDisabled: COLORS.blueGrey[400],
-    sidebarIcon: COLORS.blueGrey[400],
     sidebarActiveIcon: COLORS.blueGrey[200],
 
     //separator-circle
@@ -258,7 +255,6 @@ export const lightTheme = {
     // code viewer
     codeLine: COLORS.white,
     codeLineBorder: COLORS.grey[100],
-    codeLineIssueIndicator: COLORS.blueGrey[400], // Should be blueGrey[300], to be changed once code viewer is reworked
     codeLineLocationMarker: COLORS.red[200],
     codeLineLocationMarkerSelected: danger.lighter,
     codeLineLocationSelected: COLORS.blueGrey[100],
@@ -366,7 +362,6 @@ export const lightTheme = {
     tabBorder: primary.light,
 
     // tabs
-    tab: COLORS.blueGrey[400],
     tabSelected: primary.default,
     tabHover: COLORS.blueGrey[50],
 
@@ -423,7 +418,6 @@ export const lightTheme = {
     iconTrendPositive: COLORS.green[400],
     iconTrendNegative: COLORS.red[400],
     iconTrendNeutral: COLORS.blue[600],
-    iconTrendDisabled: COLORS.blueGrey[400],
     iconError: danger.default,
     iconWarning: COLORS.yellow[600],
     iconSuccess: COLORS.green[600],
@@ -432,7 +426,6 @@ export const lightTheme = {
     iconStatusResolved: secondary.dark,
     iconNotificationsOn: COLORS.indigo[300],
     iconHelperHint: COLORS.blueGrey[100],
-    iconHelperHintRaised: COLORS.blueGrey[400],
     iconRuleInheritanceOverride: danger.light,
 
     // numbered list
@@ -543,7 +536,6 @@ export const lightTheme = {
 
     // facets
     facetHeader: COLORS.blueGrey[600],
-    facetHeaderDisabled: COLORS.blueGrey[400],
     facetItemSelected: COLORS.indigo[50],
     facetItemSelectedHover: COLORS.indigo[100],
     facetItemSelectedBorder: primary.light,
@@ -578,7 +570,6 @@ export const lightTheme = {
     // overview
     backgroundPromotedSection: secondary.light,
     overviewCardDefaultIcon: secondary.light,
-    iconOverviewIssue: COLORS.blueGrey[400],
     overviewCardWarningIcon: COLORS.yellow[50],
     overviewCardErrorIcon: COLORS.red[100],
     overviewCardSuccessIcon: COLORS.green[200],
@@ -598,11 +589,9 @@ export const lightTheme = {
     'graphLineColor.4': COLORS.blue[700],
     'graphLineColor.5': COLORS.blue[300],
     graphGridColor: COLORS.grey[50],
-    graphCursorLineColor: COLORS.blueGrey[400],
     newCodeHighlight: COLORS.indigo[300],
     graphZoomBackgroundColor: COLORS.blueGrey[25],
     graphZoomBorderColor: COLORS.blueGrey[100],
-    graphZoomHandleColor: COLORS.blueGrey[400],
     graphLegendBorder: secondary.darker,
 
     // page
@@ -682,7 +671,6 @@ export const lightTheme = {
     activityCommentPipe: COLORS.tangerine[200],
 
     // illustrations
-    illustrationOutline: COLORS.blueGrey[400],
     illustrationInlineBorder: COLORS.blueGrey[100],
     illustrationPrimary: COLORS.indigo[400],
     illustrationSecondary: COLORS.indigo[200],
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacetFooter.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacetFooter.tsx
index 05f264ca572..f2c81c45e32 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacetFooter.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacetFooter.tsx
@@ -17,8 +17,9 @@
  * 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 { DiscreetLink, Theme, themeColor } from 'design-system';
+import { DiscreetLink, Theme } from 'design-system';
 import * as React from 'react';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { MetricType } from '~sonar-aligned/types/metrics';
@@ -49,7 +50,7 @@ export function ListStyleFacetFooter({
   return (
     <div
       className="sw-mb-2 sw-mt-2 sw-text-center"
-      style={{ color: themeColor('graphCursorLineColor')({ theme }) }}
+      style={{ color: 'var(--echoes-color-text-subdued)' }}
     >
       {translateWithParameters('x_show', formatMeasure(nbShown, MetricType.Integer))}
 
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index 2cea7573ddc..d5d4361c547 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -27,7 +27,6 @@ import {
   InteractiveIcon,
   Theme,
   themeBorder,
-  themeColor,
 } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -71,10 +70,7 @@ export function GraphsLegendItem({
       ) : (
         <ChartLegend className="sw-mr-2" index={index} />
       )}
-      <span
-        className="sw-typo-default"
-        style={{ color: themeColor('graphCursorLineColor')({ theme }) }}
-      >
+      <span className="sw-typo-default" style={{ color: 'var(--echoes-color-text-subdued)' }}>
         {name}
       </span>
       {isDeprecated && (
diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
index 60067547e98..e7d1d7711cf 100644
--- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
@@ -275,7 +275,7 @@ export class ZoomTimeLine extends React.PureComponent<Props, State> {
           y={options.yDim[1]}
         />
         <DraggableIcon
-          fill="graphZoomHandleColor"
+          fill="var(--echoes-color-icon-subdued)"
           x={options.direction === 'right' ? -7 : -9}
           y={16}
         />
@@ -386,7 +386,7 @@ const ZoomHighlight = styled.rect`
 const ZoomHighlightHandle = styled.rect`
   cursor: ew-resize;
   fill-opacity: 1;
-  fill: ${themeColor('graphZoomHandleColor')};
+  fill: var(--echoes-color-icon-subdued);
   stroke: none;
 `;