Update brand purple

package.json

@@ -16,7 +16,6 @@
     "@astrojs/react": "^3.4.0",
     "@astrojs/sitemap": "^3.1.5",
     "@axe-core/playwright": "^4.9.1",
-    "@radix-ui/colors": "^3.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.9.2",

src/pages/index.astro

@@ -126,7 +126,7 @@ import Footer from "../components/Footer.astro";
   }
 
   .who-you-are {
-    color: var(--background);
+    color: var(--bg-purple);
   }
 
   .subhead {
@@ -138,8 +138,8 @@ import Footer from "../components/Footer.astro";
   }
 
   form {
-    color: var(--background);
-    background-color: var(--gray-12);
+    color: var(--bg-purple);
+    background-color: var(--text);
     margin-block-start: var(--space-xl);
     padding: var(--space-l) var(--space-m);
 
@@ -158,21 +158,21 @@ import Footer from "../components/Footer.astro";
   input,
   button {
     border: none;
-    background: var(--background);
+    background: var(--bg-purple);
     border-radius: var(--radius-s);
-    color: var(--gray-12);
+    color: var(--text);
     padding: var(--space-s) var(--space-s);
   }
 
   input {
     flex: 1;
 
     &::placeholder {
-      color: var(--gray-a9);
+      color: var(--text-placeholder);
     }
 
     &:focus {
-      background-color: var(--white-a12);
+      background-color: var(--white);
     }
   }
 
@@ -187,12 +187,12 @@ import Footer from "../components/Footer.astro";
 
     @media (hover: hover) {
       &:hover {
-        background: var(--white-a12);
+        background: var(--white);
       }
     }
 
     &:focus-visible {
-      background: var(--white-a12);
+      background: var(--white);
     }
   }
 </style>

src/styles/base.css

@@ -4,10 +4,10 @@ html {
 }
 
 body {
-  color: var(--gray-12);
-  background-color: var(--background);
+  color: var(--text);
+  background-color: var(--bg-purple);
   background-image: url('/speckles-black.svg');
-  background-position: center;
+  background-position: center top;
   display: flex;
   min-height: 100dvh;
   position: relative;
@@ -26,14 +26,14 @@ body::after {
   position: absolute;
   inset: 0;
   background-image: url('/speckles-purple.svg');
-  background-position: center;
+  background-position: center top;
   pointer-events: none;
   z-index: 10;
 }
 
 ::selection {
-  background: var(--gray-12);
-  color: var(--background);
+  background: var(--text);
+  color: var(--bg-purple);
 }
 
 h1, h2, h3 {
@@ -75,7 +75,7 @@ small {
 
 a {
   text-decoration: underline;
-  text-decoration-color: var(--gray-a11);
+  text-decoration-color: var(--text);
   text-underline-offset: max(0.1em, 2.5px);
   transition:
     text-decoration-color 0.2s ease-in-out,
@@ -85,7 +85,7 @@ a {
 @media (hover: hover) {
   a:hover,
   a:focus {
-    text-decoration-color: var(--gray-12);
+    text-decoration-color: var(--text);
   }
 }
 
@@ -94,6 +94,6 @@ a {
 }
 
 :focus-visible {
-  outline: 2px solid var(--white-a12);
+  outline: 2px solid var(--white);
   outline-offset: 2px;
 }

src/styles/theme.css

@@ -1,8 +1,3 @@
-@import "@radix-ui/colors/gray.css";
-@import "@radix-ui/colors/gray-alpha.css";
-@import "@radix-ui/colors/violet.css";
-@import "@radix-ui/colors/white-alpha.css";
-
 :root {
   /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,22,1.25,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   --step--1: clamp(0.9375rem, 0.881rem + 0.2826vi, 1.1rem);
@@ -40,6 +35,9 @@
   --radius-m: var(--space-m);
   --radius-l: var(--space-l);
 
-  /* Background */
-  --background: var(--violet-7);
+  /* Colors */
+  --bg-purple: #CDA5EF;
+  --text: #111111;
+  --text-placeholder: rgba(0, 0, 0, 0.5);
+  --white: #FFFFFF;
 }