@skbkontur/colors 1.1.2-dc095.0 → 2.0.0-alpha.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,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<(typeof ACCENT_PARAMS)[number]>;
+  system?: typeof DEFAULT_SWATCH.system;
+}
+export declare function getBaseTokens({ brand, accent, system }: ConfigOptions): BaseTokens;
+export declare function convertOklchToHex(obj: ColorStructure): ColorStructure;
+export declare const convertOklchToRgba: (oklchString: string) => string;
+export declare function convertAlphaOklchToRgba(obj: ColorStructure): ColorStructure;
+export {};

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

@@ -0,0 +1,147 @@
+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,
+    _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;
+    }
+    customizablePalettes[key] = getPalette({
+      color: DEFAULT_SWATCH.customizable[key],
+    });
+  }
+  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 function convertOklchToHex(obj) {
+  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;
+}
+export var convertOklchToRgba = function (oklchString) {
+  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) {
+      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 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];
+}