feat: use bepaint

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -1,3 +1,5 @@
+import { theme } from '../../../stitches.config.js';
+
 export interface RowDiscriminatorProps {
   name: string;
   icon?: string;
@@ -25,7 +27,7 @@ export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
       )}
       <span
         style={{
-          color: '#A0A0A0',
+          color: theme.colors.textLowContrast,
           fontSize: 16,
           textAlign: 'center',
           display: 'block',

src/components/Breakdown/components/RowStat.tsx

@@ -1,3 +1,5 @@
+import { theme } from '../../../stitches.config.js';
+
 export interface RowStatProps {
   name: string;
   value: string;
@@ -17,7 +19,9 @@ export function RowStat({ name, value, career, delta }: RowStatProps) {
         flex: 1,
       }}
     >
-      <span style={{ color: '#A0A0A0', fontSize: 12 }}>{career}</span>
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
+        {career}
+      </span>
 
       <div
         style={{
@@ -38,12 +42,14 @@ export function RowStat({ name, value, career, delta }: RowStatProps) {
           />
         )}
 
-        <span style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>
+        <span style={{ color: theme.colors.textHighContrast, fontSize: 16, fontWeight: 'bold' }}>
           {value}
         </span>
       </div>
 
-      <span style={{ color: '#A0A0A0', fontSize: 12 }}>{name}</span>
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
+        {name}
+      </span>
     </div>
   );
 }

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -1,3 +1,4 @@
+import { theme } from '../../../stitches.config.js';
 import { Stat } from '../index.js';
 
 export interface GenericStatsRowProps {
@@ -13,8 +14,10 @@ export default function GenericStatsRow({ stat }: GenericStatsRowProps) {
         alignItems: 'center',
       }}
     >
-      <span style={{ color: '#A0A0A0', fontSize: 16 }}>{stat[0]}</span>
-      <span style={{ color: 'white', fontWeight: 'bold', fontSize: 16 }}>
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+        {stat[0]}
+      </span>
+      <span style={{ color: theme.colors.textHighContrast, fontWeight: 'bold', fontSize: 16 }}>
         {stat[1]}
       </span>
     </div>

src/components/NoBattlesInPeriod.tsx

@@ -1,3 +1,5 @@
+import { theme } from '../stitches.config.js';
+
 export default function NoBattlesInPeriod() {
   return (
     <div
@@ -7,7 +9,7 @@ export default function NoBattlesInPeriod() {
         justifyContent: 'center',
       }}
     >
-      <span style={{ fontSize: 16, color: '#A0A0A0' }}>
+      <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
         No battles played in this period
       </span>
     </div>

src/components/PoweredByBlitzStars.tsx

@@ -1,3 +1,5 @@
+import { theme } from '../stitches.config.js';
+
 export default function PoweredByBlitzStars() {
   return (
     <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
@@ -5,7 +7,7 @@ export default function PoweredByBlitzStars() {
         src="https://www.blitzstars.com/assets/images/4b4cb591.TankyMcPewpew.png"
         style={{ height: 16, width: 16 }}
       />
-      <span style={{ color: '#A0A0A0', fontSize: 16 }}>
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
         Powered by BlitzStars
       </span>
     </div>

src/components/TitleBar.tsx

@@ -1,3 +1,5 @@
+import { theme } from '../stitches.config.js';
+
 export interface TitleBarProps {
   name: string;
   nameDiscriminator?: string;
@@ -26,18 +28,22 @@ export default function TitleBar({
           <span
             style={{
               fontSize: 32,
-              color: 'white',
+              color: theme.colors.textHighContrast,
               fontWeight: 900,
               gap: 4,
             }}
           >
             {name}
             {nameDiscriminator && (
-              <span style={{ color: '#A0A0A0' }}>{nameDiscriminator}</span>
+              <span style={{ color: theme.colors.textLowContrast }}>
+                {nameDiscriminator}
+              </span>
             )}
           </span>
 
-          <span style={{ color: '#A0A0A0', fontSize: 16 }}>{description}</span>
+          <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+            {description}
+          </span>
         </div>
       </div>
 

src/components/Wrapper.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { theme } from '../stitches.config.js';
 
 export interface WrapperProps {
   children: ReactNode;
@@ -13,8 +14,8 @@ export default function Wrapper({ children }: WrapperProps) {
         padding: 16,
         gap: 32,
         width: 640,
-        background: 'black',
-        color: 'white',
+        backgroundColor: theme.colors.appBackground1,
+        color: theme.colors.textHighContrast,
       }}
     >
       {children}