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

package/{dist/cjs/constants/abney-correction.js → lib/consts/params/abney-correction.ts}

@@ -1,7 +1,6 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.ABNEY_CORRECTION = void 0;
-exports.ABNEY_CORRECTION = {
+import type { GeneratorColorAbneyCorrection } from '../../types/tokens-base-generator.js';
+
+export const ABNEY_CORRECTION: GeneratorColorAbneyCorrection = {
   20: {
     0: 0,
     8: 0,

package/lib/consts/params/chroma-params.d.ts

@@ -0,0 +1,2 @@
+import type { GeneratorColorChromaParamsGroup } from '../../types/tokens-base-generator.js';
+export declare const CHROMA_PARAMS: GeneratorColorChromaParamsGroup;

package/lib/consts/params/chroma-params.js

@@ -0,0 +1,102 @@
+export var CHROMA_PARAMS = {
+    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/chroma-settings.js → lib/consts/params/chroma-params.ts}

@@ -1,4 +1,6 @@
-export var CHROMA_SETTINGS = {
+import type { GeneratorColorChromaParamsGroup } from '../../types/tokens-base-generator.js';
+
+export const CHROMA_PARAMS: GeneratorColorChromaParamsGroup = {
   20: {
     vivid: { rel: 100, max: 12 },
     normal: { rel: 66, min: 4.4, max: 8 },

package/lib/consts/params/interactions.ts

@@ -0,0 +1,9 @@
+export const HOVER_LIGHT_L = -4;
+export const HOVER_LIGHT_C = 0;
+export const HOVER_DARK_L = +4;
+export const HOVER_DARK_C = 0;
+
+export const PRESSED_LIGHT_L = -8;
+export const PRESSED_LIGHT_C = -0.03;
+export const PRESSED_DARK_L = -4;
+export const PRESSED_DARK_C = -0.03;

package/lib/consts/params/logo-lightness.d.ts

@@ -0,0 +1 @@
+export declare const LOGO_LIGHTNESS_MIN = 64;

package/lib/consts/params/logo-lightness.js

@@ -0,0 +1 @@
+export var LOGO_LIGHTNESS_MIN = 64;

package/lib/consts/params/logo-lightness.ts

@@ -0,0 +1 @@
+export const LOGO_LIGHTNESS_MIN = 64;

package/{dist/cjs/constants → lib/consts/params}/promo-hue-shift.d.ts

@@ -1,3 +1,3 @@
 export declare const PROMO_HUE_SHIFTS: {
-  [hueRange: number]: number;
+    [hueRange: number]: number;
 };

package/lib/consts/params/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/promo-hue-shift.js → lib/consts/params/promo-hue-shift.ts}

@@ -1,4 +1,4 @@
-export var PROMO_HUE_SHIFTS = {
+export const PROMO_HUE_SHIFTS: { [hueRange: number]: number } = {
   0: -24,
   25: -32,
   44: -35,

package/{dist/cjs/constants → lib/consts/params}/warning-hue-patch.d.ts

@@ -1,3 +1,3 @@
 export declare const WARNING_HUE_PATCH: {
-  [lightness: number]: number;
+    [lightness: number]: number;
 };

package/lib/consts/params/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/constants/warning-hue-patch.js → lib/consts/params/warning-hue-patch.ts}

@@ -1,4 +1,4 @@
-export var WARNING_HUE_PATCH = {
+export const WARNING_HUE_PATCH: { [lightness: number]: number } = {
   96: 0,
   92: 0,
   88: 0,

package/lib/get-colors-base.d.ts

@@ -0,0 +1,11 @@
+import { type ColorFormat } from './utils/convert-color.js';
+import * as DEFAULT_SWATCH from './consts/default-swatch.js';
+import type { TokensBase } from './types/tokens-base.js';
+export type PresetOrCustom<T extends string> = T | (string & Record<never, never>);
+export interface ConfigOptions {
+    brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+    accent: PresetOrCustom<'brand' | 'gray'>;
+    system?: typeof DEFAULT_SWATCH.system;
+    format?: ColorFormat;
+}
+export declare function getColorsBase({ brand, accent, system, format, }: ConfigOptions): TokensBase;

package/lib/get-colors-base.js

@@ -0,0 +1,78 @@
+import { calcOnBrand, getPalette } from './helpers/get-palette.js';
+import { getHover, getPressed } from './helpers/get-interactions.js';
+import { getLogo } from './helpers/get-logo.js';
+import { getPromo } from './helpers/get-promo.js';
+import { convertColorFormat } from './utils/convert-color.js';
+import * as DEFAULT_SWATCH from './consts/default-swatch.js';
+export function getColorsBase(_a) {
+    var brand = _a.brand, accent = _a.accent, _b = _a.system, system = _b === void 0 ? DEFAULT_SWATCH.system : _b, _c = _a.format, format = _c === void 0 ? 'hex/rgba' : _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],
+        });
+    }
+    var result = {
+        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,
+    };
+    return convertColorFormat(result, format);
+}

package/lib/get-colors-base.ts

@@ -0,0 +1,99 @@
+import { calcOnBrand, getPalette } from './helpers/get-palette.js';
+import { getHover, getPressed } from './helpers/get-interactions.js';
+import { getLogo } from './helpers/get-logo.js';
+import { getPromo } from './helpers/get-promo.js';
+import { type ColorFormat, convertColorFormat } from './utils/convert-color.js';
+import { type ColorStructure } from './types/tokens.js';
+import * as DEFAULT_SWATCH from './consts/default-swatch.js';
+import type { TokensBase, ColorPalette } from './types/tokens-base.js';
+
+export type PresetOrCustom<T extends string> = T | (string & Record<never, never>);
+
+export interface ConfigOptions {
+  brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+  accent: PresetOrCustom<'brand' | 'gray'>;
+  system?: typeof DEFAULT_SWATCH.system;
+  format?: ColorFormat;
+}
+
+export function getColorsBase({
+  brand,
+  accent,
+  system = DEFAULT_SWATCH.system,
+  format = 'hex/rgba',
+}: ConfigOptions): TokensBase {
+  const isPresetColor = brand in DEFAULT_SWATCH.brand;
+  let brandColor;
+  if (isPresetColor) {
+    brandColor = DEFAULT_SWATCH.brand[brand as keyof typeof DEFAULT_SWATCH.brand];
+  } else {
+    brandColor = brand;
+  }
+
+  let accentColor;
+  if (accent === 'brand') {
+    accentColor = brandColor;
+  } else if (accent !== 'gray') {
+    accentColor = accent;
+  }
+
+  const brandPalette = getPalette({ color: brandColor }) as ColorPalette;
+  let accentPalette;
+  if (accent === 'brand') {
+    accentPalette = brandPalette;
+  } else if (accent !== 'gray' && accentColor) {
+    accentPalette = getPalette({ color: accentColor }) as ColorPalette;
+  }
+
+  const customizablePalettes: TokensBase['customizable'] = {} as TokensBase['customizable'];
+
+  for (const colorKey in DEFAULT_SWATCH.customizable) {
+    const key = colorKey as keyof TokensBase['customizable'];
+
+    if (key === brand && isPresetColor) {
+      customizablePalettes[key] = brandPalette;
+      continue;
+    }
+
+    customizablePalettes[key] = getPalette({
+      color: DEFAULT_SWATCH.customizable[key],
+    }) as ColorPalette;
+  }
+
+  const result = {
+    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 }) as ColorPalette,
+    error: getPalette({ color: system.error }) as ColorPalette,
+    success: getPalette({ color: system.success }) as ColorPalette,
+    gray: DEFAULT_SWATCH.gray,
+    whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
+    blackAlpha: DEFAULT_SWATCH.blackAlpha,
+    onBrand: calcOnBrand(brandColor),
+    onAccent: accentColor ? calcOnBrand(accentColor) : undefined,
+    customizable: customizablePalettes,
+  } as unknown as ColorStructure;
+
+  return convertColorFormat(result, format) as unknown as TokensBase;
+}