feat: remove emphasis color and auto generate theme color

src/components/dashboard/DashboardSidebar.tsx

@@ -29,7 +29,7 @@ export const DashboardSidebar: React.FC<{
       {children(isOpen)}
       <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
       <div
-        className="absolute top-5 -right-3 bg-accent shadow-button rounded-full cursor-pointer"
+        className="absolute top-5 -right-3 bg-accent rounded-full cursor-pointer"
         onClick={() => setIsOpen(!isOpen)}
       >
         {isOpen ? (

src/components/site/SiteHeader.tsx

@@ -117,6 +117,7 @@ export const SiteHeader: React.FC<{
 
   const [averageColor, setAverageColor] = useState<string>()
   const [hoverColor, setHoverColor] = useState<string>()
+  const [autoThemeColor, setAutoThemeColor] = useState<string>()
 
   useEffect(() => {
     if (bannerRef?.current) {
@@ -124,7 +125,8 @@ export const SiteHeader: React.FC<{
         .getColorAsync(bannerRef.current)
         .then((color) => {
           setAverageColor(chroma(color.hex).hex())
-          setHoverColor(chroma(color.hex).luminance(0.9).hex())
+          setHoverColor(chroma(color.hex).luminance(0.8).hex())
+          setAutoThemeColor(chroma(color.hex).saturate(3).luminance(0.3).hex())
         })
         .catch((e) => {
           console.warn(e)
@@ -134,7 +136,8 @@ export const SiteHeader: React.FC<{
         .getColorAsync(avatarRef.current)
         .then((color) => {
           setAverageColor(chroma(color.hex).luminance(0.95).hex())
-          setHoverColor(chroma(color.hex).luminance(0.9).hex())
+          setHoverColor(chroma(color.hex).luminance(0.8).hex())
+          setAutoThemeColor(chroma(color.hex).saturate(3).luminance(0.3).hex())
         })
         .catch((e) => {
           console.warn(e)
@@ -148,6 +151,7 @@ export const SiteHeader: React.FC<{
         <style jsx global>{`
           :root {
             --hover-color: ${hoverColor};
+            --auto-theme-color: ${autoThemeColor};
           }
         `}</style>
       )}

src/components/ui/Button.tsx

@@ -62,7 +62,7 @@ export const Button = React.forwardRef<
         isAutoWidth && `is-auto-width`,
         size && `is-${size}`,
         `is-${variant || "primary"}`,
-        rounded === "full" ? "rounded-full" : "rounded-lg",
+        rounded === "full" ? "rounded-full" : "rounded-md",
       )}
     >
       {children}

src/css/prose.css

@@ -83,7 +83,7 @@
 }
 
 .prose a {
-  @apply text-accent-emphasis;
+  @apply text-accent;
   @apply hover:underline;
 }
 

src/css/tailwind.css

@@ -37,10 +37,10 @@ a {
   @apply h-8;
   @apply px-5;
   @apply min-w-[100px];
-  @apply shadow-button;
   @apply whitespace-nowrap;
   @apply font-medium;
   @apply transition-colors;
+  @apply active:scale-95;
 }
 
 .button.is-auto-width {
@@ -75,7 +75,6 @@ a {
 }
 
 .button.is-primary {
-  --shadow-color-button: var(--theme-color-emphasis);
   @apply text-white;
   @apply fill-accent;
   @apply bg-accent;
@@ -138,17 +137,14 @@ a {
 }
 
 .button.is-green {
-  --shadow-color-button: theme("colors.green.700");
   @apply bg-green-500 hover:bg-green-600 focus:bg-green-700;
 }
 
 .button.is-red {
-  --shadow-color-button: theme("colors.red.700");
   @apply bg-red-500 hover:bg-red-600 focus:bg-red-700;
 }
 
 .button.is-gray {
-  --shadow-color-button: theme("colors.gray.700");
   @apply bg-gray-500 hover:bg-gray-600 focus:bg-gray-700;
 }
 

src/css/variables.css

@@ -1,10 +1,7 @@
 :root {
   --border-color: #eee;
   --font-fans: theme("fontFamily.sans");
-  --shadow-color-button: theme("colors.gray.300");
-  --theme-color: theme("colors.indigo.600");
-  --theme-color-dark: theme("colors.indigo.700");
-  --theme-color-emphasis: var(--theme-color-dark);
+  --theme-color: var(--auto-theme-color, #0f172a);
   --header-height: auto;
   /* Accent color for form controls */
   accent-color: var(--theme-color);

src/pages/dashboard/[subdomain]/settings/css.tsx

@@ -84,11 +84,6 @@ export default function SettingsCSSPage() {
                 --theme-color: #4f46e5;
               </span>
             </p>
-            <p className="pl-2">
-              <span className="bg-zinc-200 rounded-lg px-2">
-                --theme-color-emphasis: #4338ca;
-              </span>
-            </p>
             <p className="pl-2">
               <span className="bg-zinc-200 rounded-lg px-2">
                 --header-height: auto;

src/pages/index.tsx

@@ -348,13 +348,9 @@ export default function Home() {
                   {showcaseSites.data?.map((site: any) => (
                     <li className="inline-flex align-middle" key={site.handle}>
                       <UniLink
-                        href={
-                          site.custom_domain
-                            ? `https://${site.custom_domain}`
-                            : getSiteLink({
-                                subdomain: site.handle,
-                              })
-                        }
+                        href={getSiteLink({
+                          subdomain: site.handle,
+                        })}
                         className="inline-flex align-middle w-full"
                       >
                         <CharacterFloatCard siteId={site.handle}>

tailwind.config.js

@@ -12,7 +12,6 @@ module.exports = {
       colors: {
         border: "var(--border-color)",
         accent: "var(--theme-color)",
-        "accent-emphasis": "var(--theme-color-emphasis)",
         hover: "var(--hover-color)",
       },
       spacing: {