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

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,
         },
@@ -95,6 +73,8 @@ export function getBaseTokens(_a) {
         whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
         blackAlpha: DEFAULT_SWATCH.blackAlpha,
         onBrand: calcOnBrand(brandColor),
+        // TODO: настроить для gray
+        onAccent: (accent === 'brand' && calcOnBrand(brandColor)) || undefined,
         customizable: customizable,
     };
 }

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];
+}