@skbkontur/colors 2.0.0-alpha.3 → 2.0.0-alpha.5

package/lib/helpers/get-palette.ts

@@ -0,0 +1,261 @@
+import { clampChroma, converter } from 'culori';
+import { calcAPCA } from 'apca-w3';
+
+import type {
+  GeneratorColorAbneyCorrection,
+  GeneratorColorChromaParamsGroup,
+  GeneratorColorPalette,
+  GeneratorColorWarningHuePatch,
+} from '../types/tokens-base-generator.js';
+import * as DefaultSwatch from '../consts/default-swatch.js';
+import { CHROMA_PARAMS } from '../consts/params/chroma-params.js';
+import { ABNEY_CORRECTION } from '../consts/params/abney-correction.js';
+import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
+import { WARNING_HUE_PATCH } from '../consts/params/warning-hue-patch.js';
+
+interface GeneratePaletteParams {
+  color: string;
+  type?: 'default' | 'warning';
+  settings?: {
+    chromaSettings?: GeneratorColorChromaParamsGroup;
+    abneyCorrection?: GeneratorColorAbneyCorrection;
+    promoHueShifts?: { [hueRange: number]: number };
+    warningHuePatch?: GeneratorColorWarningHuePatch;
+  };
+}
+
+export function getPalette({
+  color,
+  type = 'default',
+  settings: customSettings,
+}: GeneratePaletteParams): GeneratorColorPalette {
+  const defaultSettings = {
+    chromaSettings: CHROMA_PARAMS,
+    abneyCorrection: ABNEY_CORRECTION,
+    promoHueShifts: PROMO_HUE_SHIFTS,
+    warningHuePatch: WARNING_HUE_PATCH,
+  };
+
+  const settings = {
+    ...defaultSettings,
+    ...customSettings,
+  };
+
+  const toOklch = converter('oklch');
+  const oklchColor = toOklch(color);
+  const currentHue = oklchColor?.h || 0;
+
+  const toNorm = (x: number) => x / 100;
+
+  const calculateChromaValue = (
+    rel: number,
+    min: number | undefined,
+    max: number | undefined,
+    baseChromaMax: number
+  ) => {
+    const raw = (baseChromaMax * rel) / 100;
+    let value = raw;
+    if (min !== undefined) {
+      value = Math.max(toNorm(min), value);
+    }
+    if (max !== undefined) {
+      value = Math.min(toNorm(max), value);
+    }
+    return Math.min(value, baseChromaMax);
+  };
+
+  const result: GeneratorColorPalette = {
+    vivid: {},
+    normal: {},
+    dim: {},
+  };
+  const isWarning = type === 'warning';
+
+  for (const Lstr in settings.chromaSettings) {
+    const L = +Lstr;
+    if (L === 100) {
+      result.vivid[L] = `oklch(100% 0 0)`;
+      result.normal[L] = `oklch(100% 0 0)`;
+      result.dim[L] = `oklch(100% 0 0)`;
+      continue;
+    }
+
+    const hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
+    const appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
+
+    const chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
+    const currentParams = settings.chromaSettings[L];
+
+    const vividN = calculateChromaValue(
+      currentParams.vivid.rel,
+      currentParams.vivid.min,
+      currentParams.vivid.max,
+      chromaMax
+    );
+    const normN = calculateChromaValue(
+      currentParams.normal.rel,
+      currentParams.normal.min,
+      currentParams.normal.max,
+      chromaMax
+    );
+    const dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
+
+    result.vivid[L] = `oklch(${L}% ${vividN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
+    result.normal[L] = `oklch(${L}% ${normN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
+    result.dim[L] = `oklch(${L}% ${dimN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
+  }
+
+  return result;
+}
+
+export function getAbneyHueShift(
+  lightness: number,
+  currentHue: number,
+  abneyData: GeneratorColorAbneyCorrection
+): number {
+  const lightnessData = abneyData[lightness];
+  if (!lightnessData) {
+    return 0;
+  }
+  const hueRanges = Object.keys(lightnessData)
+    .map(Number)
+    .sort((a, b) => a - b);
+  let selectedHueRange = hueRanges[0];
+  for (let i = 0; i < hueRanges.length; i++) {
+    const startRange = hueRanges[i];
+    const endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
+    if (currentHue >= startRange && currentHue < endRange) {
+      selectedHueRange = startRange;
+      break;
+    }
+    if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
+      selectedHueRange = startRange;
+      break;
+    }
+  }
+  return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
+}
+
+export function applyAbneyShift(
+  lightness: number,
+  currentHue: number,
+  abneyData: GeneratorColorAbneyCorrection
+): number {
+  const abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
+  return (currentHue + abneyShift + 360) % 360;
+}
+
+export function applyWarningHuePatch(
+  currentHue: number,
+  lightness: number,
+  warningHuePatchData: GeneratorColorWarningHuePatch,
+  isWarningMode: boolean
+): number {
+  if (isWarningMode) {
+    const patch = warningHuePatchData[lightness];
+    if (patch !== undefined) {
+      return (currentHue + patch + 360) % 360;
+    }
+  }
+  return currentHue;
+}
+
+function findClosestLightnessStep(targetL: number, availableLightnessSteps: number[]): number {
+  if (availableLightnessSteps.length === 0) {
+    return targetL;
+  }
+  const sortedSteps = [...availableLightnessSteps].sort((a, b) => a - b);
+  let closestStep = sortedSteps[0];
+  let minDiff = Math.abs(targetL - closestStep);
+  for (let i = 1; i < sortedSteps.length; i++) {
+    const currentStep = sortedSteps[i];
+    const diff = Math.abs(targetL - currentStep);
+    if (diff < minDiff || (diff === minDiff && currentStep > closestStep)) {
+      minDiff = diff;
+      closestStep = currentStep;
+    }
+  }
+  return closestStep;
+}
+
+export function calculateBaseHueAndCorrectionRange(
+  inputColorString: string,
+  abneyData: GeneratorColorAbneyCorrection
+): {
+  baseHue: number;
+  correctionLightness: number;
+  correctionHueRange: number;
+} | null {
+  const toOklch = converter('oklch');
+  const oklch = toOklch(inputColorString) as { l: number; c: number; h: number };
+  if (!oklch) {
+    console.warn(`Could not parse color string: ${inputColorString}`);
+    return null;
+  }
+  const targetLightness = Math.round(oklch.l * 100);
+  let targetHue = oklch.h;
+  if (isNaN(targetHue)) {
+    console.warn(`Achromatic color detected (${inputColorString}). Defaulting hue to 0.`);
+    targetHue = 0;
+  }
+  const availableLightnessSteps = Object.keys(abneyData).map(Number);
+  if (availableLightnessSteps.length === 0) {
+    console.warn('Abney correction data is empty, cannot calculate base hue.');
+    return null;
+  }
+  const closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
+  const lightnessCorrectionData = abneyData[closestLightness];
+  if (!lightnessCorrectionData) {
+    console.warn(`No Abney correction data for lightness ${closestLightness}.`);
+    return null;
+  }
+  const correctedHueMap = Object.entries(lightnessCorrectionData).map(([rawHueStr, shift]) => {
+    const rawHue = Number(rawHueStr);
+    return {
+      rawHue,
+      shift,
+      correctedHue: (rawHue + shift + 360) % 360,
+    };
+  });
+  correctedHueMap.sort((a, b) => {
+    if (a.correctedHue !== b.correctedHue) {
+      return a.correctedHue - b.correctedHue;
+    }
+    return a.rawHue - b.rawHue;
+  });
+  if (correctedHueMap.length === 0) {
+    console.warn(`No hue ranges defined for lightness ${closestLightness}.`);
+    return null;
+  }
+  const findCorrectRange = () => {
+    const nextRangeIndex = correctedHueMap.findIndex((range) => range.correctedHue > targetHue);
+    if (nextRangeIndex === 0) {
+      return correctedHueMap[correctedHueMap.length - 1];
+    }
+    if (nextRangeIndex > 0) {
+      return correctedHueMap[nextRangeIndex - 1];
+    }
+    return correctedHueMap[correctedHueMap.length - 1];
+  };
+  const selectedRange = findCorrectRange();
+  if (!selectedRange) {
+    console.error('Could not determine the correct hue range.');
+    return null;
+  }
+  const baseHue = (targetHue - selectedRange.shift + 360) % 360;
+  return {
+    baseHue,
+    correctionLightness: closestLightness,
+    correctionHueRange: selectedRange.rawHue,
+  };
+}
+
+export function calcOnBrand(hex: string) {
+  const whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
+  const blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
+
+  if (whiteContrast + 10 >= blackContrast) {
+    return DefaultSwatch.whiteAlpha;
+  }
+  return DefaultSwatch.blackAlpha;
+}

package/lib/helpers/get-promo.d.ts

@@ -0,0 +1,6 @@
+export declare function getPromo(color: string, hueShifts?: {
+    [hueRange: number]: number;
+}): string;
+export declare function getPromoHueShift(currentHue: number, promoHueShifts: {
+    [hueRange: number]: number;
+}): number;

package/lib/helpers/get-promo.js

@@ -0,0 +1,47 @@
+import { clampChroma, converter, formatHex } from 'culori';
+import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
+export function getPromo(color, hueShifts) {
+    if (hueShifts === void 0) { hueShifts = PROMO_HUE_SHIFTS; }
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(color);
+    if (!oklchColor) {
+        throw new Error("Invalid color string: ".concat(color));
+    }
+    var currentHue = oklchColor.h;
+    var promoHueShift = getPromoHueShift(currentHue, hueShifts);
+    var correctedHue = (currentHue + promoHueShift + 360) % 360;
+    var promoLightness = oklchColor.l * 100;
+    if (promoLightness >= 50) {
+        promoLightness = promoLightness - 32;
+    }
+    promoLightness = Math.min(Math.max(promoLightness, 30), 34);
+    var promoChroma = 0.1;
+    var finalLightness = Math.round(promoLightness) / 100;
+    var finalChroma = Math.round(promoChroma * 100) / 100;
+    var promoOklch = {
+        mode: 'oklch',
+        l: finalLightness,
+        c: finalChroma,
+        h: correctedHue,
+    };
+    return formatHex(clampChroma(promoOklch, 'oklch'));
+}
+export function getPromoHueShift(currentHue, promoHueShifts) {
+    var hueRanges = Object.keys(promoHueShifts)
+        .map(Number)
+        .sort(function (a, b) { return a - b; });
+    var selectedHueRange = hueRanges[0];
+    for (var i = 0; i < hueRanges.length; i++) {
+        var startRange = hueRanges[i];
+        var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
+        if (currentHue >= startRange && currentHue < endRange) {
+            selectedHueRange = startRange;
+            break;
+        }
+        if (i === hueRanges.length - 1 && (currentHue >= startRange || currentHue < hueRanges[0])) {
+            selectedHueRange = startRange;
+            break;
+        }
+    }
+    return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
+}

package/lib/helpers/get-promo.ts

@@ -0,0 +1,55 @@
+import { clampChroma, converter, formatHex, type Oklch } from 'culori';
+
+import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
+
+export function getPromo(color: string, hueShifts = PROMO_HUE_SHIFTS): string {
+  const toOklch = converter('oklch');
+  const oklchColor = toOklch(color) as Oklch;
+  if (!oklchColor) {
+    throw new Error(`Invalid color string: ${color}`);
+  }
+
+  const currentHue = oklchColor.h as number;
+  const promoHueShift = getPromoHueShift(currentHue, hueShifts);
+  const correctedHue = (currentHue + promoHueShift + 360) % 360;
+
+  let promoLightness = oklchColor.l * 100;
+  if (promoLightness >= 50) {
+    promoLightness = promoLightness - 32;
+  }
+  promoLightness = Math.min(Math.max(promoLightness, 30), 34);
+
+  const promoChroma = 0.1;
+
+  const finalLightness = Math.round(promoLightness) / 100;
+  const finalChroma = Math.round(promoChroma * 100) / 100;
+
+  const promoOklch: Oklch = {
+    mode: 'oklch',
+    l: finalLightness,
+    c: finalChroma,
+    h: correctedHue,
+  };
+
+  return formatHex(clampChroma(promoOklch, 'oklch'));
+}
+
+export function getPromoHueShift(currentHue: number, promoHueShifts: { [hueRange: number]: number }): number {
+  const hueRanges = Object.keys(promoHueShifts)
+    .map(Number)
+    .sort((a, b) => a - b);
+  let selectedHueRange = hueRanges[0];
+  for (let i = 0; i < hueRanges.length; i++) {
+    const startRange = hueRanges[i];
+    const endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
+    if (currentHue >= startRange && currentHue < endRange) {
+      selectedHueRange = startRange;
+      break;
+    }
+    if (i === hueRanges.length - 1 && (currentHue >= startRange || currentHue < hueRanges[0])) {
+      selectedHueRange = startRange;
+      break;
+    }
+  }
+  return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
+}

package/lib/types/tokens-base-generator.d.ts

@@ -0,0 +1,43 @@
+export interface GeneratorColorChromaParamsGroup {
+    [key: number]: {
+        vivid: GeneratorColorChromaSettings;
+        normal: GeneratorColorChromaSettings;
+        dim: GeneratorColorChromaSettings;
+    };
+}
+export interface GeneratorColorChromaSettings {
+    rel: number;
+    min?: number;
+    max?: number;
+}
+export interface GeneratorColorPalette {
+    vivid: {
+        [key: number]: string;
+    };
+    normal: {
+        [key: number]: string;
+    };
+    dim: {
+        [key: number]: string;
+    };
+}
+export interface GeneratorColorAbneyCorrection {
+    [lightness: number]: {
+        [hueShiftRange: number]: number;
+    };
+}
+export interface GeneratorColorWarningHuePatch {
+    [lightness: number]: number;
+}
+export interface GeneratorPaletteParams {
+    color: string;
+    type?: 'default' | 'warning' | 'promo';
+    settings?: {
+        chromaSettings?: GeneratorColorChromaParamsGroup;
+        abneyCorrection?: GeneratorColorAbneyCorrection;
+        promoHueShifts?: {
+            [hueRange: number]: number;
+        };
+        warningHuePatch?: GeneratorColorWarningHuePatch;
+    };
+}

package/{dist/esm/types/tokens-base-generator.d.ts → lib/types/tokens-base-generator.ts}

@@ -5,39 +5,34 @@ export interface GeneratorColorChromaParamsGroup {
     dim: GeneratorColorChromaSettings;
   };
 }
+
 export interface GeneratorColorChromaSettings {
   rel: number;
   min?: number;
   max?: number;
 }
+
 export interface GeneratorColorPalette {
-  vivid: {
-    [key: number]: string;
-  };
-  normal: {
-    [key: number]: string;
-  };
-  dim: {
-    [key: number]: string;
-  };
+  vivid: { [key: number]: string };
+  normal: { [key: number]: string };
+  dim: { [key: number]: string };
 }
+
 export interface GeneratorColorAbneyCorrection {
-  [lightness: number]: {
-    [hueShiftRange: number]: number;
-  };
+  [lightness: number]: { [hueShiftRange: number]: number };
 }
+
 export interface GeneratorColorWarningHuePatch {
   [lightness: number]: number;
 }
+
 export interface GeneratorPaletteParams {
   color: string;
   type?: 'default' | 'warning' | 'promo';
   settings?: {
     chromaSettings?: GeneratorColorChromaParamsGroup;
     abneyCorrection?: GeneratorColorAbneyCorrection;
-    promoHueShifts?: {
-      [hueRange: number]: number;
-    };
+    promoHueShifts?: { [hueRange: number]: number };
     warningHuePatch?: GeneratorColorWarningHuePatch;
   };
 }

package/lib/types/tokens-base.d.ts

@@ -0,0 +1,55 @@
+export interface TokensBase {
+    brand: {
+        logo: ThemedValue;
+        original: string;
+        promo: string;
+        interactions: {
+            hover: ThemedValue;
+            pressed: ThemedValue;
+        };
+        palette: ColorPalette;
+    };
+    accent?: {
+        original: ThemedValue;
+        interactions: {
+            hover: ThemedValue;
+            pressed: ThemedValue;
+        };
+        palette?: ColorPalette;
+    };
+    warning: ColorPalette;
+    error: ColorPalette;
+    success: ColorPalette;
+    gray: ColorWithScale<GrayScale>;
+    whiteAlpha: ColorWithScale<AlphaScale>;
+    blackAlpha: ColorWithScale<AlphaScale>;
+    onBrand: ColorWithScale<AlphaScale>;
+    onAccent?: ColorWithScale<AlphaScale>;
+    customizable: {
+        red: ColorPalette;
+        orange: ColorPalette;
+        green: ColorPalette;
+        mint: ColorPalette;
+        blue: ColorPalette;
+        blueDeep: ColorPalette;
+        violet: ColorPalette;
+        purple: ColorPalette;
+        yellow: ColorPalette;
+    };
+}
+export interface ColorPalette {
+    vivid: ColorWithScale<ChromaScale>;
+    normal: ColorWithScale<ChromaScale>;
+    dim: ColorWithScale<ChromaScale>;
+}
+export type ChromaScale = 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96;
+type AlphaScale = 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 100;
+export type GrayScale = 0 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 98 | 100;
+type ColorWithScale<T extends string | number> = {
+    [K in T]: string;
+};
+export interface ThemedValue {
+    light: string;
+    dark: string;
+}
+export {};

package/{dist/esm/types/tokens-base.d.ts → lib/types/tokens-base.ts}

@@ -1,4 +1,4 @@
-export interface BaseTokens {
+export interface TokensBase {
   brand: {
     logo: ThemedValue;
     original: string;
@@ -37,11 +37,13 @@ export interface BaseTokens {
     yellow: ColorPalette;
   };
 }
+
 export interface ColorPalette {
   vivid: ColorWithScale<ChromaScale>;
   normal: ColorWithScale<ChromaScale>;
   dim: ColorWithScale<ChromaScale>;
 }
+
 export type ChromaScale =
   | 20
   | 24
@@ -63,6 +65,7 @@ export type ChromaScale =
   | 88
   | 92
   | 96;
+
 type AlphaScale =
   | 4
   | 6
@@ -90,6 +93,7 @@ type AlphaScale =
   | 92
   | 96
   | 100;
+
 export type GrayScale =
   | 0
   | 16
@@ -115,11 +119,12 @@ export type GrayScale =
   | 96
   | 98
   | 100;
+
 type ColorWithScale<T extends string | number> = {
   [K in T]: string;
 };
+
 export interface ThemedValue {
   light: string;
   dark: string;
 }
-export {};

package/lib/types/tokens.d.ts

@@ -0,0 +1,12 @@
+import type { getColorsDefaultTokens } from '../get-colors-default-tokens.js';
+export interface Themed<T> {
+    light: T;
+    dark: T;
+}
+export interface ColorObject {
+    [key: string]: ColorValue;
+}
+export type ColorValue = string | ColorObject | ColorValue[];
+export type ColorStructure = ColorObject | ColorValue[];
+export type DefaultTokensFull = ReturnType<typeof getColorsDefaultTokens>;
+export type DefaultTokens = DefaultTokensFull['light' | 'dark'];

package/{dist/esm/types/tokens.d.ts → lib/types/tokens.ts}

@@ -1,12 +1,18 @@
 import type { getColorsDefaultTokens } from '../get-colors-default-tokens.js';
+
 export interface Themed<T> {
   light: T;
   dark: T;
 }
+
 export interface ColorObject {
   [key: string]: ColorValue;
 }
+
 export type ColorValue = string | ColorObject | ColorValue[];
+
 export type ColorStructure = ColorObject | ColorValue[];
+
 export type DefaultTokensFull = ReturnType<typeof getColorsDefaultTokens>;
+
 export type DefaultTokens = DefaultTokensFull['light' | 'dark'];