Prefix custom colors with cr-

Rikthepixel · Rikthepixel · commit 021dfb334428 · 2023-04-24T21:39:02.000+02:00
diff --git a/src/assets/state/contactMethods.tsx b/src/assets/state/contactMethods.tsx
@@ -37,7 +37,7 @@ const contactMethods: IContactMethod[] = [
   {
     title: <>
       Discord <br />
-      <span className="text-sm font-semibold text-fill-contrast">
+      <span className="text-sm font-semibold text-cr-fill-contrast">
         (Coming Soon™)
       </span>
     </>,
diff --git a/src/components/controls/Button.tsx b/src/components/controls/Button.tsx
@@ -11,10 +11,9 @@ export const style = cva("relative flex items-center justify-center transition-c
   variants: {
     color: {
       white: "bg-neutral-200 hover:bg-neutral-50 border-neutral-400 text-neutral-900",
-      primary: "bg-primary hover:bg-primary-light border-primary-dark text-primary-contrast",
-      secondary: "bg-secondary hover:bg-secondary-light border-secondary-dark text-secondary-contrast"
+      primary: "bg-cr-primary hover:bg-cr-primary-light border-cr-primary-light hover:border-cr-primary text-cr-primary-contrast"
     }
-  }
+}
 });
 
 export type BaseProps = {
diff --git a/src/components/controls/Input.tsx b/src/components/controls/Input.tsx
@@ -7,8 +7,7 @@ import { RequiredKeys } from "@/types/utility";
 export const style = cva("w-full rounded-2xl py-2 px-3 border-2", {
   variants: {
     color: {
-      primary: "border-primary bg-transparent placeholder:text-fill-contrast/75",
-      secondary: "border-secondary bg-transparent placeholder:text-fill-contrast/75"
+      primary: "border-cr-primary bg-transparent placeholder:text-cr-fill-contrast/75",
     },
   },
   defaultVariants: {
diff --git a/src/components/controls/Link.tsx b/src/components/controls/Link.tsx
@@ -12,9 +12,8 @@ export const style = cva("transition-colors gap-2", {
     },
     color: {
       white: "text-white hover:text-neutral-300",
-      primary: "text-primary hover:text-primary-light",
-      secondary: "text-secondary hover:text-secondary-light",
-      "fill-contrast": "text-fill-contrast hover:text-fill-contrast-light"
+      primary: "text-cr-primary hover:text-cr-primary-light",
+      "fill-contrast": "text-cr-fill-contrast hover:text-cr-fill-contrast-light"
     }
   },
   defaultVariants: {
diff --git a/src/components/controls/Select.tsx b/src/components/controls/Select.tsx
@@ -15,16 +15,14 @@ export type VariantProps = InputVariantProps;
 export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-2xl min-w-fit w-full overflow-hidden translate-y-1 z-50", {
   variants: {
     color: {
-      primary: "border-primary bg-fill text-fill-contrast",
-      secondary: "border-secondary bg-fill text-fill-contrast"
+      primary: "border-cr-primary bg-cr-fill text-cr-fill-contrast"
     }
   }
 });
 export const itemStyle = cva("px-4 py-2", {
   variants: {
     color: {
-      primary: "ui-active:bg-primary/20",
-      secondary: "ui-active:bg-secondary/20"
+      primary: "ui-active:bg-cr-primary/20"
     }
   }
 });
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -4,8 +4,8 @@ import Logo from "@/assets/images/brand/logo-200x200.webp";
 
 const Footer = () => {
   return (
-    <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-primary-contrast">
-      <footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-primary image-dots from-primary-light border-primary-light">
+    <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
+      <footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-cr-primary image-dots from-cr-primary-light border-cr-primary-light">
         <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
           <div className="flex items-center gap-2">
             <img
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -23,7 +23,7 @@ const Header = () => {
   });
 
   return (
-    <header className="relative flex items-center w-full gap-4 p-4 transition-all border-b-2 md:px-8 md:gap-12 border-primary-light/10">
+    <header className="relative flex items-center w-full gap-4 p-4 transition-all border-b-2 md:px-8 md:gap-12 border-cr-primary-light/10">
       <Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
         <img
           className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"
@@ -37,7 +37,7 @@ const Header = () => {
       <Button
         ref={buttonRef}
         className="p-2 ml-auto rounded-full md:hidden"
-        color="secondary"
+        color="primary"
         aria-label="Expands the header"
         aria-expanded={open}
         aria-controls="header-items"
@@ -51,7 +51,7 @@ const Header = () => {
       </Button>
       <div
         ref={itemsContainerRef}
-        className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
+        className="absolute flex flex-col bg-cr-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-cr-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
         id="header-items"
         data-expanded={open}
       >
diff --git a/src/components/layout/NavDropdown.tsx b/src/components/layout/NavDropdown.tsx
@@ -56,7 +56,7 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
           height="1em"
         />
       </summary>
-      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-fill text-fill-contrast group/dropdown border-primary md:w-fit" data-in-group>
+      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-cr-fill text-cr-fill-contrast group/dropdown border-cr-primary md:w-fit" data-in-group>
         {children}
       </div>
     </details>
diff --git a/src/components/layout/NavLink.tsx b/src/components/layout/NavLink.tsx
@@ -10,7 +10,7 @@ export interface NavLinkProps {
 
 export const style = cva(`
   text-lg font-bold py-2
-  aria-[current='page']:text-primary-light 
+  aria-[current='page']:text-cr-primary-light 
   group-data-[in-group='true']/dropdown:text-base group-data-[in-group='true']/dropdown:py-0
 `);
 
diff --git a/src/components/pages/about/Member.tsx b/src/components/pages/about/Member.tsx
@@ -3,7 +3,7 @@ import LinkButton from "@/components/controls/LinkButton";
 
 const Member = ({ image, fullName, title, links }: IMember) => (
   <li
-    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
+    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-cr-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
     aria-label="Member"
   >
     <div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">
@@ -16,16 +16,16 @@ const Member = ({ image, fullName, title, links }: IMember) => (
         height={image.height}
       />
       <div className="flex flex-col max-w-full gap-2 py-4 text-center w-72">
-        <p className="text-2xl font-semibold text-secondary" aria-label="Name">{fullName}</p>
-        <p className="font-semibold text-secondary" aria-label="Title / Role">{title}</p>
+        <p className="text-2xl font-semibold text-cr-primary" aria-label="Name">{fullName}</p>
+        <p className="font-semibold text-cr-primary" aria-label="Title / Role">{title}</p>
       </div>
     </div>
     <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Links">
       {links.map((link, i) => (
         <LinkButton
           key={i}
           href={link.href}
-          color="secondary"
+          color="primary"
           aria-label="Link"
         >
           {link.name}
diff --git a/src/components/pages/about/Project.tsx b/src/components/pages/about/Project.tsx
@@ -32,12 +32,12 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
 
   return (
     <li className="flex flex-col gap-4 w-96">
-      <p className="text-xl font-semibold text-center text-primary">
+      <p className="text-xl font-semibold text-center text-cr-primary">
         {title}
       </p>
       <button onClick={onImageClick}>
         <img
-          className="border-2 rounded-2xl aspect-video border-primary"
+          className="border-2 rounded-2xl aspect-video border-cr-primary"
           alt={thumbnailAlt}
           src={thumbnail.src}
           width={thumbnail.width}
@@ -47,7 +47,7 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
       <div className="flex flex-col gap-4">
         {description}
       </div>
-      <LinkButton color="secondary" href={href} className="mt-auto" rel={linkRel}>
+      <LinkButton color="primary" href={href} className="mt-auto" rel={linkRel}>
         {linkText ?? "Visit"}
       </LinkButton>
     </li>
diff --git a/src/components/pages/blog/ArticleBrief.tsx b/src/components/pages/blog/ArticleBrief.tsx
@@ -50,7 +50,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
 
   return (
     <motion.li
-      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-fill-light border-2 border-primary overflow-hidden"
+      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-cr-fill-light border-2 border-cr-primary overflow-hidden"
       variants={LIST_ANIM}
       initial="in"
       animate="anim"
@@ -73,7 +73,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
             !hidden && <li key={i}>
               <LinkButton
                 href={makeTagUrl(name)}
-                color="secondary"
+                color="primary"
                 className="px-2 py-1 text-xs font-semibold border"
                 prefetch={false}
               >
diff --git a/src/components/pages/blog/post/ArticleMeta.tsx b/src/components/pages/blog/post/ArticleMeta.tsx
@@ -28,7 +28,6 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
         className="flex items-center gap-2 group/writer"
         //@ts-ignore
         href={author.links.length > 0 ? author.links[0].href : undefined}
-        //@ts-ignore
         color={author.links.length > 0 ? "fill-contrast" : undefined}
         data-is-link={author.links.length > 0}
       >
diff --git a/src/components/pages/blog/post/ArticleTableOfContent.tsx b/src/components/pages/blog/post/ArticleTableOfContent.tsx
@@ -60,7 +60,7 @@ const renderHierarchy = (hierarchy: HeadingHierarchy, config: RenderHierarchyCon
       <PlayIcon
         width=".6em"
         height=".6em"
-        className="text-primary"
+        className="text-"
       />
       <Link
         color="primary"
diff --git a/src/components/pages/contribute/FeedbackSection.tsx b/src/components/pages/contribute/FeedbackSection.tsx
@@ -61,7 +61,7 @@ const FeedbackSection = () => {
         oneTime
       >
         <div className="w-full">
-          <Label htmlFor="message-input" className="text-start text-primary">
+          <Label htmlFor="message-input" className="text-start text-cr-primary">
             Your Message:
           </Label>
           <TextArea
@@ -74,7 +74,7 @@ const FeedbackSection = () => {
           />
         </div>
         <Error className="w-full px-2 text-start" state={formState} name="text" />
-        <Button type="submit" color="secondary" loading={loading} className="w-full px-5 py-3 text-lg md:text-xl sm:w-fit">
+        <Button type="submit" color="primary" loading={loading} className="w-full px-5 py-3 text-lg md:text-xl sm:w-fit">
           Submit Feedback
         </Button>
       </Form>
diff --git a/src/components/pages/front/Mission.tsx b/src/components/pages/front/Mission.tsx
@@ -7,7 +7,7 @@ export interface MissionProps extends IMission {
 
 const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
   return (
-    <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-2xl border-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
+    <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-2xl border-cr-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
       <Heading.H3 className="lg:h-[5ex] motion-safe:transition-all">
         {title}
       </Heading.H3>
diff --git a/src/components/pages/front/RoadmapItem.tsx b/src/components/pages/front/RoadmapItem.tsx
@@ -6,8 +6,8 @@ export interface RoadmapItemProps extends IRoadmapItem {
 }
 
 const Divider = ({ hideOnSmall }: { hideOnSmall?: boolean; }) => (
-  <div className={`relative w-[2px] bg-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
-    <div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-primary bg-fill" />
+  <div className={`relative w-[2px] bg-cr-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
+    <div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-cr-primary bg-cr-fill" />
   </div>
 );
 
@@ -17,7 +17,7 @@ const RoadmapItem = ({ title, text }: RoadmapItemProps) => {
     <li aria-labelledby={id} className="relative flex flex-1 group/item">
       <Divider />
       <div className="relative flex flex-col flex-1 gap-4 py-4 pl-4 md:flex-row md:pl-0 md:py-0 md:gap-0">
-        <Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end text-primary-light">
+        <Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end text-cr-primary-light">
           {title}
         </Heading.H3>
         <Divider hideOnSmall />
diff --git a/src/components/pages/front/SignupSection.tsx b/src/components/pages/front/SignupSection.tsx
@@ -57,7 +57,7 @@ const SignupSection = () => {
         {perks.map(({ title, icon: Icon }, i) => (
           <li key={i} className="flex flex-col items-center w-32 gap-2">
             <Icon
-              className="w-12 h-12 sm:w-16 sm:h-16 text-primary"
+              className="w-12 h-12 sm:w-16 sm:h-16 text-cr-primary"
               width="1em"
               height="1em"
             />
@@ -74,7 +74,7 @@ const SignupSection = () => {
         oneTime
       >
         <div className="w-full">
-          <Label htmlFor="signup-email-input" className="text-primary ml-7">
+          <Label htmlFor="signup-email-input" className="text-cr-primary ml-7">
             Email:
           </Label>
           <Input
@@ -89,7 +89,7 @@ const SignupSection = () => {
         <Button
           className="relative w-full px-5 py-3 text-lg sm:w-fit md:text-xl"
           type="submit"
-          color="secondary"
+          color="primary"
           loading={loading}
         >
           Keep me up-to-date!
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -26,21 +26,21 @@ const NotFound: Page = ({ pathname }) => {
         ]} />
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
-        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-fill-light image-dots border-primary">
+        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-cr-fill-light image-dots border-cr-primary">
           <Heading.H1 id="not-found">
             Not Found.
           </Heading.H1>
           <p>There are no commits to be found here!</p>
           <div className="grid grid-cols-2 gap-2 mt-4">
-            <LinkButton href="/" color="secondary">
+            <LinkButton href="/" color="primary">
               <HomeModernIcon
                 className="w-4 h-4"
                 width="1em"
                 height="1em"
               />
               Home
             </LinkButton>
-            <Button onClick={() => router.back()} color="secondary">
+            <Button onClick={() => router.back()} color="primary">
               <ArrowUturnLeftIcon
                 className="w-4 h-4"
                 width="1em"
diff --git a/src/pages/blog/[pid]/[slug].tsx b/src/pages/blog/[pid]/[slug].tsx
@@ -94,13 +94,13 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
               />
             </CodeBlockHydrator>
           </section>
-          <section aria-labelledby="article-tags" className="w-full pt-16 border-t border-primary mt-8">
+          <section aria-labelledby="article-tags" className="w-full pt-16 border-t border-cr-primary mt-8">
             <h2 id="article-tags" className="text-xs font-bold mb-2">Tags:</h2>
             <ul aria-labelledby="article-tags" className="flex flex-wrap gap-1">
               {tags.map(({ name, hidden }, i) => (
                 !hidden && <li key={i}>
                   <LinkButton
-                    color="secondary"
+                    color="primary"
                     href={makeTagUrl(name)}
                     className="w-fit text-sm px-2 py-1"
                   >
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -120,25 +120,25 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
         {articles.length > 0 && <>
           <div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2 items-end">
             <div>
-              <Label htmlFor="search-input" className="text-secondary">
+              <Label htmlFor="search-input" className="text-cr-primary">
                 Search:
               </Label>
               <Input
                 id="search-input"
                 type="text"
-                color="secondary"
+                color="primary"
                 placeholder="Search..."
                 {...register("search")}
               />
             </div>
             <div>
-              <Label htmlFor="sort-input" className="text-secondary">
+              <Label htmlFor="sort-input" className="text-cr-primary">
                 Sort:
               </Label>
               <ControlledSelect
                 id="sort-input"
                 name="sort"
-                color="secondary"
+                color="primary"
                 control={control}
                 options={SORT_OPTIONS}
                 getDisplayName={(opt) => opt.name}
@@ -154,7 +154,7 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
               >
                 <LinkButton
                   href="/blog"
-                  color="secondary"
+                  color="primary"
                   className="w-fit"
                 >
                   Clear Tags
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -60,7 +60,7 @@ const FrontPage: Page = ({ pathname }) => {
               className="w-full px-5 py-3 text-xl sm:w-fit"
               onClick={sendCTAEvent("Learn More")}
               href="#introduction"
-              color="secondary"
+              color="primary"
               scroll={false}
             >
               Learn More!
@@ -78,12 +78,12 @@ const FrontPage: Page = ({ pathname }) => {
             />
           </div>
         </section>
-        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
-          <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
+        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-cr-primary-contrast image-dots from-cr-primary-light border-cr-primary-light bg-cr-primary">
+          <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
             <span className="text-2xl">
               Introducing...
             </span>
-            <span className="flex flex-col items-center gap-4 p-4 text-3xl font-bold break-normal sm:text-4xl text-primary-contrast md:text-6xl md:flex-row md:w-max">
+            <span className="flex flex-col items-center gap-4 p-4 text-3xl font-bold break-normal sm:text-4xl text-cr-primary-contrast md:text-6xl md:flex-row md:w-max">
               <img
                 className="w-16 h-16 md:w-[1.5em] md:h-[1.5em]"
                 alt="A Small Rocket"
diff --git a/src/pages/mail/unsubscribe.tsx b/src/pages/mail/unsubscribe.tsx
diff --git a/src/styles/main.css b/src/styles/main.css
diff --git a/tailwind.config.js b/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const contactMethods: IContactMethod[] = [`
`37`	`37`	`{`
`38`	`38`	`title: <>`
`39`	`39`	`Discord <br />`
`40`		`- <span className="text-sm font-semibold text-fill-contrast">`
	`40`	`+ <span className="text-sm font-semibold text-cr-fill-contrast">`
`41`	`41`	`(Coming Soon™)`
`42`	`42`	`</span>`
`43`	`43`	`</>,`
Original file line number	Diff line number	Diff line change
`@@ -15,16 +15,14 @@ export type VariantProps = InputVariantProps;`
`15`	`15`	`export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-2xl min-w-fit w-full overflow-hidden translate-y-1 z-50", {`
`16`	`16`	`variants: {`
`17`	`17`	`color: {`
`18`		`- primary: "border-primary bg-fill text-fill-contrast",`
`19`		`- secondary: "border-secondary bg-fill text-fill-contrast"`
	`18`	`+ primary: "border-cr-primary bg-cr-fill text-cr-fill-contrast"`
`20`	`19`	`}`
`21`	`20`	`}`
`22`	`21`	`});`
`23`	`22`	`export const itemStyle = cva("px-4 py-2", {`
`24`	`23`	`variants: {`
`25`	`24`	`color: {`
`26`		`- primary: "ui-active:bg-primary/20",`
`27`		`- secondary: "ui-active:bg-secondary/20"`
	`25`	`+ primary: "ui-active:bg-cr-primary/20"`
`28`	`26`	`}`
`29`	`27`	`}`
`30`	`28`	`});`