From 428af7fca058c643f2c163f372a4f48777e07221 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 11 Oct 2024 14:13:05 +0200 Subject: [PATCH] SONAR-23136 Replace usage of secondary.dark with echoes design tokens --- .../design-system/src/components/BarChart.tsx | 2 +- .../src/components/Breadcrumbs.tsx | 3 +-- .../src/components/BubbleChart.tsx | 2 +- .../src/components/DropdownMenu.tsx | 2 +- .../src/components/FacetItem.tsx | 2 +- .../src/components/Histogram.tsx | 2 +- .../components/IlllustredSelectionCard.tsx | 7 +----- .../src/components/InteractiveIcon.tsx | 2 +- .../src/components/KeyboardHint.tsx | 3 +-- .../src/components/SelectionCard.tsx | 4 ++-- .../design-system/src/components/Text.tsx | 4 ++-- .../design-system/src/components/Tooltip.tsx | 2 +- .../src/components/TutorialStep.tsx | 4 ++-- .../src/components/__tests__/Text-test.tsx | 2 +- .../__snapshots__/Histogram-test.tsx.snap | 6 ++--- .../__snapshots__/KeyboardHint-test.tsx.snap | 10 ++++---- .../src/components/buttons/BareButtons.tsx | 5 ++-- .../src/components/code-line/LineNumber.tsx | 3 +-- .../src/components/code-line/LineStyles.tsx | 11 ++++----- .../components/icons/StatusResolvedIcon.tsx | 9 ++++--- .../src/components/input/InputSearch.tsx | 2 +- .../input/SearchSelectDropdownControl.tsx | 2 +- .../subnavigation/SubnavigationSubheading.tsx | 4 ++-- .../components/toast-message/ToastMessage.tsx | 2 +- .../components/input/SelectCommon.tsx | 2 +- .../components/typography/Note.tsx | 3 +-- .../design-system/src/theme/light.ts | 24 ------------------- .../main/js/app/components/GlobalFooter.tsx | 13 ++++------ .../drilldown/BubbleChartView.tsx | 2 +- .../components/ComponentBreadcrumbs.tsx | 4 ++-- .../IssueLocationsCrossFile.tsx | 2 +- .../SubnavigationIssue.tsx | 2 +- .../components/HotspotListItem.tsx | 10 ++------ .../activity-graph/GraphsTooltips.tsx | 2 +- .../js/components/controls/ListFooter.tsx | 4 ++-- .../issue/components/IssueMetaBar.tsx | 4 ++-- .../NewCodeDefinitionSelector.tsx | 10 ++------ .../components/rules/IssueSuggestionLine.tsx | 2 +- 38 files changed, 65 insertions(+), 114 deletions(-) diff --git a/server/sonar-web/design-system/src/components/BarChart.tsx b/server/sonar-web/design-system/src/components/BarChart.tsx index 5b15de8dafe..1601deeea2c 100644 --- a/server/sonar-web/design-system/src/components/BarChart.tsx +++ b/server/sonar-web/design-system/src/components/BarChart.tsx @@ -150,7 +150,7 @@ function Bars( } const BarChartTick = styled.text` - fill: ${themeColor('pageContentLight')}; + fill: var(--echoes-color-text-subdued); text-anchor: middle; `; diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx index 909515ccd40..7444361630d 100644 --- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx +++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx @@ -27,7 +27,6 @@ import { PopupPlacement, PopupZLevel, themeColor, - themeContrast, } from '../helpers'; import { useResizeObserver } from '../hooks/useResizeObserver'; import { Dropdown } from './Dropdown'; @@ -181,6 +180,6 @@ const BreadcrumbWrapper = styled.nav` ${tw`sw-truncate`} ${tw`sw-typo-default`} - color: ${themeContrast('breadcrumb')}; + color: var(--echoes-color-text-subdued); background-color: ${themeColor('breadcrumb')}; `; diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index af074f5bb47..8dbe5e64226 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -438,6 +438,6 @@ const BubbleChartGrid = styled.line` const BubbleChartTick = styled.text` ${tw`sw-typo-default`} ${tw`sw-select-none`} - fill: ${themeColor('pageContentLight')}; + fill: var(--echoes-color-text-subdued); text-anchor: var(--align); `; diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx index 90fe7e05539..e3be15c7a1a 100644 --- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx +++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx @@ -276,7 +276,7 @@ export const ItemHeaderHighlight = styled.span` */ export const ItemHeader = styled(UnstyledItemHeader)` background-color: ${themeColor('dropdownMenuHeader')}; - color: ${themeContrast('dropdownMenuHeader')}; + color: var(--echoes-color-text-subdued); ${tw`sw-py-2 sw-px-3`} `; diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx index 6f249e84cf2..84ce1aa0920 100644 --- a/server/sonar-web/design-system/src/components/FacetItem.tsx +++ b/server/sonar-web/design-system/src/components/FacetItem.tsx @@ -134,7 +134,7 @@ const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean } & span.stat { - color: ${themeColor('facetItemLight')}; + color: var(--echoes-color-text-subdued); } } diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx index 1aba9da6317..12d70dfa433 100644 --- a/server/sonar-web/design-system/src/components/Histogram.tsx +++ b/server/sonar-web/design-system/src/components/Histogram.tsx @@ -139,7 +139,7 @@ export class Histogram extends React.PureComponent { const HistogramTick = styled.text` ${tw`sw-typo-default`} - fill: ${themeColor('pageContentLight')}; + fill: var(--echoes-color-text-subdued); ${TooltipWrapper} & { fill: ${themeContrast('primary')}; diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx index 72895b5662c..9114842a6c0 100644 --- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx +++ b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx @@ -22,6 +22,7 @@ import classNames from 'classnames'; import { ReactNode } from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor } from '../helpers/theme'; +import { Note } from '../sonar-aligned'; import { BareButton } from '../sonar-aligned/components/buttons'; interface Props { @@ -45,12 +46,6 @@ export function IllustratedSelectionCard(props: Props) { ); } -const Note = styled.span` - color: ${themeColor('pageContentLight')}; - - ${tw`sw-typo-default`} -`; - const ImageContainer = styled.div` min-height: 116px; flex: 1; diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx index 33265d7d9ff..292af594cc4 100644 --- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx +++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx @@ -181,7 +181,7 @@ export const InteractiveIcon = styled(InteractiveIconBase)` * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. */ export const DiscreetInteractiveIcon = styled(InteractiveIcon)` - --color: ${themeColor('discreetInteractiveIcon')}; + --color: var(--echoes-color-icon-subdued); `; /** diff --git a/server/sonar-web/design-system/src/components/KeyboardHint.tsx b/server/sonar-web/design-system/src/components/KeyboardHint.tsx index f1d86f1cfbd..935ce9275b7 100644 --- a/server/sonar-web/design-system/src/components/KeyboardHint.tsx +++ b/server/sonar-web/design-system/src/components/KeyboardHint.tsx @@ -19,7 +19,6 @@ */ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeContrast } from '../helpers'; import { Key } from '../helpers/keyboard'; import { KeyboardHintKeys } from './KeyboardHintKeys'; @@ -45,7 +44,7 @@ export function KeyboardHint({ title, command, className }: Props) { const Body = styled.div` ${tw`sw-flex sw-gap-2 sw-justify-center`} flex-wrap: wrap; - color: ${themeContrast('pageContentLight')}; + color: var(--echoes-color-text-subdued); `; function isMacOS() { diff --git a/server/sonar-web/design-system/src/components/SelectionCard.tsx b/server/sonar-web/design-system/src/components/SelectionCard.tsx index f81c23b68f2..74f7e24f024 100644 --- a/server/sonar-web/design-system/src/components/SelectionCard.tsx +++ b/server/sonar-web/design-system/src/components/SelectionCard.tsx @@ -141,7 +141,7 @@ const StyledButton = styled.button` ${tw`sw-cursor-not-allowed`} background-color: ${themeColor('selectionCardDisabled')}; - color: ${themeColor('selectionCardDisabledText')}; + color: var(--echoes-color-text-disabled); border: ${themeBorder('default', 'selectionCardBorderDisabled')}; } `; @@ -178,7 +178,7 @@ const StyledLabel = styled.label` cursor: inherit; .disabled & { - color: ${themeContrast('selectionCardDisabled')}; + color: var(--echoes-color-text-disabled); } `; diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx index f986be03389..71275eb2237 100644 --- a/server/sonar-web/design-system/src/components/Text.tsx +++ b/server/sonar-web/design-system/src/components/Text.tsx @@ -125,7 +125,7 @@ const StyledText = styled.span` */ export const StyledMutedText = styled(StyledText)` ${tw`sw-font-regular`}; - color: ${themeColor('dropdownMenuSubTitle')}; + color: var(--echoes-color-text-subdued); `; /** @deprecated Use Heading from Echoes instead. @@ -154,7 +154,7 @@ export const TextSubdued = styled.span` /** @deprecated Use Text (with `isSubdued` prop) from Echoes instead. */ export const LightLabel = styled.span` - color: ${themeColor('pageContentLight')}; + color: var(--echoes-color-text-subdued); `; /** @deprecated Use Label or Text (with `isHighlighted` prop) from Echoes instead. diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx index 58862d1a5d0..124fafaafdf 100644 --- a/server/sonar-web/design-system/src/components/Tooltip.tsx +++ b/server/sonar-web/design-system/src/components/Tooltip.tsx @@ -547,7 +547,7 @@ export const TooltipWrapperInner = styled.div` ${tw`sw-break-words`}; hr { - background-color: ${themeColor('tooltipSeparator')}; + background-color: var(--echoes-color-text-subdued); ${tw`sw-mx-4`}; } diff --git a/server/sonar-web/design-system/src/components/TutorialStep.tsx b/server/sonar-web/design-system/src/components/TutorialStep.tsx index 12d050e8890..b54f815b53e 100644 --- a/server/sonar-web/design-system/src/components/TutorialStep.tsx +++ b/server/sonar-web/design-system/src/components/TutorialStep.tsx @@ -19,7 +19,7 @@ */ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeBorder, themeColor, themeContrast } from '../helpers/theme'; +import { themeBorder, themeColor } from '../helpers/theme'; interface Props { children: React.ReactNode; @@ -69,7 +69,7 @@ const Step = styled.li<{ stepNumber?: number }>` ${tw`sw-mt-10`} &::before { - color: ${themeContrast('pageContentLight')}; + color: var(--echoes-color-text-subdued); content: counter(li); ${tw`sw-inline-block`} diff --git a/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx index fc7c652ec26..c9562e9e5f0 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Text-test.tsx @@ -35,6 +35,6 @@ it('should render TextMuted', () => { render(); expect(screen.getByText('Hi')).toHaveStyle({ - color: 'rgb(106, 117, 144)', + color: 'var(--echoes-color-text-subdued)', }); }); diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap index 8e31fe80996..e3653d1d3e2 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap @@ -54,7 +54,7 @@ exports[`renders correctly with yValues 1`] = ` .emotion-2 { font: var(--echoes-typography-text-default-regular); - fill: rgb(106,117,144); + fill: var(--echoes-color-text-subdued); } .e1vbniy52 .emotion-2 { @@ -140,7 +140,7 @@ exports[`renders correctly with yValues and yTicks 1`] = ` .emotion-2 { font: var(--echoes-typography-text-default-regular); - fill: rgb(106,117,144); + fill: var(--echoes-color-text-subdued); } .e1vbniy52 .emotion-2 { @@ -256,7 +256,7 @@ exports[`renders correctly with yValues, yTicks, and yTooltips 1`] = ` .emotion-2 { font: var(--echoes-typography-text-default-regular); - fill: rgb(106,117,144); + fill: var(--echoes-color-text-subdued); } .e1vbniy52 .emotion-2 { diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap index a45b1d68bd8..bc08e8388ec 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap @@ -15,7 +15,7 @@ exports[`renders on mac 1`] = ` -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: rgb(106,117,144); + color: var(--echoes-color-text-subdued); } .emotion-2 { @@ -75,7 +75,7 @@ exports[`renders on windows 1`] = ` -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: rgb(106,117,144); + color: var(--echoes-color-text-subdued); } .emotion-2 { @@ -135,7 +135,7 @@ exports[`renders with command 1`] = ` -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: rgb(106,117,144); + color: var(--echoes-color-text-subdued); } .emotion-2 { @@ -190,7 +190,7 @@ exports[`renders with title 1`] = ` -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: rgb(106,117,144); + color: var(--echoes-color-text-subdued); } .emotion-2 { @@ -250,7 +250,7 @@ exports[`renders without title 1`] = ` -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - color: rgb(106,117,144); + color: var(--echoes-color-text-subdued); } .emotion-2 { 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 24eb1a2f8a2..546b71710e7 100644 --- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx +++ b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeBorder, themeColor, themeContrast } from '../../helpers'; +import { themeBorder, themeColor } from '../../helpers'; import { BareButton } from '../../sonar-aligned/components/buttons'; interface CodeViewerExpanderProps { @@ -38,7 +38,6 @@ export const CodeViewerExpander = styled(BareButton)` background-color: ${themeColor('codeLineEllipsis')}; &:hover { - color: ${themeContrast('codeLineEllipsisHover')}; background-color: ${themeColor('codeLineEllipsisHover')}; } @@ -76,6 +75,6 @@ export const LineSCMStyled = styled(BareButton)` ${tw`sw-w-full sw-h-full`} &:hover { - color: ${themeColor('codeLineMetaHover')}; + color: var(--echoes-color-text-subdued); } `; diff --git a/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx b/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx index c03f26ca4de..93d98fb276c 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineNumber.tsx @@ -21,7 +21,6 @@ import styled from '@emotion/styled'; import { memo, useState } from 'react'; import tw from 'twin.macro'; import { PopupPlacement, PopupZLevel } from '../../helpers/positioning'; -import { themeColor } from '../../helpers/theme'; import { DropdownToggler } from '../DropdownToggler'; import { LineMeta } from './LineStyles'; @@ -90,6 +89,6 @@ const LineNumberStyled = styled.div` ${tw`sw-cursor-pointer`} &:hover { - color: ${themeColor('codeLineMetaHover')}; + color: var(--echoes-color-text-bold); } `; 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 4eb3f09ec62..f1c99be7e9b 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 @@ -38,12 +38,12 @@ export const LineSCMStyledDiv = styled.div` ${tw`sw-pr-2`} ${tw`sw-truncate`} -${tw`sw-whitespace-nowrap`} -${tw`sw-cursor-pointer`} -${tw`sw-w-full sw-h-full`} + ${tw`sw-whitespace-nowrap`} + ${tw`sw-cursor-pointer`} + ${tw`sw-w-full sw-h-full`} -&:hover { - color: ${themeColor('codeLineMetaHover')}; + &:hover { + color: var(--echoes-color-text-bold); } `; @@ -160,7 +160,6 @@ export const LineCodeEllipsisStyled = styled(BareButton)` background-color: ${themeColor('codeLineEllipsis')}; &:hover { - color: ${themeColor('codeLineEllipsisHoverContrast')}; background-color: ${themeColor('codeLineEllipsisHover')}; } `; diff --git a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx index 01cd28daf01..5a9f9478c96 100644 --- a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx @@ -19,7 +19,7 @@ */ import { useTheme } from '@emotion/react'; -import { themeColor, themeContrast } from '../../helpers/theme'; +import { themeColor } from '../../helpers/theme'; import { CustomIcon, IconProps } from './Icon'; /** @deprecated Use IconStatusResolved from Echoes instead, if possible. @@ -28,7 +28,10 @@ import { CustomIcon, IconProps } from './Icon'; * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation * warning when revisiting old code, but all new code should use the icons from Echoes. */ -export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps }: IconProps) { +export function StatusResolvedIcon({ + fill = 'var(--echoes-color-icon-subdued)', + ...iconProps +}: IconProps) { const theme = useTheme(); return ( @@ -37,7 +40,7 @@ export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps } diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx index 5acd32994b6..9a3acc81743 100644 --- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx +++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx @@ -260,7 +260,7 @@ export const StyledInteractiveIcon = styled(InteractiveIcon)` `; export const StyledNote = styled.span` - color: ${themeColor('inputPlaceholder')}; + color: var(--echoes-color-text-placeholder); top: calc(1px + ${theme('inset.2')}); ${tw`sw-absolute`} 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 86d80230b9c..bfb355172ea 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx @@ -162,7 +162,7 @@ const InputValue = styled.span` ${tw`sw-truncate`}; &.is-placeholder { - color: ${themeColor('inputPlaceholder')}; + color: var(--echoes-color-text-placeholder); } &.is-disabled { diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx index 6b4ebff6bd3..7f7cd5bacde 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx @@ -19,7 +19,7 @@ */ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeColor, themeContrast } from '../../helpers/theme'; +import { themeColor } from '../../helpers/theme'; export const SubnavigationSubheading = styled.div` ${tw`sw-flex`} @@ -28,7 +28,7 @@ export const SubnavigationSubheading = styled.div` ${tw`sw-px-4 sw-pt-6 sw-pb-2`} ${tw`sw-w-full`} - color: ${themeContrast('subnavigationSubheading')}; + color: var(--echoes-color-text-subdued); background-color: ${themeColor('subnavigationSubheading')}; `; SubnavigationSubheading.displayName = 'SubnavigationSubheading'; diff --git a/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx b/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx index f739139de41..50de44f5277 100644 --- a/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx +++ b/server/sonar-web/design-system/src/components/toast-message/ToastMessage.tsx @@ -70,7 +70,7 @@ const StyledToastContainer = styled(WrappedToastContainer)` .Toastify__close-button { ${tw`sw-pt-3 sw-pr-3`} - color: ${themeColor('toastCloseIcon')}; + color: var(--echoes-color-icon-subdued); opacity: 1; } 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 cd22d4c4cc6..66a331362f9 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 @@ -182,7 +182,7 @@ export function selectStyle< }), placeholder: (base) => ({ ...base, - color: themeContrast('inputPlaceholder')({ theme }), + color: 'var(--echoes-color-text-placeholder)', }), }; } diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx index 279def52d0e..bf259e4fd0c 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx @@ -20,10 +20,9 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeColor } from '../../../helpers'; export const Note = styled.span` - color: ${themeColor('pageContentLight')}; + color: var(--echoes-color-text-subdued); ${tw`sw-typo-default`} `; diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 628f6b59228..f885de25948 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -112,7 +112,6 @@ export const lightTheme = { // Toasts toast: COLORS.white, toastText: secondary.darker, - toastCloseIcon: secondary.dark, toastErrorBorder: danger.light, toastErrorIconBackground: danger.lightest, @@ -142,7 +141,6 @@ export const lightTheme = { dropdownMenuDisabled: COLORS.white, dropdownMenuHeader: COLORS.white, dropdownMenuDanger: danger.default, - dropdownMenuSubTitle: secondary.dark, // radio radio: primary.default, @@ -264,7 +262,6 @@ export const lightTheme = { codeLineHover: secondary.light, codeLineHighlighted: COLORS.blueGrey[100], codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15], - codeLineMetaHover: secondary.dark, codeLineDuplication: secondary.default, codeLineCovered: COLORS.green[300], codeLineUncovered: danger.default, @@ -275,7 +272,6 @@ export const lightTheme = { codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6], codeLineEllipsis: COLORS.white, codeLineEllipsisHover: secondary.light, - codeLineEllipsisHoverContrast: secondary.dark, codeLineIssueLocation: [...danger.lighter, 0.15], codeLineIssueLocationSelected: [...danger.lighter, 0.5], codeLineIssueMessageTooltip: secondary.darker, @@ -310,14 +306,12 @@ export const lightTheme = { inputSuccessFocus: COLORS.yellowGreen[400], inputDisabled: secondary.light, inputDisabledBorder: secondary.default, - inputPlaceholder: secondary.dark, // required input inputRequired: danger.dark, // tooltip tooltipBackground: COLORS.blueGrey[600], - tooltipSeparator: secondary.dark, tooltipHighlight: secondary.default, // avatar @@ -396,7 +390,6 @@ export const lightTheme = { bannerIcon: 'transparent', bannerIconHover: [...COLORS.red[600], OPACITY_20_PERCENT], bannerIconFocus: danger.default, - discreetInteractiveIcon: secondary.dark, destructiveIcon: 'transparent', destructiveIconHover: danger.lightest, destructiveIconFocus: danger.default, @@ -423,7 +416,6 @@ export const lightTheme = { iconSuccess: COLORS.green[600], iconInfo: COLORS.blue[600], iconStatus: COLORS.blueGrey[200], - iconStatusResolved: secondary.dark, iconNotificationsOn: COLORS.indigo[300], iconHelperHint: COLORS.blueGrey[100], iconRuleInheritanceOverride: danger.light, @@ -539,7 +531,6 @@ export const lightTheme = { facetItemSelected: COLORS.indigo[50], facetItemSelectedHover: COLORS.indigo[100], facetItemSelectedBorder: primary.light, - facetItemLight: secondary.dark, facetItemGraph: secondary.default, facetKeyboardHint: COLORS.blueGrey[50], facetToggleActive: COLORS.green[500], @@ -596,7 +587,6 @@ export const lightTheme = { // page pageTitle: COLORS.blueGrey[700], - pageContentLight: secondary.dark, pageContent: secondary.darker, pageContentDark: COLORS.blueGrey[600], pageBlock: COLORS.white, @@ -629,7 +619,6 @@ export const lightTheme = { // selection card selectionCardHeader: secondary.darker, selectionCardDisabled: secondary.light, - selectionCardDisabledText: secondary.dark, selectionCardBorder: COLORS.blueGrey[100], selectionCardBorderHover: COLORS.indigo[200], selectionCardBorderSelected: primary.light, @@ -750,7 +739,6 @@ export const lightTheme = { // dropdown menu dropdownMenu: secondary.darker, - dropdownMenuHeader: secondary.dark, // toggle buttons toggle: secondary.darker, @@ -760,7 +748,6 @@ export const lightTheme = { codeLineNewCodeUnderline: COLORS.indigo[500], codeLineCoveredUnderline: COLORS.green[700], codeLineUncoveredUnderline: COLORS.red[700], - codeLineEllipsisHover: secondary.dark, codeLineLocationMarker: COLORS.red[900], codeLineLocationMarkerSelected: COLORS.red[900], codeLineIssueMessageTooltip: COLORS.blueGrey[25], @@ -801,9 +788,6 @@ export const lightTheme = { overviewCardErrorIcon: COLORS.red[500], overviewCardSuccessIcon: COLORS.green[500], - // breadcrumbs - breadcrumb: secondary.dark, - // discreet select discreetBackground: secondary.darker, discreetHover: secondary.darker, @@ -820,7 +804,6 @@ export const lightTheme = { iconSeverityMajor: COLORS.white, iconSeverityMinor: COLORS.white, iconSeverityInfo: COLORS.white, - iconStatusResolved: COLORS.white, iconHelperHint: secondary.darker, iconHelperHintRaised: COLORS.white, @@ -881,10 +864,6 @@ export const lightTheme = { subnavigation: secondary.darker, subnavigationExecutionFlow: COLORS.blueGrey[700], subnavigationHover: COLORS.blueGrey[700], - subnavigationSubheading: secondary.dark, - - // footer - footer: secondary.dark, // page pageBlock: secondary.darker, @@ -900,9 +879,6 @@ export const lightTheme = { iconSeverityDisabled: COLORS.white, iconTypeDisabled: COLORS.white, - // selection card - selectionCardDisabled: secondary.dark, - // bubble charts bubbleDefault: COLORS.blue[500], diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx index cf98fb64906..6636295d126 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx @@ -20,13 +20,7 @@ import styled from '@emotion/styled'; import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react'; -import { - FlagMessage, - LAYOUT_VIEWPORT_MIN_WIDTH, - PageContentFontWrapper, - themeBorder, - themeColor, -} from 'design-system'; +import { FlagMessage, LAYOUT_VIEWPORT_MIN_WIDTH, themeBorder, themeColor } from 'design-system'; import React from 'react'; import { useIntl } from 'react-intl'; import InstanceMessage from '../../components/common/InstanceMessage'; @@ -50,7 +44,7 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly - +
{appState?.productionDatabase === false && (

@@ -121,12 +115,13 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly

-
+ ); } const StyledFooter = styled.div` + color: var(--echoes-color-text-subdued); background-color: ${themeColor('backgroundSecondary')}; border-top: ${themeBorder('default')}; box-sizing: border-box; diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx index a2b6b3d4596..23d50b687ad 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx @@ -297,7 +297,7 @@ const getTooltip = ( }; const BubbleChartWrapper = styled.div` - color: ${themeColor('pageContentLight')}; + color: var(--echoes-color-text-subdued); `; const YAxis = styled.div` diff --git a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx index 2fd9f000a79..52fd0c40ce8 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { Badge, BranchIcon, themeBorder, themeContrast } from 'design-system'; +import { Badge, BranchIcon, themeBorder } from 'design-system'; import * as React from 'react'; import { ComponentQualifier } from '~sonar-aligned/types/component'; import { translate, translateWithParameters } from '../../../helpers/l10n'; @@ -88,7 +88,7 @@ export default function ComponentBreadcrumbs({ } const DivStyled = styled.div` - color: ${themeContrast('breadcrumb')}; + color: var(--echoes-color-text-subdued); &:not(:last-child) { border-bottom: ${themeBorder('default')}; } diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx index a9f6ddb40d5..8ac33d714d0 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx @@ -199,6 +199,6 @@ const ComponentName = styled.div` `; const ExpandButton = styled(BareButton)` - color: ${themeContrast('subnavigationSubheading')}; + color: var(--echoes-color-text-subdued); border-bottom: ${themeBorder('default', 'currentColor')}; `; diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx index a3f5c1f9de8..a6be2eef8bf 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx @@ -84,7 +84,7 @@ export default function SubnavigationIssue(props: ConciseIssueProps) { } const IssueInfo = styled.div` - color: ${themeContrast('pageContentLight')}; + color: var(--echoes-color-text-subdued); .active &, :hover & { diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx index 2196eb6b01f..5a5f401526d 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx @@ -18,13 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { - BareButton, - ExecutionFlowIcon, - SubnavigationItem, - themeColor, - themeContrast, -} from 'design-system'; +import { BareButton, ExecutionFlowIcon, SubnavigationItem, themeColor } from 'design-system'; import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import SingleFileLocationNavigator from '../../../components/locations/SingleFileLocationNavigator'; @@ -122,7 +116,7 @@ const StyledHotspotTitle = styled(BareButton)` `; const StyledHotspotInfo = styled.div` - color: ${themeContrast('pageContentLight')}; + color: var(--echoes-color-text-subdued); `; const StyledSeparator = styled.div` diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx index e7b2b5f0f6c..f940641a50c 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx @@ -112,7 +112,7 @@ export class GraphsTooltipsClass extends React.PureComponent { {addSeparator && } {events?.length > 0 && ( diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx index 4439c0b6d6e..92ee6ea37cd 100644 --- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx +++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import { Button } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { Spinner, themeColor } from 'design-system'; +import { Spinner } from 'design-system'; import * as React from 'react'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; import { MetricType } from '~sonar-aligned/types/metrics'; @@ -124,7 +124,7 @@ export default function ListFooter(props: ListFooterProps) { } const StyledDiv = styled.div` - color: ${themeColor('pageContentLight')}; + color: var(--echoes-color-text-subdued); margin-top: 1rem /* 16px */; `; diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx index d82b792b1e8..4878fca03fb 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx @@ -19,7 +19,7 @@ */ import styled from '@emotion/styled'; import classNames from 'classnames'; -import { Badge, CommentIcon, SeparatorCircleIcon, themeColor } from 'design-system'; +import { Badge, CommentIcon, SeparatorCircleIcon } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { isDefined } from '../../../helpers/types'; @@ -163,5 +163,5 @@ export default function IssueMetaBar(props: Readonly) { } const IssueMetaListItem = styled.li` - color: ${themeColor('pageContentLight')}; + color: var(--echoes-color-text-subdued); `; diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx index bf09cda52eb..ee0c157055e 100644 --- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx +++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx @@ -18,13 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { - FlagMessage, - PageContentFontWrapper, - RadioButton, - SelectionCard, - themeColor, -} from 'design-system'; +import { FlagMessage, PageContentFontWrapper, RadioButton, SelectionCard } from 'design-system'; import { noop } from 'lodash'; import * as React from 'react'; import { getNewCodeDefinition } from '../../api/newCodeDefinition'; @@ -188,5 +182,5 @@ export default function NewCodeDefinitionSelector(props: Props) { } const StyledGlobalSettingWrapper = styled.div<{ selected: boolean }>` - color: ${({ selected }) => (selected ? 'inherit' : themeColor('selectionCardDisabledText'))}; + color: ${({ selected }) => (selected ? 'inherit' : 'var(--echoes-color-text-subdued)')}; `; diff --git a/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx b/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx index d2cecf9b809..6dbc7341f9f 100644 --- a/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx +++ b/server/sonar-web/src/main/js/components/rules/IssueSuggestionLine.tsx @@ -101,7 +101,7 @@ export function IssueSuggestionLine({ const LineNumberStyled = styled.div` &:hover { - color: ${themeColor('codeLineMetaHover')}; + color: var(--echoes-color-text-subdued); } &:focus-visible { -- 2.39.5