add palette filter for color weight

Author: haschek

src/common/utils/colorHash.ts

@@ -6,16 +6,14 @@ import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
 type ColorOrFalse = Color | false;
+type ColorWeight = 100 | 300 | 500 | 700 | 900;
+type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
 interface getEnabledColorsProps {
-    /** Include "identity colors" from palette. */
-    includeIdentityColors?: boolean;
-    /** Include "semantic colors" (used for info, success, warning, danger) from palette. */
-    includeSemanticColors?: boolean;
-    /** Include "layout colors" from palette. */
-    includeLayoutColors?: boolean;
-    /** Include "extra colors" (e.g. gold, silver, bronze) from palette. */
-    includeExtraColors?: boolean;
+    /** Specify the palette groups used to define the set of colors. */
+    includePaletteGroup?: PaletteGroup[];
+    /** Use only some weights of a color tint. */
+    includeColorWeight?: ColorWeight[];
     /** Only keep colors in the stack with a minimal color distance to all other colors. */
     minimalColorDistance?: number;
     /** Extend color stack by values generated by mixing tints of the same weight, e.g. `yellow100` with `purple100`. */
@@ -25,19 +23,14 @@ interface getEnabledColorsProps {
 const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
 
 export function getEnabledColorsFromPalette({
-    includeIdentityColors = false,
-    includeSemanticColors = false,
-    includeLayoutColors = true,
-    includeExtraColors = false,
+    includePaletteGroup = ["layout"],
+    includeColorWeight = [100, 300, 500, 700, 900],
     // TODO (planned for later): includeMixedColors = false,
     minimalColorDistance = COLORMINDISTANCE,
 }: getEnabledColorsProps): Color[] {
     const configId = JSON.stringify({
-        includeIdentityColors,
-        includeSemanticColors,
-        includeLayoutColors,
-        includeExtraColors,
-        minimalColorDistance,
+        includePaletteGroup,
+        includeColorWeight,
     });
 
     if (getEnabledColorsFromPaletteCache.has(configId)) {
@@ -47,12 +40,15 @@ export function getEnabledColorsFromPalette({
     const colorsFromPalette = new CssCustomProperties({
         selectorText: `:root`,
         filterName: (name: string) => {
-            return (
-                (includeIdentityColors && name.includes(`--${eccgui}-color-palette-identity-`)) ||
-                (includeSemanticColors && name.includes(`--${eccgui}-color-palette-semantic-`)) ||
-                (includeLayoutColors && name.includes(`--${eccgui}-color-palette-layout-`)) ||
-                (includeExtraColors && name.includes(`--${eccgui}-color-palette-extra-`))
-            );
+            if (!name.includes(`--${eccgui}-color-palette-`)) {
+                // only allow custom properties created for the palette
+                return false;
+            }
+            // test for correct group and weight of the palette color
+            const tint = name.substring(`--${eccgui}-color-palette-`.length).split("-");
+            const group = tint[0] as PaletteGroup;
+            const weight = parseInt(tint[2], 10) as ColorWeight;
+            return includePaletteGroup.includes(group) && includeColorWeight.includes(weight);
         },
         removeDashPrefix: false,
         returnObject: true,