fixes

digdir · Feb 20, 2025 · bbffcd0 · bbffcd0
1 parent 545bb95
commit bbffcd0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 24 deletions.
diff --git 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
@@ -24,15 +24,15 @@ export const Scale = ({
         <div className={classes.test}>
           <Group
             header={showHeader ? 'Background' : ''}
-            colors={[1, 2]}
+            colorNumbers={[1, 2]}
             colorScale={colorScale}
             showColorMeta={showColorMeta}
             names={['Default', 'Tinted']}
             namespace={namespace}
           />
           <Group
             header={showHeader ? 'Surface' : ''}
-            colors={[3, 4, 5, 6]}
+            colorNumbers={[3, 4, 5, 6]}
             colorScale={colorScale}
             showColorMeta={showColorMeta}
             names={['Default', 'Tinted', 'Hover', 'Active']}
@@ -41,23 +41,23 @@ 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}
           />
           <Group
             showColorMeta={showColorMeta}
             header={showHeader ? 'Text' : ''}
-            colors={[10, 11]}
+            colorNumbers={[10, 11]}
             colorScale={colorScale}
             names={['Subtle', 'Default']}
             namespace={namespace}
           />
           <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
@@ -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
@@ -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
@@ -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 = {