feat: use bepaint

package.json

@@ -10,7 +10,9 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@radix-ui/colors": "^0.1.8",
     "@resvg/resvg-js": "^2.4.1",
+    "bepaint": "^0.1.0-beta.3",
     "discord.js": "^14.9.0",
     "escape-html": "^1.0.3",
     "fuzzysort": "^2.0.4",

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),
+};

yarn.lock

@@ -156,6 +156,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
   integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
 
+"@radix-ui/colors@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-0.1.8.tgz#b08c62536fc462a87632165fb28e9b18f9bd047e"
+  integrity sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw==
+
 "@resvg/[email protected]":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.4.1.tgz#49dc9722f95096f8aff70186deae8e148d60dce5"
@@ -338,6 +343,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
   integrity sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==
 
+bepaint@^0.1.0-beta.3:
+  version "0.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/bepaint/-/bepaint-0.1.0-beta.3.tgz#fe8f0d20e35da075a6ed69f42d61156d985da584"
+  integrity sha512-rybuEo674bEal5QUm/qO9jok3TptyRH2bdHDheFO25fw+HCBic5Oiy+ZWnOFnROCGZQy2Zcw7po4KrKSxz02Pg==
+
 busboy@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"