Web:Common:Changing badge styles.

packages/common/components/ColorTheme/styled/badge.js

@@ -2,22 +2,53 @@ import styled, { css } from "styled-components";
 import {
   StyledBadge,
   StyledInner,
+  StyledText,
 } from "@docspace/components/badge/styled-badge";
+import Base from "@docspace/components/themes/base";
 
-const getDefaultStyles = ({ currentColorScheme }) =>
-  currentColorScheme &&
+const getDefaultStyles = ({
+  $currentColorScheme,
+  isVersionBadge,
+  backgroundColor,
+  color,
+  theme,
+}) =>
+  $currentColorScheme &&
+  !isVersionBadge &&
   css`
+    ${StyledText} {
+      color: ${color
+        ? color
+        : $currentColorScheme.id === 7 && !theme.isBase
+        ? "#444444"
+        : theme.badge.color} !important;
+    }
+
     ${StyledInner} {
-      background-color: ${currentColorScheme.accentColor};
+      background-color: ${backgroundColor
+        ? backgroundColor
+        : $currentColorScheme.id === 7 && !theme.isBase
+        ? "#ECEEF1"
+        : $currentColorScheme.accentColor};
 
       &:hover {
-        background-color: ${currentColorScheme.accentColor};
+        background-color: ${backgroundColor
+          ? backgroundColor
+          : $currentColorScheme.id === 7 && !theme.isBase
+          ? "#ECEEF1"
+          : $currentColorScheme.accentColor};
       }
     }
 
     &:hover {
-      border-color: ${currentColorScheme.accentColor};
+      border-color: ${backgroundColor
+        ? backgroundColor
+        : $currentColorScheme.id === 7 && !theme.isBase
+        ? "#ECEEF1"
+        : $currentColorScheme.accentColor};
     }
   `;
 
+StyledBadge.defaultProps = { theme: Base };
+
 export default styled(StyledBadge)(getDefaultStyles);