feat: session tracker themeing

src/app/embeds/session/page.tsx

@@ -207,6 +207,8 @@ export default function SessionPage() {
               since !== undefined &&
               diff !== undefined && (
                 <Breakdown.Row
+                  color={session.color}
+                  highContrast={session.highContrast}
                   minimized={!session.showCareer}
                   title={`Since ${since.toLocaleString(undefined, {
                     hour: 'numeric',
@@ -293,6 +295,8 @@ export default function SessionPage() {
 
                 return (
                   <Breakdown.Row
+                    color={session.color}
+                    highContrast={session.highContrast}
                     key={stats.tank_id}
                     minimized={!session.showCareer}
                     title={tankopedia?.name ?? `Unknown tank ${stats.tank_id}`}

src/app/tools/session/components/CustomColumn.tsx

@@ -23,8 +23,6 @@ export function CustomColumn({ column, Builder }: CustomColumn) {
       <Builder.SubTrigger>Column {column + 1}</Builder.SubTrigger>
 
       <Builder.SubContent>
-        <Builder.Label>Display</Builder.Label>
-
         <Builder.RadioGroup
           value={customColumn.display}
           onValueChange={(event) =>

src/app/tools/session/components/Menu.tsx

@@ -1,4 +1,10 @@
 import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
+import {
+  ACCENT_COLORS,
+  AccentColor,
+  GRAY_COLORS,
+  GrayColor,
+} from '../../../../constants/radixColors';
 import { useSession } from '../../../../stores/session';
 import { CustomColumn } from './CustomColumn';
 
@@ -12,6 +18,27 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
 
   return (
     <Builder.Content>
+      <Builder.Sub>
+        <Builder.SubTrigger>Accent color</Builder.SubTrigger>
+
+        <Builder.SubContent>
+          <Builder.RadioGroup
+            value={session.color}
+            onValueChange={(value) =>
+              useSession.setState({ color: value as AccentColor | GrayColor })
+            }
+          >
+            {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => (
+              <Builder.RadioItem value={color}>{`${color
+                .charAt(0)
+                .toUpperCase()}${color.slice(1)}`}</Builder.RadioItem>
+            ))}
+          </Builder.RadioGroup>
+        </Builder.SubContent>
+      </Builder.Sub>
+
+      <Builder.Separator />
+
       <CustomColumn Builder={Builder} column={0} />
       <CustomColumn Builder={Builder} column={1} />
       <CustomColumn Builder={Builder} column={2} />

src/commands/ratings.tsx

@@ -17,7 +17,6 @@ import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import getRatingsInfo from '../core/blitz/getRatingsInfo';
 import { getRatingsLeague } from '../core/blitz/getRatingsLeague';
 import { getRatingsNeighbors } from '../core/blitz/getRatingsNeighbors';
-import regionToRegionSubdomain from '../core/blitz/regionToRegionSubdomain';
 import { getArchivedLatestSeasonNumber } from '../core/blitzkrieg/getArchivedLatestSeasonNumber';
 import getArchivedRatingsInfo from '../core/blitzkrieg/getArchivedRatingsInfo';
 import { getArchivedRatingsLeaderboard } from '../core/blitzkrieg/getArchivedRatingsLeaderboard';
@@ -256,7 +255,6 @@ export const ratingsCommand = new Promise<CommandRegistryRaw>(
 
           if (regionRatingsInfo.detail !== undefined) return noOngoingSeason;
 
-          const regionSubdomain = regionToRegionSubdomain(region);
           const result =
             subcommandGroup === 'current'
               ? await getRatingsLeague(region, leagueIndex).then(

src/components/Breakdown/components/Row.tsx

@@ -1,5 +1,10 @@
+import { createColors } from 'bepaint';
 import { Percentile } from '../../../constants/percentiles';
-import { theme } from '../../../stitches.config';
+import {
+  AccentColor,
+  GrayColor,
+  PALETTES,
+} from '../../../constants/radixColors';
 import { TREE_TYPE_ICONS, TreeTypeEnum } from '../../Tanks';
 import { RowStat } from './RowStat';
 
@@ -17,18 +22,28 @@ interface RowProps {
   minimized?: boolean;
   treeType?: TreeTypeEnum;
   tankType?: string;
-
+  color?: AccentColor | GrayColor;
   stats: (RowStatItem | undefined)[];
 }
 
-export function Row(props: RowProps) {
+export function Row({
+  color = 'slate',
+  stats,
+  title,
+  minimized,
+  tankType,
+  treeType,
+  type,
+}: RowProps) {
+  const theme = createColors(PALETTES[`${color}Dark`]);
+
   return (
     <div
       style={{
         display: 'flex',
         flexDirection: 'column',
         borderRadius: 4,
-        backgroundColor: theme.colors.appBackground2,
+        backgroundColor: theme.appBackground2,
         overflow: 'hidden',
       }}
     >
@@ -39,16 +54,12 @@ export function Row(props: RowProps) {
           justifyContent: 'center',
           padding: 8,
           gap: 4,
-          backgroundColor: theme.colors.componentInteractive,
+          backgroundColor: theme.componentInteractive,
         }}
       >
-        {props.type === 'tank' && props.tankType !== undefined && (
+        {type === 'tank' && tankType !== undefined && (
           <img
-            src={
+            src={TREE_TYPE_ICONS[treeType ?? TreeTypeEnum.TechTree][tankType]}
-              TREE_TYPE_ICONS[props.treeType ?? TreeTypeEnum.TechTree][
-                props.tankType
-              ]
-            }
             style={{ width: 16, height: 16 }}
           />
         )}
@@ -56,18 +67,18 @@ export function Row(props: RowProps) {
         <span
           style={{
             color:
-              props.type === 'tank'
+              type === 'tank'
-                ? props.treeType === TreeTypeEnum.Collector
+                ? treeType === TreeTypeEnum.Collector
-                  ? theme.colors.textLowContrast_blue
+                  ? theme.textLowContrast_blue
-                  : props.treeType === TreeTypeEnum.Premium
+                  : treeType === TreeTypeEnum.Premium
-                  ? theme.colors.textLowContrast_amber
+                  ? theme.textLowContrast_amber
-                  : theme.colors.textHighContrast
+                  : theme.textHighContrast
-                : theme.colors.textLowContrast,
+                : theme.textLowContrast,
             fontWeight: 900,
             fontSize: 16,
           }}
         >
-          {props.title}
+          {title}
         </span>
       </div>
 
@@ -78,11 +89,11 @@ export function Row(props: RowProps) {
           paddingBottom: 8,
         }}
       >
-        {props.stats.map(
+        {stats.map(
           (row, index) =>
             row && (
               <RowStat
-                minimized={props.minimized}
+                minimized={minimized}
                 key={index}
                 name={`${row.title} • ${row.career ?? '--'}`}
                 value={row.current ?? '--'}

src/components/Breakdown/components/RowStat.tsx

@@ -1,5 +1,10 @@
+import { createColors } from 'bepaint';
 import { Percentile } from '../../../constants/percentiles';
-import { theme } from '../../../stitches.config';
+import {
+  AccentColor,
+  GrayColor,
+  PALETTES,
+} from '../../../constants/radixColors';
 import PercentileIndicator from '../../PercentileIndicator';
 
 export interface RowStatProps {
@@ -8,6 +13,7 @@ export interface RowStatProps {
   delta?: number;
   percentile?: Percentile;
   minimized?: boolean;
+  color?: AccentColor | GrayColor;
 }
 
 export function RowStat({
@@ -16,7 +22,10 @@ export function RowStat({
   delta,
   percentile,
   minimized = false,
+  color = 'slate',
 }: RowStatProps) {
+  const theme = createColors(PALETTES[`${color}Dark`]);
+
   return (
     <div
       style={{
@@ -52,7 +61,7 @@ export function RowStat({
 
         <span
           style={{
-            color: theme.colors.textHighContrast,
+            color: theme.textHighContrast,
             fontWeight: 'bold',
             fontSize: 16,
             textAlign: 'center',
@@ -65,7 +74,7 @@ export function RowStat({
       {!minimized && (
         <span
           style={{
-            color: theme.colors.textLowContrast,
+            color: theme.textLowContrast,
             textAlign: 'center',
             fontSize: 12,
           }}

src/constants/radixColors.ts

@@ -0,0 +1,55 @@
+import * as colors from '@radix-ui/colors';
+import { Theme } from '@radix-ui/themes';
+import { ComponentProps } from 'react';
+
+export type AccentColor = Exclude<
+  ComponentProps<typeof Theme>['accentColor'],
+  'gray' | undefined
+>;
+export type AccentColorDark = `${AccentColor}Dark`;
+export type GrayColor = Exclude<
+  ComponentProps<typeof Theme>['grayColor'],
+  'auto' | undefined
+>;
+export type GrayColorDark = `${GrayColor}Dark`;
+
+export const ACCENT_COLORS: AccentColor[] = [
+  'tomato',
+  'red',
+  'ruby',
+  'crimson',
+  'pink',
+  'plum',
+  'purple',
+  'violet',
+  'iris',
+  'indigo',
+  'blue',
+  'cyan',
+  'teal',
+  'jade',
+  'green',
+  'grass',
+  'brown',
+  'orange',
+  'sky',
+  'mint',
+  'lime',
+  'yellow',
+  'amber',
+  'gold',
+  'bronze',
+];
+export const GRAY_COLORS: GrayColor[] = [
+  'gray',
+  'mauve',
+  'slate',
+  'sage',
+  'olive',
+  'sand',
+];
+
+export const PALETTES: Record<
+  AccentColor | AccentColorDark | GrayColor | GrayColorDark,
+  { [key: `${string}${number}`]: string }
+> = colors;

src/stores/session.ts

@@ -2,6 +2,7 @@ import { produce } from 'immer';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { CustomColumnDisplay } from '../app/tools/session/components/CustomColumn';
+import { AccentColor, GrayColor } from '../constants/radixColors';
 import { Region } from '../constants/regions';
 import { WARGAMING_APPLICATION_ID } from '../constants/wargamingApplicationID';
 import fetchBlitz from '../core/blitz/fetchBlitz';
@@ -29,6 +30,7 @@ type Session = (
   }[] & { length: 4 };
   showTotal: boolean;
   showCareer: boolean;
+  color: AccentColor | GrayColor;
 };
 
 export async function setSession(region: Region, id: number, nickname: string) {
@@ -78,10 +80,9 @@ export const useSession = create<Session>()(
           { display: 'wn8', showDelta: false },
           { display: 'damage', showDelta: true },
         ],
+        color: 'slate',
       }),
-      {
+      { name: 'session' },
-        name: 'session',
-      },
     ),
   ),
 );