Skip to content

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.

Sign up for GitHub

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

Open
crayonpeenut wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor: replace hardcoded colors with theme variables #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 29 additions & 17 deletions apps/landing/devup.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,38 @@
"title": "#1A1A1A",
"caption": "#787878",
"menuHover": "#D8D8D8",
"menuActive": "#CCC"
"menuActive": "#CCC",
"testCaseFailedBg": "#D8D8D8",
"testCaseText": "#FFF",
"tableHeaderBg": "#2B2B2B",
"tableHeaderBorder": "#EFEEEB",
"tableBorder": "#2B2B2B",
"toggleBg": "#2B2B2B"
},
"dark": {
"primary": "#EBEBEB",
"secondary": "#EAD5FF",
"link": "#006BFF",
"text": "#EBEBEB",
"background": "#000",
"containerBackground": "#202020",
"border": "#333",
"success": "#3F8580",
"warning": "#FF9800",
"primary": "#F0F4E1",
"secondary": "#A1BEBF",
"link": "#BA99FF",
"text": "#F0F4E1",
"background": "#011919",
"containerBackground": "#022322",
"border": "#013936",
"success": "#009F99",
"warning": "#E9FF66",
Comment on lines +30 to +38
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

primary color 등 전체적인 톤은 설계가 된 것이라서 변경이 힘들 것 같습니다. (전체적인 톤은 색맹을 고려한 디자인 색입니다.)

Copy link
Author

@crayonpeenut crayonpeenut Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇군요! 그럼 색감 조정이 아니라 기존 컬러칩의 사용영역을 조정해놔야겠네요!

"error": "#EA1C5D",
"info": "#2196F3",
"base": "#000",
"negativeBase": "#FFF",
"title": "#FAFAFA",
"caption": "#787878",
"menuHover": "#272727",
"menuActive": "#434343"
"info": "#009F99",
"base": "#011919",
"negativeBase": "#F0F4E1",
"title": "#ffffff",
"caption": "#A1BEBF",
"menuHover": "#013936",
"menuActive": "#009F99",
"testCaseFailedBg": "#033433",
"testCaseText": "#F0F4E1",
"tableHeaderBg": "#C9CEAC",
"tableHeaderBorder": "#013936",
"tableBorder": "#013936",
"toggleBg": "#009F99"
}
},
"typography": {
Expand Down
2 changes: 1 addition & 1 deletion apps/landing/src/components/test-case/TestCaseTypeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function TestCaseTypeToggle(props: ComponentProps<typeof Toggle>) {
onChangeOptions({ ...options, type: value ? 'table' : 'list' })
}
style={{
backgroundColor: 'var(--primary)',
backgroundColor: 'var(--toggleBg)',
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

className={css({bg: "$toggleBg"})} 로 개선이 가능하면 개선을 바랍니다.

}}
value={options.type === 'table'}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion apps/landing/src/components/test-case/list/TestCaseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function TestCaseList({ results }: { results: TestStatus[2] }) {
>
<TestCaseCircle key={text + idx} isSuccess={isSuccess}>
<Box minW="50vw" w="100%" whiteSpace="pre-wrap">
<Text color="#FFF" typography="body">
<Text color="$testCaseText" typography="body">
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good

{textParts.map((part, partIdx) =>
part.type === 'latex' ? (
<Latex key={partIdx}>${part.content}$</Latex>
Expand Down
4 changes: 2 additions & 2 deletions apps/landing/src/components/test-case/table/TestCaseTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function TestCaseTable({ results }: { results: TestStatus[2] }) {
<Tr
key={index + 'desktop'}
className={css({
bg: isSuccess ? 'unset' : '#D8D8D8',
bg: isSuccess ? 'unset' : '$testCaseFailedBg',
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

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

display: ['none', null, null, 'table-row'],
})}
data-responsive="desktop"
Expand Down Expand Up @@ -62,7 +62,7 @@ export function TestCaseTable({ results }: { results: TestStatus[2] }) {
<Tr
key={index + 'mobile'}
className={css({
bg: isSuccess ? 'unset' : '#D8D8D8',
bg: isSuccess ? 'unset' : '$testCaseFailedBg',
display: ['table-row', null, null, 'none'],
})}
data-responsive="mobile"
Expand Down
22 changes: 11 additions & 11 deletions apps/landing/src/components/test-case/table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function Thead(props: ComponentProps<typeof Box<'thead'>>) {
return (
<Box
as="thead"
bg="#2B2B2B"
borderRight="solid 1px #EFEEEB"
bg="$tableHeaderBg"
borderRight="solid 1px $tableHeaderBorder"
justifyContent="center"
px="20px"
py="8px"
Expand All @@ -42,17 +42,17 @@ export function Th(props: ComponentProps<typeof Box<'th'>>) {
return (
<Box
as="th"
bg="#2B2B2B"
borderBottom="solid 1px #2B2B2B"
borderRight="solid 1px #EFEEEB"
borderTop="solid 1px #2B2B2B"
bg="$tableHeaderBg"
borderBottom="solid 1px $tableBorder"
borderRight="solid 1px $tableHeaderBorder"
borderTop="solid 1px $tableBorder"
color="$base"
justifyContent="center"
px="20px"
py="8px"
selectors={{
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

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

'&:last-child': {
borderRight: 'solid 1px #2B2B2B',
borderRight: 'solid 1px $tableBorder',
borderTopRightRadius: '10px',
},
'&:first-child': {
Expand All @@ -73,18 +73,18 @@ export function Td({
return (
<Box
as="td"
borderBottom="solid 1px #2B2B2B"
borderRight="solid 1px #2B2B2B"
borderBottom="solid 1px $tableBorder"
borderRight="solid 1px $tableBorder"
justifyContent="center"
px={[null, null, null, '20px']}
py="8px"
selectors={{
'&:first-child': {
borderLeft: 'solid 1px #2B2B2B',
borderLeft: 'solid 1px $tableBorder',
},
'tr[data-responsive="desktop"]:first-of-type &, tr[data-responsive="mobile"]:nth-of-type(2) &':
Copy link
Contributor

@owjs3901 owjs3901 Jan 25, 2026

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를 설정하지 않고도 이를 개선할 수 있었을 텐데.. 여기까지 해보실 수 있을까요?

{
borderTop: 'solid 1px #2B2B2B',
borderTop: 'solid 1px $tableBorder',
},
}}
styleOrder={1}
Expand Down
Loading