-
-
Notifications
You must be signed in to change notification settings - Fork 35
refactor: replace hardcoded colors with theme variables #142
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
refactor: replace hardcoded colors with theme variables #142
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. 🚀 New features to boost your workflow:
|
Changepacks |
| } | ||
| style={{ | ||
| backgroundColor: 'var(--primary)', | ||
| backgroundColor: 'var(--toggleBg)', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
className={css({bg: "$toggleBg"})} 로 개선이 가능하면 개선을 바랍니다.
| "primary": "#F0F4E1", | ||
| "secondary": "#A1BEBF", | ||
| "link": "#BA99FF", | ||
| "text": "#F0F4E1", | ||
| "background": "#011919", | ||
| "containerBackground": "#022322", | ||
| "border": "#013936", | ||
| "success": "#009F99", | ||
| "warning": "#E9FF66", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
primary color 등 전체적인 톤은 설계가 된 것이라서 변경이 힘들 것 같습니다. (전체적인 톤은 색맹을 고려한 디자인 색입니다.)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그렇군요! 그럼 색감 조정이 아니라 기존 컬러칩의 사용영역을 조정해놔야겠네요!
| <TestCaseCircle key={text + idx} isSuccess={isSuccess}> | ||
| <Box minW="50vw" w="100%" whiteSpace="pre-wrap"> | ||
| <Text color="#FFF" typography="body"> | ||
| <Text color="$testCaseText" typography="body"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good
| key={index + 'desktop'} | ||
| className={css({ | ||
| bg: isSuccess ? 'unset' : '#D8D8D8', | ||
| bg: isSuccess ? 'unset' : '$testCaseFailedBg', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. We should use color tokens instead of constant colors
| justifyContent="center" | ||
| px="20px" | ||
| py="8px" | ||
| selectors={{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
using _lastChild and _firstChild syntex
| borderLeft: 'solid 1px #2B2B2B', | ||
| borderLeft: 'solid 1px $tableBorder', | ||
| }, | ||
| 'tr[data-responsive="desktop"]:first-of-type &, tr[data-responsive="mobile"]:nth-of-type(2) &': |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
지금 보니까 이거 좀 아쉽네요
borderTop: [~, null, "initial", null, ~]
이런식으로 data-responsive를 설정하지 않고도 이를 개선할 수 있었을 텐데.. 여기까지 해보실 수 있을까요?
Closes #139
Dark mode UI Updated
기존 UI의 이슈
수정한 UI 요소