feat: merge themes

src/components/Breakdown/components/Row.tsx

@@ -1,5 +1,5 @@
 import getWN8Percentile from '../../../core/blitz/getWN8Percentile.js';
-import { theme, themeTransparent } from '../../../stitches.config.js';
+import { theme } from '../../../stitches.config.js';
 import { RowDiscriminator } from './RowDiscriminator.js';
 import { RowStat } from './RowStat.js';
 
@@ -41,10 +41,10 @@ export function Row({
         borderRadius: 4,
         backgroundColor: isListing
           ? naked
-            ? themeTransparent.colors.componentInteractive
+            ? theme.colors.componentInteractive_transparent
             : theme.colors.componentInteractive
           : naked
-          ? themeTransparent.colors.appBackground2
+          ? theme.colors.appBackground2_transparent
           : theme.colors.appBackground2,
         padding: 8,
       }}

src/components/Tanks/components/Item.tsx

@@ -2,7 +2,7 @@ import {
   TANK_ICONS,
   TANK_ICONS_PREMIUM,
 } from '../../../core/blitz/tankopedia.js';
-import { theme, themeAmber } from '../../../stitches.config.js';
+import { theme } from '../../../stitches.config.js';
 
 export interface ItemProps {
   image?: string;
@@ -23,7 +23,7 @@ export function Item({ image, type, name, isPremium }: ItemProps) {
         alignItems: 'center',
         borderRadius: 4,
         backgroundColor: isPremium
-          ? themeAmber.colors.componentInteractive
+          ? theme.colors.componentInteractive_amber
           : theme.colors.componentInteractive,
       }}
     >
@@ -48,7 +48,7 @@ export function Item({ image, type, name, isPremium }: ItemProps) {
             fontSize: 16,
             whiteSpace: 'nowrap',
             color: isPremium
-              ? themeAmber.colors.textLowContrast
+              ? theme.colors.textLowContrast_amber
               : theme.colors.textHighContrast,
           }}
         >

src/components/TierWeights.tsx

@@ -1,5 +1,5 @@
 import { TIER_ROMAN_NUMERALS, Tier } from '../core/blitz/tankopedia.js';
-import { themeLight } from '../stitches.config.js';
+import { theme } from '../stitches.config.js';
 
 export type TierWeightsRecord = Partial<Record<Tier, number>>;
 
@@ -14,9 +14,9 @@ export default function TierWeights({ weights }: TierWeightsProps) {
         <div
           key={tier}
           style={{
-            backgroundColor: themeLight.colors.appBackground1,
+            backgroundColor: theme.colors.appBackground1_light,
             flex: weight,
-            color: themeLight.colors.textHighContrast,
+            color: theme.colors.textHighContrast_light,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',

src/stitches.config.ts

@@ -3,11 +3,12 @@ import { createBorderStyles, createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
 export const theme = {
-  colors: createColors(slateDark),
+  colors: {
+    ...createColors(slateDark),
+    ...createColors(slate, 'light'),
+    ...createColors(slateDarkA, 'transparent'),
+    ...createColors(amberDark, 'amber'),
+  },
+
   borderStyles: createBorderStyles(slateDark),
 };
-export const themeTransparent = {
-  colors: createColors(slateDarkA),
-};
-export const themeLight = { colors: createColors(slate) };
-export const themeAmber = { colors: createColors(amberDark) };