@skbkontur/colors 2.0.0-alpha.6 → 2.0.1

package/__tests__/create-tokens-from-figma.test.ts

@@ -0,0 +1,162 @@
+import { describe, test, expect } from 'vitest';
+import { slashToCamelCase, transformations, extractTokensFromFigma } from '../scripts/create-tokens-from-figma';
+
+const [
+  { fn: filterFn },
+  { fn: groupByThemeFn },
+  { fn: reorderStatesFn },
+  { fn: applyNamingFn },
+  { fn: mapToBaseTokensFn },
+  { fn: sortKeysFn },
+  { fn: generateCodeFn },
+] = transformations;
+
+describe('extractTokensFromFigma (Integration)', () => {
+  test('should transform raw input to final TypeScript code', () => {
+    const rawInput = {
+      'Text/Primary / Light': 'Gray/20',
+      'Text/Primary / Dark': 'Gray/80',
+      'Shape/Onbrand/Default / Light': 'Brand/Normal/100',
+      'Shape/Onbrand/Default / Dark': 'Brand/Normal/0',
+      'Line/Soft / Light': 'Light/Line/Soft',
+      'Line/Soft / Dark': 'Dark/Line/Soft',
+      'Effect/Drop Shadow / Light': 'rgba(0,0,0,0.1)',
+      'Incomplete/Token / Dark': 'Value',
+    };
+
+    const expectedCode = `import type { TokensBase } from './types/tokens-base.js';
+
+export const getColorsDefaultTokens = (base: TokensBase) => ({
+  light: {
+    textPrimary: base.gray[20],
+    shapeOnBrandDefault: base.brand.original,
+    lineSoft: base.accent?.palette?.dim[76] || base.blackAlpha[48]
+  },
+  dark: {
+    textPrimary: base.gray[80],
+    shapeOnBrandDefault: base.brand.promo,
+    lineSoft: base.accent?.palette?.dim[48] || base.whiteAlpha[48]
+  }
+});
+`;
+    const result = extractTokensFromFigma(rawInput);
+
+    expect(result.trim()).toBe(expectedCode.trim());
+  });
+});
+
+describe('Pipeline Steps', () => {
+  test('should convert path segments to camelCase and preserve custom casing (slashToCamelCase)', () => {
+    expect(slashToCamelCase('Text/Primary')).toBe('textPrimary');
+    expect(slashToCamelCase('Surface/Base/Hover')).toBe('surfaceBaseHover');
+    expect(slashToCamelCase('Text/OnBrand/Primary')).toBe('textOnBrandPrimary');
+    expect(slashToCamelCase('Line Soft')).toBe('lineSoft');
+    expect(slashToCamelCase('red-500')).toBe('red500');
+  });
+
+  test('should exclude Effect tokens and values containing rgba/hex (Filter)', () => {
+    const input = {
+      'Valid/Token / Light': 'Gray/100',
+      'Effect/Shadow / Light': 'rgba(0, 0, 0, 0.1)',
+      'Another/Effect / Dark': '#FFFFFF',
+      'Keep/This / Dark': 'Brand/200',
+    };
+    const expected = {
+      'Valid/Token / Light': 'Gray/100',
+      'Keep/This / Dark': 'Brand/200',
+    };
+    expect(filterFn(input)).toEqual(expected);
+  });
+
+  test('should group light/dark pairs and exclude incomplete tokens (Group by Theme)', () => {
+    const input = {
+      'Surface/Base / Light': 'v1',
+      'Surface/Base / Dark': 'v2',
+      'Incomplete/Token / Light': 'v3',
+    };
+    const expected = {
+      'Surface/Base': { light: 'v1', dark: 'v2' },
+    };
+    expect(groupByThemeFn(input)).toEqual(expected);
+  });
+
+  test('should move state suffixes (Hover, Pressed, Disabled) to the end (Reorder States)', () => {
+    const input = {
+      'Hover/Shape/Other/Low': { light: 'v1', dark: 'v2' },
+      'Shape/Base/Pressed': { light: 'v3', dark: 'v4' },
+      'Simple/Token': { light: 'v5', dark: 'v6' },
+    };
+    const expected = {
+      'Shape/Other/Low/Hover': { light: 'v1', dark: 'v2' },
+      'Shape/Base/Pressed': { light: 'v3', dark: 'v4' },
+      'Simple/Token': { light: 'v5', dark: 'v6' },
+    };
+    expect(reorderStatesFn(input)).toEqual(expected);
+  });
+
+  test('should convert to camelCase and fix "Onbrand" casing (Apply Naming)', () => {
+    const input = {
+      'Text/Onbrand/Primary': { light: 'v1', dark: 'v2' },
+      'Surface/Base/Hover': { light: 'v3', dark: 'v4' },
+    };
+    const expected = {
+      textOnBrandPrimary: { light: 'v1', dark: 'v2' },
+      surfaceBaseHover: { light: 'v3', dark: 'v4' },
+    };
+    expect(applyNamingFn(input)).toEqual(expected);
+  });
+
+  test('should convert raw values to JS expressions and handle special cases (Map to BaseTokens)', () => {
+    const input = {
+      standardToken: { light: 'Gray/100', dark: 'Blue/50' },
+      brandOriginal: { light: 'Brand/Normal/100', dark: 'Brand/Normal/100' },
+      brandPromo: { light: 'Brand/Normal/0', dark: 'Brand/Normal/0' },
+      customizableColor: { light: 'Violet/100', dark: 'Violet/100' },
+
+      onAccentScale: { light: 'OnAccent/40', dark: 'OnAccent/40' },
+    };
+    const expected = {
+      standardToken: { light: 'base.gray[100]', dark: 'base.customizable.blue[50]' },
+      brandOriginal: { light: 'base.brand.original', dark: 'base.brand.original' },
+      brandPromo: { light: 'base.brand.promo', dark: 'base.brand.promo' },
+      customizableColor: { light: 'base.customizable.violet[100]', dark: 'base.customizable.violet[100]' },
+
+      onAccentScale: { light: 'base.onAccent?.[40]', dark: 'base.onAccent?.[40]' },
+    };
+    expect(mapToBaseTokensFn(input)).toEqual(expected);
+  });
+
+  test('should sort keys according to defined SORT_ORDER (Text > Shape > Surface) (Sort Keys)', () => {
+    const input = {
+      surfaceBase: { light: 'v1', dark: 'v1' },
+      shapeFaint: { light: 'v2', dark: 'v2' },
+      textPrimary: { light: 'v3', dark: 'v3' },
+    };
+
+    const resultKeys = (sortKeysFn(input) as any[]).map(([key]) => key);
+
+    expect(resultKeys).toEqual(['textPrimary', 'shapeFaint', 'surfaceBase']);
+  });
+
+  test('should produce the final TS function with correct formatting (Generate Code)', () => {
+    const input = [
+      ['tokenOne', { light: 'l1', dark: 'd1' }],
+      ['tokenTwo', { light: 'l2', dark: 'd2' }],
+    ];
+
+    const expected = `import type { TokensBase } from './types/tokens-base.js';
+
+export const getColorsDefaultTokens = (base: TokensBase) => ({
+  light: {
+    tokenOne: l1,
+    tokenTwo: l2
+  },
+  dark: {
+    tokenOne: d1,
+    tokenTwo: d2
+  }
+});
+`;
+    expect(generateCodeFn(input).trim()).toBe(expected.trim());
+  });
+});

package/__tests__/format-variable.test.ts

@@ -0,0 +1,16 @@
+import { describe, test, expect } from 'vitest';
+import { camelCaseToKebabCase, kebabCaseToCamelCase } from '../lib/utils/format-variable';
+
+describe('format-variable', () => {
+  test('camelCaseToKebabCase should convert correctly', () => {
+    expect(camelCaseToKebabCase('someVariableName')).toBe('some-variable-name');
+    expect(camelCaseToKebabCase('button')).toBe('button');
+    expect(camelCaseToKebabCase('onBrandPrimary')).toBe('on-brand-primary');
+  });
+
+  test('kebabCaseToCamelCase should convert correctly', () => {
+    expect(kebabCaseToCamelCase('some-variable-name')).toBe('someVariableName');
+    expect(kebabCaseToCamelCase('button')).toBe('button');
+    expect(kebabCaseToCamelCase('on-brand-primary')).toBe('onBrandPrimary');
+  });
+});

package/__tests__/get-colors-base.test.ts

@@ -0,0 +1,55 @@
+import { test, expect } from 'vitest';
+import { getColorsBase } from '../lib/get-colors-base';
+
+test('should return full TokensBase structure by default', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand' });
+  expect(res.brand.original).toBeDefined();
+  expect(res.brand.palette).toBeDefined();
+});
+
+test('should use preset color when brand name is provided', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand' });
+  expect(res.brand.original.toLowerCase()).toBe('#2291ff');
+});
+
+test('should use custom hex when brand is a hex string', () => {
+  const res = getColorsBase({ brand: '#FF5500', accent: 'brand' });
+  expect(res.brand.original).toBe('#FF5500');
+});
+
+test('should link accent to brand when accent is "brand"', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand' });
+  expect(res.accent?.original.light).toBe(res.brand.original);
+});
+
+test('should not generate accent palette when accent is "gray"', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'gray' });
+  expect(res.accent).toBeUndefined();
+});
+
+test('should apply custom system colors to palettes', () => {
+  const system = { warning: '#FF00FF', error: '#00FFFF', success: '#FFFF00' };
+  const res = getColorsBase({ brand: 'blue', accent: 'brand', system });
+  expect(Object.values(res.warning.normal)[0]).toMatch(/^#[0-9a-f]{6}$/i);
+});
+
+test('should return oklch values when format is "oklch"', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand', format: 'oklch' });
+  expect(res.brand.promo).toContain('oklch(');
+});
+
+test('should return hex values when format is "hex-aarrggbb"', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand', format: 'hex-aarrggbb' });
+  expect(res.brand.promo).toMatch(/^#[0-9A-F]{6,8}$/);
+});
+
+test('should generate onBrand tokens', () => {
+  const res = getColorsBase({ brand: '#ffffff', accent: 'brand' });
+  expect(res.onBrand[100]).toContain('0, 0, 0');
+});
+
+test('should provide all customizable palettes', () => {
+  const res = getColorsBase({ brand: 'blue', accent: 'brand' });
+  expect(res.customizable.red).toBeDefined();
+  expect(res.customizable.green).toBeDefined();
+});

package/__tests__/get-colors.test.ts

@@ -0,0 +1,75 @@
+import { test, expect } from 'vitest';
+import { getColors } from '../lib/get-colors';
+
+test('should return both themes with HEX values by default', () => {
+  const res = getColors({ brand: 'blue', accent: 'brand', theme: 'light' });
+  const firstToken = Object.values(res)[0] as string;
+  expect(firstToken).toMatch(/^#[0-9a-f]{6}$/i);
+});
+
+test('should return flat object when theme is "light"', () => {
+  const res = getColors({ brand: 'blue', accent: 'brand', theme: 'light' });
+  const firstToken = Object.values(res)[0] as string;
+  expect(firstToken).toMatch(/^#[0-9a-f]{6}$/i);
+});
+
+test('should use custom hex for brand tokens', () => {
+  const res = getColors({ brand: '#FF5500', accent: 'brand', theme: 'light' });
+  const firstToken = Object.values(res)[0] as string;
+  expect(firstToken).toMatch(/^#[0-9a-f]{6}$/i);
+});
+
+test('should apply custom system palette', () => {
+  const system = { warning: '#000000', error: '#000000', success: '#000000' };
+  const res = getColors({ brand: 'blue', accent: 'brand', system, theme: 'light' });
+  expect(res).toBeDefined();
+});
+
+test('should output OKLCH strings when format is "oklch"', () => {
+  const res = getColors({ brand: 'blue', accent: 'brand', theme: 'light', format: 'oklch' });
+  const firstToken = Object.values(res)[0] as string;
+  expect(firstToken).toContain('oklch(');
+});
+
+test('should output ARGB hex for "hex-aarrggbb" format', () => {
+  const res = getColors({ brand: 'blue', accent: 'brand', theme: 'light', format: 'hex-aarrggbb' });
+  const firstToken = Object.values(res)[0] as string;
+  expect(firstToken).toMatch(/^#[0-9A-F]{6,8}$/);
+});
+
+test('should merge custom tokens via overrides', () => {
+  const res = getColors({
+    brand: 'blue',
+    accent: 'brand',
+    theme: 'light',
+    overrides: (base) => ({ light: { customBrand: base?.gray[20] } } as any),
+  }) as any;
+  expect(res.customBrand).toBe('#161616');
+});
+
+test('should apply format to override tokens', () => {
+  const res = getColors({
+    brand: 'blue',
+    accent: 'brand',
+    theme: 'light',
+    format: 'oklch',
+    overrides: () => ({
+      light: { testToken: '#ffffff' },
+      dark: { testToken: '#000000' },
+    }),
+  }) as any;
+  expect(res.testToken).toContain('oklch(');
+});
+
+test('should process themed values in overrides', () => {
+  const res = getColors({
+    brand: 'blue',
+    accent: 'brand',
+    theme: 'light',
+    overrides: () => ({
+      light: { testToken: '#ffffff' },
+      dark: { testToken: '#000000' },
+    }),
+  }) as any;
+  expect(res.testToken).toBe('#ffffff');
+});

package/__tests__/get-interactions.test.ts

@@ -0,0 +1,37 @@
+import { describe, test, expect } from 'vitest';
+import { getHover, getPressed } from '../lib/helpers/get-interactions';
+
+describe('getHover', () => {
+  test('should return oklch strings for valid hex', () => {
+    const result = getHover('#0070FF');
+
+    expect(result.light).toContain('oklch(');
+    expect(result.dark).toContain('oklch(');
+  });
+
+  test('should return original hex for invalid input', () => {
+    const invalid = 'invalid-color';
+    const result = getHover(invalid);
+
+    expect(result.light).toBe(invalid);
+    expect(result.dark).toBe(invalid);
+  });
+});
+
+describe('getPressed', () => {
+  test('should return oklch strings for valid hex', () => {
+    const result = getPressed('#0070FF');
+
+    expect(result.light).toContain('oklch(');
+    expect(result.dark).toContain('oklch(');
+  });
+
+  test('should apply different deltas than hover', () => {
+    const hex = '#0070FF';
+    const hover = getHover(hex);
+    const pressed = getPressed(hex);
+
+    expect(pressed.light).not.toBe(hover.light);
+    expect(pressed.dark).not.toBe(hover.dark);
+  });
+});

package/__tests__/get-logo.test.ts

@@ -0,0 +1,24 @@
+import { describe, test, expect } from 'vitest';
+import { getLogo } from '../lib/helpers/get-logo';
+import { LOGO_LIGHTNESS_MIN } from '../lib/consts/params/logo-lightness';
+
+describe('getLogo', () => {
+  test('should return hex for light and oklch for dark theme', () => {
+    const hex = '#0070FF';
+    const result = getLogo(hex);
+    expect(result.light).toBe(hex);
+    expect(result.dark).toContain('oklch(');
+  });
+
+  test('should clamp lightness to LOGO_LIGHTNESS_MIN', () => {
+    const result = getLogo('#000000');
+    const expectedL = (LOGO_LIGHTNESS_MIN / 100).toFixed(3);
+    expect(result.dark).toContain(`oklch(${expectedL}`);
+  });
+
+  test('should return fallback for invalid input', () => {
+    const result = getLogo('invalid');
+    expect(result.light).toBe('invalid');
+    expect(result.dark).toBe(`oklch(${LOGO_LIGHTNESS_MIN}% 0 0)`);
+  });
+});

package/__tests__/get-palette.test.ts

@@ -0,0 +1,43 @@
+import { describe, test, expect } from 'vitest';
+import { getPalette } from '../lib/helpers/get-palette';
+
+describe('getPalette', () => {
+  const testColor = '#2291FF';
+
+  test('should return a full palette object with correct scales', () => {
+    const palette = getPalette({ color: testColor });
+
+    expect(palette).toHaveProperty('vivid');
+    expect(palette).toHaveProperty('normal');
+    expect(palette).toHaveProperty('dim');
+
+    expect(palette.normal[52]).toMatch(/^oklch\(/);
+  });
+
+  test('should generate different colors for "default" and "warning" types', () => {
+    const defaultPalette = getPalette({ color: testColor, type: 'default' });
+    const warningPalette = getPalette({ color: testColor, type: 'warning' });
+
+    expect(defaultPalette.normal[64]).not.toBe(warningPalette.normal[64]);
+  });
+
+  test('should respect custom settings if provided', () => {
+    const customSettings = {
+      promoHueShifts: { 0: 100 },
+    };
+
+    const palette = getPalette({
+      color: '#FF0000',
+      settings: customSettings as any,
+    });
+
+    expect(palette.vivid[52]).toBeDefined();
+  });
+
+  test('should handle edge cases with lightness and chroma clamping', () => {
+    const palette = getPalette({ color: '#FFFFFF' });
+
+    expect(palette.vivid[20]).toContain('oklch(');
+    expect(palette.dim[96]).toContain('oklch(');
+  });
+});

package/__tests__/get-promo.test.ts

@@ -0,0 +1,32 @@
+import { describe, test, expect } from 'vitest';
+import { getPromo, getPromoHueShift } from '../lib/helpers/get-promo';
+import { PROMO_HUE_SHIFTS } from '../lib/consts/params/promo-hue-shift';
+
+describe('getPromo', () => {
+  test('should transform color to promo hex', () => {
+    const result = getPromo('#0070FF');
+
+    expect(result).toMatch(/^#[0-9a-f]{6}$/i);
+    expect(result).not.toBe('#0070ff');
+  });
+
+  test('should throw on invalid input', () => {
+    expect(() => getPromo('invalid')).toThrow('Invalid color string: invalid');
+  });
+});
+
+describe('getPromoHueShift', () => {
+  test('should find correct shift for hue ranges', () => {
+    const shifts = { 0: -10, 100: 20, 200: 30 };
+
+    expect(getPromoHueShift(50, shifts)).toBe(-10);
+    expect(getPromoHueShift(150, shifts)).toBe(20);
+    expect(getPromoHueShift(250, shifts)).toBe(30);
+    expect(getPromoHueShift(350, shifts)).toBe(30);
+  });
+
+  test('should use default shifts from constants', () => {
+    expect(getPromoHueShift(0, PROMO_HUE_SHIFTS)).toBe(-24);
+    expect(getPromoHueShift(319, PROMO_HUE_SHIFTS)).toBe(-24);
+  });
+});