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

package/dist/cjs/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/cjs/helpers/get-interactions.js

@@ -0,0 +1,61 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getPressed = exports.getHover = void 0;
+var culori_1 = require('culori');
+var interaction_settings_1 = require('../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), ')');
+}
+function getHover(hex) {
+  var toOklch = (0, culori_1.converter)('oklch');
+  var oklchColor = toOklch(hex);
+  if (!oklchColor) {
+    return { light: hex, dark: hex };
+  }
+  var lightHoverColor = applyOklchDelta(
+    oklchColor,
+    interaction_settings_1.HOVER_LIGHT_L,
+    interaction_settings_1.HOVER_LIGHT_C
+  );
+  var darkHoverColor = applyOklchDelta(
+    oklchColor,
+    interaction_settings_1.HOVER_DARK_L,
+    interaction_settings_1.HOVER_DARK_C
+  );
+  return {
+    light: lightHoverColor,
+    dark: darkHoverColor,
+  };
+}
+exports.getHover = getHover;
+function getPressed(hex) {
+  var toOklch = (0, culori_1.converter)('oklch');
+  var oklchColor = toOklch(hex);
+  if (!oklchColor) {
+    return { light: hex, dark: hex };
+  }
+  var lightPressedColor = applyOklchDelta(
+    oklchColor,
+    interaction_settings_1.PRESSED_LIGHT_L,
+    interaction_settings_1.PRESSED_LIGHT_C
+  );
+  var darkPressedColor = applyOklchDelta(
+    oklchColor,
+    interaction_settings_1.PRESSED_DARK_L,
+    interaction_settings_1.PRESSED_DARK_C
+  );
+  return {
+    light: lightPressedColor,
+    dark: darkPressedColor,
+  };
+}
+exports.getPressed = getPressed;

package/dist/cjs/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/cjs/helpers/get-logo.js

@@ -0,0 +1,32 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getLogo = void 0;
+var culori_1 = require('culori');
+var logo_lightness_1 = require('../constants/logo-lightness');
+function getLogo(hex) {
+  var toOklch = (0, culori_1.converter)('oklch');
+  var oklchColor = toOklch(hex);
+  var lightThemeLogoColor = hex;
+  if (!oklchColor) {
+    var fallbackColor = 'oklch('.concat(logo_lightness_1.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 < logo_lightness_1.MIN_LOGO_LIGHTNESS) {
+    l = logo_lightness_1.MIN_LOGO_LIGHTNESS / 100;
+  }
+  var darkThemeLogoColor = 'oklch('.concat(l.toFixed(3), ' ').concat(c.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
+  return {
+    light: lightThemeLogoColor,
+    dark: darkThemeLogoColor,
+  };
+}
+exports.getLogo = getLogo;

package/dist/cjs/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/cjs/helpers/get-palette.js

@@ -0,0 +1,287 @@
+'use strict';
+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 __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null)
+      for (var k in mod)
+        if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+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));
+  };
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.calcOnBrand =
+  exports.calculateBaseHueAndCorrectionRange =
+  exports.applyWarningHuePatch =
+  exports.applyAbneyShift =
+  exports.getAbneyHueShift =
+  exports.getPalette =
+    void 0;
+var culori_1 = require('culori');
+var apca_w3_1 = require('apca-w3');
+var DefaultSwatch = __importStar(require('../constants/default-swatch'));
+var chroma_settings_1 = require('../constants/chroma-settings');
+var abney_correction_1 = require('../constants/abney-correction');
+var promo_hue_shift_1 = require('../constants/promo-hue-shift');
+var warning_hue_patch_1 = require('../constants/warning-hue-patch');
+function getPalette(_a) {
+  var color = _a.color,
+    _b = _a.type,
+    type = _b === void 0 ? 'default' : _b,
+    customSettings = _a.settings;
+  var defaultSettings = {
+    chromaSettings: chroma_settings_1.CHROMA_SETTINGS,
+    abneyCorrection: abney_correction_1.ABNEY_CORRECTION,
+    promoHueShifts: promo_hue_shift_1.PROMO_HUE_SHIFTS,
+    warningHuePatch: warning_hue_patch_1.WARNING_HUE_PATCH,
+  };
+  var settings = __assign(__assign({}, defaultSettings), customSettings);
+  var toOklch = (0, culori_1.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 = (0, culori_1.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;
+}
+exports.getPalette = getPalette;
+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;
+}
+exports.getAbneyHueShift = getAbneyHueShift;
+function applyAbneyShift(lightness, currentHue, abneyData) {
+  var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
+  return (currentHue + abneyShift + 360) % 360;
+}
+exports.applyAbneyShift = applyAbneyShift;
+function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
+  if (isWarningMode) {
+    var patch = warningHuePatchData[lightness];
+    if (patch !== undefined) {
+      return (currentHue + patch + 360) % 360;
+    }
+  }
+  return currentHue;
+}
+exports.applyWarningHuePatch = applyWarningHuePatch;
+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;
+}
+function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
+  var toOklch = (0, culori_1.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,
+  };
+}
+exports.calculateBaseHueAndCorrectionRange = calculateBaseHueAndCorrectionRange;
+function calcOnBrand(hex) {
+  var whiteContrast = Number((0, apca_w3_1.calcAPCA)('#fff', hex));
+  var blackContrast = Number((0, apca_w3_1.calcAPCA)('#000', hex));
+  if (whiteContrast - 10 <= blackContrast) {
+    return DefaultSwatch.whiteAlpha;
+  }
+  return DefaultSwatch.blackAlpha;
+}
+exports.calcOnBrand = calcOnBrand;

package/dist/cjs/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/cjs/helpers/get-promo.js

@@ -0,0 +1,56 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getPromoHueShift = exports.getPromo = void 0;
+var culori_1 = require('culori');
+var promo_hue_shift_1 = require('../constants/promo-hue-shift');
+function getPromo(color, hueShifts) {
+  if (hueShifts === void 0) {
+    hueShifts = promo_hue_shift_1.PROMO_HUE_SHIFTS;
+  }
+  var toOklch = (0, culori_1.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 (0, culori_1.formatHex)((0, culori_1.clampChroma)(promoOklch, 'oklch'));
+}
+exports.getPromo = getPromo;
+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;
+}
+exports.getPromoHueShift = getPromoHueShift;

package/dist/cjs/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/cjs/types/base-tokens.js

@@ -0,0 +1,2 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });