forked from crowetic/commerce
Utilities to handle Colors
This commit is contained in:
parent
26535b7c7f
commit
707f814244
@ -10,15 +10,15 @@ const ArrowLeft = ({ ...props }) => {
|
|||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M19 12H5"
|
d="M19 12H5"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M12 19L5 12L12 5"
|
d="M12 19L5 12L12 5"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -10,9 +10,9 @@ const Check = ({ ...props }) => {
|
|||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M20 6L9 17L4 12"
|
d="M20 6L9 17L4 12"
|
||||||
stroke-width="2"
|
strokeWidth="2"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -4,9 +4,9 @@ const Minus = ({ ...props }) => {
|
|||||||
<path
|
<path
|
||||||
d="M5 12H19"
|
d="M5 12H19"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -4,16 +4,16 @@ const Plus = ({ ...props }) => {
|
|||||||
<path
|
<path
|
||||||
d="M12 5V19"
|
d="M12 5V19"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M5 12H19"
|
d="M5 12H19"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -110,6 +110,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
label={v.label}
|
label={v.label}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setChoices((choices) => {
|
setChoices((choices) => {
|
||||||
|
console.log(choices)
|
||||||
return {
|
return {
|
||||||
...choices,
|
...choices,
|
||||||
[opt.displayName]: v.label,
|
[opt.displayName]: v.label,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
|
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
|
||||||
items-center justify-center cursor-pointer transition duration-100 ease-in-out
|
items-center justify-center cursor-pointer transition duration-100 ease-in-out
|
||||||
p-0 shadow-none border-gray-200 border box-border;
|
p-0 shadow-none border-gray-200 border box-border text-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active.size {
|
.active.size {
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Swatch.module.css'
|
import s from './Swatch.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
|
||||||
import { Check } from '@components/icon'
|
import { Check } from '@components/icon'
|
||||||
import Button, { ButtonProps } from '@components/ui/Button'
|
import Button, { ButtonProps } from '@components/ui/Button'
|
||||||
|
import { isDark } from '@lib/colors'
|
||||||
interface Props {
|
interface Props {
|
||||||
active?: boolean
|
active?: boolean
|
||||||
children?: any
|
children?: any
|
||||||
@ -24,6 +23,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
variant = variant?.toLowerCase()
|
variant = variant?.toLowerCase()
|
||||||
label = label?.toLowerCase()
|
label = label?.toLowerCase()
|
||||||
|
const isDarkBg = isDark(color)
|
||||||
|
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
@ -43,8 +43,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
|||||||
{variant === 'color' && active && (
|
{variant === 'color' && active && (
|
||||||
<span
|
<span
|
||||||
className={cn('absolute', {
|
className={cn('absolute', {
|
||||||
'text-white': label !== 'white',
|
'text-white': isDarkBg,
|
||||||
'text-black': label === 'white',
|
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Check />
|
<Check />
|
||||||
|
@ -14,3 +14,36 @@ export function getRandomPairOfColors() {
|
|||||||
// Returns a pair of colors
|
// Returns a pair of colors
|
||||||
return [colors[idx], colors[idx2]]
|
return [colors[idx], colors[idx2]]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function hexToRgb(hex: string = '') {
|
||||||
|
const match = hex.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i)
|
||||||
|
|
||||||
|
if (!match) {
|
||||||
|
return [0, 0, 0]
|
||||||
|
}
|
||||||
|
|
||||||
|
let colorString = match[0]
|
||||||
|
|
||||||
|
if (match[0].length === 3) {
|
||||||
|
colorString = colorString
|
||||||
|
.split('')
|
||||||
|
.map((char: string) => {
|
||||||
|
return char + char
|
||||||
|
})
|
||||||
|
.join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const integer = parseInt(colorString, 16)
|
||||||
|
const r = (integer >> 16) & 0xff
|
||||||
|
const g = (integer >> 8) & 0xff
|
||||||
|
const b = integer & 0xff
|
||||||
|
|
||||||
|
return [r, g, b]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isDark(color = '') {
|
||||||
|
// Equation from http://24ways.org/2010/calculating-color-contrast
|
||||||
|
const rgb = hexToRgb(color)
|
||||||
|
const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
|
||||||
|
return res < 128
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user