From bbffcd0f49895a1e94db0643f976ef2e3e298765 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 20 Feb 2025 12:23:21 +0100
Subject: [PATCH] fixes

---
 apps/theme/components/Group/Group.tsx    | 14 +++++++-------
 apps/theme/components/Scale/Scale.tsx    | 10 +++++-----
 apps/theme/store.ts                      |  6 ++++++
 packages/cli/src/colors/colorMetadata.ts |  8 +++-----
 packages/cli/src/colors/types.ts         | 10 +++-------
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/theme/components/Group/Group.tsx b/apps/theme/components/Group/Group.tsx
index d0d046989f..2755ffd762 100644
--- a/apps/theme/components/Group/Group.tsx
+++ b/apps/theme/components/Group/Group.tsx
@@ -16,7 +16,7 @@ import classes from './Group.module.css';
 
 type GroupProps = {
   header: string;
-  colors: ColorNumber[];
+  colorNumbers: ColorNumber[];
   colorScale: ThemeInfo;
   showColorMeta?: boolean;
   names?: string[];
@@ -25,7 +25,7 @@ type GroupProps = {
 
 export const Group = ({
   header,
-  colors,
+  colorNumbers,
   showColorMeta,
   names,
   colorScale,
@@ -36,8 +36,8 @@ export const Group = ({
   const colorModalRefs = useRef<React.RefObject<HTMLDialogElement | null>[]>(
     [],
   );
-  if (colorModalRefs.current.length !== colors.length) {
-    colorModalRefs.current = Array(colors.length)
+  if (colorModalRefs.current.length !== colorNumbers.length) {
+    colorModalRefs.current = Array(colorNumbers.length)
       .fill(null)
       .map(() => createRef<HTMLDialogElement>());
   }
@@ -54,8 +54,8 @@ export const Group = ({
       )}
 
       <div className={cl(classes.colors)}>
-        {colors.map((item, index) => {
-          const { number, hex } = colorScale[colorScheme][item];
+        {colorNumbers.map((colorNumber, index) => {
+          const { number, hex } = colorScale[colorScheme][colorNumber - 1];
           const color: Color = {
             ...getColorMetadataByNumber(number),
             number,
@@ -71,7 +71,7 @@ export const Group = ({
               <RovingFocusItem value={namespace + number} asChild>
                 <ColorPreview
                   color={hex}
-                  colorNumber={item}
+                  colorNumber={colorNumber}
                   contrast={'dd'}
                   lightness={'dd'}
                   showColorMeta={showColorMeta}
diff --git a/apps/theme/components/Scale/Scale.tsx b/apps/theme/components/Scale/Scale.tsx
index fa75e125b6..b4f61c2fc6 100644
--- a/apps/theme/components/Scale/Scale.tsx
+++ b/apps/theme/components/Scale/Scale.tsx
@@ -24,7 +24,7 @@ export const Scale = ({
         <div className={classes.test}>
           <Group
             header={showHeader ? 'Background' : ''}
-            colors={[1, 2]}
+            colorNumbers={[1, 2]}
             colorScale={colorScale}
             showColorMeta={showColorMeta}
             names={['Default', 'Tinted']}
@@ -32,7 +32,7 @@ export const Scale = ({
           />
           <Group
             header={showHeader ? 'Surface' : ''}
-            colors={[3, 4, 5, 6]}
+            colorNumbers={[3, 4, 5, 6]}
             colorScale={colorScale}
             showColorMeta={showColorMeta}
             names={['Default', 'Tinted', 'Hover', 'Active']}
@@ -41,7 +41,7 @@ export const Scale = ({
           <Group
             showColorMeta={showColorMeta}
             header={showHeader ? 'Border' : ''}
-            colors={[7, 8, 9]}
+            colorNumbers={[7, 8, 9]}
             colorScale={colorScale}
             names={['Subtle', 'Default', 'Strong']}
             namespace={namespace}
@@ -49,7 +49,7 @@ export const Scale = ({
           <Group
             showColorMeta={showColorMeta}
             header={showHeader ? 'Text' : ''}
-            colors={[10, 11]}
+            colorNumbers={[10, 11]}
             colorScale={colorScale}
             names={['Subtle', 'Default']}
             namespace={namespace}
@@ -57,7 +57,7 @@ export const Scale = ({
           <Group
             showColorMeta={showColorMeta}
             header={showHeader ? 'Base' : ''}
-            colors={[12, 13, 14, 15, 16]}
+            colorNumbers={[12, 13, 14, 15, 16]}
             colorScale={colorScale}
             names={[
               'Default',
diff --git a/apps/theme/store.ts b/apps/theme/store.ts
index 31e5987c7e..9050a8b5f6 100644
--- a/apps/theme/store.ts
+++ b/apps/theme/store.ts
@@ -55,6 +55,12 @@ export const useThemeStore = create(
         name: 'background-default',
         displayName: 'Default',
         group: 'neutral',
+        description: '',
+        luminance: {
+          light: 0,
+          dark: 0,
+          contrast: 0,
+        },
       },
       name: 'Default',
     },
diff --git a/packages/cli/src/colors/colorMetadata.ts b/packages/cli/src/colors/colorMetadata.ts
index 11f96a990a..4eb415a37f 100644
--- a/packages/cli/src/colors/colorMetadata.ts
+++ b/packages/cli/src/colors/colorMetadata.ts
@@ -1,4 +1,5 @@
-import type { ColorMetadataByName, ColorMetadataByNumber, ColorNumber, CssColor, GlobalColors } from './types.js';
+import * as R from 'ramda';
+import type { ColorMetadataByName, ColorNumber, CssColor, GlobalColors } from './types.js';
 
 export const baseColors: Record<GlobalColors, CssColor> = {
   blue: '#0A71C0',
@@ -208,10 +209,7 @@ export const colorMetadata: ColorMetadataByName = {
   },
 };
 
-export const colorMetadataByNumber = Object.entries(colorMetadata).reduce((acc, [_, metadata]) => {
-  acc[metadata.number] = metadata;
-  return acc;
-}, {} as ColorMetadataByNumber);
+const colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
 
 export const getColorMetadataByNumber = (number: ColorNumber) => {
   return colorMetadataByNumber[number];
diff --git a/packages/cli/src/colors/types.ts b/packages/cli/src/colors/types.ts
index b86e691e5d..723c89c9a4 100644
--- a/packages/cli/src/colors/types.ts
+++ b/packages/cli/src/colors/types.ts
@@ -76,11 +76,9 @@ export type ColorMetadataByName = {
   [P in keyof SemanticColorMapping]: SemanticColorMapping[P] & ColorMetadata;
 };
 
-export type ColorMetadataByNumber = {
-  [P in keyof SemanticColorMapping as SemanticColorMapping[P]['number']]: SemanticColorMapping[P] & ColorMetadata;
-};
-
 export type ColorMetadata = {
+  name: ColorNames;
+  number: ColorNumber;
   displayName: string;
   description: string;
   group: string;
@@ -91,10 +89,8 @@ export type ColorMetadata = {
   };
 };
 
-export type Color = Partial<ColorMetadata> & {
+export type Color = ColorMetadata & {
   hex: CssColor;
-  name: ColorNames;
-  number: ColorNumber;
 };
 
 export type ThemeInfo = {