From 38b094d4eb0a50a9bb72efc6dc6d9c99962c655f Mon Sep 17 00:00:00 2001
From: Jinho Yeom <pwlsghq@naver.com>
Date: Tue, 11 Aug 2026 21:35:20 +0900
Subject: [PATCH 1/3] =?UTF-8?q?style(docs):=20=EB=AC=B8=EC=84=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=ED=8A=B8=EC=9D=98=20=ED=81=AC=EB=A1=AC?=
 =?UTF-8?q?=EA=B3=BC=20=EC=BD=94=EB=93=9C=20=ED=91=9C=EB=A9=B4=EC=9D=84=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=81=B0=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

navbar가 페이지와 같은 배경을 쓰면서 경계선도 그림자도 없어, 사이드바의
세로 구분선이 만날 가로선 없이 허공에서 시작했다. navbar에 하단
경계선을 넣어 둘이 만나게 하고, 로고를 사이드바 항목과 같은 20px 축에
맞춘다. 기존 clamp() 값은 뷰포트에 따라 이 축에서 어긋났다.

배경색은 시맨틱 토큰이 아니라 값 레이어로 우회한다.
--side-color-background-default는 선언되어 있으나 값이 비어 있다.
브릿지가 --color-background-default를 가리키는데 tokens.json은 같은 값을
color.background.base로 정의하기 때문이다. 이 계약 불일치는
@sipe-team/tokens에서 따로 고쳐야 하므로, 그때까지 값 레이어를 fallback으로
둔다. 이대로 두면 페이지와 navbar에 배경이 아예 없어 sticky navbar 뒤로
본문이 비친다. 시맨틱 토큰이 정상화되면 fallback은 자동으로 빠진다.

코드블록은 prism 테마가 인라인 스타일로 #1e1e1e를 주입해
--ifm-pre-background를 덮고 있었다. !important 대신 테마의
plain.backgroundColor에 토큰을 넣어 표면 색을 디자인 시스템으로
되돌리고, 모서리도 카드·프리뷰와 같은 8px로 통일한다.

사이드바는 본문과 같은 글자 크기라 위계가 평평했다. 한 단계 줄이고
활성 항목에 굵기와 액센트 바를 준다. 목차의 인라인 코드는 채워진
상자로 렌더돼 주변 항목과 경쟁하므로 표면을 걷어낸다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BhY4G6FYoATMmEd842BSVa
---
 www/docusaurus.config.ts | 15 ++++++++--
 www/src/custom.css       | 61 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/www/docusaurus.config.ts b/www/docusaurus.config.ts
index fc5c4fe..a34f6b8 100644
--- a/www/docusaurus.config.ts
+++ b/www/docusaurus.config.ts
@@ -13,6 +13,14 @@ const r = (p: string) => path.resolve(__dirname, '..', 'packages', p);
 // components that read `vars` resolve against it. Built once for the whole site, not per component.
 const tokensCss = r('tokens/dist/styles.css');
 
+const sideCodeTheme = {
+  ...prismThemes.vsDark,
+  plain: {
+    ...prismThemes.vsDark.plain,
+    backgroundColor: 'var(--side-color-background-subtle)',
+  },
+};
+
 const pretendardCss = require.resolve('pretendard/dist/web/static/pretendard-dynamic-subset.css');
 
 export default {
@@ -112,8 +120,11 @@ export default {
       copyright: `All rights reserved ⓒ SIPE ${new Date().getFullYear()}`,
     },
     prism: {
-      theme: prismThemes.vsDark,
-      darkTheme: prismThemes.vsDark,
+      // Docusaurus applies `plain.backgroundColor` as an inline style on the code block
+      // container, which outranks `--ifm-pre-background`. Feeding the token through the theme
+      // keeps the code surface on the design system instead of vsDark's hardcoded #1e1e1e.
+      theme: sideCodeTheme,
+      darkTheme: sideCodeTheme,
     },
   } satisfies Preset.ThemeConfig,
 } satisfies Config;
diff --git a/www/src/custom.css b/www/src/custom.css
index 3267cf4..1a9f48e 100644
--- a/www/src/custom.css
+++ b/www/src/custom.css
@@ -2,7 +2,10 @@
 html[data-theme="light"],
 html[data-theme="dark"] {
   --side-chrome-padding-horizontal: clamp(1rem, 2vw, 2rem);
-  --ifm-navbar-padding-horizontal: var(--side-chrome-padding-horizontal);
+
+  /* Aligns the navbar logo with the sidebar entries below it, which sit at a fixed 20px. A
+     viewport-scaled value would drift away from that edge as the window resizes. */
+  --ifm-navbar-padding-horizontal: 20px;
 
   --ifm-color-gray-0: var(--color-white);
   --ifm-color-gray-100: var(--color-gray-50);
@@ -55,7 +58,13 @@ html[data-theme="dark"] {
   --ifm-color-danger-contrast-background: var(--side-color-status-danger-background);
   --ifm-color-danger-contrast-foreground: var(--side-color-status-danger-foreground);
 
-  --ifm-background-color: var(--side-color-background-base);
+  /* `--side-color-background-default` is declared by the theme bridge but resolves to nothing:
+     the bridge points at `--color-background-default` while tokens.json defines the value as
+     `color.background.base`. Until that contract mismatch is fixed in @sipe-team/tokens, fall
+     back to the value layer directly — otherwise the page and navbar have no background at all
+     and content shows through the sticky navbar. The fallback drops out on its own once the
+     semantic token resolves. */
+  --ifm-background-color: var(--side-color-background-default, var(--color-background-base));
   --ifm-background-surface-color: var(--side-color-background-muted);
   --ifm-color-content: var(--side-color-foreground-default);
   --ifm-color-content-secondary: var(--side-color-foreground-subtle);
@@ -76,13 +85,13 @@ html[data-theme="dark"] {
   --ifm-link-color: var(--side-color-accent-default);
   --ifm-link-hover-color: var(--side-color-accent-hover);
   --ifm-menu-color-active: var(--side-color-accent-default);
-  --ifm-menu-color-background-active: var(--side-color-background-subtle);
+  --ifm-menu-color-background-active: var(--side-color-background-muted);
   --ifm-tabs-color-active: var(--side-color-accent-default);
   --ifm-tabs-color-active-border: var(--side-color-accent-default);
   --ifm-breadcrumb-color-active: var(--side-color-foreground-default);
   --ifm-pagination-nav-color-hover: var(--side-color-accent-default);
 
-  --ifm-navbar-background-color: var(--side-color-background-base);
+  --ifm-navbar-background-color: var(--side-color-background-default, var(--color-background-base));
   --ifm-navbar-link-hover-color: var(--side-color-accent-default);
   --ifm-navbar-search-input-background-color: var(--side-color-background-subtle);
   --ifm-navbar-search-input-color: var(--side-color-foreground-default);
@@ -101,7 +110,7 @@ html[data-theme="dark"] {
   --ifm-scrollbar-thumb-background-color: var(--side-color-border-default);
   --ifm-scrollbar-thumb-hover-background-color: var(--side-color-border-strong);
 
-  --ifm-button-color: var(--side-color-background-base);
+  --ifm-button-color: var(--side-color-background-default, var(--color-background-base));
 
   --ifm-global-radius: var(--side-radius-component-lg);
   --ifm-card-border-radius: var(--side-radius-component-xl);
@@ -132,11 +141,53 @@ html[data-theme="dark"] {
   height: 1.25rem;
 }
 
+/* The navbar shares the page background and casts no shadow, so without this the sidebar's
+   vertical rule starts in mid-air where the two should meet. */
+.navbar {
+  border-bottom: 1px solid var(--side-color-border-default);
+}
+
 :focus-visible {
   outline: 2px solid var(--side-color-border-focus);
   outline-offset: 2px;
 }
 
+/* Code blocks carry `--ifm-code-border-radius`, which is sized for inline code. Blocks are
+   surfaces and should match cards and previews instead. Qualified by tag because the theme's
+   own CSS module class has equal specificity and would otherwise win on load order. */
+div.theme-code-block {
+  border-radius: var(--side-radius-component-lg);
+}
+
+/* The sidebar shares the body font size, which flattens the hierarchy between navigation and
+   content. Step it down and mark the active entry with weight and an accent rule. */
+.menu__link {
+  font-size: var(--side-font-size-100);
+}
+
+.menu__link--active {
+  position: relative;
+  font-weight: var(--side-font-weight-semi-bold);
+}
+
+.menu__link--active::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 2px;
+  background-color: var(--side-color-accent-default);
+}
+
+/* Inline code in the table of contents renders as a filled box, which competes with the entries
+   around it. Strip the surface and keep only the monospace cue. */
+.table-of-contents code {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+
 .footer .container {
   max-width: none;
   padding-left: var(--side-chrome-padding-horizontal);

From 26920dc02c5fa167fe6e354e4165202a51ab7d7c Mon Sep 17 00:00:00 2001
From: Jinho Yeom <pwlsghq@naver.com>
Date: Tue, 11 Aug 2026 23:07:55 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix(docs):=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=99=88=20=EC=B9=B4=EB=93=9C=EA=B0=80=20?=
 =?UTF-8?q?=EB=A7=9E=EB=B6=99=EB=8D=98=20=EA=B0=84=EA=B2=A9=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

카드는 infima 그리드의 col을 쓰는데, col은 좌우 padding만 가지고 세로
여백이 없다. 데스크톱에서는 그 좌우 padding이 카드 사이 32px를 만들지만,
996px 이하에서 col이 전체 폭이 되어 세로로 쌓이면 간격이 0이 된다.

row에 row-gap을 주어 가로 간격과 같은 32px를 맞춘다. 카드가 한 줄에
들어가는 동안에는 발동하지 않으므로 데스크톱 레이아웃은 그대로다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BhY4G6FYoATMmEd842BSVa
---
 www/src/HomepageFeatures/index.module.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/www/src/HomepageFeatures/index.module.css b/www/src/HomepageFeatures/index.module.css
index 9138763..8821546 100644
--- a/www/src/HomepageFeatures/index.module.css
+++ b/www/src/HomepageFeatures/index.module.css
@@ -5,6 +5,13 @@
   width: 100%;
 }
 
+/* Infima's grid columns carry horizontal padding but no vertical spacing, so the cards sit flush
+   against each other once they wrap into a single column. Matches the 32px the columns already
+   put between cards side by side; inert while they fit on one row. */
+.features :global(.row) {
+  row-gap: var(--side-spacing-layout-sm);
+}
+
 .card {
   height: 100%;
   padding: var(--side-spacing-component-xl);

From 2562d5175071bd04c9e29ddfe7210304c43438cb Mon Sep 17 00:00:00 2001
From: Jinho Yeom <pwlsghq@naver.com>
Date: Tue, 11 Aug 2026 23:08:12 +0900
Subject: [PATCH 3/3] =?UTF-8?q?docs:=20=EC=82=AC=EC=9D=B4=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=82=A8=EC=95=84=20=EC=9E=88=EB=8D=98=20=ED=95=9C?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EB=AC=B8=EA=B5=AC=EB=A5=BC=20=EC=98=81?=
 =?UTF-8?q?=EC=96=B4=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사이트 로케일은 en 하나이고 문서도 모두 영어인데, 화면에 보이는 문구
두 곳만 한국어였다. 홈 히어로의 부제는 같은 파일의 SEO description이
이미 영어라 한 파일 안에서도 어긋나 있었다.

- 히어로 부제 → "The design system for Sipe products"
- Badge 문서의 Usage 예제 텍스트 → "Sipe"

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BhY4G6FYoATMmEd842BSVa
---
 www/docs/components/badge.mdx | 4 ++--
 www/src/pages/index.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/docs/components/badge.mdx b/www/docs/components/badge.mdx
index 266749c..385e4ab 100644
--- a/www/docs/components/badge.mdx
+++ b/www/docs/components/badge.mdx
@@ -23,9 +23,9 @@ import '@sipe-team/badge/styles.css';
 Wrap the text you want to label. The badge sizes itself to its content.
 
 <Preview
-  code={`<Badge>사이프</Badge>`}
+  code={`<Badge>Sipe</Badge>`}
 >
-  <Badge>사이프</Badge>
+  <Badge>Sipe</Badge>
 </Preview>
 
 ## Examples
diff --git a/www/src/pages/index.tsx b/www/src/pages/index.tsx
index df775a0..c998ead 100644
--- a/www/src/pages/index.tsx
+++ b/www/src/pages/index.tsx
@@ -28,7 +28,7 @@ function HomepageHeader() {
         <Heading as="h1" className={styles.heroTitle}>
           Side
         </Heading>
-        <p className={styles.heroSubtitle}>Sipe 제품을 만드는 사람들을 위한 디자인 시스템</p>
+        <p className={styles.heroSubtitle}>The design system for Sipe products</p>
       </div>
     </header>
   );