feat: hook up color and theme variables (#758)

* feat: hook up color and theme variables * feat: remove app dark mode * fix: add back grid * fix: remove some more preset dark mode stuff * feat: dark mode on auth toggle * fix: one more instance of removing dark mode
alchemyplatform · Jun 25, 2024 · 897a136 · 897a136
1 parent 635933f
commit 897a136
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 85 deletions.
diff --git a/examples/ui-demo/components/ui/switch.tsx b/examples/ui-demo/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-btn-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

diff --git a/examples/ui-demo/public/icons/email-pending-1.svg b/examples/ui-demo/public/icons/email-pending-1.svg
diff --git a/examples/ui-demo/public/icons/email-pending-2.svg b/examples/ui-demo/public/icons/email-pending-2.svg
diff --git a/examples/ui-demo/public/icons/email-pending-3.svg b/examples/ui-demo/public/icons/email-pending-3.svg
diff --git a/examples/ui-demo/public/icons/email-pending-4.svg b/examples/ui-demo/public/icons/email-pending-4.svg
diff --git a/examples/ui-demo/public/images/grid.png b/examples/ui-demo/public/images/grid.png
diff --git a/examples/ui-demo/src/app/globals.css b/examples/ui-demo/src/app/globals.css
@@ -16,7 +16,7 @@
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
+    --secondary: 215 19% 35%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
@@ -33,36 +33,9 @@
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --akui-fg-accent-brand: #363FF9;
+    --akui-btn-primary: #363FF9;
   }
 }
 

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
@@ -36,7 +36,7 @@ export default function Home() {
         {/* Header */}
         <div className="flex justify-between items-center">
           <h2 className="font-semibold text-xl">Demo</h2>
-          <div className="flex gap-4 text-fg-secondary">
+          <div className="flex gap-4 text-secondary">
             <Button className="border border-gray-400">
               Integration call
               <PhoneIcon className="ml-2 h-4 w-4" />
@@ -50,10 +50,10 @@ export default function Home() {
 
         {/* Content */}
         <div className="flex flex-1 gap-6 overflow-hidden">
-          <div className="flex flex-col  basis-0 flex-1 bg-white border border-static rounded-lg p-6 overflow-y-scroll">
+          <div className="flex flex-col  basis-0 flex-1 bg-white border border-border rounded-lg p-6 overflow-y-scroll">
             <Configuration />
           </div>
-          <div className="flex flex-col flex-[2] basis-0 relative bg-white border border-static rounded-lg">
+          <div className="flex flex-col flex-[2] basis-0 relative bg-white border border-border rounded-lg">
             <div className="absolute top-6 right-6 flex items-center gap-2">
               <div className="bg-purple-50 text-[#8B5CF6] px-2 py-1 rounded text-xs font-semibold">
                 Configuration preview

diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
@@ -3,7 +3,7 @@ import { sepolia } from "@aa-sdk/core";
 import { createConfig } from "@account-kit/core";
 import { AlchemyAccountProvider, AlchemyAccountsProviderProps } from "@account-kit/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { PropsWithChildren, Suspense, useMemo, useState } from "react";
+import { PropsWithChildren, Suspense, useEffect, useMemo, useState } from "react";
 import { Config, ConfigContext, DEFAULT_CONFIG } from "./state";
 
 const alchemyConfig = createConfig({
@@ -28,6 +28,20 @@ export const Providers = (props: PropsWithChildren<{}>) => {
     };
   }, [config]);
 
+  useEffect(() => {
+    if (!config.ui.primaryColor) return 
+
+    const root = document.querySelector(':root') as HTMLElement;
+    root?.style.setProperty("--akui-fg-accent-brand", config.ui.primaryColor)
+    root?.style.setProperty("--akui-btn-primary", config.ui.primaryColor)
+
+    if (config.ui.theme === 'dark') {
+      root.classList.add("dark")
+    } else {
+      root.classList.remove("dark")
+    }
+  }, [config])
+
   return (
     <Suspense>
       <QueryClientProvider client={queryClient}>

diff --git a/examples/ui-demo/src/components/configuration/PhotoUpload.tsx b/examples/ui-demo/src/components/configuration/PhotoUpload.tsx
@@ -60,7 +60,7 @@ export function PhotoUploads({ mode }: { mode: "dark" | "light" }) {
         )}
       </div>
       <div className="flex flex-col gap-[2px]">
-        <div className="text-fg-secondary text-xs font-semibold">
+        <div className="text-secondary text-xs font-semibold">
           {mode === "light" ? "Light" : "Dark"} mode
         </div>
         <div className="text-xs text-gray-500 font-medium">

diff --git a/examples/ui-demo/src/components/configuration/Styling.tsx b/examples/ui-demo/src/components/configuration/Styling.tsx
@@ -9,6 +9,7 @@ import { useState } from "react";
 import Image from "next/image";
 import { FileCode } from "lucide-react";
 import ExternalLink from "../shared/ExternalLink";
+import { IllustrationStyle } from "../icons/illustration-style";
 
 export function Styling({ className }: { className?: string }) {
   const { config, setConfig } = useConfig();
@@ -25,15 +26,15 @@ export function Styling({ className }: { className?: string }) {
 
   return (
     <div className={cn("flex flex-col", className)}>
-      <div className="flex flex-col gap-4 border-b border-static py-6">
+      <div className="flex flex-col gap-4 border-b border-border py-6">
         <p className="font-semibold text-secondary-foreground text-sm">Theme</p>
         <ThemeSwitch
           checked={config.ui.theme === "dark"}
           onCheckedChange={onSwitchTheme}
         />
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
+      <div className="flex flex-col gap-4 border-b border-border py-6 items-start">
         <div className="flex flex-col gap-2">
           <p className="font-semibold text-secondary-foreground text-sm">
             Color
@@ -45,7 +46,7 @@ export function Styling({ className }: { className?: string }) {
         <ColorPicker />
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
+      <div className="flex flex-col gap-4 border-b border-border py-6 items-start">
         <div className="flex flex-col gap-2">
           <p className="font-semibold text-secondary-foreground text-sm">
             Logo
@@ -58,7 +59,7 @@ export function Styling({ className }: { className?: string }) {
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
+      <div className="flex flex-col gap-4 border-b border-border py-6 items-start">
         <div className="flex flex-col gap-2 self-stretch">
           <p className="font-semibold text-secondary-foreground text-sm">
             Corner radius
@@ -112,7 +113,7 @@ export function CornerRadiusOptions() {
         <button
           className={`${
             option.className
-          } py-2 flex-1 basis-0 bg-[#EFF4F9] text-fg-accent-brand hover:opacity-80 ${
+          } py-2 flex-1 basis-0 bg-[#EFF4F9] text-[#363FF9] hover:opacity-80 ${
             option.id === borderRadius
               ? "border-2 border-[rgba(0, 0, 0, 0.01)]"
               : "border-2 border-white"
@@ -143,7 +144,7 @@ const options = [
 function IllustrationStyleOptions() {
   const {
     config: {
-      ui: { illustrationStyle },
+      ui: { illustrationStyle, primaryColor },
     },
     setConfig,
   } = useConfig();
@@ -176,7 +177,7 @@ function IllustrationStyleOptions() {
           }}
           onClick={() => onChange(i + 1)}
         >
-          <Image src={option} width={48} height={48} alt="Email icon" />
+          <IllustrationStyle fill={primaryColor} variant={i+1} />
         </button>
       ))}
     </div>
@@ -186,8 +187,8 @@ function IllustrationStyleOptions() {
 function LearnMore() {
   return (
     <div className="flex items-center gap-1 text-xs text-center self-center mt-8">
-      <FileCode className="stroke-fg-secondary stroke-1" size={18} />
-      <div className="text-fg-secondary">Want to fully configure the CSS?</div>
+      <FileCode className="stroke-secondary stroke-1" size={18} />
+      <div className="text-secondary">Want to fully configure the CSS?</div>
       <ExternalLink className="font-semibold text-blue-600" href="#">
         Click to learn how
       </ExternalLink>