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

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

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

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

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

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

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

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

@@ -0,0 +1,232 @@
+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 = Number(calcAPCA('#fff', hex));
+  var blackContrast = Number(calcAPCA('#000', hex));
+  if (whiteContrast - 10 <= blackContrast) {
+    return DefaultSwatch.whiteAlpha;
+  }
+  return DefaultSwatch.blackAlpha;
+}

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

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

@@ -0,0 +1,51 @@
+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/base-tokens.d.ts

@@ -0,0 +1,125 @@
+export interface BaseTokens {
+  brand: {
+    logo: ThemedValue;
+    original: string;
+    promo: string;
+    interactions: {
+      hover: ThemedValue;
+      pressed: ThemedValue;
+    };
+    palette: ColorPalette;
+  };
+  accent?: {
+    original: ThemedValue;
+    interactions: {
+      hover: ThemedValue;
+      pressed: ThemedValue;
+    };
+    palette?: ColorPalette;
+  };
+  warning: ColorPalette;
+  error: ColorPalette;
+  success: ColorPalette;
+  gray: ColorWithScale<GrayScale>;
+  whiteAlpha: ColorWithScale<AlphaScale>;
+  blackAlpha: ColorWithScale<AlphaScale>;
+  onBrand: ColorWithScale<AlphaScale>;
+  onAccent?: ColorWithScale<AlphaScale>;
+  customizable: {
+    red: ColorPalette;
+    orange: ColorPalette;
+    green: ColorPalette;
+    mint: ColorPalette;
+    blue: ColorPalette;
+    blueDeep: ColorPalette;
+    violet: ColorPalette;
+    purple: ColorPalette;
+    yellow: ColorPalette;
+  };
+}
+export interface ColorPalette {
+  vivid: ColorWithScale<ChromaScale>;
+  normal: ColorWithScale<ChromaScale>;
+  dim: ColorWithScale<ChromaScale>;
+}
+export 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;
+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;
+type ColorWithScale<T extends string | number> = {
+  [K in T]: string;
+};
+export interface ThemedValue {
+  light: string;
+  dark: string;
+}
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+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/types/generator-tokens.js

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