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

package/dist/esm/get-base-tokens.d.ts

@@ -7,13 +7,20 @@ export interface ColorObject {
 }
 export type ColorValue = string | ColorObject | ColorValue[];
 type ColorStructure = ColorObject | ColorValue[];
+export type ColorFormat = 'hex/rgba' | 'rgb/rgba' | 'oklch' | 'hex-aarrggbb';
 export interface ConfigOptions {
   brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
   accent: PresetOrCustom<(typeof ACCENT_PARAMS)[number]>;
   system?: typeof DEFAULT_SWATCH.system;
+  format?: ColorFormat;
 }
 export declare function getBaseTokens({ brand, accent, system }: ConfigOptions): BaseTokens;
 export declare function convertOklchToHex(obj: ColorStructure): ColorStructure;
 export declare const convertOklchToRgba: (oklchString: string) => string;
 export declare function convertAlphaOklchToRgba(obj: ColorStructure): ColorStructure;
+export declare const convertHexToRgbString: (hexString: string) => string;
+export declare function convertHexValuesToRgb(obj: ColorStructure): ColorStructure;
+export declare const convertToAarrggbb: (colorString: string) => string;
+export declare function convertToAarrggbbRecursive(obj: ColorStructure): ColorStructure;
+export declare function convertColorFormat(obj: ColorStructure, format?: ColorFormat): ColorStructure;
 export {};

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

@@ -133,6 +133,7 @@ export function convertAlphaOklchToRgba(obj) {
   for (var key in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, key)) {
       var value = obj[key];
+      // Конвертируем OKLCH с альфа-каналом (содержит '/') в RGBA
       if (typeof value === 'string' && value.includes('oklch(')) {
         value = convertOklchToRgba(value);
       }
@@ -145,3 +146,112 @@ export function convertAlphaOklchToRgba(obj) {
   }
   return newObj;
 }
+export var convertHexToRgbString = function (hexString) {
+  var _a;
+  var color = converter('rgb')(hexString);
+  if (!color) {
+    return hexString;
+  }
+  var r = Math.round(color.r * 255);
+  var g = Math.round(color.g * 255);
+  var b = Math.round(color.b * 255);
+  var alpha = (_a = color.alpha) !== null && _a !== void 0 ? _a : 1;
+  return alpha === 1
+    ? 'rgb('.concat(r, ', ').concat(g, ', ').concat(b, ')')
+    : 'rgba('.concat(r, ', ').concat(g, ', ').concat(b, ', ').concat(alpha, ')');
+};
+export function convertHexValuesToRgb(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(function (item) {
+      if (typeof item === 'object' && item !== null) {
+        return convertHexValuesToRgb(item);
+      }
+      return item;
+    });
+  }
+  var newObj = {};
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var value = obj[key];
+      // Конвертируем HEX-строки в RGB(A)-строки
+      if (typeof value === 'string' && value.startsWith('#')) {
+        newObj[key] = convertHexToRgbString(value);
+      } else if (typeof value === 'object' && value !== null) {
+        newObj[key] = convertHexValuesToRgb(value);
+      } else {
+        newObj[key] = value;
+      }
+    }
+  }
+  return newObj;
+}
+export var convertToAarrggbb = function (colorString) {
+  var _a;
+  var color = converter('rgb')(colorString);
+  if (!color) {
+    return colorString;
+  }
+  var r = Math.round(color.r * 255);
+  var g = Math.round(color.g * 255);
+  var b = Math.round(color.b * 255);
+  var alpha = Math.round(((_a = color.alpha) !== null && _a !== void 0 ? _a : 1) * 255);
+  var toHex = function (c) {
+    return c.toString(16).padStart(2, '0');
+  };
+  var rgbHex = ''.concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).toUpperCase();
+  if (alpha === 255) {
+    return '#'.concat(rgbHex);
+  }
+  return '#'.concat(toHex(alpha)).concat(rgbHex).toUpperCase();
+};
+export function convertToAarrggbbRecursive(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(function (item) {
+      if (typeof item === 'object' && item !== null) {
+        return convertToAarrggbbRecursive(item);
+      }
+      return item;
+    });
+  }
+  var newObj = {};
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var value = obj[key];
+      // Конвертируем строки цветов (HEX, RGBA) в AARRGGBB
+      if (typeof value === 'string') {
+        newObj[key] = convertToAarrggbb(value); // Измененная логика в этой функции
+      } else if (typeof value === 'object' && value !== null) {
+        newObj[key] = convertToAarrggbbRecursive(value);
+      } else {
+        newObj[key] = value;
+      }
+    }
+  }
+  return newObj;
+}
+export function convertColorFormat(obj, format) {
+  if (format === void 0) {
+    format = 'hex/rgba';
+  }
+  var result = obj;
+  result = convertOklchToHex(obj);
+  result = convertAlphaOklchToRgba(result);
+  switch (format) {
+    case 'oklch':
+      return obj;
+    case 'hex/rgba':
+      return result;
+    case 'rgb/rgba':
+      return convertHexValuesToRgb(result);
+    case 'hex-aarrggbb':
+      return convertToAarrggbbRecursive(result);
+    default:
+      return result;
+  }
+}

package/dist/esm/get-colors.d.ts

@@ -1,4 +1,4 @@
-import { type ConfigOptions } from './get-base-tokens';
+import { type ConfigOptions, type ColorFormat } from './get-base-tokens';
 import { getDefaultTokens } from './get-default-tokens';
 import type { BaseTokens } from './types/base-tokens';
 export interface Themed<T> {
@@ -10,6 +10,7 @@ export type DefaultTokens = DefaultTokensFull['light' | 'dark'];
 export interface SemanticConfigOptions<T> extends ConfigOptions {
   theme?: 'light' | 'dark';
   overrides?: (base: BaseTokens, defaults?: DefaultTokensFull, params?: SemanticConfigOptions<T>) => Themed<T>;
+  format?: ColorFormat;
 }
 export declare function getColors(params: SemanticConfigOptions<DefaultTokens>): DefaultTokens;
 export declare function getColors<T>(

package/dist/esm/get-colors.js

@@ -1,12 +1,16 @@
-import { getBaseTokens } from './get-base-tokens';
+import { getBaseTokens, convertColorFormat } from './get-base-tokens';
 import { getDefaultTokens } from './get-default-tokens';
 var DEFAULT_THEME = 'light';
 export function getColors(params) {
   var theme = params.theme || DEFAULT_THEME;
   var base = getBaseTokens(params);
   var defaults = getDefaultTokens(base);
+  var result;
   if (params.overrides) {
-    return params.overrides(base, defaults, params)[theme];
+    result = params.overrides(base, defaults, params)[theme];
+  } else {
+    result = defaults[theme];
   }
-  return defaults[theme];
+  var finalResult = convertColorFormat(result, params.format);
+  return finalResult;
 }

package/dist/esm/get-default-tokens.d.ts

@@ -4,17 +4,16 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textAccentHeavy: string;
     textAccentHeavyHover: string;
     textAccentHeavyPressed: string;
-    textDisabled: string;
     textErrorHeavy: string;
     textErrorHeavyHover: string;
     textErrorHeavyPressed: string;
     textInvertedAccentHeavy: string;
     textInvertedAccentHeavyHover: string;
     textInvertedAccentHeavyPressed: string;
-    textInvertedDisabled: string;
     textInvertedErrorHeavy: string;
     textInvertedErrorHeavyHover: string;
     textInvertedErrorHeavyPressed: string;
+    textInvertedNeutralFaint: string;
     textInvertedNeutralHeavy: string;
     textInvertedNeutralPale: string;
     textInvertedNeutralSoft: string;
@@ -25,6 +24,7 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textInvertedWarningHeavyHover: string;
     textInvertedWarningHeavyPressed: string;
     textLogo: string;
+    textNeutralFaint: string;
     textNeutralHeavy: string;
     textNeutralPale: string;
     textNeutralSoft: string;
@@ -34,19 +34,19 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textWarningHeavy: string;
     textWarningHeavyHover: string;
     textWarningHeavyPressed: string;
-    textConstDisabledBlack: string;
-    textConstDisabledWhite: string;
+    textConstFaintBlack: string;
+    textConstFaintWhite: string;
     textConstHeavyBlack: string;
     textConstHeavyWhite: string;
     textConstPaleBlack: string;
     textConstPaleWhite: string;
     textConstSoftBlack: string;
     textConstSoftWhite: string;
-    textOnAccentBoldDisabled: string;
+    textOnAccentBoldFaint: string;
     textOnAccentBoldHeavy: string;
     textOnAccentBoldPale: string;
     textOnAccentBoldSoft: string;
-    textOnBrandOriginalDisabled: string;
+    textOnBrandOriginalFaint: string;
     textOnBrandOriginalHeavy: string;
     textOnBrandOriginalPale: string;
     textOnBrandOriginalSoft: string;
@@ -325,17 +325,16 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textAccentHeavy: string;
     textAccentHeavyHover: string;
     textAccentHeavyPressed: string;
-    textDisabled: string;
     textErrorHeavy: string;
     textErrorHeavyHover: string;
     textErrorHeavyPressed: string;
     textInvertedAccentHeavy: string;
     textInvertedAccentHeavyHover: string;
     textInvertedAccentHeavyPressed: string;
-    textInvertedDisabled: string;
     textInvertedErrorHeavy: string;
     textInvertedErrorHeavyHover: string;
     textInvertedErrorHeavyPressed: string;
+    textInvertedNeutralFaint: string;
     textInvertedNeutralHeavy: string;
     textInvertedNeutralPale: string;
     textInvertedNeutralSoft: string;
@@ -346,6 +345,7 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textInvertedWarningHeavyHover: string;
     textInvertedWarningHeavyPressed: string;
     textLogo: string;
+    textNeutralFaint: string;
     textNeutralHeavy: string;
     textNeutralPale: string;
     textNeutralSoft: string;
@@ -355,19 +355,19 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
     textWarningHeavy: string;
     textWarningHeavyHover: string;
     textWarningHeavyPressed: string;
-    textConstDisabledBlack: string;
-    textConstDisabledWhite: string;
+    textConstFaintBlack: string;
+    textConstFaintWhite: string;
     textConstHeavyBlack: string;
     textConstHeavyWhite: string;
     textConstPaleBlack: string;
     textConstPaleWhite: string;
     textConstSoftBlack: string;
     textConstSoftWhite: string;
-    textOnAccentBoldDisabled: string;
+    textOnAccentBoldFaint: string;
     textOnAccentBoldHeavy: string;
     textOnAccentBoldPale: string;
     textOnAccentBoldSoft: string;
-    textOnBrandOriginalDisabled: string;
+    textOnBrandOriginalFaint: string;
     textOnBrandOriginalHeavy: string;
     textOnBrandOriginalPale: string;
     textOnBrandOriginalSoft: string;

package/dist/esm/get-default-tokens.js

@@ -171,7 +171,6 @@ export var getDefaultTokens = function (base) {
         ((_f = (_e = base.accent) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0
           ? void 0
           : _f.dim[48]) || base.blackAlpha[96],
-      textDisabled: base.blackAlpha[32],
       textErrorHeavy: base.customizable.red.vivid[52],
       textErrorHeavyHover: base.customizable.red.vivid[60],
       textErrorHeavyPressed: base.customizable.red.dim[48],
@@ -187,10 +186,10 @@ export var getDefaultTokens = function (base) {
         ((_m = (_l = base.accent) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0
           ? void 0
           : _m.dim[64]) || base.gray[100],
-      textInvertedDisabled: base.whiteAlpha[40],
       textInvertedErrorHeavy: base.customizable.red.vivid[68],
       textInvertedErrorHeavyHover: base.customizable.red.vivid[72],
       textInvertedErrorHeavyPressed: base.customizable.red.dim[64],
+      textInvertedNeutralFaint: base.whiteAlpha[40],
       textInvertedNeutralHeavy: base.whiteAlpha[96],
       textInvertedNeutralPale: base.whiteAlpha[48],
       textInvertedNeutralSoft: base.whiteAlpha[64],
@@ -201,6 +200,7 @@ export var getDefaultTokens = function (base) {
       textInvertedWarningHeavyHover: base.warning.vivid[84],
       textInvertedWarningHeavyPressed: base.warning.dim[72],
       textLogo: base.brand.logo.light,
+      textNeutralFaint: base.blackAlpha[32],
       textNeutralHeavy: base.blackAlpha[88],
       textNeutralPale: base.blackAlpha[40],
       textNeutralSoft: base.blackAlpha[56],
@@ -210,20 +210,19 @@ export var getDefaultTokens = function (base) {
       textWarningHeavy: base.warning.vivid[64],
       textWarningHeavyHover: base.warning.vivid[72],
       textWarningHeavyPressed: base.warning.dim[60],
-      textConstDisabledBlack: base.blackAlpha[32],
-      textConstDisabledWhite: base.whiteAlpha[40],
+      textConstFaintBlack: base.blackAlpha[32],
+      textConstFaintWhite: base.whiteAlpha[40],
       textConstHeavyBlack: base.blackAlpha[88],
       textConstHeavyWhite: base.whiteAlpha[96],
       textConstPaleBlack: base.blackAlpha[40],
       textConstPaleWhite: base.whiteAlpha[48],
       textConstSoftBlack: base.blackAlpha[56],
       textConstSoftWhite: base.whiteAlpha[64],
-      textOnAccentBoldDisabled:
-        ((_o = base.onAccent) === null || _o === void 0 ? void 0 : _o[40]) || base.whiteAlpha[40],
+      textOnAccentBoldFaint: ((_o = base.onAccent) === null || _o === void 0 ? void 0 : _o[40]) || base.whiteAlpha[40],
       textOnAccentBoldHeavy: ((_p = base.onAccent) === null || _p === void 0 ? void 0 : _p[96]) || base.whiteAlpha[96],
       textOnAccentBoldPale: ((_q = base.onAccent) === null || _q === void 0 ? void 0 : _q[48]) || base.whiteAlpha[48],
       textOnAccentBoldSoft: ((_r = base.onAccent) === null || _r === void 0 ? void 0 : _r[64]) || base.whiteAlpha[64],
-      textOnBrandOriginalDisabled: base.onBrand[40],
+      textOnBrandOriginalFaint: base.onBrand[40],
       textOnBrandOriginalHeavy: base.onBrand[96],
       textOnBrandOriginalPale: base.onBrand[48],
       textOnBrandOriginalSoft: base.onBrand[64],
@@ -585,7 +584,6 @@ export var getDefaultTokens = function (base) {
         ((_60 = (_59 = base.accent) === null || _59 === void 0 ? void 0 : _59.palette) === null || _60 === void 0
           ? void 0
           : _60.dim[64]) || base.gray[100],
-      textDisabled: base.whiteAlpha[40],
       textErrorHeavy: base.customizable.red.vivid[68],
       textErrorHeavyHover: base.customizable.red.vivid[72],
       textErrorHeavyPressed: base.customizable.red.dim[64],
@@ -601,10 +599,10 @@ export var getDefaultTokens = function (base) {
         ((_66 = (_65 = base.accent) === null || _65 === void 0 ? void 0 : _65.palette) === null || _66 === void 0
           ? void 0
           : _66.dim[48]) || base.blackAlpha[96],
-      textInvertedDisabled: base.blackAlpha[32],
       textInvertedErrorHeavy: base.customizable.red.vivid[52],
       textInvertedErrorHeavyHover: base.customizable.red.vivid[60],
       textInvertedErrorHeavyPressed: base.customizable.red.dim[48],
+      textInvertedNeutralFaint: base.blackAlpha[32],
       textInvertedNeutralHeavy: base.blackAlpha[88],
       textInvertedNeutralPale: base.blackAlpha[40],
       textInvertedNeutralSoft: base.blackAlpha[56],
@@ -615,6 +613,7 @@ export var getDefaultTokens = function (base) {
       textInvertedWarningHeavyHover: base.warning.vivid[72],
       textInvertedWarningHeavyPressed: base.warning.dim[56],
       textLogo: base.brand.logo.dark,
+      textNeutralFaint: base.whiteAlpha[40],
       textNeutralHeavy: base.whiteAlpha[96],
       textNeutralPale: base.whiteAlpha[48],
       textNeutralSoft: base.whiteAlpha[64],
@@ -624,15 +623,15 @@ export var getDefaultTokens = function (base) {
       textWarningHeavy: base.warning.vivid[80],
       textWarningHeavyHover: base.warning.vivid[84],
       textWarningHeavyPressed: base.warning.dim[72],
-      textConstDisabledBlack: base.blackAlpha[32],
-      textConstDisabledWhite: base.whiteAlpha[40],
+      textConstFaintBlack: base.blackAlpha[32],
+      textConstFaintWhite: base.whiteAlpha[40],
       textConstHeavyBlack: base.blackAlpha[88],
       textConstHeavyWhite: base.whiteAlpha[96],
       textConstPaleBlack: base.blackAlpha[40],
       textConstPaleWhite: base.whiteAlpha[48],
       textConstSoftBlack: base.blackAlpha[56],
       textConstSoftWhite: base.whiteAlpha[64],
-      textOnAccentBoldDisabled:
+      textOnAccentBoldFaint:
         ((_67 = base.onAccent) === null || _67 === void 0 ? void 0 : _67[32]) || base.blackAlpha[32],
       textOnAccentBoldHeavy:
         ((_68 = base.onAccent) === null || _68 === void 0 ? void 0 : _68[96]) || base.blackAlpha[88],
@@ -640,7 +639,7 @@ export var getDefaultTokens = function (base) {
         ((_69 = base.onAccent) === null || _69 === void 0 ? void 0 : _69[40]) || base.blackAlpha[40],
       textOnAccentBoldSoft:
         ((_70 = base.onAccent) === null || _70 === void 0 ? void 0 : _70[56]) || base.blackAlpha[56],
-      textOnBrandOriginalDisabled: base.onBrand[40],
+      textOnBrandOriginalFaint: base.onBrand[40],
       textOnBrandOriginalHeavy: base.onBrand[96],
       textOnBrandOriginalPale: base.onBrand[48],
       textOnBrandOriginalSoft: base.onBrand[64],
@@ -698,9 +697,9 @@ export var getDefaultTokens = function (base) {
       shapeOtherAccentBoldDisabled: base.whiteAlpha[32],
       shapeOtherBacklessHover: base.whiteAlpha[6],
       shapeOtherBacklessPressed: base.whiteAlpha[4],
-      shapeOtherBase: base.gray[32],
-      shapeOtherBaseHover: base.gray[36],
-      shapeOtherBasePressed: base.gray[28],
+      shapeOtherBase: base.whiteAlpha[6],
+      shapeOtherBaseHover: base.whiteAlpha[8],
+      shapeOtherBasePressed: base.whiteAlpha[4],
       shapeOtherDisabled: base.whiteAlpha[6],
       shapeOtherField: base.blackAlpha[16],
       shapeOtherFieldHover: base.blackAlpha[4],

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

@@ -223,9 +223,9 @@ export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData)
   };
 }
 export function calcOnBrand(hex) {
-  var whiteContrast = Number(calcAPCA('#fff', hex));
-  var blackContrast = Number(calcAPCA('#000', hex));
-  if (whiteContrast - 10 <= blackContrast) {
+  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;