Testing new base dark logic

digdir · Jun 13, 2024 · 03cb819 · 03cb819
1 parent c6c2272
commit 03cb819
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 62 deletions.
diff --git a/apps/theme/app/testside/FullBaseTest/FullBaseTest.tsx b/apps/theme/app/testside/FullBaseTest/FullBaseTest.tsx
@@ -5,8 +5,8 @@ import cl from 'clsx/lite';
 import {
   getContrastFromLightness,
   getLightnessFromHex,
-  lightenDarkColor,
   calculateContrastOneColor,
+  getBaseColor,
 } from '@digdir/designsystemet/color';
 
 import { ContrastBox } from '../ContrastBox/ContrastBox';
@@ -16,7 +16,7 @@ export const FullBaseTest = () => {
   const [blueColors, setBlueColors] = useState<CssColor[]>([]);
 
   useEffect(() => {
-    const blue = GenerateColor('#0163BA');
+    const blue = GenerateColor('#0062BA');
     setBlueColors(blue);
   }, []);
 
@@ -101,13 +101,26 @@ export const FullBaseTest = () => {
     baseActive,
     bgColor,
     active,
+    theme,
   }: {
     baseDefault: CssColor;
     baseHover: CssColor;
     baseActive: CssColor;
     bgColor: CssColor;
     active: boolean;
+    theme: 'light' | 'dark' | 'contrast';
   }) => {
+    let bgDefault = blueColors[99];
+    let bgSubtle = blueColors[95];
+
+    if (theme == 'dark') {
+      bgDefault = blueColors[9];
+      bgSubtle = blueColors[13];
+    } else if (theme == 'contrast') {
+      bgDefault = blueColors[0];
+      bgSubtle = blueColors[5];
+    }
+
     return (
       <div className={cl(classes.list, active && classes.listActive)}>
         <Item
@@ -122,6 +135,14 @@ export const FullBaseTest = () => {
           mainColor={baseActive}
           bgColor={bgColor}
         />
+        <Item
+          mainColor={bgDefault}
+          bgColor={baseDefault}
+        />
+        <Item
+          mainColor={bgSubtle}
+          bgColor={baseDefault}
+        />
       </div>
     );
   };
@@ -134,19 +155,18 @@ export const FullBaseTest = () => {
 
     theme: 'light' | 'dark' | 'contrast';
   }) => {
-    let baseDefault = color;
-
+    let lightness = getLightnessFromHex(color);
     if (theme === 'dark' || theme === 'contrast') {
-      baseDefault = lightenDarkColor(color, theme);
+      color = getBaseColor(color);
+      lightness = 90;
     }
-
-    const lightness = getLightnessFromHex(baseDefault);
     const multiplier = lightness <= 30 ? -8 : 8;
 
+    const baseDefault = blueColors[lightness];
     const baseHover = blueColors[lightness - multiplier];
     const baseActive = blueColors[lightness - multiplier * 2];
 
-    const contrastOneColor = calculateContrastOneColor(baseDefault);
+    const contrastOneColor = calculateContrastOneColor(blueColors[lightness]);
 
     return (
       <div
@@ -162,13 +182,15 @@ export const FullBaseTest = () => {
           baseHover={baseHover}
           baseActive={baseActive}
           active={contrastOneColor === '#ffffff'}
+          theme={theme}
         />
         <List
           bgColor='#000000'
           baseDefault={baseDefault}
           baseHover={baseHover}
           baseActive={baseActive}
           active={contrastOneColor === '#000000'}
+          theme={theme}
         />
       </div>
     );

diff --git a/packages/cli/src/colors/colorUtils.ts b/packages/cli/src/colors/colorUtils.ts
@@ -2,7 +2,6 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { Hsluv } from 'hsluv';
 import chroma from 'chroma-js';
 
-import type { Mode } from './types.ts';
 /**
  * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
  *
@@ -305,57 +304,12 @@ export const getContrastFromLightness = (lightness: number, mainColor: CssColor,
   return ratio;
 };
 
-export const lightenDarkColor = (color: CssColor, mode: Mode) => {
-  const lightness = getLightnessFromHex(color);
-
-  const conv = new Hsluv();
-  conv.hex = color;
-  conv.hexToHsluv();
-  conv.hsluv_l = lightness < 45 ? getLightnessForDarkMode(color, mode) : conv.hsluv_l;
-  conv.hsluv_s = getSaturationForDarkMode(color, conv.hsluv_s);
-  conv.hsluvToHex();
-  return conv.hex as CssColor;
-};
-
-/**
- *
- * @param color The hex color
- * @param uvSat The HSLuv saturation value
- * @returns
- */
-const getSaturationForDarkMode = (color: CssColor, hslUvSat: number) => {
-  const hslLightness = getHslLightessFromHex(color) * 100;
-  if (hslLightness > 35 && hslLightness < 65) {
-    if (hslUvSat >= 90) {
-      return hslUvSat - 10;
-    }
-  }
-  return hslUvSat;
-};
-
-const getLightnessForDarkMode = (color: CssColor, mode: Mode) => {
-  const lightness: number = getLightnessFromHex(color);
-  if (mode === 'dark') {
-    if (lightness >= 23) {
-      return mapRange(lightness, 23, 44, 38, 45);
-    } else {
-      return mapRange(lightness, 0, 23, 28, 38);
-    }
-  } else {
-    if (lightness >= 23) {
-      return mapRange(lightness, 23, 44, 28, 35);
-    } else {
-      return mapRange(lightness, 0, 23, 18, 28);
-    }
-  }
-};
-
 /**
  * Maps the numbers from [start1 - end1] to the range [start2 - end2], maintaining the proportionality between the numbers in the ranges using lineaer interpolation.
  */
-const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {
-  return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);
-};
+// const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {
+//   return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);
+// };
 
 /**
  * Check if two colors have enough contrast to be used together

diff --git a/packages/cli/src/colors/themeUtils.ts b/packages/cli/src/colors/themeUtils.ts
@@ -1,8 +1,9 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
+import { Hsluv } from 'hsluv';
 
 import type { ContrastMode, Mode, ColorInfo, ColorNumber, ThemeInfo } from './types.ts';
-import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex, lightenDarkColor } from './colorUtils';
+import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './colorUtils';
 
 const blueBaseColor = '#0A71C0';
 const greenBaseColor = '#078D19';
@@ -43,12 +44,12 @@ const generateThemeColor = (color: CssColor, mode: Mode, contrastMode: 'aa' | 'a
     colorKeys: ['#ffffff'],
     ratios: [1],
   });
-
+  let colorLightness = getLightnessFromHex(color);
   if (mode === 'dark' || mode === 'contrast') {
-    color = lightenDarkColor(color, mode);
+    color = getBaseColor(color);
+    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
   }
 
-  const colorLightness = getLightnessFromHex(color);
   const multiplier = colorLightness <= 30 ? -8 : 8;
   const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
   const baseHoverContrast = getContrastFromLightness(
@@ -268,7 +269,7 @@ export const canTextBeUsedOnColors = (baseDefaultColor: CssColor, baseActiveColo
  * @param color The base color
  * @param lightness The lightness value from 0 to 100
  */
-const createColorWithLightness = (color: CssColor, lightness: number) => {
+export const createColorWithLightness = (color: CssColor, lightness: number) => {
   const leoBackgroundColor = new BackgroundColor({
     name: 'backgroundColor',
     colorKeys: ['#ffffff'],
@@ -339,3 +340,14 @@ export const getColorNameFromNumber = (number: ColorNumber): string => {
   };
   return colorMap[number];
 };
+
+export const getBaseColor = (color: CssColor) => {
+  const conv = new Hsluv();
+  conv.hex = color;
+  conv.hexToHsluv();
+  // conv.hsluv_l = 100 - conv.hsluv_l;
+  // conv.hsluv_s = getSaturationForDarkMode(color, conv.hsluv_s);
+  conv.hsluvToHex();
+
+  return conv.hex as CssColor;
+};