[view] color code 통일 관련 논의

[hanseul-lee]

#74 PR에서 파생된 이슈입니다.

저희가 현재 결정된 color가 따로 없어서 각 컴포넌트 별로 선택하고 있는 color가 다른데요.
이 부분에 있어서 오프라인 미팅 때도 계속 언급이 되어 새로 Issue Main color와 Sub color를 정했으면 좋겠습니다.

현재 Bar chart 구현하며 vscode 익스텐션이라면 vscode 배경 색과 비슷해야 한다고 생각해 어둡게 바꿔놓았는데
전반적인 color code에 대해 함께 이야기해 통일하면 좋을 것 같습니다.

@jejecrunch 님 말씀으로는 우선 저희가 pallette가 있어서 이 pallette 기준으로 결정하면 좋을 것 같다고 하셨는데 저도 동의합니다.

결정해야 할 부분

1. body background-color
2. Main으로 쓸 theme color
3. Main과 잘 어울리는 sub color 2~3가지
4. font color

[hanseul-lee]

현재 Bar chart 에서는 임시로 적용한 컬러는 아래와 같습니다.
theme color 같은 경우 sementic-ui button 의 primary color 가져와 사용했습니다.

• background: $gray-900
• font: $white
• theme color: #0077aa

[jejecrunch]

참고로 제가 Summary Component에서 name에 쓴 컬러는

• background-color : $blue-light-A700 -> hover 되었을 때 $blue-light-A200
• color: white

입니다!

그리고 추가로 사용한 건 tooltip에서인데요.

• background-color: rgba(0, 119, 170, 0.8)

로 사용했습니다. color는 white입니다.

저 같은 경우는 tooltip에서 shadow도 사용하고 있는데 shadow 색상은 rgba(50, 50, 50, 0.4)입니다.

[ytaek]

음. @githru/engine , @githru/view 로 assigne해볼까 했는데 팀으로는 assign이 안되네요;;

[ytaek]

dear-github/dear-github#170

확인해보니, review는 가능한데, assign은 아직 안된다고 합니당. enterprise만 되는듯?
일단 view쪽 방에 공지를 띄우는 걸로 대체하는게 좋겠습니다.

[pshdev1030]

몇가지를 정해서 그 중에서 정해봐야겠네용

[jejecrunch]

현재 color pallete에 있는 색은 bootstrap에서 가져오신 색 같습니다.

@hanseul-lee 님께서 참고하신 sementic-ui button 의 color 역시 새로 차용해서 써도 괜찮을 것 같습니다.

다른 color palette들을 조금 찾아봤는데 주로 Primary color, Secondary color, Error, Warning, Info, Success로 카테고리를 나누는 것 같습니다.
카테고리를 나눠서 1가지의 Default color를 정한 후 음영으로 3가지 정도 구분하도록 하는 방식을 사용하고 있네요.

• MUI color palette
  

• bootstrap color palette
  
  아래에 all color에서 가져오신 듯 합니다 !

• semantic UI color palette
  
  semantic UI 의 경우에는 Primary, Secondary만 나눈 결과만 봐서 우선은 이렇게 첨부합니다 !

플러스로 다른 분들은 vscode를 어떤 테마를 가장 많이 쓰시나요?
vscode야 워낙 테마가 많다보니 여쭤보는 게 의미가 있을까 싶지만 ...
저는 새벽에 작업을 많이 하게 되다보니 dark 모드를 선호해서 줄곧 dark 모드처럼 보이는 테마인 Night Owl을 사용해왔거든요.

color에 대해서 이야기할 때 어떤 모드를 기본으로 지원할지에 대해서도 이야기해보면 좋을 것 같습니다.
(dark 모드일지, light 모드일지...)

물론 Primary, Secondary, ... 등은 모드와 상관없이 잘 보여야하는 것은 맞다고 생각합니다.
그러나 모드에 따라서 변경될 색이라면 background color와 font color인 것 같습니다 !
(그 외에 shadow 색도 변경될 수 있는 색 같습니다.)

[jeonghye-choi]

현재 color pallete에 있는 색은 bootstrap에서 가져오신 색 같습니다.

@jejecrunch 맞습니다! bootstrap의 color pallete를 가져와 정의했습니다.

다른 color palette들을 조금 찾아봤는데 주로 Primary color, Secondary color, Error, Warning, Info, Success로 카테고리를 나누는 것 같습니다.

• pallete를 크게 color name과 level을 적용할 수 있게 color+level 로 정의해 놓았습니다.
• warniing, info, success를 모드에 따라 컬러를 정의해 놓았습니다!
• dark모드(vscode-dart모드)에서는 A200이, light모드(vscode-light모드)에서는 A700 level이 뚜렷하게 표현되는 것을 확인했습니다.
• 관련되어서 feat: add style pallete #20 를 참고 부탁드립니다.

Q. 컬러를 다양하게 사용하기 위해서 같은 레벌의 컬러를 랜덤으로 사용하는 건 어떨까요?

Q. 저는 일단 테스트용(저희 개발하면서 적용 확인하기 위한)으로 theme toggle 버튼을 임시로 추가해서 적용 및 테스트 해보는 건 어떨까 생각합니다!

[jejecrunch]

pallete를 크게 color name과 level을 적용할 수 있게 color+level 로 정의해 놓았습니다.
warniing, info, success를 모드에 따라 컬러를 정의해 놓았습니다!
dark모드(vscode-dart모드)에서는 A200이, light모드(vscode-light모드)에서는 A700 level이 뚜렷하게 표현되는 것을 확인했습니다.
관련되어서 #20 를 참고 부탁드립니다.

해당 내용 확인했습니다 !
저희가 style과 color에 대해 어떻게 정의하게 되었는지 구체적으로 얘기 나눈 적이 없어서 정보 격차가 발생한 것 같습니다
이미 다 정해주신 건 알고 있었는데 아예 상위 컴포넌트에서 지정해줘야할 것 같아서 따로 모드별로는 사용하고 있지 않았습니다

그리고 @jeonghye-choi 님께서 정의해주신 만큼 어떻게 하셨는지 보고 싶었는데 PR에는 color를 가져오신 부분이 없어서 ㅜㅜ

Q. 컬러를 다양하게 사용하기 위해서 같은 레벌의 컬러를 랜덤으로 사용하는 건 어떨까요?

저는 괜찮은 것 같습니다만 그러면 theme 안에는 어떻게 되는 걸까요?

Q. 저는 일단 테스트용(저희 개발하면서 적용 확인하기 위한)으로 theme toggle 버튼을 임시로 추가해서 적용 및 테스트 해보는 건 어떨까 생각합니다!

color가 적용되는 거 말씀이신가요?

[hanseul-lee]

vscode theme color에 맞게 변경되는 것도 가능할 것 같은데 어떠신가요~?
https://stackoverflow.com/questions/47117621/how-to-get-the-vscode-theme-color-in-vscode-extensions

cf. GITLENS vscode extension

+) 이부분 @wherehows 님께서 알아봐 주시기로 하셨습니다🙏

[jejecrunch]

vscode theme color에 맞게 변경되는 것도 가능할 것 같은데 어떠신가요~? https://stackoverflow.com/questions/47117621/how-to-get-the-vscode-theme-color-in-vscode-extensions

좋은 것 같습니다 !

[hanseul-lee]

@wherehows 님께서 추가 분석해 주신 내용입니다🙌

• [view] vscode 테마 컬러 가져오기 및 git lens 분석 내용 공유 #119

[ytaek]

#607 에서 이어갑니다.