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 {
`
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/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) {
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"
>
-
+
`
}