Fix dark mode

Author: amovar18

packages/frappe-ui-react/src/components/circularProgressBar/circularProgressBar.tsx

@@ -176,7 +176,7 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
   return (
     <div
-      className={`progressbar ${completedClass} ${variantClass}`}
+      className={`progressbar ${completedClass} ${variantClass} text-ink-gray-3`}
       role="progressbar"
       aria-valuenow={progress}
       aria-valuemin={0}

packages/frappe-ui-react/src/components/dropdown/dropdown.tsx

@@ -48,12 +48,12 @@ const Dropdown: React.FC<DropdownProps> = ({
   const getBackgroundColor = (item: DropdownOption) =>
     item.theme === "red"
       ? "focus:bg-surface-red-3 data-[highlighted]:bg-surface-red-3 data-[state=open]:bg-surface-red-3"
-      : "focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3";
+      : "focus:bg-surface-gray-4 data-[highlighted]:bg-surface-gray-4 data-[state=open]:bg-surface-gray-4";
 
   const getSubmenuBackgroundColor = (item: DropdownOption) =>
     getBackgroundColor(item) +
     " data-[state=open]:bg-surface-" +
-    (item.theme === "red" ? "red-3" : "gray-3");
+    (item.theme === "red" ? "red-3" : "gray-4");
 
   const normalizeDropdownItem = useCallback(
     (option: DropdownOption): DropdownOption => {

packages/frappe-ui-react/src/components/toast/toast.tsx

@@ -19,14 +19,14 @@ const ToastComponent: React.FC<ToastProps> = ({
     switch (type) {
       case "success":
         return (
-          <CircleCheck className="flex-shrink-0 size-4 text-ink-green-2" />
+          <CircleCheck className="flex-shrink-0 size-4 text-ink-green-3" />
         );
       case "warning":
         return (
-          <AlertTriangle className="flex-shrink-0 size-4 text-ink-amber-2" />
+          <AlertTriangle className="flex-shrink-0 size-4 text-ink-amber-3" />
         );
       case "error":
-        return <Info className="flex-shrink-0 size-4 text-ink-red-2" />;
+        return <Info className="flex-shrink-0 size-4 text-ink-red-4" />;
       default:
         return null;
     }

packages/frappe-ui-react/src/theme.css

@@ -12,7 +12,7 @@ p,
 span,
 div {
   -webkit-font-smoothing: antialiased;
-  font-variation-settings: 'opsz';
+  font-variation-settings: 'opsz' 24;
 }
 
 button,