@skbkontur/colors 1.1.2-1903c.0 → 1.1.2-34230.0

package/dist/cjs/helpers/get-interactions.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPressed = exports.getHover = void 0;
+var culori_1 = require("culori");
+var interaction_settings_1 = require("../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), ")");
+}
+function getHover(hex) {
+    var toOklch = (0, culori_1.converter)('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightHoverColor = applyOklchDelta(oklchColor, interaction_settings_1.HOVER_LIGHT_L, interaction_settings_1.HOVER_LIGHT_C);
+    var darkHoverColor = applyOklchDelta(oklchColor, interaction_settings_1.HOVER_DARK_L, interaction_settings_1.HOVER_DARK_C);
+    return {
+        light: lightHoverColor,
+        dark: darkHoverColor,
+    };
+}
+exports.getHover = getHover;
+function getPressed(hex) {
+    var toOklch = (0, culori_1.converter)('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightPressedColor = applyOklchDelta(oklchColor, interaction_settings_1.PRESSED_LIGHT_L, interaction_settings_1.PRESSED_LIGHT_C);
+    var darkPressedColor = applyOklchDelta(oklchColor, interaction_settings_1.PRESSED_DARK_L, interaction_settings_1.PRESSED_DARK_C);
+    return {
+        light: lightPressedColor,
+        dark: darkPressedColor,
+    };
+}
+exports.getPressed = getPressed;

package/dist/cjs/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/cjs/helpers/get-logo.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLogo = void 0;
+var culori_1 = require("culori");
+var logo_lightness_1 = require("../constants/logo-lightness");
+function getLogo(hex) {
+    var toOklch = (0, culori_1.converter)('oklch');
+    var oklchColor = toOklch(hex);
+    var lightThemeLogoColor = hex;
+    if (!oklchColor) {
+        var fallbackColor = "oklch(".concat(logo_lightness_1.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 < logo_lightness_1.MIN_LOGO_LIGHTNESS) {
+        l = logo_lightness_1.MIN_LOGO_LIGHTNESS / 100;
+    }
+    var darkThemeLogoColor = "oklch(".concat(l.toFixed(3), " ").concat(c.toFixed(3), " ").concat(safeH.toFixed(0), ")");
+    return {
+        light: lightThemeLogoColor,
+        dark: darkThemeLogoColor,
+    };
+}
+exports.getLogo = getLogo;

package/dist/cjs/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/cjs/helpers/get-palette.js

@@ -0,0 +1,242 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcOnBrand = exports.calculateBaseHueAndCorrectionRange = exports.applyWarningHuePatch = exports.applyAbneyShift = exports.getAbneyHueShift = exports.getPalette = void 0;
+var culori_1 = require("culori");
+var apca_w3_1 = require("apca-w3");
+var DefaultSwatch = __importStar(require("../constants/default-swatch"));
+var chroma_settings_1 = require("../constants/chroma-settings");
+var abney_correction_1 = require("../constants/abney-correction");
+var promo_hue_shift_1 = require("../constants/promo-hue-shift");
+var warning_hue_patch_1 = require("../constants/warning-hue-patch");
+function getPalette(_a) {
+    var color = _a.color, _b = _a.type, type = _b === void 0 ? 'default' : _b, customSettings = _a.settings;
+    var defaultSettings = {
+        chromaSettings: chroma_settings_1.CHROMA_SETTINGS,
+        abneyCorrection: abney_correction_1.ABNEY_CORRECTION,
+        promoHueShifts: promo_hue_shift_1.PROMO_HUE_SHIFTS,
+        warningHuePatch: warning_hue_patch_1.WARNING_HUE_PATCH,
+    };
+    var settings = __assign(__assign({}, defaultSettings), customSettings);
+    var toOklch = (0, culori_1.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 = (0, culori_1.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;
+}
+exports.getPalette = getPalette;
+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;
+}
+exports.getAbneyHueShift = getAbneyHueShift;
+function applyAbneyShift(lightness, currentHue, abneyData) {
+    var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
+    return (currentHue + abneyShift + 360) % 360;
+}
+exports.applyAbneyShift = applyAbneyShift;
+function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
+    if (isWarningMode) {
+        var patch = warningHuePatchData[lightness];
+        if (patch !== undefined) {
+            return (currentHue + patch + 360) % 360;
+        }
+    }
+    return currentHue;
+}
+exports.applyWarningHuePatch = applyWarningHuePatch;
+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;
+}
+function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
+    try {
+        var toOklch = (0, culori_1.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;
+    }
+}
+exports.calculateBaseHueAndCorrectionRange = calculateBaseHueAndCorrectionRange;
+function calcOnBrand(hex) {
+    var whiteContrast = Number((0, apca_w3_1.calcAPCA)('#fff', hex));
+    var blackContrast = Number((0, apca_w3_1.calcAPCA)('#000', hex));
+    if (whiteContrast - 10 <= blackContrast) {
+        return DefaultSwatch.whiteAlpha;
+    }
+    return DefaultSwatch.blackAlpha;
+}
+exports.calcOnBrand = calcOnBrand;

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPromoHueShift = exports.getPromo = void 0;
+var culori_1 = require("culori");
+var promo_hue_shift_1 = require("../constants/promo-hue-shift");
+function getPromo(color, hueShifts) {
+    if (hueShifts === void 0) { hueShifts = promo_hue_shift_1.PROMO_HUE_SHIFTS; }
+    try {
+        var toOklch = (0, culori_1.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 (0, culori_1.formatHex)((0, culori_1.clampChroma)(promoOklch, 'oklch'));
+    }
+    catch (error) {
+        console.error('Error generating promo palette:', error);
+        return '';
+    }
+}
+exports.getPromo = getPromo;
+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;
+}
+exports.getPromoHueShift = getPromoHueShift;

package/dist/cjs/types/base-tokens.d.ts

@@ -0,0 +1,55 @@
+export interface BaseTokens {
+    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>;
+}
+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;
+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;
+};
+interface ThemedValue {
+    light: string;
+    dark: string;
+}
+export {};

package/dist/cjs/types/base-tokens.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/types/generator-tokens.d.ts

@@ -0,0 +1,43 @@
+export interface GeneratorColorChromaSettingsGroup {
+    [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?: GeneratorColorChromaSettingsGroup;
+        abneyCorrection?: GeneratorColorAbneyCorrection;
+        promoHueShifts?: {
+            [hueRange: number]: number;
+        };
+        warningHuePatch?: GeneratorColorWarningHuePatch;
+    };
+}

package/dist/cjs/types/generator-tokens.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/constants/abney-correction.d.ts

@@ -0,0 +1,2 @@
+import type { GeneratorColorAbneyCorrection } from '../types/generator-tokens';
+export declare const ABNEY_CORRECTION: GeneratorColorAbneyCorrection;