@skbkontur/colors 1.1.2-1903c.0 → 1.1.2-626ea.0

package/dist/esm/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 '../constants/interaction-settings';
+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/dist/esm/helpers/get-logo.d.ts

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

package/dist/esm/helpers/get-logo.js

@@ -0,0 +1,25 @@
+import { converter } from 'culori';
+import { MIN_LOGO_LIGHTNESS } from '../constants/logo-lightness';
+export function getLogo(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    var lightThemeLogoColor = hex;
+    if (!oklchColor) {
+        var fallbackColor = "oklch(".concat(MIN_LOGO_LIGHTNESS, "% 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 < MIN_LOGO_LIGHTNESS) {
+        l = MIN_LOGO_LIGHTNESS / 100;
+    }
+    var darkThemeLogoColor = "oklch(".concat(l.toFixed(3), " ").concat(c.toFixed(3), " ").concat(safeH.toFixed(0), ")");
+    return {
+        light: lightThemeLogoColor,
+        dark: darkThemeLogoColor,
+    };
+}

package/dist/esm/helpers/get-palette.d.ts

@@ -0,0 +1,51 @@
+import type { GeneratorColorAbneyCorrection, GeneratorColorChromaSettingsGroup, GeneratorColorPalette, GeneratorColorWarningHuePatch } from '../types/generator-tokens';
+interface GeneratePaletteParams {
+    color: string;
+    type?: 'default' | 'warning';
+    settings?: {
+        chromaSettings?: GeneratorColorChromaSettingsGroup;
+        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/dist/esm/helpers/get-palette.js

@@ -0,0 +1,210 @@
+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 '../constants/default-swatch';
+import { CHROMA_SETTINGS } from '../constants/chroma-settings';
+import { ABNEY_CORRECTION } from '../constants/abney-correction';
+import { PROMO_HUE_SHIFTS } from '../constants/promo-hue-shift';
+import { WARNING_HUE_PATCH } from '../constants/warning-hue-patch';
+export function getPalette(_a) {
+    var color = _a.color, _b = _a.type, type = _b === void 0 ? 'default' : _b, customSettings = _a.settings;
+    var defaultSettings = {
+        chromaSettings: CHROMA_SETTINGS,
+        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) {
+    try {
+        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_1 = oklch.h;
+        if (isNaN(targetHue_1)) {
+            console.warn("Achromatic color detected (".concat(inputColorString, "). Defaulting hue to 0."));
+            targetHue_1 = 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_1 = 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_1.sort(function (a, b) {
+            if (a.correctedHue !== b.correctedHue) {
+                return a.correctedHue - b.correctedHue;
+            }
+            return a.rawHue - b.rawHue;
+        });
+        if (correctedHueMap_1.length === 0) {
+            console.warn("No hue ranges defined for lightness ".concat(closestLightness, "."));
+            return null;
+        }
+        var findCorrectRange = function () {
+            var nextRangeIndex = correctedHueMap_1.findIndex(function (range) { return range.correctedHue > targetHue_1; });
+            if (nextRangeIndex === 0) {
+                return correctedHueMap_1[correctedHueMap_1.length - 1];
+            }
+            if (nextRangeIndex > 0) {
+                return correctedHueMap_1[nextRangeIndex - 1];
+            }
+            return correctedHueMap_1[correctedHueMap_1.length - 1];
+        };
+        var selectedRange = findCorrectRange();
+        if (!selectedRange) {
+            console.error('Could not determine the correct hue range.');
+            return null;
+        }
+        var baseHue = (targetHue_1 - selectedRange.shift + 360) % 360;
+        return {
+            baseHue: baseHue,
+            correctionLightness: closestLightness,
+            correctionHueRange: selectedRange.rawHue,
+        };
+    }
+    catch (error) {
+        console.error('Error calculating base hue:', error);
+        return null;
+    }
+}
+export function calcOnBrand(hex) {
+    var whiteContrast = Number(calcAPCA('#fff', hex));
+    var blackContrast = Number(calcAPCA('#000', hex));
+    if (whiteContrast - 10 <= blackContrast) {
+        return DefaultSwatch.whiteAlpha;
+    }
+    return DefaultSwatch.blackAlpha;
+}

package/dist/esm/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/dist/esm/helpers/get-promo.js

@@ -0,0 +1,53 @@
+import { clampChroma, converter, formatHex } from 'culori';
+import { PROMO_HUE_SHIFTS } from '../constants/promo-hue-shift';
+export function getPromo(color, hueShifts) {
+    if (hueShifts === void 0) { hueShifts = PROMO_HUE_SHIFTS; }
+    try {
+        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'));
+    }
+    catch (error) {
+        console.error('Error generating promo palette:', error);
+        return '';
+    }
+}
+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;
+}