Refactor colour and opacity classes

components/ShapesBackground.module.css

@@ -9,35 +9,20 @@
 
 .shape {
   position: absolute;
-}
 
-.blue {
-  filter: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
+  --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
     brightness(92%) contrast(93%);
-}
-
-.teal {
-  filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
+  --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
     brightness(91%) contrast(88%);
 }
 
-.opacity20 {
-  opacity: 20%;
-}
-
-.opacity25 {
-  opacity: 25%;
-}
-
-.opacity30 {
-  opacity: 30%;
-}
-
 .homeDots {
   top: calc(0.06 * (580rem / 0.65) / 16);
   left: calc(-32rem / 16);
   width: calc(168rem / 16);
   height: calc(204rem / 16);
+  filter: var(--teal);
+  opacity: 25%;
 }
 
 .homeHash1 {
@@ -45,6 +30,8 @@
   left: 12vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
+  filter: var(--blue);
+  opacity: 20%;
 }
 
 .homeTriangle1 {
@@ -53,6 +40,8 @@
   width: calc(68rem / 16);
   height: calc(68rem / 16);
   transform: rotate(18deg);
+  filter: var(--teal);
+  opacity: 30%;
 }
 
 .homeWaves1 {
@@ -60,6 +49,8 @@
   left: 24vw;
   width: calc(116rem / 16);
   height: calc(58rem / 16);
+  filter: var(--teal);
+  opacity: 20%;
 }
 
 .homeTriangle2 {
@@ -68,6 +59,8 @@
   width: calc(68rem / 16);
   height: calc(68rem / 16);
   transform: rotate(-26deg);
+  filter: var(--blue);
+  opacity: 20%;
 }
 
 .homePlus {
@@ -75,6 +68,8 @@
   right: 22vw;
   width: calc(48rem / 16);
   height: calc(48rem / 16);
+  filter: var(--blue);
+  opacity: 20%;
 }
 
 .homeWaves2 {
@@ -82,6 +77,8 @@
   right: 18vw;
   width: calc(102rem / 16);
   height: calc(50rem / 16);
+  filter: var(--teal);
+  opacity: 20%;
 }
 
 .homeHash2 {
@@ -89,6 +86,8 @@
   right: 9vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
+  filter: var(--blue);
+  opacity: 20%;
 }
 
 @media only screen and (max-height: calc((580rem / 0.65) / 16)) {

components/ShapesBackground.tsx

@@ -48,38 +48,14 @@ function Shape(props: { shape: ShapeType; className: string }) {
 function HomeShapes() {
   return (
     <>
-      <Shape
-        shape="dots"
-        className={`${styles.teal} ${styles.opacity25} ${styles.homeDots}`}
-      />
-      <Shape
-        shape="hash"
-        className={`${styles.blue} ${styles.opacity20} ${styles.homeHash1}`}
-      />
-      <Shape
-        shape="triangle"
-        className={`${styles.teal} ${styles.opacity30} ${styles.homeTriangle1}`}
-      />
-      <Shape
-        shape="waves"
-        className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves1}`}
-      />
-      <Shape
-        shape="triangle"
-        className={`${styles.blue} ${styles.opacity20} ${styles.homeTriangle2}`}
-      />
-      <Shape
-        shape="plus"
-        className={`${styles.blue} ${styles.opacity20} ${styles.homePlus}`}
-      />
-      <Shape
-        shape="waves"
-        className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves2}`}
-      />
-      <Shape
-        shape="hash"
-        className={`${styles.blue} ${styles.opacity20} ${styles.homeHash2}`}
-      />
+      <Shape shape="dots" className={styles.homeDots} />
+      <Shape shape="hash" className={styles.homeHash1} />
+      <Shape shape="triangle" className={styles.homeTriangle1} />
+      <Shape shape="waves" className={styles.homeWaves1} />
+      <Shape shape="triangle" className={styles.homeTriangle2} />
+      <Shape shape="plus" className={styles.homePlus} />
+      <Shape shape="waves" className={styles.homeWaves2} />
+      <Shape shape="hash" className={styles.homeHash2} />
     </>
   );
 }