npm - codymaster - Versions diffs - 4.1.4 → 4.3.0 - Mend

codymaster 4.1.4 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (657) hide show

package/skills/cm-ux-master/output/haravan/design-system.html ADDED Viewed

@@ -0,0 +1,914 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo Haravan ~ Tổng quan ~ Haravan — Design System</title>
+    <style>
+        :root {
+            --doc-primary: #2463EB;
+            --doc-bg: #FAFBFC;
+            --doc-surface: #FFFFFF;
+            --doc-text: #111827;
+            --doc-text-secondary: #6B7280;
+            --doc-border: #E5E7EB;
+            --doc-code-bg: #F3F4F6;
+            --doc-radius: 12px;
+            --doc-shadow: 0 1px 3px rgba(0,0,0,0.08);
+        }
+        [data-theme="dark"] {
+            --doc-bg: #0F172A;
+            --doc-surface: #1E293B;
+            --doc-text: #F1F5F9;
+            --doc-text-secondary: #94A3B8;
+            --doc-border: #334155;
+            --doc-code-bg: #1E293B;
+            --doc-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, system-ui, 'Segoe UI', Roboto, 'Inter', sans-serif;
+            background: var(--doc-bg);
+            color: var(--doc-text);
+            line-height: 1.6;
+            transition: background 0.3s, color 0.3s;
+        }
+        .header {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: var(--doc-surface);
+            border-bottom: 1px solid var(--doc-border);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .header-inner {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .header-title {
+            font-size: 20px;
+            font-weight: 700;
+        }
+        .header-badge {
+            background: var(--doc-primary);
+            color: #fff;
+            font-size: 11px;
+            font-weight: 600;
+            padding: 2px 8px;
+            border-radius: 100px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .theme-toggle {
+            background: var(--doc-code-bg);
+            border: 1px solid var(--doc-border);
+            border-radius: 8px;
+            padding: 8px 12px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.2s;
+        }
+        .theme-toggle:hover {
+            border-color: var(--doc-primary);
+        }
+        .main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 32px 24px;
+        }
+        .section {
+            margin-bottom: 48px;
+        }
+        .section-title {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 20px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--doc-border);
+        }
+        .subsection-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 16px 0 12px;
+            color: var(--doc-text-secondary);
+        }
+        /* Intro Grid */
+        .intro-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+        .intro-card {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 16px;
+            box-shadow: var(--doc-shadow);
+        }
+        .intro-label {
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--doc-text-secondary);
+            margin-bottom: 4px;
+        }
+        .intro-value {
+            font-size: 15px;
+            font-weight: 500;
+            word-break: break-all;
+        }
+        .intro-value a {
+            color: var(--doc-primary);
+            text-decoration: none;
+        }
+        /* Color Swatches */
+        .swatch-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+            gap: 12px;
+        }
+        .swatch {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.15s, box-shadow 0.15s;
+        }
+        .swatch:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .swatch-color {
+            height: 72px;
+            width: 100%;
+        }
+        .swatch-info {
+            padding: 10px 12px;
+        }
+        .swatch-name {
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+        .swatch-value {
+            font-size: 11px;
+            color: var(--doc-text-secondary);
+        }
+        /* Typography */
+        .type-specimens {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .type-specimen {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .type-label {
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--doc-text-secondary);
+            margin-bottom: 8px;
+        }
+        .type-sample {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .type-heading-sample {
+            font-size: 28px;
+            font-weight: 700;
+        }
+        .type-body-sample {
+            line-height: 1.6;
+        }
+        .type-muted-sample {
+            color: var(--doc-text-secondary);
+            line-height: 1.6;
+        }
+        /* Geometry */
+        .geo-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+        .geo-item {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        .geo-preview {
+            width: 48px;
+            height: 48px;
+            background: var(--doc-primary);
+            flex-shrink: 0;
+        }
+        .geo-shadow {
+            background: var(--doc-surface);
+            border-radius: 8px;
+        }
+        .geo-label {
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+        .geo-info code {
+            font-size: 11px;
+            color: var(--doc-text-secondary);
+        }
+        /* Components */
+        .component-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 16px;
+        }
+        .component-card {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .component-card h4 {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: var(--doc-text-secondary);
+        }
+        .component-row {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        .comp-btn {
+            padding: 8px 16px;
+            border: none;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+        .comp-btn:hover { opacity: 0.9; }
+        .comp-card-preview {
+            padding: 16px;
+        }
+        .comp-card-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .comp-card-body {
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .comp-input {
+            width: 100%;
+            padding: 10px 12px;
+            font-size: 14px;
+            background: var(--doc-bg);
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        .comp-input:focus {
+            border-color: var(--doc-primary) !important;
+        }
+        .comp-tag {
+            display: inline-block;
+            padding: 4px 10px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        /* Token Table */
+        .table-wrapper {
+            overflow-x: auto;
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+        }
+        .token-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        .token-table th {
+            background: var(--doc-code-bg);
+            padding: 10px 16px;
+            text-align: left;
+            font-weight: 600;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid var(--doc-border);
+        }
+        .token-table td {
+            padding: 8px 16px;
+            border-bottom: 1px solid var(--doc-border);
+            vertical-align: middle;
+        }
+        .token-table tr:last-child td {
+            border-bottom: none;
+        }
+        .token-table tr:hover {
+            background: var(--doc-code-bg);
+        }
+        .token-color-preview {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+            vertical-align: middle;
+            margin-right: 8px;
+            border: 1px solid var(--doc-border);
+        }
+        /* Usage */
+        .usage-blocks {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .usage-block {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .usage-block h4 {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+        .usage-block pre {
+            background: var(--doc-code-bg);
+            border-radius: 8px;
+            padding: 16px;
+            overflow-x: auto;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+        code {
+            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+        }
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 24px;
+            font-size: 13px;
+            color: var(--doc-text-secondary);
+            border-top: 1px solid var(--doc-border);
+        }
+        /* Toast */
+        .toast {
+            position: fixed;
+            bottom: -60px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--doc-text);
+            color: var(--doc-bg);
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            transition: bottom 0.3s;
+            z-index: 999;
+        }
+        .toast.show {
+            bottom: 24px;
+        }
+        /* Responsive */
+        @media (max-width: 640px) {
+            .intro-grid { grid-template-columns: 1fr 1fr; }
+            .swatch-grid { grid-template-columns: repeat(2, 1fr); }
+            .component-grid { grid-template-columns: 1fr; }
+            .geo-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-inner">
+            <div class="header-left">
+                <h1 class="header-title">Demo Haravan ~ Tổng quan ~ Haravan</h1>
+                <span class="header-badge">Design System</span>
+            </div>
+            <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
+                <span class="toggle-icon" id="themeIcon">☀️</span>
+            </button>
+        </div>
+    </header>
+    <main class="main">
+        <!-- Section 1: Introduction -->
+        <section class="section" id="introduction">
+            <h2 class="section-title">Introduction</h2>
+            <div class="intro-grid">
+                <div class="intro-card">
+                    <div class="intro-label">Project</div>
+                    <div class="intro-value">Demo Haravan ~ Tổng quan ~ Haravan</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Source</div>
+                    <div class="intro-value"><a href="https://showcase.myharavan.com/admin/dashboard/generals?startDate=2026-02-25&amp;endDate=2026-02-25" target="_blank" rel="noopener">https://showcase.myharavan.com/admin/dashboard/generals?startDate=2026-02-25&amp;endDate=2026-02-25</a></div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Pages Scanned</div>
+                    <div class="intro-value">1</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Tokens Extracted</div>
+                    <div class="intro-value">19</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Last Updated</div>
+                    <div class="intro-value">2026-02-25</div>
+                </div>
+            </div>
+        </section>
+        <!-- Section 2: Color Palette -->
+        <section class="section" id="colors">
+            <h2 class="section-title">🎨 Color Palette</h2>
+        <h3 class="subsection-title">Brand Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#2463EB')">
+                <div class="swatch-color" style="background: #2463EB"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary</div>
+                    <code class="swatch-value">#2463EB</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#1C4FBC')">
+                <div class="swatch-color" style="background: #1C4FBC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Active</div>
+                    <code class="swatch-value">#1C4FBC</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#2059D3')">
+                <div class="swatch-color" style="background: #2059D3"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Hover</div>
+                    <code class="swatch-value">#2059D3</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#DEE7FC')">
+                <div class="swatch-color" style="background: #DEE7FC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Light Default</div>
+                    <code class="swatch-value">#DEE7FC</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Semantic Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#FFFBEB')">
+                <div class="swatch-color" style="background: #FFFBEB"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning</div>
+                    <code class="swatch-value">#FFFBEB</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#CCC8BC')">
+                <div class="swatch-color" style="background: #CCC8BC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning Active</div>
+                    <code class="swatch-value">#CCC8BC</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#E5E1D3')">
+                <div class="swatch-color" style="background: #E5E1D3"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning Hover</div>
+                    <code class="swatch-value">#E5E1D3</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Surface Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('16px')">
+                <div class="swatch-color" style="background: 16px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Large</div>
+                    <code class="swatch-value">16px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('8px')">
+                <div class="swatch-color" style="background: 8px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Medium</div>
+                    <code class="swatch-value">8px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#F3F4F6')">
+                <div class="swatch-color" style="background: #F3F4F6"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 0</div>
+                    <code class="swatch-value">#F3F4F6</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#FFFFFF')">
+                <div class="swatch-color" style="background: #FFFFFF"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 1</div>
+                    <code class="swatch-value">#FFFFFF</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#111827')">
+                <div class="swatch-color" style="background: #111827"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 2</div>
+                    <code class="swatch-value">#111827</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#E5E7EB')">
+                <div class="swatch-color" style="background: #E5E7EB"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Border</div>
+                    <code class="swatch-value">#E5E7EB</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Text Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#111827')">
+                <div class="swatch-color" style="background: #111827"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 0</div>
+                    <code class="swatch-value">#111827</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#111827')">
+                <div class="swatch-color" style="background: #111827"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 1</div>
+                    <code class="swatch-value">#111827</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#4B5563')">
+                <div class="swatch-color" style="background: #4B5563"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 2</div>
+                    <code class="swatch-value">#4B5563</code>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 3: Typography -->
+        <section class="section" id="typography">
+            <h2 class="section-title">🔤 Typography</h2>
+        <div class="type-specimens">
+            <div class="type-specimen">
+                <div class="type-label">Font Family</div>
+                <div class="type-sample" style="font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif">-apple-system</div>
+                <code>-apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif</code>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Heading</div>
+                <div class="type-heading-sample" style="font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif">The quick brown fox jumps over the lazy dog</div>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Body (14px)</div>
+                <div class="type-body-sample" style="font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif; font-size: 14px">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+                </div>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Muted</div>
+                <div class="type-muted-sample" style="font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif; font-size: 14px">
+                    Secondary text, captions, and supplementary information.
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 4: Geometry -->
+        <section class="section" id="geometry">
+            <h2 class="section-title">📐 Geometry</h2>
+        <div class="geo-grid">
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Shadow Elevated</div>
+                    <code>rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px</code>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 5: Components Preview -->
+        <section class="section" id="components">
+            <h2 class="section-title">🧱 Components Preview</h2>
+        <div class="component-grid">
+            <!-- Buttons -->
+            <div class="component-card">
+                <h4>Buttons</h4>
+                <div class="component-row">
+                    <button class="comp-btn comp-btn-primary" style="background:#2463EB; border-radius:8px; color:#fff">Primary</button>
+                    <button class="comp-btn comp-btn-outline" style="border: 1px solid #E5E7EB; border-radius:8px; color:#111827; background:transparent">Secondary</button>
+                    <button class="comp-btn comp-btn-danger" style="background:#EF4444; border-radius:8px; color:#fff">Danger</button>
+                </div>
+            </div>
+            <!-- Card -->
+            <div class="component-card">
+                <h4>Card</h4>
+                <div class="comp-card-preview" style="background:#FFFFFF; border-radius:16px; box-shadow:rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px; border:1px solid #E5E7EB">
+                    <div class="comp-card-title" style="color:#111827">Card Title</div>
+                    <div class="comp-card-body" style="color:#111827">Card content with the extracted design tokens applied.</div>
+                </div>
+            </div>
+            <!-- Input -->
+            <div class="component-card">
+                <h4>Input</h4>
+                <input type="text" class="comp-input" placeholder="Enter text..." style="border: 1px solid #E5E7EB; border-radius:8px; color:#111827">
+            </div>
+            <!-- Tags -->
+            <div class="component-card">
+                <h4>Tags</h4>
+                <div class="component-row">
+                    <span class="comp-tag" style="background:#2463EB20; color:#2463EB; border-radius:8px">Primary</span>
+                    <span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:8px">Success</span>
+                    <span class="comp-tag" style="background:#FFFBEB20; color:#FFFBEB; border-radius:8px">Warning</span>
+                    <span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:8px">Danger</span>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 6: Token Reference -->
+        <section class="section" id="tokens">
+            <h2 class="section-title">📋 Token Reference</h2>
+        <div class="table-wrapper">
+            <table class="token-table">
+                <thead>
+                    <tr>
+                        <th>Variable</th>
+                        <th>Value</th>
+                        <th>Category</th>
+                    </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td><code>--semi-border-radius-large</code></td>
+                    <td><span class="token-color-preview" style="background:16px"></span> 16px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-medium</code></td>
+                    <td><span class="token-color-preview" style="background:8px"></span> 8px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-0</code></td>
+                    <td><span class="token-color-preview" style="background:#F3F4F6"></span> #F3F4F6</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-1</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-2</code></td>
+                    <td><span class="token-color-preview" style="background:#111827"></span> #111827</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-border</code></td>
+                    <td><span class="token-color-preview" style="background:#E5E7EB"></span> #E5E7EB</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary</code></td>
+                    <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-active</code></td>
+                    <td><span class="token-color-preview" style="background:#1C4FBC"></span> #1C4FBC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#2059D3"></span> #2059D3</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-light-default</code></td>
+                    <td><span class="token-color-preview" style="background:#DEE7FC"></span> #DEE7FC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-0</code></td>
+                    <td><span class="token-color-preview" style="background:#111827"></span> #111827</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-1</code></td>
+                    <td><span class="token-color-preview" style="background:#111827"></span> #111827</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-2</code></td>
+                    <td><span class="token-color-preview" style="background:#4B5563"></span> #4B5563</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFBEB"></span> #FFFBEB</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning-active</code></td>
+                    <td><span class="token-color-preview" style="background:#CCC8BC"></span> #CCC8BC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#E5E1D3"></span> #E5E1D3</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-family-regular</code></td>
+                    <td> -apple-system, system-ui, Segoe UI, Roboto, Inter, sans-serif</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-regular</code></td>
+                    <td> 14px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-shadow-elevated</code></td>
+                    <td> rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px</td>
+                    <td>Shadow</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        </section>
+        <!-- Section 7: Usage -->
+        <section class="section" id="usage">
+            <h2 class="section-title">⚙️ Usage</h2>
+        <div class="usage-blocks">
+            <div class="usage-block">
+                <h4>1. CSS Import</h4>
+                <pre><code>/* Import the theme override in your main CSS/entry */
+@import './semi-theme-override.css';
+/* Or in HTML */
+&lt;link rel="stylesheet" href="semi-theme-override.css"&gt;</code></pre>
+            </div>
+            <div class="usage-block">
+                <h4>2. React Setup (Semi Design)</h4>
+                <pre><code>// Install Semi UI
+npm install @douyinfe/semi-ui
+// Import theme override AFTER Semi default styles
+import '@douyinfe/semi-ui/dist/css/semi.min.css';
+import './semi-theme-override.css';</code></pre>
+            </div>
+            <div class="usage-block">
+                <h4>3. Figma Tokens</h4>
+                <pre><code>// Import figma-tokens.json into Tokens Studio plugin
+// File → Import → Select figma-tokens.json
+// Apply Demo Haravan ~ Tổng quan ~ Haravan theme set</code></pre>
+            </div>
+        </div>
+        </section>
+    </main>
+    <footer class="footer">
+        <p>Generated by <strong>UX Master — Semi-Sync Harvester</strong></p>
+    </footer>
+    <div class="toast" id="toast">Copied!</div>
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const current = html.getAttribute('data-theme');
+            const next = current === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', next);
+            document.getElementById('themeIcon').textContent = next === 'dark' ? '🌙' : '☀️';
+            localStorage.setItem('theme', next);
+        }
+        function copyColor(value) {
+            navigator.clipboard.writeText(value).then(() => {
+                const toast = document.getElementById('toast');
+                toast.textContent = 'Copied: ' + value;
+                toast.classList.add('show');
+                setTimeout(() => toast.classList.remove('show'), 2000);
+            });
+        }
+        // Restore saved theme
+        (function() {
+            const saved = localStorage.getItem('theme');
+            if (saved) {
+                document.documentElement.setAttribute('data-theme', saved);
+                document.getElementById('themeIcon').textContent = saved === 'dark' ? '🌙' : '☀️';
+            }
+        })();
+    </script>
+</body>
+</html>