chore(badge): update styles (#3029)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Feb 21, 2023 · 62983ad · 62983ad
1 parent ef094db
commit 62983ad
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/.changeset/wild-beans-teach.md b/.changeset/wild-beans-teach.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/badge': patch
+'@twilio-paste/core': patch
+---
+
+[Badge] Update styles to align with new Paste Twilio theme
diff --git a/packages/paste-core/components/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx
@@ -47,7 +47,7 @@ export const Badge = React.forwardRef<HTMLElement, BadgeProps>(
         alignItems="center"
         as={as}
         border="unset"
-        borderRadius="borderRadius30"
+        borderRadius="borderRadius20"
         columnGap="space20"
         display="flex"
         element={element}

diff --git a/packages/paste-core/components/badge/src/styles.ts b/packages/paste-core/components/badge/src/styles.ts
@@ -7,62 +7,78 @@ export const badgeVariantStyles: {
     backgroundColor: BoxStyleProps['backgroundColor'];
     color: BoxStyleProps['color'];
     borderRadius?: BoxStyleProps['borderRadius'];
+    boxShadow: BoxStyleProps['boxShadow'];
   };
 } = {
   success: {
     backgroundColor: 'colorBackgroundSuccessWeakest',
     color: 'colorTextSuccess',
+    boxShadow: 'shadowBorderSuccessWeaker',
   },
   error: {
     backgroundColor: 'colorBackgroundErrorWeakest',
-    color: 'colorTextErrorStrong',
+    color: 'colorTextError',
+    boxShadow: 'shadowBorderErrorWeaker',
   },
   warning: {
     backgroundColor: 'colorBackgroundWarningWeakest',
-    color: 'colorTextWarningStrong',
+    color: 'colorTextWarning',
+    boxShadow: 'shadowBorderWarningWeaker',
   },
   new: {
-    backgroundColor: 'colorBackgroundNew',
+    backgroundColor: 'colorBackgroundNewWeakest',
     color: 'colorTextNew',
+    boxShadow: 'shadowBorderNewWeaker',
   },
   neutral: {
     backgroundColor: 'colorBackgroundNeutralWeakest',
     color: 'colorTextNeutral',
+    boxShadow: 'shadowBorderNeutralWeaker',
   },
   decorative10: {
     backgroundColor: 'colorBackgroundDecorative10Weakest',
     color: 'colorTextDecorative10',
+    boxShadow: 'shadowBorderDecorative10Weaker',
   },
   decorative20: {
     backgroundColor: 'colorBackgroundDecorative20Weakest',
     color: 'colorTextDecorative20',
+    boxShadow: 'shadowBorderDecorative20Weaker',
   },
   decorative30: {
     backgroundColor: 'colorBackgroundDecorative30Weakest',
     color: 'colorTextDecorative30',
+    boxShadow: 'shadowBorderDecorative30Weaker',
   },
   decorative40: {
     backgroundColor: 'colorBackgroundDecorative40Weakest',
     color: 'colorTextDecorative40',
+    boxShadow: 'shadowBorderDecorative40Weaker',
   },
   neutral_counter: {
     backgroundColor: 'colorBackgroundNeutralWeakest',
     color: 'colorTextNeutral',
     borderRadius: 'borderRadiusPill',
+    boxShadow: 'shadowBorderNeutralWeaker',
   },
   error_counter: {
     backgroundColor: 'colorBackgroundErrorWeakest',
-    color: 'colorTextErrorStrong',
+    color: 'colorTextError',
     borderRadius: 'borderRadiusPill',
+    boxShadow: 'shadowBorderErrorWeaker',
   },
-  // the following variants are outdated but still supported to prevent breaking changes
+  /*
+   * the following variants are outdated but still supported to prevent breaking changes
+   */
   default: {
     backgroundColor: 'colorBackground',
     color: 'colorTextWeak',
+    boxShadow: 'shadowBorderDecorative10Weaker',
   },
   info: {
     backgroundColor: 'colorBackgroundNeutralWeakest',
     color: 'colorTextNeutral',
+    boxShadow: 'shadowBorderNeutralWeaker',
   },
 };