feat: badge update dark mode (#722)

tremorlabs · Oct 1, 2023 · 9c09769 · 9c09769
1 parent e6559d4
commit 9c09769
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/src/components/icon-elements/Badge/Badge.tsx b/src/components/icon-elements/Badge/Badge.tsx
@@ -1,9 +1,15 @@
 "use client";
 import React from "react";
-import { tremorTwMerge } from "lib";
-
-import { Sizes, getColorClassNames, makeClassName, mergeRefs, spacing } from "lib";
-import { Color, Size } from "../../../lib";
+import {
+  Sizes,
+  getColorClassNames,
+  makeClassName,
+  mergeRefs,
+  spacing,
+  Color,
+  Size,
+  tremorTwMerge,
+} from "lib";
 import { badgeProportions, iconSizes } from "./styles";
 import { colorPalette } from "lib/theme";
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
@@ -33,8 +39,9 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
         "w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full",
         color
           ? tremorTwMerge(
-              getColorClassNames(color, colorPalette.lightBackground).bgColor,
-              getColorClassNames(color, colorPalette.darkText).textColor,
+              getColorClassNames(color, colorPalette.background).bgColor,
+              getColorClassNames(color, colorPalette.text).textColor,
+              "bg-opacity-20 dark:bg-opacity-25",
             )
           : tremorTwMerge(
               // light

diff --git a/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx b/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx
@@ -1,9 +1,15 @@
 "use client";
 import React from "react";
-import { tremorTwMerge } from "lib";
-
-import { DeltaType, DeltaTypes, Size, makeClassName, spacing } from "../../../lib";
-import { Sizes, mapInputsToDeltaType } from "lib";
+import {
+  DeltaType,
+  DeltaTypes,
+  Size,
+  makeClassName,
+  spacing,
+  tremorTwMerge,
+  Sizes,
+  mapInputsToDeltaType,
+} from "lib";
 import {
   badgeProportionsIconOnly,
   badgeProportionsWithText,
@@ -40,7 +46,7 @@ const BadgeDelta = React.forwardRef<HTMLSpanElement, BadgeDeltaProps>((props, re
       className={tremorTwMerge(
         makeBadgeDeltaClassName("root"),
         // common
-        "w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full",
+        "w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full bg-opacity-20 dark:bg-opacity-25",
         colors[mappedDeltaType].bgColor,
         colors[mappedDeltaType].textColor,
         badgeProportions[size].paddingX,

diff --git a/src/components/icon-elements/BadgeDelta/styles.ts b/src/components/icon-elements/BadgeDelta/styles.ts
@@ -105,24 +105,24 @@ export type ColorTypes = {
 
 export const colors: { [key: string]: ColorTypes } = {
   [DeltaTypes.Increase]: {
-    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.lightBackground).bgColor,
-    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.darkText).textColor,
+    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.text).textColor,
   },
   [DeltaTypes.ModerateIncrease]: {
-    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.lightBackground).bgColor,
-    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.darkText).textColor,
+    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.text).textColor,
   },
   [DeltaTypes.Decrease]: {
-    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.lightBackground).bgColor,
-    textColor: getColorClassNames(BaseColors.Rose, colorPalette.darkText).textColor,
+    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Rose, colorPalette.text).textColor,
   },
   [DeltaTypes.ModerateDecrease]: {
-    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.lightBackground).bgColor,
-    textColor: getColorClassNames(BaseColors.Rose, colorPalette.darkText).textColor,
+    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Rose, colorPalette.text).textColor,
   },
   [DeltaTypes.Unchanged]: {
-    bgColor: getColorClassNames(BaseColors.Orange, colorPalette.lightBackground).bgColor,
-    textColor: getColorClassNames(BaseColors.Orange, colorPalette.darkText).textColor,
+    bgColor: getColorClassNames(BaseColors.Orange, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Orange, colorPalette.text).textColor,
   },
 };