Skip to content

Commit 8d82b8e

Browse files
dev-wooyeondev-wooyeon
committed
refactor(ui): accent token과 활성 탐색 상태 정리
1 parent 81bfc0c commit 8d82b8e

14 files changed

Lines changed: 43 additions & 36 deletions

File tree

‎app/not-found.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function NotFound() {
55
return (
66
<main>
77
<Container size="sm" className="py-24 text-center md:py-32">
8-
<p className="text-meta font-semibold text-[var(--color-toss-blue)]">
8+
<p className="text-meta font-semibold text-[var(--color-accent)]">
99
404
1010
</p>
1111
<h1 className="mt-3 text-2xl font-bold tracking-tight text-[var(--color-text-primary)] sm:text-3xl">
@@ -17,7 +17,7 @@ export default function NotFound() {
1717
</p>
1818
<Link
1919
href="/"
20-
className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-toss-blue)] px-5 text-sm font-semibold text-[var(--color-accent-foreground)] transition-colors hover:bg-[var(--color-toss-blue-dark)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
20+
className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-accent)] px-5 text-sm font-semibold text-[var(--color-accent-foreground)] transition-colors hover:bg-[var(--color-accent-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
2121
>
2222
홈으로 돌아가기
2323
</Link>

‎blog/ui/components/PostCard/PostCard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
3434
className={clsx(
3535
'group flex min-h-7 items-baseline gap-6 py-0',
3636
'transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)]',
37-
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
37+
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
3838
)}
3939
>
4040
<time
@@ -58,7 +58,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
5858
'group block overflow-hidden rounded-[var(--radius-content)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-4 py-5 sm:px-6',
5959
'transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)]',
6060
'hover:border-[var(--color-border-hover)] hover:bg-[var(--color-grey-50)]',
61-
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
61+
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
6262
)}
6363
>
6464
<div className="min-w-0">
@@ -77,7 +77,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
7777
</>
7878
)}
7979
</div>
80-
<h3 className="mt-3 text-lg font-bold leading-snug tracking-tight text-[var(--color-text-primary)] transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)] group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
80+
<h3 className="mt-3 text-lg font-bold leading-snug tracking-tight text-[var(--color-text-primary)] transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)] group-hover:text-[var(--color-accent)] group-focus-visible:text-[var(--color-accent)]">
8181
{post.title}
8282
</h3>
8383
<p className="mt-2 max-w-3xl text-reading leading-relaxed text-[var(--color-text-secondary)] line-clamp-2">
@@ -108,7 +108,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
108108
'group flex h-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-6',
109109
'transition-all duration-[var(--duration-200)] ease-[var(--ease-default)]',
110110
'hover:-translate-y-0.5 hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-md)]',
111-
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]',
111+
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]',
112112
'active:translate-y-0 active:shadow-sm'
113113
)}
114114
>
@@ -126,7 +126,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
126126
</>
127127
)}
128128
</div>
129-
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-[var(--color-text-primary)] transition-[color,transform] duration-300 ease-[var(--ease-default)] group-hover:translate-x-1 group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
129+
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-[var(--color-text-primary)] transition-[color,transform] duration-300 ease-[var(--ease-default)] group-hover:translate-x-1 group-hover:text-[var(--color-accent)] group-focus-visible:text-[var(--color-accent)]">
130130
{post.title}
131131
</h3>
132132
<p className="mt-3 flex-grow line-clamp-2 text-sm text-[var(--color-text-secondary)] transition-transform duration-300 ease-[var(--ease-default)] group-hover:translate-x-1">

‎blog/ui/components/ReadingProgress/ReadingProgress.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ vi.mock('framer-motion', () => ({
2626
}) => {
2727
const className = props.className as string;
2828
const testId =
29-
className.includes('bg-[var(--color-toss-blue)]') &&
29+
className.includes('bg-[var(--color-accent)]') &&
3030
className.includes('h-full')
3131
? 'reading-progress-bar'
3232
: 'reading-progress-root';

‎blog/ui/components/ReadingProgress/ReadingProgress.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function ReadingProgress() {
3939
>
4040
<motion.div
4141
data-reading-progress-bar
42-
className="h-full bg-[var(--color-toss-blue)] origin-left"
42+
className="h-full bg-[var(--color-accent)] origin-left"
4343
style={{ scaleX }}
4444
/>
4545
</motion.div>

‎blog/ui/components/TableOfContents/TableOfContents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function TableOfContents({ items }: TableOfContentsProps) {
7070
'transition-colors duration-[var(--duration-150)]',
7171
item.level > 2 && 'pl-6',
7272
activeId === item.id
73-
? 'bg-[var(--color-toss-blue)]/10 text-[var(--color-toss-blue)] font-medium'
73+
? 'bg-[var(--color-accent)]/10 text-[var(--color-accent)] font-medium'
7474
: 'text-[var(--color-grey-600)] hover:text-[var(--color-grey-900)] hover:bg-[var(--color-grey-100)]'
7575
)}
7676
style={{ fontFamily: 'var(--font-sans-emoji)' }}

‎blog/ui/pages/EngineeringPageClient.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export default function EngineeringPageClient({
114114
className={clsx(
115115
'rounded border px-3 py-1.5 transition-colors',
116116
page === currentPage
117-
? 'border-[var(--color-toss-blue)] bg-[var(--color-toss-blue)] text-[var(--color-accent-foreground)]'
117+
? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
118118
: 'border-[var(--color-grey-200)] bg-[var(--color-bg-primary)] text-[var(--color-grey-700)] hover:bg-[var(--color-grey-50)]'
119119
)}
120120
>

‎site/shell/AppShell/AppShell.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function ExternalLinks() {
5454
<a
5555
key={item.label}
5656
href={item.href}
57-
className="ark-site-external-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
57+
className="ark-site-external-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
5858
>
5959
{item.label}
6060
</a>
@@ -79,7 +79,7 @@ export default function AppShell({ children }: AppShellProps) {
7979
<Link
8080
href="/"
8181
aria-label="ark 홈으로 이동"
82-
className="ark-site-brand-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
82+
className="ark-site-brand-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
8383
>
8484
ark
8585
</Link>
@@ -98,7 +98,7 @@ export default function AppShell({ children }: AppShellProps) {
9898
key={item.href}
9999
href={item.href}
100100
aria-current={isActive ? 'page' : undefined}
101-
className="ark-site-primary-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
101+
className="ark-site-primary-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
102102
>
103103
{item.label}
104104
</Link>

‎styles/globals.css‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
}
138138

139139
.ark-route-error-retry:focus-visible {
140-
outline: 2px solid var(--color-toss-blue);
140+
outline: 2px solid var(--color-accent);
141141
outline-offset: 0.25rem;
142142
}
143143

@@ -157,6 +157,10 @@
157157
line-height: 1.5rem;
158158
}
159159

160+
.ark-site-primary-link[aria-current='page'] {
161+
font-weight: var(--font-semibold);
162+
}
163+
160164
.ark-site-external-links {
161165
display: flex;
162166
flex-direction: column;
@@ -313,13 +317,13 @@
313317
}
314318

315319
a {
316-
color: var(--color-toss-blue);
320+
color: var(--color-accent);
317321
text-decoration: none;
318322
transition: color var(--duration-150) var(--ease-default);
319323
}
320324

321325
a:hover {
322-
color: var(--color-toss-blue-dark);
326+
color: var(--color-accent-hover);
323327
}
324328

325329
/* Code */
@@ -364,7 +368,7 @@
364368

365369
/* Blockquotes */
366370
blockquote {
367-
border-left: 3px solid var(--color-toss-blue);
371+
border-left: 3px solid var(--color-accent);
368372
padding: 1rem 1.25rem;
369373
margin: 1.5rem 0;
370374
background-color: var(--color-grey-50);
@@ -429,7 +433,7 @@
429433

430434
/* ===== Focus Styles (Accessibility) ===== */
431435
:focus-visible {
432-
outline: 2px solid var(--color-toss-blue);
436+
outline: 2px solid var(--color-accent);
433437
outline-offset: 2px;
434438
}
435439

@@ -654,7 +658,7 @@
654658

655659
.prose pre [data-highlighted-line] {
656660
background-color: var(--color-code-highlight);
657-
border-left-color: var(--color-toss-blue);
661+
border-left-color: var(--color-accent);
658662
}
659663

660664
.prose [data-rehype-pretty-code-figure] {
@@ -709,8 +713,8 @@
709713

710714
.prose .mermaid-btn-primary {
711715
margin-left: auto;
712-
border-color: var(--color-toss-blue);
713-
color: var(--color-toss-blue);
716+
border-color: var(--color-accent);
717+
color: var(--color-accent);
714718
}
715719

716720
.prose .mermaid-zoom-label {
@@ -804,7 +808,7 @@
804808

805809
.prose .workflow-scroll-fill {
806810
height: 100%;
807-
background: var(--color-toss-blue);
811+
background: var(--color-accent);
808812
transition: width 180ms ease;
809813
}
810814

@@ -833,13 +837,13 @@
833837

834838
.prose .workflow-step.is-active {
835839
opacity: 1;
836-
border-color: var(--color-toss-blue);
840+
border-color: var(--color-accent);
837841
}
838842

839843
.prose .workflow-step-id {
840844
font-family: var(--font-mono);
841845
font-size: var(--text-xs);
842-
color: var(--color-toss-blue);
846+
color: var(--color-accent);
843847
}
844848

845849
.prose .workflow-step-title {

‎styles/globals.test.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,13 @@ describe('globals styles', () => {
109109
);
110110
});
111111

112+
it('gives the active primary link a non-color state', () => {
113+
expect(globalsContent).toContain(
114+
".ark-site-primary-link[aria-current='page']"
115+
);
116+
expect(globalsContent).toContain('font-weight: var(--font-semibold);');
117+
});
118+
112119
it('uses the content-page rail layout across non-mobile viewports', () => {
113120
const contentViewportPath = path.resolve(
114121
process.cwd(),

‎styles/tokens.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
--color-accent: #3f3f46;
1010
--color-accent-hover: #252525;
1111
--color-accent-foreground: #eaebea;
12-
--color-toss-blue: var(--color-accent);
13-
--color-toss-blue-light: #52525b;
14-
--color-toss-blue-dark: var(--color-accent-hover);
1512

1613
/* Grey Scale */
1714
--color-grey-900: #252525;
@@ -35,7 +32,6 @@
3532
--color-bg-secondary: #e2e2e5;
3633
--color-bg-tertiary: #d8d8dc;
3734
--color-surface: #eaebea;
38-
--color-blue-500: var(--color-accent);
3935

4036
--color-border: #c8c8cc;
4137
--color-border-hover: #94949a;
@@ -53,7 +49,7 @@
5349
--mobile-nav-active-bg: #e0e1e3;
5450
--mobile-nav-active-border: var(--color-border);
5551
--mobile-nav-hover-bg: var(--color-bg-secondary);
56-
--mobile-nav-focus-ring: var(--color-toss-blue);
52+
--mobile-nav-focus-ring: var(--color-accent);
5753
--mobile-nav-focus-offset: var(--mobile-nav-bg);
5854

5955
/* Code Block Colors */

0 commit comments

Comments
 (0)