fix: tw color alpha value (#71)

Signed-off-by: Innei <i@innei.in>
RSSNext · Jun 18, 2024 · 0080f4a · 0080f4a
1 parent 0c623ed
commit 0080f4a
Show file tree

Hide file tree

Showing 19 changed files with 71 additions and 70 deletions.
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -25,7 +25,7 @@
       <!-- Skeleton -->
       <div class="h-full w-full flex">
         <div class="w-64 shrink-0 h-full"></div>
-        <div class="grow w-full h-full bg-background"></div>
+        <div class="grow w-full h-full bg-theme-background"></div>
       </div>
     </div>
 

diff --git a/src/renderer/src/components/ui/autocomplete.tsx b/src/renderer/src/components/ui/autocomplete.tsx
@@ -68,7 +68,7 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, InputProps>(
     React.useImperativeHandle(ref, () => inputRef.current!)
 
     return (
-      <Command className="relative overflow-visible rounded-lg border bg-background [&_.lucide-search]:hidden [&_[cmdk-input-wrapper]]:border-0">
+      <Command className="relative overflow-visible rounded-lg border bg-theme-background [&_.lucide-search]:hidden [&_[cmdk-input-wrapper]]:border-0">
         <Popover.Root open={open && options.length > 0}>
           <Popover.Trigger>
             <CommandInput
@@ -108,7 +108,7 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, InputProps>(
                 >
                   <CommandGroup
                     className={cn(
-                      "absolute top-full z-10 mt-1 hidden w-full rounded-lg border bg-background [&[hidden]]:!hidden",
+                      "absolute top-full z-10 mt-1 hidden w-full rounded-lg border bg-theme-background [&[hidden]]:!hidden",
 
                       open && "block",
                     )}

diff --git a/src/renderer/src/components/ui/background/vibrancy.tsx b/src/renderer/src/components/ui/background/vibrancy.tsx
@@ -10,11 +10,13 @@ export const Vibrancy: Component<
 
   const systemDark = useMediaQuery("(prefers-color-scheme: dark)")
   const { isDark } = useDark()
+
   return (
     <div
       className={cn(
-        canVibrancy ? "bg-native/10" : "bg-native",
-        systemDark !== isDark && "bg-native",
+        canVibrancy ? "bg-native/50 dark:bg-native/10" : "bg-native",
+        // NOTE: if the system is light and the app is dark, we need to apply a background to the vibrancy, otherwise it will be transparent
+        systemDark !== isDark && "!bg-native/75",
         className,
       )}
       {...rest}

diff --git a/src/renderer/src/components/ui/button/variants.tsx b/src/renderer/src/components/ui/button/variants.tsx
@@ -17,7 +17,7 @@ export const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-theme-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-zinc-500/10 px-1.5",
@@ -59,7 +59,7 @@ export const styledButtonVariant = cva(
         ),
 
         plain: cn(
-          "bg-background font-semibold transition-colors duration-200",
+          "bg-theme-background font-semibold transition-colors duration-200",
           "border border-border hover:bg-zinc-50/20 dark:bg-neutral-900/30",
         ),
       },

diff --git a/src/renderer/src/components/ui/command.tsx b/src/renderer/src/components/ui/command.tsx
@@ -70,7 +70,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-auto p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-auto p-1 text-theme-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}

diff --git a/src/renderer/src/components/ui/image/index.module.css b/src/renderer/src/components/ui/image/index.module.css
@@ -1,7 +1,7 @@
 .swipe-wrapper {
   :global {
     .swiper {
-      @apply bg-background;
+      @apply bg-theme-background;
     }
 
     .swiper-button {

diff --git a/src/renderer/src/components/ui/input/Input.tsx b/src/renderer/src/components/ui/input/Input.tsx
@@ -18,7 +18,7 @@ export const Input = forwardRef<
       ref={ref}
       className={cn(
         "min-w-0 flex-auto appearance-none rounded-lg text-sm",
-        "bg-background px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 dark:bg-zinc-700/[0.15]",
+        "bg-theme-background px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 dark:bg-zinc-700/[0.15]",
         "ring-theme-accent/20 duration-200 focus:border-theme-accent/80 focus:outline-none focus:ring-2",
         "border border-border",
         "dark:text-zinc-200 dark:placeholder:text-zinc-500",

diff --git a/src/renderer/src/components/ui/navigation-menu.tsx b/src/renderer/src/components/ui/navigation-menu.tsx
@@ -40,7 +40,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-theme-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 )
 
 const NavigationMenuTrigger = React.forwardRef<

diff --git a/src/renderer/src/components/ui/sonner.tsx b/src/renderer/src/components/ui/sonner.tsx
@@ -12,7 +12,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       className="toaster group"
       toastOptions={{
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          toast: "group toast group-[.toaster]:bg-theme-background group-[.toaster]:text-theme-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",

diff --git a/src/renderer/src/components/ui/switch.tsx b/src/renderer/src/components/ui/switch.tsx
@@ -18,7 +18,7 @@ const Switch = React.forwardRef<
     <SwitchPrimitives.Thumb
       className={cn(
         "pointer-events-none block size-5 rounded-full shadow-lg ring-0 !transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-        "bg-background dark:bg-neutral-300",
+        "bg-theme-background dark:bg-neutral-300",
       )}
     />
   </SwitchPrimitives.Root>

diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx
@@ -67,7 +67,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground",
+      "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-theme-foreground",
       tabsTriggerVariants({ variant }),
       className,
     )}

diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
@@ -24,7 +24,7 @@ const LoginModalContent = () => {
   return (
     <div className="center flex h-full" onClick={modal.dismiss}>
       <m.div
-        className="shadow-modal rounded-lg border border-border bg-background p-4 px-8 pb-8"
+        className="shadow-modal rounded-lg border border-border bg-theme-background p-4 px-8 pb-8"
         onClick={stopPropagation}
         {...modalMontionConfig}
       >

diff --git a/src/renderer/src/modules/entry-column/item.tsx b/src/renderer/src/modules/entry-column/item.tsx
@@ -114,7 +114,7 @@ function EntryItemImpl({ entry, view }: { entry: EntryModel, view?: number }) {
     >
       <div
         className={cn(
-          "rounded-md bg-background transition-colors",
+          "rounded-md bg-theme-background transition-colors",
           !views[view || 0].wideMode &&
           activeEntry === entry.entries.id &&
           "bg-theme-item-active",

diff --git a/src/renderer/src/pages/(main)/(context)/layout.tsx b/src/renderer/src/pages/(main)/(context)/layout.tsx
@@ -8,7 +8,7 @@ export function Component() {
       <div className="w-64 shrink-0 border-r">
         <FeedColumn />
       </div>
-      <main ref={setMainContainerElement} className="flex flex-1 bg-background !outline-none" tabIndex={-1}>
+      <main ref={setMainContainerElement} className="flex flex-1 bg-theme-background !outline-none" tabIndex={-1}>
         <Outlet />
       </main>
     </div>

diff --git a/src/renderer/src/pages/add/index.tsx b/src/renderer/src/pages/add/index.tsx
@@ -16,7 +16,7 @@ export function Component() {
     }
   }, [])
   return (
-    <div className="h-full overflow-hidden bg-background">
+    <div className="h-full overflow-hidden bg-theme-background">
       <FeedForm url={url} id={id} defaultView={defaultView as FeedViewType} />
     </div>
   )

diff --git a/src/renderer/src/pages/settings/layout.tsx b/src/renderer/src/pages/settings/layout.tsx
@@ -19,16 +19,16 @@ export function Component() {
           {settingTabs.map((t) => (
             <Link
               key={t.path}
-              className={`my-1 flex items-center rounded-md px-2.5 py-0.5 leading-loose text-foreground/70 transition-colors ${
-                tab === t.path ? "bg-native-active text-foreground/90" : ""
+              className={`my-1 flex items-center rounded-md px-2.5 py-0.5 leading-loose text-theme-foreground/70 transition-colors ${
+                tab === t.path ? "bg-native-active text-theme-foreground/90" : ""
               }`}
               to={`/settings/${t.path}`}
             >
               <SettingsTitle path={t.path} className="text-[15px] font-medium" />
             </Link>
           ))}
         </Vibrancy>
-        <div className="h-screen flex-1 overflow-y-auto bg-background p-8">
+        <div className="h-screen flex-1 overflow-y-auto bg-theme-background p-8">
           <Outlet />
         </div>
       </div>

diff --git a/src/renderer/src/styles/colors.css b/src/renderer/src/styles/colors.css
@@ -1,35 +1,34 @@
 :root {
-  --fo-vibrancy-foreground: theme(colors.zinc.500);
   --fo-vibrancy-background: theme(colors.native.active);
+  --fo-vibrancy-foreground: 0, 0%, 50%;
+  --fo-text-primary: 0, 0%, 10%;
 
-  --fo-item-active: theme(colors.native.active/0.4);
-  --fo-item-hover: theme(colors.native.active/0.2);
+  /* TODO replace with own color */
+  --fo-background: theme(colors.background);
 
-  --fo-tooltip-background: theme(colors.zinc.50);
-  --fo-tooltip-foreground: theme(colors.neutral.950);
+  --fo-tooltip-background: 0, 0%, 95%;
+  --fo-tooltip-foreground: 0, 0%, 10%;
 
-  --fo-inactive: theme(colors.zinc.200);
-  --fo-disabled: theme(colors.zinc.300);
+  --fo-inactive: 0, 0%, 80%;
+  --fo-disabled: 0, 0%, 70%;
 
-  --fo-text-primary: theme(colors.neutral.950);
-  /* TODO replace with own color */
-  --fo-background: theme(colors.background);
+  --fo-item-active: theme(colors.native.active/0.4);
+  --fo-item-hover: theme(colors.native.active/0.2);
 }
 
 [data-theme="dark"] {
-  --fo-vibrancy-foreground: theme(colors.zinc.400);
-  /* --fo-vibrancy-background: theme(colors.zinc.600/10); */
+  --fo-vibrancy-foreground: 0, 0%, 63%;
+
   --fo-vibrancy-background: theme(colors.native.active);
 
   --fo-item-active: theme(colors.neutral.700/0.4);
   --fo-item-hover: theme(colors.native.active/0.2);
+  --fo-tooltip-background: 0, 0%, 15%;
+  --fo-tooltip-foreground: 0, 0%, 96%;
 
-  --fo-tooltip-background: theme(colors.zinc.800);
-  --fo-tooltip-foreground: theme(colors.zinc.100);
-
-  --fo-inactive: theme(colors.zinc.500);
-  --fo-disabled: theme(colors.zinc.600);
+  --fo-inactive: 0, 0%, 50%;
+  --fo-disabled: 0, 0%, 35%;
 
-  --fo-text-primary: theme(colors.zinc.200);
+  --fo-text-primary: 0, 0%, 80%;
   --fo-background: theme(colors.background);
 }
diff --git a/src/renderer/src/styles/tailwind.css b/src/renderer/src/styles/tailwind.css
@@ -32,13 +32,13 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
 
-    --native: 30 3.2% 87.8%;
-    --native-active: 60 1.8% 78.4%;
+    --native: 240 1.6% 87.6%;
+    --native-active: 240 0.9% 78.2%;
     --radius: 0.5rem;
   }
 
   [data-theme="dark"] {
-    --background: 0, 0%, 11.8%;
+    --background: 0 0% 11.8%;
     --foreground: 0 0% 98%;
 
     --card: 240 10% 3.9%;
@@ -76,6 +76,6 @@
     @apply border-border;
   }
   body {
-    @apply text-foreground/75;
+    @apply text-theme-foreground;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,42 +31,42 @@ export default resolveConfig({
         theme: "var(--fo-font-family)",
       },
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
         },
         native: {
-          DEFAULT: "hsl(var(--native))",
-          active: "hsl(var(--native-active))",
+          DEFAULT: "hsl(var(--native) / <alpha-value>)",
+          active: "hsl(var(--native-active) / <alpha-value>)",
         },
 
         theme: {
@@ -86,7 +86,7 @@ export default resolveConfig({
             950: "#461304",
           },
 
-          vibrancyFg: "var(--fo-vibrancy-foreground)",
+          vibrancyFg: "hsl(var(--fo-vibrancy-foreground), <alpha-value>)",
           vibrancyBg: "var(--fo-vibrancy-background)",
 
           item: {
@@ -95,14 +95,14 @@ export default resolveConfig({
           },
 
           tooltip: {
-            background: "var(--fo-tooltip-background)",
-            foreground: "var(--fo-tooltip-foreground)",
+            background: "hsl(var(--fo-tooltip-background), <alpha-value>)",
+            foreground: "hsl(var(--fo-tooltip-foreground), <alpha-value>)",
           },
 
-          inactive: "var(--fo-inactive)",
-          disabled: "var(--fo-disabled)",
+          inactive: "hsl(var(--fo-inactive), <alpha-value>)",
+          disabled: "hsl(var(--fo-disabled), <alpha-value>)",
 
-          foreground: "var(--fo-text-foreground)",
+          foreground: "hsl(var(--fo-text-primary), <alpha-value>)",
           background: "var(--fo-background)",
         },
       },