@skbkontur/colors 1.1.2-19a67.0 → 1.1.2-626ea.0

package/dist/esm/constants/chroma-settings.d.ts

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

package/dist/esm/constants/chroma-settings.js

@@ -0,0 +1,102 @@
+export var CHROMA_SETTINGS = {
+    20: {
+        vivid: { rel: 100, max: 12 },
+        normal: { rel: 66, min: 4.4, max: 8 },
+        dim: { rel: 46, min: 2, max: 4.4 },
+    },
+    24: {
+        vivid: { rel: 100, max: 14.2 },
+        normal: { rel: 68, min: 5.7, max: 10 },
+        dim: { rel: 48, min: 2.8, max: 5.7 },
+    },
+    28: {
+        vivid: { rel: 100, max: 15.8 },
+        normal: { rel: 70, min: 7, max: 11.8 },
+        dim: { rel: 50, min: 3.6, max: 7 },
+    },
+    32: {
+        vivid: { rel: 100, max: 17.1 },
+        normal: { rel: 72, min: 8.2, max: 13.2 },
+        dim: { rel: 52, min: 4.4, max: 8.2 },
+    },
+    36: {
+        vivid: { rel: 100, max: 18 },
+        normal: { rel: 74, min: 9.4, max: 14.4 },
+        dim: { rel: 54, min: 5.2, max: 9.4 },
+    },
+    40: {
+        vivid: { rel: 100, max: 18.8 },
+        normal: { rel: 76, min: 10.6, max: 15.6 },
+        dim: { rel: 56, min: 6, max: 10.6 },
+    },
+    44: {
+        vivid: { rel: 100, max: 19.6 },
+        normal: { rel: 78, min: 11.7, max: 16.6 },
+        dim: { rel: 58, min: 6.8, max: 11.7 },
+    },
+    48: {
+        vivid: { rel: 100, max: 20.3 },
+        normal: { rel: 80, min: 12.8, max: 17.5 },
+        dim: { rel: 60, min: 7.6, max: 12.8 },
+    },
+    52: {
+        vivid: { rel: 100, max: 21 },
+        normal: { rel: 82, min: 13.9, max: 18.4 },
+        dim: { rel: 62, min: 8.4, max: 13.9 },
+    },
+    56: {
+        vivid: { rel: 100, max: 21.6 },
+        normal: { rel: 84, min: 15, max: 19.2 },
+        dim: { rel: 64, min: 9.2, max: 15 },
+    },
+    60: {
+        vivid: { rel: 100, max: 22 },
+        normal: { rel: 86, min: 15.9, max: 19.9 },
+        dim: { rel: 66, min: 9.9, max: 15.9 },
+    },
+    64: {
+        vivid: { rel: 100, max: 22.2 },
+        normal: { rel: 88, min: 16.2, max: 20.2 },
+        dim: { rel: 68, min: 10.2, max: 16.2 },
+    },
+    68: {
+        vivid: { rel: 100, max: 21.9 },
+        normal: { rel: 90, min: 15.8, max: 19.8 },
+        dim: { rel: 70, min: 9.6, max: 15.8 },
+    },
+    72: {
+        vivid: { rel: 100, max: 21.2 },
+        normal: { rel: 92, min: 14.8, max: 18.8 },
+        dim: { rel: 72, min: 8.4, max: 14.8 },
+    },
+    76: {
+        vivid: { rel: 100, max: 20.3 },
+        normal: { rel: 90, min: 13.1, max: 17.5 },
+        dim: { rel: 70, min: 7, max: 13.1 },
+    },
+    80: {
+        vivid: { rel: 100, max: 19 },
+        normal: { rel: 88, min: 11.2, max: 15.6 },
+        dim: { rel: 68, min: 5.6, max: 11.2 },
+    },
+    84: {
+        vivid: { rel: 100, max: 17.1 },
+        normal: { rel: 86, min: 9, max: 13.4 },
+        dim: { rel: 66, min: 4.4, max: 9 },
+    },
+    88: {
+        vivid: { rel: 100, max: 14.2 },
+        normal: { rel: 84, min: 6.7, max: 10.4 },
+        dim: { rel: 64, min: 3.2, max: 6.7 },
+    },
+    92: {
+        vivid: { rel: 100, max: 11 },
+        normal: { rel: 82, min: 4.4, max: 7.4 },
+        dim: { rel: 62, min: 2.2, max: 4.4 },
+    },
+    96: {
+        vivid: { rel: 100, max: 7 },
+        normal: { rel: 80, min: 2.6, max: 4.4 },
+        dim: { rel: 60, min: 1.5, max: 2.6 },
+    },
+};

package/dist/esm/constants/default-swatch.d.ts

@@ -0,0 +1,109 @@
+export declare const brand: {
+    red: string;
+    orange: string;
+    green: string;
+    mint: string;
+    blue: string;
+    blueDeep: string;
+    violet: string;
+    purple: string;
+};
+export declare const system: {
+    warning: string;
+    error: string;
+    success: string;
+    accent: string;
+};
+export declare const customizable: {
+    red: string;
+    orange: string;
+    green: string;
+    mint: string;
+    blue: string;
+    blueDeep: string;
+    violet: string;
+    purple: string;
+    yellow: string;
+};
+export declare const gray: {
+    0: 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;
+    98: string;
+    100: string;
+};
+export declare const whiteAlpha: {
+    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 declare const blackAlpha: {
+    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;
+};

package/dist/esm/constants/default-swatch.js

@@ -0,0 +1,109 @@
+export var brand = {
+    red: '#FE4C4C',
+    orange: '#FC7630',
+    green: '#26AD50',
+    mint: '#00BEA2',
+    blue: '#2291FF',
+    blueDeep: '#366AF3',
+    violet: '#844BEC',
+    purple: '#B750D1',
+};
+export var system = {
+    warning: '#FDAA00',
+    error: '#E62B34',
+    success: '#009A40',
+    accent: '#2291FF',
+};
+export var customizable = {
+    red: '#FE4C4C',
+    orange: '#FC7630',
+    green: '#26AD50',
+    mint: '#00BEA2',
+    blue: '#2291FF',
+    blueDeep: '#366AF3',
+    violet: '#844BEC',
+    purple: '#B750D1',
+    yellow: '#FAB700',
+};
+export var gray = {
+    0: 'oklch(0% 0 0)',
+    16: 'oklch(16% 0 0)',
+    20: 'oklch(20% 0 0)',
+    24: 'oklch(24% 0 0)',
+    28: 'oklch(28% 0 0)',
+    32: 'oklch(32% 0 0)',
+    36: 'oklch(36% 0 0)',
+    40: 'oklch(40% 0 0)',
+    44: 'oklch(44% 0 0)',
+    48: 'oklch(48% 0 0)',
+    52: 'oklch(52% 0 0)',
+    56: 'oklch(56% 0 0)',
+    60: 'oklch(60% 0 0)',
+    64: 'oklch(64% 0 0)',
+    68: 'oklch(68% 0 0)',
+    72: 'oklch(72% 0 0)',
+    76: 'oklch(76% 0 0)',
+    80: 'oklch(80% 0 0)',
+    84: 'oklch(84% 0 0)',
+    88: 'oklch(88% 0 0)',
+    92: 'oklch(92% 0 0)',
+    96: 'oklch(96% 0 0)',
+    98: 'oklch(98% 0 0)',
+    100: 'oklch(100% 0 0)',
+};
+export var whiteAlpha = {
+    4: 'oklch(100% 0 0 / 0.04)',
+    6: 'oklch(100% 0 0 / 0.06)',
+    8: 'oklch(100% 0 0 / 0.08)',
+    12: 'oklch(100% 0 0 / 0.12)',
+    16: 'oklch(100% 0 0 / 0.16)',
+    20: 'oklch(100% 0 0 / 0.2)',
+    24: 'oklch(100% 0 0 / 0.24)',
+    28: 'oklch(100% 0 0 / 0.28)',
+    32: 'oklch(100% 0 0 / 0.32)',
+    36: 'oklch(100% 0 0 / 0.36)',
+    40: 'oklch(100% 0 0 / 0.4)',
+    44: 'oklch(100% 0 0 / 0.44)',
+    48: 'oklch(100% 0 0 / 0.48)',
+    52: 'oklch(100% 0 0 / 0.52)',
+    56: 'oklch(100% 0 0 / 0.56)',
+    60: 'oklch(100% 0 0 / 0.6)',
+    64: 'oklch(100% 0 0 / 0.64)',
+    68: 'oklch(100% 0 0 / 0.68)',
+    72: 'oklch(100% 0 0 / 0.72)',
+    76: 'oklch(100% 0 0 / 0.76)',
+    80: 'oklch(100% 0 0 / 0.8)',
+    84: 'oklch(100% 0 0 / 0.84)',
+    88: 'oklch(100% 0 0 / 0.88)',
+    92: 'oklch(100% 0 0 / 0.92)',
+    96: 'oklch(100% 0 0 / 0.96)',
+    100: 'oklch(100% 0 0 / 1)',
+};
+export var blackAlpha = {
+    4: 'oklch(0% 0 0 / 0.04)',
+    6: 'oklch(0% 0 0 / 0.06)',
+    8: 'oklch(0% 0 0 / 0.08)',
+    12: 'oklch(0% 0 0 / 0.12)',
+    16: 'oklch(0% 0 0 / 0.16)',
+    20: 'oklch(0% 0 0 / 0.2)',
+    24: 'oklch(0% 0 0 / 0.24)',
+    28: 'oklch(0% 0 0 / 0.28)',
+    32: 'oklch(0% 0 0 / 0.32)',
+    36: 'oklch(0% 0 0 / 0.36)',
+    40: 'oklch(0% 0 0 / 0.4)',
+    44: 'oklch(0% 0 0 / 0.44)',
+    48: 'oklch(0% 0 0 / 0.48)',
+    52: 'oklch(0% 0 0 / 0.52)',
+    56: 'oklch(0% 0 0 / 0.56)',
+    60: 'oklch(0% 0 0 / 0.6)',
+    64: 'oklch(0% 0 0 / 0.64)',
+    68: 'oklch(0% 0 0 / 0.68)',
+    72: 'oklch(0% 0 0 / 0.72)',
+    76: 'oklch(0% 0 0 / 0.76)',
+    80: 'oklch(0% 0 0 / 0.8)',
+    84: 'oklch(0% 0 0 / 0.84)',
+    88: 'oklch(0% 0 0 / 0.88)',
+    92: 'oklch(0% 0 0 / 0.92)',
+    96: 'oklch(0% 0 0 / 0.96)',
+    100: 'oklch(0% 0 0 / 1)',
+};

package/dist/esm/constants/interaction-settings.d.ts

@@ -0,0 +1,8 @@
+export declare const HOVER_LIGHT_L = -4;
+export declare const HOVER_LIGHT_C = 0;
+export declare const HOVER_DARK_L = 4;
+export declare const HOVER_DARK_C = 0;
+export declare const PRESSED_LIGHT_L = -8;
+export declare const PRESSED_LIGHT_C = -0.03;
+export declare const PRESSED_DARK_L = -4;
+export declare const PRESSED_DARK_C = -0.03;

package/dist/esm/constants/interaction-settings.js

@@ -0,0 +1,8 @@
+export var HOVER_LIGHT_L = -4;
+export var HOVER_LIGHT_C = 0;
+export var HOVER_DARK_L = +4;
+export var HOVER_DARK_C = 0;
+export var PRESSED_LIGHT_L = -8;
+export var PRESSED_LIGHT_C = -0.03;
+export var PRESSED_DARK_L = -4;
+export var PRESSED_DARK_C = -0.03;

package/dist/esm/constants/logo-lightness.d.ts

@@ -0,0 +1 @@
+export declare const MIN_LOGO_LIGHTNESS = 64;

package/dist/esm/constants/logo-lightness.js

@@ -0,0 +1 @@
+export var MIN_LOGO_LIGHTNESS = 64;

package/dist/esm/constants/promo-hue-shift.d.ts

@@ -0,0 +1,3 @@
+export declare const PROMO_HUE_SHIFTS: {
+    [hueRange: number]: number;
+};

package/dist/esm/constants/promo-hue-shift.js

@@ -0,0 +1,11 @@
+export var PROMO_HUE_SHIFTS = {
+    0: -24,
+    25: -32,
+    44: -35,
+    148: 40,
+    177: 51,
+    253: 11,
+    264: 14,
+    294: 0,
+    319: -24,
+};

package/dist/esm/constants/warning-hue-patch.d.ts

@@ -0,0 +1,3 @@
+export declare const WARNING_HUE_PATCH: {
+    [lightness: number]: number;
+};

package/dist/esm/constants/warning-hue-patch.js

@@ -0,0 +1,22 @@
+export var WARNING_HUE_PATCH = {
+    96: 0,
+    92: 0,
+    88: 0,
+    84: 0,
+    80: 0,
+    76: 0,
+    72: -4,
+    68: -8,
+    64: -12,
+    60: -8,
+    56: -4,
+    52: -2,
+    48: 0,
+    44: 0,
+    40: 0,
+    36: 0,
+    32: 0,
+    28: 0,
+    24: 0,
+    20: 0,
+};

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

@@ -0,0 +1,17 @@
+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>);
+export interface ConfigOptions {
+    brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+    accent: PresetOrCustom<'brand' | 'gray'>;
+    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 const convertOklchToRgba: (oklchString: string) => string;
+export declare function convertAlphaOklchToRgba(obj: any): any;
+export declare function flattenObject(obj: any, prefix?: string): any;
+export {};

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

@@ -0,0 +1,169 @@
+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';
+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 warningPalette = getPalette({
+        color: system.warning,
+    });
+    var errorPalette = getPalette({ color: system.error });
+    var successPalette = getPalette({
+        color: system.success,
+    });
+    var customizable = {};
+    for (var colorKey in DEFAULT_SWATCH.customizable) {
+        // @ts-expect-error
+        customizable[colorKey] = getPalette({
+            // @ts-expect-error
+            color: DEFAULT_SWATCH.customizable[colorKey],
+        });
+    }
+    return {
+        brand: {
+            logo: getLogo(brandColor),
+            promo: getPromo(brandColor),
+            original: brandColor,
+            interactions: {
+                hover: getHover(brandColor),
+                pressed: getPressed(brandColor),
+            },
+            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,
+        gray: DEFAULT_SWATCH.gray,
+        whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
+        blackAlpha: DEFAULT_SWATCH.blackAlpha,
+        onBrand: calcOnBrand(brandColor),
+        // TODO: настроить для gray
+        onAccent: (accent === 'brand' && calcOnBrand(brandColor)) || 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); });
+    }
+    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);
+                }
+            }
+            newObj[key] = convertOklchToHex(value);
+        }
+    }
+    return newObj;
+}
+export var convertOklchToRgba = function (oklchString) {
+    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;
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+export function convertAlphaOklchToRgba(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return convertAlphaOklchToRgba(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);
+                }
+            }
+            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));
+            }
+            else {
+                result[newKey] = obj[key];
+            }
+        }
+    }
+    return result;
+}

package/dist/esm/get-colors.d.ts

@@ -0,0 +1,17 @@
+import { type ConfigOptions } from './get-base-tokens';
+import { getDefaultTokens } from './get-default-tokens';
+import type { BaseTokens } from './types/base-tokens';
+export interface Themed<T> {
+    light: T;
+    dark: T;
+}
+export type DefaultTokensFull = ReturnType<typeof getDefaultTokens>;
+export type DefaultTokens = DefaultTokensFull['light' | 'dark'];
+export interface SemanticConfigOptions<T> extends ConfigOptions {
+    theme?: 'light' | 'dark';
+    overrides?: (base: BaseTokens, defaults?: DefaultTokensFull, params?: SemanticConfigOptions<T>) => Themed<T>;
+}
+export declare function getColors(params: SemanticConfigOptions<DefaultTokens>): DefaultTokens;
+export declare function getColors<T>(params: SemanticConfigOptions<T> & {
+    overrides: (base: BaseTokens) => Themed<T>;
+}): Themed<T>;

package/dist/esm/get-colors.js

@@ -0,0 +1,12 @@
+import { getBaseTokens } from './get-base-tokens';
+import { getDefaultTokens } from './get-default-tokens';
+var DEFAULT_THEME = 'light';
+export function getColors(params) {
+    var theme = params.theme || DEFAULT_THEME;
+    var base = getBaseTokens(params);
+    var defaults = getDefaultTokens(base);
+    if (params.overrides) {
+        return params.overrides(base, defaults, params)[theme];
+    }
+    return defaults[theme];
+}