@skbkontur/colors 1.1.2-626ea.0 → 1.1.2-73aed.0

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

@@ -1,14 +1,3 @@
-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';
@@ -37,10 +26,9 @@ export function getBaseTokens(_a) {
     });
     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;
+        customizable[key] = getPalette({
+            color: DEFAULT_SWATCH.customizable[key],
         });
     }
     return {
@@ -64,7 +52,7 @@ export function getBaseTokens(_a) {
                 hover: getHover(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
                 pressed: getPressed(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
             },
-            palette: accentPalette || undefined,
+            palette: accentPalette,
         },
         warning: warningPalette,
         error: errorPalette,
@@ -74,7 +62,7 @@ export function getBaseTokens(_a) {
         blackAlpha: DEFAULT_SWATCH.blackAlpha,
         onBrand: calcOnBrand(brandColor),
         // TODO: настроить для gray
-        onAccent: (accent === 'brand' && calcOnBrand(brandColor)) || undefined,
+        onAccent: (accent === 'brand' && calcOnBrand(brandColor)),
         customizable: customizable,
     };
 }
@@ -84,47 +72,45 @@ export var colorToHex = function (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) {
@@ -132,38 +118,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;
 }

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

@@ -92,6 +92,8 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
         shapeOtherBasePressed: string;
         shapeOtherDisabled: string;
         shapeOtherField: string;
+        shapeOtherFieldHover: string;
+        shapeOtherFieldPressed: string;
         shapeOtherLow: string;
         shapeOtherLowHover: string;
         shapeOtherLowPressed: string;
@@ -250,6 +252,8 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
         illustrationBlack: string;
         illustrationBrand: string;
         illustrationComplement: string;
+        illustrationInvertedNeutral: string;
+        illustrationNeutral: string;
         illustrationOnBrand: string;
         illustrationOnComplement: string;
         illustrationPromo: string;
@@ -403,6 +407,8 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
         shapeOtherBasePressed: string;
         shapeOtherDisabled: string;
         shapeOtherField: string;
+        shapeOtherFieldHover: string;
+        shapeOtherFieldPressed: string;
         shapeOtherLow: string;
         shapeOtherLowHover: string;
         shapeOtherLowPressed: string;
@@ -561,6 +567,8 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
         illustrationBlack: string;
         illustrationBrand: string;
         illustrationComplement: string;
+        illustrationInvertedNeutral: string;
+        illustrationNeutral: string;
         illustrationOnBrand: string;
         illustrationOnComplement: string;
         illustrationPromo: string;

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

@@ -86,13 +86,15 @@ export var getDefaultTokens = function (base) {
             shapeHeavySuccess: base.customizable.green.normal[36],
             shapeHeavyWarning: base.warning.vivid[36],
             shapeOtherAccentBoldDisabled: base.blackAlpha[32],
-            shapeOtherBacklessHover: base.blackAlpha[8],
-            shapeOtherBacklessPressed: base.blackAlpha[12],
+            shapeOtherBacklessHover: base.blackAlpha[6],
+            shapeOtherBacklessPressed: base.blackAlpha[8],
             shapeOtherBase: base.gray[100],
-            shapeOtherBaseHover: base.whiteAlpha[64],
-            shapeOtherBasePressed: base.whiteAlpha[32],
+            shapeOtherBaseHover: base.gray[96],
+            shapeOtherBasePressed: base.gray[92],
             shapeOtherDisabled: base.blackAlpha[6],
             shapeOtherField: base.gray[100],
+            shapeOtherFieldHover: base.gray[96],
+            shapeOtherFieldPressed: base.gray[92],
             shapeOtherLow: base.blackAlpha[6],
             shapeOtherLowHover: base.blackAlpha[8],
             shapeOtherLowPressed: base.blackAlpha[12],
@@ -141,7 +143,7 @@ export var getDefaultTokens = function (base) {
             shapeSoftWarning: base.warning.vivid[88],
             shapeSoftWarningHover: base.warning.normal[84],
             shapeSoftWarningPressed: base.warning.dim[80],
-            shapeInvertedBacklessHover: base.whiteAlpha[8],
+            shapeInvertedBacklessHover: base.whiteAlpha[6],
             shapeInvertedBacklessPressed: base.whiteAlpha[4],
             shapeInvertedDisabled: base.whiteAlpha[6],
             shapeInvertedNeutralFaintAlpha: base.whiteAlpha[6],
@@ -251,6 +253,8 @@ export var getDefaultTokens = function (base) {
             illustrationBlack: base.gray[16],
             illustrationBrand: base.brand.original,
             illustrationComplement: base.brand.promo,
+            illustrationInvertedNeutral: base.gray[100],
+            illustrationNeutral: base.gray[0],
             illustrationOnBrand: base.onBrand[100],
             illustrationOnComplement: base.gray[100],
             illustrationPromo: base.brand.promo,
@@ -397,13 +401,15 @@ export var getDefaultTokens = function (base) {
             shapeHeavySuccess: base.customizable.green.normal[92],
             shapeHeavyWarning: base.warning.vivid[92],
             shapeOtherAccentBoldDisabled: base.whiteAlpha[32],
-            shapeOtherBacklessHover: base.whiteAlpha[8],
+            shapeOtherBacklessHover: base.whiteAlpha[6],
             shapeOtherBacklessPressed: base.whiteAlpha[4],
-            shapeOtherBase: base.whiteAlpha[6],
-            shapeOtherBaseHover: base.whiteAlpha[12],
-            shapeOtherBasePressed: base.whiteAlpha[4],
+            shapeOtherBase: base.gray[32],
+            shapeOtherBaseHover: base.gray[36],
+            shapeOtherBasePressed: base.gray[28],
             shapeOtherDisabled: base.whiteAlpha[6],
             shapeOtherField: base.blackAlpha[12],
+            shapeOtherFieldHover: base.whiteAlpha[4],
+            shapeOtherFieldPressed: base.blackAlpha[24],
             shapeOtherLow: base.blackAlpha[24],
             shapeOtherLowHover: base.blackAlpha[16],
             shapeOtherLowPressed: base.blackAlpha[32],
@@ -452,8 +458,8 @@ export var getDefaultTokens = function (base) {
             shapeSoftWarning: base.warning.dim[52],
             shapeSoftWarningHover: base.warning.dim[56],
             shapeSoftWarningPressed: base.warning.dim[48],
-            shapeInvertedBacklessHover: base.blackAlpha[8],
-            shapeInvertedBacklessPressed: base.blackAlpha[12],
+            shapeInvertedBacklessHover: base.blackAlpha[6],
+            shapeInvertedBacklessPressed: base.blackAlpha[8],
             shapeInvertedDisabled: base.blackAlpha[6],
             shapeInvertedNeutralFaintAlpha: base.blackAlpha[6],
             shapeInvertedNeutralFaintAlphaHover: base.blackAlpha[8],
@@ -562,6 +568,8 @@ export var getDefaultTokens = function (base) {
             illustrationBlack: base.gray[16],
             illustrationBrand: base.brand.original,
             illustrationComplement: base.gray[100],
+            illustrationInvertedNeutral: base.gray[0],
+            illustrationNeutral: base.gray[100],
             illustrationOnBrand: base.onBrand[100],
             illustrationOnComplement: base.brand.promo,
             illustrationPromo: base.brand.promo,

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

@@ -130,75 +130,69 @@ function findClosestLightnessStep(targetL, availableLightnessSteps) {
     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;
+    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 {
-            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,
+    };
 }
 export function calcOnBrand(hex) {
     var whiteContrast = Number(calcAPCA('#fff', hex));

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

@@ -2,35 +2,29 @@ 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'));
+    var toOklch = 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 formatHex(clampChroma(promoOklch, 'oklch'));
 }
 export function getPromoHueShift(currentHue, promoHueShifts) {
     var hueRanges = Object.keys(promoHueShifts)

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

@@ -42,14 +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;
-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> = {
+export type ChromaScale = 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96;
+export 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;
+export type ColorWithScale<T extends string | number> = {
     [K in T]: string;
 };
-interface ThemedValue {
+export interface ThemedValue {
     light: string;
     dark: string;
 }
-export {};

package/dist/esm/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/esm/utils/format-variable.js

@@ -0,0 +1,6 @@
+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(); });
+};