SONAR-20488 Adjust CCT impact badges styling

diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx
index 59a0f54287ecffe872a4f47add902d2e4c2369da..e35725df477392bd06f16daa5e4c9d2a5c9eaad0 100644 (file)
--- a/server/sonar-web/design-system/src/components/Pill.tsx
+++ b/server/sonar-web/design-system/src/components/Pill.tsx
@@ -32,6 +32,13 @@ const variantThemeColors: Record<PillVariant, ThemeColors> = {
   neutral: 'pillNeutral',
 };
 
+const variantThemeBorderColors: Record<PillVariant, ThemeColors> = {
+  danger: 'pillDangerBorder',
+  warning: 'pillWarningBorder',
+  info: 'pillInfoBorder',
+  neutral: 'pillNeutralBorder',
+};
+
 interface PillProps {
   ['aria-label']?: string;
   children: ReactNode;
@@ -41,14 +48,14 @@ interface PillProps {
 
 export function Pill({ children, variant, ...rest }: PillProps) {
   return (
-    <StyledPill color={variantThemeColors[variant]} {...rest}>
+    <StyledPill variant={variant} {...rest}>
       {children}
     </StyledPill>
   );
 }
 
 const StyledPill = styled.span<{
-  color: ThemeColors;
+  variant: PillVariant;
 }>`
   ${tw`sw-body-sm`};
   ${tw`sw-w-fit`};
@@ -57,8 +64,12 @@ const StyledPill = styled.span<{
   ${tw`sw-px-[8px] sw-py-[2px]`};
   ${tw`sw-rounded-pill`};
 
-  color: ${({ color }) => themeContrast(color)};
-  background-color: ${({ color }) => themeColor(color)};
+  background-color: ${({ variant }) => themeContrast(variantThemeColors[variant])};
+  background-color: ${({ variant }) => themeColor(variantThemeColors[variant])};
+  color: ${({ variant }) => themeContrast(variantThemeColors[variant])};
+  border-style: ${({ variant }) => (variant === 'neutral' ? 'hidden' : 'solid')};
+  border-color: ${({ variant }) => themeColor(variantThemeBorderColors[variant])};
+  border-width: 1px;
 
   &:empty {
     ${tw`sw-hidden`}

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 3b4fafbc2a83c09d9e8d6eed3da554203d0eca85..115d90eaaaa68e5ca04134fbb4d5bab77ac4bc80 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -282,10 +282,14 @@ export const lightTheme = {
     badgeCounter: COLORS.blueGrey[100],
 
     // pills
-    pillDanger: COLORS.red[100],
-    pillWarning: COLORS.yellow[100],
-    pillInfo: COLORS.blue[100],
+    pillDanger: COLORS.red[50],
+    pillDangerBorder: COLORS.red[300],
+    pillWarning: COLORS.yellow[50],
+    pillWarningBorder: COLORS.yellow[300],
+    pillInfo: COLORS.blue[50],
+    pillInfoBorder: COLORS.blue[300],
     pillNeutral: COLORS.blueGrey[50],
+    pillNeutralBorder: 'transparent',
 
     // input select
     selectOptionSelected: secondary.light,
@@ -328,8 +332,8 @@ export const lightTheme = {
     destructiveIconFocus: danger.default,
 
     // icons
-    iconSoftwareImpactSeverityHigh: COLORS.red[700],
-    iconSoftwareImpactSeverityMedium: COLORS.yellow[800],
+    iconSoftwareImpactSeverityHigh: COLORS.red[500],
+    iconSoftwareImpactSeverityMedium: COLORS.yellow[700],
     iconSoftwareImpactSeverityLow: COLORS.blue[700],
     iconSeverityMajor: danger.light,
     iconSeverityMinor: COLORS.yellowGreen[400],
@@ -656,9 +660,12 @@ export const lightTheme = {
 
     // pills
     pillDanger: COLORS.red[800],
+    pillDangerIcon: COLORS.red[700],
     pillWarning: COLORS.yellow[800],
+    pillWarningIcon: COLORS.yellow[700],
     pillInfo: COLORS.blue[800],
-    pillNeutral: COLORS.blueGrey[500],
+    pillInfoIcon: COLORS.blue[700],
+    pillNeutral: COLORS.blueGrey[800],
 
     // breadcrumbs
     breadcrumb: secondary.dark,