Use explicit shared theme effects

Author: iPior

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@ipior/custom-tailwind-shadcn-themes/styles.css";
+@import "@ipior/custom-tailwind-shadcn-themes/effects.css";
 
 @layer base {
   * {

src/app.css

@@ -50,7 +50,7 @@ export function LayoutDropdown({ className }: { className?: string }) {
       {open && (
         <div
           role="menu"
-          className="bloom-glass absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-sketch border border-border bg-card/95 p-1.5 shadow-sketch"
+          className="theme-glass absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-sketch border border-border bg-card/95 p-1.5 shadow-sketch"
         >
           <div className="px-2.5 pb-1.5 pt-1 font-serif text-[11px] italic tracking-wide text-muted-foreground">
             Layout

src/components/LayoutDropdown.tsx

@@ -52,7 +52,7 @@ export function ThemeDropdown({ className }: { className?: string }) {
       {open && (
         <div
           role="menu"
-          className="bloom-glass absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-sketch border border-border bg-card/95 p-1.5 shadow-sketch"
+          className="theme-glass absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-sketch border border-border bg-card/95 p-1.5 shadow-sketch"
         >
           <div className="px-2.5 pb-1.5 pt-1 font-serif text-[11px] italic tracking-wide text-muted-foreground">
             Theme

src/components/ThemeDropdown.tsx

@@ -22,14 +22,14 @@ export default function Bento() {
 
   return (
     <main className="relative min-h-screen overflow-hidden bg-background font-sans text-foreground">
-      <div className="bloom-mesh" aria-hidden="true">
-        <div className="bloom-blob b1" />
-        <div className="bloom-blob b2" />
-        <div className="bloom-blob b3" />
-        <div className="bloom-blob b4" />
-        <div className="bloom-blob b5" />
+      <div className="theme-mesh" aria-hidden="true">
+        <div className="theme-blob b1" />
+        <div className="theme-blob b2" />
+        <div className="theme-blob b3" />
+        <div className="theme-blob b4" />
+        <div className="theme-blob b5" />
       </div>
-      <div className="bloom-grain" aria-hidden="true" />
+      <div className="theme-grain" aria-hidden="true" />
 
       <div className="relative z-10 mx-auto w-full max-w-6xl px-4 pb-10 pt-6 sm:px-6 sm:pt-10">
         <header className="mb-5 flex items-center justify-between gap-4">

src/layouts/Bento.tsx

@@ -55,14 +55,14 @@ export default function Console() {
       className="relative flex min-h-screen items-start justify-center bg-background px-4 pb-28 pt-10 text-foreground sm:items-center sm:pt-10"
       style={{ fontFamily: MONO }}
     >
-      <div className="bloom-mesh" aria-hidden="true">
-        <div className="bloom-blob b1" />
-        <div className="bloom-blob b2" />
-        <div className="bloom-blob b3" />
-        <div className="bloom-blob b4" />
-        <div className="bloom-blob b5" />
+      <div className="theme-mesh" aria-hidden="true">
+        <div className="theme-blob b1" />
+        <div className="theme-blob b2" />
+        <div className="theme-blob b3" />
+        <div className="theme-blob b4" />
+        <div className="theme-blob b5" />
       </div>
-      <div className="bloom-grain" aria-hidden="true" />
+      <div className="theme-grain" aria-hidden="true" />
 
       <div className="hp-fade relative z-10 w-full max-w-3xl">
         <div className="mb-3 flex items-center justify-between">