Refactor SVG colors into globals.scss

src/components/BoxGraphic.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import {classNames} from "@/utils/helpers";
 
 interface BoxGraphicProps {
     id?: string;
@@ -6,11 +7,6 @@ interface BoxGraphicProps {
     children: React.ReactNode;
 }
 
-const leftColor = "#ad8d6c";
-const rightColor = "#8f704e";
-const topColor = "#c9aa8a";
-const textColor = "#fff";
-
 const A = [190, 0];
 const B = [345, 90];
 const C = [345, 275];
@@ -20,18 +16,18 @@ const F = [10, 70];
 const Z = [175, 155];
 
 const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
-    return <svg id={id} className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
+    return <svg id={id} className={classNames(className, "box-graphic")} viewBox="0 0 370 370"
+                xmlns="http://www.w3.org/2000/svg">
         <g shapeRendering="auto">
-            <path id="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`} fill={leftColor}/>
-            <path id="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`} fill={rightColor}/>
-            <path id="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`} fill={topColor}/>
+            <path className="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`}/>
+            <path className="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`}/>
+            <path className="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`}/>
             {/* Matrix applies isometric transform, rotate for adjustment, translate to place on top of box */}
-            <text transform="matrix(0.9, -0.45, 0.9, 0.45, 0, 0) rotate(10) translate(45, 210)"
+            <text className="text"
+                  transform="matrix(0.9, -0.45, 0.9, 0.45, 0, 0) rotate(10) translate(45, 210)"
                   fontSize='90'
                   fontWeight={700}
-                  textAnchor="middle"
-                  id="number"
-                  fill={textColor}>
+                  textAnchor="middle">
                 {children}
             </text>
         </g>

src/styles/globals.scss

@@ -45,3 +45,10 @@ body {
     }
   }
 }
+
+.box-graphic {
+  .top { @apply fill-[#c9aa8a]; }
+  .left { @apply fill-[#ad8d6c]; }
+  .right {@apply fill-[#8f704e];}
+  .text { @apply fill-white; }
+}