Fix color types

Author: shiro

src/about/SnakeGame.tsx

@@ -191,7 +191,7 @@ const _SnakeGame = css``;
 
 const Board = css`
   background: repeating-conic-gradient(
-      ${color("colors-primary-100")} 0 90deg,
+      ${color("colors/primary-100")} 0 90deg,
       transparent 0 180deg
     )
     0 0/32px 32px;

src/style/colorsTs.tsx

@@ -3,22 +3,22 @@ import theme from "./theme";
 export const themeColors = theme.colors;
 
 export const themeColorNameList = (() => {
-  const list: string[] = [];
+  const set = new Set<string>();
 
   for (const colorSet of [themeColors, themeColors.light, themeColors.dark]) {
     for (const [key, value] of Object.entries(colorSet)) {
-      if (typeof value == "string") list.push(key);
+      if (typeof value == "string") set.add(key);
     }
   }
 
-  return list;
+  return set;
 })();
 
 export const themeColorList = (() => {
   const list: string[] = [];
 
   for (const colorSet of [themeColors, themeColors.light, themeColors.dark]) {
-    for (const [key, value] of Object.entries(colorSet)) {
+    for (const value of Object.values(colorSet)) {
       if (typeof value == "string") list.push(value);
     }
   }

src/style/mixins/layoutTs.tsx

@@ -38,8 +38,9 @@ export const _color = (value: string) => {
 
   const important = rest.some((v) => v == "!important");
 
-  if (!themeColorNameList.includes(value)) {
+  if (!themeColorNameList.has(value)) {
     console.warn(`color '${value}' was not found in the current color palette`);
+    console.log(themeColorNameList);
     console.trace();
   }
 
@@ -50,7 +51,7 @@ export const _color = (value: string) => {
 type ColorTheme = "light" | "dark";
 
 export const _staticColor = (value: string, theme: ColorTheme) => {
-  if (!themeColorNameList.includes(value)) {
+  if (!themeColorNameList.has(value)) {
     console.warn(`color '${value}' was not found in the current color palette`);
     console.trace();
     return;

src/style/tw.style.tsx

@@ -13,14 +13,13 @@ import {
   jumboText,
   largeText,
   primaryFontBold,
-  smallText,
   style,
   subText,
   textDefinitions,
 } from "~/style/commonStyle";
 import { pxToRem } from "~/style/fluidSizeTS";
 
-const twColors = themeColorNameList
+const twColors = Array.from(themeColorNameList.keys())
   .map(normalizeColorName)
   .map((color) => `--color-${color}: var(--color-${color});`)
   .join("\n");