minor style nits

Author: madebyankur

auth4genai/docs.json

@@ -9,7 +9,7 @@
   },
   "name": "Auth0",
   "colors": {
-    "primary": "#6742D5",
+    "primary": "#7549F2",
     "light": "#B3A7FF",
     "dark": "#343434"
   },

auth4genai/style.css

@@ -282,6 +282,10 @@ li {
   transition: background 0.15s ease-out;
 }
 
+.dark #page-context-menu > button {
+  background: oklch(from var(--bg) l c h / 1);
+}
+
 #page-context-menu > button:hover {
   background: oklch(from var(--bg) l c h / 0.5);
   transition: background 0.15s ease-out;
@@ -368,13 +372,13 @@ li {
   /* Colors */
   --tooltip-link-color: oklch(50.99% 0.2119 287.99);
   --bg: oklch(100% 0 0);
-  --text: oklch(26.86% 0 0);
-  --text-secondary: oklch(45.12% 0.0123 264.12);
-  --text-tertiary: oklch(61.18% 0.0175 262.96);
-  --muted: oklch(55.1% 0.0234 264.36);
+  --text: oklch(26% 0 0);
+  --text-secondary: oklch(from var(--text) l c h / 0.8);
+  --text-tertiary: oklch(from var(--text) l c h / 0.6);
+  --muted: oklch(from var(--text) l c h / 0.5);
   --border: oklch(92.76% 0.0058 264.53);
   --border-secondary: oklch(95% 0.0087 260.89);
-  --accent: oklch(50.99% 0.2119 287.99);
+  --accent: oklch(55.63% 0.2368 288.08);
 
   /* Component Colors */
   --section-icon-bg: #eef2ff;
@@ -395,13 +399,13 @@ li {
 .dark {
   /* Dark Mode Colors */
   --tooltip-link-color: oklch(50.99% 0.2119 287.99);
-  --bg: #0f1115;
-  --text: #e5e7eb;
-  --text-secondary: #9ca3af;
-  --text-tertiary: #6b7280;
-  --muted: #a3a3a3;
-  --border: #262a33;
-  --border-secondary: #373e4e;
+  --bg: oklch(17.73% 0.0089 264.32);
+  --text: oklch(92% 0.0058 264.53);
+  --text-secondary: oklch(from var(--text) l c h / 0.8);
+  --text-tertiary: oklch(from var(--text) l c h / 0.6);
+  --muted: oklch(71.55% 0 0);
+  --border: oklch(28.49% 0.0175 266.34);
+  --border-secondary: oklch(36.4% 0.0293 266.43);
   --accent: oklch(50.99% 0.2119 287.99);
 
   /* Dark Mode Component Colors */
@@ -425,15 +429,17 @@ html[style*="color-scheme: dark"] {
    Frame Component
    ========================================================================== */
 .frame {
+  padding: 0;
   margin: 20px 0;
 }
 
-.frame img {
+.frame :where(img) {
   width: 100%;
 }
 
 div[data-component-part="frame-caption"] {
   padding-left: 12px;
+  padding-top: 0;
   padding-bottom: 12px;
   color: var(--);
 }

main/snippets/home.jsx

@@ -4,7 +4,7 @@ export const DocsBanner = () => {
       className="gap-5 flex justify-center p-6"
       style={{
         background:
-          "radial-gradient(1200px 800px at 25% -25%, rgba(180, 160, 255, 0.45) 0%, rgba(255, 255, 255, 1) 50%)",
+          "radial-gradient(1200px 800px at 25% -25%, rgba(180, 160, 255, 0.45) 0%, hsla(var(--bg) / 1) 50%)",
       }}
     >
       <div className="w-[min(860px,90vw)] text-center px-0 py-2 md:px-6 md:py-12">