SONAR-21111 Harmonize text-disabled color with SonarCloud

diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx
index 49bed8534a85300312d2e33b85bbf8cf6baec7c8..e82224ea93c2cbe439459d22f4e34988047a824e 100644 (file)
--- a/server/sonar-web/design-system/src/components/Text.tsx
+++ b/server/sonar-web/design-system/src/components/Text.tsx
@@ -116,9 +116,14 @@ const StyledTextSuccess = styled(StyledText)`
   color: ${themeColor('textSuccess')};
 `;
 
-export const DisabledText = styled.span`
+export const TextDisabled = styled.span`
   ${tw`sw-font-regular`};
-  color: ${themeColor('pageContentLight')};
+  color: ${themeColor('textDisabled')};
+`;
+
+export const TextSubdued = styled.span`
+  ${tw`sw-font-regular`};
+  color: ${themeColor('textSubdued')};
 `;
 
 export const LightLabel = styled.span`

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index ed9ed6e68adfbfb6181c3a884218538c36b5d969..7d81a586d65ca4b0753d646e359db412e74c5f18 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -77,6 +77,8 @@ export const lightTheme = {
     danger: danger.dark,
 
     // text
+    textDisabled: COLORS.blueGrey[300],
+    textSubdued: COLORS.blueGrey[400],
     textSuccess: COLORS.yellowGreen[700],
 
     //Project list card

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index d1ba0b31fb085437c67c9edfdf7bc198fa7b7452..98efdce6df33072c48b8766f06b3f9acfcd63736 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -22,7 +22,6 @@ import {
   Badge,
   BasicSeparator,
   ClipboardIconButton,
-  DisabledText,
   HelperHintIcon,
   IssueMessageHighlighting,
   LightLabel,
@@ -30,6 +29,7 @@ import {
   LinkIcon,
   Note,
   PageContentFontWrapper,
+  TextSubdued,
   themeBorder,
 } from 'design-system';
 import * as React from 'react';
@@ -75,10 +75,10 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
             },
           ]}
         >
-          <DisabledText className="sw-flex sw-items-center sw-gap-1">
+          <TextSubdued className="sw-flex sw-items-center sw-gap-1">
             <IssueTypeIcon fill="iconTypeDisabled" type={ruleDetails.type} aria-hidden />
             {translate('issue.type', ruleDetails.type)}
-          </DisabledText>
+          </TextSubdued>
         </DocumentationTooltip>
       </Note>
     );
@@ -100,14 +100,14 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
           },
         ]}
       >
-        <DisabledText className="sw-flex sw-items-center sw-gap-1">
+        <TextSubdued className="sw-flex sw-items-center sw-gap-1">
           <IssueSeverityIcon
             fill="iconSeverityDisabled"
             severity={this.props.ruleDetails.severity as IssueSeverityType}
             aria-hidden
           />
           {translate('severity', this.props.ruleDetails.severity)}
-        </DisabledText>
+        </TextSubdued>
       </DocumentationTooltip>
     </Note>
   );

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 5b00d8ae2bc6945222948d40973356ec7b22df67..30dec2d7c4b9f09c93ca2b76d6c70e0a8969a709 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
@@ -22,10 +22,10 @@ import styled from '@emotion/styled';
 import {
   Badge,
   DangerButtonSecondary,
-  DisabledText,
   InheritanceIcon,
   Link,
   OverridenIcon,
+  TextSubdued,
   themeBorder,
 } from 'design-system';
 import * as React from 'react';
@@ -265,13 +265,13 @@ export default class RuleListItem extends React.PureComponent<Props> {
                   },
                 ]}
               >
-                <DisabledText className="sw-ml-3 sw-whitespace-nowrap">
+                <TextSubdued className="sw-ml-3 sw-whitespace-nowrap">
                   <TypeHelper
                     className="sw-flex sw-items-center"
                     iconFill="iconTypeDisabled"
                     type={rule.type}
                   />
-                </DisabledText>
+                </TextSubdued>
               </DocumentationTooltip>
               {allTags.length > 0 && (
                 <TagsList allowUpdate={false} className="sw-ml-3" tags={allTags} />

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 fc19dcb78bb4717694f65c60855ab0796bf462c6..d60550522a2a5a0c7cb4f58580d762803c9405de 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
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { DisabledText } from 'design-system';
+import { TextSubdued } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { IssueSeverity as IssueSeverityType } from '../../../types/issues';
@@ -42,14 +42,14 @@ export default function IssueSeverity({ issue }: Props) {
         },
       ]}
     >
-      <DisabledText className="sw-flex sw-items-center sw-gap-1">
+      <TextSubdued className="sw-flex sw-items-center sw-gap-1">
         <IssueSeverityIcon
           fill="iconSeverityDisabled"
           severity={issue.severity as IssueSeverityType}
           aria-hidden
         />
         {translate('severity', issue.severity)}
-      </DisabledText>
+      </TextSubdued>
     </DocumentationTooltip>
   );
 }

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 91206aa53ae02d6334b51d39307cc3868eba3f8d..789ea2e61aca3f6651b90d55140bf0fdc476981d 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
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { DisabledText } from 'design-system';
+import { TextSubdued } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
@@ -41,10 +41,10 @@ export default function IssueType({ issue }: Props) {
         },
       ]}
     >
-      <DisabledText className="sw-flex sw-items-center sw-gap-1">
+      <TextSubdued className="sw-flex sw-items-center sw-gap-1">
         <IssueTypeIcon fill="iconTypeDisabled" type={issue.type} aria-hidden />
         {translate('issue.type', issue.type)}
-      </DisabledText>
+      </TextSubdued>
     </DocumentationTooltip>
   );
 }