npmx.dev/test/unit/app/utils/colors.spec.ts at cd9e05e918152d6e6cc0bed9223f25ef45655850 · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import { describe, expect, it } from 'vitest'
import { lightenHex, oklchToHex, transparentizeOklch } from '~/utils/colors'

describe('lightenHex', () => {
  it('lightens a color by the default factor (0.5)', () => {
    expect(lightenHex('#000000')).toBe('#808080')
  })

  it('lightens a color by a custom factor', () => {
    expect(lightenHex('#000000', 0.25)).toBe('#404040')
    expect(lightenHex('#000000', 0.75)).toBe('#bfbfbf')
    expect(lightenHex('#000000', 1)).toBe('#ffffff')
  })

  it('returns white when factor is 1', () => {
    expect(lightenHex('#ff0000', 1)).toBe('#ffffff')
    expect(lightenHex('#123456', 1)).toBe('#ffffff')
  })

  it('returns the original color when factor is 0', () => {
    expect(lightenHex('#ff0000', 0)).toBe('#ff0000')
    expect(lightenHex('#123456', 0)).toBe('#123456')
  })

  it('lightens each channel independently', () => {
    // #ff0000 at 0.5 -> r: 255+(0)*0.5=255, g: 0+(255)*0.5=128, b: 0+(255)*0.5=128
    expect(lightenHex('#ff0000', 0.5)).toBe('#ff8080')
  })

  it('returns the input unchanged for an invalid hex', () => {
    expect(lightenHex('not-a-color')).toBe('not-a-color')
  })

  it('handles hex without leading #', () => {
    expect(lightenHex('000000', 0.5)).toBe('#808080')
  })
})

describe('oklchToHex', () => {
  it('converts pure black', () => {
    expect(oklchToHex('oklch(0 0 0)')).toMatchInlineSnapshot(`"#000000"`)
  })

  it('converts pure white', () => {
    expect(oklchToHex('oklch(1 0 0)')).toMatchInlineSnapshot(`"#ffffff"`)
  })

  it('converts a saturated red', () => {
    expect(oklchToHex('oklch(0.628 0.258 29.23)')).toMatchInlineSnapshot(`"#ff0000"`)
  })

  it('converts a saturated green', () => {
    expect(oklchToHex('oklch(0.866 0.295 142.5)')).toMatchInlineSnapshot(`"#00ff00"`)
  })

  it('converts a saturated blue', () => {
    expect(oklchToHex('oklch(0.452 0.313 264.05)')).toMatchInlineSnapshot(`"#0000ff"`)
  })

  it('converts the neutral fallback color', () => {
    expect(oklchToHex('oklch(0.633 0 0)')).toMatchInlineSnapshot(`"#8a8a8a"`)
  })

  it('returns null for null input', () => {
    expect(oklchToHex(null)).toBeNull()
  })

  it('returns undefined for undefined input', () => {
    expect(oklchToHex(undefined)).toBeUndefined()
  })

  it('throws on invalid format', () => {
    expect(() => oklchToHex('not-a-color')).toThrow('Invalid OKLCH color format')
  })
})

describe('transparentizeOklch', () => {
  it('makes a color 50% transparent', () => {
    expect(transparentizeOklch('oklch(0.5 0.2 120)', 0.5)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 0.5)"`,
    )
  })

  it('makes a color fully transparent (factor 1)', () => {
    expect(transparentizeOklch('oklch(0.5 0.2 120)', 1)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 0)"`,
    )
  })

  it('keeps a color fully opaque (factor 0)', () => {
    expect(transparentizeOklch('oklch(0.5 0.2 120)', 0)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 1)"`,
    )
  })

  it('reduces existing alpha', () => {
    expect(transparentizeOklch('oklch(0.5 0.2 120 / 0.8)', 0.5)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 0.4)"`,
    )
  })

  it('handles percentage lightness and alpha', () => {
    expect(transparentizeOklch('oklch(50% 0.2 120 / 80%)', 0.5)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 0.4)"`,
    )
  })

  it('clamps factor to [0, 1]', () => {
    expect(transparentizeOklch('oklch(0.5 0.2 120)', 2)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 0)"`,
    )
    expect(transparentizeOklch('oklch(0.5 0.2 120)', -1)).toMatchInlineSnapshot(
      `"oklch(0.5 0.2 120 / 1)"`,
    )
  })

  it('returns fallback for null input', () => {
    expect(transparentizeOklch(null, 0.5)).toBe('oklch(0 0 0 / 0)')
  })

  it('returns fallback for undefined input', () => {
    expect(transparentizeOklch(undefined, 0.5)).toBe('oklch(0 0 0 / 0)')
  })

  it('returns fallback for empty string', () => {
    expect(transparentizeOklch('', 0.5)).toBe('oklch(0 0 0 / 0)')
  })

  it('returns fallback for invalid format', () => {
    expect(transparentizeOklch('not-a-color', 0.5)).toBe('oklch(0 0 0 / 0)')
  })

  it('uses custom fallback', () => {
    expect(transparentizeOklch(null, 0.5, 'oklch(1 0 0 / 0)')).toBe('oklch(1 0 0 / 0)')
  })
})