@skbkontur/colors 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/esm/helpers/get-interactions.d.ts

@@ -1,7 +0,0 @@
-interface InteractionColors {
-  light: string;
-  dark: string;
-}
-export declare function getHover(hex: string): InteractionColors;
-export declare function getPressed(hex: string): InteractionColors;
-export {};

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

@@ -1,49 +0,0 @@
-import { converter } from 'culori';
-import {
-  HOVER_LIGHT_L,
-  HOVER_LIGHT_C,
-  HOVER_DARK_L,
-  HOVER_DARK_C,
-  PRESSED_LIGHT_L,
-  PRESSED_LIGHT_C,
-  PRESSED_DARK_L,
-  PRESSED_DARK_C,
-} from '../constants/interaction-settings';
-function applyOklchDelta(oklchColor, dL, dC) {
-  var _a = oklchColor.l,
-    l = _a === void 0 ? 0 : _a,
-    _b = oklchColor.c,
-    c = _b === void 0 ? 0 : _b,
-    _c = oklchColor.h,
-    h = _c === void 0 ? 0 : _c;
-  var safeH = h === undefined || isNaN(h) ? 0 : h;
-  var newL = Math.max(0, Math.min(1, l + dL / 100));
-  var newC = Math.max(0, c + dC);
-  return 'oklch('.concat(newL.toFixed(3), ' ').concat(newC.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
-}
-export function getHover(hex) {
-  var toOklch = converter('oklch');
-  var oklchColor = toOklch(hex);
-  if (!oklchColor) {
-    return { light: hex, dark: hex };
-  }
-  var lightHoverColor = applyOklchDelta(oklchColor, HOVER_LIGHT_L, HOVER_LIGHT_C);
-  var darkHoverColor = applyOklchDelta(oklchColor, HOVER_DARK_L, HOVER_DARK_C);
-  return {
-    light: lightHoverColor,
-    dark: darkHoverColor,
-  };
-}
-export function getPressed(hex) {
-  var toOklch = converter('oklch');
-  var oklchColor = toOklch(hex);
-  if (!oklchColor) {
-    return { light: hex, dark: hex };
-  }
-  var lightPressedColor = applyOklchDelta(oklchColor, PRESSED_LIGHT_L, PRESSED_LIGHT_C);
-  var darkPressedColor = applyOklchDelta(oklchColor, PRESSED_DARK_L, PRESSED_DARK_C);
-  return {
-    light: lightPressedColor,
-    dark: darkPressedColor,
-  };
-}

package/dist/esm/helpers/get-logo.d.ts

@@ -1,6 +0,0 @@
-interface LogoColors {
-  light: string;
-  dark: string;
-}
-export declare function getLogo(hex: string): LogoColors;
-export {};

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

@@ -1,28 +0,0 @@
-import { converter } from 'culori';
-import { MIN_LOGO_LIGHTNESS } from '../constants/logo-lightness';
-export function getLogo(hex) {
-  var toOklch = converter('oklch');
-  var oklchColor = toOklch(hex);
-  var lightThemeLogoColor = hex;
-  if (!oklchColor) {
-    var fallbackColor = 'oklch('.concat(MIN_LOGO_LIGHTNESS, '% 0 0)');
-    return { light: hex, dark: fallbackColor };
-  }
-  var _a = oklchColor.l,
-    l = _a === void 0 ? 0 : _a,
-    _b = oklchColor.c,
-    c = _b === void 0 ? 0 : _b;
-  var h = oklchColor.h;
-  var safeH = h === undefined || isNaN(h) ? 0 : h;
-  l = l || 0;
-  c = c || 0;
-  var percentL = l * 100;
-  if (percentL < MIN_LOGO_LIGHTNESS) {
-    l = MIN_LOGO_LIGHTNESS / 100;
-  }
-  var darkThemeLogoColor = 'oklch('.concat(l.toFixed(3), ' ').concat(c.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
-  return {
-    light: lightThemeLogoColor,
-    dark: darkThemeLogoColor,
-  };
-}

package/dist/esm/helpers/get-palette.d.ts

@@ -1,76 +0,0 @@
-import type {
-  GeneratorColorAbneyCorrection,
-  GeneratorColorChromaSettingsGroup,
-  GeneratorColorPalette,
-  GeneratorColorWarningHuePatch,
-} from '../types/generator-tokens';
-interface GeneratePaletteParams {
-  color: string;
-  type?: 'default' | 'warning';
-  settings?: {
-    chromaSettings?: GeneratorColorChromaSettingsGroup;
-    abneyCorrection?: GeneratorColorAbneyCorrection;
-    promoHueShifts?: {
-      [hueRange: number]: number;
-    };
-    warningHuePatch?: GeneratorColorWarningHuePatch;
-  };
-}
-export declare function getPalette({
-  color,
-  type,
-  settings: customSettings,
-}: GeneratePaletteParams): GeneratorColorPalette;
-export declare function getAbneyHueShift(
-  lightness: number,
-  currentHue: number,
-  abneyData: GeneratorColorAbneyCorrection
-): number;
-export declare function applyAbneyShift(
-  lightness: number,
-  currentHue: number,
-  abneyData: GeneratorColorAbneyCorrection
-): number;
-export declare function applyWarningHuePatch(
-  currentHue: number,
-  lightness: number,
-  warningHuePatchData: GeneratorColorWarningHuePatch,
-  isWarningMode: boolean
-): number;
-export declare function calculateBaseHueAndCorrectionRange(
-  inputColorString: string,
-  abneyData: GeneratorColorAbneyCorrection
-): {
-  baseHue: number;
-  correctionLightness: number;
-  correctionHueRange: number;
-} | null;
-export declare function calcOnBrand(hex: string): {
-  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 {};

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

@@ -1,232 +0,0 @@
-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);
-  };
-var __spreadArray =
-  (this && this.__spreadArray) ||
-  function (to, from, pack) {
-    if (pack || arguments.length === 2)
-      for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-          ar[i] = from[i];
-        }
-      }
-    return to.concat(ar || Array.prototype.slice.call(from));
-  };
-import { clampChroma, converter } from 'culori';
-import { calcAPCA } from 'apca-w3';
-import * as DefaultSwatch from '../constants/default-swatch';
-import { CHROMA_SETTINGS } from '../constants/chroma-settings';
-import { ABNEY_CORRECTION } from '../constants/abney-correction';
-import { PROMO_HUE_SHIFTS } from '../constants/promo-hue-shift';
-import { WARNING_HUE_PATCH } from '../constants/warning-hue-patch';
-export function getPalette(_a) {
-  var color = _a.color,
-    _b = _a.type,
-    type = _b === void 0 ? 'default' : _b,
-    customSettings = _a.settings;
-  var defaultSettings = {
-    chromaSettings: CHROMA_SETTINGS,
-    abneyCorrection: ABNEY_CORRECTION,
-    promoHueShifts: PROMO_HUE_SHIFTS,
-    warningHuePatch: WARNING_HUE_PATCH,
-  };
-  var settings = __assign(__assign({}, defaultSettings), customSettings);
-  var toOklch = converter('oklch');
-  var oklchColor = toOklch(color);
-  var currentHue = (oklchColor === null || oklchColor === void 0 ? void 0 : oklchColor.h) || 0;
-  var toNorm = function (x) {
-    return x / 100;
-  };
-  var calculateChromaValue = function (rel, min, max, baseChromaMax) {
-    var raw = (baseChromaMax * rel) / 100;
-    var value = raw;
-    if (min !== undefined) {
-      value = Math.max(toNorm(min), value);
-    }
-    if (max !== undefined) {
-      value = Math.min(toNorm(max), value);
-    }
-    return Math.min(value, baseChromaMax);
-  };
-  var result = {
-    vivid: {},
-    normal: {},
-    dim: {},
-  };
-  var isWarning = type === 'warning';
-  for (var Lstr in settings.chromaSettings) {
-    var L = +Lstr;
-    if (L === 100) {
-      result.vivid[L] = 'oklch(100% 0 0)';
-      result.normal[L] = 'oklch(100% 0 0)';
-      result.dim[L] = 'oklch(100% 0 0)';
-      continue;
-    }
-    var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
-    var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
-    var chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
-    var currentParams = settings.chromaSettings[L];
-    var vividN = calculateChromaValue(
-      currentParams.vivid.rel,
-      currentParams.vivid.min,
-      currentParams.vivid.max,
-      chromaMax
-    );
-    var normN = calculateChromaValue(
-      currentParams.normal.rel,
-      currentParams.normal.min,
-      currentParams.normal.max,
-      chromaMax
-    );
-    var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
-    result.vivid[L] = 'oklch('.concat(L, '% ').concat(vividN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
-    result.normal[L] = 'oklch('.concat(L, '% ').concat(normN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
-    result.dim[L] = 'oklch('.concat(L, '% ').concat(dimN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
-  }
-  return result;
-}
-export function getAbneyHueShift(lightness, currentHue, abneyData) {
-  var lightnessData = abneyData[lightness];
-  if (!lightnessData) {
-    return 0;
-  }
-  var hueRanges = Object.keys(lightnessData)
-    .map(Number)
-    .sort(function (a, b) {
-      return a - b;
-    });
-  var selectedHueRange = hueRanges[0];
-  for (var i = 0; i < hueRanges.length; i++) {
-    var startRange = hueRanges[i];
-    var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
-    if (currentHue >= startRange && currentHue < endRange) {
-      selectedHueRange = startRange;
-      break;
-    }
-    if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
-      selectedHueRange = startRange;
-      break;
-    }
-  }
-  return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
-}
-export function applyAbneyShift(lightness, currentHue, abneyData) {
-  var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
-  return (currentHue + abneyShift + 360) % 360;
-}
-export function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
-  if (isWarningMode) {
-    var patch = warningHuePatchData[lightness];
-    if (patch !== undefined) {
-      return (currentHue + patch + 360) % 360;
-    }
-  }
-  return currentHue;
-}
-function findClosestLightnessStep(targetL, availableLightnessSteps) {
-  if (availableLightnessSteps.length === 0) {
-    return targetL;
-  }
-  var sortedSteps = __spreadArray([], availableLightnessSteps, true).sort(function (a, b) {
-    return a - b;
-  });
-  var closestStep = sortedSteps[0];
-  var minDiff = Math.abs(targetL - closestStep);
-  for (var i = 1; i < sortedSteps.length; i++) {
-    var currentStep = sortedSteps[i];
-    var diff = Math.abs(targetL - currentStep);
-    if (diff < minDiff || (diff === minDiff && currentStep > closestStep)) {
-      minDiff = diff;
-      closestStep = currentStep;
-    }
-  }
-  return closestStep;
-}
-export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
-  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 {
-      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;
-  }
-  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 = Math.abs(Number(calcAPCA('#fff', hex)));
-  var blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
-  if (whiteContrast + 10 >= blackContrast) {
-    return DefaultSwatch.whiteAlpha;
-  }
-  return DefaultSwatch.blackAlpha;
-}

package/dist/esm/helpers/get-promo.d.ts

@@ -1,12 +0,0 @@
-export declare function getPromo(
-  color: string,
-  hueShifts?: {
-    [hueRange: number]: number;
-  }
-): string;
-export declare function getPromoHueShift(
-  currentHue: number,
-  promoHueShifts: {
-    [hueRange: number]: number;
-  }
-): number;

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

@@ -1,51 +0,0 @@
-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;
-  }
-  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'));
-}
-export function getPromoHueShift(currentHue, promoHueShifts) {
-  var hueRanges = Object.keys(promoHueShifts)
-    .map(Number)
-    .sort(function (a, b) {
-      return a - b;
-    });
-  var selectedHueRange = hueRanges[0];
-  for (var i = 0; i < hueRanges.length; i++) {
-    var startRange = hueRanges[i];
-    var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
-    if (currentHue >= startRange && currentHue < endRange) {
-      selectedHueRange = startRange;
-      break;
-    }
-    if (i === hueRanges.length - 1 && (currentHue >= startRange || currentHue < hueRanges[0])) {
-      selectedHueRange = startRange;
-      break;
-    }
-  }
-  return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
-}

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

@@ -1,43 +0,0 @@
-export interface GeneratorColorChromaSettingsGroup {
-  [key: number]: {
-    vivid: GeneratorColorChromaSettings;
-    normal: GeneratorColorChromaSettings;
-    dim: GeneratorColorChromaSettings;
-  };
-}
-export interface GeneratorColorChromaSettings {
-  rel: number;
-  min?: number;
-  max?: number;
-}
-export interface GeneratorColorPalette {
-  vivid: {
-    [key: number]: string;
-  };
-  normal: {
-    [key: number]: string;
-  };
-  dim: {
-    [key: number]: string;
-  };
-}
-export interface GeneratorColorAbneyCorrection {
-  [lightness: number]: {
-    [hueShiftRange: number]: number;
-  };
-}
-export interface GeneratorColorWarningHuePatch {
-  [lightness: number]: number;
-}
-export interface GeneratorPaletteParams {
-  color: string;
-  type?: 'default' | 'warning' | 'promo';
-  settings?: {
-    chromaSettings?: GeneratorColorChromaSettingsGroup;
-    abneyCorrection?: GeneratorColorAbneyCorrection;
-    promoHueShifts?: {
-      [hueRange: number]: number;
-    };
-    warningHuePatch?: GeneratorColorWarningHuePatch;
-  };
-}

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

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

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

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