styles: rework color palette

kevinwolfcr · Sep 6, 2023 · 5c793a1 · 5c793a1 · vercel · Sep 6, 2023
1 parent a35277c
commit 5c793a1
Show file tree

Hide file tree

Showing 15 changed files with 51 additions and 54 deletions.
diff --git a/public/images/og-bg.png b/public/images/og-bg.png
diff --git a/src/app/(site)/_components/site-nav/site-nav.component.tsx b/src/app/(site)/_components/site-nav/site-nav.component.tsx
@@ -61,8 +61,8 @@ export function SiteNav() {
               aria-current={item.href === activeHref || (!activeHref && i === 0) ? "page" : undefined}
               aria-label={item.label}
               className={cn(
-                "sm:w-7 sm:h-7 rounded-md sm:hover:bg-accent-4 flex items-center sm:justify-center gap-3 sm:text-dimmed sm:hover:text-base transition-colors",
-                "sm:aria-[current=page]:bg-accent-9 sm:aria-[current=page]:text-contrast",
+                "sm:w-7 sm:h-7 rounded sm:hover:bg-base-4 flex items-center sm:justify-center gap-3 sm:text-dimmed sm:hover:text-base transition-colors",
+                "sm:aria-[current=page]:bg-base-12 sm:aria-[current=page]:text-contrast",
               )}
               onClick={() => setIsExpanded(false)}
             >

diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
@@ -77,7 +77,7 @@ export default function SiteHome() {
 
   return (
     <Main className="gap-9 sm:gap-10">
-      <Hero {...about.hero} />
+      <Hero isBig {...about.hero} />
       <Section id={about.id} title={about.title} subtitle={about.subtitle}>
         <MDX source={about.content} />
       </Section>
@@ -96,9 +96,9 @@ export default function SiteHome() {
             className="group flex gap-5 lg:group-hover/list:opacity-50 lg:hover:!opacity-100 lg:transition-opacity"
           >
             <div className="relative">
-              <div className="group-hover:bg-accent-9 w-4 h-4 rounded-full bg-accent-7 lg:transition-colors" />
+              <div className="w-4 h-4 rounded-full bg-accent-8 group-hover:bg-accent-9 lg:transition-colors" />
               {i < experience.items.length - 1 ? (
-                <div className="absolute top-4 bottom-0 left-1/2 w-[1px] bg-accent-5" />
+                <div className="absolute top-4 bottom-0 left-1/2 w-[1px] bg-base-6" />
               ) : null}
             </div>
             <div className="flex flex-col gap-4 pb-8">
@@ -110,9 +110,7 @@ export default function SiteHome() {
                   {item.position} @ {item.company}
                 </h3>
               </div>
-              <div className="typography-2 text-dimmed">
-                <MDX source={item.description} />
-              </div>
+              <MDX className="typography-2" source={item.description} />
             </div>
           </a>
         ))}
@@ -149,13 +147,15 @@ export default function SiteHome() {
                 >
                   <Paper className="absolute -z-10 -inset-5 opacity-0 lg:group-hover:opacity-100 lg:transition-opacity" />
                   {item.imgSrc && item.imgAlt ? (
-                    <Image
-                      src={item.imgSrc}
-                      alt={item.imgAlt}
-                      width={150}
-                      height={90}
-                      className="flex-shrink-0 rounded-md border-2 border-base-6 group-hover:border-accent-8 transition-colors"
-                    />
+                    <div className="relative flex-shrink-0 rounded border-2 border-base-6 group-hover:border-accent-8 transition-colors overflow-hidden">
+                      <Image
+                        src={item.imgSrc}
+                        alt={item.imgAlt}
+                        width={150}
+                        height={90}
+                        className="group-hover:scale-110 transition-transform will-change-transform"
+                      />
+                    </div>
                   ) : null}
                   <div className="flex flex-col gap-3">
                     <a
@@ -213,7 +213,7 @@ export default function SiteHome() {
         {contactFormState.status === "success" || contactFormState.status === "error" ? (
           <div
             className={cn(
-              "rounded-md border flex items-center gap-4 p-4 typography-2 font-medium",
+              "rounded border flex items-center gap-4 p-4 typography-2 font-medium",
               contactFormState.status === "error" && "bg-error-2 border-error-6 text-error-11",
               contactFormState.status === "success" && "bg-success-2 border-success-6 text-success-11",
             )}
@@ -239,7 +239,7 @@ export default function SiteHome() {
               type="text"
               id="name"
               name="name"
-              className="form-input rounded-md border-none bg-accent-3 hover:bg-accent-4 focus:bg-accent-5 focus:ring-accent-7 transition-colors"
+              className="rounded border border-base-7 hover:border-base-8 focus:ring-0 focus:outline-none focus:border-accent-9 bg-base-3 transition-colors"
             />
           </div>
           <div className="[grid-area:email] flex flex-col gap-2">
@@ -251,7 +251,7 @@ export default function SiteHome() {
               type="email"
               id="email"
               name="email"
-              className="form-input rounded-md border-none bg-accent-3 hover:bg-accent-4 focus:bg-accent-5 focus:ring-accent-7 transition-colors"
+              className="rounded border border-base-7 hover:border-base-8 focus:ring-0 focus:outline-none focus:border-accent-9 bg-base-3 transition-colors"
             />
           </div>
           <div className="[grid-area:subject] flex flex-col gap-2">
@@ -263,7 +263,7 @@ export default function SiteHome() {
               type="text"
               id="subject"
               name="subject"
-              className="form-input rounded-md border-none bg-accent-3 hover:bg-accent-4 focus:bg-accent-5 focus:ring-accent-7 transition-colors"
+              className="rounded border border-base-7 hover:border-base-8 focus:ring-0 focus:outline-none focus:border-accent-9 bg-base-3 transition-colors"
             />
           </div>
           <div className="[grid-area:message] flex flex-col gap-2">
@@ -275,7 +275,7 @@ export default function SiteHome() {
               id="message"
               name="message"
               rows={7}
-              className="form-textarea rounded-md border-none bg-accent-3 hover:bg-accent-4 focus:bg-accent-5 focus:ring-accent-7 resize-none transition-colors"
+              className="rounded border border-base-7 hover:border-base-8 focus:ring-0 focus:outline-none focus:border-accent-9 bg-base-3 transition-colors resize-none"
             />
           </div>
           <Button className="[grid-area:button]">
@@ -284,7 +284,7 @@ export default function SiteHome() {
           </Button>
         </form>
       </Section>
-      <footer className="border-t border-base-6/50 flex flex-col gap-1 pt-4 typography-2 text-dimmed">
+      <footer className="border-t border-base-6/50 flex flex-col gap-2 pt-8 sm:pt-9 typography-2 text-dimmed">
         <MDX
           source={[
             "Built with [Next.js](https://nextjs.org) and [TailwindCSS](https://tailwindcss.com), deployed in [Vercel](https://vercel.com).",

diff --git a/src/app/_components/glass/glass.component.tsx b/src/app/_components/glass/glass.component.tsx
@@ -21,11 +21,11 @@ export function Glass() {
 
   return (
     <div className="fixed inset-0 z-10 flex pointer-events-none">
-      <div className="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-full w-[250px] sm:w-[750px] aspect-square bg-accent-5" />
-      <div className="absolute bottom-0 translate-y-1/2 left-0 -translate-x-1/2 rounded-full w-[250px] sm:w-[750px] aspect-square bg-accent-5" />
-      <div className="absolute bottom-0 translate-y-1/2 right-0 translate-x-1/2 rounded-full w-[250px] sm:w-[750px] aspect-square bg-accent-5" />
-      <div ref={spotlightRef} className="hidden lg:block absolute rounded-full w-[100px] aspect-square bg-accent-8" />
-      <div className="absolute inset-0 bg-accent-1/50 backdrop-blur-[100px] backdrop-saturate-200" />
+      <div className="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-full w-[250px] sm:w-[500px] aspect-square bg-base-5" />
+      <div className="absolute bottom-0 translate-y-1/2 left-0 -translate-x-1/2 rounded-full w-[250px] sm:w-[500px] aspect-square bg-base-5" />
+      <div className="absolute bottom-0 translate-y-1/2 right-0 translate-x-1/2 rounded-full w-[250px] sm:w-[500px] aspect-square bg-base-5" />
+      <div ref={spotlightRef} className="hidden lg:block absolute rounded-full w-[100px] aspect-square bg-base-8" />
+      <div className="absolute inset-0 bg-base-1/50 backdrop-blur-[100px] backdrop-saturate-200" />
     </div>
   )
 }
diff --git a/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx b/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx
@@ -38,7 +38,7 @@ export function DocsNav({ title, repo, menus }: DocsNavProps) {
           </Tooltip>
         </div>
       }
-      navClassName="w-full border-t border-accent-6/50 px-4 py-5"
+      navClassName="w-full border-t border-base-6/50 px-4 py-5 sm:gap-5"
     >
       {({ setIsExpanded }) =>
         menus.map((menu) => (

diff --git a/src/app/docs/[project]/opengraph-image/route.tsx b/src/app/docs/[project]/opengraph-image/route.tsx
@@ -11,7 +11,7 @@ export async function GET(req: Request, { params: { project } }: { params: { pro
     if (!page || !page.meta.imgSrc || !page.meta.imgAlt) throw new Error(`Can not handle path.`)
 
     return ogImageResponse(
-      <OgImage className="flex-row items-center justify-center gap-8">
+      <OgImage className="flex-row items-center justify-center gap-5">
         <div className="w-[420px] flex flex-col gap-5">
           <span className="h-auto typography-9 font-bold">{page.meta.title || docs.title}</span>
           <span className="typography-5 text-dimmed">{page.meta.description || docs.description}</span>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,7 +18,7 @@ type RootLayoutProps = {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" className={cn(inter.className, "scroll-smooth")}>
-      <body className="min-h-[100dvh] bg-accent-1 flex flex-col sm:flex-row antialiased typography-3 text-base selection:bg-accent-12 selection:text-accent-1">
+      <body className="min-h-[100dvh] bg-base-1 flex flex-col sm:flex-row antialiased typography-3 text-base selection:bg-base-12 selection:text-base-1">
         <Glass />
         {children}
         <Analytics />

diff --git a/src/components/button/button.component.tsx b/src/components/button/button.component.tsx
@@ -8,13 +8,12 @@ import { forwardRef } from "react"
 import { cn } from "@/utils/ui"
 
 const buttonVariants = cva(
-  "min-w-7 min-h-7 rounded-md inline-flex items-center justify-center px-3 gap-1 text-2 font-medium cursor-pointer transition-colors",
+  "min-w-7 min-h-7 rounded inline-flex items-center justify-center px-3 gap-1 text-2 font-medium cursor-pointer transition-colors",
   {
     variants: {
       variant: {
-        primary: "bg-base-12 text-contrast active:translate-y-[2px]",
-        secondary:
-          "border border-accent-6 hover:border-accent-7 active:border-accent-8 bg-accent-3 hover:bg-accent-4 text-base",
+        primary: "bg-base-12 active:translate-y-[2px] text-contrast",
+        secondary: "border border-base-7 hover:border-base-8 active:border-base-9 bg-base-3 hover:bg-base-4 text-base",
       },
     },
     defaultVariants: {

diff --git a/src/components/hero/hero.component.tsx b/src/components/hero/hero.component.tsx
@@ -2,23 +2,26 @@ import type { HTMLAttributes } from "react"
 
 import Image from "next/image"
 
+import { cn } from "@/utils/ui"
+
 import { MDX } from "../mdx"
 
 export type HeroProps = HTMLAttributes<HTMLElement> & {
+  isBig?: boolean
   title: string
   subtitle: string
   imgSrc?: string
   imgAlt?: string
 }
 
-export function Hero({ title, subtitle, imgSrc, imgAlt, ...props }: HeroProps) {
+export function Hero({ isBig, title, subtitle, imgSrc, imgAlt, ...props }: HeroProps) {
   return (
     <header className="flex flex-col md:flex-row-reverse items-center gap-5" {...props}>
       {imgSrc && imgAlt ? (
         <Image priority src={imgSrc} alt={imgAlt} width={300} height={300} className="flex-shrink-0" />
       ) : null}
       <div className="flex-auto flex flex-col gap-3">
-        <h1 className="typography-8 font-bold">
+        <h1 className={cn(isBig ? "typography-9" : "typography-8", "font-bold")}>
           <MDX
             className="text-base"
             source={title}

diff --git a/src/components/mdx/mdx.component.tsx b/src/components/mdx/mdx.component.tsx
@@ -28,7 +28,7 @@ export function MDX({ className, components, ...props }: MDXProps) {
             </h1>
           ),
           h2: ({ children, ...props }) => (
-            <h2 className="mt-7 border-b border-accent-6 pb-2 typography-7 text-base font-semibold" {...props}>
+            <h2 className="mt-7 border-b border-base-6 pb-2 typography-7 text-base font-semibold" {...props}>
               {children}
             </h2>
           ),
@@ -53,7 +53,7 @@ export function MDX({ className, components, ...props }: MDXProps) {
             </h6>
           ),
           p: ({ children, ...props }) => (
-            <p className="mt-5 typography-3" {...props}>
+            <p className="mt-5" {...props}>
               {children}
             </p>
           ),
@@ -74,7 +74,7 @@ export function MDX({ className, components, ...props }: MDXProps) {
             return (
               <Wrapper
                 href={href}
-                className="inline-flex items-center gap-1 font-medium text-base hover:text-accent transition-colors"
+                className="inline-flex items-center gap-1 font-medium text-base hover:underline transition-colors"
                 {...props}
               >
                 {children}
@@ -101,9 +101,7 @@ export function MDX({ className, components, ...props }: MDXProps) {
               </Code>
             )
           },
-          code: (props) => (
-            <code className="rounded bg-accent-3 px-[0.3em] py-[0.2em] text-[86%] text-accent" {...props} />
-          ),
+          code: (props) => <code className="rounded bg-base-3 p-[0.25em_0.5em] text-[0.8em] text-base" {...props} />,
           PackageManagerCommand: (props: Record<PackageManager, "string">) => (
             <PackageManagerCommand
               content={Object.entries(props).reduce(

diff --git a/src/components/paper/paper.component.tsx b/src/components/paper/paper.component.tsx
@@ -7,10 +7,10 @@ import { forwardRef } from "react"
 
 import { cn } from "@/utils/ui"
 
-const paperVariants = cva("relative z-40 border border-accent-6/50 bg-accent-3/25", {
+const paperVariants = cva("relative z-40 border border-base-6/50 bg-base-3/50", {
   variants: {
     shape: {
-      rounded: "rounded-md",
+      rounded: "rounded",
       square: "",
     },
   },

diff --git a/src/components/tabs/tabs.component.tsx b/src/components/tabs/tabs.component.tsx
@@ -17,7 +17,7 @@ export function Tabs({ className, content, ...props }: TabsProps) {
           <TabsPrimitive.Trigger
             key={value}
             value={value}
-            className="rounded bg-accent-3 hover:bg-accent-4 data-[state=active]:bg-accent-5 px-4 py-2 typography-2 font-medium text-dimmed data-[state=active]:text-base"
+            className="rounded hover:bg-base-4 data-[state=active]:bg-base-5 px-4 py-2 typography-2 font-medium text-dimmed data-[state=active]:text-base"
           >
             {value}
           </TabsPrimitive.Trigger>

diff --git a/src/components/tooltip/tooltip.component.tsx b/src/components/tooltip/tooltip.component.tsx
@@ -22,7 +22,7 @@ export function Tooltip({ delay = 0, sideOffset = 4, content, className, childre
           sideOffset={sideOffset}
           className={cn(
             "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            "border border-accent-6 bg-accent-3 text-[12px] text-base font-medium leading-[1] select-none rounded-[4px] px-[8px] py-[4px] will-change-[transform,opacity]",
+            "bg-base-12 text-[12px] text-base-1 font-medium leading-[1] select-none rounded px-[8px] py-[4px] will-change-[transform,opacity]",
             className,
           )}
           {...props}

diff --git a/src/pages/api/resume.tsx b/src/pages/api/resume.tsx
@@ -40,9 +40,9 @@ export default async function Resume(_req: NextApiRequest, res: NextApiResponse)
 
   const buffer = await renderToBuffer(
     <Document title={`${about.name}'s Résumé`} author={about.name} language="en">
-      <Page size="A4" style={tw("bg-accent-1 flex flex-col gap-[32px] p-[24px] font-[Inter] font-normal text-base")}>
+      <Page size="A4" style={tw("bg-base-1 flex flex-col gap-[32px] p-[24px] font-[Inter] font-normal text-base")}>
         <View style={tw("flex flex-col")}>
-          <Text style={tw("text-[16px] font-semibold text-accent")}>{about.name}</Text>
+          <Text style={tw("text-[16px] font-semibold text-base")}>{about.name}</Text>
           <Text style={tw("mt-[4px] text-[12px] text-dimmed")}>{about.position}</Text>
           <Text style={tw("mt-[12px] text-[10px] leading-[1.5] text-dimmed")}>{about.description}</Text>
         </View>
@@ -53,7 +53,7 @@ export default async function Resume(_req: NextApiRequest, res: NextApiResponse)
               <View style={tw("relative")}>
                 <View style={tw("w-[8px] h-[8px] rounded-full bg-accent-9")} />
                 {i < experience.items.length - 1 ? (
-                  <View style={tw("absolute top-[8px] bottom-0 left-1/2 w-[1px] bg-accent-5")} />
+                  <View style={tw("absolute top-[8px] bottom-0 left-1/2 w-[1px] bg-base-6")} />
                 ) : null}
               </View>
               <View style={tw("w-full flex flex-col gap-[12px] pb-[24px]")}>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,13 +25,10 @@ export default {
   theme: {
     colors: {
       ...fromRadix(radix.slateDark, "base"),
-      ...fromRadix(radix.slateDarkA, "base-a"),
-      ...fromRadix(radix.skyDark, "accent"),
-      ...fromRadix(radix.skyDarkA, "accent-a"),
+      ...fromRadix(radix.mintDark, "accent"),
       ...fromRadix(radix.greenDark, "success"),
       ...fromRadix(radix.greenDarkA, "success-a"),
       ...fromRadix(radix.redDark, "error"),
-      ...fromRadix(radix.redDarkA, "error-a"),
     },
     spacing,
     minWidth: spacing,
@@ -110,8 +107,8 @@ export default {
       addUtilities({
         ".text-base": { color: theme("colors.base-12") },
         ".text-dimmed": { color: theme("colors.base-11") },
-        ".text-extradimmed": { color: theme("colors.base-10") },
-        ".text-contrast": { color: theme("colors.base-1") },
+        ".text-extradimmed": { color: theme("colors.base-8") },
+        ".text-contrast": { color: "black" },
         ".text-accent": { color: theme("colors.accent-11") },
       })
     }),