@skbkontur/colors 1.1.2-75bba.0 → 1.1.2-b2742.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,40 @@
+"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-palette.d.ts

@@ -22,6 +22,7 @@ export declare function calculateBaseHueAndCorrectionRange(inputColorString: str
 } | null;
 export declare function calcOnBrand(hex: string): {
     4: string;
+    6: string;
     8: string;
     12: string;
     16: string;
@@ -45,5 +46,6 @@ export declare function calcOnBrand(hex: string): {
     88: string;
     92: string;
     96: string;
+    100: string;
 };
 export {};

package/dist/cjs/types/base-tokens.d.ts

@@ -1,8 +1,8 @@
 export interface BaseTokens {
-    brandLogo: ThemedValue;
-    brandPromo: ThemedValue;
     brand: {
-        original: ThemedValue;
+        logo: ThemedValue;
+        original: string;
+        promo: string;
         interactions: {
             hover: ThemedValue;
             pressed: ThemedValue;
@@ -33,6 +33,7 @@ export interface BaseTokens {
         blueDeep: ColorPalette;
         violet: ColorPalette;
         purple: ColorPalette;
+        yellow: ColorPalette;
     };
 }
 export interface ColorPalette {
@@ -41,8 +42,8 @@ export interface ColorPalette {
     dim: ColorWithScale<ChromaScale>;
 }
 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 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96;
-type GrayScale = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 98 | 100;
+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;
+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;
 };

package/dist/esm/constants/default-swatch.d.ts

@@ -23,12 +23,10 @@ export declare const customizable: {
     blueDeep: string;
     violet: string;
     purple: string;
+    yellow: string;
 };
 export declare const gray: {
     0: string;
-    4: string;
-    8: string;
-    12: string;
     16: string;
     20: string;
     24: string;
@@ -55,6 +53,7 @@ export declare const gray: {
 };
 export declare const whiteAlpha: {
     4: string;
+    6: string;
     8: string;
     12: string;
     16: string;
@@ -78,9 +77,11 @@ export declare const whiteAlpha: {
     88: string;
     92: string;
     96: string;
+    100: string;
 };
 export declare const blackAlpha: {
     4: string;
+    6: string;
     8: string;
     12: string;
     16: string;
@@ -104,4 +105,5 @@ export declare const blackAlpha: {
     88: string;
     92: string;
     96: string;
+    100: string;
 };

package/dist/esm/constants/default-swatch.js

@@ -23,12 +23,10 @@ export var customizable = {
     blueDeep: '#366AF3',
     violet: '#844BEC',
     purple: '#B750D1',
+    yellow: '#FAB700',
 };
 export var gray = {
     0: 'oklch(0% 0 0)',
-    4: 'oklch(4% 0 0)',
-    8: 'oklch(8% 0 0)',
-    12: 'oklch(12% 0 0)',
     16: 'oklch(16% 0 0)',
     20: 'oklch(20% 0 0)',
     24: 'oklch(24% 0 0)',
@@ -55,6 +53,7 @@ export var gray = {
 };
 export var whiteAlpha = {
     4: 'oklch(100% 0 0 / 0.04)',
+    6: 'oklch(100% 0 0 / 0.06)',
     8: 'oklch(100% 0 0 / 0.08)',
     12: 'oklch(100% 0 0 / 0.12)',
     16: 'oklch(100% 0 0 / 0.16)',
@@ -78,9 +77,11 @@ export var whiteAlpha = {
     88: 'oklch(100% 0 0 / 0.88)',
     92: 'oklch(100% 0 0 / 0.92)',
     96: 'oklch(100% 0 0 / 0.96)',
+    100: 'oklch(100% 0 0 / 1)',
 };
 export var blackAlpha = {
     4: 'oklch(0% 0 0 / 0.04)',
+    6: 'oklch(0% 0 0 / 0.06)',
     8: 'oklch(0% 0 0 / 0.08)',
     12: 'oklch(0% 0 0 / 0.12)',
     16: 'oklch(0% 0 0 / 0.16)',
@@ -104,4 +105,5 @@ export var blackAlpha = {
     88: 'oklch(0% 0 0 / 0.88)',
     92: 'oklch(0% 0 0 / 0.92)',
     96: 'oklch(0% 0 0 / 0.96)',
+    100: 'oklch(0% 0 0 / 1)',
 };

package/dist/esm/constants/interaction-settings.d.ts

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

package/dist/esm/constants/interaction-settings.js

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

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

@@ -14,8 +14,9 @@ import { calcOnBrand, getPalette } from './helpers/get-palette';
 import { getPromo } from './helpers/get-promo';
 import * as DEFAULT_SWATCH from './constants/default-swatch';
 import { getLogo } from './helpers/get-logo';
+import { getHover, getPressed } from './helpers/get-interactions';
 export function getBaseTokens(_a) {
-    var brand = _a.brand, accent = _a.accent, _b = _a.system, system = _b === void 0 ? DEFAULT_SWATCH.system : _b;
+    var brand = _a.brand, _b = _a.accent, accent = _b === void 0 ? 'gray' : _b, _c = _a.system, system = _c === void 0 ? DEFAULT_SWATCH.system : _c;
     var brandColor = colorToHex(brand);
     var brandPalette = getPalette({ color: brandColor });
     var accentPalette;
@@ -24,10 +25,8 @@ export function getBaseTokens(_a) {
             accentPalette = brandPalette;
             break;
         case 'gray':
-            accentPalette = undefined;
-            break;
         default:
-            accentPalette = getPalette({ color: accent });
+            accentPalette = undefined;
     }
     var warningPalette = getPalette({
         color: system.warning,
@@ -37,54 +36,33 @@ export function getBaseTokens(_a) {
         color: system.success,
     });
     var customizable = {};
-    for (var colorKey in DEFAULT_SWATCH.brand) {
+    for (var colorKey in DEFAULT_SWATCH.customizable) {
         // @ts-expect-error
         customizable[colorKey] = getPalette({
             // @ts-expect-error
-            color: DEFAULT_SWATCH.brand[colorKey],
+            color: DEFAULT_SWATCH.customizable[colorKey],
         });
     }
     return {
-        brandLogo: getLogo(brand),
-        brandPromo: {
-            light: getPromo(brandColor),
-            dark: 'blue',
-        },
         brand: {
-            // todo Brand
-            original: {
-                light: brand,
-                dark: brand,
-            },
-            // todo interactions
+            logo: getLogo(brandColor),
+            promo: getPromo(brandColor),
+            original: brandColor,
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                hover: getHover(brandColor),
+                pressed: getPressed(brandColor),
             },
             palette: brandPalette,
         },
         accent: {
             original: {
-                // todo Fix gray
-                light: accent === 'gray' ? accent : '#3d3d3d',
-                dark: accent === 'gray' ? accent : '#3d3d3d',
+                light: accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36],
+                dark: accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[96],
             },
-            // todo interactions
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                // TODO обработать hover/pressed для gray
+                hover: getHover(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
+                pressed: getPressed(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
             },
             palette: accentPalette || undefined,
         },

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

@@ -0,0 +1,17 @@
+import { type ConfigOptions } from './get-base-tokens';
+import { getDefaultTokens } from './get-default-tokens';
+import type { BaseTokens } from './types/base-tokens';
+export interface Themed<T> {
+    light: T;
+    dark: T;
+}
+export type DefaultTokensFull = ReturnType<typeof getDefaultTokens>;
+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>;
+}
+export declare function getColors(params: SemanticConfigOptions<DefaultTokens>): DefaultTokens;
+export declare function getColors<T>(params: SemanticConfigOptions<T> & {
+    overrides: (base: BaseTokens) => Themed<T>;
+}): Themed<T>;

package/dist/esm/get-colors.js

@@ -0,0 +1,12 @@
+import { getBaseTokens } 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);
+    if (params.overrides) {
+        return params.overrides(base, defaults, params)[theme];
+    }
+    return defaults[theme];
+}