Merge pull request #61 from rtCamp/fix/dark-components

Fix: UI/UX in dark mode

Author: mohdsayed

.storybook/preview-styles.css

@@ -18,4 +18,8 @@
  #storybook-docs .sbdocs-content h2 {
    font-weight: 800;
    font-size: 24px;
- }
+ }
+
+ .dark body {
+	 background-color: #171717 !important;
+ }

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/rating/rating.tsx

@@ -35,7 +35,7 @@ const Rating: React.FC<RatingProps> = ({
       size === "xl" ? "size-7" : "",
       index <= hoveredRating && index > rating ? "!fill-yellow-200" : "",
       index <= rating ? "!fill-yellow-500" : "",
-      index > rating && index > hoveredRating ? "fill-gray-300" : "",
+      index > rating && index > hoveredRating ? "fill-gray-300 dark:fill-gray-900" : "",
       !readonly ? "cursor-pointer" : "",
       "text-transparent",
       "mr-0.5",

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

@@ -36,7 +36,7 @@ const Switch: React.FC<SwitchProps> = ({
     "disabled:cursor-not-allowed disabled:bg-surface-gray-3",
     value
       ? "bg-surface-gray-7 enabled:hover:bg-surface-gray-6 active:bg-surface-gray-5 group-hover:enabled:bg-surface-gray-6"
-      : "bg-surface-gray-4 enabled:hover:bg-gray-400 active:bg-gray-500 group-hover:enabled:bg-gray-400",
+      : "bg-surface-gray-4 enabled:hover:bg-gray-800 active:bg-gray-500 group-hover:enabled:bg-gray-800",
     size === "md" ? "h-5 w-8 border-[3px]" : "h-4 w-[26px] border-2",
   ].join(" ");
 
@@ -75,7 +75,7 @@ const Switch: React.FC<SwitchProps> = ({
       );
       classes.push(size === "md" ? "px-3 py-1.5" : "px-2.5 py-1.5");
     } else if (switchType === SwitchVariant.WITH_LABEL_AND_DESCRIPTION) {
-      classes.push("items-start");
+      classes.push("group items-start");
       classes.push(size === "md" ? "space-x-3.5" : "space-x-2.5");
     }
     return classes.join(" ");

packages/frappe-ui-react/src/components/tabButtons/index.tsx

@@ -27,7 +27,7 @@ const TabButtons = ({
 }: TabButtonsProps) => {
   return (
     <RadioGroup value={value} onChange={onChange} className={className}>
-      <div className="flex space-x-0.5 rounded-md bg-surface-gray-2 h-7 items-center px-[1px] text-sm">
+      <div className="flex space-x-0.5 rounded-md bg-surface-gray-2 h-7 items-center px-[1px] text-sm border border-gray-200">
         {buttons.map((button) => (
           <Radio
             key={button.value || button.label}

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,