feat(design-system-tokens): Major updates to design system color scheme

apps/web/shell/app/contact/actions.ts

@@ -3,7 +3,7 @@
 import { revalidateTag } from "next/cache";
 
 export async function handleSubmit(formData: FormData) {
-  console.log();
+  console.log("Submit contact");
 
   revalidateTag("contact");
 }

apps/web/shell/app/contact/business/details/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ContactBusinessDetailsForm } from "@open-system/contact-feature-form";
 import ContactForm from "../../contact-form";
 

apps/web/shell/app/contact/business/personal-info/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ContactBusinessPersonalInfoForm } from "@open-system/contact-feature-form";
 import ContactForm from "../../contact-form";
 

apps/web/shell/app/contact/business/review/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ContactBusinessReviewForm } from "@open-system/contact-feature-form";
 import ContactForm from "../../contact-form";
 

apps/web/shell/app/contact/business/success/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { SuccessContactForm } from "@open-system/contact-feature-form";
 import ContactForm from "../../contact-form";
 

apps/web/shell/app/contact/contact-form.tsx

@@ -59,7 +59,8 @@ export default function ContactForm({
     async (formData: Contact) => {
       if (segment === ContactFormSegments.REVIEW) {
         startTransition(() => {
-          handleSubmit(formData);
+          //props.handleSubmit(formData);
+          resetContact();
         });
       } else {
         /*const nextContact: Contact = {} as Contact;
@@ -72,7 +73,13 @@ export default function ContactForm({
 
       nextPathname && router.push(nextPathname as any);
     },
-    [nextPathname, router, segment, setContact]
+    [
+      nextPathname,
+      router,
+      segment,
+      setContact,
+      resetContact
+    ]
   );
 
   const modalRef = useRef<ModalReference>(null);
@@ -256,42 +263,45 @@ export default function ContactForm({
             )}
         </div>
         <Modal
-          className="h-fit min-h-fit w-[50rem]"
+          className="h-fit min-h-fit w-[45rem]"
           ref={modalRef}
           initialOpened={false}
           variant={ModalVariants.WARNING}
           title="Reset Contact Information"
           onClose={handleResetClose}>
           <div className="flex flex-col gap-10">
-            <div className="flex flex-1">
+            <div className="flex flex-1 grow">
+            <div className="flex flex-col gap-2">
               <label className="whitespace-pre-wrap text-xl font-label-1 text-primary">
                 Are you sure you want to remove all of your previously entered
-                data? Selecting &quot;Reset&quot; below will start the contact
+                data?
+              </label>
+              <label className="whitespace-pre-wrap text-lg font-body-1 text-body-1">
+                Selecting &quot;Reset&quot; below will start the contact
                 process from the beginning.
               </label>
-            </div>
-            <div className="h-fit flex-none">
-              <div className="flex flex-row-reverse gap-8">
-                <Button
-                  variant={ButtonVariants.PRIMARY}
-                  type={ButtonTypes.RESET}
-                  onClick={handleReset}
-                  rounding={ButtonCornerRoundingTypes.NONE}
-                  transitionDirection={ButtonTransitionDirections.RIGHT}
-                  inverse={true}
-                  hoverText="Confirm">
-                  Reset
-                </Button>
-                <Button
-                  variant={ButtonVariants.PRIMARY}
-                  onClick={handleResetClose}
-                  rounding={ButtonCornerRoundingTypes.NONE}
-                  transitionDirection={ButtonTransitionDirections.LEFT}
-                  hoverText="Cancel">
-                  Close
-                </Button>
               </div>
             </div>
+            <div className="shink flex flex-row-reverse gap-8">
+              <Button
+                variant={ButtonVariants.PRIMARY}
+                type={ButtonTypes.RESET}
+                onClick={handleReset}
+                rounding={ButtonCornerRoundingTypes.NONE}
+                transitionDirection={ButtonTransitionDirections.NONE}
+                inverse={true}
+                hoverText="Confirm">
+                Reset
+              </Button>
+              <Button
+                variant={ButtonVariants.PRIMARY}
+                onClick={handleResetClose}
+                rounding={ButtonCornerRoundingTypes.NONE}
+                transitionDirection={ButtonTransitionDirections.NONE}
+                hoverText="Cancel">
+                Close
+              </Button>
+            </div>
           </div>
         </Modal>
       </Form>

apps/web/shell/app/contact/layout.tsx

@@ -1,17 +1,18 @@
-import { Module, BreadcrumbVariants } from "@open-system/design-system-components";
-import { ReactNode } from "react";
 import { Breadcrumb } from "@open-system/core-components";
+import { Module } from "@open-system/design-system-components";
+import { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="flex h-fit flex-col gap-12 px-20 pt-12">
+    <div className="background-gradient relative z-20 flex min-h-screen w-full flex-col gap-12 px-20 pt-12">
       <Breadcrumb
-        variant="secondary"
+        variant="primary"
         items={[
           { pathname: "/contact", label: "Contact" },
           { pathname: "/contact/business", label: "Business Opportunity" },
         ]}
       />
+
       <Module
         className="h-fit min-h-[40rem]"
         header={

apps/web/shell/app/dev/(stack)/stack-layer.tsx

@@ -163,12 +163,12 @@ export default function StackLayer({
         )}>
         <div
           onClick={handleClose}
-          className="absolute top-1 right-1 z-modal m-1 cursor-pointer rounded-full bg-slate-300/80 p-2 font-semibold text-slate-500 transition-colors hover:bg-slate-300 hover:text-slate-900">
+          className="absolute right-1 top-1 z-modal m-1 cursor-pointer border-[1px] border-slate-900 hover:border-slate-500 rounded-full p-1 font-semibold text-slate-900 transition-colors hover:text-slate-500">
           <XMarkIcon className="h-3 w-3 cursor-pointer" />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-3">
           <Heading level={3}>{header}</Heading>
-          <p className="text-sm font-body-1 text-body-2">
+          <p className="text-sm font-body-1 text-slate-800">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

apps/web/shell/app/dev/client.tsx

@@ -5,6 +5,7 @@ import { useInView } from "framer-motion";
 import dynamic from "next/dynamic";
 import { useRef } from "react";
 import Introduction from "./(introduction)/introduction";
+import { BackgroundSphere, VariantTypes } from "@open-system/shared-components";
 
 const Stack = dynamic(() => import("./(stack)/stack"), {
   loading: () => (
@@ -70,28 +71,28 @@ export default function Client() {
   const isTechnologiesInView = useInView(technologiesRef, { once: true });
 
   return (
-    <main className="flex snap-y snap-mandatory flex-col gap-16">
+    <main className="relative flex snap-y snap-mandatory flex-col gap-16 overflow-x-hidden">
       <div
         ref={introductionRef}
-        className="snap-center snap-always scroll-py-9">
+        className="snap-center scroll-py-9">
         <Introduction />
       </div>
 
       <HorizontalSeparator />
 
-      <div ref={stackRef} className="mt-10 snap-center snap-always scroll-py-9">
+      <div ref={stackRef} className="mt-10 snap-center scroll-py-9">
         {isIntroductionInView && <Stack />}
       </div>
 
       <div
         ref={technologiesRef}
-        className="snap-center snap-always scroll-py-9">
+        className="snap-center scroll-py-9">
         {isStackInView && <Technologies />}
       </div>
 
       <HorizontalSeparator />
 
-      <div className="mt-20 snap-center snap-always scroll-py-9">
+      <div className="mt-20 snap-center scroll-py-9">
         {isTechnologiesInView && <Architecture />}
       </div>
     </main>

apps/web/shell/app/layout.tsx

@@ -79,7 +79,7 @@ export default function RootLayout(props: {
         antiqueOlive.variable,
         permanentMarker.variable,
         satoshi.variable,
-        "bg-bg-1 antialiased"
+        "bg-bg-primary antialiased"
       )}>
       <head />
       <body className="relative h-fit min-h-screen">
@@ -134,30 +134,30 @@ export default function RootLayout(props: {
                   </h3>
                   <div className="flex flex-row gap-16">
                     <div className="flex flex-col gap-1">
-                      <Link variant="primary">Home</Link>
-                      <Link variant="primary">About</Link>
-                      <Link variant="primary">Contact</Link>
+                      <Link variant="secondary">Home</Link>
+                      <Link variant="secondary">About</Link>
+                      <Link variant="secondary">Contact</Link>
                     </div>
                     <div className="flex flex-col gap-1">
-                      <Link variant="primary">Projects</Link>
-                      <Link variant="primary">Privacy</Link>
+                      <Link variant="secondary">Projects</Link>
+                      <Link variant="secondary">Privacy</Link>
                     </div>
                   </div>
                 </div>
                 <div className="flex flex-col gap-1">
                   <h3 className="whitespace-nowrap font-label-4 text-4xl text-primary underline">
                     Blog
                   </h3>
-                  <Link variant="primary">Articles</Link>
-                  <Link variant="primary">Latest</Link>
+                  <Link variant="secondary">Articles</Link>
+                  <Link variant="secondary">Latest</Link>
                 </div>
                 <div className="flex flex-col gap-1">
                   <h3 className="whitespace-nowrap font-label-4 text-4xl text-primary underline">
                     Docs
                   </h3>
-                  <Link variant="primary">Open System</Link>
-                  <Link variant="primary">Design System</Link>
-                  <Link variant="primary">Storybook</Link>
+                  <Link variant="secondary">Open System</Link>
+                  <Link variant="secondary">Design System</Link>
+                  <Link variant="secondary">Storybook</Link>
                 </div>
                 <div className="flex h-full flex-col items-center">
                   {/*<PdfResumeDownloadLink />*/}

apps/web/shell/app/page.tsx

@@ -10,6 +10,7 @@ import VhsTitleBar from "../components/vhs-title-bar";
 import Client from "./client";
 
 export default function Page() {
+
   return (
     <div className="relative h-full w-full">
       <div className="z-progress">
@@ -75,37 +76,37 @@ export default function Page() {
           <div className="background-gradient flex w-full flex-1 flex-col items-center justify-center px-4 pb-32">
             <div className="grid grid-cols-1 justify-between gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Subscribe"
                 details="Receive email notifications on future updates"
                 iconType="bell"
               />
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Resume"
                 details="Download a copy of my resume"
                 iconType="download"
               />
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Articles"
                 details="Read some recent articles I've written"
                 iconType="pencil"
               />
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Contact"
                 details="Reach out to me for anything and everything"
                 iconType="post-box"
               />
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Projects"
                 details="Check out some projects I'm currently working on"
                 iconType="list"
               />
               <Card
-                className="h-full min-h-[8rem] hover:cursor-pointer"
+                className="h-full min-h-[8rem] cursor-pointer"
                 title="Design"
                 details="Read about my favorite software design philosophies"
                 badge="New"

apps/web/shell/components/app-title.tsx

@@ -119,7 +119,7 @@ export default function AppTitle() {
         <div className="align-center animate-flicker-2">
           <Heading
             level={4}
-            className="text-glow text-center text-5xl leading-none text-white">
+            className="text-border text-center text-5xl leading-none text-white">
             Software designed for{" "}
             <span className="text-glow-purple bg-gradient-to-r from-gradient-from via-gradient-via to-gradient-to bg-clip-text text-transparent">
               tomorrow&apos;s

apps/web/shell/components/header-bottom.tsx

@@ -41,9 +41,9 @@ export default function HeaderBottom({
       initial={false}
       animate={isAppHeaderDisplayed ? "closed" : "opened"}>
       <div className="relative flex h-0 w-full">
-        <Wave className="absolute -bottom-12 left-0 right-0 h-96 min-w-full fill-bg-1 stroke-gray-700 stroke-2" />
+        <Wave className="absolute -bottom-12 left-0 right-0 h-96 min-w-full fill-bg-primary stroke-gray-700 stroke-2" />
       </div>
-      <div className="relative flex h-full min-h-fit w-full flex-row items-end justify-center bg-bg-1 px-20">
+      <div className="relative flex h-full min-h-fit w-full flex-row items-end justify-center bg-bg-primary px-20">
         {children}
       </div>
     </motion.div>

apps/web/shell/styles/globals.css

@@ -4,17 +4,18 @@
 
 ::selection {
   background: #3730a3; /* WebKit/Blink Browsers */
-  color: #FAF9F6; /* WebKit/Blink Browsers */
+  color: #faf9f6; /* WebKit/Blink Browsers */
 }
 
 ::-moz-selection {
   background: #3730a3; /* Gecko Browsers */
-  color: #FAF9F6; /* Gecko Browsers */
+  color: #faf9f6; /* Gecko Browsers */
 }
 
 :host {
   --title-texts: 3;
-  --sub-nav-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 2px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.15);
+  --sub-nav-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 2px rgba(0, 0, 0, 0.2),
+    0 7px 7px rgba(0, 0, 0, 0.15);
 }
 
 input:-webkit-autofill:not(:read-only),
@@ -54,7 +55,12 @@ select:-webkit-autofill:focus:disabled {
 }
 
 .text-glow-purple {
-  text-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
+  text-shadow: 0 0 2px rgba(99, 102, 241, 0.6);
+}
+
+.text-border {
+  text-shadow: 6px 0 #27272a, -6px 0 #27272a, 0 6px #27272a, 0 -6px #27272a,
+    3px 3px #27272a, -3px -3px #27272a, 3px -3px #27272a, -3px 3px #27272a;
 }
 
 @media (min-width: 400px) {
@@ -64,7 +70,7 @@ select:-webkit-autofill:focus:disabled {
       rgba(99, 102, 241, 0.476) 0%,
       rgba(37, 38, 44, 0) 100%
     );
-    z-index: 10;
+    z-index: 1;
     content: "";
     position: absolute;
     inset: 0px;
@@ -78,7 +84,7 @@ select:-webkit-autofill:focus:disabled {
       rgba(16, 185, 129, 0.376) 0%,
       rgba(37, 38, 44, 0) 100%
     );
-    z-index: 10;
+    z-index: 1;
     content: "";
     position: absolute;
     inset: 0px;
@@ -87,8 +93,6 @@ select:-webkit-autofill:focus:disabled {
   }
 }
 
-
-
 .title-text h1 {
   animation-delay: 0s;
   font-weight: bold;