From ee37f5daf38a9d4a7a7825299f878c4cbc1589c1 Mon Sep 17 00:00:00 2001 From: David Cho-Lerat Date: Fri, 11 Oct 2024 14:44:05 +0200 Subject: [PATCH] SONAR-23136 Accessibility - Replace old blueGrey[400] color code by new Echoes tokens --- .../design-system/src/components/FacetBox.tsx | 2 +- .../design-system/src/components/NewCodeLegend.tsx | 5 +++-- .../sonar-web/design-system/src/components/Text.tsx | 2 +- .../src/components/icons/HelperHintIcon.tsx | 4 ++-- .../src/components/icons/InProgressVisual.tsx | 2 +- .../components/icons/OverviewQGNotComputedIcon.tsx | 4 ++-- .../src/components/icons/OverviewQGPassedIcon.tsx | 8 ++------ .../design-system/src/components/icons/TrendIcon.tsx | 6 +++--- .../src/components/visual-components/FishVisual.tsx | 6 +++--- .../src/components/visual-components/FlagVisual.tsx | 8 ++++---- server/sonar-web/design-system/src/theme/light.ts | 12 ------------ .../js/apps/issues/sidebar/ListStyleFacetFooter.tsx | 5 +++-- .../components/activity-graph/GraphsLegendItem.tsx | 6 +----- .../src/main/js/components/charts/ZoomTimeLine.tsx | 4 ++-- 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 - + ) : ( 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() { ) { - + ) { ); } -const ICON_COLORS: Record = { +const ICON_COLORS: Record = { [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) { 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) { {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({ ) : ( )} - + {name} {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 { y={options.yDim[1]} /> @@ -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; `; -- 2.39.5