Merge pull request #186 in YR/star-web-components from improve-darkmode to master

* commit '4a588281fc44410ee0945d373633b59ed43fcaf3':
  (improve)适配深色模式，多色图标自适应深色模式；
  (fix)修复select在多选下setSelected的错误

src/components/base/global-style.ts

@@ -37,6 +37,7 @@ const baseStyle = css`
     --devicePixelRatio: 2;
     --text-font-family: 'OPPPSans';
     --icon-font-family: 'star-icons';
+    --colorful-data-icon: attr(data-icon);
 
     /*****************************线性渐变*************************************/
     --gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
@@ -222,7 +223,7 @@ const baseStyle = css`
     --opacity-white-55: rgba(255, 255, 255, 0.55);
     --opacity-white-68: rgba(255, 255, 255, 0.68);
     --opacity-white-75: rgba(255, 255, 255, 0.75);
-    --opacity-white-1: rgba(255, 255, 255, 1);
+    --opacity-white-80: rgba(255, 255, 255, 0.8);
     /*******************************纯色***************************************/
     --pure-white: rgba(255, 255, 255);
     --pure-black: rgba(0, 0, 0);
@@ -469,10 +470,18 @@ const baseComponentStyle = css`
   --card-label: var(--font-main-black);
   --card-link: var(--linear-icon32-black);
 
+  /* Checkbox */
+  --checkbox-bc: rgba(38, 38, 38, 0.2);
+  
   /* Selector */
   --selector-icon-color: var(--linear-icon32-black);
   
+  /* Switch */
+  --switch-bgc: var(--opacity-black-12);
+  
   /* Radio */
+  --radio-checkmark-bc: rgba(38, 38, 38, 0.2);
+  
   --bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
   --bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);
   /* border/未选中 */
@@ -797,6 +806,9 @@ const darkStyle = css`
       /* 商务/组件深/黑透渐变-竖（高斯） */
       --bgc-black-vertical-gradient: var(--gradient-blackout-vertical);
 
+      --colorful-data-icon: attr(data-icon) '-dm';
+      --split-line-color: var(--opacity-white-12);
+
       /* 按钮button */
       --bgc-btn-noraml: var(--bgc-btn-noraml-dm);
       --bgc-btn-noraml-pressed: var(--bgc-btn-noraml-pressed-dm);
@@ -818,6 +830,32 @@ const darkStyle = css`
       --dialog-content: var(--font-secondary-white);
       --dialog-checkbox: var(--font-sec-auxiliary-white);
 
+      --li-label: var(--font-secondary-white);
+      --li-square: var(--font-auxiliary-white);
+      --li-bg-pressed: var(--opacity-white-12);
+      --li-info: var(--linear-icon-white);
+      --li-link: var(--linear-icon-white);
+      --li-value-default: var(--font-auxiliary-white);
+      --li-description: var(--font-sec-auxiliary-white);
+      --li-icon: var(--linear-icon-white);
+
+      /* Card */
+      --card-label: var(--font-secondary-white);
+      --card-link: var(--linear-icon-white);
+
+      /* Checkbox */
+      --checkbox-bc: var(--opacity-white-15);
+
+      /* Radio */
+      --radio-checkmark-bc: var(--opacity-white-15);
+
+      /* Selector */
+      --selector-icon-color: var(--linear-icon-white);
+
+      /* Switch */
+      --ball-bgc: var(--opacity-white-80);
+      --switch-bgc: var(--opacity-white-15);
+
       /* 全/ click_dm */
       --bgc-btn-click: var(--opacity-white-10);
 

src/components/button/button.css.ts

@@ -164,6 +164,12 @@ export default [
       content: attr(data-icon);
       text-align: center;
     }
+    :host([type='pure'].colorful-icon) button::before,
+    :host([type='icon'].colorful-icon) button::before,
+    :host([type='ghost'].colorful-icon) button[data-icon]::before,
+    :host([type='special'].colorful-icon) button[data-icon]::before {
+      content: var(--colorful-data-icon);
+    }
     :host([type='pure'][label]) button,
     :host([type='icon']) button,
     :host([type='ghost']) button,
@@ -283,8 +289,6 @@ export default [
     :host([type='pure']:not([label])[size='extralarge']) {
       width: var(--auto-152px);
       height: var(--auto-152px);
-      color: var(--color-btn-pure-default);
-      background-color: var(--bgc-btn-pure-default);
     }
     /* 图标与文字之间的间隙 */
     :host([type='pure'][label]) button::before {

src/components/card/card.css.ts

@@ -143,7 +143,7 @@ export default css`
     height: var(--auto-30px);
     margin: auto var(--auto-12px) auto auto;
     box-sizing: border-box;
-    border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
+    border: var(--auto-3px) solid var(--checkbox-bc);
     font-family: var(--icon-font-family);
     color: #fff;
     line-height: var(--auto-30px);

src/components/checkbox/checkbox.ts

@@ -47,7 +47,7 @@ export class StarCheckbox extends StarBaseElement {
         width: var(--auto-30px);
         height: var(--auto-30px);
         box-sizing: border-box;
-        border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
+        border: var(--auto-3px) solid var(--radio-checkmark-bc);
         border-radius: var(--auto-5px);
       }
       :host([checked]) a::before {

src/components/dialog/select-dialog.ts

@@ -209,6 +209,7 @@ export class StarSelectDialog extends StarBaseDialog {
               <star-button
                 type="text"
                 label=${this.cancel}
+                variant="default"
                 @click=${this.handleCancel}
               ></star-button>
               <star-button

src/components/li/li.css.ts

@@ -79,6 +79,9 @@ export default css`
     padding-inline-end: var(--auto-18px);
     margin: auto 0px;
   }
+  :host(.colorful-icon) a[data-icon]::before {
+    content: var(--colorful-data-icon);
+  }
   a[href]::after {
     color: var(--li-link);
     content: 'right-light';
@@ -208,7 +211,7 @@ export default css`
     min-width: var(--auto-32px);
     margin: auto 0px auto auto;
     box-sizing: border-box;
-    border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
+    border: var(--auto-3px) solid var(--radio-checkmark-bc);
     border-radius: 50%;
   }
   :host([type='radio'][checked]) a::after {
@@ -237,7 +240,7 @@ export default css`
     height: var(--auto-32px);
     margin: auto 0px auto auto;
     box-sizing: border-box;
-    border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
+    border: var(--auto-3px) solid var(--radio-checkmark-bc);
     border-radius: var(--auto-5px);
   }
   :host([type='checkbox'][pos='left']) a::before {

src/components/li/li.ts

@@ -381,7 +381,7 @@ export class StarLi extends StarBaseElement {
           id="li-text-button"
           type="text"
           label=${this.label}
-          variant=${ifDefined(this.variant)}
+          variant=${this.variant || 'default'}
         ></star-button>
       </li>
     `

src/components/section/section.ts

@@ -31,10 +31,7 @@ export class StarAnimateSection extends LitElement {
   static styles = css`
     :host {
       position: absolute;
-      width: 100%; /* 100vw会有x轴溢出 */
+      width: 100%;
-      height: 100vh;
-      /* overflow: hidden; */
-      /* height: calc(100vh + 1px); */ /* 手动制造溢出 */
       animation-duration: 0.3s;
       background-color: #f0f0f0;
     }
@@ -42,6 +39,12 @@ export class StarAnimateSection extends LitElement {
     section {
       overflow: auto;
     }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        background-color: #2e2e2e;
+      }
+    }
   `
 }
 

src/components/select/select.ts

@@ -39,7 +39,7 @@ export class StarSelect extends StarBaseElement {
   /* 用于指示自身风格，包括： selector(默认), rightarrow,  */
   @property({type: String, reflect: true}) variant!: string
 
-  @state() label!: string
+  @state() label!: string | undefined
 
   @queryAssignedElements() optionsSlot!: StarLi[]
 
@@ -103,6 +103,7 @@ export class StarSelect extends StarBaseElement {
     //  1. 遍历 optionsSlot 找到对等项
     // 当经历上述过程后，this.label 还为空，说明 this.selected 为错值
     // 那将继续使用 optionsSlot 中第一项的 value 和 label 作为默认值
+    this.label = undefined
     for (const [index, option] of this.optionsSlot.entries()) {
       if (this.selected !== undefined) {
         if (this.multiple === false) {

src/components/switch/switch.css.ts

@@ -27,7 +27,7 @@ export default css`
     width: inherit;
     height: inherit;
     border-radius: inherit;
-    background-color: rgba(0, 0, 0, 0.12);
+    background-color: var(--switch-bgc);
   }
   /*选中表单后的样式，:checked表示checkbox被选中后的状态*/
   .base:checked + label {
@@ -50,6 +50,7 @@ export default css`
   }
   .base:checked + label::before {
     /*checkbox选中时按钮的样式*/
+    background-color: var(--pure-white);
     transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1);
     left: calc(
       var(--switch-width) - var(--ball-diameter) - var(--ball-padding)

src/components/ul/ul.css.ts

@@ -41,7 +41,7 @@ export default css`
     padding: 0;
     margin: 10px auto;
     max-width: 88vw;
-    background: var(--bg-ul, var(--pure-white));
+    background: inherit;
     box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
     border-radius: inherit;
   }
@@ -83,11 +83,4 @@ export default css`
   footer a:visited {
     color: blue;
   }
-
-  /* Just for test */
-  @media (prefers-color-scheme: dark) {
-    ul {
-      background-color: var(--base-black);
-    }
-  }
 `

src/test/panels/button/button.ts

@@ -64,11 +64,6 @@ export class PanelButton extends LitElement {
           <star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>
           <star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="normal" theme="dark" variant="primary" size="small" label="强调按钮"></star-button>
-          <star-button type="normal" theme="dark" variant="default" size="small" label="普通按钮"></star-button>
-          <star-button type="normal" theme="dark" variant="warn" size="small" label="警告按钮"></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="normal" variant="primary" size="middle" label="强调按钮"></star-button>
           <star-button type="normal" variant="default" size="middle" label="普通按钮"></star-button>
@@ -123,21 +118,11 @@ export class PanelButton extends LitElement {
           <star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
           <star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="bug"></star-button>
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="delete"></star-button>
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="delete" disabled></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
           <star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
           <star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="pure" theme="dark" variant="default" size="extralarge" icon="bug"></star-button>
-          <star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete"></star-button>
-          <star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete" disabled></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
           <star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
@@ -174,10 +159,6 @@ export class PanelButton extends LitElement {
           <star-button type="pure" variant="establish" size="large" icon="add" label="添加组件"></star-button>
           <star-button type="pure" variant="establish" size="large" icon="add" label="添加组件" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件"></star-button>
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="pure" icon="bug" size="small" label="最短"></star-button>
           <star-button type="pure" icon="bug" size="middle" label="最短"></star-button>
@@ -226,18 +207,6 @@ export class PanelButton extends LitElement {
           <star-button type="text" variant="warn" label="警告按钮"></star-button>
           <star-button type="text" variant="warn" label="警告按钮" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="text" theme="dark" variant="primary" label="强调按钮"></star-button>
-          <star-button type="text" theme="dark" variant="primary" label="强调按钮" disabled></star-button>
-        </star-li>
-        <star-li type="base">
-          <star-button type="text" theme="dark" variant="default" label="普通按钮"></star-button>
-          <star-button type="text" theme="dark" variant="default" label="普通按钮" disabled></star-button>
-        </star-li>
-        <star-li type="base">
-          <star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
-          <star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="text" variant="primary" label="最长最长最长最长最长最长最长"></star-button>
           <star-button type="text" variant="primary" style="width:100px" label="自定义长度100px"></star-button>
@@ -256,29 +225,21 @@ export class PanelButton extends LitElement {
           <star-button type="icon" icon="minus" size="middle"></star-button>
           <star-button type="icon" icon="minus" size="middle" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
-          <star-button type="icon" theme="dark" icon="bug" size="middle" disabled></star-button>
-        </star-li>
       </star-ul>
 
       <h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
       <star-ul type="onlyheader" title="Ghost类型提供3种大小的按钮">
         <star-li type="base">
-          <star-button type="ghost" icon="switch-camera" size="small"></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="small"></star-button>
-          <star-button type="ghost" icon="switch-camera" size="small" disabled></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="small" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="ghost" icon="switch-camera" size="middle"></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="middle"></star-button>
-          <star-button type="ghost" icon="switch-camera" size="middle" disabled></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="middle" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="ghost" icon="switch-camera" size="large"></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="large"></star-button>
-          <star-button type="ghost" icon="switch-camera" size="large" disabled></star-button>
+          <star-button type="ghost" class="colorful-icon" icon="switch-camera" size="large" disabled></star-button>
-        </star-li>
-        <star-li type="base">
-          <star-button type="ghost" theme="dark" icon="switch-camera" size="large"></star-button>
-          <star-button type="ghost" theme="dark" icon="switch-camera" size="large" disabled></star-button>
         </star-li>
       </star-ul>
 
@@ -287,10 +248,6 @@ export class PanelButton extends LitElement {
           <star-button type="special" special="corner-marker"></star-button>
           <star-button type="special" special="corner-marker" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="special" theme="dark" special="corner-marker"></star-button>
-          <star-button type="special" theme="dark" special="corner-marker" disabled></star-button>
-        </star-li>
         <star-li type="base">
           <star-button type="special" special="hang-up" size="middle"></star-button>
           <star-button type="special" special="hang-up" size="middle" disabled></star-button>
@@ -307,10 +264,6 @@ export class PanelButton extends LitElement {
           <star-button type="special" special="go-back"></star-button>
           <star-button type="special" special="go-back" disabled></star-button>
         </star-li>
-        <star-li type="base">
-          <star-button type="special" theme="dark" special="go-back"></star-button>
-          <star-button type="special" theme="dark" special="go-back" disabled></star-button>
-        </star-li>
       </star-ul>
 
       <star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
@@ -366,26 +319,6 @@ export class PanelButton extends LitElement {
           </star-button>
         </star-li>
       </star-ul>
-
-      <star-ul type="onlyheader" title="菜单" id="iconmenu" background="var(--bg-dialog)">
-        <star-button type="iconlabel" icon="info" label="应用详情"></star-button>
-        <star-button type="iconlabel" icon="delete" label="卸载"></star-button>
-        <star-button type="iconlabel" icon="download-circle" label="固定至Dock"></star-button>
-      </star-ul>
-      <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-        <star-button type="iconlabel" icon="keyboard-circle" label="编辑屏幕"></star-button>
-      </star-ul>
-
-      <star-ul type="onlyheader" title="一对内联按钮" id="dialog" background="var(--bg-dialog)">
-        <star-li type="base">
-          <star-button type="normal" variant="default" size="middle" label="取消"></star-button>
-          <star-button type="normal" variant="primary" size="middle" label="连接"></star-button>
-        </star-li>
-      </star-ul>
-
-      <star-ul type="onlyheader" id="dialog" title="独占一行" type="base">
-        <star-button type="normal" variant="primary" size="large" label="应用"></star-button>
-      </star-ul>
     `
   }
 

src/test/panels/fonts/gaia-icons.ts

@@ -278,7 +278,7 @@ export class PanelFontsGaiaIcons extends LitElement {
     }
 
     [data-icon]:before {
-      font-family: 'star-icons';
+      font-family: 'gaia-icons';
       content: attr(data-icon);
       display: inline-block;
       font-weight: 400;

src/test/panels/fonts/star-icons.ts

@@ -394,6 +394,7 @@ export class PanelFontsStarIcons extends LitElement {
     'stop',
     'storage-circle',
     'storage',
+    'switch-camera-dm',
     'switch-camera',
     'switch',
     'sync',
@@ -427,21 +428,36 @@ export class PanelFontsStarIcons extends LitElement {
     'voicemail',
     'wallpaper',
     'wechat',
+    'wifi-0-dm',
     'wifi-0',
+    'wifi-1-dm',
     'wifi-1',
+    'wifi-2-dm',
     'wifi-2',
+    'wifi-3-dm',
     'wifi-3',
+    'wifi-4-dm',
     'wifi-4',
+    'wifi-lock-0-dm',
     'wifi-lock-0',
+    'wifi-lock-1-dm',
     'wifi-lock-1',
+    'wifi-lock-2-dm',
     'wifi-lock-2',
+    'wifi-lock-3-dm',
     'wifi-lock-3',
+    'wifi-lock-4-dm',
     'wifi-lock-4',
+    'wifi-nonet-0-dm',
     'wifi-nonet-0',
+    'wifi-nonet-1-dm',
     'wifi-nonet-1',
+    'wifi-nonet-2-dm',
     'wifi-nonet-2',
+    'wifi-nonet-3-dm',
     'wifi-nonet-3',
-    'wifi-permissions',
+    'wifi-nonet-4-dm',
+    'wifi-nonet-4',
   ]
 
   render() {
@@ -473,6 +489,38 @@ export class PanelFontsStarIcons extends LitElement {
           `
         )}
       </star-li>
+      <h1><center>跟随黑暗模式的多色图标(需添加colorful-icon类名)</center></h1>
+      <star-li type="base">
+        ${map(
+          [
+            'switch-camera',
+            'wifi-0',
+            'wifi-1',
+            'wifi-2',
+            'wifi-3',
+            'wifi-4',
+            'wifi-lock-0',
+            'wifi-lock-1',
+            'wifi-lock-2',
+            'wifi-lock-3',
+            'wifi-lock-4',
+            'wifi-nonet-0',
+            'wifi-nonet-1',
+            'wifi-nonet-2',
+            'wifi-nonet-3',
+            'wifi-nonet-4',
+          ],
+          (iconname, _) => html`
+            <star-button
+              type="icon"
+              class="colorful-icon"
+              icon=${iconname}
+              size="small"
+              style="color: red;"
+            ></star-button>
+          `
+        )}
+      </star-li>
     `
   }
 }

src/test/panels/gesture/examples/test-multitouches.ts

@@ -79,25 +79,36 @@ export class PanelTestMultiTouches extends StarBaseElement {
     return html`
       <star-ul type=${UlType.BASE}>
         <star-button
+          type="text"
+          variant="default"
           id="holdtap"
           label="第一指长按(hold),第二指点击(tap)"
         ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
           id="holdpan"
           label="第一指长按(hold),第二指左右滑动(panleft/panright)"
         ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
           id="holdswipe"
           label="第一指长按(hold),第二指左右滑动(swipeleft/swiperight)"
         ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
           id="holdall"
           label="第一指长按(hold),第二指左右滑动(panleft/panright/swipeleft/swiperight)"
         ></star-button>
+        <hr />
         <star-button
+          type="text"
+          variant="default"
           id="holdandpan"
           label="第一指长按(hold),第二指滑动生命周期(panstart/panmove/panend)"
         ></star-button>
@@ -110,6 +121,7 @@ export class PanelTestMultiTouches extends StarBaseElement {
       sharedStyles,
       css`
         star-button {
+          width: 100%;
           height: 15vh;
         }
       `,

src/test/panels/gesture/examples/test-pan.ts

@@ -40,16 +40,22 @@ export class PanelTestPan extends StarBaseElement {
     return html`
       <star-ul type=${UlType.BASE}>
         <star-button
+          type="text"
+          variant="default"
           id="panlifecycle"
           label="pan生命周期(panstart-panmove-panend)"
         ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
           id="panalldirection"
           label="pan监听方向(pan)"
         ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
           id="pansingledirection"
           label="pan监听单个方向(panleft-panright-pandown-panup)"
         ></star-button>
@@ -62,6 +68,7 @@ export class PanelTestPan extends StarBaseElement {
       sharedStyles,
       css`
         star-button {
+          width: 100%;
           height: 20vh;
         }
       `,

src/test/panels/gesture/examples/test-swipe.ts

@@ -47,15 +47,32 @@ export class PanelTestSwipe extends StarBaseElement {
   render() {
     return html`
       <star-ul type=${UlType.BASE}>
-        <star-button id="swipeLeftRight" label="左右轻扫"></star-button>
+        <star-button
-        <hr />
+          type="text"
-        <star-button id="swipeUpDown" label="上下轻扫"></star-button>
+          variant="default"
-        <hr />
+          id="swipeLeftRight"
-        <star-button id="swipeAll" label="上下左右轻扫"></star-button>
+          label="左右轻扫"
+        ></star-button>
         <hr />
         <star-button
+          type="text"
+          variant="default"
+          id="swipeUpDown"
+          label="上下轻扫"
+        ></star-button>
+        <hr />
+        <star-button
+          type="text"
+          variant="default"
+          id="swipeAll"
+          label="上下左右轻扫"
+        ></star-button>
+        <hr />
+        <star-button
+          type="text"
+          variant="default"
           id="swipeTest"
-          label="向右轻扫再折返一小段/一大段, 观察this)"
+          label="向右轻扫再分别折返一小段和一大段, 观察打印的方向"
         ></star-button>
       </star-ul>
     `
@@ -66,6 +83,7 @@ export class PanelTestSwipe extends StarBaseElement {
       sharedStyles,
       css`
         star-button {
+          width: 100%;
           height: 20vh;
         }
       `,

src/test/panels/gesture/examples/test-tap.ts

@@ -34,11 +34,26 @@ export class PanelTestTap extends StarBaseElement {
   render() {
     return html`
       <star-ul type=${UlType.BASE}>
-        <star-button id="tap" label="单指轻触(tap)"></star-button>
+        <star-button
+          type="text"
+          variant="default"
+          id="tap"
+          label="单指轻触(tap)"
+        ></star-button>
         <hr />
-        <star-button id="doubletap" label="双击轻触(doubletap)"></star-button>
+        <star-button
+          type="text"
+          variant="default"
+          id="doubletap"
+          label="双击轻触(doubletap)"
+        ></star-button>
         <hr />
-        <star-button id="tripletap" label="三击轻触(tripletap)"></star-button>
+        <star-button
+          type="text"
+          variant="default"
+          id="tripletap"
+          label="三击轻触(tripletap)"
+        ></star-button>
       </star-ul>
     `
   }

src/test/panels/li/li.ts

@@ -162,11 +162,17 @@ export class PanelLi extends LitElement {
       <star-li
         label="已连接Wifi项"
         variant="primary"
+        class="colorful-icon"
         icon="wifi-lock-4"
         value="已连接"
       ></star-li>
       <hr />
-      <star-li type="embed-info" label="Kylin" icon="wifi-lock-4">
+      <star-li
+        type="embed-info"
+        label="Kylin"
+        class="colorful-icon"
+        icon="wifi-nonet-2"
+      >
         <star-button
           slot="info"
           type="icon"
@@ -180,6 +186,7 @@ export class PanelLi extends LitElement {
         label="Kylin"
         variant="primary"
         square="2.4G/5G"
+        class="colorful-icon"
         icon="wifi-lock-3"
         value="已连接"
       ></star-li>
@@ -534,7 +541,8 @@ export class PanelLi extends LitElement {
       <star-li
         type="embed-info"
         label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
-        icon="wifi-lock-4"
+        class="colorful-icon"
+        icon="wifi-nonet-2"
       >
         <star-button
           slot="info"
@@ -548,6 +556,7 @@ export class PanelLi extends LitElement {
         label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
         variant="primary"
         square="2.4G/5G"
+        class="colorful-icon"
         icon="wifi-lock-4"
         value="已连接"
       ></star-li>
@@ -590,7 +599,7 @@ export class PanelLi extends LitElement {
         type="button"
         variant="primary"
       ></star-li>
-      <!--       <star-li
+      <star-li
         label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
         type="embed-switch"
         description="已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知"
@@ -598,7 +607,7 @@ export class PanelLi extends LitElement {
       >
         <star-svg-icon slot="icon">${weibo}</star-svg-icon>
         <star-switch slot="switch" id="li-switch"></star-switch>
-      </star-li> -->
+      </star-li>
     `
   }