styles:dark mode color fix (#11004)

Author: Sahil25061999

apps/storybook/styles/storybook-styles.css

@@ -248,10 +248,10 @@
     --cal-bg-inverted: #f3f4f6;
 
     /* background -> components*/
-    --cal-bg-info: #dee9fc;
-    --cal-bg-success: #e2fbe8;
-    --cal-bg-attention: #fceed8;
-    --cal-bg-error: #f9e3e2;
+    --cal-bg-info: #263fa9;
+    --cal-bg-success: #306339;
+    --cal-bg-attention: #8e3b1f;
+    --cal-bg-error: #8c2822;
     --cal-bg-dark-error: #752522;
 
     /* Borders */
@@ -269,10 +269,10 @@
     --cal-text-inverted: #101010;
 
     /* Content/Text -> components */
-    --cal-text-info: #253985;
-    --cal-text-success: #285231;
-    --cal-text-attention: #73321b;
-    --cal-text-error: #752522;
+    --cal-text-info: #dee9fc;
+    --cal-text-success: #e2fbe8;
+    --cal-text-attention: #fceed8;
+    --cal-text-error: #f9e3e2;
 
     /* Brand shenanigans
       -> These will be computed for the users theme at runtime.

apps/web/styles/globals.css

@@ -58,10 +58,10 @@
   --cal-bg-inverted: #f3f4f6;
 
   /* background -> components*/
-  --cal-bg-info: #dee9fc;
-  --cal-bg-success: #e2fbe8;
-  --cal-bg-attention: #fceed8;
-  --cal-bg-error: #f9e3e2;
+  --cal-bg-info: #263fa9;
+  --cal-bg-success: #306339;
+  --cal-bg-attention: #8e3b1f;
+  --cal-bg-error: #8c2822;
   --cal-bg-dark-error: #752522;
 
   /* Borders */
@@ -80,10 +80,10 @@
   --cal-text-inverted: #101010;
 
   /* Content/Text -> components */
-  --cal-text-info: #253985;
-  --cal-text-success: #285231;
-  --cal-text-attention: #73321b;
-  --cal-text-error: #752522;
+  --cal-text-info: #dee9fc;
+  --cal-text-success: #e2fbe8;
+  --cal-text-attention: #fceed8;
+  --cal-text-error: #f9e3e2;
 
   /* Brand shenanigans
       -> These will be computed for the users theme at runtime.

packages/features/ee/teams/components/TeamPill.tsx

@@ -15,9 +15,9 @@ export default function TeamPill(props: Props) {
     <div
       className={classNames("text-medium self-center rounded-md px-1 py-0.5 text-xs ltr:mr-1 rtl:ml-1", {
         " bg-subtle text-emphasis": !props.color,
-        " bg-info text-blue-800": props.color === "blue",
-        " bg-error text-red-800 ": props.color === "red",
-        " bg-attention text-orange-800": props.color === "orange",
+        " bg-info text-info": props.color === "blue",
+        " bg-error text-error ": props.color === "red",
+        " bg-attention text-attention": props.color === "orange",
       })}>
       {props.text}
     </div>

packages/ui/components/button/Button.tsx

@@ -52,7 +52,7 @@ export const buttonClasses = cva(
         minimal:
           "text-emphasis hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-transparent disabled:hover:text-muted disabled:hover:border-subtle",
         destructive:
-          "border border-default text-emphasis hover:text-red-700 focus-visible:text-red-700  hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700 disabled:bg-red-100 disabled:border-red-200 disabled:text-red-700 disabled:hover:border-red-200 disabled:opacity-40",
+          "border border-default text-emphasis hover:text-red-700 dark:hover:text-red-100 focus-visible:text-red-700  hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700 disabled:bg-red-100 disabled:border-red-200 disabled:text-red-700 disabled:hover:border-red-200 disabled:opacity-40",
       },
       size: {
         sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,

packages/ui/components/dialog/ConfirmationDialogContent.tsx

@@ -41,7 +41,7 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="bg-error mx-auto rounded-full p-2 text-center">
-                <AlertCircle className="h-5 w-5 text-red-600" />
+                <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-100" />
               </div>
             )}
             {variety === "warning" && (

packages/ui/components/form/dropdown/Dropdown.tsx

@@ -138,7 +138,9 @@ export const DropdownItem = (props: DropdownItemProps) => {
       {...rest}
       className={classNames(
         "hover:text-emphasis text-default inline-flex w-full items-center space-x-2 px-3 py-2 disabled:cursor-not-allowed",
-        color === "destructive" ? "hover:bg-error hover:text-red-700" : "hover:bg-subtle",
+        color === "destructive"
+          ? "hover:bg-error hover:text-red-700 dark:hover:text-red-100"
+          : "hover:bg-subtle",
         props.className
       )}>
       <>