css-magic-gradient 1.2.0 — гармонии, палитры, WCAG по всей длине и canvas-экспорт

import { createComplementaryGradient } from 'css-magic-gradient';

// Было: HSL-интерполяция, 5 шагов
// Стало: oklch по умолчанию, любое пространство на выбор
createComplementaryGradient('#3498db', { steps: 7, interpolationSpace: 'oklch' });
createComplementaryGradient('#3498db', { steps: 7, interpolationSpace: 'oklab' });

// smoothness: 3 — только сами три цвета гармонии
createTriadicGradient('#e74c3c', { smoothness: 3 });

// smoothness: 9 — 9 точек через createColorScale, плавный переход
createTriadicGradient('#e74c3c', { smoothness: 9, interpolationSpace: 'oklch' });

import { createTetradicGradient } from 'css-magic-gradient';

createTetradicGradient('#9b59b6');                           // линейный по умолчанию
createTetradicGradient('#9b59b6', { type: 'conic', steps: 24 });   // конический
createTetradicGradient('#9b59b6', { type: 'radial', interpolationSpace: 'oklab' });

import { createSplitComplementaryGradient } from 'css-magic-gradient';

createSplitComplementaryGradient('#3498db');
createSplitComplementaryGradient('#3498db', { steps: 7, interpolationSpace: 'oklch' });

import { createTintGradient, createShadeGradient, createToneGradient } from 'css-magic-gradient';

// База → белый (тинты через Oklab)
createTintGradient('#3498db', 7, { direction: 'to right' });

// База → чёрный
createShadeGradient('#e74c3c', 5);

// База → серый, можно указать свой оттенок серого
createToneGradient('#9b59b6', 7, { gray: '#707070' });

import { createConicGradient } from 'css-magic-gradient';

// Четыре тетрадных цвета, равномерно вокруг круга
createConicGradient('#e74c3c', { harmonyType: 'triadic', steps: 24 });
createConicGradient('#3498db', { harmonyType: 'tetradic', interpolationSpace: 'oklch' });

// Красный → зелёный → синий → обратно к красному
createConicGradient('#000', {
  colorScale: ['#ff0000', '#00ff00', '#0000ff'],
  steps: 36,
  interpolationSpace: 'oklch',
});

createRadialGradient('#3498db', {
  harmonyType: 'triadic',
  interpolationSpace: 'oklch',
  shape: 'circle',
});

import { createRadialGradientLayers, createRadialGradient } from 'css-magic-gradient';

const layers = createRadialGradientLayers('#3498db', {
  count: 4,
  harmonyType: 'triadic',
  minSizePercent: 20,
  maxSizePercent: 100,
});

// layers — готовый массив RadialGradientLayer[]
const gradient = createRadialGradient('#3498db', { layers });

import {
  forestGradient,    // Светло-зелёный → глубокий зелёный леса
  goldenHourGradient, // Золото → розовый → тёплый оранжевый
  neonGradient,      // Электрический зелёный → малиновый → яркий голубой
  nordicGradient,    // Ледяной синий → серый → почти белый
  pastelGradient,    // Лаванда → нежно-розовый → бледная мята
  deepSpaceGradient, // Почти-чёрный синий → тёмно-фиолетовый → фиолетовый акцент
} from 'css-magic-gradient';

import { gradientContrastRatio } from 'css-magic-gradient';

// Два цвета — сигнатура прежняя, логика внутри изменилась
gradientContrastRatio('#ffffff', '#1a1a2e', '#e94560');

// Массив стопов — новая форма
gradientContrastRatio('#ffffff', ['#1a1a2e', '#c0357a', '#e94560']);

import { gradientWcagLevel } from 'css-magic-gradient';

const report = gradientWcagLevel('#ffffff', '#1a1a2e', '#e94560');
// → {
//     level: 'AAA',
//     minContrast: 8.4,
//     problematicStops: []
//   }

// Градиент с провалом в середине:
const report2 = gradientWcagLevel('#ffffff', ['#ffffff', '#aaaaaa', '#3498db']);
// → {
//     level: 'fail',
//     minContrast: 1.07,
//     problematicStops: [0, 0.09, 0.18, 0.27, 0.36]
//   }

// Как раньше — два цвета, возвращает '#000000' или '#ffffff'
bestGradientTextColor('#1a1a2e', '#e94560');

// Новый режим — массив стопов
bestGradientTextColor(['#1a1a2e', '#c0357a', '#e94560']);

// Подробный результат
const detail = bestGradientTextColor(['#1a1a2e', '#e94560'], { detailed: true });
// → {
//     recommended: '#ffffff',
//     black: { contrast: 1.8, wcag: 'fail' },
//     white: { contrast: 9.3, wcag: 'AAA' },
//   }

createAccessibleGradient('#3498db', '#ffffff', {
  targetLevel: 'AAA',
  adjustmentStrategy: 'both', // 'lightness' | 'saturation' | 'both'
});

import { extractGradientVariables, resolveGradientVariables } from 'css-magic-gradient';

const gradient = 'linear-gradient(var(--start, #ff0000), var(--end))';

// Извлечь имена всех кастомных свойств
extractGradientVariables(gradient);
// → ['--start', '--end']

// Подставить реальные значения
resolveGradientVariables(gradient, { '--end': '#0000ff' });
// → 'linear-gradient(#ff0000, #0000ff)'
// Если переменная есть в строке с fallback — используется fallback.
// Если нет ни переменной в словаре, ни fallback — var() сохраняется как есть.

import { gradientToCanvasGradient } from 'css-magic-gradient';

const gradient = gradientToCanvasGradient(
  {
    type: 'linear',
    stops: [
      { color: '#ff9a3c', offset: 0 },
      { color: '#c0357a', offset: 1 },
    ],
  },
  ctx,
);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Для вставки в <img src> или CSS background
const url = gradientToDataURL(
  { type: 'linear', stops: [{ color: '#ff9a3c', offset: 0 }, { color: '#c0357a', offset: 1 }] },
  800, 400,
);
// → 'data:image/png;base64,…'

// Vue
import {
  useTetradicGradient,
  useSplitComplementaryGradient,
  useTintGradient,
  useShadeGradient,
  useToneGradient,
  useAccessibleGradient,
  useComplementaryGradient,
  useTriadicGradient,
  useAnalogousGradient,
} from 'css-magic-gradient';

// React — то же самое из css-magic-gradient/react

// React
const [bgColor, setBgColor] = useState('#3498db');
const gradient = useAccessibleGradient(bgColor, '#ffffff', { targetLevel: 'AAA' });
// При каждом изменении bgColor — градиент пересчитывается и уже гарантированно проходит AAA

<!-- Vue -->
<script setup>
const color = ref('#3498db');
const gradient = useAccessibleGradient(color, ref('#ffffff'), { targetLevel: 'AA' });
</script>