feat: color scheme에 따른 팔레트 색상 분기

[icepeng]

• palette가 고정된 값이 아닌 CSS Variable을 바라보게 하고, 스타일시트에서 prefers-color-scheme에 따라 variable이 교체되게 하는 것으로 사용자가 선호하는 색상 모드에 따른 팔레트 색상 분기를 지원합니다.
• 다크모드 색상 분기만을 구현했으며, 다크모드 색상 값은 따로 적용되지 않았습니다. theme.css의 prefers-color-scheme: dark 영역의 색상값을 변경해 적용할 수 있습니다.
• 장기적으로는 theme.css와 palette.ts가 동일한 소스에서 빌드되는 것으로 스키마가 일치하는 것을 보장해야 하나, 이번 작업에서는 다루지 않습니다.
• 추가된 theme.css를 사용하는 웹에서는 별도로 color-scheme: light dark; 선언을 최상위에 추가하는 것을 권장합니다.

prefers-color-scheme은 OS에서 컬러 모드를 변경하거나, 크롬 개발자 도구에서 변경할 수 있습니다.

[alstn2468]

기존 시스템에 변경점이 생겨서 실 서비스에 영향이 없으려면 apps 하위의 각 서비스에 요 파일 import를 추가해야할 것 같아요!

import '@boolti/ui/src/theme.css 흠... 뭔가 임포트가 안이쁜데 @boolti/ui/theme.css가 될 수 있도록 한 뎁스 밖에 두는 것은.. 어떨까 싶으면서.. 코드 구조상은 이게 맞긴한데..

[icepeng]

exports map을 사용하면 import 경로를 이쁘게 바꿀 수 있는데, boolti/ui에 별도의 빌드 과정이 없어서 어떻게 번들링되고 있는지 모르겠어서 지금처럼 해두었어요.

[icepeng]

생각해보니 당장 병합 가능한 상태가 아니긴 하네요. 일단 draft로 변경해둘게요.

[alstn2468]

https://jsramblings.com/using-yarn-symlinks-to-share-code-between-apps/amp/

packages 하위에 있는 패키지들은 yarn이 symlink를 이용해서 번들링할때 직접 가져와서 같이 번들 되고 있는 것 같네요~!

[icepeng]

exports map 추가해 두었어요 9de60d1

[icepeng]

다크모드 색상값을 적당히 적용해 두었어요. HSLuv 색공간을 이용해서 lightness만 반전했어요. 그대로 쓰기는 좀 어렵고, 여기서 수정해나간다는 느낌으로 보면 좋을 것 같아요.

import { Hsluv } from "hsluv";

var conv = new Hsluv();

const main = {
    '--color-primary-o0': '#FFCFBA',
    '--color-primary-o1': '#FF5A14',
    '--color-primary-o2': '#E94600',
    '--color-primary-o3': '#C93E02',

    '--color-status-error': '#FF4D4F',
    '--color-status-warning': '#FAAD14',
    '--color-status-success': '#52C41A',
    '--color-status-link': '#1890FF',

    '--color-purple-main': '#B150FF',
    '--color-purple-sub': '#E6C8FE',

    '--color-blue-main': '#2B7BE9',
    '--color-blue-sub': '#C8E7FE',

    '--color-green-main': '#52C41A',
    '--color-green-sub': '#CCF3BA',

    '--color-red-main': '#FF5A14',
    '--color-red-sub': '#FFCFBA',

    '--color-yellow-main': '#E09500',
    '--color-yellow-sub': '#FFE2A9',

    '--color-grey-main': '#888D9D',
    '--color-grey-sub': '#F3F5F9',
    '--color-grey-w': '#FFFFFF',
    '--color-grey-g00': '#F3F5F9',
    '--color-grey-g10': '#E7EAF2',
    '--color-grey-g20': '#D8DBE5',
    '--color-grey-g30': '#C8CCDC',
    '--color-grey-g40': '#A2A5B4',
    '--color-grey-g50': '#888D9D',
    '--color-grey-g60': '#6F7485',
    '--color-grey-g70': '#595D6D',
    '--color-grey-g80': '#434753',
    '--color-grey-g90': '#282B33',
    '--color-grey-g100': '#121215',
    '--color-grey-b': '#000000',

    '--color-mobile-primary-o1': '#FF6827',
    '--color-mobile-status-error': '#FF4D4F',
    '--color-mobile-status-success': '#52C41A',
    '--color-mobile-grey-w': '#FFFFFF',
    '--color-mobile-grey-g05': '#F6F7FF',
    '--color-mobile-grey-g10': '#E7EAF2',
    '--color-mobile-grey-g15': '#D8DBE5',
    '--color-mobile-grey-g20': '#BEC1CE',
    '--color-mobile-grey-g30': '#A2A5B4',
    '--color-mobile-grey-g40': '#888D9D',
    '--color-mobile-grey-g50': '#6F7485',
    '--color-mobile-grey-g60': '#595D6D',
    '--color-mobile-grey-g70': '#434753',
    '--color-mobile-grey-g80': '#2E303A',
    '--color-mobile-grey-g85': '#1B1D23',
    '--color-mobile-grey-g90': '#121318',
    '--color-mobile-grey-g95': '#090A0B',
    '--color-mobile-grey-b': '#000000'
}

const result = Object.entries(main).map(([key, value]) => {
    conv.hex = value;
    conv.hexToHsluv();

    conv.hsluv_l = 100 - conv.hsluv_l;
    conv.hsluvToHex();

    return `${key}: ${conv.hex};`
}).join('\n');

console.log(result)