@aakaar/dictionary 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -24,10 +24,65 @@ type CategoryDesignTokens = {
     category: string;
     tokens: DesignToken[];
 };
+type PrimaryPalette = {
+    primary0: DesignToken;
+    primary10: DesignToken;
+    primary20: DesignToken;
+    primary30: DesignToken;
+    primary40: DesignToken;
+    primary50: DesignToken;
+    primary60: DesignToken;
+    primary70: DesignToken;
+    primary80: DesignToken;
+    primary90: DesignToken;
+    primary95: DesignToken;
+    primary100: DesignToken;
+};
+type AakaarColorScheme = {
+    primary: DesignToken;
+    onPrimary: DesignToken;
+    primaryContainer: DesignToken;
+    onPrimaryContainer: DesignToken;
+    secondary: DesignToken;
+    onSecondary: DesignToken;
+    secondaryContainer: DesignToken;
+    onSecondaryContainer: DesignToken;
+    tertiary: DesignToken;
+    onTertiary: DesignToken;
+    tertiaryContainer: DesignToken;
+    onTertiaryContainer: DesignToken;
+    error: DesignToken;
+    onError: DesignToken;
+    errorContainer: DesignToken;
+    onErrorContainer: DesignToken;
+    background: DesignToken;
+    onBackground: DesignToken;
+    surface: DesignToken;
+    onSurface: DesignToken;
+    surfaceVariant: DesignToken;
+    onSurfaceVariant: DesignToken;
+    outline: DesignToken;
+    outlineVariant: DesignToken;
+    shadow: DesignToken;
+    scrim: DesignToken;
+    inverseSurface: DesignToken;
+    inverseOnSurface: DesignToken;
+    inversePrimary: DesignToken;
+};
+type BlackAndWhiteScheme = {
+    white: DesignToken;
+    black: DesignToken;
+};
+type ColorStrategyOutput = {
+    primaryPalette: PrimaryPalette;
+    lightDark: AakaarColorScheme;
+    blackAndWhite: BlackAndWhiteScheme;
+};
+type ColorStrategy = "material" | "harmony";
 
 declare const transformTokenToCssObject: (token: DesignToken) => CssObject;
 declare const transformTokenToCSSVariable: (colorToken: DesignToken) => string;
-declare const buildCategoryDesignTokens: (color: string) => CategoryDesignTokens[];
-declare const runCss: (color: string) => string;
+declare const buildCategoryDesignTokens: (color: string, strategy?: ColorStrategy) => CategoryDesignTokens[];
+declare const runCss: (color: string, strategy?: ColorStrategy) => string;
 
-export { type CategoryDesignTokens, type CssObject, type DesignToken, Size, VariableCase, buildCategoryDesignTokens, runCss, transformTokenToCSSVariable, transformTokenToCssObject };
+export { type AakaarColorScheme, type BlackAndWhiteScheme, type CategoryDesignTokens, type ColorStrategy, type ColorStrategyOutput, type CssObject, type DesignToken, type PrimaryPalette, Size, VariableCase, buildCategoryDesignTokens, runCss, transformTokenToCSSVariable, transformTokenToCssObject };

package/dist/index.js

@@ -38,45 +38,6 @@ var transformCase = (text, target) => {
   }
 };
 
-// src/lib/css/colors.ts
-import {
-  argbFromHex,
-  hexFromArgb,
-  themeFromSourceColor
-} from "@material/material-color-utilities";
-import Color from "colorjs.io";
-var theme = (color) => themeFromSourceColor(argbFromHex(color));
-var transformHexToOkLch = (color) => {
-  const oklchColor = new Color(color).to("oklch");
-  return oklchColor.toString({ precision: 2 });
-};
-var transformColorToToken = (name, color) => {
-  return {
-    name: `color-${name}`,
-    value: transformHexToOkLch(hexFromArgb(color))
-  };
-};
-var lightTokens = (theme2) => Object.entries(theme2.schemes.light.toJSON()).map(
-  ([colorName, colorValue]) => transformColorToToken(colorName, colorValue)
-);
-var darkTokens = (theme2) => Object.entries(theme2.schemes.dark.toJSON()).map(
-  ([colorName, colorValue]) => transformColorToToken(colorName, colorValue)
-);
-var lightDarkTokens = (theme2) => {
-  const light = lightTokens(theme2);
-  const dark = darkTokens(theme2);
-  return light.map((lightToken, index) => ({
-    name: lightToken.name,
-    value: `light-dark(${lightToken.value}, ${dark[index].value})`
-  }));
-};
-var primaryPaletteTokens = (theme2) => {
-  const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
-  return tones.map(
-    (tone) => transformColorToToken(`primary${tone}`, theme2.palettes.primary.tone(tone))
-  );
-};
-
 // src/lib/css/shadow.ts
 var transformShadowToToken = (name, size, value) => {
   return {
@@ -205,6 +166,494 @@ var radiusTokens = [
   }
 ];
 
+// src/lib/css/strategy/harmony/harmony-colors.ts
+import Color from "colorjs.io";
+var theme = (color) => {
+  const sourceColor = new Color(color);
+  return sourceColor;
+};
+var transformHexToOkLch = (color) => {
+  if (color.startsWith("light-dark(")) {
+    return color;
+  }
+  const oklchColor = new Color(color).to("oklch");
+  return oklchColor.toString({ precision: 3 });
+};
+var transformColorToToken = (name, color) => {
+  return {
+    name: `color-${name}`,
+    value: transformHexToOkLch(color)
+  };
+};
+var generateHarmoniousHue = (baseHue, harmonyType, index = 0) => {
+  switch (harmonyType) {
+    case "analogous":
+      return (baseHue + index * 30 + 360) % 360;
+    case "complementary":
+      return (baseHue + 180) % 360;
+    case "triadic":
+      return (baseHue + index * 120) % 360;
+    case "split-complementary":
+      return index === 0 ? (baseHue + 150) % 360 : (baseHue + 210) % 360;
+    default:
+      return baseHue;
+  }
+};
+var optimizeLightnessForContrast = (lightness, chroma, isLight) => {
+  if (isLight) {
+    return Math.max(0.25, Math.min(0.65, lightness - chroma * 0.3));
+  }
+  return Math.max(0.35, Math.min(0.8, lightness + chroma * 0.4));
+};
+var generateOptimalChroma = (baseChroma, purpose) => {
+  const chromaMap = {
+    primary: Math.max(0.15, Math.min(0.37, baseChroma)),
+    secondary: Math.max(0.12, Math.min(0.32, baseChroma * 0.85)),
+    tertiary: Math.max(0.1, Math.min(0.28, baseChroma * 0.75)),
+    neutral: Math.max(5e-3, Math.min(0.04, baseChroma * 0.2))
+  };
+  return chromaMap[purpose];
+};
+var harmonyLightDarkTokens = (sourceColor) => {
+  const baseColor = sourceColor;
+  const baseOklch = baseColor.to("oklch");
+  const baseHue = Number.isNaN(baseOklch.h) ? 240 : baseOklch.h;
+  const baseChroma = Math.max(baseOklch.c, 0.1);
+  const baseLightness = baseOklch.l;
+  const primaryChroma = generateOptimalChroma(baseChroma, "primary");
+  const primaryLightLightness = optimizeLightnessForContrast(
+    baseLightness,
+    primaryChroma,
+    true
+  );
+  const primaryDarkLightness = optimizeLightnessForContrast(
+    baseLightness,
+    primaryChroma,
+    false
+  );
+  let lightPrimary = new Color("oklch", [
+    primaryLightLightness,
+    primaryChroma,
+    baseHue
+  ]);
+  let darkPrimary = new Color("oklch", [
+    primaryDarkLightness,
+    primaryChroma,
+    baseHue
+  ]);
+  if (lightPrimary.to("oklch").l > 0.8 || lightPrimary.to("oklch").c < 0.08) {
+    lightPrimary = new Color("oklch", [0.5, 0.2, 240]);
+    darkPrimary = new Color("oklch", [0.7, 0.2, 240]);
+  }
+  const secondaryHue = generateHarmoniousHue(baseHue, "analogous", 1);
+  const secondaryChroma = generateOptimalChroma(baseChroma, "secondary");
+  const lightSecondary = new Color("oklch", [
+    optimizeLightnessForContrast(baseLightness, secondaryChroma, true),
+    secondaryChroma,
+    secondaryHue
+  ]);
+  const darkSecondary = new Color("oklch", [
+    optimizeLightnessForContrast(baseLightness, secondaryChroma, false),
+    secondaryChroma,
+    secondaryHue
+  ]);
+  const tertiaryHue = generateHarmoniousHue(baseHue, "analogous", -1);
+  const tertiaryChroma = generateOptimalChroma(baseChroma, "tertiary");
+  const lightTertiary = new Color("oklch", [
+    optimizeLightnessForContrast(baseLightness, tertiaryChroma, true),
+    tertiaryChroma,
+    tertiaryHue
+  ]);
+  const darkTertiary = new Color("oklch", [
+    optimizeLightnessForContrast(baseLightness, tertiaryChroma, false),
+    tertiaryChroma,
+    tertiaryHue
+  ]);
+  const errorChroma = Math.max(0.18, Math.min(0.35, baseChroma));
+  const lightError = new Color("oklch", [0.55, errorChroma, 25]);
+  const darkError = new Color("oklch", [0.75, errorChroma, 25]);
+  const neutralChroma = generateOptimalChroma(baseChroma, "neutral");
+  const lightBackground = new Color("oklch", [
+    0.99,
+    neutralChroma * 0.5,
+    baseHue
+  ]);
+  const darkBackground = new Color("oklch", [
+    0.08,
+    neutralChroma * 1.5,
+    baseHue
+  ]);
+  const lightSurface = new Color("oklch", [0.98, neutralChroma * 0.8, baseHue]);
+  const darkSurface = new Color("oklch", [0.11, neutralChroma * 1.2, baseHue]);
+  const lightPrimaryContainer = new Color("oklch", [
+    0.95,
+    primaryChroma * 0.3,
+    baseHue
+  ]);
+  const darkPrimaryContainer = new Color("oklch", [
+    0.2,
+    primaryChroma * 0.8,
+    baseHue
+  ]);
+  const lightSecondaryContainer = new Color("oklch", [
+    0.94,
+    secondaryChroma * 0.25,
+    secondaryHue
+  ]);
+  const darkSecondaryContainer = new Color("oklch", [
+    0.18,
+    secondaryChroma * 0.75,
+    secondaryHue
+  ]);
+  const lightTertiaryContainer = new Color("oklch", [
+    0.93,
+    tertiaryChroma * 0.2,
+    tertiaryHue
+  ]);
+  const darkTertiaryContainer = new Color("oklch", [
+    0.16,
+    tertiaryChroma * 0.7,
+    tertiaryHue
+  ]);
+  const lightErrorContainer = new Color("oklch", [
+    0.96,
+    errorChroma * 0.15,
+    25
+  ]);
+  const darkErrorContainer = new Color("oklch", [0.22, errorChroma * 0.6, 25]);
+  const lightSurfaceVariant = new Color("oklch", [
+    0.96,
+    neutralChroma * 1.2,
+    baseHue
+  ]);
+  const darkSurfaceVariant = new Color("oklch", [
+    0.18,
+    neutralChroma * 2,
+    baseHue
+  ]);
+  const lightOutline = new Color("oklch", [0.72, neutralChroma * 3, baseHue]);
+  const darkOutline = new Color("oklch", [0.68, neutralChroma * 3, baseHue]);
+  const lightOutlineVariant = new Color("oklch", [
+    0.88,
+    neutralChroma * 2,
+    baseHue
+  ]);
+  const darkOutlineVariant = new Color("oklch", [
+    0.35,
+    neutralChroma * 2,
+    baseHue
+  ]);
+  const lightInverseSurface = new Color("oklch", [
+    0.15,
+    neutralChroma * 1.5,
+    baseHue
+  ]);
+  const darkInverseSurface = new Color("oklch", [
+    0.92,
+    neutralChroma * 0.8,
+    baseHue
+  ]);
+  const lightInversePrimary = new Color("oklch", [
+    0.85,
+    primaryChroma * 0.6,
+    baseHue
+  ]);
+  const darkInversePrimary = new Color("oklch", [
+    0.45,
+    primaryChroma * 0.9,
+    baseHue
+  ]);
+  const generateContrastingOnColor = (lightBg, darkBg) => {
+    const lightBgL = lightBg.to("oklch").l;
+    const darkBgL = darkBg.to("oklch").l;
+    const lightForeground = lightBgL > 0.6 ? "#000000" : "#ffffff";
+    const darkForeground = darkBgL > 0.6 ? "#000000" : "#ffffff";
+    return `light-dark(${lightForeground}, ${darkForeground})`;
+  };
+  return {
+    // Primary colors - the main brand color with enhanced contrast
+    primary: transformColorToToken(
+      "primary",
+      `light-dark(${lightPrimary.toString({ format: "hex" })}, ${darkPrimary.toString({ format: "hex" })})`
+    ),
+    onPrimary: transformColorToToken(
+      "onPrimary",
+      generateContrastingOnColor(lightPrimary, darkPrimary)
+    ),
+    primaryContainer: transformColorToToken(
+      "primaryContainer",
+      `light-dark(${lightPrimaryContainer.toString({ format: "hex" })}, ${darkPrimaryContainer.toString({ format: "hex" })})`
+    ),
+    onPrimaryContainer: transformColorToToken(
+      "onPrimaryContainer",
+      generateContrastingOnColor(lightPrimaryContainer, darkPrimaryContainer)
+    ),
+    // Secondary colors - harmonious supporting accent
+    secondary: transformColorToToken(
+      "secondary",
+      `light-dark(${lightSecondary.toString({ format: "hex" })}, ${darkSecondary.toString({ format: "hex" })})`
+    ),
+    onSecondary: transformColorToToken(
+      "onSecondary",
+      generateContrastingOnColor(lightSecondary, darkSecondary)
+    ),
+    secondaryContainer: transformColorToToken(
+      "secondaryContainer",
+      `light-dark(${lightSecondaryContainer.toString({ format: "hex" })}, ${darkSecondaryContainer.toString({ format: "hex" })})`
+    ),
+    onSecondaryContainer: transformColorToToken(
+      "onSecondaryContainer",
+      generateContrastingOnColor(
+        lightSecondaryContainer,
+        darkSecondaryContainer
+      )
+    ),
+    // Tertiary colors - split-complementary accent
+    tertiary: transformColorToToken(
+      "tertiary",
+      `light-dark(${lightTertiary.toString({ format: "hex" })}, ${darkTertiary.toString({ format: "hex" })})`
+    ),
+    onTertiary: transformColorToToken(
+      "onTertiary",
+      generateContrastingOnColor(lightTertiary, darkTertiary)
+    ),
+    tertiaryContainer: transformColorToToken(
+      "tertiaryContainer",
+      `light-dark(${lightTertiaryContainer.toString({ format: "hex" })}, ${darkTertiaryContainer.toString({ format: "hex" })})`
+    ),
+    onTertiaryContainer: transformColorToToken(
+      "onTertiaryContainer",
+      generateContrastingOnColor(lightTertiaryContainer, darkTertiaryContainer)
+    ),
+    // Error colors - accessibility optimized
+    error: transformColorToToken(
+      "error",
+      `light-dark(${lightError.toString({ format: "hex" })}, ${darkError.toString({ format: "hex" })})`
+    ),
+    onError: transformColorToToken(
+      "onError",
+      generateContrastingOnColor(lightError, darkError)
+    ),
+    errorContainer: transformColorToToken(
+      "errorContainer",
+      `light-dark(${lightErrorContainer.toString({ format: "hex" })}, ${darkErrorContainer.toString({ format: "hex" })})`
+    ),
+    onErrorContainer: transformColorToToken(
+      "onErrorContainer",
+      generateContrastingOnColor(lightErrorContainer, darkErrorContainer)
+    ),
+    // Background and surface colors with subtle tinting
+    background: transformColorToToken(
+      "background",
+      `light-dark(${lightBackground.toString({ format: "hex" })}, ${darkBackground.toString({ format: "hex" })})`
+    ),
+    onBackground: transformColorToToken(
+      "onBackground",
+      generateContrastingOnColor(lightBackground, darkBackground)
+    ),
+    surface: transformColorToToken(
+      "surface",
+      `light-dark(${lightSurface.toString({ format: "hex" })}, ${darkSurface.toString({ format: "hex" })})`
+    ),
+    onSurface: transformColorToToken(
+      "onSurface",
+      generateContrastingOnColor(lightSurface, darkSurface)
+    ),
+    surfaceVariant: transformColorToToken(
+      "surfaceVariant",
+      `light-dark(${lightSurfaceVariant.toString({ format: "hex" })}, ${darkSurfaceVariant.toString({ format: "hex" })})`
+    ),
+    onSurfaceVariant: transformColorToToken(
+      "onSurfaceVariant",
+      generateContrastingOnColor(lightSurfaceVariant, darkSurfaceVariant)
+    ),
+    // Outline colors with enhanced visibility
+    outline: transformColorToToken(
+      "outline",
+      `light-dark(${lightOutline.toString({ format: "hex" })}, ${darkOutline.toString({ format: "hex" })})`
+    ),
+    outlineVariant: transformColorToToken(
+      "outlineVariant",
+      `light-dark(${lightOutlineVariant.toString({ format: "hex" })}, ${darkOutlineVariant.toString({ format: "hex" })})`
+    ),
+    // Shadow and scrim - optimized for depth perception
+    shadow: transformColorToToken(
+      "shadow",
+      "light-dark(oklch(0 0 0 / 0.2), oklch(0 0 0 / 0.4))"
+    ),
+    scrim: transformColorToToken(
+      "scrim",
+      "light-dark(oklch(0 0 0 / 0.4), oklch(0 0 0 / 0.6))"
+    ),
+    // Inverse colors with proper contrast
+    inverseSurface: transformColorToToken(
+      "inverseSurface",
+      `light-dark(${lightInverseSurface.toString({ format: "hex" })}, ${darkInverseSurface.toString({ format: "hex" })})`
+    ),
+    inverseOnSurface: transformColorToToken(
+      "inverseOnSurface",
+      generateContrastingOnColor(lightInverseSurface, darkInverseSurface)
+    ),
+    inversePrimary: transformColorToToken(
+      "inversePrimary",
+      `light-dark(${lightInversePrimary.toString({ format: "hex" })}, ${darkInversePrimary.toString({ format: "hex" })})`
+    )
+  };
+};
+var harmonyPrimaryPaletteTokens = (sourceColor) => {
+  const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
+  const sourceOklch = sourceColor.to("oklch");
+  const baseHue = Number.isNaN(sourceOklch.h) ? 240 : sourceOklch.h;
+  const baseChroma = Math.max(sourceOklch.c, 0.1);
+  const generateToneColor = (tone) => {
+    let lightness;
+    let chroma;
+    if (tone === 0) {
+      lightness = 0;
+      chroma = 0;
+    } else if (tone === 100) {
+      lightness = 1;
+      chroma = 0;
+    } else {
+      lightness = (tone / 100) ** 0.8;
+      const chromaMultiplier = tone < 20 || tone > 90 ? 0.3 + 0.7 * Math.sin(tone / 100 * Math.PI) : 0.8 + 0.2 * Math.sin(tone / 100 * Math.PI);
+      chroma = baseChroma * chromaMultiplier;
+    }
+    const color = new Color("oklch", [lightness, chroma, baseHue]);
+    return color.toString({ format: "hex" });
+  };
+  return Object.fromEntries(
+    tones.map((tone) => [
+      `primary${tone}`,
+      transformColorToToken(`primary${tone}`, generateToneColor(tone))
+    ])
+  );
+};
+var harmonyBlackAndWhiteTokens = (sourceColor) => {
+  let baseHue = 0;
+  if (sourceColor) {
+    const sourceOklch = sourceColor.to("oklch");
+    baseHue = Number.isNaN(sourceOklch.h) ? 0 : sourceOklch.h;
+  }
+  const enhancedWhite = new Color("oklch", [0.99, 2e-3, baseHue]);
+  const enhancedBlack = new Color("oklch", [0.05, 5e-3, baseHue]);
+  return {
+    white: {
+      name: "white",
+      value: transformHexToOkLch(
+        `light-dark(${enhancedWhite.toString({ format: "hex" })}, ${enhancedWhite.toString({ format: "hex" })})`
+      )
+    },
+    black: {
+      name: "black",
+      value: transformHexToOkLch(
+        `light-dark(${enhancedBlack.toString({ format: "hex" })}, ${enhancedBlack.toString({ format: "hex" })})`
+      )
+    }
+  };
+};
+
+// src/lib/css/strategy/harmony/index.ts
+var harmonyColorStrategy = (color) => {
+  const sourceColor = theme(color);
+  return {
+    primaryPalette: harmonyPrimaryPaletteTokens(sourceColor),
+    lightDark: harmonyLightDarkTokens(sourceColor),
+    blackAndWhite: harmonyBlackAndWhiteTokens(sourceColor)
+  };
+};
+
+// src/lib/css/strategy/material/material-colors.ts
+import {
+  argbFromHex,
+  hexFromArgb,
+  themeFromSourceColor
+} from "@material/material-color-utilities";
+import Color2 from "colorjs.io";
+var theme2 = (color) => themeFromSourceColor(argbFromHex(color));
+var transformHexToOkLch2 = (color) => {
+  const oklchColor = new Color2(color).to("oklch");
+  return oklchColor.toString({ precision: 2 });
+};
+var transformColorToToken2 = (name, color) => {
+  return {
+    name: `color-${name}`,
+    value: transformHexToOkLch2(hexFromArgb(color))
+  };
+};
+var lightDarkTokens = (theme3) => {
+  const light = Object.fromEntries(
+    Object.entries(theme3.schemes.light.toJSON()).map(([key, value]) => [
+      key,
+      transformHexToOkLch2(hexFromArgb(value))
+    ])
+  );
+  const dark = Object.fromEntries(
+    Object.entries(theme3.schemes.dark.toJSON()).map(([key, value]) => [
+      key,
+      transformHexToOkLch2(hexFromArgb(value))
+    ])
+  );
+  return Object.entries(light).reduce((acc, [colorName, lightToken]) => {
+    const darkToken = dark[colorName];
+    if (darkToken) {
+      acc[colorName] = {
+        name: `color-${colorName}`,
+        value: `light-dark(${lightToken}, ${darkToken})`
+      };
+    }
+    return acc;
+  }, {});
+};
+var primaryPaletteTokens = (theme3) => {
+  const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
+  return Object.fromEntries(
+    tones.map((tone) => [
+      `primary${tone}`,
+      transformColorToToken2(
+        `primary${tone}`,
+        theme3.palettes.primary.tone(tone)
+      )
+    ])
+  );
+};
+var blackAndWhiteTokens = () => {
+  return {
+    white: {
+      name: "white",
+      value: "#fff"
+    },
+    black: {
+      name: "black",
+      value: "#000"
+    }
+  };
+};
+
+// src/lib/css/strategy/material/index.ts
+var materialColorStrategy = (color) => {
+  const generatedTheme = theme2(color);
+  return {
+    primaryPalette: primaryPaletteTokens(generatedTheme),
+    lightDark: lightDarkTokens(generatedTheme),
+    blackAndWhite: blackAndWhiteTokens()
+  };
+};
+
+// src/lib/css/strategy/index.ts
+var colorStrategy = (strategy, color) => {
+  switch (strategy) {
+    case "material": {
+      return materialColorStrategy(color);
+    }
+    case "harmony": {
+      return harmonyColorStrategy(color);
+    }
+    default:
+      throw new Error(`Unknown color strategy: ${strategy}`);
+  }
+};
+
 // src/lib/css/index.ts
 var transformTokenToCssObject = (token) => {
   const name = `--${transformCase(token.name, "KEBAB" /* KEBAB */)}`;
@@ -225,18 +674,8 @@ var buildForCategory = (category, tokens) => {
   }
   return output;
 };
-var blackAndWhiteTokens = [
-  {
-    name: "white",
-    value: "#fff"
-  },
-  {
-    name: "black",
-    value: "#000"
-  }
-];
-var buildCategoryDesignTokens = (color) => {
-  const generatedTheme = theme(color);
+var buildCategoryDesignTokens = (color, strategy = "harmony") => {
+  const strategyResult = colorStrategy(strategy, color);
   return [
     {
       category: "Reset Colors",
@@ -249,11 +688,13 @@ var buildCategoryDesignTokens = (color) => {
     },
     {
       category: "Primary Colors",
-      tokens: primaryPaletteTokens(generatedTheme).concat(blackAndWhiteTokens)
+      tokens: Object.values(strategyResult.primaryPalette).concat(
+        Object.values(strategyResult.blackAndWhite)
+      )
     },
     {
-      category: "Pallete Colors",
-      tokens: lightDarkTokens(generatedTheme)
+      category: "Palette Colors",
+      tokens: Object.values(strategyResult.lightDark)
     },
     {
       category: "Scale",
@@ -298,9 +739,10 @@ var buildCategoryDesignTokens = (color) => {
     }
   ];
 };
-var runCss = (color) => {
-  const categoryTokens = buildCategoryDesignTokens(color);
+var runCss = (color, strategy = "harmony") => {
+  const categoryTokens = buildCategoryDesignTokens(color, strategy);
   const output = [];
+  output.push(`/* Aakaar Design Tokens: Source: ${color} */`);
   output.push("@theme {");
   for (const category of categoryTokens) {
     output.push(...buildForCategory(category.category, category.tokens));