SONAR-21168 Rework Clean Code Taxonomy Category Pill

4 files changed, 12 insertions, 13 deletions

diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx
index 7cd93fc083c..e6aee90be58 100644
--- a/server/sonar-web/design-system/src/components/Pill.tsx
+++ b/server/sonar-web/design-system/src/components/Pill.tsx
@@ -23,20 +23,20 @@ import tw from 'twin.macro';
 import { themeColor, themeContrast } from '../helpers/theme';
 import { ThemeColors } from '../types/theme';
 
-type PillVariant = 'danger' | 'warning' | 'info' | 'neutral';
+type PillVariant = 'danger' | 'warning' | 'info' | 'accent';
 
 const variantThemeColors: Record<PillVariant, ThemeColors> = {
   danger: 'pillDanger',
   warning: 'pillWarning',
   info: 'pillInfo',
-  neutral: 'pillNeutral',
+  accent: 'pillAccent',
 };
 
 const variantThemeBorderColors: Record<PillVariant, ThemeColors> = {
   danger: 'pillDangerBorder',
   warning: 'pillWarningBorder',
   info: 'pillInfoBorder',
-  neutral: 'pillNeutralBorder',
+  accent: 'pillAccentBorder',
 };
 
 interface PillProps {
@@ -46,7 +46,7 @@ interface PillProps {
   variant: PillVariant;
 }
 
-export function Pill({ children, variant, ...rest }: PillProps) {
+export function Pill({ children, variant, ...rest }: Readonly<PillProps>) {
   return (
     <StyledPill variant={variant} {...rest}>
       {children}
@@ -57,7 +57,7 @@ export function Pill({ children, variant, ...rest }: PillProps) {
 const StyledPill = styled.span<{
   variant: PillVariant;
 }>`
-  ${tw`sw-body-sm`};
+  ${tw`sw-body-xs`};
   ${tw`sw-w-fit`};
   ${tw`sw-inline-block`};
   ${tw`sw-whitespace-nowrap`};
@@ -66,7 +66,7 @@ const StyledPill = styled.span<{
 
   background-color: ${({ variant }) => themeColor(variantThemeColors[variant])};
   color: ${({ variant }) => themeContrast(variantThemeColors[variant])};
-  border-style: ${({ variant }) => (variant === 'neutral' ? 'hidden' : 'solid')};
+  border-style: ${({ variant }) => (variant === 'accent' ? 'hidden' : 'solid')};
   border-color: ${({ variant }) => themeColor(variantThemeBorderColors[variant])};
   border-width: 1px;
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx
index 8c0f28eb87c..87da0f7420b 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx
@@ -22,6 +22,6 @@ import { render } from '../../helpers/testUtils';
 import { Pill } from '../Pill';
 
 it('should render correctly', () => {
-  render(<Pill variant="neutral">23</Pill>);
+  render(<Pill variant="accent">23</Pill>);
   expect(screen.getByText('23')).toBeInTheDocument();
 });
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 3d5196a1f73..a1c81650c33 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -314,8 +314,8 @@ export const lightTheme = {
     pillWarningBorder: COLORS.yellow[300],
     pillInfo: COLORS.blue[50],
     pillInfoBorder: COLORS.blue[300],
-    pillNeutral: COLORS.blueGrey[50],
-    pillNeutralBorder: 'transparent',
+    pillAccent: COLORS.indigo[50],
+    pillAccentBorder: 'transparent',
 
     // input select
     selectOptionSelected: secondary.light,
@@ -702,7 +702,7 @@ export const lightTheme = {
     pillWarningIcon: COLORS.yellow[700],
     pillInfo: COLORS.blue[800],
     pillInfoIcon: COLORS.blue[700],
-    pillNeutral: COLORS.blueGrey[500],
+    pillAccent: COLORS.indigo[500],
 
     // breadcrumbs
     breadcrumb: secondary.dark,
diff --git a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx
index 95c7d81dc86..3d533ef2fa4 100644
--- a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx
+++ b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx
@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
 import { Pill } from 'design-system';
 import React from 'react';
 import { translate } from '../../helpers/l10n';
@@ -63,8 +62,8 @@ export function CleanCodeAttributePill(props: Readonly<Props>) {
         },
       ]}
     >
-      <Pill variant="neutral" data-guiding-id="issue-1" className={className}>
-        <span className={classNames({ 'sw-font-semibold': !!cleanCodeAttribute })}>
+      <Pill variant="accent" data-guiding-id="issue-1" className={className}>
+        <span className="sw-font-semibold">
           {translate(type, 'clean_code_attribute_category', cleanCodeAttributeCategory)}
         </span>
         {cleanCodeAttribute && (