chore: move frontend files
This commit is contained in:
13
frontend/src/helpers/color/colorFromHex.test.ts
Normal file
13
frontend/src/helpers/color/colorFromHex.test.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import {test, expect} from 'vitest'
|
||||
|
||||
import {colorFromHex} from './colorFromHex'
|
||||
|
||||
test('hex', () => {
|
||||
const color = '#ffffff'
|
||||
expect(colorFromHex(color)).toBe('ffffff')
|
||||
})
|
||||
|
||||
test('no hex', () => {
|
||||
const color = 'ffffff'
|
||||
expect(colorFromHex(color)).toBe('ffffff')
|
||||
})
|
13
frontend/src/helpers/color/colorFromHex.ts
Normal file
13
frontend/src/helpers/color/colorFromHex.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Returns the hex color code without the '#' if it has one.
|
||||
*
|
||||
* @param color
|
||||
* @returns {string}
|
||||
*/
|
||||
export function colorFromHex(color: string): string {
|
||||
if (color !== '' && color.substring(0, 1) === '#') {
|
||||
color = color.substring(1, 7)
|
||||
}
|
||||
|
||||
return color
|
||||
}
|
18
frontend/src/helpers/color/colorIsDark.test.ts
Normal file
18
frontend/src/helpers/color/colorIsDark.test.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import {test, expect} from 'vitest'
|
||||
|
||||
import {colorIsDark} from './colorIsDark'
|
||||
|
||||
test('dark color', () => {
|
||||
const color = '#111111'
|
||||
expect(colorIsDark(color)).toBe(false)
|
||||
})
|
||||
|
||||
test('light color', () => {
|
||||
const color = '#DDDDDD'
|
||||
expect(colorIsDark(color)).toBe(true)
|
||||
})
|
||||
|
||||
test('default dark', () => {
|
||||
const color = ''
|
||||
expect(colorIsDark(color)).toBe(true)
|
||||
})
|
26
frontend/src/helpers/color/colorIsDark.ts
Normal file
26
frontend/src/helpers/color/colorIsDark.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export function colorIsDark(color: string | undefined) {
|
||||
if (typeof color === 'undefined') {
|
||||
return true // Defaults to dark
|
||||
}
|
||||
|
||||
if (color === '#' || color === '') {
|
||||
return true // Defaults to dark
|
||||
}
|
||||
|
||||
if (color.substring(0, 1) !== '#') {
|
||||
color = '#' + color
|
||||
}
|
||||
|
||||
const rgb = parseInt(color.substring(1, 7), 16) // convert rrggbb to decimal
|
||||
const r = (rgb >> 16) & 0xff // extract red
|
||||
const g = (rgb >> 8) & 0xff // extract green
|
||||
const b = (rgb >> 0) & 0xff // extract blue
|
||||
|
||||
// this is a quick and dirty implementation of the WCAG 3.0 APCA color contrast formula
|
||||
// see: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#andys-shortcut-to-luminance--lightness
|
||||
const Ys = Math.pow(r/255.0,2.2) * 0.2126 +
|
||||
Math.pow(g/255.0,2.2) * 0.7152 +
|
||||
Math.pow(b/255.0,2.2) * 0.0722
|
||||
|
||||
return Math.pow(Ys,0.678) >= 0.5
|
||||
}
|
20
frontend/src/helpers/color/randomColor.ts
Normal file
20
frontend/src/helpers/color/randomColor.ts
Normal file
@ -0,0 +1,20 @@
|
||||
|
||||
const COLORS = [
|
||||
'#ffbe0b',
|
||||
'#fd8a09',
|
||||
'#fb5607',
|
||||
'#ff006e',
|
||||
'#efbdeb',
|
||||
'#8338ec',
|
||||
'#5f5ff6',
|
||||
'#3a86ff',
|
||||
'#4c91ff',
|
||||
'#0ead69',
|
||||
'#25be8b',
|
||||
'#073b4c',
|
||||
'#373f47',
|
||||
]
|
||||
|
||||
export function getRandomColorHex(): string {
|
||||
return COLORS[Math.floor(Math.random() * COLORS.length)]
|
||||
}
|
Reference in New Issue
Block a user