From 440979d214213927ce1509fd8145edd3de5b0a0f Mon Sep 17 00:00:00 2001 From: David Cho-Lerat Date: Fri, 11 Oct 2024 09:31:53 +0200 Subject: [PATCH] SONAR-23136 Accessibility - Replace old blueGrey[300] color code by new Echoes tokens --- .../src/components/Accordion.tsx | 3 ++- .../src/components/DropdownMenu.tsx | 3 ++- .../src/components/FacetItem.tsx | 5 +++-- .../src/components/InteractiveIcon.tsx | 3 ++- .../design-system/src/components/Link.tsx | 2 +- .../src/components/NavBarTabs.tsx | 2 +- .../design-system/src/components/Switch.tsx | 3 ++- .../__snapshots__/CodeSnippet-test.tsx.snap | 6 +++--- .../FavoriteButton-test.tsx.snap | 4 ++-- .../__snapshots__/LineCoverage-test.tsx.snap | 10 +++++----- .../src/components/buttons/BareButtons.tsx | 5 +++-- .../src/components/code-line/LineStyles.tsx | 14 +++++++------ .../src/components/icons/QualifierIcon.tsx | 14 +++++++------ .../SoftwareImpactSeverityBlockerIcon.tsx | 8 +++++--- .../icons/SoftwareImpactSeverityHighIcon.tsx | 8 ++++++-- .../icons/SoftwareImpactSeverityLowIcon.tsx | 8 ++++++-- .../SoftwareImpactSeverityMediumIcon.tsx | 8 +++++--- .../src/components/input/InputField.tsx | 3 ++- .../src/components/input/RadioButton.tsx | 3 ++- .../input/SearchSelectDropdownControl.tsx | 3 ++- .../components/buttons/Button.tsx | 7 ++++--- .../components/input/SelectCommon.tsx | 3 ++- .../design-system/src/theme/light.ts | 20 +------------------ .../components/RuleDetailsHeaderActions.tsx | 12 +++++------ .../coding-rules/components/RuleListItem.tsx | 2 +- .../issue/components/IssueSeverity.tsx | 4 ++-- .../components/issue/components/IssueType.tsx | 7 ++++++- .../src/main/js/components/ui/popups.css | 3 ++- 28 files changed, 94 insertions(+), 79 deletions(-) diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx index dee353256f2..024a4eb8774 100644 --- a/server/sonar-web/design-system/src/components/Accordion.tsx +++ b/server/sonar-web/design-system/src/components/Accordion.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 { css } from '@emotion/react'; import styled from '@emotion/styled'; import classNames from 'classnames'; @@ -101,7 +102,7 @@ const accordionStyle = (props: ThemedProps) => css` & > button:disabled, & > button:disabled:hover { - color: ${themeContrast('buttonDisabled')(props)}; + color: var(--echoes-color-text-disabled); background-color: ${themeColor('buttonDisabled')(props)}; border: ${themeBorder('default', 'buttonDisabledBorder')(props)}; diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx index dff4f3b11e6..90fe7e05539 100644 --- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx +++ b/server/sonar-web/design-system/src/components/DropdownMenu.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 { css } from '@emotion/react'; import styled from '@emotion/styled'; import classNames from 'classnames'; @@ -381,7 +382,7 @@ const itemStyle = (props: ThemedProps) => css` &:disabled, &.disabled { - color: ${themeContrast('dropdownMenuDisabled')(props)}; + color: var(--echoes-color-text-disabled); background-color: ${themeColor('dropdownMenuDisabled')(props)}; pointer-events: none !important; diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx index 761cecb2b8a..6f249e84cf2 100644 --- a/server/sonar-web/design-system/src/components/FacetItem.tsx +++ b/server/sonar-web/design-system/src/components/FacetItem.tsx @@ -17,11 +17,12 @@ * 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 * as React from 'react'; import tw from 'twin.macro'; -import { themeBorder, themeColor, themeContrast } from '../helpers'; +import { themeBorder, themeColor } from '../helpers'; import { isDefined } from '../helpers/types'; import { ButtonProps, ButtonSecondary } from '../sonar-aligned/components/buttons'; @@ -142,7 +143,7 @@ const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean border-color: transparent; & span.container span.stat { - color: ${themeContrast('buttonDisabled')}; + color: var(--echoes-color-text-disabled); } &:hover { diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx index f5bc0f996f1..33265d7d9ff 100644 --- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx +++ b/server/sonar-web/design-system/src/components/InteractiveIcon.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 { css } from '@emotion/react'; import styled from '@emotion/styled'; import classNames from 'classnames'; @@ -124,7 +125,7 @@ const buttonIconStyle = (props: ThemedProps & { size: InteractiveIconSize }) => &:disabled, &:disabled:hover { - color: ${themeContrast('buttonDisabled')(props)}; + color: var(--echoes-color-icon-disabled); background-color: var(--background); ${tw`sw-cursor-not-allowed`} diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx index 5da1315a8a4..ed4114e1be3 100644 --- a/server/sonar-web/design-system/src/components/Link.tsx +++ b/server/sonar-web/design-system/src/components/Link.tsx @@ -300,7 +300,7 @@ StandoutLink.displayName = 'StandoutLink'; /** @deprecated Use either Link or LinkStandalone from Echoes instead. */ export const IssueIndicatorLink = styled(BaseLink)` - color: ${themeColor('codeLineMeta')}; + color: var(--echoes-color-text-subdued); text-decoration: none; ${tw`sw-whitespace-nowrap`} diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx index 35666e032cd..999716d190d 100644 --- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx +++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx @@ -140,6 +140,6 @@ const NavBarTabLinkWrapper = styled.li` & > a.disabled-link.hover { ${tw`sw-cursor-default`}; border-bottom: ${themeBorder('xsActive', 'transparent', 1)}; - color: ${themeContrast('subnavigationDisabled')}; + color: var(--echoes-color-text-disabled); } `; diff --git a/server/sonar-web/design-system/src/components/Switch.tsx b/server/sonar-web/design-system/src/components/Switch.tsx index 397338b3d04..23a4b968e4b 100644 --- a/server/sonar-web/design-system/src/components/Switch.tsx +++ b/server/sonar-web/design-system/src/components/Switch.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 { ForwardedRef, forwardRef } from 'react'; import tw from 'twin.macro'; @@ -75,7 +76,7 @@ const CheckIconContainer = styled.div` ${tw`sw-flex sw-items-center sw-justify-center`} ${tw`sw-w-4 sw-h-4`} color: ${({ disabled }) => - disabled ? themeContrast('switchButtonDisabled') : themeContrast('switchButton')}; + disabled ? 'var(--echoes-color-icon-disabled)' : themeContrast('switchButton')}; background: ${({ disabled }) => disabled ? themeColor('switchButtonDisabled') : themeColor('switchButton')}; border: none; diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap index e5eec82049d..1d7d505e179 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap @@ -76,7 +76,7 @@ exports[`should highlight code content correctly 1`] = ` .emotion-4:disabled, .emotion-4:disabled:hover { - color: rgb(166,173,194); + color: var(--echoes-color-text-disabled); background-color: rgb(239,242,249); border: 1px solid rgb(197,205,223); cursor: not-allowed; @@ -283,7 +283,7 @@ exports[`should show full size when multiline with no editing 1`] = ` .emotion-4:disabled, .emotion-4:disabled:hover { - color: rgb(166,173,194); + color: var(--echoes-color-text-disabled); background-color: rgb(239,242,249); border: 1px solid rgb(197,205,223); cursor: not-allowed; @@ -494,7 +494,7 @@ exports[`should show reduced size when single line with no editing 1`] = ` .emotion-4:disabled, .emotion-4:disabled:hover { - color: rgb(166,173,194); + color: var(--echoes-color-text-disabled); background-color: rgb(239,242,249); border: 1px solid rgb(197,205,223); cursor: not-allowed; diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap index 902ffbdee49..ac4eb0e769e 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/FavoriteButton-test.tsx.snap @@ -49,7 +49,7 @@ exports[`should render favorite empty 1`] = ` .emotion-1:disabled, .emotion-1:disabled:hover { - color: rgb(166,173,194); + color: var(--echoes-color-icon-disabled); background-color: var(--background); cursor: not-allowed; } @@ -132,7 +132,7 @@ exports[`should render favorite filled 1`] = ` .emotion-1:disabled, .emotion-1:disabled:hover { - color: rgb(166,173,194); + color: var(--echoes-color-icon-disabled); background-color: var(--background); cursor: not-allowed; } diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap index 0c1e1918e4f..3be6058daf7 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineCoverage-test.tsx.snap @@ -2,7 +2,7 @@ exports[`should render correctly when covered 1`] = ` .emotion-0 { - color: rgb(166,173,194); + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; height: 100%; @@ -46,7 +46,7 @@ exports[`should render correctly when covered 1`] = ` exports[`should render correctly when no data 1`] = ` .emotion-0 { - color: rgb(166,173,194); + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; height: 100%; @@ -72,7 +72,7 @@ exports[`should render correctly when no data 1`] = ` exports[`should render correctly when partially covered with 5/10 conditions 1`] = ` .emotion-0 { - color: rgb(166,173,194); + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; height: 100%; @@ -133,7 +133,7 @@ exports[`should render correctly when partially covered with 5/10 conditions 1`] exports[`should render correctly when partially covered without conditions 1`] = ` .emotion-0 { - color: rgb(166,173,194); + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; height: 100%; @@ -194,7 +194,7 @@ exports[`should render correctly when partially covered without conditions 1`] = exports[`should render correctly when uncovered 1`] = ` .emotion-0 { - color: rgb(166,173,194); + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; height: 100%; 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 bcdf9f50b08..24eb1a2f8a2 100644 --- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx +++ b/server/sonar-web/design-system/src/components/buttons/BareButtons.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 tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../../helpers'; @@ -33,7 +34,7 @@ export const CodeViewerExpander = styled(BareButton)` ${tw`sw-w-full`} ${tw`sw-box-border`} - color: ${themeContrast('codeLineEllipsis')}; + color: var(--echoes-color-text-subdued); background-color: ${themeColor('codeLineEllipsis')}; &:hover { @@ -49,7 +50,7 @@ export const CodeViewerExpander = styled(BareButton)` `; export const IssueIndicatorButton = styled(BareButton)` - color: ${themeColor('codeLineMeta')}; + color: var(--echoes-color-text-subdued); text-decoration: none; ${tw`sw-whitespace-nowrap`} 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 a4213b78d44..4eb3f09ec62 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 @@ -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 tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../../helpers/theme'; @@ -63,7 +64,7 @@ export const LineStyled = styled.tr` LineStyled.displayName = 'LineStyled'; export const LineMeta = styled.td` - color: ${themeColor('codeLineMeta')}; + color: var(--echoes-color-text-subdued); background-color: var(--line-background); outline: none; @@ -148,15 +149,16 @@ export const UncoveredUnderlineLabel = styled(UnderlineLabel)` export const LineCodeEllipsisStyled = styled(BareButton)` ${tw`sw-flex sw-items-center sw-gap-2`} ${tw`sw-px-2 sw-py-1`} -${tw`sw-code`} -${tw`sw-w-full`} -${tw`sw-box-border`} -color: ${themeColor('codeLineEllipsisContrast')}; - background-color: ${themeColor('codeLineEllipsis')}; + ${tw`sw-code`} + ${tw`sw-w-full`} + ${tw`sw-box-border`} border-top: ${themeBorder('default', 'codeLineBorder')}; border-bottom: ${themeBorder('default', 'codeLineBorder')}; + color: var(--echoes-color-text-subdued); + background-color: ${themeColor('codeLineEllipsis')}; + &:hover { color: ${themeColor('codeLineEllipsisHoverContrast')}; background-color: ${themeColor('codeLineEllipsisHover')}; diff --git a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx index 34c09a7906e..976037d15bb 100644 --- a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx @@ -29,6 +29,8 @@ interface Props extends IconProps { qualifier: string | null | undefined; } +const defaultIconfill = 'var(--echoes-color-icon-subdued)'; + export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly) { const theme = useTheme(); @@ -37,13 +39,13 @@ export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly } const icon = { + app: ApplicationIcon({ fill: fill ?? defaultIconfill, ...iconProps }), dir: , - fil: , - trk: , - uts: , - app: ApplicationIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }), - vw: PortfolioIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }), - svw: SubPortfolioIcon({ fill: fill ?? themeColor('iconProject')({ theme }), ...iconProps }), + fil: , + svw: SubPortfolioIcon({ fill: fill ?? defaultIconfill, ...iconProps }), + trk: , + uts: , + vw: PortfolioIcon({ fill: fill ?? defaultIconfill, ...iconProps }), }[qualifier.toLowerCase()]; return icon ?? null; diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx index bf8c4b08331..65451a5ddd6 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityBlockerIcon.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 { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; @@ -26,16 +27,17 @@ export function SoftwareImpactSeverityBlockerIcon({ ...iconProps }: IconProps & { disabled?: boolean }) { const theme = useTheme(); + const color = disabled - ? 'iconSoftwareImpactSeverityDisabled' - : 'iconSoftwareImpactSeverityBlocker'; + ? 'var(--echoes-color-icon-disabled)' + : themeColor('iconSoftwareImpactSeverityBlocker')({ theme }); return ( diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx index dd5cd03ed2e..e9734376f44 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.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 { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; @@ -26,14 +27,17 @@ export function SoftwareImpactSeverityHighIcon({ ...iconProps }: IconProps & { disabled?: boolean }) { const theme = useTheme(); - const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityHigh'; + + const color = disabled + ? 'var(--echoes-color-icon-disabled)' + : themeColor('iconSoftwareImpactSeverityHigh')({ theme }); return ( diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx index ef943283fed..012f9436b69 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.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 { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; @@ -26,14 +27,17 @@ export function SoftwareImpactSeverityLowIcon({ ...iconProps }: IconProps & { disabled?: boolean }) { const theme = useTheme(); - const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityLow'; + + const color = disabled + ? 'var(--echoes-color-icon-disabled)' + : themeColor('iconSoftwareImpactSeverityLow')({ theme }); return ( diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx index 417ff73c76c..bcf632761d1 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.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 { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; @@ -26,16 +27,17 @@ export function SoftwareImpactSeverityMediumIcon({ ...iconProps }: IconProps & { disabled?: boolean }) { const theme = useTheme(); + const color = disabled - ? 'iconSoftwareImpactSeverityDisabled' - : 'iconSoftwareImpactSeverityMedium'; + ? 'var(--echoes-color-icon-disabled)' + : themeColor('iconSoftwareImpactSeverityMedium')({ theme }); return ( diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx index 4649d739fb3..3ba931e3cbe 100644 --- a/server/sonar-web/design-system/src/components/input/InputField.tsx +++ b/server/sonar-web/design-system/src/components/input/InputField.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 { css } from '@emotion/react'; import styled from '@emotion/styled'; import { forwardRef } from 'react'; @@ -117,7 +118,7 @@ const baseStyle = (props: ThemedProps) => css` &:disabled, &:disabled:hover { - color: ${themeContrast('inputDisabled')(props)}; + color: var(--echoes-color-text-disabled); background-color: ${themeColor('inputDisabled')(props)}; border: ${themeBorder('default', 'inputDisabledBorder')(props)}; outline: none; diff --git a/server/sonar-web/design-system/src/components/input/RadioButton.tsx b/server/sonar-web/design-system/src/components/input/RadioButton.tsx index f36d7ec762f..12edde48727 100644 --- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx +++ b/server/sonar-web/design-system/src/components/input/RadioButton.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 React from 'react'; @@ -88,7 +89,7 @@ const LabelStyled = styled.label<{ disabled?: boolean }>` ${tw`sw-cursor-pointer`} &.disabled { - color: ${themeColor('radioDisabledLabel')}; + color: var(--echoes-color-text-disabled); ${tw`sw-cursor-not-allowed`} } `; 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 d5f40048bda..86d80230b9c 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.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 { useIntl } from 'react-intl'; @@ -165,6 +166,6 @@ const InputValue = styled.span` } &.is-disabled { - color: ${themeContrast('inputDisabled')}; + color: var(--echoes-color-text-disabled); } `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx index 6d456808a05..3301bd71d36 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx @@ -17,12 +17,13 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + import { css } from '@emotion/react'; import styled from '@emotion/styled'; import React, { MouseEvent, ReactNode, forwardRef, useCallback } from 'react'; import tw from 'twin.macro'; import { BaseLink, LinkProps } from '../../../components/Link'; -import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme'; +import { themeBorder, themeColor } from '../../../helpers/theme'; import { ThemedProps } from '../../../types/theme'; type AllowedButtonAttributes = Pick< @@ -153,7 +154,7 @@ export const buttonStyle = (props: ThemedProps) => css` &:disabled, &:disabled:hover { - color: ${themeContrast('buttonDisabled')(props)}; + color: var(--echoes-color-text-disabled); background-color: ${themeColor('buttonDisabled')(props)}; border: ${themeBorder('default', 'buttonDisabledBorder')(props)}; @@ -176,7 +177,7 @@ const BaseButtonLink = styled(BaseLink)` ${({ disabled, theme }) => disabled ? `&, &:hover, &:focus, &:active { - color: ${themeContrast('buttonDisabled')({ theme })}; + color: var(--echoes-color-text-disabled); background-color: ${themeColor('buttonDisabled')({ theme })}; border: ${themeBorder('default', 'buttonDisabledBorder')({ theme })}; cursor: not-allowed; 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 a5c8b75b996..cd22d4c4cc6 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 @@ -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 { useTheme as themeInfo } from '@emotion/react'; import { RefObject } from 'react'; import { useIntl } from 'react-intl'; @@ -153,7 +154,7 @@ export function selectStyle< : 'none', borderRadius: '4px', ...(isDisabled && { - color: themeContrast('inputDisabled')({ theme }), + color: 'var(--echoes-color-text-disabled)', background: themeColor('inputDisabled')({ theme }), border: themeBorder('default', 'inputDisabledBorder')({ theme }), outline: 'none', diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 77a4f2920dc..e57adf7d130 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -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 { OPACITY_20_PERCENT, OPACITY_75_PERCENT } from '../helpers/constants'; import COLORS from './colors'; @@ -76,7 +77,6 @@ export const lightTheme = { danger: danger.dark, // text - textDisabled: COLORS.blueGrey[300], textSubdued: COLORS.blueGrey[400], textSuccess: COLORS.yellowGreen[700], @@ -156,7 +156,6 @@ export const lightTheme = { radioDisabled: secondary.default, radioDisabledBackground: secondary.light, radioDisabledBorder: secondary.default, - radioDisabledLabel: COLORS.blueGrey[300], // switch switch: secondary.default, @@ -178,7 +177,6 @@ export const lightTheme = { //separator-circle separatorCircle: COLORS.blueGrey[200], - separatorSlash: COLORS.blueGrey[300], // rule breakdown table breakdownBorder: COLORS.grey[100], @@ -270,7 +268,6 @@ export const lightTheme = { codeLineHover: secondary.light, codeLineHighlighted: COLORS.blueGrey[100], codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15], - codeLineMeta: COLORS.blueGrey[300], codeLineMetaHover: secondary.dark, codeLineDuplication: secondary.default, codeLineCovered: COLORS.green[300], @@ -281,7 +278,6 @@ export const lightTheme = { codeLineIssuePointerBorder: COLORS.white, codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6], codeLineEllipsis: COLORS.white, - codeLineEllipsisContrast: COLORS.blueGrey[300], codeLineEllipsisHover: secondary.light, codeLineEllipsisHoverContrast: secondary.dark, codeLineIssueLocation: [...danger.lighter, 0.15], @@ -416,16 +412,10 @@ export const lightTheme = { iconSoftwareImpactSeverityMedium: COLORS.orange[400], iconSoftwareImpactSeverityLow: COLORS.yellow[500], iconSoftwareImpactSeverityInfo: COLORS.blue[600], - iconSoftwareImpactSeverityDisabled: COLORS.blueGrey[300], iconSeverityMajor: danger.light, iconSeverityMinor: COLORS.yellowGreen[400], iconSeverityInfo: COLORS.blue[400], - iconSeverityDisabled: COLORS.blueGrey[300], - iconTypeDisabled: COLORS.blueGrey[300], iconDirectory: COLORS.orange[300], - iconFile: COLORS.blueGrey[300], - iconProject: COLORS.blueGrey[300], - iconUnitTest: COLORS.blueGrey[300], iconFavorite: COLORS.tangerine[400], iconCheck: COLORS.green[500], iconPositiveUpdate: COLORS.green[300], @@ -557,7 +547,6 @@ export const lightTheme = { facetItemSelected: COLORS.indigo[50], facetItemSelectedHover: COLORS.indigo[100], facetItemSelectedBorder: primary.light, - facetItemDisabled: COLORS.blueGrey[300], facetItemLight: secondary.dark, facetItemGraph: secondary.default, facetKeyboardHint: COLORS.blueGrey[50], @@ -572,7 +561,6 @@ export const lightTheme = { subnavigationBorder: COLORS.grey[100], subnavigationSeparator: COLORS.grey[50], subnavigationSubheading: COLORS.blueGrey[25], - subnavigationDisabled: COLORS.blueGrey[300], subnavigationExecutionFlow: COLORS.blueGrey[25], subnavigationExecutionFlowBorder: secondary.default, subnavigationExecutionFlowSeparator: COLORS.blueGrey[100], @@ -626,7 +614,6 @@ export const lightTheme = { pageBlockBorder: COLORS.blueGrey[100], // core concepts - coreConceptsCloseIcon: COLORS.blueGrey[300], coreConceptsTitle: secondary.darker, coreConceptsBody: secondary.darker, coreConceptsHomeBorder: COLORS.blueGrey[100], @@ -746,7 +733,6 @@ export const lightTheme = { // switch switchHover: primary.light, switchButton: primary.default, - switchButtonDisabled: COLORS.blueGrey[300], // sidebar sidebarBackground: COLORS.blueGrey[200], @@ -762,7 +748,6 @@ export const lightTheme = { bannerMessage: COLORS.red[900], // buttons - buttonDisabled: COLORS.blueGrey[300], buttonSecondary: secondary.darker, // danger buttons @@ -777,7 +762,6 @@ export const lightTheme = { // dropdown menu dropdownMenu: secondary.darker, - dropdownMenuDisabled: COLORS.blueGrey[300], dropdownMenuHeader: secondary.dark, // toggle buttons @@ -788,7 +772,6 @@ export const lightTheme = { codeLineNewCodeUnderline: COLORS.indigo[500], codeLineCoveredUnderline: COLORS.green[700], codeLineUncoveredUnderline: COLORS.red[700], - codeLineEllipsis: COLORS.blueGrey[300], codeLineEllipsisHover: secondary.dark, codeLineLocationMarker: COLORS.red[900], codeLineLocationMarkerSelected: COLORS.red[900], @@ -805,7 +788,6 @@ export const lightTheme = { // input field inputBackground: secondary.darker, - inputDisabled: COLORS.blueGrey[300], // tooltip tooltipBackground: secondary.light, diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx index 612cc5a2d4d..8262dd6d3c5 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx @@ -65,11 +65,11 @@ export default function RuleDetailsHeaderActions(props: Readonly) { data-meta="type" > {translate('issue.type', ruleDetails.type)} @@ -96,11 +96,11 @@ export default function RuleDetailsHeaderActions(props: Readonly) { data-meta="severity" > {translate('severity', ruleDetails.severity)} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx index fbcd523b835..e4e1feeff5c 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx @@ -286,7 +286,7 @@ export default function RuleListItem(props: Readonly) { > diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx index 8fd429cd424..57fd9b6bb70 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx @@ -45,9 +45,9 @@ export default function IssueSeverity({ issue, ...iconProps }: Readonly) > {translate('severity', issue.severity)} diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx index 4932bb33cc1..83bb80f2b32 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx @@ -43,7 +43,12 @@ export default function IssueType({ issue, ...iconProps }: Readonly) { ]} > - + {translate('issue.type', issue.type)} diff --git a/server/sonar-web/src/main/js/components/ui/popups.css b/server/sonar-web/src/main/js/components/ui/popups.css index 6ac8dea24bc..f9381ff5644 100644 --- a/server/sonar-web/src/main/js/components/ui/popups.css +++ b/server/sonar-web/src/main/js/components/ui/popups.css @@ -17,13 +17,14 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + .popup { position: absolute; z-index: var(--popupZIndex); margin-top: -16px; margin-left: 8px; padding: var(--gridSize); - border: 1px solid var(--neutral200); + border: 1px solid var(--echoes-color-border-weak); border-radius: 3px; box-sizing: border-box; background-color: #ffffff; -- 2.39.5