fix(renderer): use consistent wheel label colors

renderer/src/remotion/WheelComposition.jsx

@@ -9,7 +9,7 @@ import {
   getWheelRotationDegrees,
   rightPointerClipPath,
 } from './wheel-layout.js';
-import {getContrastingTextColor, getRadialLabelLayout} from './wheel-label-layout.js';
+import {getRadialLabelLayout} from './wheel-label-layout.js';
 import {getTheme} from './themes.js';
 
 const baseFont =
@@ -124,7 +124,7 @@ export const WheelComposition = (props) => {
                   style={{
                     alignItems: 'center',
                     boxSizing: 'border-box',
-                    color: getContrastingTextColor(color),
+                    color: theme.text,
                     display: 'flex',
                     fontSize: label.fontSize,
                     flexDirection: 'column',
@@ -138,6 +138,7 @@ export const WheelComposition = (props) => {
                     padding: `0 ${label.horizontalPadding}px`,
                     position: 'absolute',
                     textAlign: 'center',
+                    textShadow: `0 1px 0 ${theme.textHalo}, 0 -1px 0 ${theme.textHalo}, 1px 0 0 ${theme.textHalo}, -1px 0 0 ${theme.textHalo}`,
                     top: label.y,
                     transform: `translate(-50%, -50%) rotate(${label.rotation}deg)`,
                     transformOrigin: '50% 50%',

renderer/src/remotion/themes.js

@@ -21,7 +21,7 @@ export const themes = {
     text: '#1f2937',
     textHalo: 'rgba(255, 251, 235, 0.92)',
     winnerGlow: 'rgba(251, 146, 60, 0.5)',
-    slices: ['#f43f5e', '#f59e0b', '#84cc16', '#06b6d4', '#8b5cf6', '#ec4899', '#22c55e', '#fb923c'],
+    slices: ['#fb7185', '#f59e0b', '#84cc16', '#06b6d4', '#a78bfa', '#f472b6', '#22c55e', '#fb923c'],
   },
   mono: {
     background: '#f4f4f5',
@@ -33,7 +33,7 @@ export const themes = {
     text: '#18181b',
     textHalo: 'rgba(250, 250, 250, 0.9)',
     winnerGlow: 'rgba(161, 161, 170, 0.45)',
-    slices: ['#e4e4e7', '#a1a1aa', '#d4d4d8', '#71717a', '#f4f4f5', '#52525b'],
+    slices: ['#e4e4e7', '#a1a1aa', '#d4d4d8', '#b8b8bf', '#f4f4f5', '#c4c4ca'],
   },
 };
 

renderer/src/remotion/wheel-label-layout.js

@@ -43,7 +43,6 @@ export const estimateTextWidth = (text, fontSize) => {
 
   return (widthUnits + 2) * fontSize;
 };
-
 /**
  * @param {string[]} units
  * @param {number} lineCount
@@ -211,24 +210,3 @@ export const getRadialLabelLayout = ({center, radius, hubRadius, centerDegrees,
     lines,
   };
 };
-
-/**
- * @param {string} color
- * @returns {'#111827' | '#ffffff'}
- */
-export const getContrastingTextColor = (color) => {
-  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/iu.exec(color);
-  if (!match) {
-    return '#111827';
-  }
-
-  const redHex = match[1] ?? '00';
-  const greenHex = match[2] ?? '00';
-  const blueHex = match[3] ?? '00';
-  const red = Number.parseInt(redHex, 16) / 255;
-  const green = Number.parseInt(greenHex, 16) / 255;
-  const blue = Number.parseInt(blueHex, 16) / 255;
-  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
-
-  return luminance > 0.56 ? '#111827' : '#ffffff';
-};