@skbkontur/colors 1.1.2-75bba.0 → 1.1.2-cbc4b.0

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

@@ -23,6 +23,7 @@ export declare const customizable: {
     blueDeep: string;
     violet: string;
     purple: string;
+    yellow: string;
 };
 export declare const gray: {
     0: string;

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

@@ -26,6 +26,7 @@ exports.customizable = {
     blueDeep: '#366AF3',
     violet: '#844BEC',
     purple: '#B750D1',
+    yellow: '#FAB700',
 };
 exports.gray = {
     0: 'oklch(0% 0 0)',

package/dist/cjs/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/cjs/constants/interaction-settings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PRESSED_DARK_C = exports.PRESSED_DARK_L = exports.PRESSED_LIGHT_C = exports.PRESSED_LIGHT_L = exports.HOVER_DARK_C = exports.HOVER_DARK_L = exports.HOVER_LIGHT_C = exports.HOVER_LIGHT_L = void 0;
+exports.HOVER_LIGHT_L = -4;
+exports.HOVER_LIGHT_C = 0;
+exports.HOVER_DARK_L = +4;
+exports.HOVER_DARK_C = 0;
+exports.PRESSED_LIGHT_L = -8;
+exports.PRESSED_LIGHT_C = -0.03;
+exports.PRESSED_DARK_L = -4;
+exports.PRESSED_DARK_C = -0.03;

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

@@ -40,8 +40,9 @@ var get_palette_1 = require("./helpers/get-palette");
 var get_promo_1 = require("./helpers/get-promo");
 var DEFAULT_SWATCH = __importStar(require("./constants/default-swatch"));
 var get_logo_1 = require("./helpers/get-logo");
+var get_interactions_1 = require("./helpers/get-interactions");
 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 = (0, exports.colorToHex)(brand);
     var brandPalette = (0, get_palette_1.getPalette)({ color: brandColor });
     var accentPalette;
@@ -63,11 +64,11 @@ 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] = (0, get_palette_1.getPalette)({
             // @ts-expect-error
-            color: DEFAULT_SWATCH.brand[colorKey],
+            color: DEFAULT_SWATCH.customizable[colorKey],
         });
     }
     return {
@@ -82,35 +83,21 @@ function getBaseTokens(_a) {
                 light: brand,
                 dark: brand,
             },
-            // todo interactions
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                hover: (0, get_interactions_1.getHover)(brand),
+                pressed: (0, get_interactions_1.getPressed)(brand),
             },
             palette: brandPalette,
         },
         accent: {
             original: {
-                // todo Fix gray
-                light: accent === 'gray' ? accent : '#3d3d3d',
-                dark: accent === 'gray' ? accent : '#3d3d3d',
+                light: accent === 'gray' ? accent : DEFAULT_SWATCH.gray[36],
+                dark: accent === 'gray' ? accent : DEFAULT_SWATCH.gray[96],
             },
-            // todo interactions
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                // TODO обработать hover/pressed для gray
+                hover: (0, get_interactions_1.getHover)(accent),
+                pressed: (0, get_interactions_1.getPressed)(accent),
             },
             palette: accentPalette || undefined,
         },

package/dist/cjs/{get-tokens.d.ts → get-colors.d.ts}

@@ -5,11 +5,12 @@ export interface Themed<T> {
     light: T;
     dark: T;
 }
-export type DefaultTokens = ReturnType<typeof getDefaultTokens>;
+export type DefaultTokens = ReturnType<typeof getDefaultTokens>['light' | 'dark'];
 export interface SemanticConfigOptions<DefaultTokens> extends ConfigOptions {
+    theme?: 'light' | 'dark';
     overrides?: (base: BaseTokens) => Themed<DefaultTokens>;
 }
-export declare function getTokens(params: SemanticConfigOptions<DefaultTokens>): DefaultTokens;
-export declare function getTokens<T>(params: SemanticConfigOptions<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/cjs/get-colors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColors = void 0;
+var get_base_tokens_1 = require("./get-base-tokens");
+var get_default_tokens_1 = require("./get-default-tokens");
+// TODO: оптимизация получения light и dark
+function getColors(params) {
+    var base = (0, get_base_tokens_1.getBaseTokens)(params);
+    if (params.overrides) {
+        return params.overrides(base)[params.theme || 'light'];
+    }
+    return (0, get_default_tokens_1.getDefaultTokens)(base)[params.theme || 'light'];
+}
+exports.getColors = getColors;

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

@@ -628,6 +628,13 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
                 pale: string;
                 faint: string;
             };
+            yellow: {
+                heavy: string;
+                bold: string;
+                soft: string;
+                pale: string;
+                faint: string;
+            };
         };
     };
     dark: {
@@ -1259,14 +1266,7 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
                 pale: string;
                 faint: string;
             };
-            gray: {
-                heavy: string;
-                bold: string;
-                soft: string;
-                pale: string;
-                faint: string;
-            };
-            black: {
+            yellow: {
                 heavy: string;
                 bold: string;
                 soft: string;

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

@@ -632,6 +632,13 @@ var getDefaultTokens = function (base) {
                     pale: base.customizable.purple.vivid[92],
                     faint: base.customizable.purple.vivid[96],
                 },
+                yellow: {
+                    heavy: base.customizable.yellow.vivid[48],
+                    bold: base.customizable.yellow.vivid[68],
+                    soft: base.customizable.yellow.vivid[80],
+                    pale: base.customizable.yellow.vivid[92],
+                    faint: base.customizable.yellow.vivid[96],
+                },
             },
         },
         dark: {
@@ -1263,19 +1270,12 @@ var getDefaultTokens = function (base) {
                     pale: base.customizable.purple.vivid[92],
                     faint: base.customizable.purple.vivid[96],
                 },
-                gray: {
-                    heavy: base.gray[56],
-                    bold: base.gray[72],
-                    soft: base.gray[88],
-                    pale: base.gray[92],
-                    faint: base.gray[96],
-                },
-                black: {
-                    heavy: base.gray[36],
-                    bold: base.gray[52],
-                    soft: base.gray[76],
-                    pale: base.gray[88],
-                    faint: base.gray[92],
+                yellow: {
+                    heavy: base.customizable.yellow.vivid[48],
+                    bold: base.customizable.yellow.vivid[68],
+                    soft: base.customizable.yellow.vivid[80],
+                    pale: base.customizable.yellow.vivid[92],
+                    faint: base.customizable.yellow.vivid[96],
                 },
             },
         },

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/types/base-tokens.d.ts

@@ -33,6 +33,7 @@ export interface BaseTokens {
         blueDeep: ColorPalette;
         violet: ColorPalette;
         purple: ColorPalette;
+        yellow: ColorPalette;
     };
 }
 export interface ColorPalette {

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

@@ -23,6 +23,7 @@ export declare const customizable: {
     blueDeep: string;
     violet: string;
     purple: string;
+    yellow: string;
 };
 export declare const gray: {
     0: string;

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

@@ -23,6 +23,7 @@ export var customizable = {
     blueDeep: '#366AF3',
     violet: '#844BEC',
     purple: '#B750D1',
+    yellow: '#FAB700',
 };
 export var gray = {
     0: 'oklch(0% 0 0)',

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;
@@ -37,11 +38,11 @@ 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 {
@@ -56,35 +57,21 @@ export function getBaseTokens(_a) {
                 light: brand,
                 dark: brand,
             },
-            // todo interactions
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                hover: getHover(brand),
+                pressed: getPressed(brand),
             },
             palette: brandPalette,
         },
         accent: {
             original: {
-                // todo Fix gray
-                light: accent === 'gray' ? accent : '#3d3d3d',
-                dark: accent === 'gray' ? accent : '#3d3d3d',
+                light: accent === 'gray' ? accent : DEFAULT_SWATCH.gray[36],
+                dark: accent === 'gray' ? accent : DEFAULT_SWATCH.gray[96],
             },
-            // todo interactions
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                // TODO обработать hover/pressed для gray
+                hover: getHover(accent),
+                pressed: getPressed(accent),
             },
             palette: accentPalette || undefined,
         },

package/dist/esm/{get-tokens.d.ts → get-colors.d.ts}

@@ -5,11 +5,12 @@ export interface Themed<T> {
     light: T;
     dark: T;
 }
-export type DefaultTokens = ReturnType<typeof getDefaultTokens>;
+export type DefaultTokens = ReturnType<typeof getDefaultTokens>['light' | 'dark'];
 export interface SemanticConfigOptions<DefaultTokens> extends ConfigOptions {
+    theme?: 'light' | 'dark';
     overrides?: (base: BaseTokens) => Themed<DefaultTokens>;
 }
-export declare function getTokens(params: SemanticConfigOptions<DefaultTokens>): DefaultTokens;
-export declare function getTokens<T>(params: SemanticConfigOptions<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,10 @@
+import { getBaseTokens } from './get-base-tokens';
+import { getDefaultTokens } from './get-default-tokens';
+// TODO: оптимизация получения light и dark
+export function getColors(params) {
+    var base = getBaseTokens(params);
+    if (params.overrides) {
+        return params.overrides(base)[params.theme || 'light'];
+    }
+    return getDefaultTokens(base)[params.theme || 'light'];
+}

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

@@ -628,6 +628,13 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
                 pale: string;
                 faint: string;
             };
+            yellow: {
+                heavy: string;
+                bold: string;
+                soft: string;
+                pale: string;
+                faint: string;
+            };
         };
     };
     dark: {
@@ -1259,14 +1266,7 @@ export declare const getDefaultTokens: (base: BaseTokens) => {
                 pale: string;
                 faint: string;
             };
-            gray: {
-                heavy: string;
-                bold: string;
-                soft: string;
-                pale: string;
-                faint: string;
-            };
-            black: {
+            yellow: {
                 heavy: string;
                 bold: string;
                 soft: string;

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

@@ -629,6 +629,13 @@ export var getDefaultTokens = function (base) {
                     pale: base.customizable.purple.vivid[92],
                     faint: base.customizable.purple.vivid[96],
                 },
+                yellow: {
+                    heavy: base.customizable.yellow.vivid[48],
+                    bold: base.customizable.yellow.vivid[68],
+                    soft: base.customizable.yellow.vivid[80],
+                    pale: base.customizable.yellow.vivid[92],
+                    faint: base.customizable.yellow.vivid[96],
+                },
             },
         },
         dark: {
@@ -1260,19 +1267,12 @@ export var getDefaultTokens = function (base) {
                     pale: base.customizable.purple.vivid[92],
                     faint: base.customizable.purple.vivid[96],
                 },
-                gray: {
-                    heavy: base.gray[56],
-                    bold: base.gray[72],
-                    soft: base.gray[88],
-                    pale: base.gray[92],
-                    faint: base.gray[96],
-                },
-                black: {
-                    heavy: base.gray[36],
-                    bold: base.gray[52],
-                    soft: base.gray[76],
-                    pale: base.gray[88],
-                    faint: base.gray[92],
+                yellow: {
+                    heavy: base.customizable.yellow.vivid[48],
+                    bold: base.customizable.yellow.vivid[68],
+                    soft: base.customizable.yellow.vivid[80],
+                    pale: base.customizable.yellow.vivid[92],
+                    faint: base.customizable.yellow.vivid[96],
                 },
             },
         },

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

@@ -0,0 +1,35 @@
+import { converter } from 'culori';
+import { HOVER_LIGHT_L, HOVER_LIGHT_C, HOVER_DARK_L, HOVER_DARK_C, PRESSED_LIGHT_L, PRESSED_LIGHT_C, PRESSED_DARK_L, PRESSED_DARK_C, } from '../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), ")");
+}
+export function getHover(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightHoverColor = applyOklchDelta(oklchColor, HOVER_LIGHT_L, HOVER_LIGHT_C);
+    var darkHoverColor = applyOklchDelta(oklchColor, HOVER_DARK_L, HOVER_DARK_C);
+    return {
+        light: lightHoverColor,
+        dark: darkHoverColor,
+    };
+}
+export function getPressed(hex) {
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(hex);
+    if (!oklchColor) {
+        return { light: hex, dark: hex };
+    }
+    var lightPressedColor = applyOklchDelta(oklchColor, PRESSED_LIGHT_L, PRESSED_LIGHT_C);
+    var darkPressedColor = applyOklchDelta(oklchColor, PRESSED_DARK_L, PRESSED_DARK_C);
+    return {
+        light: lightPressedColor,
+        dark: darkPressedColor,
+    };
+}

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

@@ -33,6 +33,7 @@ export interface BaseTokens {
         blueDeep: ColorPalette;
         violet: ColorPalette;
         purple: ColorPalette;
+        yellow: ColorPalette;
     };
 }
 export interface ColorPalette {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@skbkontur/colors",
-  "version": "1.1.2-75bba.0",
+  "version": "1.1.2-cbc4b.0",
   "author": "Kontur",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "module": "dist/esm/get-tokens.js",
-  "main": "dist/cjs/get-tokens.js",
+  "module": "dist/esm/get-colors.js",
+  "main": "dist/cjs/get-colors.js",
   "license": "UNLICENSED",
   "scripts": {
     "clean": "git clean -fdxqe node_modules",

package/dist/cjs/get-tokens.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTokens = void 0;
-var get_base_tokens_1 = require("./get-base-tokens");
-var get_default_tokens_1 = require("./get-default-tokens");
-function getTokens(params) {
-    var base = (0, get_base_tokens_1.getBaseTokens)(params);
-    if (params.overrides) {
-        return params.overrides(base);
-    }
-    return (0, get_default_tokens_1.getDefaultTokens)(base);
-}
-exports.getTokens = getTokens;

package/dist/esm/get-tokens.js

@@ -1,9 +0,0 @@
-import { getBaseTokens } from './get-base-tokens';
-import { getDefaultTokens } from './get-default-tokens';
-export function getTokens(params) {
-    var base = getBaseTokens(params);
-    if (params.overrides) {
-        return params.overrides(base);
-    }
-    return getDefaultTokens(base);
-}