feat: use bepaint

src/commands/today.tsx

@@ -71,41 +71,44 @@ export default {
 
     const accumulatedStats = sumStats(allStatsToAccumulate);
 
-    const rows = Object.entries({
-      0: accumulatedStats,
-      ...tankStatsOverTime,
-    }).map(([tankId, tankStats]) => {
-      const career = careerStats[tankId as unknown as number];
+    if (Object.keys(tankStatsOverTime).length > 0) {
+      tankStatsOverTime[0] = accumulatedStats;
+    }
 
-      return (
-        <Breakdown.Row
-          key={tankId}
-          name={
-            tankId === '0'
-              ? 'Today'
-              : resolveTankName({
-                  tank_id: tankId as unknown as number,
-                  name: tankopedia[tankId as unknown as number].name,
-                })
-          }
-          winrate={tankStats.wins / tankStats.battles}
-          careerWinrate={career.wins / career.battles}
-          WN8={-Infinity}
-          careerWN8={-Infinity}
-          damage={tankStats.damage_dealt / tankStats.battles}
-          careerDamage={career.damage_dealt / career.battles}
-          survival={tankStats.survived_battles / tankStats.battles}
-          careerSurvival={career.survived_battles / career.battles}
-          battles={tankStats.battles}
-          careerBattles={career.battles}
-          icon={
-            tankId === '0'
-              ? undefined
-              : tankopedia[tankId as unknown as number].images.normal
-          }
-        />
-      );
-    });
+    const rows = Object.entries(tankStatsOverTime).map(
+      ([tankId, tankStats]) => {
+        const career = careerStats[tankId as unknown as number];
+
+        return (
+          <Breakdown.Row
+            key={tankId}
+            name={
+              tankId === '0'
+                ? 'Today'
+                : resolveTankName({
+                    tank_id: tankId as unknown as number,
+                    name: tankopedia[tankId as unknown as number].name,
+                  })
+            }
+            winrate={tankStats.wins / tankStats.battles}
+            careerWinrate={career.wins / career.battles}
+            WN8={-Infinity}
+            careerWN8={-Infinity}
+            damage={tankStats.damage_dealt / tankStats.battles}
+            careerDamage={career.damage_dealt / career.battles}
+            survival={tankStats.survived_battles / tankStats.battles}
+            careerSurvival={career.survived_battles / career.battles}
+            battles={tankStats.battles}
+            careerBattles={career.battles}
+            icon={
+              tankId === '0'
+                ? undefined
+                : tankopedia[tankId as unknown as number].images.normal
+            }
+          />
+        );
+      },
+    );
 
     const image = await render(
       <Wrapper>

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}

src/constants/colors.ts

@@ -1,3 +1,5 @@
-export const ACCENT_COLOR = '#ffffff';
+import { theme } from '../stitches.config.js';
+
+export const ACCENT_COLOR = theme.colors.textHighContrast;
 export const POSITIVE_COLOR = '#82ff29';
 export const NEGATIVE_COLOR = '#ff4747';

src/stitches.config.ts

@@ -0,0 +1,7 @@
+import { slateDark } from '@radix-ui/colors';
+import { createColors } from 'bepaint';
+
+// this isn't really a stitches config, but the object is compliant
+export const theme = {
+  colors: createColors(slateDark),
+};