refactor: unify theme design tokens

src/components/Common/AppsPromo/index.module.css

@@ -3,8 +3,8 @@
   overflow: hidden;
   border-top: 1px solid #d6d6d6;
   border-bottom: 1px solid #eeeeee;
-  background: rgb(107 114 128);
-  color: #ffffff;
+  background: var(--color-theme-light-muted);
+  color: var(--color-theme-light-text);
 }
 
 .inner {
@@ -135,8 +135,8 @@
 :global(body.DarkTheme) .appsPromo {
   border-top-color: #3f3f46;
   border-bottom-color: #27272a;
-  background: rgb(107 114 128);
-  color: #ffffff;
+  background: var(--color-theme-dark-muted);
+  color: var(--color-theme-dark-text);
 }
 
 @media (max-width: 720px) {

src/components/Common/Layouts/Container/FixedContentContainer/index.module.css

@@ -6,13 +6,6 @@
   margin-top: 0;
 }
 
-.content > h1 {
-  font-size: var(--font-size-content-heading-1);
-  font-weight: var(--font-weight-content-heading);
-  border-bottom: 1px solid var(--color-border);
-  margin: 2.8rem 0 1rem;
-}
-
 .content > h2 {
   font-size: var(--font-size-content-heading-2);
   font-weight: var(--font-weight-content-heading);
@@ -126,16 +119,10 @@
   font-weight: bold;
 }
 
-.content > blockquote {
-  border-left: 4px solid var(--color-border);
-  padding-left: 1rem;
-  margin: 2rem 0;
-}
-
 .content > hr {
   margin: 4rem 0;
   height: 1px;
-  background-color: var(--color-border);
+  background-color: var(--color-theme-border);
   border: none;
 }
 

src/components/Features/Article/Elements/Plugins/CustomHtml/index.module.css

@@ -10,13 +10,6 @@
   margin-top: 0;
 }
 
-.content > h1 {
-  font-size: var(--font-size-content-heading-1);
-  font-weight: var(--font-weight-content-heading);
-  border-bottom: 1px solid var(--color-border);
-  margin: 2.8rem 0 1rem;
-}
-
 .content > h2 {
   font-size: var(--font-size-content-heading-2);
   font-weight: var(--font-weight-content-heading);
@@ -148,16 +141,10 @@
   font-weight: bold;
 }
 
-.content > blockquote {
-  border-left: 4px solid var(--color-border);
-  padding-left: 1rem;
-  margin: 2rem 0;
-}
-
 .content > hr {
   margin: 4rem 0;
   height: 1px;
-  background-color: var(--color-border);
+  background-color: var(--color-theme-border);
   border: none;
 }
 

src/components/Features/Article/Elements/Plugins/CustomHtml/index.stories.tsx

@@ -1,34 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, within } from 'storybook/test';
 import CustomHtml from '.';
 import '@/styles/plugin.css';
 
-const articleHtml = `
-  <p>カスタムHTMLで挿入される記事本文の表示例です。<strong>強調</strong>や<a href="https://example.com">外部リンク</a>を含みます。</p>
-  <h2>カスタムHTMLの見出し</h2>
-  <p>本文の余白、行間、リンク色などが本番の記事画面と同じことを確認します。</p>
-  <div data-filename="app.ts">
-    <pre><code>export function greeting(name: string) {
-  return \`こんにちは、\${name}さん\`;
-}</code></pre>
-  </div>
-  <h3>表示できる要素</h3>
-  <ul>
-    <li>箇条書き</li>
-    <li>コードブロック</li>
-    <li>引用とテーブル</li>
-  </ul>
-  <blockquote><p>引用文の背景、余白、アイコンを確認します。</p></blockquote>
-  <table>
-    <thead><tr><th>項目</th><th>内容</th></tr></thead>
-    <tbody><tr><td>表示元</td><td>カスタムHTML</td></tr></tbody>
-  </table>
+const googleMapHtml = `
+  <iframe
+    src="https://www.google.com/maps?q=Tokyo&amp;output=embed"
+    title="東京周辺のGoogle Map"
+    width="600"
+    height="450"
+    loading="lazy"
+    referrerpolicy="no-referrer-when-downgrade"
+    style="border:0;"
+  ></iframe>
 `;
 
 const meta = {
   title: 'Content/Article Plugins/Custom HTML',
   component: CustomHtml,
-  args: { html: articleHtml },
   decorators: [
     (Story) => (
       <div className="mx-auto max-w-4xl">
@@ -39,7 +28,7 @@ const meta = {
   parameters: {
     docs: {
       description: {
-        component: '記事本文へ挿入される、サニタイズ済みカスタムHTMLの本番相当表示を確認します。',
+        component: '記事へ埋め込むGoogle Mapのレスポンシブ表示を確認します。',
       },
     },
   },
@@ -49,22 +38,23 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const ArticleContent: Story = {
+export const GoogleMap: Story = {
+  args: { html: googleMapHtml },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const externalLink = canvas.getByRole('link', { name: '外部リンク' });
-    const wrapButton = await canvas.findByRole('button', { name: 'コードを折り返す' });
+    const map = canvas.getByTitle('東京周辺のGoogle Map');
+    const container = map.parentElement;
 
-    await waitFor(() => {
-      expect(externalLink).toHaveAttribute('target', '_blank');
-      expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer');
-    });
+    await expect(map).toHaveAttribute('loading', 'lazy');
+    await expect(container).not.toBeNull();
 
-    await userEvent.click(wrapButton);
-    await expect(wrapButton).toHaveAttribute('aria-pressed', 'true');
-  },
-};
+    if (!container) {
+      throw new Error('Google Map container was not rendered');
+    }
 
-export const Mobile: Story = {
-  globals: { viewport: { value: 'mobile1', isRotated: false } },
+    await expect(map.getBoundingClientRect().width).toBeCloseTo(
+      container.getBoundingClientRect().width,
+      0,
+    );
+  },
 };

src/components/Features/Article/Elements/Plugins/ImageSlider/index.module.css

@@ -63,7 +63,7 @@
   width: 40px !important;
   height: 40px !important;
   padding: 0 !important;
-  border: 1px solid var(--color-theme-light-border) !important;
+  border: 1px solid var(--color-theme-light-muted) !important;
   border-radius: 9999px !important;
   color: var(--color-theme-light-text) !important;
   background: rgb(255 255 255 / 92%) !important;

src/components/Features/Article/Elements/Plugins/RichText/index.module.css

@@ -10,15 +10,8 @@
   margin-top: 0;
 }
 
-.content > h1 {
-  font-size: var(--font-size-content-heading-1);
-  font-weight: var(--font-weight-content-heading);
-  border-bottom: 1px solid var(--color-border);
-  margin: 2.8rem 0 1rem;
-}
-
 .content > h2 {
-  background-color: var(--color-theme-light-border);
+  background-color: var(--color-theme-muted);
   color: var(--color-theme-light-text);
   font-size: var(--font-size-content-heading-2);
   font-weight: var(--font-weight-content-heading);
@@ -27,7 +20,7 @@
 }
 
 .content > h3 {
-  border-color: var(--color-theme-light-border);
+  border-color: var(--color-theme-border);
   color: var(--color-theme-light-text);
   font-size: var(--font-size-content-heading-3);
   font-weight: var(--font-weight-content-heading);
@@ -36,7 +29,7 @@
 }
 
 .content > h4 {
-  border-color: var(--color-theme-light-border);
+  border-color: var(--color-theme-border);
   color: var(--color-theme-light-text);
   font-size: var(--font-size-content-heading-4);
   font-weight: var(--font-weight-content-heading);
@@ -141,16 +134,10 @@
   font-weight: bold;
 }
 
-.content > blockquote {
-  border-left: 4px solid var(--color-border);
-  padding-left: 1rem;
-  margin: 2rem 0;
-}
-
 .content > hr {
   margin: 4rem 0;
   height: 1px;
-  background-color: var(--color-border);
+  background-color: var(--color-theme-border);
   border: none;
 }
 
@@ -171,13 +158,11 @@
 }
 
 :global(body.DarkTheme) .content > h2 {
-  background-color: var(--color-theme-dark-border);
   color: var(--color-theme-dark-text);
 }
 
 :global(body.DarkTheme) .content > h3,
 :global(body.DarkTheme) .content > h4 {
-  border-color: var(--color-theme-dark-border);
   color: var(--color-theme-dark-text);
 }
 

src/components/Features/Article/Elements/Plugins/RichText/index.stories.tsx

@@ -24,12 +24,12 @@ const tableHtml = `
 `;
 
 const articleHtml = `
-  <h1>記事本文の見出し1</h1>
   <p>本文には<strong>強調</strong>や<a href="https://example.com">リンク</a>が含まれます。</p>
   <h2>見出し2</h2>
   <p>段落の余白と行間を確認するための文章です。</p>
   <h3>見出し3</h3>
   <ul><li>箇条書きの項目</li><li>もうひとつの項目</li></ul>
+  <h4>見出し4</h4>
   <ol><li>番号付きの項目</li><li>次の手順</li></ol>
   <blockquote><p>引用として表示される文章です。</p></blockquote>
   <figure><img src="/images/thumbnail/7.webp" alt="記事本文のサンプル画像"><figcaption>画像のキャプション</figcaption></figure>

src/components/Features/Article/index.module.css

@@ -1,5 +1,5 @@
 .title {
-  font-size: 1.8rem;
+  font-size: var(--font-size-article-title);
   font-weight: bold;
   margin-bottom: 24px;
   text-align: left;
@@ -8,7 +8,7 @@
 
 @media (max-width: 640px) {
   .title {
-    font-size: 1.5rem;
+    font-size: var(--font-size-article-title-mobile);
     margin-bottom: 20px;
   }
 }

src/components/Features/Article/index.tsx

@@ -82,7 +82,7 @@ export default function ArticleFeature({ data, relatedArticles }: Props) {
 
   return (
     <>
-      <h1 className={`${styles.title} text-3xl font-bold lg:text-3xl`} data-article-title>
+      <h1 className={styles.title} data-article-title>
         {data.title}
       </h1>
       {data.isSponsored && <SponsoredDisclosure />}

src/stories/Foundations.stories.tsx

@@ -19,18 +19,15 @@ type TypographyToken = {
 const themeColors: ColorToken[] = [
   { name: 'Light background', variable: '--color-theme-light-background', value: '#fff' },
   { name: 'Light text', variable: '--color-theme-light-text', value: '#374151' },
-  { name: 'Light border', variable: '--color-theme-light-border', value: '#d1d5db' },
+  { name: 'Light muted', variable: '--color-theme-light-muted', value: '#d1d5db' },
   { name: 'Dark background', variable: '--color-theme-dark-background', value: '#262626' },
   { name: 'Dark text', variable: '--color-theme-dark-text', value: '#fff' },
-  { name: 'Dark border', variable: '--color-theme-dark-border', value: '#6b7280' },
+  { name: 'Dark muted', variable: '--color-theme-dark-muted', value: '#6b7280' },
 ];
 
 const contentColors: ColorToken[] = [
-  { name: 'Main text', variable: '--color-text-main', value: '#333' },
   { name: 'Secondary text', variable: '--color-text-sub', value: '#767676' },
   { name: 'Subtle background', variable: '--color-bg-sub', value: '#f3f3f3' },
-  { name: 'Border', variable: '--color-border', value: '#ddd' },
-  { name: 'Dark border', variable: '--color-border-dark', value: '#ccc' },
   { name: 'Soft accent background', variable: '--color-accent-soft-bg', value: '#eaf4fc' },
   { name: 'Soft accent text', variable: '--color-accent-soft-text', value: '#111827' },
   { name: 'Link', variable: '--color-link', value: '#1d4ed8' },
@@ -44,9 +41,15 @@ const contentColors: ColorToken[] = [
 
 const typography: TypographyToken[] = [
   {
-    name: 'Heading 1',
-    variable: '--font-size-content-heading-1',
-    value: '2rem',
+    name: 'Article title',
+    variable: '--font-size-article-title',
+    value: '1.8rem',
+    sample: '記事タイトル',
+  },
+  {
+    name: 'Article title (mobile)',
+    variable: '--font-size-article-title-mobile',
+    value: '1.5rem',
     sample: '記事タイトル',
   },
   {
@@ -160,7 +163,10 @@ function TypographyScale() {
       {typography.map(({ name, variable, value, sample }) => {
         const style = {
           fontSize: `var(${variable})`,
-          fontWeight: name.startsWith('Heading') ? 'var(--font-weight-content-heading)' : undefined,
+          fontWeight:
+            name.startsWith('Heading') || name.startsWith('Article title')
+              ? 'var(--font-weight-content-heading)'
+              : undefined,
           lineHeight: name === 'Body' ? 'var(--line-height-content-body)' : undefined,
         } satisfies CSSProperties;