inline css vars

mattvagni · mattvagni · commit d9929744862c · 2023-06-21T14:43:23.000+02:00
diff --git a/src/components/button.module.css b/src/components/button.module.css
@@ -9,7 +9,7 @@
     display: block;
     
     line-height: 24px;
-    transition: background 150ms linear;
+    transition: background 50ms linear;
     position: relative;
 }
 
diff --git a/src/components/contactForm.module.css b/src/components/contactForm.module.css
@@ -24,5 +24,5 @@
 .eta {
     display: flex;
     align-items: center;
-    color: var(--textColorMuted);
+    color: #626B7F;
 }
diff --git a/src/components/formField.module.css b/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;
 }
diff --git a/src/components/formField.tsx b/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>
 );
diff --git a/src/components/helpButton.module.css b/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;
 }
diff --git a/src/components/texarea.module.css b/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;
 }
diff --git a/src/components/textInput.module.css b/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;
 }
diff --git a/styles/globals.css b/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;
 }

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`display: block;`
`10`	`10`
`11`	`11`	`line-height: 24px;`
`12`		`- transition: background 150ms linear;`
	`12`	`+ transition: background 50ms linear;`
`13`	`13`	`position: relative;`
`14`	`14`	`}`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,5 @@`
`24`	`24`	`.eta {`
`25`	`25`	`display: flex;`
`26`	`26`	`align-items: center;`
`27`		`- color: var(--textColorMuted);`
	`27`	`+ color: #626B7F;`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,14 +66,14 @@`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`.popoverTitle {`
`69`		`- color: var(--textColor);`
	`69`	`+ color: #262F40;`
`70`	`70`	`font-weight: 500;`
`71`	`71`	`font-size: 1.05rem;`
`72`	`72`	`margin-bottom: 8px;`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.popoverNudge {`
`76`		`- color: var(--textColorMuted);`
	`76`	`+ color: #626B7F;`
`77`	`77`	`margin-bottom: 16px;`
`78`	`78`	`font-size: 0.8rem;`
`79`	`79`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.input {`
`2`		`- box-shadow: var(--inputBoxShadow);`
`3`		`- color: var(--textColor);`
`4`		`- background: var(--inputBackground);`
	`2`	`+ box-shadow: 0 0 0 1px #cdccda66 inset;`
	`3`	`+ color: #262F40;`
	`4`	`+ background: #FFF;`
`5`	`5`	`border-radius: 8px;`
`6`	`6`	`padding: 6px 12px;`
`7`	`7`	`outline: none;`
`@@ -13,13 +13,13 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.input::placeholder {`
`16`		`- color: var(--textColorMuted);`
	`16`	`+ color: #626B7F;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.input:hover {`
`20`		`- box-shadow: var(--inputBoxShadowHover);`
	`20`	`+ box-shadow: 0 0 0 1px #aaaac73d inset;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.input:focus {`
`24`		`- box-shadow: var(--inputBoxShadowFocus);`
	`24`	`+ box-shadow: 0 0 0 2px #7e22ce;`
`25`	`25`	`}`