inline css vars

Author: mattvagni

src/components/button.module.css

@@ -9,7 +9,7 @@
     display: block;
 
     line-height: 24px;
-    transition: background 150ms linear;
+    transition: background 50ms linear;
     position: relative;
 }
 

src/components/contactForm.module.css

@@ -24,5 +24,5 @@
 .eta {
     display: flex;
     align-items: center;
-    color: var(--textColorMuted);
+    color: #626B7F;
 }

src/components/formField.module.css

@@ -4,10 +4,4 @@
     font-size: 13px;
     margin-bottom: 8px;
     display: block;
-}
-
-.helpText {
-    margin-bottom: 12px;
-    color: var(--textColorMuted);
-    display: block;
 }

src/components/formField.tsx

@@ -4,8 +4,6 @@ import styles from './formField.module.css';
 export interface FormFieldProps {
   label?: string;
   labelFor?: string;
-  helpText?: string | null;
-  errorMessage?: string | null;
   children: React.ReactNode;
 }
 
@@ -16,7 +14,6 @@ export const FormField = (props: FormFieldProps) => (
         {props.label}
       </label>
     )}
-    {props.helpText && <span className={styles.helpText}>{props.helpText}</span>}
     <div>{props.children}</div>
   </div>
 );

src/components/helpButton.module.css

@@ -66,14 +66,14 @@
 }
 
 .popoverTitle {
-  color: var(--textColor);
+  color: #262F40;
   font-weight: 500;
   font-size: 1.05rem;
   margin-bottom: 8px;
 }
 
 .popoverNudge {
-  color: var(--textColorMuted);
+  color: #626B7F;
   margin-bottom: 16px;
   font-size: 0.8rem;
 }

src/components/texarea.module.css

@@ -1,7 +1,7 @@
 .textarea {
-    box-shadow: var(--inputBoxShadow);
-    color: var(--textColor);
-    background: var(--inputBackground);
+    box-shadow: 0 0 0 1px #cdccda66 inset;
+    color: #262F40;
+    background: #FFF;
     border-radius: 8px;
     padding: 8px 12px;
     outline: none;
@@ -10,18 +10,18 @@
     width: 100%;
     font-size: 13px;
     line-height: 24px;
-    resize: vertical;
+    resize: none;
     min-height: 100px;
 }
 
 .textarea::placeholder {
-    color: var(--textColorMuted);
+    color: #626B7F;
 }
 
 .textarea:hover {
-    box-shadow: var(--inputBoxShadowHover);
+    box-shadow: 0 0 0 1px #aaaac73d inset;
 }
 
 .textarea:focus {
-    box-shadow: var(--inputBoxShadowFocus);
+    box-shadow: 0 0 0 2px #7e22ce;
 }

src/components/textInput.module.css

@@ -1,7 +1,7 @@
 .input {
-    box-shadow: var(--inputBoxShadow);
-    color: var(--textColor);
-    background: var(--inputBackground);
+    box-shadow: 0 0 0 1px #cdccda66 inset;
+    color: #262F40;
+    background: #FFF;
     border-radius: 8px;
     padding: 6px 12px;
     outline: none;
@@ -13,13 +13,13 @@
 }
 
 .input::placeholder {
-    color: var(--textColorMuted);
+    color: #626B7F;
 }
 
 .input:hover {
-    box-shadow: var(--inputBoxShadowHover);
+    box-shadow: 0 0 0 1px #aaaac73d inset;
 }
 
 .input:focus {
-    box-shadow: var(--inputBoxShadowFocus);
+    box-shadow: 0 0 0 2px #7e22ce;
 }

styles/globals.css

@@ -14,8 +14,8 @@ html, body {
 
 body {
   -webkit-font-smoothing: antialiased;
-  background: var(--background);
-  color: var(--textColor);
+  background: #FFF;
+  color: #262F40;
   font-size: 14px;
   font-weight: 400;
   font-family: 'Inter', sans-serif;
@@ -38,15 +38,4 @@ p, h1, h2, h3, h4, h5, h6 {
   display: flex;
   flex-direction: column;
   height: 100%;
-}
-
-:root {
-  --background: #FFF;
-  --textColor: #262F40;
-  --textColorMuted: #626B7F;
-  --inputBackground: #FFFFFF;
-  --inputBackgroundSelected: #7e22ce;
-  --inputBoxShadow: 0 0 0 1px #cdccda66 inset;
-  --inputBoxShadowHover: 0 0 0 1px #aaaac73d inset;
-  --inputBoxShadowFocus: 0 0 0 2px #7e22ce;
 }