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

package/lib/get-colors.d.ts

@@ -0,0 +1,39 @@
+import { type ConfigOptions, type PresetOrCustom } from './get-colors-base.js';
+import type { TokensBase } from './types/tokens-base.js';
+import { type ColorFormat } from './utils/convert-color.js';
+import type { DefaultTokens, DefaultTokensFull, Themed } from './types/tokens.js';
+import type * as DEFAULT_SWATCH from './consts/default-swatch.js';
+export interface SemanticConfigOptions<T> extends ConfigOptions {
+    /** Брендовый цвет из палитры или кастомная строка */
+    brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+    /**
+     * Акцентный цвет.
+     * `brand` — совпадает с брендовым, `gray` — в оттенках серого
+     */
+    accent: PresetOrCustom<'brand' | 'gray'>;
+    /**
+     * Возвращать токены для конкретной темы или для всех сразу
+     */
+    theme: 'light' | 'dark';
+    /** Объект с образцами цветов warning, error, success */
+    system?: typeof DEFAULT_SWATCH.system;
+    /**
+     * Формат выгрузки токенов
+     * @default 'hex/rgba'
+     */
+    format?: ColorFormat;
+    /**
+     * Колбэк для формирования кастомного списка семантических токенов
+     * @param base Ссылки на базовые токены
+     * @param defaults Токены по умолчанию
+     * @param params Параметры переданные в getColors
+     */
+    overrides?: (base?: TokensBase, defaults?: DefaultTokensFull, params?: SemanticConfigOptions<T>) => Themed<T>;
+}
+/**
+ * Получение списка семантических токенов
+ *
+ * @param {SemanticConfigOptions<T>} params - Конфигурация генерации
+ * @returns {DefaultTokensFull | Themed<T>} Список токенов для light, dark или вместе
+ */
+export declare function getColors<T>(params: SemanticConfigOptions<T>): DefaultTokens;

package/lib/get-colors.js

@@ -0,0 +1,24 @@
+import { getColorsDefaultTokens } from './get-colors-default-tokens.js';
+import { getColorsBase } from './get-colors-base.js';
+import { convertColorFormat } from './utils/convert-color.js';
+/**
+ * Получение списка семантических токенов
+ *
+ * @param {SemanticConfigOptions<T>} params - Конфигурация генерации
+ * @returns {DefaultTokensFull | Themed<T>} Список токенов для light, dark или вместе
+ */
+export function getColors(params) {
+    var base = getColorsBase(params);
+    var defaults = getColorsDefaultTokens(base);
+    var result;
+    if (params.overrides) {
+        result = params.overrides(base, defaults, params);
+    }
+    else {
+        result = defaults;
+    }
+    if (params.format) {
+        result = convertColorFormat(result, params.format);
+    }
+    return result[params.theme];
+}

package/lib/get-colors.ts

@@ -0,0 +1,59 @@
+import { getColorsDefaultTokens } from './get-colors-default-tokens.js';
+import { type ConfigOptions, type PresetOrCustom, getColorsBase } from './get-colors-base.js';
+import type { TokensBase } from './types/tokens-base.js';
+import { convertColorFormat, type ColorFormat } from './utils/convert-color.js';
+import type { DefaultTokens, DefaultTokensFull, Themed } from './types/tokens.js';
+import type * as DEFAULT_SWATCH from './consts/default-swatch.js';
+
+export interface SemanticConfigOptions<T> extends ConfigOptions {
+  /** Брендовый цвет из палитры или кастомная строка */
+  brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+  /**
+   * Акцентный цвет.
+   * `brand` — совпадает с брендовым, `gray` — в оттенках серого
+   */
+  accent: PresetOrCustom<'brand' | 'gray'>;
+  /**
+   * Возвращать токены для конкретной темы или для всех сразу
+   */
+  theme: 'light' | 'dark';
+  /** Объект с образцами цветов warning, error, success */
+  system?: typeof DEFAULT_SWATCH.system;
+  /**
+   * Формат выгрузки токенов
+   * @default 'hex/rgba'
+   */
+  format?: ColorFormat;
+  /**
+   * Колбэк для формирования кастомного списка семантических токенов
+   * @param base Ссылки на базовые токены
+   * @param defaults Токены по умолчанию
+   * @param params Параметры переданные в getColors
+   */
+  overrides?: (base?: TokensBase, defaults?: DefaultTokensFull, params?: SemanticConfigOptions<T>) => Themed<T>;
+}
+
+/**
+ * Получение списка семантических токенов
+ *
+ * @param {SemanticConfigOptions<T>} params - Конфигурация генерации
+ * @returns {DefaultTokensFull | Themed<T>} Список токенов для light, dark или вместе
+ */
+export function getColors<T>(params: SemanticConfigOptions<T>): DefaultTokens {
+  const base = getColorsBase(params);
+  const defaults = getColorsDefaultTokens(base);
+
+  let result: any;
+
+  if (params.overrides) {
+    result = params.overrides(base, defaults, params);
+  } else {
+    result = defaults;
+  }
+
+  if (params.format) {
+    result = convertColorFormat(result, params.format);
+  }
+
+  return result[params.theme];
+}

package/{dist/esm → lib}/helpers/get-interactions.d.ts

@@ -1,6 +1,6 @@
 interface InteractionColors {
-  light: string;
-  dark: string;
+    light: string;
+    dark: string;
 }
 export declare function getHover(hex: string): InteractionColors;
 export declare function getPressed(hex: string): InteractionColors;

package/lib/helpers/get-interactions.js

@@ -0,0 +1,35 @@
+import { converter } from 'culori';
+import { HOVER_LIGHT_L, HOVER_LIGHT_C, HOVER_DARK_L, HOVER_DARK_C, PRESSED_LIGHT_L, PRESSED_LIGHT_C, PRESSED_DARK_L, PRESSED_DARK_C, } from '../consts/params/interactions.js';
+function applyOklchDelta(oklchColor, dL, dC) {
+    var _a = oklchColor.l, l = _a === void 0 ? 0 : _a, _b = oklchColor.c, c = _b === void 0 ? 0 : _b, _c = oklchColor.h, h = _c === void 0 ? 0 : _c;
+    var safeH = h === undefined || isNaN(h) ? 0 : h;
+    var newL = Math.max(0, Math.min(1, l + dL / 100));
+    var newC = Math.max(0, c + dC);
+    return "oklch(".concat(newL.toFixed(3), " ").concat(newC.toFixed(3), " ").concat(safeH.toFixed(0), ")");
+}
+export function getHover(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightHoverColor = applyOklchDelta(oklchColor, HOVER_LIGHT_L, HOVER_LIGHT_C);
+    var darkHoverColor = applyOklchDelta(oklchColor, HOVER_DARK_L, HOVER_DARK_C);
+    return {
+        light: lightHoverColor,
+        dark: darkHoverColor,
+    };
+}
+export function getPressed(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightPressedColor = applyOklchDelta(oklchColor, PRESSED_LIGHT_L, PRESSED_LIGHT_C);
+    var darkPressedColor = applyOklchDelta(oklchColor, PRESSED_DARK_L, PRESSED_DARK_C);
+    return {
+        light: lightPressedColor,
+        dark: darkPressedColor,
+    };
+}

package/lib/helpers/get-interactions.ts

@@ -0,0 +1,64 @@
+import { converter, type Oklch } from 'culori';
+
+import {
+  HOVER_LIGHT_L,
+  HOVER_LIGHT_C,
+  HOVER_DARK_L,
+  HOVER_DARK_C,
+  PRESSED_LIGHT_L,
+  PRESSED_LIGHT_C,
+  PRESSED_DARK_L,
+  PRESSED_DARK_C,
+} from '../consts/params/interactions.js';
+
+interface InteractionColors {
+  light: string;
+  dark: string;
+}
+
+function applyOklchDelta(oklchColor: Oklch, dL: number, dC: number): string {
+  const { l = 0, c = 0, h = 0 } = oklchColor;
+
+  const safeH = h === undefined || isNaN(h) ? 0 : h;
+
+  const newL = Math.max(0, Math.min(1, l + dL / 100));
+  const newC = Math.max(0, c + dC);
+
+  return `oklch(${newL.toFixed(3)} ${newC.toFixed(3)} ${safeH.toFixed(0)})`;
+}
+
+export function getHover(hex: string): InteractionColors {
+  const toOklch = converter('oklch');
+  const oklchColor = toOklch(hex);
+
+  if (!oklchColor) {
+    return { light: hex, dark: hex };
+  }
+
+  const lightHoverColor = applyOklchDelta(oklchColor, HOVER_LIGHT_L, HOVER_LIGHT_C);
+
+  const darkHoverColor = applyOklchDelta(oklchColor, HOVER_DARK_L, HOVER_DARK_C);
+
+  return {
+    light: lightHoverColor,
+    dark: darkHoverColor,
+  };
+}
+
+export function getPressed(hex: string): InteractionColors {
+  const toOklch = converter('oklch');
+  const oklchColor = toOklch(hex);
+
+  if (!oklchColor) {
+    return { light: hex, dark: hex };
+  }
+
+  const lightPressedColor = applyOklchDelta(oklchColor, PRESSED_LIGHT_L, PRESSED_LIGHT_C);
+
+  const darkPressedColor = applyOklchDelta(oklchColor, PRESSED_DARK_L, PRESSED_DARK_C);
+
+  return {
+    light: lightPressedColor,
+    dark: darkPressedColor,
+  };
+}

package/{dist/esm → lib}/helpers/get-logo.d.ts

@@ -1,6 +1,6 @@
 interface LogoColors {
-  light: string;
-  dark: string;
+    light: string;
+    dark: string;
 }
 export declare function getLogo(hex: string): LogoColors;
 export {};

package/lib/helpers/get-logo.js

@@ -0,0 +1,25 @@
+import { converter } from 'culori';
+import { LOGO_LIGHTNESS_MIN } from '../consts/params/logo-lightness.js';
+export function getLogo(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    var lightThemeLogoColor = hex;
+    if (!oklchColor) {
+        var fallbackColor = "oklch(".concat(LOGO_LIGHTNESS_MIN, "% 0 0)");
+        return { light: hex, dark: fallbackColor };
+    }
+    var _a = oklchColor.l, l = _a === void 0 ? 0 : _a, _b = oklchColor.c, c = _b === void 0 ? 0 : _b;
+    var h = oklchColor.h;
+    var safeH = h === undefined || isNaN(h) ? 0 : h;
+    l = l || 0;
+    c = c || 0;
+    var percentL = l * 100;
+    if (percentL < LOGO_LIGHTNESS_MIN) {
+        l = LOGO_LIGHTNESS_MIN / 100;
+    }
+    var darkThemeLogoColor = "oklch(".concat(l.toFixed(3), " ").concat(c.toFixed(3), " ").concat(safeH.toFixed(0), ")");
+    return {
+        light: lightThemeLogoColor,
+        dark: darkThemeLogoColor,
+    };
+}

package/lib/helpers/get-logo.ts

@@ -0,0 +1,40 @@
+import { converter, type Oklch } from 'culori';
+
+import { LOGO_LIGHTNESS_MIN } from '../consts/params/logo-lightness.js';
+
+interface LogoColors {
+  light: string;
+  dark: string;
+}
+
+export function getLogo(hex: string): LogoColors {
+  const toOklch = converter('oklch');
+  const oklchColor = toOklch(hex) as Oklch | undefined;
+
+  const lightThemeLogoColor = hex;
+
+  if (!oklchColor) {
+    const fallbackColor = `oklch(${LOGO_LIGHTNESS_MIN}% 0 0)`;
+    return { light: hex, dark: fallbackColor };
+  }
+
+  let { l = 0, c = 0 } = oklchColor;
+  const { h } = oklchColor;
+
+  const safeH = h === undefined || isNaN(h) ? 0 : h;
+
+  l = l || 0;
+  c = c || 0;
+
+  const percentL = l * 100;
+  if (percentL < LOGO_LIGHTNESS_MIN) {
+    l = LOGO_LIGHTNESS_MIN / 100;
+  }
+
+  const darkThemeLogoColor = `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${safeH.toFixed(0)})`;
+
+  return {
+    light: lightThemeLogoColor,
+    dark: darkThemeLogoColor,
+  };
+}

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

@@ -0,0 +1,51 @@
+import type { GeneratorColorAbneyCorrection, GeneratorColorChromaParamsGroup, GeneratorColorPalette, GeneratorColorWarningHuePatch } from '../types/tokens-base-generator.js';
+interface GeneratePaletteParams {
+    color: string;
+    type?: 'default' | 'warning';
+    settings?: {
+        chromaSettings?: GeneratorColorChromaParamsGroup;
+        abneyCorrection?: GeneratorColorAbneyCorrection;
+        promoHueShifts?: {
+            [hueRange: number]: number;
+        };
+        warningHuePatch?: GeneratorColorWarningHuePatch;
+    };
+}
+export declare function getPalette({ color, type, settings: customSettings, }: GeneratePaletteParams): GeneratorColorPalette;
+export declare function getAbneyHueShift(lightness: number, currentHue: number, abneyData: GeneratorColorAbneyCorrection): number;
+export declare function applyAbneyShift(lightness: number, currentHue: number, abneyData: GeneratorColorAbneyCorrection): number;
+export declare function applyWarningHuePatch(currentHue: number, lightness: number, warningHuePatchData: GeneratorColorWarningHuePatch, isWarningMode: boolean): number;
+export declare function calculateBaseHueAndCorrectionRange(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): {
+    baseHue: number;
+    correctionLightness: number;
+    correctionHueRange: number;
+} | null;
+export declare function calcOnBrand(hex: string): {
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    68: string;
+    72: string;
+    76: string;
+    80: string;
+    84: string;
+    88: string;
+    92: string;
+    96: string;
+    100: string;
+};
+export {};

package/lib/helpers/get-palette.js

@@ -0,0 +1,204 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { clampChroma, converter } from 'culori';
+import { calcAPCA } from 'apca-w3';
+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';
+export function getPalette(_a) {
+    var color = _a.color, _b = _a.type, type = _b === void 0 ? 'default' : _b, customSettings = _a.settings;
+    var defaultSettings = {
+        chromaSettings: CHROMA_PARAMS,
+        abneyCorrection: ABNEY_CORRECTION,
+        promoHueShifts: PROMO_HUE_SHIFTS,
+        warningHuePatch: WARNING_HUE_PATCH,
+    };
+    var settings = __assign(__assign({}, defaultSettings), customSettings);
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(color);
+    var currentHue = (oklchColor === null || oklchColor === void 0 ? void 0 : oklchColor.h) || 0;
+    var toNorm = function (x) { return x / 100; };
+    var calculateChromaValue = function (rel, min, max, baseChromaMax) {
+        var raw = (baseChromaMax * rel) / 100;
+        var 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);
+    };
+    var result = {
+        vivid: {},
+        normal: {},
+        dim: {},
+    };
+    var isWarning = type === 'warning';
+    for (var Lstr in settings.chromaSettings) {
+        var 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;
+        }
+        var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
+        var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
+        var chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
+        var currentParams = settings.chromaSettings[L];
+        var vividN = calculateChromaValue(currentParams.vivid.rel, currentParams.vivid.min, currentParams.vivid.max, chromaMax);
+        var normN = calculateChromaValue(currentParams.normal.rel, currentParams.normal.min, currentParams.normal.max, chromaMax);
+        var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
+        result.vivid[L] = "oklch(".concat(L, "% ").concat(vividN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
+        result.normal[L] = "oklch(".concat(L, "% ").concat(normN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
+        result.dim[L] = "oklch(".concat(L, "% ").concat(dimN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
+    }
+    return result;
+}
+export function getAbneyHueShift(lightness, currentHue, abneyData) {
+    var lightnessData = abneyData[lightness];
+    if (!lightnessData) {
+        return 0;
+    }
+    var hueRanges = Object.keys(lightnessData)
+        .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 < 360) {
+            selectedHueRange = startRange;
+            break;
+        }
+    }
+    return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
+}
+export function applyAbneyShift(lightness, currentHue, abneyData) {
+    var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
+    return (currentHue + abneyShift + 360) % 360;
+}
+export function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
+    if (isWarningMode) {
+        var patch = warningHuePatchData[lightness];
+        if (patch !== undefined) {
+            return (currentHue + patch + 360) % 360;
+        }
+    }
+    return currentHue;
+}
+function findClosestLightnessStep(targetL, availableLightnessSteps) {
+    if (availableLightnessSteps.length === 0) {
+        return targetL;
+    }
+    var sortedSteps = __spreadArray([], availableLightnessSteps, true).sort(function (a, b) { return a - b; });
+    var closestStep = sortedSteps[0];
+    var minDiff = Math.abs(targetL - closestStep);
+    for (var i = 1; i < sortedSteps.length; i++) {
+        var currentStep = sortedSteps[i];
+        var diff = Math.abs(targetL - currentStep);
+        if (diff < minDiff || (diff === minDiff && currentStep > closestStep)) {
+            minDiff = diff;
+            closestStep = currentStep;
+        }
+    }
+    return closestStep;
+}
+export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
+    var toOklch = converter('oklch');
+    var oklch = toOklch(inputColorString);
+    if (!oklch) {
+        console.warn("Could not parse color string: ".concat(inputColorString));
+        return null;
+    }
+    var targetLightness = Math.round(oklch.l * 100);
+    var targetHue = oklch.h;
+    if (isNaN(targetHue)) {
+        console.warn("Achromatic color detected (".concat(inputColorString, "). Defaulting hue to 0."));
+        targetHue = 0;
+    }
+    var availableLightnessSteps = Object.keys(abneyData).map(Number);
+    if (availableLightnessSteps.length === 0) {
+        console.warn('Abney correction data is empty, cannot calculate base hue.');
+        return null;
+    }
+    var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
+    var lightnessCorrectionData = abneyData[closestLightness];
+    if (!lightnessCorrectionData) {
+        console.warn("No Abney correction data for lightness ".concat(closestLightness, "."));
+        return null;
+    }
+    var correctedHueMap = Object.entries(lightnessCorrectionData).map(function (_a) {
+        var rawHueStr = _a[0], shift = _a[1];
+        var rawHue = Number(rawHueStr);
+        return {
+            rawHue: rawHue,
+            shift: shift,
+            correctedHue: (rawHue + shift + 360) % 360,
+        };
+    });
+    correctedHueMap.sort(function (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 ".concat(closestLightness, "."));
+        return null;
+    }
+    var findCorrectRange = function () {
+        var nextRangeIndex = correctedHueMap.findIndex(function (range) { return range.correctedHue > targetHue; });
+        if (nextRangeIndex === 0) {
+            return correctedHueMap[correctedHueMap.length - 1];
+        }
+        if (nextRangeIndex > 0) {
+            return correctedHueMap[nextRangeIndex - 1];
+        }
+        return correctedHueMap[correctedHueMap.length - 1];
+    };
+    var selectedRange = findCorrectRange();
+    if (!selectedRange) {
+        console.error('Could not determine the correct hue range.');
+        return null;
+    }
+    var baseHue = (targetHue - selectedRange.shift + 360) % 360;
+    return {
+        baseHue: baseHue,
+        correctionLightness: closestLightness,
+        correctionHueRange: selectedRange.rawHue,
+    };
+}
+export function calcOnBrand(hex) {
+    var whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
+    var blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
+    if (whiteContrast + 10 >= blackContrast) {
+        return DefaultSwatch.whiteAlpha;
+    }
+    return DefaultSwatch.blackAlpha;
+}