Refactored color type

digdir · Jun 11, 2024 · 042cc93 · 042cc93
1 parent dd729c7
commit 042cc93
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 126 deletions.
diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
@@ -210,14 +210,11 @@ export default function Home() {
    */
   const getColorError = (scale: ColorInfoType[]) => {
     const contrast = areColorsContrasting(
-      scale[8].hexColor as CssColor,
+      scale[8].hex as CssColor,
       '#ffffff',
       'decorative',
     );
-    const textCanBeUsed = canTextBeUsedOnColors(
-      scale[8].hexColor,
-      scale[10].hexColor,
-    );
+    const textCanBeUsed = canTextBeUsedOnColors(scale[8].hex, scale[10].hex);
 
     if (!contrast && textCanBeUsed) {
       return 'decorative';
@@ -234,7 +231,7 @@ export default function Home() {
 
       <ColorModal
         name={selectedColor.name}
-        color={selectedColor.hexColor}
+        color={selectedColor.hex}
         colorModalRef={colorModalRef}
       />
 

diff --git a/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx b/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx
@@ -119,39 +119,39 @@ const Box = ({ colorScale, backgroundIndex, scales }: BoxProps) => {
   return (
     <div
       className={classes.box}
-      style={{ backgroundColor: colorScale[backgroundIndex].hexColor }}
+      style={{ backgroundColor: colorScale[backgroundIndex].hex }}
     >
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[0][2].hexColor }}
+        style={{ backgroundColor: scales[0][2].hex }}
       ></div>
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[1][2].hexColor }}
+        style={{ backgroundColor: scales[1][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[2][2].hexColor }}
+        style={{ backgroundColor: scales[2][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[3][2].hexColor }}
+        style={{ backgroundColor: scales[3][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[4][2].hexColor }}
+        style={{ backgroundColor: scales[4][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[5][2].hexColor }}
+        style={{ backgroundColor: scales[5][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[6][2].hexColor }}
+        style={{ backgroundColor: scales[6][2].hex }}
       />
       <div
         className={classes.surface}
-        style={{ backgroundColor: scales[7][2].hexColor }}
+        style={{ backgroundColor: scales[7][2].hex }}
       />
     </div>
   );

diff --git a/apps/theme/app/testside/Backgrounds/Backgrounds.tsx b/apps/theme/app/testside/Backgrounds/Backgrounds.tsx
@@ -21,91 +21,91 @@ export const Backgrounds = ({
     <div className={classes.rows}>
       <div
         className={classes.column}
-        style={{ backgroundColor: theme1.light[0].hexColor }}
+        style={{ backgroundColor: theme1.light[0].hex }}
       >
         <Heading
           className={classes.title}
           size='xs'
-          style={{ color: theme1.light[12].hexColor }}
+          style={{ color: theme1.light[12].hex }}
         >
           Light
         </Heading>
         <div className={classes.boxes}>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme1.light[1].hexColor }}
+            style={{ backgroundColor: theme1.light[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme2.light[1].hexColor }}
+            style={{ backgroundColor: theme2.light[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme1.light[1].hexColor }}
+            style={{ backgroundColor: theme1.light[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme4.light[1].hexColor }}
+            style={{ backgroundColor: theme4.light[1].hex }}
           ></div>
         </div>
       </div>
       <div
         className={classes.column}
-        style={{ backgroundColor: theme1.dark[0].hexColor }}
+        style={{ backgroundColor: theme1.dark[0].hex }}
       >
         <Heading
           className={classes.title}
           size='xs'
-          style={{ color: theme1.dark[12].hexColor }}
+          style={{ color: theme1.dark[12].hex }}
         >
           Dark
         </Heading>
         <div className={classes.boxes}>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme1.dark[1].hexColor }}
+            style={{ backgroundColor: theme1.dark[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme2.dark[1].hexColor }}
+            style={{ backgroundColor: theme2.dark[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme1.dark[1].hexColor }}
+            style={{ backgroundColor: theme1.dark[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme4.dark[1].hexColor }}
+            style={{ backgroundColor: theme4.dark[1].hex }}
           ></div>
         </div>
       </div>
       <div
         className={classes.column}
-        style={{ backgroundColor: theme1.contrast[0].hexColor }}
+        style={{ backgroundColor: theme1.contrast[0].hex }}
       >
         <Heading
           className={classes.title}
           size='xs'
-          style={{ color: theme1.contrast[12].hexColor }}
+          style={{ color: theme1.contrast[12].hex }}
         >
           Contrast
         </Heading>
         <div className={classes.boxes}>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme1.contrast[1].hexColor }}
+            style={{ backgroundColor: theme1.contrast[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme2.contrast[1].hexColor }}
+            style={{ backgroundColor: theme2.contrast[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme3.contrast[1].hexColor }}
+            style={{ backgroundColor: theme3.contrast[1].hex }}
           ></div>
           <div
             className={classes.box}
-            style={{ backgroundColor: theme4.contrast[1].hexColor }}
+            style={{ backgroundColor: theme4.contrast[1].hex }}
           ></div>
         </div>
       </div>

diff --git a/apps/theme/app/testside/BaseContrast/BaseContrast.tsx b/apps/theme/app/testside/BaseContrast/BaseContrast.tsx
@@ -72,46 +72,46 @@ const BaseBox = ({ colorScale, title }: BaseBoxProps) => {
       </Heading>
       <div
         className={classes.item}
-        style={{ backgroundColor: colorScale[8].hexColor }}
+        style={{ backgroundColor: colorScale[8].hex }}
       >
         <div className={classes.colorRow}>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[13].hexColor }}>Contrast 1</div>
-            {ContrastBox(colorScale[8].hexColor, colorScale[13].hexColor)}
+            <div style={{ color: colorScale[13].hex }}>Contrast 1</div>
+            {ContrastBox(colorScale[8].hex, colorScale[13].hex)}
           </div>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[14].hexColor }}>Contrast 2</div>
-            {ContrastBox(colorScale[8].hexColor, colorScale[14].hexColor)}
+            <div style={{ color: colorScale[14].hex }}>Contrast 2</div>
+            {ContrastBox(colorScale[8].hex, colorScale[14].hex)}
           </div>
         </div>
       </div>
       <div
         className={classes.item}
-        style={{ backgroundColor: colorScale[9].hexColor }}
+        style={{ backgroundColor: colorScale[9].hex }}
       >
         <div className={classes.colorRow}>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[13].hexColor }}>Contrast 1</div>
-            {ContrastBox(colorScale[9].hexColor, colorScale[13].hexColor)}
+            <div style={{ color: colorScale[13].hex }}>Contrast 1</div>
+            {ContrastBox(colorScale[9].hex, colorScale[13].hex)}
           </div>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[14].hexColor }}>Contrast 2</div>
-            {ContrastBox(colorScale[9].hexColor, colorScale[14].hexColor)}
+            <div style={{ color: colorScale[14].hex }}>Contrast 2</div>
+            {ContrastBox(colorScale[9].hex, colorScale[14].hex)}
           </div>
         </div>
       </div>
       <div
         className={classes.item}
-        style={{ backgroundColor: colorScale[10].hexColor }}
+        style={{ backgroundColor: colorScale[10].hex }}
       >
         <div className={classes.colorRow}>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[13].hexColor }}>Contrast 1</div>
-            {ContrastBox(colorScale[10].hexColor, colorScale[13].hexColor)}
+            <div style={{ color: colorScale[13].hex }}>Contrast 1</div>
+            {ContrastBox(colorScale[10].hex, colorScale[13].hex)}
           </div>
           <div className={classes.colorItem}>
-            <div style={{ color: colorScale[14].hexColor }}>Contrast 2</div>
-            {ContrastBox(colorScale[10].hexColor, colorScale[14].hexColor)}
+            <div style={{ color: colorScale[14].hex }}>Contrast 2</div>
+            {ContrastBox(colorScale[10].hex, colorScale[14].hex)}
           </div>
         </div>
       </div>

diff --git a/apps/theme/app/testside/Interaction/Interaction.tsx b/apps/theme/app/testside/Interaction/Interaction.tsx
@@ -104,12 +104,12 @@ const Column = ({ title, scales }: ColumnProps) => {
   return (
     <div
       className={classes.column}
-      style={{ backgroundColor: scales[0][0].hexColor }}
+      style={{ backgroundColor: scales[0][0].hex }}
     >
       <Heading
         className={classes.boxTitle}
         size='xs'
-        style={{ color: scales[0][12].hexColor }}
+        style={{ color: scales[0][12].hex }}
       >
         {title}
       </Heading>
@@ -157,13 +157,13 @@ const Box = ({ scales, colorIndex, type, columnTitle }: BoxProps) => {
       // Hover
       setToken(
         '--interaction' + i + 'Hover',
-        scales[i][type === 'surface' ? 3 : 9].hexColor,
+        scales[i][type === 'surface' ? 3 : 9].hex,
         'box' + type + columnTitle,
       );
       // Active
       setToken(
         '--interaction' + i + 'Active',
-        scales[i][type === 'surface' ? 4 : 10].hexColor,
+        scales[i][type === 'surface' ? 4 : 10].hex,
         'box' + type + columnTitle,
       );
     }
@@ -179,11 +179,9 @@ const Box = ({ scales, colorIndex, type, columnTitle }: BoxProps) => {
           key={index}
           className={cl(classes.surface, 'interactionSurface' + index)}
           style={{
-            backgroundColor: scales[index][colorIndex].hexColor,
+            backgroundColor: scales[index][colorIndex].hex,
             color:
-              type === 'base'
-                ? scales[index][13].hexColor
-                : scales[index][12].hexColor,
+              type === 'base' ? scales[index][13].hex : scales[index][12].hex,
           }}
         >
           Tekst
@@ -206,13 +204,13 @@ const Box2 = ({ scales, type, columnTitle }: BoxProps) => {
       // Hover
       setToken(
         '--interaction' + i + 'Hover',
-        scales[i][type === 'surface' ? 3 : 9].hexColor,
+        scales[i][type === 'surface' ? 3 : 9].hex,
         'box' + type + columnTitle,
       );
       // Active
       setToken(
         '--interaction' + i + 'Active',
-        scales[i][type === 'surface' ? 4 : 10].hexColor,
+        scales[i][type === 'surface' ? 4 : 10].hex,
         'box' + type + columnTitle,
       );
     }
@@ -225,8 +223,8 @@ const Box2 = ({ scales, type, columnTitle }: BoxProps) => {
           key={index}
           className={cl(classes.surface, 'interactionSurface' + index)}
           style={{
-            color: scales[index][11].hexColor,
-            borderColor: scales[index][8].hexColor,
+            color: scales[index][11].hex,
+            borderColor: scales[index][8].hex,
           }}
         >
           Tekst