feat: ✨ Make branding adapt to our colors

components/Button.tsx

@@ -17,13 +17,13 @@ function ArrowIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 const variantStyles = {
     primary:
-        "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300",
+        "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300",
     secondary:
         "rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
-    filled: "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-400",
+    filled: "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-500 dark:text-white dark:hover:bg-brand-400",
     outline:
         "rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
-    text: "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500",
+    text: "text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-500",
 };
 
 type ButtonProps = {

components/Code.tsx

@@ -79,7 +79,7 @@ function CopyButton({ code }: { code: string }) {
             className={clsx(
                 "group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
                 copied
-                    ? "bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20"
+                    ? "bg-brand-400/10 ring-1 ring-inset ring-brand-400/20"
                     : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
             )}
             onClick={() => {
@@ -101,7 +101,7 @@ function CopyButton({ code }: { code: string }) {
             <span
                 aria-hidden={!copied}
                 className={clsx(
-                    "pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300",
+                    "pointer-events-none absolute inset-0 flex items-center justify-center text-brand-400 transition duration-300",
                     !copied && "translate-y-1.5 opacity-0",
                 )}
             >
@@ -200,7 +200,7 @@ function CodeGroupHeader({
                             className={clsx(
                                 "border-b py-3 transition ui-not-focus-visible:outline-none",
                                 childIndex === selectedIndex
-                                    ? "border-emerald-500 text-emerald-400"
+                                    ? "border-brand-500 text-brand-400"
                                     : "border-transparent text-zinc-400 hover:text-zinc-300",
                             )}
                         >

components/Feedback.tsx

@@ -66,8 +66,8 @@ const FeedbackThanks = forwardRef<ElementRef<"div">>(
                 ref={ref}
                 className="absolute inset-0 flex justify-center md:justify-start"
             >
-                <div className="flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pl-1.5 pr-3 text-sm text-emerald-900 ring-1 ring-inset ring-emerald-500/20 dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30">
+                <div className="flex items-center gap-3 rounded-full bg-brand-50/50 py-1 pl-1.5 pr-3 text-sm text-brand-900 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/5 dark:text-brand-200 dark:ring-brand-500/30">
-                    <CheckIcon className="h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />
+                    <CheckIcon className="h-5 w-5 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
                     Thanks for your feedback!
                 </div>
             </div>

components/HeroPattern.tsx

@@ -4,7 +4,7 @@ export function HeroPattern() {
     return (
         <div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
             <div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
-                <div className="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100">
+                <div className="absolute inset-0 bg-gradient-to-r from-brand-400 to-secondary-600 opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-brand-400/30 dark:to-secondary-600/30 dark:opacity-100">
                     <GridPattern
                         width={72}
                         height={56}

components/Logo.tsx

@@ -4,7 +4,7 @@ export function Logo(props: ComponentPropsWithoutRef<"svg">) {
     return (
         <svg viewBox="0 0 99 24" aria-hidden="true" {...props}>
             <path
-                className="fill-emerald-400"
+                className="fill-brand-400"
                 d="M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
             />
             <path

components/Navigation.tsx

@@ -138,7 +138,7 @@ function ActivePageMarker({
     return (
         <motion.div
             layout={true}
-            className="absolute left-2 h-6 w-px bg-emerald-500"
+            className="absolute left-2 h-6 w-px bg-brand-500"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1, transition: { delay: 0.2 } }}
             exit={{ opacity: 0 }}

components/Resources.tsx

@@ -89,8 +89,8 @@ const resources: Resource[] = [
 
 function ResourceIcon({ icon: Icon }: { icon: Resource["icon"] }) {
     return (
-        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-emerald-300/10 dark:group-hover:ring-emerald-400">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-brand-300/10 dark:group-hover:ring-brand-400">
-            <Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-emerald-300/10 dark:group-hover:stroke-emerald-400" />
+            <Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-brand-300/10 dark:group-hover:stroke-brand-400" />
         </div>
     );
 }
@@ -118,7 +118,7 @@ function ResourcePattern({
                 />
             </div>
             <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#202D2E] dark:to-[#303428]"
+                className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
                 style={style}
             />
             <motion.div

components/Search.tsx

@@ -164,7 +164,7 @@ function LoadingIcon(props: ComponentPropsWithoutRef<"svg">) {
 function HighlightQuery({ text, query }: { text: string; query: string }) {
     return (
         <Highlighter
-            highlightClassName="underline bg-transparent text-emerald-500"
+            highlightClassName="underline bg-transparent text-brand-500"
             searchWords={[query]}
             autoEscape={true}
             textToHighlight={text}
@@ -210,7 +210,7 @@ function SearchResult({
             <div
                 id={`${id}-title`}
                 aria-hidden="true"
-                className="text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white"
+                className="text-sm font-medium text-zinc-900 group-aria-selected:text-brand-500 dark:text-white"
             >
                 <HighlightQuery text={result.title} query={query} />
             </div>
@@ -321,7 +321,7 @@ const SearchInput = forwardRef<
             />
             {autocompleteState.status === "stalled" && (
                 <div className="absolute inset-y-0 right-3 flex items-center">
-                    <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />
+                    <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400" />
                 </div>
             )}
         </div>

components/Tag.tsx

@@ -6,9 +6,9 @@ const variantStyles = {
 };
 
 const colorStyles = {
-    emerald: {
+    brand: {
-        small: "text-emerald-500 dark:text-emerald-400",
+        small: "text-brand-500 dark:text-brand-400",
-        medium: "ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400",
+        medium: "ring-brand-300 dark:ring-brand-400/30 bg-brand-400/10 text-brand-500 dark:text-brand-400",
     },
     sky: {
         small: "text-sky-500",
@@ -29,7 +29,7 @@ const colorStyles = {
 };
 
 const valueColorMap = {
-    GET: "emerald",
+    GET: "brand",
     POST: "sky",
     PUT: "amber",
     DELETE: "rose",
@@ -38,7 +38,7 @@ const valueColorMap = {
 export function Tag({
     children,
     variant = "medium",
-    color = valueColorMap[children] ?? "emerald",
+    color = valueColorMap[children] ?? "brand",
 }: {
     children: keyof typeof valueColorMap;
     variant?: keyof typeof variantStyles;

components/mdx.tsx

@@ -46,8 +46,8 @@ function InfoIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 export function Note({ children }: { children: ReactNode }) {
     return (
-        <div className="my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 leading-6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:theme(colors.emerald.300)] dark:[--tw-prose-links:theme(colors.white)]">
+        <div className="my-6 flex gap-2.5 rounded-2xl border border-brand-500/20 bg-brand-50/50 p-4 leading-6 text-brand-900 dark:border-brand-500/30 dark:bg-brand-500/5 dark:text-brand-200 dark:[--tw-prose-links-hover:theme(colors.brand.300)] dark:[--tw-prose-links:theme(colors.white)]">
-            <InfoIcon className="mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />
+            <InfoIcon className="mt-1 h-4 w-4 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
             <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
                 {children}
             </div>

styles/tailwind.css

@@ -1,13 +1,13 @@
 @layer base {
   :root {
     --shiki-color-text: theme('colors.white');
-    --shiki-token-constant: theme('colors.emerald.300');
+    --shiki-token-constant: theme('colors.brand.300');
-    --shiki-token-string: theme('colors.emerald.300');
+    --shiki-token-string: theme('colors.brand.300');
     --shiki-token-comment: theme('colors.zinc.500');
     --shiki-token-keyword: theme('colors.sky.300');
     --shiki-token-parameter: theme('colors.pink.300');
     --shiki-token-function: theme('colors.violet.300');
-    --shiki-token-string-expression: theme('colors.emerald.300');
+    --shiki-token-string-expression: theme('colors.brand.300');
     --shiki-token-punctuation: theme('colors.zinc.200');
   }
 

tailwind.config.ts

@@ -1,6 +1,7 @@
 import headlessuiPlugin from "@headlessui/tailwindcss";
 import typographyPlugin from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 import typographyStyles from "./typography";
 
@@ -33,6 +34,10 @@ export default {
             boxShadow: {
                 glow: "0 0 4px rgb(0 0 0 / 0.1)",
             },
+            colors: {
+                brand: colors.pink,
+                secondary: colors.purple,
+            },
             maxWidth: {
                 lg: "33rem",
                 "2xl": "40rem",

typography.ts

@@ -6,9 +6,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
             css: {
                 "--tw-prose-body": theme("colors.zinc.700"),
                 "--tw-prose-headings": theme("colors.zinc.900"),
-                "--tw-prose-links": theme("colors.emerald.500"),
+                "--tw-prose-links": theme("colors.brand.500"),
-                "--tw-prose-links-hover": theme("colors.emerald.600"),
+                "--tw-prose-links-hover": theme("colors.brand.600"),
-                "--tw-prose-links-underline": theme("colors.emerald.500 / 0.3"),
+                "--tw-prose-links-underline": theme("colors.brand.500 / 0.3"),
                 "--tw-prose-bold": theme("colors.zinc.900"),
                 "--tw-prose-counters": theme("colors.zinc.500"),
                 "--tw-prose-bullets": theme("colors.zinc.300"),
@@ -24,10 +24,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
 
                 "--tw-prose-invert-body": theme("colors.zinc.400"),
                 "--tw-prose-invert-headings": theme("colors.white"),
-                "--tw-prose-invert-links": theme("colors.emerald.400"),
+                "--tw-prose-invert-links": theme("colors.brand.400"),
-                "--tw-prose-invert-links-hover": theme("colors.emerald.500"),
+                "--tw-prose-invert-links-hover": theme("colors.brand.500"),
                 "--tw-prose-invert-links-underline": theme(
-                    "colors.emerald.500 / 0.3",
+                    "colors.brand.500 / 0.3",
                 ),
                 "--tw-prose-invert-bold": theme("colors.white"),
                 "--tw-prose-invert-counters": theme("colors.zinc.400"),