Update level.chroma store when colors recalculated and use it in UI instead of 's chroma. Get rid of referencedC hack

Author: psd-coder

packages/core/src/components/Grid/GridCellLevelHeader.tsx

@@ -163,23 +163,22 @@ const ContrastInput = memo(function ContrastInput({
 
 const LevelChromaInput = withValidation(withNumericIncrementControls(Input));
 const ChromaInput = memo(function ChromaInput({ levelId }: LevelComponentProps) {
+  const level = getLevel(levelId);
+  const chroma = useSubscribe(level.chroma.$raw);
+  const chromaCap = useSubscribe(level.chromaCap.$raw);
+  const error = useSubscribe(level.chromaCap.$validationError);
   const $chromaPlaceholder = useSignal((get) => {
     return get(chromaModeStore.$lastValidValue) === "even"
-      ? get(level.$tintColor).referencedC.toFixed(2)
+      ? get(level.chroma.$lastValidValue).toFixed(2)
       : "max";
   });
   const $chromaLabel = useSignal((get) => {
     const chromaCap = get(level.chromaCap.$raw);
 
     return chromaCap ? LABEL_CHROMA_CAP_DEFINED : LABEL_CHROMA_CAP_SET;
   });
-
-  const level = getLevel(levelId);
-  const chroma = useSubscribe(level.chroma.$raw);
-  const chromaCap = useSubscribe(level.chromaCap.$raw);
   const chromaLabel = useSubscribe($chromaLabel);
   const chromaPlaceholder = useSubscribe($chromaPlaceholder);
-  const error = useSubscribe(level.chromaCap.$validationError);
 
   return (
     <LevelChromaInput

packages/core/src/stores/colors.ts

@@ -129,6 +129,7 @@ function handleGeneratedColor(payload: GeneratedColorPayload) {
 
         levelStore.$tintColor.set(payload.tint);
         for (const [hueId, color] of objectEntries(payload.cells)) {
+          levelStore.chroma.$raw.set(color.c);
           upsertColor(payload.levelId, hueId, color);
         }
       });

packages/core/src/stores/constants.ts

@@ -12,7 +12,6 @@ export const FALLBACK_HUE_TINT_COLOR = FALLBACK_COLOR_DATA;
 
 export const FALLBACK_LEVEL_TINT_COLOR = {
   ...FALLBACK_COLOR_DATA,
-  referencedC: 0,
 } as ColorLevelTintData;
 
 export const FALLBACK_CELL_COLOR = {

packages/core/src/types.ts

@@ -61,7 +61,7 @@ export type ColorData = LchColor & {
   css: ColorString;
 };
 export type ColorHueTintData = ColorData;
-export type ColorLevelTintData = ColorData & { referencedC: LevelChroma };
+export type ColorLevelTintData = ColorData;
 export type ColorCellData = ColorData & {
   p3: boolean;
 };

packages/core/src/utils/colors/calculateColors.ts

@@ -124,7 +124,6 @@ export function calculateColors(
             contrastLevel: MIN_LEVEL_TINT_CR,
             chroma: LevelChroma(0),
           }),
-          referencedC: LevelChroma(0),
         },
         cells: {},
       });
@@ -151,7 +150,7 @@ export function calculateColors(
 
       // Calculate level tint based only on the first hue row
       if (hueIndex === 0) {
-        tint = { ...cellColor, referencedC: cellColor.c };
+        tint = cellColor;
 
         if (tint.cr < MIN_LEVEL_TINT_CR) {
           tint = {
@@ -161,7 +160,6 @@ export function calculateColors(
               contrastLevel: MIN_LEVEL_TINT_CR,
               chroma: chroma,
             }),
-            referencedC: cellColor.c,
           };
         }
       }