[gem] Element level style(only shadow)

Closed #197
mantou132 · Sep 7, 2024 · 61b3b43 · 61b3b43
1 parent c42fd2a
commit 61b3b43
Show file tree

Hide file tree

Showing 46 changed files with 556 additions and 498 deletions.
diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts
@@ -1,24 +1,27 @@
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { adoptedStyle, customElement, attribute, state, slot, aria, shadow, mounted } from '@mantou/gem/lib/decorators';
 import { addListener, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
 import './tooltip';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '', activeColor: '' });
+
 const style = createCSSSheet(css`
   :host {
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: default;
     line-height: 1.5;
-    color: var(--color, inherit);
+    color: ${elementTheme.color};
     border-radius: ${theme.normalRound};
   }
   :host(:where(:hover, :state(active))) {
-    color: var(--color, ${theme.primaryColor});
+    color: ${elementTheme.activeColor};
     text-decoration: underline;
   }
   :host(:where(:lang(zh), :lang(ja), :lang(kr))) {
@@ -46,13 +49,14 @@ export class DuoyunActionTextElement extends GemElement {
   @mounted()
   #init = () => addListener(this, 'keydown', commonHandle);
 
+  @updateTheme()
+  #theme = () => {
+    const color = getSemanticColor(this.color) || this.color;
+    return { color: color || 'inherit', activeColor: color || theme.primaryColor };
+  };
+
   render = () => {
     return html`
-      <style>
-        :host([color]) {
-          --color: ${getSemanticColor(this.color) || this.color};
-        }
-      </style>
       <dy-tooltip .content=${this.tooltip}>
         <slot></slot>
       </dy-tooltip>

diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts
@@ -2,20 +2,23 @@
 import { adoptedStyle, customElement, attribute, property, slot, aria, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { icons } from '../lib/icons';
 
 import './use';
 import './action-text';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: flex;
     flex-direction: column;
     padding: 1.2em 1.5em;
     gap: 0.8em;
-    border: 2px solid var(--color);
+    border: 2px solid ${elementTheme.color};
     border-radius: ${theme.normalRound};
   }
   .header {
@@ -35,7 +38,7 @@ const style = createCSSSheet(css`
   }
   .icon {
     width: 1.5em;
-    color: var(--color);
+    color: ${elementTheme.color};
   }
   .footer {
     text-align: right;
@@ -72,18 +75,12 @@ export class DuoyunAlertElement extends GemElement {
     }
   }
 
-  get #color() {
-    return getSemanticColor(this.status) || theme.neutralColor;
-  }
+  @updateTheme()
+  #theme = () => ({ color: getSemanticColor(this.status) || theme.neutralColor });
 
   render = () => {
     const icon = this.#icon;
     return html`
-      <style>
-        :host {
-          --color: ${this.#color};
-        }
-      </style>
       <div class="header">
         <div class="title">${this.header}</div>
         ${icon ? html`<dy-use class="icon" .element=${icon}></dy-use>` : ''}

diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts
@@ -1,6 +1,7 @@
-import { createState, html, svg } from '@mantou/gem/lib/element';
-import { customElement, emitter, Emitter, memo, mounted, property } from '@mantou/gem/lib/decorators';
-import { addListener, classMap } from '@mantou/gem/lib/utils';
+import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element';
+import { adoptedStyle, customElement, emitter, Emitter, memo, mounted, property } from '@mantou/gem/lib/decorators';
+import { addListener, classMap, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { isNotNullish } from '../lib/types';
 import { theme } from '../lib/theme';
@@ -35,10 +36,65 @@ export function defaultSymbolRender({ point, color, isHover, chart }: SymbolRend
   `;
 }
 
+const [elementTheme, updateTheme] = useDecoratorTheme({
+  lineStrokeWidth: 0,
+  areaHighlightOpacity: 0,
+  areaPointer: '',
+  areaOpacity: 0,
+  zoomLeft: '',
+  zoomRight: '',
+  symbolStrokeWidth: 0,
+});
+
+const style = createCSSSheet(css`
+  .hit-line {
+    pointer-events: stroke;
+  }
+  .hit-line:hover + .line {
+    stroke-width: ${elementTheme.lineStrokeWidth};
+  }
+  .hit-line:hover + .line + .area {
+    opacity: ${elementTheme.areaHighlightOpacity};
+  }
+  .hit-line + .line,
+  .hover-line,
+  .disabled {
+    pointer-events: none;
+  }
+  .area {
+    pointer-events: ${elementTheme.areaPointer};
+  }
+  .area:hover {
+    filter: brightness(1.1);
+  }
+  .line.disabled {
+    stroke: ${theme.disabledColor};
+    opacity: 0.3;
+  }
+  .area {
+    opacity: ${elementTheme.areaOpacity};
+  }
+  .area.disabled {
+    fill: ${theme.disabledColor};
+    opacity: 0.1;
+  }
+  .symbol {
+    pointer-events: none;
+    fill: ${theme.backgroundColor};
+    stroke-width: ${elementTheme.symbolStrokeWidth};
+  }
+  dy-chart-zoom {
+    width: calc(100% - ${elementTheme.zoomLeft} - ${elementTheme.zoomRight});
+    margin-inline-start: ${elementTheme.zoomLeft};
+    align-self: flex-start;
+  }
+`);
+
 /**
  * @customElement dy-area-chart
  */
 @customElement('dy-area-chart')
+@adoptedStyle(style)
 export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
   @property fill = true;
   @property stroke = true;
@@ -299,56 +355,23 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
     return () => ChartTooltip.close();
   };
 
+  @updateTheme()
+  #theme = () => ({
+    lineStrokeWidth: this.getSVGPixel(2),
+    symbolStrokeWidth: this.getSVGPixel(1),
+    areaHighlightOpacity: this.#gradient ? 0.4 : 0.2,
+    areaOpacity: this.stack ? 1 : this.#gradient ? 0.3 : 0.15,
+    areaPointer: this.stack ? 'all' : 'none',
+    zoomLeft: `${-this.viewBox[0] * this.getStageScale()}px`,
+    zoomRight: `${(this.viewBox[2] + this.viewBox[0] - this.stageWidth) * this.getStageScale()}px`,
+  });
+
   render = () => {
     if (this.loading) return this.renderLoading();
     if (this.noData) return this.renderNotData();
     if (!this.contentRect.width || !this.#sequences?.length) return html``;
-    const areaOpacity = this.stack ? 1 : this.#gradient ? 0.3 : 0.15;
-    const areaHighlightOpacity = this.#gradient ? 0.4 : 0.2;
 
     return html`
-      <style>
-        .hit-line {
-          pointer-events: stroke;
-        }
-        .hit-line:hover + .line {
-          stroke-width: ${this.getSVGPixel(2)}px;
-        }
-        .hit-line:hover + .line + .area {
-          opacity: ${areaHighlightOpacity};
-        }
-        .hit-line + .line,
-        .hover-line,
-        .disabled {
-          pointer-events: none;
-        }
-        .area {
-          pointer-events: ${this.stack ? 'all' : 'none'};
-        }
-        .area:hover {
-          filter: brightness(1.1);
-        }
-        .line.disabled {
-          stroke: ${theme.disabledColor};
-          opacity: 0.3;
-        }
-        .area.disabled {
-          fill: ${theme.disabledColor};
-          opacity: 0.1;
-        }
-        .symbol {
-          pointer-events: none;
-          fill: ${theme.backgroundColor};
-          stroke-width: ${this.getSVGPixel(1)};
-        }
-        dy-chart-zoom {
-          --left: ${-this.viewBox[0] * this.getStageScale()}px;
-          --right: ${(this.viewBox[2] + this.viewBox[0] - this.stageWidth) * this.getStageScale()}px;
-          width: calc(100% - var(--left) - var(--right));
-          margin-inline-start: var(--left);
-          align-self: flex-start;
-        }
-      </style>
       ${svg`
         <svg aria-hidden="true" part=${
           DuoyunChartBaseElement.chart
@@ -409,7 +432,6 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
                     ? svg`
                         <path
                           class=${classMap({ area: true, disabled })}
-                          opacity=${areaOpacity}
                           fill=${this.#gradient ? `url(#${this.genGradientId(revertIndex)})` : this.colors[revertIndex]}
                           d=${this.#areas[revertIndex]}
                           @pointerover=${() => this.stack && this.#state({ hoverSequence: value })}

diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts
@@ -11,12 +11,15 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
 import { css, exportPartsMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 
 import { Status, getStatusColor } from './status-light';
 import './tooltip';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     cursor: default;
@@ -60,7 +63,6 @@ const style = createCSSSheet(css`
       #0000 var(--mask),
       #fff calc(var(--mask) + 0.5px)
     );
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
   }
   .status {
@@ -71,7 +73,7 @@ const style = createCSSSheet(css`
     border-radius: 10em;
     aspect-ratio: 1;
     transform: translate(50%, -50%);
-    background-color: var(--status);
+    background-color: ${elementTheme.color};
   }
 `);
 
@@ -99,14 +101,11 @@ export class DuoyunAvatarElement extends GemElement {
   @attribute crossorigin: 'anonymous' | 'use-credentials';
   @boolattribute square: boolean;
 
+  @updateTheme()
+  #theme = () => ({ color: getStatusColor(this.status) || 'inherit' });
+
   render = () => {
-    const status = getStatusColor(this.status);
     return html`
-      <style>
-        :host {
-          --status: ${status || 'inherit'};
-        }
-      </style>
       <dy-tooltip .content=${this.tooltip}>
         <img
           class="img"
@@ -134,9 +133,7 @@ const groupStyle = createCSSSheet(css`
     --m-left: radial-gradient(circle at calc(-50% + var(--gap)) center, var(--gradient));
     --m-right: radial-gradient(circle at calc(150% - var(--gap)) center, var(--gradient));
     --m: none;
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
-    -webkit-mask-composite: intersect;
     mask-composite: intersect;
   }
   .item:not(:last-child, :hover) {

diff --git a/packages/duoyun-ui/src/elements/base/scroll.ts b/packages/duoyun-ui/src/elements/base/scroll.ts
@@ -40,7 +40,6 @@ const style = createCSSSheet(css`
   }
   :host(:where(:state(top-overflow), :state(bottom-overflow), :state(left-overflow), :state(right-overflow))) {
     --m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%);
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
   }
 `);