refactor: update background colors and styling across components

- Replaced 'bg-theme-modal-background-opaque' with 'bg-theme-background' in various error fallback components for consistency.
- Updated hover background classes from 'bg-theme-button-hover' to 'bg-material-ultra-thick' in multiple UI elements.
- Removed the 'modalOpaque' setting from UI settings for cleaner configuration.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/src/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx

@@ -26,7 +26,7 @@ const FeedFoundCanBeFollowErrorFallback: FC<AppErrorFallbackProps> = ({ resetErr
   useResetErrorWhenRouteChange(resetError)
 
   return (
-    <div className="bg-theme-modal-background-opaque flex w-full flex-col overflow-auto p-2">
+    <div className="bg-theme-background flex w-full flex-col overflow-auto p-2">
       <FeedPreview feedId={feed.id}>
         {{
           actions: (

apps/desktop/src/renderer/src/components/errors/FeedNotFound.tsx

@@ -15,7 +15,7 @@ const FeedNotFoundErrorFallback: FC<AppErrorFallbackProps> = ({ resetError, erro
   useResetErrorWhenRouteChange(resetError)
   const navigate = useNavigate()
   return (
-    <div className="bg-theme-modal-background-opaque flex w-full flex-col items-center justify-center rounded-md p-2">
+    <div className="bg-theme-background flex w-full flex-col items-center justify-center rounded-md p-2">
       <div className="center m-auto flex max-w-prose flex-col gap-4 text-center">
         <div className="center mb-8 flex">
           <Logo className="size-20" />

apps/desktop/src/renderer/src/components/errors/ModalError.tsx

@@ -14,7 +14,7 @@ const ModalErrorFallback: FC<AppErrorFallbackProps> = (props) => {
   const modal = useCurrentModal()
   return (
     <m.div
-      className="bg-theme-modal-background-opaque flex flex-col items-center justify-center rounded-md p-2"
+      className="bg-theme-background flex flex-col items-center justify-center rounded-md p-2"
       exit={{
         opacity: 0,
         scale: 0.9,

apps/desktop/src/renderer/src/components/errors/PageError.tsx

@@ -11,7 +11,7 @@ const PageErrorFallback: FC<AppErrorFallbackProps> = (props) => {
   const { message, stack } = parseError(props.error)
   useResetErrorWhenRouteChange(props.resetError)
   return (
-    <div className="bg-theme-modal-background-opaque flex w-full flex-col items-center justify-center rounded-md p-2">
+    <div className="bg-theme-background flex w-full flex-col items-center justify-center rounded-md p-2">
       <div className="m-auto max-w-prose text-center">
         <div className="mb-4">
           <i className="i-mgc-bug-cute-re text-4xl text-red-500" />

apps/desktop/src/renderer/src/components/ui/modal/stacked/components.tsx

@@ -10,7 +10,7 @@ export const ModalClose = () => {
   return (
     <MotionButtonBase
       aria-label={t("words.close")}
-      className="hover:bg-theme-button-hover absolute right-6 top-6 flex size-8 items-center justify-center rounded-md duration-200"
+      className="hover:bg-material-ultra-thick absolute right-6 top-6 flex size-8 items-center justify-center rounded-md duration-200"
       onClick={dismiss}
     >
       <i className="i-mgc-close-cute-re block" />

apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -113,7 +113,6 @@ export const ModalInternal = memo(
       [close],
     )
 
-    const opaque = useUISettingKey("modalOpaque")
     const modalSettingOverlay = useUISettingKey("modalOverlay")
 
     const dismiss = useCallback(
@@ -329,13 +328,11 @@ export const ModalInternal = memo(
                   animate={animateController}
                   className={cn(
                     "relative flex flex-col overflow-hidden rounded-lg px-2 pt-2",
-                    opaque
-                      ? "bg-theme-modal-background-opaque"
-                      : "bg-theme-modal-background backdrop-blur-sm",
+                    "bg-background",
                     "shadow-modal",
                     max ? "h-[90vh] w-[90vw]" : "max-h-[90vh]",
 
-                    "border border-slate-200 dark:border-neutral-800",
+                    "border-border border",
                     modalClassName,
                   )}
                   tabIndex={-1}
@@ -373,7 +370,7 @@ export const ModalInternal = memo(
                       </Dialog.Title>
                       {canClose && (
                         <Dialog.DialogClose
-                          className="center hover:bg-theme-button-hover z-[2] rounded-lg p-2"
+                          className="center hover:bg-material-ultra-thick z-[2] rounded-lg p-2"
                           tabIndex={1}
                           onClick={close}
                         >
@@ -381,9 +378,9 @@ export const ModalInternal = memo(
                         </Dialog.DialogClose>
                       )}
                     </div>
-                    <div className="mt-2 h-px w-full shrink-0 bg-slate-200 dark:bg-neutral-800" />
+                    <div className="bg-border mx-1 mt-2 h-px shrink-0" />
 
-                    <div className="-mx-2 min-h-0 shrink grow overflow-auto px-6 py-4">
+                    <div className="-mx-2 min-h-0 shrink grow overflow-auto p-4">
                       <ModalContext modalContextProps={ModalContextProps} isTop={!!isTop}>
                         {finalChildren}
                       </ModalContext>

apps/desktop/src/renderer/src/lib/error-parser.ts

@@ -106,7 +106,7 @@ export const toastFetchError = (
           className: cn(
             "relative z-[1] float-end -mt-1",
             "border-transparent bg-theme-background text-text opacity-60 transition-opacity",
-            "hover:bg-theme-button-hover hover:opacity-100 focus:border-text-tertiary",
+            "hover:bg-material-ultra-thick hover:opacity-100 focus:border-text-tertiary",
           ),
           key: "copy",
           value: _reason,

apps/desktop/src/renderer/src/modules/customize-toolbar/dnd.tsx

@@ -45,7 +45,7 @@ export const SortableActionButton = ({ id }: { id: UniqueIdentifier }) => {
   if (!cmd) return null
   return (
     <SortableItem id={id}>
-      <div className="hover:bg-theme-button-hover flex flex-col items-center rounded-lg p-2">
+      <div className="hover:bg-material-ultra-thick flex flex-col items-center rounded-lg p-2">
         <div className="flex size-8 items-center justify-center text-xl">
           {typeof cmd.icon === "function" ? cmd.icon({ isActive: false }) : cmd.icon}
         </div>

apps/desktop/src/renderer/src/modules/discover/feed-form.tsx

@@ -367,7 +367,7 @@ const FeedInnerForm = ({
               </FormItem>
             )}
           />
-          <div className="bg-theme-modal-background-opaque absolute inset-x-0 bottom-0 right-[6px] flex flex-1 items-center justify-end gap-4 p-4">
+          <div className="bg-theme-background absolute inset-x-0 bottom-0 right-[6px] flex flex-1 items-center justify-end gap-4 p-4">
             {isSubscribed && (
               <Button
                 type="button"

apps/desktop/src/renderer/src/modules/entry-content/header.mobile.tsx

@@ -175,7 +175,7 @@ const HeaderRightActions = ({
                     stiffness: 300,
                     mass: 0.8,
                   }}
-                  className="shadow-modal bg-theme-modal-background-opaque fixed right-1 top-1 z-[1] mt-14 max-w-full rounded-lg border"
+                  className="shadow-modal bg-theme-background fixed right-1 top-1 z-[1] mt-14 max-w-full rounded-lg border"
                 >
                   <div className="flex flex-col items-center py-2">
                     {actions

apps/desktop/src/renderer/src/modules/modal/shortcuts.tsx

@@ -37,7 +37,7 @@ const ShortcutModalContent = () => {
         cursor: "grabbing",
       }}
       className={clsx(
-        "center bg-theme-modal-background-opaque absolute inset-0 m-auto flex max-h-[80vh] w-[60ch] max-w-[90vw] flex-col rounded-xl border",
+        "center bg-background absolute inset-0 m-auto flex max-h-[80vh] w-[60ch] max-w-[90vw] flex-col rounded-xl border",
 
         !modalOverlay && "shadow-modal",
       )}

apps/desktop/src/renderer/src/modules/player/corner-player.tsx

@@ -236,7 +236,7 @@ const CornerPlayerImpl = ({ hideControls, rounded }: ControlButtonProps) => {
       {!hideControls && (
         <div
           className={cn(
-            "bg-theme-modal-background-opaque absolute inset-x-0 top-0 z-[-1] flex justify-between border-t p-1 opacity-0 transition-all duration-200 ease-in-out",
+            "bg-theme-background absolute inset-x-0 top-0 z-[-1] flex justify-between border-t p-1 opacity-0 transition-all duration-200 ease-in-out",
             isMobile
               ? "-translate-y-full opacity-100"
               : "group-hover:-translate-y-full group-hover:opacity-100",
@@ -387,7 +387,7 @@ const ActionIcon = ({
 }) => (
   <Tooltip delayDuration={labelDelayDuration}>
     <TooltipTrigger
-      className="center hover:bg-theme-button-hover size-6 rounded-md text-zinc-500"
+      className="center hover:bg-material-ultra-thick size-6 rounded-md text-zinc-500"
       onClick={onClick}
       asChild
     >

apps/desktop/src/renderer/src/modules/settings/control.tsx

@@ -105,12 +105,7 @@ export const SettingTabbedSegment: Component<{
 }
 
 export const SettingDescription: Component = ({ children, className }) => (
-  <small
-    className={cn(
-      "block w-4/5 text-[13px] leading-tight text-gray-400 dark:text-neutral-500",
-      className,
-    )}
-  >
+  <small className={cn("text-text-tertiary block w-4/5 text-[13px] leading-tight", className)}>
     {children}
   </small>
 )

apps/desktop/src/renderer/src/modules/settings/modal/layout.tsx

@@ -90,7 +90,7 @@ export function SettingModalLayout(
         }}
         transition={Spring.presets.smooth}
         className={cn(
-          "border-border bg-theme-background relative flex rounded-xl rounded-br-none border",
+          "border-border relative flex overflow-hidden rounded-xl rounded-br-none border",
           !overlay && "shadow-perfect",
         )}
         style={resizeableStyle}
@@ -125,7 +125,7 @@ export function SettingModalLayout(
               <div className="absolute inset-x-0 top-0 z-[1] h-8" onPointerDown={handleDrag} />
             )}
             <div className="flex h-0 flex-1" ref={elementRef}>
-              <div className="bg-theme-modal-background-opaque flex min-h-0 min-w-44 max-w-[20ch] flex-col rounded-l-xl border-r px-2 py-6">
+              <div className="backdrop-blur-background bg-sidebar border-r-border flex min-h-0 min-w-44 max-w-[20ch] flex-col rounded-l-xl border-r px-2 py-6">
                 <div className="font-default mb-4 flex h-8 items-center gap-2 px-2 font-bold">
                   <Logo className="mr-1 size-6" />
 
@@ -140,7 +140,7 @@ export function SettingModalLayout(
                   <SettingSyncIndicator />
                 </div>
               </div>
-              <div className="relative flex h-full min-w-0 flex-1 flex-col pt-1">
+              <div className="bg-background relative flex h-full min-w-0 flex-1 flex-col pt-1">
                 <Suspense>{children}</Suspense>
               </div>
             </div>

apps/desktop/src/renderer/src/modules/settings/section.tsx

@@ -15,7 +15,7 @@ export const SettingSectionTitle: FC<{
 }> = ({ title, margin }) => (
   <div
     className={cn(
-      "shrink-0 text-sm font-medium capitalize text-gray-400 first:mt-0 dark:text-neutral-500",
+      "text-text-secondary text-headline shrink-0 font-medium capitalize first:mt-0",
       margin === "compact" ? "mb-2 mt-8" : "mb-4 mt-8",
     )}
   >

apps/desktop/src/renderer/src/modules/timeline-column/FeedCategory.tsx

@@ -304,7 +304,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
                   onClick={() => {
                     setIsCategoryEditing(false)
                   }}
-                  className="center hover:bg-theme-button-hover -ml-1 flex size-5 shrink-0 rounded-lg"
+                  className="center hover:bg-material-ultra-thick -ml-1 flex size-5 shrink-0 rounded-lg"
                 >
                   <i className="i-mgc-close-cute-re text-red-500 dark:text-red-400" />
                 </MotionButtonBase>
@@ -435,7 +435,7 @@ const RenameCategoryForm: FC<{
       />
       <MotionButtonBase
         type="submit"
-        className="center hover:bg-theme-button-hover -mr-1 flex size-5 shrink-0 rounded-lg text-green-600 dark:text-green-400"
+        className="center hover:bg-material-ultra-thick -mr-1 flex size-5 shrink-0 rounded-lg text-green-600 dark:text-green-400"
       >
         <i className="i-mgc-check-filled size-3" />
       </MotionButtonBase>

apps/desktop/src/renderer/src/modules/timeline-column/FeedList.shared.tsx

@@ -145,7 +145,7 @@ const SortButton = () => {
                 animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{ opacity: 0, scale: 0.98, y: 10 }}
                 transition={{ type: "spring", duration: 0.3 }}
-                className="border-border bg-theme-modal-background-opaque relative z-10 rounded-md border p-3 shadow-md dark:shadow-zinc-500/20"
+                className="border-border bg-theme-background relative z-10 rounded-md border p-3 shadow-md dark:shadow-zinc-500/20"
               >
                 <HoverCard.Arrow className="fill-border -translate-x-4" />
                 <section className="w-[170px] text-center">

configs/tailwind.base.config.ts

@@ -85,14 +85,6 @@ const twConfig = {
           disabled: "hsl(var(--fo-disabled) / <alpha-value>)",
 
           background: "var(--fo-background)",
-
-          modal: {
-            background: "var(--fo-modal-background)",
-            "background-opaque": "var(--fo-modal-background-opaque)",
-          },
-          button: {
-            hover: "var(--fo-button-hover)",
-          },
         },
       },
       borderRadius: {

packages/components/assets/colors-media.css

@@ -12,11 +12,6 @@
 
   --fo-background: theme(colors.background);
 
-  --fo-modal-background: theme(colors.zinc.50/0.8);
-  --fo-modal-background-opaque: theme(colors.zinc.50);
-
-  --fo-button-hover: theme(colors.zinc.500/0.1);
-
   --background: 0 0% 100%;
 
   --border: 20 5.9% 90%;
@@ -41,11 +36,6 @@
 
     --fo-background: theme(colors.background);
 
-    --fo-modal-background: theme(colors.neutral.900/0.8);
-    --fo-modal-background-opaque: theme(colors.neutral.900);
-
-    --fo-button-hover: theme(colors.neutral.400/0.15);
-
     --background: 0 0% 7.1%;
 
     --border: 0 0% 22.1%;

packages/components/assets/colors.css

@@ -15,11 +15,6 @@
   --fo-disabled: 0 0% 70%;
 
   --fo-background: theme(colors.background);
-
-  --fo-modal-background: theme(colors.zinc.50/0.8);
-  --fo-modal-background-opaque: theme(colors.zinc.50);
-
-  --fo-button-hover: theme(colors.zinc.500/0.1);
 }
 
 [data-theme="dark"] {
@@ -34,11 +29,6 @@
   --fo-disabled: 0 0% 35%;
 
   --fo-background: theme(colors.background);
-
-  --fo-modal-background: theme(colors.neutral.900/0.8);
-  --fo-modal-background-opaque: theme(colors.neutral.900);
-
-  --fo-button-hover: theme(colors.neutral.400/0.15);
 }
 
 [data-theme="light"] {

packages/components/src/ui/button/action-button.tsx

@@ -79,7 +79,7 @@ export const ActionButton = React.forwardRef<
         className={cn(
           "no-drag-region pointer-events-auto inline-flex items-center justify-center",
           active && typeof icon !== "function" && "bg-zinc-500/15 hover:bg-zinc-500/20",
-          "hover:bg-theme-button-hover data-[state=open]:bg-theme-button-hover rounded-md duration-200",
+          "hover:bg-material-ultra-thick data-[state=open]:bg-material-ultra-thick rounded-md duration-200",
           "disabled:cursor-not-allowed disabled:opacity-50",
           clickableDisabled && "cursor-not-allowed opacity-50",
           actionButtonStyleVariant.size[size],

packages/components/src/ui/button/variants.tsx

@@ -63,7 +63,7 @@ export const styledButtonVariant = cva(
           "hover:contrast-[1.10] active:contrast-125",
           tw`focus:text-accent focus:outline-none p-0 inline align-baseline`,
         ),
-        ghost: cn("px-1.5 font-semibold", "hover:bg-theme-button-hover"),
+        ghost: cn("px-1.5 font-semibold", "hover:bg-material-ultra-thick"),
       },
     },
 

packages/components/src/ui/sheet/Sheet.tsx

@@ -112,7 +112,7 @@ export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetP
             }}
             aria-describedby={undefined}
             className={cn(
-              "bg-theme-modal-background-opaque fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t pt-4",
+              "bg-theme-background fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t pt-4",
               modalClassName,
             )}
           >

packages/shared/src/settings/defaults.ts

@@ -56,7 +56,7 @@ export const defaultUISettings: UISettings = {
   // Misc
   modalOverlay: true,
   modalDraggable: true,
-  modalOpaque: true,
+
   reduceMotion: false,
   usePointerCursor: false,
 

packages/shared/src/settings/interface.ts

@@ -43,7 +43,6 @@ export interface UISettings {
   showDockBadge: boolean
   modalOverlay: boolean
   modalDraggable: boolean
-  modalOpaque: boolean
   reduceMotion: boolean
   usePointerCursor: boolean | null
   uiFontFamily: string

packages/utils/src/utils.ts

@@ -1,9 +1,27 @@
 import type { ClassValue } from "clsx"
 import { clsx } from "clsx"
 import dayjs from "dayjs"
-import { twMerge } from "tailwind-merge"
+import { extendTailwindMerge } from "tailwind-merge"
 import { parse } from "tldts"
 
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: [
+        "largeTitle",
+        "title1",
+        "title2",
+        "title3",
+        "headline",
+        "body",
+        "callout",
+        "subheadline",
+        "footnote",
+        "caption",
+      ],
+    },
+  },
+})
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }