@cyberskill/design 2.8.0 → 2.9.0

package/docs/vi/storybook.md

@@ -19,7 +19,7 @@ Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill
   - `States` (hoặc subsection Matrix) cho `disabled` / `loading` / `error` / `busy` khi có argTypes
   - Mọi option enum `size` / `variant` gắn trong story họ matrix
   - `FullMatrix` khi ≥1 trong {size enums, variant enums, state keys} — tích size × variant × key-state qua helper `stories/lib/matrix.jsx`
-- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (cùng trục với templates / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành. Style chỉ có **liquid-glass**.
+- Toolbar globals: Theme (light · dark · **system**) × Element × Language (`vi` · `en`) × Style (`liquid-glass` · `matte-paper`; cùng trục với templates / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành.
 - **Docs/** tài liệu operator đã xuất bản — **Start / Guides / Maintainers**, MDX curated, một story sidebar mỗi trang markdown trong danh mục công khai, và iframe Thư viện tài liệu `/docs/viewer.html` (EN·VI). Prose canonical vẫn `docs/*.md`. **Release Notes/** prose curated (**không CHANGELOG.md**); **Status/** embed `_audit/run.html` full-bleed
 - **Templates/** điểm bắt đầu công khai — Gallery (tier Templates của Atomic View + kitchen-sink/playground) và mọi template manifest theo category Atomic View (gồm **HR** / `vn-*`). Regen CSF bằng `node scripts/generate-template-stories.mjs` sau khi đổi tên template
 - **Pages/** UI kit công khai (Status Hub, Marketing site, Slide deck)

package/guidance/agent-contract.json

@@ -3,7 +3,7 @@
   "interpretation": "Generated policy/routing projection, not runtime, host-loading, human acceptance or release certification.",
   "sourceHashes": {
     "scripts/guidance-source.json": "1e8d71a99895dac5a42b41424a42e3b6b8b82cd421e04c553c52581d33d44b9e",
-    "docs/doctrine.md": "25b5c51ba0bb38b8486b625124dcf6b90af8ac97e7518ab2cd92ff10b84eef54"
+    "docs/doctrine.md": "bc1a734b83fdb24da396a57099bdb1a5ff5ecb04d4034e98169dd99090c3aca0"
   },
   "authorities": {
     "entry": "SKILL.md",
@@ -65,11 +65,11 @@
     "Language": "Vietnamese-first; every UI string ships an EN + VN pair",
     "Accessibility floor": "APCA Lc ≥ 75 body text; focus rings never removed; ≥ 44px touch targets",
     "Axes": "Theme × Element × Language × Style (independent)",
-    "Style pack": "liquid-glass (sole pack; absent ≡ default)"
+    "Style pack": "liquid-glass (default; absent ≡ default) · matte-paper"
   },
   "normative": {
     "Expansion rule": "When **anything** in this system grows, update **every deliverable in the same change**:\n\n1. Tokens and source (`tokens/`, component `.jsx` + `.d.ts` + `.prompt.md`).\n2. Specimen cards (guidelines plus the component group card) **and any related guideline pages**.\n3. **All** templates (tweak enums, EL/EX maps, swept accents).\n4. UI kits — Thổ-faithful kit pages; axis demos via Storybook toolbar and Atomic View (Identity Lab is retired).\n5. Docs: README (counts follow `docs/reference-catalog.json`), `SKILL.md`, this file, `docs/conventions.md`, **and every related document the change touches** (kit READMEs, `docs/products.md`, `docs/contrast-report.md` regeneration after token changes). Publish the same pages through Storybook Docs (see `docs/storybook.md`). **Do not maintain a changelog file** — track `VERSION`. Continuity is git history plus curated Release Notes.\n6. Browsable and health surfaces: a new or changed component gets an Atomic View story in `guidelines/atomic-view.html` (plus a live playground if it has tweakable props — `_audit/story-coverage.html` enforces the story) and behavior coverage in `_audit/component-behavior-test.html` if interactive; any new axis, tool, or tab is wired into `_audit/index.html` and Storybook **Status** (full-bleed `_audit/run.html` — `dashboard.html` is redirect-only); the matching deterministic gate is added or updated (`contrast-guard` for new colour rules, `token-contract` plus the contrast matrix for tokens, `story-coverage` for components, `docs-storybook-coverage` for published docs).\n\n**Gate:** `_audit/run.html` (all fast gates, including `docs-consistency`) green **plus** `npm run test:unit` **plus** a source search for the old enum or list to prove nothing was left behind. Sessions with an external Design Components compiler additionally run its `check_design_system`; this is not an in-repository command.\n\nDocumented scope boundaries (doctrine, not gaps): UI-kit pages remain Thổ-faithful recreations; bilingual EN·VN covers emails plus team, legal, and finance docs (client and media collateral is EN-first); text never sits on the mid-tone `-accent`.",
     "Verification depth": "Deep checks, never surface spot-checks. Cover the **whole set and every relevant state** — not a sample. Prefer deterministic, programmatic scans that touch **every** item (for example EN/VI key-parity, hole-coverage, and leak scan across all templates; computed-style and overflow probes at every breakpoint via the `_audit/` harnesses using `__dcSetProps` for each declared language/theme prop and verifying the rendered state; `__dc_theme` changes only the optional authoring canvas background), then add representative visual or export confirmation on top. A few screenshots are evidence, not proof. Never call work verified because it was “spot-checked” when a complete check is feasible; if a full check truly is not feasible, say so explicitly and state what was and was not covered. Language, theme, and responsive states each get their own pass — one language, width, or theme rendering cleanly is not evidence for the others.",
-    "Immutables": "| Immutable | Value |\n|---|---|\n| Slogan | *Turn Your Will Into Real* / *Hiện Thực Hoá Ý Chí* |\n| Primary brand | Umber `#45210E` |\n| Primary accent | Ochre `#F4BA17` |\n| Voice | warm · direct · honest · respectful (all four at once) |\n| Language | Vietnamese-first; every UI string ships an EN + VN pair |\n| Accessibility floor | APCA Lc ≥ 75 body text; focus rings never removed; ≥ 44px touch targets |\n| Axes | Theme × Element × Language × Style (independent) |\n| Style pack | liquid-glass (sole pack; absent ≡ default) |\n\nOne accent per surface. Semantic statuses and the composite focus indicator (text-primary contour + ochre halo) are never elemental. Lumi stays golden in every element."
+    "Immutables": "| Immutable | Value |\n|---|---|\n| Slogan | *Turn Your Will Into Real* / *Hiện Thực Hoá Ý Chí* |\n| Primary brand | Umber `#45210E` |\n| Primary accent | Ochre `#F4BA17` |\n| Voice | warm · direct · honest · respectful (all four at once) |\n| Language | Vietnamese-first; every UI string ships an EN + VN pair |\n| Accessibility floor | APCA Lc ≥ 75 body text; focus rings never removed; ≥ 44px touch targets |\n| Axes | Theme × Element × Language × Style (independent) |\n| Style pack | liquid-glass (default; absent ≡ default) · matte-paper |\n\nOne accent per surface. Semantic statuses and the composite focus indicator (text-primary contour + ochre halo) are never elemental. Lumi stays golden in every element."
   }
 }

package/guidelines/atomic-view.html

@@ -31,8 +31,9 @@
   .motion-embed{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);margin:16px 0}
   .motion-embed iframe{width:100%;height:352px;border:0;display:block;background:var(--cs-color-surface-page)}
   main{min-width:0}
-  .toolbar{position:sticky;top:1px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:12px 22px;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--cs-color-border-default)}
-  @media (prefers-reduced-transparency: reduce){.toolbar{backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  .toolbar{position:sticky;top:1px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:12px 22px;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block-end:1px solid var(--cs-color-border-default)}
+  @media (prefers-reduced-transparency: reduce){.toolbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  [data-cs-style="matte-paper"] .toolbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}
   .toolbar h1{font-size:15px;margin:0;letter-spacing:-.01em}
   .ctl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cs-color-text-muted)}
   .ctl select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-sm);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
@@ -56,7 +57,6 @@
   .framed .cs-dialog{top:22px}
   .srow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
   #canvas button:not(.cs-switch){min-block-size:32px;max-block-size:52px}
-  @media (max-width:768px),(min-width:1024px){:root,body,#canvas{--cs-font-weight-medium:600;--cs-font-weight-semibold:600;--cs-font-weight-extrabold:700}.brand,.navtier,.navsub,.grphead,.tierhead,.cs-stat__value{font-weight:700}.cs-combobox input,.cs-igroup>input,.cs-taginput>input,.cs-cal__grid button,.cs-datepicker__field,.cs-treeselect__field,.cs-cascader__opt,.cs-terminal__body,[style*="font-weight: 500"],[style*="font-weight:500"]{font-weight:600!important}[style*="font-weight: 800"],[style*="font-weight:800"]{font-weight:700!important}}
   .srow .cs-slider{inline-size:160px;flex:none!important}
   .srow button,.srow a,.cs-datagrid__sort,.cs-navmenu__top{white-space:nowrap}
   .cs-datagrid thead th{inset-block-start:1px}
@@ -389,7 +389,7 @@ const STORIES = [
   { tier:"Organism", name:"DataGrid", grp:"Data", render:(L)=> <GridD L={L}/> },
   { tier:"Organism", name:"TreeTable", grp:"Data", render:(L)=> has(TreeTable)?<TreeTable defaultExpanded={["p"]} columns={[{key:"name",header:L==="vi"?"Hạng mục":"Item"},{key:"pct",header:L==="vi"?"Tiến độ":"Progress"}]} nodes={[{key:"p",name:L==="vi"?"Nền tảng":"Platform",pct:"70%",children:[{key:"ds",name:"Design System",pct:"72%"},{key:"tok",name:"Token Pipeline",pct:"66%"}]},{key:"ai",name:"AI",pct:"58%",children:[{key:"lumi",name:"Lumi Genie",pct:"58%"}]}]}/>:<Miss n="TreeTable"/> },
   { tier:"Organism", name:"Sortable", grp:"Data", render:(L)=> <SortD L={L}/> },
-  { tier:"Organism", name:"Masonry", grp:"Data", render:(L)=> has(Masonry)?<Masonry columns={3} gap={12}>{[64,110,80,140,72,96].map((h,i)=><div key={i} style={{height:h,background:"var(--cs-accent-tint)",border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",display:"grid",placeItems:"center",fontSize:12,color:"var(--cs-color-text-muted)"}}>{(L==="vi"?"Thẻ ":"Card ")+(i+1)}</div>)}</Masonry>:<Miss n="Masonry"/> },
+  { tier:"Organism", name:"Masonry", grp:"Data", render:(L)=> has(Masonry)?<Masonry columns={3} gap={12}>{[64,110,80,140,72,96].map((h,i)=><div key={i} style={{height:h,background:"var(--cs-color-surface-raised)",border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",display:"grid",placeItems:"center",fontSize:12,color:"var(--cs-color-text-muted)"}}>{(L==="vi"?"Thẻ ":"Card ")+(i+1)}</div>)}</Masonry>:<Miss n="Masonry"/> },
   { tier:"Organism", name:"Splitter", grp:"Data", render:(L)=> has(Splitter)?<Splitter height={170} initial={45} start={<div style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Khung trái — kéo thanh chia.":"Left pane — drag the divider."}</div>} end={<div style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Khung phải.":"Right pane."}</div>}/>:<Miss n="Splitter"/> },
   { tier:"Organism", name:"HotKeys", grp:"Navigation", render:(L)=> has(HotKeys,Kbd)?<HotKeys bindings={[{keys:"mod+k",description:L==="vi"?"Bảng lệnh":"Command palette"},{keys:"mod+s",description:L==="vi"?"Lưu":"Save"}]}><span style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Nhấn ":"Press "}<Kbd>?</Kbd>{L==="vi"?" để xem phím tắt.":" for the shortcut sheet."}</span></HotKeys>:<Miss n="HotKeys"/> },
   { tier:"Organism", name:"Dock", grp:"Navigation", render:(L)=> has(Dock,Icon)?<Dock label="Apps" items={[{icon:<Icon name="chat"/>,label:"Lumi",active:true},{icon:<Icon name="calendar"/>,label:L==="vi"?"Lịch":"Calendar"},{icon:<Icon name="sliders"/>,label:L==="vi"?"Cài đặt":"Settings"},{icon:<Icon name="search"/>,label:L==="vi"?"Tìm kiếm":"Search"}]}/>:<Miss n="Dock"/> },
@@ -418,7 +418,7 @@ const STORIES = [
 
   { tier:"Organism", name:"OverlayProvider", grp:"Overlays", framed:true, render:(L)=> has(OverlayProvider,Dialog,Button)?<OverlayProvider><p style={{fontSize:13,color:"var(--cs-color-text-muted)",maxInlineSize:"var(--cs-prose-measure,45rem)"}}>{L==="vi"?"Provider gắn #cs-overlay-root và xếp chồng Escape/scroll-lock cho modal lồng nhau.":"Provider mounts #cs-overlay-root and stacks Escape/scroll-lock for nested modals."}</p><DialogDemo title="Nested-safe dialog" startOpen={false}/></OverlayProvider>:<Miss n="OverlayProvider"/> },
 
-  { tier:"Organism", name:"Popover", grp:"Overlays", framed:true, controls:[{k:"trigger",type:"text",def:"Filter ▾"}], renderC:(v)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{v.trigger}</Button>}><RadioGroup legend="Status" defaultValue="active" options={[{value:"active",label:"In progress"},{value:"done",label:"Shipped"}]}/></Popover></div>:<Miss n="Popover"/>, render:(L)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{L==="vi"?"Lọc ▾":"Filter ▾"}</Button>}><RadioGroup legend={L==="vi"?"Trạng thái":"Status"} defaultValue="active" options={L==="vi"?[{value:"active",label:"Đang làm"},{value:"done",label:"Đã ra mắt"},{value:"hold",label:"Bị chặn"}]:[{value:"active",label:"In progress"},{value:"done",label:"Shipped"},{value:"hold",label:"Blocked"}]}/></Popover></div>:<Miss n="Popover"/> },
+  { tier:"Organism", name:"Popover", grp:"Overlays", framed:true, controls:[{k:"trigger",type:"text",def:"Filter ▾"}], renderC:(v)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover portal={false} open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{v.trigger}</Button>}><RadioGroup legend="Status" defaultValue="active" options={[{value:"active",label:"In progress"},{value:"done",label:"Shipped"}]}/></Popover></div>:<Miss n="Popover"/>, render:(L)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover portal={false} open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{L==="vi"?"Lọc ▾":"Filter ▾"}</Button>}><RadioGroup legend={L==="vi"?"Trạng thái":"Status"} defaultValue="active" options={L==="vi"?[{value:"active",label:"Đang làm"},{value:"done",label:"Đã ra mắt"},{value:"hold",label:"Bị chặn"}]:[{value:"active",label:"In progress"},{value:"done",label:"Shipped"},{value:"hold",label:"Blocked"}]}/></Popover></div>:<Miss n="Popover"/> },
   { tier:"Organism", name:"Conversation (PromptInput + ChatMessage)", grp:"AI-native", render:(L)=> has(ChatMessage)?<div style={{maxWidth:520}}><div className="cs-chat" style={{marginBottom:12}}><ChatMessage role="lumi">{L==="vi"?"Xin chào, mình là Lumi. Hãy nói điều ước của bạn — mình sẽ tư vấn thẳng thắn trước khi hỏi bất kỳ điều gì.":"Hello, I'm Lumi. Tell me a wish, and I'll share plain advice before asking for anything."}</ChatMessage><ChatMessage role="user">{L==="vi"?"Một trang thanh toán nhanh hơn.":"A faster checkout."}</ChatMessage><ChatMessage role="lumi">{L==="vi"?"Một điều ước đáng thực hiện — mình nên gọi bạn là gì?":"A wish worth granting — what should I call you?"}</ChatMessage></div><PromptD L={L}/></div>:<Miss n="ChatMessage"/> },
   { tier:"Organism", name:"HumanReviewGate", grp:"AI-native", controls:[{k:"risk",type:"text",def:"High-stakes · billing change"},{k:"summary",type:"text",def:"Move client to annual + prorated credit."},{k:"reviewer",type:"text",def:"Ops on call"}], renderC:(v)=> has(HumanReviewGate)?<div style={{maxWidth:520}}><HumanReviewGate risk={v.risk} summary={v.summary} reviewer={v.reviewer}/></div>:<Miss n="HumanReviewGate"/>, render:()=> has(HumanReviewGate)?<div style={{maxWidth:520}}><HumanReviewGate risk="High-stakes · billing change" summary="Lumi proposes moving this client to the annual plan and issuing a prorated credit." reviewer="Ops on call"/></div>:<Miss n="HumanReviewGate"/> },
 ];
@@ -435,7 +435,7 @@ const ELEMENTS = [
   ["moc|","Mộc · leaf (middle)"],["moc|bamboo","Mộc · bamboo (soft)"],["moc|forest","Mộc · forest (deep)"],
   ["kim|","Kim · champagne (middle)"],["kim|titanium","Kim · titanium (soft)"],["kim|steel","Kim · steel (deep)"],
 ];
-const LANGS = [["","Default"],["en","English"],["vi","Tiếng Việt"],["ja","日本語 (spike)"]];
+const LANGS = [["vi","Tiếng Việt"],["en","English"]];
 const DENSITIES = [["comfortable","Comfortable"],["compact","Compact"]];
 const CONTRASTS = [["standard","Standard"],["high","High"]];
 const PAGES = [
@@ -607,7 +607,7 @@ function App(){
             <select value={el} onChange={(e)=>setEl(e.target.value)}>{ELEMENTS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
           </label>
           <label className="ctl">Style
-            <select value={style} onChange={(e)=>setStyle(e.target.value)}><option value="liquid-glass">Liquid glass</option></select>
+            <select value={style} onChange={(e)=>setStyle(e.target.value)}><option value="liquid-glass">Liquid glass</option><option value="matte-paper">Matte paper</option></select>
           </label>
           <label className="ctl">Language
             <select value={lang} onChange={(e)=>setLang(e.target.value)}>{LANGS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>

package/guidelines/brand-imagery.html

@@ -5,7 +5,7 @@
 <link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
-  .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; overflow: hidden; }
+  .stage { position: relative; min-height: 260px; background-color: var(--cs-color-brand-umber); background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; overflow: hidden; }
   .lumi { position: absolute; right: 34px; bottom: -6px; height: 250px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
   .copy { position: absolute; left: 26px; top: 24px; max-width: 340px; color: #fff; }
   .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-brand-ochre); }

package/guidelines/colors-surfaces.html

@@ -16,9 +16,9 @@
 </head>
 <body>
 <div class="row">
-  <div class="sw" style="background:#FFFDF8"><div class="nm">surface-page</div><div class="hex">#FFFDF8</div></div>
-  <div class="sw" style="background:#FFFFFF"><div class="nm">surface-panel</div><div class="hex">#FFFFFF</div></div>
-  <div class="sw" style="background:#FBF4E9"><div class="nm">surface-raised</div><div class="hex">#FBF4E9</div></div>
-  <div class="sw" style="background:#E7D9C6"><div class="nm">border-default</div><div class="hex">#E7D9C6</div></div>
+  <div class="sw" style="background:var(--cs-color-surface-page)"><div class="nm">surface-page</div><div class="hex">#FFFDF8</div></div>
+  <div class="sw" style="background:var(--cs-color-surface-panel)"><div class="nm">surface-panel</div><div class="hex">#FFFFFF</div></div>
+  <div class="sw" style="background:var(--cs-color-surface-raised)"><div class="nm">surface-raised</div><div class="hex">#FBF4E9</div></div>
+  <div class="sw" style="background:var(--cs-color-border-default)"><div class="nm">border-default</div><div class="hex">#E7D9C6</div></div>
 </div>
 </body></html>

package/guidelines/colors-text.html

@@ -17,9 +17,9 @@
 </head>
 <body>
 <div class="grid">
-  <div class="item"><span class="chip" style="background:#45210E"></span><div><div class="t" style="color:#45210E">text-primary · Aa</div><div class="m">#45210E</div></div></div>
-  <div class="item"><span class="chip" style="background:#6E5A4C"></span><div><div class="t" style="color:#6E5A4C">text-muted · Aa</div><div class="m">#6E5A4C</div></div></div>
-  <div class="item"><span class="chip" style="background:#6E3B0E"></span><div><div class="t" style="color:#6E3B0E">text-accent · Aa</div><div class="m">#6E3B0E · links</div></div></div>
-  <div class="item"><span class="chip" style="background:#45210E;display:grid;place-items:center;color:#fff;font-weight:700">Aa</span><div><div class="t" style="color:#45210E">text-inverse</div><div class="m">#FFFFFF on umber</div></div></div>
+  <div class="item"><span class="chip" style="background:var(--cs-color-text-primary)"></span><div><div class="t" style="color:var(--cs-color-text-primary)">text-primary · Aa</div><div class="m">#45210E</div></div></div>
+  <div class="item"><span class="chip" style="background:var(--cs-color-text-muted)"></span><div><div class="t" style="color:var(--cs-color-text-muted)">text-muted · Aa</div><div class="m">#5E4436</div></div></div>
+  <div class="item"><span class="chip" style="background:var(--cs-color-text-accent)"></span><div><div class="t" style="color:var(--cs-color-text-accent)">text-accent · Aa</div><div class="m">#6E3B0E · links</div></div></div>
+  <div class="item"><span class="chip" style="background:var(--cs-color-text-primary);display:grid;place-items:center;color:var(--cs-color-text-inverse);font-weight:700">Aa</span><div><div class="t" style="color:var(--cs-color-text-primary)">text-inverse</div><div class="m">#FFFFFF on umber</div></div></div>
 </div>
 </body></html>

package/guidelines/elements-components.html

@@ -5,12 +5,12 @@
 <link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:420px;overflow:clip;box-sizing:border-box;padding:28px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
-.col{border:1px solid #E7D9C6;border-radius:12px;background:#fff;padding:14px;display:grid;gap:10px;align-content:start}
+.col{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);padding:14px;display:grid;gap:10px;align-content:start}
 .el{font-weight:800;font-size:14px}
-.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cs-accent-bright);color:var(--cs-accent-ink);font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:999px}
+.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cs-accent-bright);color:var(--_cs-light-accent-ink,var(--cs-color-brand-umber));font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:999px}
 .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;color:var(--cs-color-text-accent)}
 .badge{display:inline-block;background:var(--_cs-light,var(--cs-accent-tint)) var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 22%,var(--cs-color-surface-panel)));color:var(--_cs-light,var(--cs-color-text-accent)) var(--_cs-dark,var(--cs-accent-bright));font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;width:fit-content}
-.bar{height:8px;border-radius:99px;background:#FBF4E9;overflow:hidden}
+.bar{height:8px;border-radius:99px;background:var(--cs-color-surface-raised);overflow:hidden}
 .bar span{display:block;height:100%;width:64%;background:var(--cs-accent);border-radius:99px}
 .dark{background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);border-radius:9px;padding:10px 12px;font-size:12px}
 .dark b{color:inherit}

package/guidelines/elements-concept.html

@@ -44,7 +44,7 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-brand-umber)}
       <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#F4BA17,#BFB29B)"></span><span style="font-size:12px;font-weight:700;width:96px">Thổ → Kim</span></div>
       <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#BFB29B,#4E8E9B)"></span><span style="font-size:12px;font-weight:700;width:96px">Kim → Thủy</span></div>
       <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#4E8E9B,#7A9B57)"></span><span style="font-size:12px;font-weight:700;width:96px">Thủy → Mộc</span></div>
-      <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#E0632B,#4E8E9B);position:relative"><span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:0.08em" lang="vi">TƯƠNG KHẮC — KHÔNG DÙNG</span></span><span style="font-size:12px;font-weight:700;width:96px;text-decoration:line-through">Hỏa × Thủy</span></div>
+      <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#E0632B,#4E8E9B);position:relative"><span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:0.08em;background:color-mix(in oklab,var(--cs-color-brand-umber) 68%,transparent);border-radius:99px" lang="vi">TƯƠNG KHẮC — KHÔNG DÙNG</span></span><span style="font-size:12px;font-weight:700;width:96px;text-decoration:line-through">Hỏa × Thủy</span></div>
     </div>
     <div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:10px;line-height:1.5">Tương sinh pairs may share a gradient wash. Tương khắc pairs never mix.</div>
   </div>