From 9b82a9cd3b1f0cc97e79cade16169628e62ff10a Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Wed, 30 Nov 2022 10:32:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?(fix)=E4=BF=AE=E5=A4=8Dselect=E5=9C=A8?= =?UTF-8?q?=E5=A4=9A=E9=80=89=E4=B8=8BsetSelected=E7=9A=84=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/select/select.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 364d8d7..8901483 100644 --- a/src/components/select/select.ts +++ b/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) { From 4a588281fc44410ee0945d373633b59ed43fcaf3 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Wed, 30 Nov 2022 10:36:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?(improve)=E9=80=82=E9=85=8D=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=EF=BC=8C=E5=A4=9A=E8=89=B2=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E8=87=AA=E9=80=82=E5=BA=94=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/global-style.ts | 42 +++++++++- src/components/button/button.css.ts | 8 +- src/components/card/card.css.ts | 2 +- src/components/checkbox/checkbox.ts | 2 +- src/components/dialog/select-dialog.ts | 1 + src/components/fonts/star-icons.ttf | Bin 114912 -> 118964 bytes src/components/li/li.css.ts | 7 +- src/components/li/li.ts | 2 +- src/components/section/section.ts | 11 ++- src/components/switch/switch.css.ts | 3 +- src/components/ul/ul.css.ts | 9 +- src/test/panels/button/button.ts | 79 ++---------------- src/test/panels/fonts/gaia-icons.ts | 2 +- src/test/panels/fonts/star-icons.ts | 50 ++++++++++- .../gesture/examples/test-multitouches.ts | 12 +++ src/test/panels/gesture/examples/test-pan.ts | 7 ++ .../panels/gesture/examples/test-swipe.ts | 30 +++++-- src/test/panels/gesture/examples/test-tap.ts | 21 ++++- src/test/panels/li/li.ts | 17 +++- 19 files changed, 195 insertions(+), 110 deletions(-) diff --git a/src/components/base/global-style.ts b/src/components/base/global-style.ts index e721f04..329cf17 100644 --- a/src/components/base/global-style.ts +++ b/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); diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts index df814c1..216b666 100644 --- a/src/components/button/button.css.ts +++ b/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 { diff --git a/src/components/card/card.css.ts b/src/components/card/card.css.ts index a1040c0..3ecca68 100644 --- a/src/components/card/card.css.ts +++ b/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); diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 545a463..0ec082b 100644 --- a/src/components/checkbox/checkbox.ts +++ b/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 { diff --git a/src/components/dialog/select-dialog.ts b/src/components/dialog/select-dialog.ts index 1666dad..55c27a2 100644 --- a/src/components/dialog/select-dialog.ts +++ b/src/components/dialog/select-dialog.ts @@ -209,6 +209,7 @@ export class StarSelectDialog extends StarBaseDialog { ^DWadg^YRtc|&jmdOB=s0#WJMdehIj6KY0m|n8n-6D zlziOT$%Q_x=^+3qT%F~Q#yr_4-vs(0# zffUJVz@VX{2S>-fvG1v3W0I&KLxxV8m~XPAlQAhI<6bv-!notdje|mq$R}Pm>XzX> zKD?))G1;|^oV|9$u)){n&wRTnbsJOOY6Jx5J9&}(wdCuL7(H=vuYTRz8e{I29*8$G!1 z^QI&f)8fXY@7;O5Q}Va0Nbl=JZ=Eq~#@-o+XB?Z^e&*p>?PndD_0t292c|u6WOm)z zt7jj5@cKECIrq&uH0PIx>OOSELn|LTH21W*9p?TqZ~eSu^RJq}X#U>$e=O*@VAq1T z7JRkfkCN1qS|v?Ox|R$mnN%{PWKqesk^`Rgs(TH+j^3@_eDARLh4NUbmr7#q3&}#3Lu?=e%4H`A5sCGjc)S_`-gGP-SlcO_tbD3{UW<|zd6IHbUfZ_ViSjKsqvRU1P5D~I_+A`eFYmOzr{!&Hl2=fWXQUQ0 z+(_!0VfdBL)ZmNeDRt`(t6sORm)~CUqW|};{eS668^0@-t~82uCAFe6)#+4&c#k@( z-a)tOs`ee)NzY=7S+pime;O#z8+X6&8*uEX?jI=}pt?-B{GPanb25B9Z!9 z@eFTMI~ng?*iO3tPa-z9lN&GkAKGRT-Z7XD`sSECQ_q~~?P(_s6T+&mH?_UgO!!f? z^`yPjc3suBT|1eW_1{!$qt(H?p17EpOLePLt?=D?rdi7hisGcFA!Umz1VAVjhv$9;$s-;O1?Kny4NlEEPwBJu9r>7?mNKGwPN@7y` zpeNp}c2d9h|2x6HTz_D_7uriFZ^8L8!0&gn|F*~8L+8sNzv};DM&;k0FCme(-p?JR z8J~t1NU3~LzV`yTK0MrA=$5)=?!)dPcd@&~eZ*brE_0W=E8LatqwZtwDtEQ}xVy%E z!d>gGbJx2Y+>P!gceA_2-ReH+Zgb1sr`)IA?d~(~4tJ-!%iZnnai4Yfy3e`KyDzx= z+!x*b?n~~0^2XhyiA_$rdF1esO^TabJKDSQV!1sd-Osa1-O!|&5|3OgP190+;+U~x zhD~hJ(sO%A_sopSBp6rq>LC)7)|`BKubz@6C$ahR2KJK4CsA8yD{uCa2P-%2OBmi; zy2VAdRIUwuUv&X;_))%e$t(jF(`z{GPmgxtv~k6jW#L>&vCI+`B^FEo@e!s-go& z4ZdaA`2R$2UOwSAx!OiE{ee|sG5)HA=2ZzTsuGIR0vUmT;-FZ28xUdwv{NTF;S-|1 zlK;jMYePrpq&gLZSd|Jwi$IH(G5#E1rxS+tpQz1sjGCX4xy31|#olkXOTB1urNT;s zcS>qy@fEz4#aB>^BNci#|97S1qZ%DHzOn`tqtL991{Kuim88Z8sJh=!;ACoGvBpkK zZeE4lImX_i3Oz(XuqNZC)KPVpQKg=xkYxRzQy}{ z3R?3DT0W5`(4d8Gc-VrocFGIj>Bc0lbX^$-A2vi+m`hl9t~6J%4qaug zhVmzK4RC-N2<2+S34;7k@PTZy#0)am0SB8AP==TrSe}Qn$92uMW&-qKW+HI7xe0ik znMB(o%w+J9<`(#`H&eiGFznHzW|WyqX0*{`%osBbIM&<&(>QZC_>JZs;CM3~$^>&i zf+m`oD0-8b4}FqZ0KD0hm_)=cf#(*p40x+q3A~LRjzd#xfVZ1;&Ftb^-4U9^Cp!Snztd9n)jiU znGb*uo1?%*=0i#sn@@mC%;!)ZF<$_en!f>;nJ=L)H(vu+m~VkA&G*Q8)cj28W9Ap& zD)TFFwfPPBxcL`wjX4H(NY|RkEj57KkTZe%q!B86!;kjS!+HQ z^_nk4z2P^2Q*D=4zo#6kHyTFf$deHB3Ka@XY2KaG#zzBRYn~%tY zKr3^MBaX}ix>5p6kW%O&DFcS(VPK*x0w&2~N|R+NFhy2CNflg9(qxr!C0(9?k|Aq> znX(RgmTUw@WD77`wn48Z<={C{+0LiB;9ycia4>eYyMZ-j4}xk54ko#TEs@%?56(P! z$yli)xS5W) zI?~2E;BBo7JjW&g&$S`oc{U7e$2EpXdz%D2-zGCp(!r(yFR+=AI@&DYg*F20WV3-6 zSsY9{TO3Tf*y?b0wK$b@v$epx+dSaKHXlk4TLA273xU0C5wN$#v!su$2fW1A2lllM z;O}SgEVnXj}j)MO-I~F*_;z4q|#e-z3od}FZ?M-~9*-5}V?9DLUX>SGIWp4-GZKt98 zJ@#%&r`vmg_uA>e`|Q2Y@3%9-XV_W5nO5CtmQ`*1YgLWQpj-3zXA?tz9 zwF`msta{e`s4b&lfnAKICH4_;&n~B6pS9rh#WJMG87UG@{=kL@!AJqCQ){tkS_{sDZ|9%tfS za~$y39aruDu#8i9Y}GzI_EIScriqyF`|(;PWpIK^uJe{)(w`qDWY z_;;rj1z$PpU|&0Jjo`Tkdoc1lk>xxiPCH{At|^@{;9~hnQHCEF`2(I( z<2Yr;wYsjahkiR>yu%q8t5-%o+PxBCqe*a1BVRMdfKX>bAk@)DLR5GH;s4}|FF4a_ zv=MYxcbjWMwzdg7mr{58>-5P(u2Qe0;dF5i%7XOxEXl6vgPBa~Cw?gRjJUabK|bm~y)bb6-- zr#;UjuQ>CDYXEKtTwcj^o&Vyc93?Gb`cYQqpTIedLgWLP}j)?uN{-aB|ibyu+AAfg_J;AOX`KJ zzmVe7bI>FcKUsepQ88vv&TEwzm_JJe!l?tFm&S7n*cpp~%0;ze|1@#<`77+)dsi zub$R3s24pkCo$_k$yX~|awWsG9S}lPw0H7dz?V4Spg(J!afk!DxUgd|tpCQ@z_$r0 zlQf*f@z;5t4!%IzXQD|OY~ypOny~-{bCw_L*}YV_0)g=$^e2RDf##VEXQ9co?||RO zP;P_1lf+c|Q#YDA2f-txJ)}}b;3mFHNE_gPgnGU3f0mq}K{c@3W4Oltc!NW!pstk` zQ)nL*nGROIpdN_KUySzY1-5~FL7;7LtjkC#bgiqIo(@d5ct}fy6k=7+yV@uQ* z))i(ouxc@34f!UJ*M{yOT}pZ%p1AA8quyrd45R%!{Bak)HjrUEL7z??9i8-;+@Z0r z#ts%}Uz$Vu|}VU_AF^2^s6gmJM0DQRU|E+U`&*gh;a_n$QvYjZwHef zLWTIkGYDKggW)?dQgPmKCf%x=Ekjs;(p~UWj`3>gDb$aJWDau1o=(aq6_C0x{~R-n zb1(D9YUB)nS&i;7{bGE7C4WZ@XEdBm@C_q<0Is8PGi8%1 zTv?}&&2C@||A6oLC}1h6FX(1o_!yTisN=!zjiV zmv>oPEwVbLQ?zToaA@1EoIU3==n_$;;UIZh^t7QVdl^kUqt*hpPjqk`_z~K z_JSwEb>&d4n~uuinpoh+ftn`Ed5St3pn3!{qIM;Pw~!{0&OsS1B=Fd`$=4-SBb`ke zLgG{qpG$i&g1XSN*3e%fX@qPQQ>+JNDp%J90+9BWgS+93X`DM_JZ;FQ==?WF$Wc?x zerR%>f>_~H7_SG9*?=AwPPpXd;PKJA5g{4y5-0q|IH3BC{R&N2xif;iwd8dNH8_^P z5Ppq}4>JGGgJhcV)u@Cus{n@u#&#z)27dtUzXu-${wV1~Ql(gK&!Fr+Xu3>)M#Adt zi+nL?`%_F_R)rDT@svB1ccd&DGd5rQDG<&l#rFTsZIy8C%_#D!TxA8=Mx9Vbcf7kP zk1MBJtTi;IJ&I(NEgr_3PI^{=*MH^dudJKAi7x_(s-y_DAJEM*dsUH1M9?x_zaz z?~LaykXk7fKmF+7?O4F&)92oi1>6=i?&V!tB25Y=HF&Gx6=!6khf651yg)1Vj}zFp z-trRedTiKxzeJi@o9JbFQfO_GehZwC{Nh~!BFFiOh19XudS#yEwf?6`GgO(tQ6h+~HdTwW^y!o9xwDC^c&S zN^vcdK|wCJeOcgnz?$;C*K46vk8+qxrlCSO^szaYW@;n+H>ef0XpUNSu$JUXP1S<8 z8Vw1z?sfQA)qL4ld7M%mbs{F4xReN%50^@<4dr(e2Jgb<6$}}sflV+W7z$z2-u*~U z`<(}K0o&jNm@`e0$z?aGxZfd;x7uhe`N2E0R4$Tw-nde3(vmrrB%yf`wRC9nfYn)utMVnXO^sG1 zhS*A0rKPZ%SEVJKLSPbcv?^a3@vkb)C7i`*9nmr9b(j#71fE9^BbZBu&J+uGqED;m z+iq=>gP(^hkAZFE^M%1;885cw)U1T=AyWbw}a2w7vVf=K!J4^ zBCVRw7qM+AiObMQq;5L^l+`sewy3eE_8oftvwLLKa(P-WWAQJ++yc>yaxqAyHGK^-Qa)2|M5 zAf8@weyqr=*e>Mr;V8hbRrL$W2hHSZXE<4hD2=INJNj-Flyo&ou0N-B>^WZJN0^x2 zUXMqZrc1mrn(OY(enfJkef;5dP)P09A!&027tYBkG+CE%)2Qb7LtD+{*&g&>>Dj1F zK;fHj`}$q2hZLn@Ssc;B)X=Wg@$(m>sMb(l$+q2i)=_WF@ER_~js|!=^z$cg+)^~V z%A2#4`M=a#yHslC4ne{Cz7QR=%E57vcXTPi@f!5ZMViK2EzX9y7A7{>%UmWkqE|Dm z6~(!zhwAn+s1d4YmuvXt*rvU_67@t_u>I+9oHrgXucUj`_|Il=3JDnl8TnW%wjZ5~ zsI9X&y53{Uq*2~@%w5B35tDWz#L}>u`;Fc=%cN$_>*z)eda6^vI{*@b7(dv{Urskh zqMAlbH3WyRT3H_3hzhE%HvX!?Q=rBr{b5xwuf#Qu&q|Be&-0c4suG_z$Nbr$zKQCL zXF|!t4sL)_>-tJnYjZkDgaLbm$u|~r9pe#ivWQh?xIg_m8JLWz&;6I{H=n~n!G(fX zu(@{qA&4+`sivW6V>+2$c9NIB0=t}u0FB0l^b|3iwkrnsW-99RM65oR6)^CLsM651 zH+{`;9*^%dv$!BlrWtjN0>)hx!RhR6P_t1vf{my*`w^c5R1#cjr;cws%u*lru{!Jd zkaQsGQ!Qer(ooZ?sTVj-b$(2 z=x$`!_FXI3DqvNdcU)-dVE3>WsY41eZqvPKD{+Z?y`?LqLG%G6#wS^$>In1A+41rTb1yvVYe}lpPQbU?X%ObuSlM8s{(4OgXpo_Ogq8a`K1QIn8%`ss$Od^Bd zL@rkm+F{*1JOt*K*xBBQN2Rqq;w^oYC%R?ce*G-V(N_`KgP^cgZDX`d>j@&tG#M6Mo z%FFwa2I|`Wkk{fiJpqL@S70CYM^78_{1Ju93EYh-w9+rt2`NK;?XipE^-W9Dk^Q(v z6`inZ#=CcwWM2L_t!VI2v&yxrPvo$EPJ+60>N|fTby{$dn(DWqKfw$ZPpy}WM(gN_ z4u?9lMt~>0Z&qQ1o4oYZd^UScSF^ZoWn6U{bt{#H0DdV>KAY<>UE}B&o!4p1wCjC} zj#WLxP=dN@t2jBA=^8%*XfV&wAH9PK15lFAgGTWhdg+ zgqHj@1$KY2=9sRu2ttCjQB{5sT6`Si=5)ZH0o}T&aqS=%kE?}tkDrULmwTgrR+m$l zIR)!PsJO;_#@|f(GFKwc&Z#&r`cA8ycci6Y> zFHUu*rPJ3L=gfB2ItQFD+>l$>?dT42r}DGP?e1IdPYKl$qAe2oB#cRzm9QpZf5K-W zH&htv5V|HbB~%uADs&|DT{t~_X1H^BNO)?vEW9oJTKJp9^>4)E3dyUa8loPETE$x;^!9>NjbLX@zO$rS(r6mo_79W!kQ^BWd5H zhtlh$w@UAoK0JMDdP(~F^nK~?r~j0Zo>4!eeMbL`F&Wb{mSk+pIF#{8#&4OKne{Wz z%j}yuB6Diy+|0)^w`U&8{3!FMti-HZS&g&WXZ6V%k~J}Fde*|MHCfxU4rCR)o%Kc5 zPZ54L9LbL~jVDgk4%Y7kIc3Qy*W>?Ng3>IeM0hG^O?!?>THslVKwqx zd&oQTgp|uIUWW~mlaz?1=#J_(uh~YjJW66J5i`~6vz{L}YssC8=6Jua4Ajx~Rr1e% zqe-EdI>#!ql%fqPGG4 zWL1SgZRR;G&66WKUjA6in-x7$hIf4}y+<}8`SYNaor?cGpue+G=F64dxJ~Rq2b64* zoFZ+v$Xr9TRVS?N#{gY^HIfDcJ6YLtbo@gy#XG81r+LTp^MGHHpo|f(*Jh~^4hCzH z*Jm@ui@j!Bq$V#c%e)TTq=rA!PimuKZ8TzbdwZ1apvuhgt47QRS~Vve%;Hg>S!G7d zuPThgwNKK~iHH+a^o5CgqM*o`=PlhLwX7uh`i1?ml+-|Sz?}s*nn}dV+=|p{6^s$7 zeWKMOJ+Pn9SDJd$l=&>JQ`3n^%L<7_(qB8HBCqkjRjz^hsaX(_iT`0}i|E0vCe52x zF4fsnvwa%$q~vm~=#z5Pkr?1to@C$@U0X3Q5qVnaxw5@NyCQi;M?)2OHsJJ!OCYOoKpEK zY&MYN@}tTWZxDeh`tm6mLgtSu^sujhE6G*pA)g+Syejl0pPtAAOA4!4Z2OJcx-n_U z%~AJ&KYGHO0zt0yJ*A+Kj6WqkfnT!{=4Wjw-kh~k&9akt{%L6veaqi8)?y!}GoUlU9)!nUy?)aTc5u~Ehg<`>1!_f0 zLA(gbvQto9F35E=TIGN%o2&AABdmcX+W=8PC|dP09AR>@k`% z7g}7|YJ@fJ9-P_GV*6rh>p8YQKlahOfl9GcFSpz9MX3~!gA1E|M8V4aOf-k9P{QU& z6-tPgRy{)MrDd>ZD&SEtku#ZY%i?FzH+>#$To2i79eImMG|`|j$Je+}7C@@pd;%{C zCsUI6k>be|*C}C+eUbE4PwMZH*T(fkrMuWy$?I){o`~47@}?hRr^`;&WJg);U-LI> zTEvAbZ|d>84fNzSEyUhby;93wA$P(7_zgk=IUUw)Uegn3Qe|Z8n=>`kuS5EN6~hyF zqe{@z5&sdM4%qfmvr&#I;D;x!uYVmL;aoK1R*gq3y;R{&f*)|Hxn(;uyhS_MvOMnX z*&*#@h4;q}X~1Jjq=et^CaF`>y7Q>lV<(&B)!wL`Z0nc$t`MB^DsAg|C)Ar#-PSV% z{?KsE#50r{3HP2r-LA8_=0`f=SpStXpSSUlU+$m9dEnGu=+UYUza`M^D{b)u0L9?& z++C72as!7!o>fs#MFjS&n|!@H%;slHX<%w36(dCSEeKCe;uy4pULm6;AMb>~pPb9(o$K~xjWofLg6rZv*-t>S| zmc~@imqDj2_V+IIY>2mHH%oAW85tmnlBP&ac{Rv~g(i6;~ zQ}Typ*eU5DIebcbqS4F28qrw8alP;NEhT6)KE&@=qQ$x|-73*y1LiypEw~ZZ3n~A4 xRrJ0n-nsasjK$L9v~v@k?PN7hYD6g%y*!E+hNMBITv(1)$|Z1e*tJIr{|~f+ZpQ!s delta 12803 zcmZ{q37pSW_xSI*pV{~MjxlD&OtaV$5<=P}ArF$WCRrlMG9gLwl~PEu&Mm2A&%RGd zLZKvi+Mnu?Nv3tC^v0;P1jZjcHMQUk@9NB)P3oyYtC)dS^AtXMpjVY zcfhcI;j*{(K3!@|;&_Pt2aFkAWHP0-F-a;Q=B9q5%1)j%9ty3eoN&|7I|fZ_xc?(G z?rfy~!odUk-B>jBvKq9lM}5=55WMeXALSb<*BCr(^w`!{w*12wn_x`*$e|+!^egN> zqy_SiQXV?2Uzf3EF-cNDgDEs98s2Z%z|pJk9dG1P)pAYQh*6_oZq}x|k;@hub8)&q zTV_+^ym?<-a6|e&8!;F>UL#Umlq8z%SFMOkY3! zz=JIwocZA48U1I>f2hVo2WGaKIc4U?nTKbEX7!mhW!CGnew+RDoWXOp&aE=H+uZSU zpPu{2ys`79&wG5{`gxzv`>DJ|dGGSF@=4`$%NLa&x~F?Pf$}kkutZAd1`1jKqq}A-> zKD}I~yMilZru(&x)Tky5=pXqq+ezPwm)l9KNOSkvmC{g}m$#QkWJ|^T_A(^CVn`RM zZ{3sE%3ZF0S83n|ca`?bcXt)3IM7Wp#U1Z1W8G~%1pKPhxM{pI1zjN5M>baVZ(fg^|AJZjXPK6- zifPij*?EDCCOKzz8j-EGB3L%_EL*_Su*eQxsAA&-k|kj=-AyNxXnK%)rl;wJ+4VBl z0k1Q?q4YL4fM0L=g7+~4z;7@&0{fbQQ2Lp{Cf4*f!=MZ>!+|$qc0yel{S7iB!EZ97 zfP>9w;LYYX;1Dwgc#FB+NZ1TDV_D{520uW+UBD4$0*%YeMAW*~OocMiOaqQG510hR z%%S7kOgV6jc?5X7SpXbso&erq7Qs2rEC#>RECU~JmV@7AR)SA3tH8r%E%-#U4j8`M ztS6gfHURH28-e$lO~A=!Gw?pM1$e*NO0y~E8Q@g29m+KG9Pk0N132A04}8$<1kNzK zfDf77z?tR+6K7_bm%(S7{j{B9US+oCn%AMsGj9OP!{$vgXWpXvVe>BV5sX^QeDeYD zQS)Em0&^JpW9B2^Um5^kk#m6uq#;6Il}6wPr7`$xaz6MW zX$t(eGy}da&4F*o1;96@1@JAo&|v>>%SCkaj$8_SS6b2dKkN!(-jge!yf5v*KaeYd z|CRQ@!}2fShtdIfL^=XLl1{*n53DQU!;sFA4=L1>kHPE9 zC%^`B6nL(D3T!B!0nZa$P8ta=CynI`_?yTv;Q4}sNmDriY$o3Vo6C2=3*>uX3;6+f zq5KHvMe+;y#quloC4#TXrSd29FD>OS;AL_W*h-_cTyAkZX>D;lxx#uhXk+8R+ghAW z+Ht@T_K-yA?JdqG|FWsT4mJ(g(WV1CSsYKUvYEinHU#I@HXGQ*R%52GvG|u1wM}=w=I8_3pL=rXIE?l%BR0crSZ4_;t1}u(v%2c)hI$y^lQ?c!O;OrLS!a>}Q(* z`&%4O2H2+5-e_?)8E9M3V@H}8~Dw%H8sUEbG!Dra}fDhUGfivwC;4C{8&e`?>@HuumaBkQ> zNH)*T0G8W_fX>cD#KU$D_#<{MaK4=feAJc$7g$H_V|G6HO`IIEzar<~_D|%$?x|n%@R>upb6>m4r5wQwn8XXCNQjq&Ok@#-7v zH307eenWt>kj5T1)_w?$I?U9_*YMnLJa0-EoxY{8fQn({Sg+SJ(r_B(7M02iO{}V? z%K3s2>J12ldb1Gv6a0^mb7k>vgFc2%^O2i`qRA$XND=Q{L7O%~8_dvnVF$x>kXS01 z2VZb!g!}@nAGH27?g`HYBy7TRStCXmOVsmuKZf=Re2k13XuOutqa*(U1-=aUm~hK< z`)$03;o}dkck}|C-bcbRPR)>qkm0l&5#hm4 zEHmJZf`*%FJ8vENddeF}>@waaWGrPS@1^bz&Vr|=>MlmW?ajLrh90D9q%6u$ApmFb zR*|$ZMd=tv&lbVt$59B5IJ0dGG>eGWJbW~=FgqV- zDX{$jzl@w?ia#rA1FZu(;mLT}l&eO{;~1qb>&=n!HtMx}PNaMb+Hq{EZskbOaosGCpWMe@GTBQv3vOQ+g(X{B0}M_Z$>&i z589p39wjfO%{Qcv!FQAP(s_Gi{wu<}hw@^QF4YCZKYvt{V0?@eOGU^eds&2-uP7g& z{1D15L&?#U?+({6{S9Wo-ZfeqZSAsO}nTer#P4;zz2=dI|09pYdNy0(RA{_=Xva}Q z_mOCwKa*@w{*0UtkIJYLl!L&e{$DA$coSfH96@T32_{7i(tbn(NWPHc;F0)Xo5QPy z6%!FyjW$0<_->^^Ytli|BGN;o_u-4W-?c#-8|FdCjzN&R&tDNi*F4y`&6Z!Wnm%eAD9l*f^D#s&v`*i+cr z_acpm?eZs#BS>oLuTuVv21BTiuJt;~YA^3b+SH&tk2ICElr}fg=4bM9%DUrmgjI#S z<?kqx8_>eK3jI8sx1J3)_xat6iv zzYamS*FORQ-e&U3mP|}P6;dmQQ{Cq)hg4kGciTjh;w__%9zre(WO9r*_GZ!`QeBkO zI%0+0uj^lh6ho>>>O$hA8(lklA%dDQ(%R6UAraZUS`ncaQ8ybJq1#IeXk1$jcPQhH zjPTT98GnaXjEqAjozr!O9$fud84h2#SEV)oo{Fe@wFRf0&)5$kCt=2_{m!lm1jrYZ zbu-G1l)r;V4=q;*Wp0JRj4((~2Uj%(;7DPbS;PK0JjTaf_Bn3oAdn!%L*0 zm0w)OQYo?WtLDXCoP6$jfXFv)+)^pD@|~N%R0^7XWKvN!(`1=q{&P$QDUVcQYIBB4 zF(LkoBDJ1hQ*27)WB2t^shY>WkW6inDKIs8v?`)qwy8?}Z?15e!I_e7dPl<1e9}Zbf&rD#RL+Ds`0yZxwjI(kc3bVW<0(l!b=1=`+^EaLduj zh|IPQNmtK$JhuLwH-&r8nY1Ks0EuW`N-Le(0$^44&NKNEI5CFLB*t;lJCl~o27D$h z_8$Z$5--o>OC`>oNsA$DMQE+iF&K5c&4s9zmd?s#0$C|G-UOdk)3@E~CL6zvuRI4f z-*sClm&-YB{z{hRJhyYDluAQ)bS3L?u8UhmR^;leVm%66yH!$f;aMgP0W2(2o#oqP z5k{?+nQ3ZsO-Maeo8!|8;885w)^-b5@$6a0Z6`bbe4IxOD6sAlq*d|xLiTKGqCMy$ z(l#QY*rlwN+;C0YCd#0~)ibk9$ky;}Ay7@7#aGPM_o+cSoo;GUlVMBzDGYe4qDUU? z>-n_PoFVv{FoQaTLhPYLW!k1;pLAODVj_KluaM4yI!qB4O`YaIJfpOQmC7o%8Ra54 zit%ezy)osWn*tpSm)1CHBdYKmscse2G&hNSXr@qT>$-YtSeQ#)hcztIWp22ZTDTc& zBtP8JpI#4z)P6mZc1LjG8k$U(HJCSzYMwu}RZIadnTb9<%kQcXyoj@mj=m;Rw0kUz z+i*NBbZCWs`9c)c7V0Zmyr;xKWl3F~wb)Sy*Fm#?xw5rr*51ur%lfx=tJg|yeisz1 zR!Lbv1<|9qxtyX9G0jjpW+GVVhoNz~$^>lSU>eWDjE1-sGqC?K{ z>#svaFjO^FYT2KuL}QJOil?Q<0@u8(u=*E!G+Y;Z95a=maUU>3i@O2 z8dghLv{NCLj@8`zxv$qrZf zy4(1>1|PpPE(Lput}AiP_VQ`b_65H3A6Mej?pQy2jc=m5;u%m1u!HNM>yXP0lT~r0UC`<7%5`xz)BN*6Ag8FLi$P#Pd@5|5O9g_gTt6oG0IuW&K7P73ZIxu!}`aWd{+!jt#b+h#k7@Q$> zSI}r#O0F@v*aopmw*%e0b&bdQ3lK=uNHo#Jt6}P5YZv*v6zG6q;O$?RRAa^jH+T~t zf*x`UH}Sz~mU~IFneN0Uso8Tj8$tmSqp>77K!p6YNoTNGJcMX%aB5Nx<%`CiV&2;IQ-ZWkdsYb$`n9czljUAuSd2 zc|&JUJG$SWQK;OYVR}%SWTf7>Q1YI^5-O;UB-a403fyQfG zy$T}iRzJe3-FpnvUvIEDyTSFTAi{3;tAhwy*@-r>{E!St5JosI|7pUSfOOarR-m)xK%J^D?{!UI%Z8H^p1#z36=$V`2(p zE{f?DGd89?W^>HzF(+cvV#D=f+s6)$y)Sl2?C#hjv46!?k82UvBW_IG+_;T#2jjks zkBcvfza+j_{FwOJ@oVGv$A6Y!6ABYrBy>v{nJ^<^Wy0Qsj}!h%%u8&V*d=jz;crIfsT))Gr+%FJTUscsZd$9fUTGuKrll=P z+m`lv+L!4zJukgcdi(VL>EqI8r>{)knf`YAu?(A0Eu%q3>x^C*!!ssjlxM8W*pcyi z#?g$QG7~cMGV5htlG!=4f9B}S`!dTjmt}6vJnO~G*E5e~ex3P8C?QlOR1~TgY94AG z>J;h`>K__npL4UH;fT`LZGA?Htli;$dqyhcHn;FO$xhUtf9OVgyF0XvJIFZqwPq9C z+8vS`s}=WaMSwo$+C59<<9^H9F|;hjkX8}?bcL(?28LDoRvI6v-KNd6InVjsc$3{u z74h!r&Q-*F0aIM0%~x8R8?U_|H)*bL7yXCKcLAECT1m3%nHx)EZe24Yx^nYcza8m0 z?x1GX+%e70(o(=$;_5sH zs+m7Ea*xm8>hF*Q&jkXiag>rxs!?vKHro6DohPl`r=uv413K{q@{T*8+57Ix9rBd) za5HyGc6=rBXwi=v_<)9j`J=<;qi|DwWQzAwOC|K47g+pK7H?G0)Sm=q8hXBrciS~v;8&IUb1hFXvdSKyyNBN&GFGZ?`LfFII2g+Y zzby{~U(s;*m(+w`Jz$zKsUGetcsDmP^JxS~B=Fpm8LgPKA}8oS|p zB*zQMg^J{QBY9Nl^nz5a&JTxzgIHyufnEpQc32tV+k2#+baxZ?O12m4-Qha#%ND_S1oPVCWov(K&9@(->^`D6G|+z~B@T+4lw6YTRYV;|*<1O6DfLMw7)Ku{km zlU%JOL$=llCP$mo@`h>x&we!YLI%wAYBPvEnI` zE4zYnoV?~E17plge+2^>k@-Pd48J7Sr;;=2v8eJ-^mu-C`cL#YdC?@hg$JcdZ@y6K xl~|wQ^tCF`cPQ%;?InTVLa1Np^SVyRFO}-zqvgQB) diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts index 95b6b9d..7ea2745 100644 --- a/src/components/li/li.css.ts +++ b/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 { diff --git a/src/components/li/li.ts b/src/components/li/li.ts index eedd11f..9533d03 100644 --- a/src/components/li/li.ts +++ b/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'} > ` diff --git a/src/components/section/section.ts b/src/components/section/section.ts index badb0c5..43715e6 100644 --- a/src/components/section/section.ts +++ b/src/components/section/section.ts @@ -31,10 +31,7 @@ export class StarAnimateSection extends LitElement { static styles = css` :host { position: absolute; - width: 100%; /* 100vw会有x轴溢出 */ - height: 100vh; - /* overflow: hidden; */ - /* height: calc(100vh + 1px); */ /* 手动制造溢出 */ + width: 100%; 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; + } + } ` } diff --git a/src/components/switch/switch.css.ts b/src/components/switch/switch.css.ts index d004581..5b265f5 100644 --- a/src/components/switch/switch.css.ts +++ b/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) diff --git a/src/components/ul/ul.css.ts b/src/components/ul/ul.css.ts index 388a934..817fb51 100644 --- a/src/components/ul/ul.css.ts +++ b/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); - } - } ` diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts index f7ad88a..edab11d 100644 --- a/src/test/panels/button/button.ts +++ b/src/test/panels/button/button.ts @@ -64,11 +64,6 @@ export class PanelButton extends LitElement { - - - - - @@ -123,21 +118,11 @@ export class PanelButton extends LitElement { - - - - - - - - - - @@ -174,10 +159,6 @@ export class PanelButton extends LitElement { - - - - @@ -226,18 +207,6 @@ export class PanelButton extends LitElement { - - - - - - - - - - - - @@ -256,29 +225,21 @@ export class PanelButton extends LitElement { - - - -

Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面

- - + + - - + + - - - - - - + + @@ -287,10 +248,6 @@ export class PanelButton extends LitElement { - - - - @@ -307,10 +264,6 @@ export class PanelButton extends LitElement { - - - - @@ -366,26 +319,6 @@ export class PanelButton extends LitElement { - - - - - - - - - - - - - - - - - - - - ` } diff --git a/src/test/panels/fonts/gaia-icons.ts b/src/test/panels/fonts/gaia-icons.ts index 70c683f..b35589d 100644 --- a/src/test/panels/fonts/gaia-icons.ts +++ b/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; diff --git a/src/test/panels/fonts/star-icons.ts b/src/test/panels/fonts/star-icons.ts index ff99bf8..e263475 100644 --- a/src/test/panels/fonts/star-icons.ts +++ b/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 { ` )} +

跟随黑暗模式的多色图标(需添加colorful-icon类名)

+ + ${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` + + ` + )} + ` } } diff --git a/src/test/panels/gesture/examples/test-multitouches.ts b/src/test/panels/gesture/examples/test-multitouches.ts index 9c81583..51fa14f 100644 --- a/src/test/panels/gesture/examples/test-multitouches.ts +++ b/src/test/panels/gesture/examples/test-multitouches.ts @@ -79,25 +79,36 @@ export class PanelTestMultiTouches extends StarBaseElement { return html`
+
@@ -110,6 +121,7 @@ export class PanelTestMultiTouches extends StarBaseElement { sharedStyles, css` star-button { + width: 100%; height: 15vh; } `, diff --git a/src/test/panels/gesture/examples/test-pan.ts b/src/test/panels/gesture/examples/test-pan.ts index cdb6777..25e68da 100644 --- a/src/test/panels/gesture/examples/test-pan.ts +++ b/src/test/panels/gesture/examples/test-pan.ts @@ -40,16 +40,22 @@ export class PanelTestPan extends StarBaseElement { return html`
@@ -62,6 +68,7 @@ export class PanelTestPan extends StarBaseElement { sharedStyles, css` star-button { + width: 100%; height: 20vh; } `, diff --git a/src/test/panels/gesture/examples/test-swipe.ts b/src/test/panels/gesture/examples/test-swipe.ts index f779034..15fb56e 100644 --- a/src/test/panels/gesture/examples/test-swipe.ts +++ b/src/test/panels/gesture/examples/test-swipe.ts @@ -47,15 +47,32 @@ export class PanelTestSwipe extends StarBaseElement { render() { return html` - -
- -
- +
+
+ +
+ ` @@ -66,6 +83,7 @@ export class PanelTestSwipe extends StarBaseElement { sharedStyles, css` star-button { + width: 100%; height: 20vh; } `, diff --git a/src/test/panels/gesture/examples/test-tap.ts b/src/test/panels/gesture/examples/test-tap.ts index efa4c5e..dd96fa9 100644 --- a/src/test/panels/gesture/examples/test-tap.ts +++ b/src/test/panels/gesture/examples/test-tap.ts @@ -34,11 +34,26 @@ export class PanelTestTap extends StarBaseElement { render() { return html` - +
- +
- + ` } diff --git a/src/test/panels/li/li.ts b/src/test/panels/li/li.ts index 7c70766..c7d3485 100644 --- a/src/test/panels/li/li.ts +++ b/src/test/panels/li/li.ts @@ -162,11 +162,17 @@ export class PanelLi extends LitElement {
- + @@ -534,7 +541,8 @@ export class PanelLi extends LitElement { @@ -590,7 +599,7 @@ export class PanelLi extends LitElement { type="button" variant="primary" > - + ` }