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

diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx
index acf9a366e1f2419a415c3ab0539a886f8ec06352..d392798c9dfe5e92a1bb7abc4e4ea99322cb996b 100644 (file)
--- 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 7ebad7a35295b226092473be59919c7cd6e6156d..85a7863d68b7513170118e4f71d42fdadbc152e2 100644 (file)
--- 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 25df5241e02bbbb20c8bf8d8a7d45c7ebc66b4dc..f986be0338913771be6d0f3c0e97972434bd25d5 100644 (file)
--- 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 90ad071ca2bdb7ce403d4e659d1de3c952bd726a..08b33e90c883a17a7a285849780ff76d37b67dbc 100644 (file)
--- 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 f3853570fcb9f3fcaf653aa1a380e13ad8402898..8ed513699923633b347af41be50ac9a63a072db0 100644 (file)
--- 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 aa7ba5e6b8c43f63683878e59d2ccb7565b76c32..66ff62e433ee5277c983049140b9110076f59dbc 100644 (file)
--- 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 33c8150d4144ccc194dec5d07138ec0504014601..5d2adba3cd7400bc107a42aa93193702c7d93315 100644 (file)
--- 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 331c0b513d96aa119870cce58a31af648721219e..d6e67dec2b6887b632f7c1808c580b6ab2803d89 100644 (file)
--- 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 89eb7240cf661898c4de35d2ea61f793d8e16e9b..045f90d459018758e2a5c1b56c5057e20722dca1 100644 (file)
--- 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 1c4cda42755a1221793a0ce56e9c623acfe68df7..fdf6064bfbaf3e0507e95273e5da134ecf0e0041 100644 (file)
--- 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 e57adf7d1309d134ede4cf2a683ac17ca4ba4057..628f6b59228ee457de2ce596a88398ecc8d7e3f9 100644 (file)
--- 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 05f264ca5724b542ea58566b479c440703a3a536..f2c81c45e32bac90665478fdc049da7eedb07a91 100644 (file)
--- 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 2cea7573ddc2511c7b6c39ca6d269ff054ba8ef6..d5d4361c547edaeb5064ffe9e6b5bd6b2a292d5b 100644 (file)
--- 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 60067547e98b8d3a70224d35b29b398fa4010ff5..e7d1d7711cf05ff891b71a20a26b8b7a59494401 100644 (file)
--- 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;
 `;