@skbkontur/colors 1.1.2-b2742.0 → 1.1.2-bdb5e.0

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

@@ -160,81 +160,75 @@ function findClosestLightnessStep(targetL, availableLightnessSteps) {
     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;
+    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 = 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 {
-            baseHue: baseHue,
-            correctionLightness: closestLightness,
-            correctionHueRange: selectedRange.rawHue,
+            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;
     }
-    catch (error) {
-        console.error('Error calculating base hue:', error);
+    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,
+    };
 }
 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) {
+    if (whiteContrast - 10 <= blackContrast) {
         return DefaultSwatch.whiteAlpha;
     }
     return DefaultSwatch.blackAlpha;

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

@@ -5,35 +5,29 @@ 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'));
+    var toOklch = (0, culori_1.converter)('oklch');
+    var oklchColor = toOklch(color);
+    if (!oklchColor) {
+        throw new Error("Invalid color string: ".concat(color));
     }
-    catch (error) {
-        console.error('Error generating promo palette:', error);
-        return '';
+    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'));
 }
 exports.getPromo = getPromo;
 function getPromoHueShift(currentHue, promoHueShifts) {

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

@@ -9,7 +9,7 @@ export interface BaseTokens {
         };
         palette: ColorPalette;
     };
-    accent: {
+    accent?: {
         original: ThemedValue;
         interactions: {
             hover: ThemedValue;
@@ -24,6 +24,7 @@ export interface BaseTokens {
     whiteAlpha: ColorWithScale<AlphaScale>;
     blackAlpha: ColorWithScale<AlphaScale>;
     onBrand: ColorWithScale<AlphaScale>;
+    onAccent?: ColorWithScale<AlphaScale>;
     customizable: {
         red: ColorPalette;
         orange: ColorPalette;
@@ -41,13 +42,13 @@ export interface ColorPalette {
     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;
+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;
-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;
+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;
 };
-interface ThemedValue {
+export interface ThemedValue {
     light: string;
     dark: string;
 }

package/dist/cjs/utils/format-variable.d.ts

@@ -0,0 +1,2 @@
+export declare const camelCaseToKebabCase: (str: string) => string;
+export declare const kebabCaseToCamelCase: (str: string) => string;

package/dist/cjs/utils/format-variable.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kebabCaseToCamelCase = exports.camelCaseToKebabCase = void 0;
+var camelCaseToKebabCase = function (str) {
+    return str.replace(/[A-Z]/g, function (match) { return "-".concat(match.toLowerCase()); });
+};
+exports.camelCaseToKebabCase = camelCaseToKebabCase;
+var kebabCaseToCamelCase = function (str) {
+    return str.replace(/-(\w)/g, function (_, c) { return c.toUpperCase(); });
+};
+exports.kebabCaseToCamelCase = kebabCaseToCamelCase;

package/dist/esm/get-base-tokens.d.ts

@@ -1,17 +1,19 @@
 import * as DEFAULT_SWATCH from './constants/default-swatch';
 import type { BaseTokens } from './types/base-tokens';
 type PresetOrCustom<T extends string> = T | (string & Record<never, never>);
+declare const ACCENT_PARAMS: string[];
+export interface ColorObject {
+    [key: string]: ColorValue;
+}
+export type ColorValue = string | ColorObject | ColorValue[];
+type ColorStructure = ColorObject | ColorValue[];
 export interface ConfigOptions {
     brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
-    accent: PresetOrCustom<'brand' | 'gray'>;
+    accent: PresetOrCustom<(typeof ACCENT_PARAMS)[number]>;
     system?: typeof DEFAULT_SWATCH.system;
 }
 export declare function getBaseTokens({ brand, accent, system }: ConfigOptions): BaseTokens;
-export declare const colorToHex: (color: string) => string;
-export declare const camelCaseToKebabCase: (str: string) => string;
-export declare const kebabCaseToCamelCase: (str: string) => string;
-export declare function convertOklchToHex(obj: any): any;
+export declare function convertOklchToHex(obj: ColorStructure): ColorStructure;
 export declare const convertOklchToRgba: (oklchString: string) => string;
-export declare function convertAlphaOklchToRgba(obj: any): any;
-export declare function flattenObject(obj: any, prefix?: string): any;
+export declare function convertAlphaOklchToRgba(obj: ColorStructure): ColorStructure;
 export {};

package/dist/esm/get-base-tokens.js

@@ -1,47 +1,36 @@
-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);
-};
 import { converter, formatHex } from 'culori';
 import { calcOnBrand, getPalette } from './helpers/get-palette';
 import { getPromo } from './helpers/get-promo';
 import * as DEFAULT_SWATCH from './constants/default-swatch';
 import { getLogo } from './helpers/get-logo';
 import { getHover, getPressed } from './helpers/get-interactions';
+var ACCENT_PARAMS = ['brand', 'gray'];
 export function getBaseTokens(_a) {
     var brand = _a.brand, _b = _a.accent, accent = _b === void 0 ? 'gray' : _b, _c = _a.system, system = _c === void 0 ? DEFAULT_SWATCH.system : _c;
-    var brandColor = colorToHex(brand);
-    var brandPalette = getPalette({ color: brandColor });
-    var accentPalette;
-    switch (accent) {
-        case 'brand':
-            accentPalette = brandPalette;
-            break;
-        case 'gray':
-        default:
-            accentPalette = undefined;
+    var brandColor;
+    if (brand in DEFAULT_SWATCH) {
+        brandColor = DEFAULT_SWATCH.brand[brand];
+    }
+    else {
+        brandColor = brand;
     }
-    var warningPalette = getPalette({
-        color: system.warning,
-    });
-    var errorPalette = getPalette({ color: system.error });
-    var successPalette = getPalette({
-        color: system.success,
-    });
+    var accentColor;
+    if (accent === 'brand') {
+        accentColor = brandColor;
+    }
+    else if (accent !== 'gray') {
+        accentColor = accent;
+    }
+    var brandPalette = getPalette({ color: brandColor });
+    var accentPalette = accent === 'brand' ? brandPalette : undefined;
     var customizable = {};
     for (var colorKey in DEFAULT_SWATCH.customizable) {
-        // @ts-expect-error
-        customizable[colorKey] = getPalette({
-            // @ts-expect-error
-            color: DEFAULT_SWATCH.customizable[colorKey],
-        });
+        var key = colorKey;
+        if (key && brand && brand in DEFAULT_SWATCH) {
+            customizable[key] = getPalette({
+                color: DEFAULT_SWATCH.customizable[key],
+            });
+        }
     }
     return {
         brand: {
@@ -54,75 +43,69 @@ export function getBaseTokens(_a) {
             },
             palette: brandPalette,
         },
-        accent: {
-            original: {
-                light: accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36],
-                dark: accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[96],
-            },
-            interactions: {
-                // TODO обработать hover/pressed для gray
-                hover: getHover(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
-                pressed: getPressed(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
-            },
-            palette: accentPalette || undefined,
-        },
-        warning: warningPalette,
-        error: errorPalette,
-        success: successPalette,
+        accent: accentColor
+            ? {
+                original: {
+                    light: accentColor,
+                    dark: accentColor,
+                },
+                interactions: {
+                    hover: getHover(accentColor),
+                    pressed: getPressed(accentColor),
+                },
+                palette: accentPalette,
+            }
+            : undefined,
+        warning: getPalette({ color: system.warning }),
+        error: getPalette({ color: system.error }),
+        success: getPalette({ color: system.success }),
         gray: DEFAULT_SWATCH.gray,
         whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
         blackAlpha: DEFAULT_SWATCH.blackAlpha,
         onBrand: calcOnBrand(brandColor),
+        onAccent: accentColor ? calcOnBrand(accentColor) : undefined,
         customizable: customizable,
     };
 }
-export var colorToHex = function (color) {
-    if (DEFAULT_SWATCH.brand[color]) {
-        return DEFAULT_SWATCH.brand[color];
-    }
-    return color;
-};
-export var camelCaseToKebabCase = function (str) {
-    return str.replace(/[A-Z]/g, function (match) { return "-".concat(match.toLowerCase()); });
-};
-export var kebabCaseToCamelCase = function (str) {
-    return str.replace(/-(\w)/g, function (_, c) { return c.toUpperCase(); });
-};
 export function convertOklchToHex(obj) {
     if (typeof obj !== 'object' || obj === null) {
         return obj;
     }
     if (Array.isArray(obj)) {
-        return obj.map(function (item) { return convertOklchToHex(item); });
+        return obj.map(function (item) {
+            if (typeof item === 'object' && item !== null) {
+                return convertOklchToHex(item);
+            }
+            return item;
+        });
     }
     var newObj = {};
     for (var key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
             var value = obj[key];
             if (typeof value === 'string' && value.startsWith('oklch(') && !value.includes('/')) {
-                try {
-                    var toHex = converter('oklch');
-                    value = formatHex(toHex(value));
-                }
-                catch (e) {
-                    console.error("Failed to convert OKLCH to hex: ".concat(value), e);
-                }
+                var oklchColor = converter('oklch')(value);
+                var rgbColor = converter('rgb')(oklchColor);
+                value = formatHex(rgbColor);
+            }
+            if (typeof value === 'object' && value !== null) {
+                newObj[key] = convertOklchToHex(value);
+            }
+            else {
+                newObj[key] = value;
             }
-            newObj[key] = convertOklchToHex(value);
         }
     }
     return newObj;
 }
 export var convertOklchToRgba = function (oklchString) {
+    var _a;
     var oklch = converter('oklch')(oklchString);
     var rgb = converter('rgb')(oklch);
-    if (!rgb) {
-        throw new Error("Invalid color format: ".concat(oklchString));
-    }
     var r = Math.round(rgb.r * 255);
     var g = Math.round(rgb.g * 255);
     var b = Math.round(rgb.b * 255);
-    var alpha = oklch.alpha;
+    var alpha = (_a = oklch.alpha) !== null && _a !== void 0 ? _a : 1;
     return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 };
 export function convertAlphaOklchToRgba(obj) {
@@ -130,38 +113,27 @@ export function convertAlphaOklchToRgba(obj) {
         return obj;
     }
     if (Array.isArray(obj)) {
-        return obj.map(function (item) { return convertAlphaOklchToRgba(item); });
+        return obj.map(function (item) {
+            if (typeof item === 'object' && item !== null) {
+                return convertAlphaOklchToRgba(item);
+            }
+            return item;
+        });
     }
     var newObj = {};
     for (var key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
             var value = obj[key];
             if (typeof value === 'string' && value.includes('oklch(')) {
-                try {
-                    value = convertOklchToRgba(value);
-                }
-                catch (e) {
-                    console.error("Failed to convert OKLCH with alpha to rgba: ".concat(value), e);
-                }
+                value = convertOklchToRgba(value);
             }
-            newObj[key] = convertAlphaOklchToRgba(value);
-        }
-    }
-    return newObj;
-}
-export function flattenObject(obj, prefix) {
-    if (prefix === void 0) { prefix = ''; }
-    var result = {};
-    for (var key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            var newKey = prefix ? "".concat(prefix, "-").concat(camelCaseToKebabCase(key)) : key;
-            if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
-                result = __assign(__assign({}, result), flattenObject(obj[key], newKey));
+            if (typeof value === 'object' && value !== null) {
+                newObj[key] = convertAlphaOklchToRgba(value);
             }
             else {
-                result[newKey] = obj[key];
+                newObj[key] = value;
             }
         }
     }
-    return result;
+    return newObj;
 }