@bettercms-ai/kit 0.1.0

package/src/theme/build/lib/color-fns/blend/multiply.ts

@@ -0,0 +1,18 @@
+import {RGB, RGBA} from '../types'
+
+function multiplyChannel(b: number, s: number) {
+  return b * s
+}
+
+/**
+ * Apply the \`multiply\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
+ * @internal
+ */
+export function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB {
+  return {
+    r: multiplyChannel(b.r / 255, s.r / 255) * 255,
+    g: multiplyChannel(b.g / 255, s.g / 255) * 255,
+    b: multiplyChannel(b.b / 255, s.b / 255) * 255,
+  }
+}

package/src/theme/build/lib/color-fns/blend/screen.ts

@@ -0,0 +1,18 @@
+import {RGB, RGBA} from '../types'
+
+function screenChannel(b: number, s: number) {
+  return b + s - b * s
+}
+
+/**
+ * Apply the \`screen\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
+ * @internal
+ */
+export function screen(b: RGB | RGBA, s: RGB | RGBA): RGB {
+  return {
+    r: screenChannel(b.r / 255, s.r / 255) * 255,
+    g: screenChannel(b.g / 255, s.g / 255) * 255,
+    b: screenChannel(b.b / 255, s.b / 255) * 255,
+  }
+}

package/src/theme/build/lib/color-fns/color-fns.test.ts

@@ -0,0 +1,68 @@
+/** @jest-environment jsdom */
+
+import {multiply, screen} from './blend'
+import {hexToRgb, rgbToHex} from './convert'
+import {parseColor} from './parse'
+import {rgba} from './rgba'
+
+const hues = {
+  gray: {
+    600: '#6e7683',
+  },
+  blue: {
+    500: '#2276fc',
+  },
+}
+
+describe('color-fns', () => {
+  describe('hexToRgb', () => {
+    it('should convert hex to RGB', () => {
+      const hex = '#ff0000'
+      const rgb = hexToRgb(hex)
+
+      expect(rgbToHex(rgb)).toEqual('#ff0000')
+    })
+  })
+
+  describe('screen', () => {
+    it('should blend color using the "screen" mode', () => {
+      const backdrop = hexToRgb(hues.blue[500])
+      const source = hexToRgb(hues.gray[600])
+      const rgb = screen(backdrop, source)
+
+      expect(rgbToHex(rgb)).toEqual('#81b5fe')
+    })
+  })
+
+  describe('multiply', () => {
+    it('should blend color using the "multiply" mode', () => {
+      const backdrop = hexToRgb(hues.blue[500])
+      const source = hexToRgb(hues.gray[600])
+      const rgb = multiply(backdrop, source)
+
+      expect(rgbToHex(rgb)).toEqual('#0f3781')
+    })
+  })
+
+  describe('parseColor', () => {
+    it('should parse a hex to RGB', () => {
+      const rgb = parseColor('#ccc')
+
+      expect(rgbToHex(rgb)).toEqual('#cccccc')
+    })
+
+    it('should parse a HSL to RGB', () => {
+      const rgb1 = parseColor('hsl(210, 20%, 50%)')
+      const rgb2 = parseColor('hsl(210, 10%, 0%)')
+
+      expect(rgbToHex(rgb1)).toEqual('#668099')
+      expect(rgbToHex(rgb2)).toEqual('#000000')
+    })
+  })
+
+  describe('helpers/rgba', () => {
+    it('should convert hex to RGBA string', () => {
+      expect(rgba('#f00', 0.5)).toBe(`rgba(255,0,0,0.5)`)
+    })
+  })
+})

package/src/theme/build/lib/color-fns/contrastRatio.ts

@@ -0,0 +1,31 @@
+import {parseColor} from './parse'
+import {RGB, RGBA} from './types'
+
+/** @internal */
+export function getContrastRatio(bg: string, fg: string): number {
+  const rgb1 = parseColor(bg) // bg: RGB | RGBA, fg: RGB | RGBA
+  const rgb2 = parseColor(fg)
+
+  // convert the two colors from sRGB to linear-light RGB
+  const c1 = rgb_lrgb(rgb1)
+  const c2 = rgb_lrgb(rgb2)
+
+  // compute the relative luminances
+  const l1 = lrgb_luminance(c1)
+  const l2 = lrgb_luminance(c2)
+
+  // compute the contrast ratio
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+}
+
+function rgb_lrgb({r, g, b}: RGB | RGBA): [number, number, number] {
+  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)]
+}
+
+function rgb_lrgb1(v: number) {
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+}
+
+function lrgb_luminance([r, g, b]: [number, number, number]) {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}

package/src/theme/build/lib/color-fns/convert.ts

@@ -0,0 +1,150 @@
+import {clamp, round} from '../utils'
+import {HSL, RGB, RGBA} from './types'
+
+/**
+ * @internal
+ */
+export function hexToRgb(hex: string): RGB {
+  if (hex.length === 4) {
+    const hexR = hex.slice(1, 2)
+    const hexG = hex.slice(2, 3)
+    const hexB = hex.slice(3, 4)
+
+    return {
+      r: parseInt(hexR + hexR, 16),
+      g: parseInt(hexG + hexG, 16),
+      b: parseInt(hexB + hexB, 16),
+    }
+  }
+
+  return {
+    r: parseInt(hex.slice(1, 3), 16),
+    g: parseInt(hex.slice(3, 5), 16),
+    b: parseInt(hex.slice(5, 7), 16),
+  }
+}
+
+/**
+ * @internal
+ */
+export function rgbaToRGBA(rgba: string): RGBA {
+  const values = rgba.replace(/rgba\(|\)/g, '').split(',')
+
+  return {
+    r: parseInt(values[0]),
+    g: parseInt(values[1]),
+    b: parseInt(values[2]),
+    a: parseFloat(values[3]),
+  }
+}
+
+/**
+ * @internal
+ */
+export function rgbToHex(color: RGB | RGBA): string {
+  const r = round(clamp(Math.round(color.r), 0, 255))
+  const g = round(clamp(Math.round(color.g), 0, 255))
+  const b = round(clamp(Math.round(color.b), 0, 255))
+
+  if ('a' in color) {
+    return `rgba(${r},${g},${b},${color.a})`
+  }
+
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+}
+
+/**
+ * @internal
+ * @see https://css-tricks.com/converting-color-spaces-in-javascript/
+ */
+export function rgbToHsl({r, g, b}: RGB): HSL {
+  // Make r, g, and b fractions of 1
+  r /= 255
+  g /= 255
+  b /= 255
+
+  // Find greatest and smallest channel values
+  const cmin = Math.min(r, g, b)
+  const cmax = Math.max(r, g, b)
+  const delta = cmax - cmin
+
+  let h = 0
+  let s = 0
+  let l = 0
+
+  // Calculate hue
+  // No difference
+  if (delta == 0) h = 0
+  // Red is max
+  else if (cmax == r) h = ((g - b) / delta) % 6
+  // Green is max
+  else if (cmax == g) h = (b - r) / delta + 2
+  // Blue is max
+  else h = (r - g) / delta + 4
+
+  h = Math.round(h * 60)
+
+  // Make negative hues positive behind 360°
+  if (h < 0) h += 360
+
+  // Calculate lightness
+  l = (cmax + cmin) / 2
+
+  // Calculate saturation
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+
+  // Multiply l and s by 100
+  s = +(s * 100).toFixed(1)
+  l = +(l * 100).toFixed(1)
+
+  return {h, s, l}
+}
+
+/**
+ * @internal
+ */
+export function hslToRgb(hsl: HSL): RGB {
+  // Must be fractions of 1
+  const s = hsl.s / 100
+  const l = hsl.l / 100
+
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((hsl.h / 60) % 2) - 1))
+  const m = l - c / 2
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  if (0 <= hsl.h && hsl.h < 60) {
+    r = c
+    g = x
+    b = 0
+  } else if (60 <= hsl.h && hsl.h < 120) {
+    r = x
+    g = c
+    b = 0
+  } else if (120 <= hsl.h && hsl.h < 180) {
+    r = 0
+    g = c
+    b = x
+  } else if (180 <= hsl.h && hsl.h < 240) {
+    r = 0
+    g = x
+    b = c
+  } else if (240 <= hsl.h && hsl.h < 300) {
+    r = x
+    g = 0
+    b = c
+  } else if (300 <= hsl.h && hsl.h < 360) {
+    r = c
+    g = 0
+    b = x
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  }
+}

package/src/theme/build/lib/color-fns/index.ts

@@ -0,0 +1,6 @@
+export * from './blend'
+export * from './contrastRatio'
+export * from './convert'
+export * from './parse'
+export * from './rgba'
+export * from './types'

package/src/theme/build/lib/color-fns/parse.ts

@@ -0,0 +1,60 @@
+import {hexToRgb, hslToRgb, rgbaToRGBA} from './convert'
+import {HSL, RGB, RGBA} from './types'
+
+const HEX_CHARS = '0123456789ABCDEFabcdef'
+
+const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i
+
+function isHexChars(str: string) {
+  for (const c of str) {
+    if (HEX_CHARS.indexOf(c) === -1) {
+      return false
+    }
+  }
+
+  return true
+}
+
+function isHex(str: string) {
+  if (str[0] !== '#') return false
+
+  // Accept both #000 and #000000
+  if (!(str.length === 4 || str.length === 7)) return false
+
+  return isHexChars(str.slice(1))
+}
+
+function parseHsl(str: string): HSL {
+  const res = HSL_RE.exec(str)
+
+  if (!res) {
+    throw new Error(`parseHsl: string is not a HSL color: "${str}"`)
+  }
+
+  return {h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5])}
+}
+
+/**
+ * @internal
+ */
+export function parseColor(color: unknown): RGB | RGBA {
+  if (!color) return {r: 0, g: 0, b: 0}
+
+  if (typeof color !== 'string') {
+    throw new Error('parseColor: expected a string')
+  }
+
+  if (isHex(color)) {
+    return hexToRgb(color)
+  }
+
+  if (color.startsWith('hsl(')) {
+    return hslToRgb(parseHsl(color))
+  }
+
+  if (color.startsWith('rgba(')) {
+    return rgbaToRGBA(color)
+  }
+
+  throw new Error(`parseColor: unexpected color format: "${color}"`)
+}

package/src/theme/build/lib/color-fns/rgba.ts

@@ -0,0 +1,10 @@
+import {parseColor} from './parse'
+
+/**
+ * @internal
+ */
+export function rgba(color: unknown, a: number): string {
+  const rgb = parseColor(color)
+
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`
+}

package/src/theme/build/lib/color-fns/types.ts

@@ -0,0 +1,28 @@
+/**
+ * @internal
+ */
+export interface RGB {
+  r: number
+  g: number
+  b: number
+  a?: undefined
+}
+
+/**
+ * @internal
+ */
+export interface RGBA {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+/**
+ * @internal
+ */
+export interface HSL {
+  h: number
+  s: number
+  l: number
+}

package/src/theme/build/lib/isRecord.ts

@@ -0,0 +1,3 @@
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+}

package/src/theme/build/lib/lazy.ts

@@ -0,0 +1,30 @@
+/**
+ * Defines a lazy, self-replacing property on `obj`.
+ *
+ * On first access the `factory` is called and the getter is replaced with the
+ * computed plain value — subsequent reads have zero overhead.
+ *
+ * The property is enumerable (visible in `Object.keys` / spread) in both states.
+ *
+ * @internal
+ */
+export function defineLazyProperty<T extends object, K extends keyof T>(
+  obj: T,
+  key: K,
+  factory: () => T[K],
+): void {
+  Object.defineProperty(obj, key, {
+    get() {
+      const value = factory()
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        writable: false,
+        configurable: false,
+      })
+      return value
+    },
+    enumerable: true,
+    configurable: true,
+  })
+}

package/src/theme/build/lib/utils.ts

@@ -0,0 +1,19 @@
+export function lerp(x: number, y: number, a: number): number {
+  return x * (1 - a) + y * a
+}
+
+export function invlerp(x: number, y: number, a: number): number {
+  return clamp((a - x) / (y - x))
+}
+
+export function clamp(a: number, min = 0, max = 1): number {
+  return Math.min(max, Math.max(min, a))
+}
+
+export function range(x1: number, y1: number, x2: number, y2: number, a: number): number {
+  return lerp(x2, y2, invlerp(x1, y1, a))
+}
+
+export function round(value: number): number {
+  return Math.round(value)
+}

package/src/theme/build/merge.ts

@@ -0,0 +1,26 @@
+import {isRecord} from './lib/isRecord'
+
+export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
+  const _records = records.filter(Boolean) as T[]
+
+  if (_records.length === 0) {
+    return {} as T
+  }
+
+  return _records.reduce(_merge, {} as T)
+}
+
+function _merge<T extends Record<string, any>>(acc: T, source: T): T {
+  for (const key of Object.keys(source)) {
+    const prevValue = acc[key]
+    const nextValue = source[key]
+
+    if (isRecord(prevValue) && isRecord(nextValue)) {
+      ;(acc as any)[key] = merge(prevValue, nextValue)
+    } else {
+      ;(acc as any)[key] = nextValue
+    }
+  }
+
+  return acc
+}

package/src/theme/build/mixThemeColor.test.ts

@@ -0,0 +1,21 @@
+import {mixThemeColor} from './mixThemeColor'
+
+test('mix 1', () => {
+  const result = mixThemeColor('#222222', {
+    black: '#222222',
+    white: '#ffffff',
+    blendMode: 'multiply',
+  })
+
+  expect(result).toBe('#222222')
+})
+
+test('mix 2', () => {
+  const result = mixThemeColor('#ffffff', {
+    black: '#222222',
+    white: '#ffffff',
+    blendMode: 'multiply',
+  })
+
+  expect(result).toBe('#ffffff')
+})

package/src/theme/build/mixThemeColor.ts

@@ -0,0 +1,53 @@
+import {multiply, parseColor, RGB, rgbToHex, screen} from './lib/color-fns'
+import {clamp, range} from './lib/utils'
+
+const RGB_RANGE: [number, number] = [0, 255]
+
+export function mixThemeColor(
+  value: string,
+  options: {
+    bg?: string
+    blendMode: 'multiply' | 'screen'
+    black: string
+    white: string
+  },
+): string {
+  const {blendMode} = options
+
+  const color = parseColor(value)
+  const black = parseColor(options.black)
+  const white = parseColor(options.white)
+
+  const bg = options.bg ? parseColor(options.bg) : blendMode === 'multiply' ? white : black
+
+  const paletteRange: {r: [number, number]; g: [number, number]; b: [number, number]} = {
+    r: [black.r, white.r],
+    g: [black.g, white.g],
+    b: [black.b, white.b],
+  }
+
+  const convertedBgColor: RGB = {
+    r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
+    g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
+    b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE),
+  }
+
+  const convertedColor: RGB = {
+    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
+    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
+    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE),
+  }
+
+  const resultColor =
+    blendMode === 'multiply'
+      ? multiply(convertedBgColor, convertedColor)
+      : screen(convertedBgColor, convertedColor)
+
+  const v: RGB = {
+    r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
+    g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
+    b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b),
+  }
+
+  return rgbToHex(v)
+}