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

diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx
index dee353256f2e68bb84d33338a63db03bd2613163..024a4eb8774eb189da8b0804ed5c9cdd53df275a 100644 (file)
--- 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 dff4f3b11e61d9ff31d2654307fd9d4bf846425d..90fe7e055390700477f5e3d3bbc669f666f398e1 100644 (file)
--- 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 761cecb2b8a5ec4e1a70184a30806b93832aae15..6f249e84cf22b87066260c680b3e82341e6e3a58 100644 (file)
--- 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 f5bc0f996f1a6ef5ca8f69a73d4562a12e93acf5..33265d7d9ff7143202be53e56196144377ee9cba 100644 (file)
--- 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 5da1315a8a4e9aeb8ceafb93547269b3db34940a..ed4114e1be392b2afec85818855296112c36a54f 100644 (file)
--- 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 35666e032cd391e66502f1646b7384d5a705c1a9..999716d190d267acf17b1f603e28341462978772 100644 (file)
--- 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 397338b3d04c4644de2184c4b04d9bb7d7fd1c57..23a4b968e4bb27ab3fba1d565e5894ec4c52627f 100644 (file)
--- 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<StyledProps>`
   ${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 e5eec82049da20960e462a73f4e3f6f4c74d0791..1d7d505e179cf56c393cca6febc4406d26fb24c3 100644 (file)
--- 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 902ffbdee492f606357eeba24b9616d3c8031f5d..ac4eb0e769efb0752e03dc260ce041d1e87db9b1 100644 (file)
--- 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 0c1e1918e4f139dbe4e5296dc05ccee2769b6367..3be6058daf7061dbfaacd0664071e194315b5ca2 100644 (file)
--- 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 bcdf9f50b089cd465037bf9be950c11e8e6bed4e..24eb1a2f8a28833758514ea4804054cc5a13e3f2 100644 (file)
--- 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)<CodeViewerExpanderProps>`
   ${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)<CodeViewerExpanderProps>`
 `;
 
 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 a4213b78d44abdb0ab0283839806e44639608fec..4eb3f09ec6211fa4e19795320cf5ea996adf26ce 100644 (file)
--- 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 34c09a7906e228ffc10e16905977f765bfd4f8fe..976037d15bbd591d7cd3befce9f4cb76ee8b8e51 100644 (file)
--- 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<Props>) {
   const theme = useTheme();
 
@@ -37,13 +39,13 @@ export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly<Props>
   }
 
   const icon = {
+    app: ApplicationIcon({ fill: fill ?? defaultIconfill, ...iconProps }),
     dir: <DirectoryIcon fill={fill ?? themeColor('iconDirectory')({ theme })} {...iconProps} />,
-    fil: <FileIcon fill={fill ?? themeColor('iconFile')({ theme })} {...iconProps} />,
-    trk: <ProjectIcon fill={fill ?? themeColor('iconProject')({ theme })} {...iconProps} />,
-    uts: <TestFileIcon fill={fill ?? themeColor('iconProject')({ theme })} {...iconProps} />,
-    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: <FileIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    svw: SubPortfolioIcon({ fill: fill ?? defaultIconfill, ...iconProps }),
+    trk: <ProjectIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    uts: <TestFileIcon fill={fill ?? defaultIconfill} {...iconProps} />,
+    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 bf8c4b08331c956174cf1b953b7035ef45da895f..65451a5ddd6faea80d244a3f497277847fb8caa4 100644 (file)
--- 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 (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6H4Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>

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 dd5cd03ed2e3603bd2c189a9e349dee33cb48799..e9734376f4421ae5193d9a01ac28822901a45eed 100644 (file)
--- 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 (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM4.3983 5.57213C4.31781 5.61338 4.26697 5.6977 4.26697 5.78993V9.48856C4.26697 9.65858 4.43265 9.77626 4.58796 9.71657L6.91569 8.82188C6.96948 8.80121 7.02875 8.80121 7.08253 8.82188L9.41026 9.71657C9.56557 9.77626 9.73125 9.65858 9.73125 9.48856V5.78993C9.73125 5.6977 9.68041 5.61338 9.59992 5.57213L7.10536 4.29371C7.03847 4.25944 6.95975 4.25944 6.89286 4.29371L4.3983 5.57213Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>

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 ef943283feda2a0a0896804c20c1f88fe560ed83..012f9436b6936a930b7ec226535d03a90872acd4 100644 (file)
--- 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 (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM3.94899 6.55761L6.46964 9.07825C6.76253 9.37115 7.2374 9.37115 7.5303 9.07825L10.0509 6.55761C10.3438 6.26472 10.3438 5.78984 10.0509 5.49695C9.75805 5.20406 9.28317 5.20406 8.99028 5.49695L6.99997 7.48727L5.00965 5.49695C4.71676 5.20406 4.24188 5.20406 3.94899 5.49695C3.6561 5.78984 3.6561 6.26472 3.94899 6.55761Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>

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 417ff73c76c1e37fbbe20aea34a9102fa023c19b..bcf632761d13af8ff11925b01659917383b0c15b 100644 (file)
--- 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 (
     <CustomIcon viewBox="0 0 14 14" {...iconProps}>
       <path
         clipRule="evenodd"
         d="M7 13.375C10.5208 13.375 13.375 10.5208 13.375 7C13.375 3.47918 10.5208 0.625 7 0.625C3.47918 0.625 0.625 3.47918 0.625 7C0.625 10.5208 3.47918 13.375 7 13.375ZM10.051 7.83547L7.53033 5.31482C7.23744 5.02193 6.76256 5.02193 6.46967 5.31482L3.94903 7.83547C3.65613 8.12836 3.65613 8.60324 3.94903 8.89613C4.24192 9.18902 4.71679 9.18902 5.00969 8.89613L7 6.90581L8.99031 8.89613C9.28321 9.18902 9.75808 9.18902 10.051 8.89613C10.3439 8.60324 10.3439 8.12836 10.051 7.83547Z"
-        fill={themeColor(color)({ theme })}
+        fill={color}
         fillRule="evenodd"
       />
     </CustomIcon>

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 4649d739fb3496e7bce68201ffb3d30e9ae76a98..3ba931e3cbe73213593b25f47fb0ebd4c444b0df 100644 (file)
--- 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 f36d7ec762fdbfed5fb8f86c0b630505659c9170..12edde48727858db9d82fa16f732a86821d21e9b 100644 (file)
--- 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 d5f40048bdaf2bb635c4cd20fe12fbdb6f692b2d..86d80230b9c3fa4fc62f74160420950a9c8f1bc8 100644 (file)
--- 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 6d456808a051957cb9f145a9692ead0b00819d72..3301bd71d36666e427dc6524e1faf0fd1e7a8b8e 100644 (file)
--- 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 a5c8b75b996d2267bd4c7bd8615fc68d3b5b2237..cd22d4c4cc639a8ba14258a716de71c94827f80b 100644 (file)
--- 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 77a4f2920dc09393de904112dbf1a5a5ba554eb4..e57adf7d1309d134ede4cf2a683ac17ca4ba4057 100644 (file)
--- 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 612cc5a2d4dbb2d2f13988e1bac339256e042d43..8262dd6d3c57d89e489adb63bb3aa8b462e473f4 100644 (file)
--- 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<Props>) {
           data-meta="type"
         >
           <IssueTypeIcon
-            fill="iconTypeDisabled"
-            type={ruleDetails.type}
             aria-hidden
-            width={12}
+            fill="var(--echoes-color-icon-disabled)"
             height={12}
+            type={ruleDetails.type}
+            width={12}
           />
           {translate('issue.type', ruleDetails.type)}
         </TextSubdued>
@@ -96,11 +96,11 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) {
           data-meta="severity"
         >
           <IssueSeverityIcon
-            fill="iconSeverityDisabled"
-            severity={ruleDetails.severity as IssueSeverity}
             aria-hidden
-            width={12}
+            fill="var(--echoes-color-icon-disabled)"
             height={12}
+            severity={ruleDetails.severity as IssueSeverity}
+            width={12}
           />
           {translate('severity', ruleDetails.severity)}
         </TextSubdued>

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 fbcd523b835b0fa0e3bc37c26558ac34add3dc85..e4e1feeff5c4adbcd80a5e7e8c45f7cd363c629a 100644 (file)
--- 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<Props>) {
               >
                 <TypeHelper
                   className="sw-flex sw-items-center"
-                  iconFill="iconTypeDisabled"
+                  iconFill="var(--echoes-color-icon-disabled)"
                   type={rule.type}
                 />
               </DocHelpTooltip>

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 8fd429cd4244417162d6b305720bc4053ccd1444..57fd9b6bb701ac5f977e59bdce38d0563d88088f 100644 (file)
--- 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<Props>)
     >
       <TextSubdued className="sw-flex sw-items-center sw-gap-1/2">
         <IssueSeverityIcon
-          fill="iconSeverityDisabled"
-          severity={issue.severity as IssueSeverityType}
           aria-hidden
+          fill="var(--echoes-color-icon-disabled)"
+          severity={issue.severity as IssueSeverityType}
           {...iconProps}
         />
         {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 4932bb33cc194c799f1bfcc77373b61aad950f7b..83bb80f2b32a4b2db4d9e9885cb16357ded8be4d 100644 (file)
--- 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<Props>) {
       ]}
     >
       <TextSubdued className="sw-flex sw-items-center sw-gap-1/2">
-        <IssueTypeIcon fill="iconTypeDisabled" type={issue.type} aria-hidden {...iconProps} />
+        <IssueTypeIcon
+          aria-hidden
+          fill="var(--echoes-color-icon-disabled)"
+          type={issue.type}
+          {...iconProps}
+        />
         {translate('issue.type', issue.type)}
       </TextSubdued>
     </DocHelpTooltip>

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 6ac8dea24bc08982124f7c408030744884f6aac9..f9381ff56445a62cddf98e4954090e0d790a7827 100644 (file)
--- 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;