@skbkontur/colors 1.1.2-d1791.0 → 2.0.0-alpha.0

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

@@ -1,22 +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,
+  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

@@ -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>);
+export 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'>;
-    system?: typeof DEFAULT_SWATCH.system;
+  brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+  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,189 +1,147 @@
-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 var ACCENT_PARAMS = ['brand', 'gray'];
 export function getBaseTokens(_a) {
-    var brand = _a.brand, accent = _a.accent, _b = _a.system, system = _b === void 0 ? DEFAULT_SWATCH.system : _b;
-    var brandColor = colorToHex(brand);
-    var brandPalette = getPalette({ color: brandColor });
-    var accentPalette;
-    switch (accent) {
-        case 'brand':
-            accentPalette = brandPalette;
-            break;
-        case 'gray':
-            accentPalette = undefined;
-            break;
-        default:
-            accentPalette = getPalette({ color: accent });
+  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 isPresetColor = brand in DEFAULT_SWATCH.brand;
+  var brandColor;
+  if (isPresetColor) {
+    brandColor = DEFAULT_SWATCH.brand[brand];
+  } else {
+    brandColor = brand;
+  }
+  var accentColor;
+  if (accent === 'brand') {
+    accentColor = brandColor;
+  } else if (accent !== 'gray') {
+    accentColor = accent;
+  }
+  var brandPalette = getPalette({ color: brandColor });
+  var accentPalette;
+  if (accent === 'brand') {
+    accentPalette = brandPalette;
+  } else if (accent !== 'gray' && accentColor) {
+    accentPalette = getPalette({ color: accentColor });
+  }
+  var customizablePalettes = {};
+  for (var colorKey in DEFAULT_SWATCH.customizable) {
+    var key = colorKey;
+    if (key === brand && isPresetColor) {
+      customizablePalettes[key] = brandPalette;
+      continue;
     }
-    var warningPalette = getPalette({
-        color: system.warning,
-    });
-    var errorPalette = getPalette({ color: system.error });
-    var successPalette = getPalette({
-        color: system.success,
+    customizablePalettes[key] = getPalette({
+      color: DEFAULT_SWATCH.customizable[key],
     });
-    var customizable = {};
-    for (var colorKey in DEFAULT_SWATCH.brand) {
-        // @ts-expect-error
-        customizable[colorKey] = getPalette({
-            // @ts-expect-error
-            color: DEFAULT_SWATCH.brand[colorKey],
-        });
-    }
-    return {
-        brandLogo: getLogo(brand),
-        brandPromo: {
-            light: getPromo(brandColor),
-            dark: 'blue',
-        },
-        brand: {
-            // todo Brand
-            original: {
-                light: brand,
-                dark: brand,
-            },
-            // todo interactions
-            interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
-            },
-            palette: brandPalette,
-        },
-        accent: {
-            original: {
-                // todo Fix gray
-                light: accent === 'gray' ? accent : '#3d3d3d',
-                dark: accent === 'gray' ? accent : '#3d3d3d',
-            },
-            // todo interactions
-            interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
-            },
-            palette: accentPalette || undefined,
-        },
-        warning: warningPalette,
-        error: errorPalette,
-        success: successPalette,
-        gray: DEFAULT_SWATCH.gray,
-        whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
-        blackAlpha: DEFAULT_SWATCH.blackAlpha,
-        onBrand: calcOnBrand(brandColor),
-        customizable: customizable,
-    };
+  }
+  return {
+    brand: {
+      logo: getLogo(brandColor),
+      promo: getPromo(brandColor),
+      original: brandColor,
+      interactions: {
+        hover: getHover(brandColor),
+        pressed: getPressed(brandColor),
+      },
+      palette: brandPalette,
+    },
+    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: customizablePalettes,
+  };
 }
-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);
-        }
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    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('/')) {
+        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;
+      }
     }
-    return newObj;
+  }
+  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, ")");
+  var _a;
+  var oklch = converter('oklch')(oklchString);
+  var rgb = converter('rgb')(oklch);
+  var r = Math.round(rgb.r * 255);
+  var g = Math.round(rgb.g * 255);
+  var b = Math.round(rgb.b * 255);
+  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) {
-    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];
-            }
-        }
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    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(')) {
+        value = convertOklchToRgba(value);
+      }
+      if (typeof value === 'object' && value !== null) {
+        newObj[key] = convertAlphaOklchToRgba(value);
+      } else {
+        newObj[key] = value;
+      }
     }
-    return result;
+  }
+  return newObj;
 }

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

@@ -0,0 +1,19 @@
+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];
+}