Skip to content

[fix] 색상 변수 생성 및 적용 #157

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

Merged
merged 7 commits into from
Jun 28, 2025
Merged

[fix] 색상 변수 생성 및 적용 #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f4caaab
Merge branch 'master' of https://github.com/YoonKeumJae/docker-ko.git…
YoonKeumJae May 19, 2025
6f1f465
Merge branch 'docker-ko:master' into master
YoonKeumJae May 29, 2025
50daecf
Merge branch 'docker-ko:master' into master
YoonKeumJae Jun 19, 2025
e72ab9d
Merge branch 'docker-ko:master' into master
YoonKeumJae Jun 21, 2025
0b3f3be
Merge branch 'docker-ko:master' into master
YoonKeumJae Jun 26, 2025
692ad74
fix: use color variable which is described in tailwind.config.js
YoonKeumJae Jun 27, 2025
3eb8626
Update src/scripts/components/header-component.ts
krsy0411 Jun 27, 2025
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
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
<body
class="bg-background-light dark:bg-background-dark h-full flex-col text-base dark:text-white"
>
<!-- 숨겨진 div: Tailwind가 사용할 클래스들을 강제 인식하게 함 -->
<div class="hidden bg-docker-primary bg-docker-hover text-docker-link"></div>

<!-- 최상단 헤더 -->
<header-component></header-component>

Expand Down
2 changes: 1 addition & 1 deletion src/scripts/components/button-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class ButtonComponent extends HTMLElement {

this.innerHTML = `
<button type="button" class="not-prose my-4">
<a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] hover:bg-[#2560ff] text-white!">
<a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-docker-primary hover:bg-docker-hover text-white!">
${title}
</a>
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/components/footer-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ class FooterComponent extends HTMLElement {

connectedCallback() {
this.innerHTML = `
<footer class="w-screen text-center py-4 bg-[#086dd7] text-white relative bottom-0">
<footer class="w-screen text-center py-4 bg-docker-primary text-white relative bottom-0">
© 2025 Docker 한국어 문서 프로젝트 |
<a href="https://github.com/docker-ko/docker-ko.github.io" class="hover:underline text-[#b0c4de]">GitHub</a>
</footer>
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/components/header-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ class HeaderComponent extends HTMLElement {

connectedCallback() {
this.innerHTML = `
<header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-[#086dd7]">
<header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-docker-primary">
<div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
<div class="flex h-full items-center lg:gap-8 gap-2">
<div>
Expand Down
1 change: 1 addition & 0 deletions src/styles/content_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
#content pre {
padding: 0.5rem;
border: 2px solid #e1e2e6;
background: #f8f9fa;
Copy link
Preview

Copilot AI Jun 27, 2025

Choose a reason for hiding this comment

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

[nitpick] Consider using Tailwind’s utility classes or @apply (e.g., @apply bg-background-light;) instead of hardcoding a hex value, to keep styling consistent with the rest of the project.

Suggested change
background: #f8f9fa;
@apply bg-gray-100;

Copilot uses AI. Check for mistakes.

border-radius: 8px;
overflow-x: auto;
line-height: 1.5;
Expand Down
44 changes: 44 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,48 @@ module.exports = {
'./public/**/*.md',
'./src/scripts/components/*.{js,ts,jsx,tsx}'
],
safelist: [
'bg-docker-primary',
'bg-docker-hover',
'text-docker-link',
'border-border-light',
'border-border-primary',
'bg-surface-card',
'bg-surface-code',
'border-surface-code-border'
],
theme: {
extend: {
colors: {
// Docker 브랜드 색상
'docker-primary': '#086dd7', // 메인 브랜드 블루
'docker-hover': '#2560ff', // 호버 시 블루
'docker-link': '#007bff', // 링크 색상

// 배경 색상
'bg-light': '#ffffff', // 라이트 모드 배경
'bg-dark': '#1a1a1a', // 다크 모드 배경
'bg-sidebar': '#f9f9fa', // 사이드바 배경

// 텍스트 색상
'txt-primary': '#222222', // 메인 텍스트
'txt-secondary': '#444444', // 서브 텍스트
'txt-muted': '#555555', // 음소거된 텍스트
'txt-inverse': '#ffffff', // 역방향 텍스트 (다크 배경에서)
'txt-black': '#000000', // 순수 검정

// 테두리 색상
'border-light': '#e1e2e6', // 기본 테두리
'border-primary': '#007bff', // 강조 테두리 (blockquote 등)

// 회색 계열 (다크모드 지원)
'gray-dark-100': '#2d2d2d', // 다크모드 회색

// 상태별 색상
'surface-card': '#ffffff', // 카드 배경
'surface-code': '#f8f9fa', // 코드 블록 배경
'surface-code-border': '#e1e2e6', // 코드 블록 테두리
}
}
}
};