@cyberskill/design 2.1.0 → 2.2.0

package/guidelines/atomic-view.html

@@ -456,11 +456,12 @@ function applyAxis(ifr, ax){
     h.setAttribute("data-cs-density",ax.density||"comfortable");
     h.setAttribute("data-cs-contrast",ax.contrast||"standard");
     const w=ifr.contentWindow;
-    if(ax.lang && w && w.__dcSetProps && w.__dcRootName){
+    if(w && w.__dcSetProps && w.__dcRootName){
       const r=w.__dcRootName&&w.__dcRootName();
       if(r){
-        const language = ax.lang==="vi"?"Tiếng Việt":ax.lang==="ja"?"日本語":"English";
-        w.__dcSetProps(r,{language});
+        const nextProps={theme:ax.theme||"light",element:ax.elm||"tho"};
+        if(ax.lang) nextProps.language=ax.lang==="vi"?"Tiếng Việt":ax.lang==="ja"?"日本語":"English";
+        w.__dcSetProps(r,nextProps);
       }
     }
   }catch(e){}

package/guidelines/elements-variants.html

@@ -23,25 +23,25 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
 <body>
 <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px">
   <div class="col"><div class="el">Mộc · Wood</div>
-    <div class="v"><span class="sw" style="background:#ADD386"></span><div><div class="vn">leaf ·middle</div><div class="vx">#ADD386</div></div></div>
-    <div class="v"><span class="sw" style="background:#C7E2AC"></span><div><div class="vn">bamboo</div><div class="vx">#C7E2AC</div></div></div>
-    <div class="v"><span class="sw" style="background:#668643"></span><div><div class="vn">forest</div><div class="vx">#668643</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#82CF66"></span><div><div class="vn">leaf ·middle</div><div class="vx">#82CF66</div></div></div>
+    <div class="v"><span class="sw" style="background:#DAEFAA"></span><div><div class="vn">bamboo</div><div class="vx">#DAEFAA</div></div></div>
+    <div class="v"><span class="sw" style="background:#105C36"></span><div><div class="vn">forest</div><div class="vx">#105C36</div></div></div></div>
   <div class="col"><div class="el">Hỏa · Fire</div>
-    <div class="v"><span class="sw" style="background:#FFAD8E"></span><div><div class="vn">ember ·middle</div><div class="vx">#FFAD8E</div></div></div>
-    <div class="v"><span class="sw" style="background:#BB5A32"></span><div><div class="vn">lava</div><div class="vx">#BB5A32</div></div></div>
-    <div class="v"><span class="sw" style="background:#FFC7CC"></span><div><div class="vn">plasma</div><div class="vx">#FFC7CC</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#FC9C69"></span><div><div class="vn">ember ·middle</div><div class="vx">#FC9C69</div></div></div>
+    <div class="v"><span class="sw" style="background:#93050F"></span><div><div class="vn">lava</div><div class="vx">#93050F</div></div></div>
+    <div class="v"><span class="sw" style="background:#FEDBDC"></span><div><div class="vn">plasma</div><div class="vx">#FEDBDC</div></div></div></div>
   <div class="col" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><div class="el">Thổ · Earth</div>
     <div class="v"><span class="sw" style="background:#F4BA17"></span><div><div class="vn">ochre ·middle</div><div class="vx">#F4BA17</div></div></div>
-    <div class="v"><span class="sw" style="background:#98741A"></span><div><div class="vn">clay</div><div class="vx">#98741A</div></div></div>
-    <div class="v"><span class="sw" style="background:#F6D389"></span><div><div class="vn">sand</div><div class="vx">#F6D389</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#723E06"></span><div><div class="vn">clay</div><div class="vx">#723E06</div></div></div>
+    <div class="v"><span class="sw" style="background:#F9E3A7"></span><div><div class="vn">sand</div><div class="vx">#F9E3A7</div></div></div></div>
   <div class="col"><div class="el">Kim · Metal</div>
-    <div class="v"><span class="sw" style="background:#D1C2A8"></span><div><div class="vn">champagne ·middle</div><div class="vx">#D1C2A8</div></div></div>
-    <div class="v"><span class="sw" style="background:#707D7E"></span><div><div class="vn">steel</div><div class="vx">#707D7E</div></div></div>
-    <div class="v"><span class="sw" style="background:#E1D6C3"></span><div><div class="vn">titanium</div><div class="vx">#E1D6C3</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#C4B78F"></span><div><div class="vn">champagne ·middle</div><div class="vx">#C4B78F</div></div></div>
+    <div class="v"><span class="sw" style="background:#384D72"></span><div><div class="vn">steel</div><div class="vx">#384D72</div></div></div>
+    <div class="v"><span class="sw" style="background:#D3E7FC"></span><div><div class="vn">titanium</div><div class="vx">#D3E7FC</div></div></div></div>
   <div class="col"><div class="el">Thủy · Water</div>
-    <div class="v"><span class="sw" style="background:#87D2E1"></span><div><div class="vn">river ·middle</div><div class="vx">#87D2E1</div></div></div>
-    <div class="v"><span class="sw" style="background:#428693"></span><div><div class="vn">ocean</div><div class="vx">#428693</div></div></div>
-    <div class="v"><span class="sw" style="background:#AEE2ED"></span><div><div class="vn">mist</div><div class="vx">#AEE2ED</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#00CEE4"></span><div><div class="vn">river ·middle</div><div class="vx">#00CEE4</div></div></div>
+    <div class="v"><span class="sw" style="background:#06556F"></span><div><div class="vn">ocean</div><div class="vx">#06556F</div></div></div>
+    <div class="v"><span class="sw" style="background:#9DF7F5"></span><div><div class="vn">mist</div><div class="vx">#9DF7F5</div></div></div></div>
 </div>
 <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
   <div class="wash"><img src="../assets/aurora-moc.webp" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>