@skbkontur/colors 1.1.2-75bba.0 → 1.1.2-97dd9.0

package/dist/cjs/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/cjs/constants/default-swatch.js

@@ -26,12 +26,10 @@ exports.customizable = {
     blueDeep: '#366AF3',
     violet: '#844BEC',
     purple: '#B750D1',
+    yellow: '#FAB700',
 };
 exports.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)',
@@ -58,6 +56,7 @@ exports.gray = {
 };
 exports.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)',
@@ -81,9 +80,11 @@ exports.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)',
 };
 exports.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)',
@@ -107,4 +108,5 @@ exports.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/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;
@@ -50,10 +51,8 @@ function getBaseTokens(_a) {
             accentPalette = brandPalette;
             break;
         case 'gray':
-            accentPalette = undefined;
-            break;
         default:
-            accentPalette = (0, get_palette_1.getPalette)({ color: accent });
+            accentPalette = undefined;
     }
     var warningPalette = (0, get_palette_1.getPalette)({
         color: system.warning,
@@ -63,54 +62,33 @@ 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 {
-        brandLogo: (0, get_logo_1.getLogo)(brand),
-        brandPromo: {
-            light: (0, get_promo_1.getPromo)(brandColor),
-            dark: 'blue',
-        },
         brand: {
-            // todo Brand
-            original: {
-                light: brand,
-                dark: brand,
-            },
-            // todo interactions
+            logo: (0, get_logo_1.getLogo)(brandColor),
+            promo: (0, get_promo_1.getPromo)(brandColor),
+            original: brandColor,
             interactions: {
-                hover: {
-                    light: '',
-                    dark: '',
-                },
-                pressed: {
-                    light: '',
-                    dark: '',
-                },
+                hover: (0, get_interactions_1.getHover)(brandColor),
+                pressed: (0, get_interactions_1.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: (0, get_interactions_1.getHover)(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
+                pressed: (0, get_interactions_1.getPressed)(accent === 'brand' ? brandColor : DEFAULT_SWATCH.gray[36]),
             },
             palette: accentPalette || undefined,
         },
@@ -121,6 +99,8 @@ function getBaseTokens(_a) {
         whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
         blackAlpha: DEFAULT_SWATCH.blackAlpha,
         onBrand: (0, get_palette_1.calcOnBrand)(brandColor),
+        // TODO: настроить для gray
+        onAccent: (accent === 'brand' && (0, get_palette_1.calcOnBrand)(brandColor)) || undefined,
         customizable: customizable,
     };
 }

package/dist/cjs/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/cjs/get-colors.js

@@ -0,0 +1,16 @@
+"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");
+var DEFAULT_THEME = 'light';
+function getColors(params) {
+    var theme = params.theme || DEFAULT_THEME;
+    var base = (0, get_base_tokens_1.getBaseTokens)(params);
+    var defaults = (0, get_default_tokens_1.getDefaultTokens)(base);
+    if (params.overrides) {
+        return params.overrides(base, defaults, params)[theme];
+    }
+    return defaults[theme];
+}
+exports.getColors = getColors;