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

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

@@ -1,61 +0,0 @@
-'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.js

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

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

@@ -1,287 +0,0 @@
-'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 = Math.abs(Number((0, apca_w3_1.calcAPCA)('#fff', hex)));
-  var blackContrast = Math.abs(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

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

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

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

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

package/dist/cjs/types/generator-tokens.js

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

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

@@ -1,15 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.kebabCaseToCamelCase = exports.camelCaseToKebabCase = void 0;
-var camelCaseToKebabCase = function (str) {
-  return str.replace(/[A-Z]/g, function (match) {
-    return '-'.concat(match.toLowerCase());
-  });
-};
-exports.camelCaseToKebabCase = camelCaseToKebabCase;
-var kebabCaseToCamelCase = function (str) {
-  return str.replace(/-(\w)/g, function (_, c) {
-    return c.toUpperCase();
-  });
-};
-exports.kebabCaseToCamelCase = kebabCaseToCamelCase;