From: David Cho-Lerat Date: Fri, 11 Oct 2024 12:44:05 +0000 (+0200) Subject: SONAR-23136 Accessibility - Replace old blueGrey[400] color code by new Echoes tokens X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ee37f5daf38a9d4a7a7825299f878c4cbc1589c1;p=sonarqube.git 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 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; `;