[REFACTOR] Theme color 네이밍 변경

[baesee0806]

작업 대상

• 색상명 변경 (적용 X)

작업 내용

• Theme 파일 Gray, Green 색상 주석 추가(00a5048)

[baesee0806]

BLACK_TRANSPARENT: '#00000080' WHITE_TRANSPARENT: '#ffffff90'

위의 두 색의 네이밍을 어떻게 할지 고민입니다. TRANSPARENT라는 네이밍은 좋은거 같지만 모든 색상에 대해서 추가가 되어서 복잡성이 늘어날거라고 생각하는데 어떻게 생각하시나요?

[wzrabbit]

@baesee0806 👋🏻

이 문제에 대해 고민해 봤는데, 유틸 함수를 이용해 투명한 색상을 표현하는 방법은 어떨까요? 각 투명도의 색상이 자주 쓰이지 않음을 생각해 봤을 때 충분히 시도해 볼 수 있다고 생각하고, 가독성 면에서도 밀리지 않을 것 같아요. 투명도 또한 16진수가 아닌 0 ~ 1의 값을 사용하는 것으로 개선할 수 있어 보이고요...!

아래는 사용 예시에요.

// 검은색, 75% (0%는 완전히 투명, 100%는 완전히 불투명)
const Foo = styled.div`
    color: ${({ theme }) => getTransparentColor(theme.colors.BLACK, 0.75)};
`;

getTransparentColor 함수를 구현한 예시에요.

const getTransparentColor = (hexColor: string, opacity: number) => {
    const opacityHex = Math.round(255 * opacity)
        .toString(16)
        .padStart(2, '0');

    return `${hexColor}${opacityHex}`;
};