@zyzgroup/core-web 0.1.86 → 0.1.89

package/dist/css/theme.css

@@ -0,0 +1,229 @@
+:root,
+:host {
+  /* 配合 rem.js */
+  --yz-min-font-size: 0;
+  --yz-max-font-size: 100;
+  --yz-viewport-min: 0;
+  --yz-viewport-max: 750;
+  --yz-font-size: clamp(
+    var(--yz-min-font-size) * 1px,
+    calc(
+      var(--yz-min-font-size) * 1px +
+        (var(--yz-max-font-size) - var(--yz-min-font-size)) *
+        (100vw /* or 100cqw */ - var(--yz-viewport-min) * 1px) /
+        (var(--yz-viewport-max) - var(--yz-viewport-min))
+    ),
+    var(--yz-max-font-size) * 1px
+  );
+
+  /* 预定义大小 */
+  --yz-gap-horizontal: 5px;
+  --yz-padding-horizontal: 15px;
+  --yz-padding-vertical: 10px;
+  --yz-padding-vertical-double: 20px;
+
+  --yz-font-size: 16px; /* 1.4 line-height gap = 3 */
+  --yz-font-size-secondary: 14px; /* 1.4 line-height gap = 3 */
+
+  --yz-disabled-alpha: 0.4;
+
+  --yz-button-height: 44px;
+  --yz-button-padding-horizontal: 20px;
+  --yz-button-border-radius: 4px;
+
+  --yz-button-height-secondary: 32px;
+  --yz-button-padding-horizontal-secondary: 16px;
+  --yz-button-border-radius-secondary: 4px;
+
+  --yz-button-height-tertiary: 24px;
+  --yz-button-padding-horizontal-tertiary: 8px;
+  --yz-button-border-radius-tertiary: 4px;
+
+  --yz-dialog-border-radius: 12px;
+
+  --yz-input-height: 44px;
+  --yz-input-border-radius: 4px;
+
+  /* 组件：颜色反向 */
+  --yz-foreground-reverse: #ffffff;
+  --yz-foreground-border-reverse: #e6e6e6;
+  --yz-panel-reverse: #f5f5f5;
+  --yz-panel-border-reverse: #b3b3b3;
+  --yz-gap-reverse: #cccccc;
+  --yz-placeholder-reverse: #8f8f8f;
+  --yz-font-reverse: #333333;
+  --yz-font-secondary-reverse: #666666;
+  --yz-font-tertiary-reverse: #999999;
+
+  /* 组件：颜色加深 */
+  --yz-foreground-common: #ffffff;
+  --yz-foreground-border-common: #e6e6e6;
+  --yz-panel-common: #f5f5f5;
+  --yz-panel-border-common: #b3b3b3;
+  --yz-gap-common: #cccccc;
+  --yz-placeholder-common: #8f8f8f;
+  --yz-font-common: #333333;
+  --yz-font-secondary-common: #666666;
+  --yz-font-tertiary-common: #999999;
+
+  /* 预定义颜色：颜色加深 */
+  --yz-xg-blue: #5a82f0;
+  --yz-xg-blue-panel: #e6f0ff; /* #e3eeff */
+  --yz-xg-blue-panel-border: #a0b4f0;
+  --yz-xg-blue-gradient: #66b3ff;
+
+  --yz-xg-red: #fa503c;
+  --yz-xg-red-panel: #fff5f5;
+  --yz-xg-red-panel-border: #fac8c8;
+  --yz-xg-red-gradient: #fa8c78;
+
+  --yz-xg-yellow: #fa8c00;
+  --yz-xg-yellow-gradient: #ffb400;
+
+  --yz-xg-green: #00be5a;
+  --yz-xg-green-gradient: #00e678;
+
+  --yz-ks-green: #328a8c;
+  --yz-ks-green-panel: #ebf4f4;
+
+  --yz-yz-green: #29c999;
+  --yz-yz-green-panel: #eef8f8;
+
+  --yz-xg-newenergy: #64c896;
+  --yz-xg-newenergy-panel: #ebfaf2;
+
+  /* 预定义颜色模式：xg-blue:信鸽蓝 */
+  --yz-pattern-xg-blue-primary: var(--yz-xg-blue, #5a82f0);
+  --yz-pattern-xg-blue-secondary: var(--yz-xg-blue-panel);
+  --yz-pattern-xg-blue-gradient: var(--yz-xg-blue-gradient);
+  --yz-pattern-xg-blue-foreground: var(--yz-foreground-common);
+  --yz-pattern-xg-blue-foreground-border: var(--yz-foreground-border-common);
+  --yz-pattern-xg-blue-panel: var(--yz-panel-common);
+  --yz-pattern-xg-blue-panel-border: var(--yz-panel-border-common);
+  --yz-pattern-xg-blue-gap: var(--yz-gap-common);
+  --yz-pattern-xg-blue-placeholder: var(--yz-placeholder-common);
+  --yz-pattern-xg-blue-font: var(--yz-font-common);
+  --yz-pattern-xg-blue-font-secondary: var(--yz-font-secondary-common);
+  --yz-pattern-xg-blue-font-tertiary: var(--yz-font-tertiary-common);
+
+  /* 预定义颜色模式：xg-red:信鸽红 */
+  --yz-pattern-xg-red-primary: var(--yz-xg-red);
+  --yz-pattern-xg-red-secondary: var(--yz-xg-red-panel);
+  --yz-pattern-xg-red-gradient: var(--yz-xg-red-gradient);
+  --yz-pattern-xg-red-foreground: var(--yz-foreground-common);
+  --yz-pattern-xg-red-foreground-border: var(--yz-foreground-border-common);
+  --yz-pattern-xg-red-panel: var(--yz-panel-common);
+  --yz-pattern-xg-red-panel-border: var(--yz-panel-border-common);
+  --yz-pattern-xg-red-gap: var(--yz-gap-common);
+  --yz-pattern-xg-red-placeholder: var(--yz-placeholder-common);
+  --yz-pattern-xg-red-font: var(--yz-font-common);
+  --yz-pattern-xg-red-font-secondary: var(--yz-font-secondary-common);
+  --yz-pattern-xg-red-font-tertiary: var(--yz-font-tertiary-common);
+
+  /* 预定义颜色模式：xg-green:信鸽绿 */
+  --yz-pattern-xg-green-primary: var(--yz-xg-green);
+  --yz-pattern-xg-green-foreground: var(--yz-foreground-common);
+  --yz-pattern-xg-green-foreground-border: var(--yz-foreground-border-common);
+  --yz-pattern-xg-green-panel: var(--yz-panel-common);
+  --yz-pattern-xg-green-panel-border: var(--yz-panel-border-common);
+  --yz-pattern-xg-green-gap: var(--yz-gap-common);
+  --yz-pattern-xg-green-placeholder: var(--yz-placeholder-common);
+  --yz-pattern-xg-green-font: var(--yz-font-common);
+  --yz-pattern-xg-green-font-secondary: var(--yz-font-secondary-common);
+  --yz-pattern-xg-green-font-tertiary: var(--yz-font-tertiary-common);
+
+  /* 预定义颜色模式：ks-green:昆山绿 */
+  --yz-pattern-ks-green-primary: var(--yz-ks-green);
+  --yz-pattern-ks-green-secondary: var(--yz-ks-green-panel);
+  --yz-pattern-ks-green-gradient: var(--yz-ks-green);
+  --yz-pattern-ks-green-foreground: var(--yz-foreground-common);
+  --yz-pattern-ks-green-foreground-border: var(--yz-foreground-border-common);
+  --yz-pattern-ks-green-panel: var(--yz-panel-common);
+  --yz-pattern-ks-green-panel-border: var(--yz-panel-border-common);
+  --yz-pattern-ks-green-gap: var(--yz-gap-common);
+  --yz-pattern-ks-green-placeholder: var(--yz-placeholder-common);
+  --yz-pattern-ks-green-font: var(--yz-font-common);
+  --yz-pattern-ks-green-font-secondary: var(--yz-font-secondary-common);
+  --yz-pattern-ks-green-font-tertiary: var(--yz-font-tertiary-common);
+
+  /* 预定义颜色模式：yz-green:扬州绿 */
+  --yz-pattern-yz-green-primary: var(--yz-yz-green);
+  --yz-pattern-yz-green-secondary: var(--yz-yz-green-panel);
+  --yz-pattern-yz-green-gradient: var(--yz-yz-green);
+  --yz-pattern-yz-green-foreground: var(--yz-foreground-common);
+  --yz-pattern-yz-green-foreground-border: var(--yz-foreground-border-common);
+  --yz-pattern-yz-green-panel: var(--yz-panel-common);
+  --yz-pattern-yz-green-panel-border: var(--yz-panel-border-common);
+  --yz-pattern-yz-green-gap: var(--yz-gap-common);
+  --yz-pattern-yz-green-placeholder: var(--yz-placeholder-common);
+  --yz-pattern-yz-green-font: var(--yz-font-common);
+  --yz-pattern-yz-green-font-secondary: var(--yz-font-secondary-common);
+  --yz-pattern-yz-green-font-tertiary: var(--yz-font-tertiary-common);
+}
+
+/* 浅色模式 */
+/* @media (prefers-color-scheme: light) {
+  :root,
+  :host {
+  }
+} */
+html[data-theme="light"]:root,
+html[data-theme="light"]:host {
+}
+
+/* 深色模式 */
+/* @media (prefers-color-scheme: dark) {
+  :root,
+  :host {
+  }
+} */
+html[data-theme="dark"]:root,
+html[data-theme="dark"]:host {
+  /* 组件：颜色反向 */
+  --yz-foreground-reverse: #1d1d1d;
+  --yz-foreground-border-reverse: #333333;
+  --yz-panel-reverse: #242424;
+  --yz-panel-border-reverse: #555555;
+  --yz-gap-reverse: #444444;
+  --yz-placeholder-reverse: #707070;
+  --yz-font-reverse: #cdcdcd;
+  --yz-font-secondary-reverse: #8d8d8d;
+  --yz-font-tertiary-reverse: #5d5d5d;
+
+  /* 组件：颜色加深 */
+  --yz-foreground-common: #eeeeee;
+  --yz-foreground-border-common: #dddddd;
+  --yz-panel-common: #e5e5e5;
+  --yz-panel-border-common: #bbbbbb;
+  --yz-gap-common: #aaaaaa;
+  --yz-placeholder-common: #646464;
+  --yz-font-common: #1a1a1a;
+  --yz-font-secondary-common: #4d4d4d;
+  --yz-font-tertiary-common: #7f7f7f;
+
+  /* 预定义颜色：颜色加深  */
+  --yz-xg-blue: #4a6ed7;
+  --yz-xg-blue-panel: #aec6d9;
+  --yz-xg-blue-panel-border: #6e7ccf;
+  --yz-xg-blue-gradient: #4c99cc;
+
+  --yz-xg-red: #d94e37;
+  --yz-xg-red-panel: #f4d1d1;
+  --yz-xg-red-panel-border: #f1a6a6;
+  --yz-xg-red-gradient: #d97362;
+
+  --yz-xg-yellow: #e67e00;
+  --yz-xg-yellow-gradient: #e68a00;
+
+  --yz-xg-green: #009c4d;
+  --yz-xg-green-gradient: #00b36b;
+
+  --yz-ks-green: #27706a;
+  --yz-ks-green-panel: #3a7f7d;
+
+  --yz-yz-green: #1f9f86;
+  --yz-yz-green-panel: #3a8c8a;
+
+  --yz-xg-newenergy: #4a9b73;
+  --yz-xg-newenergy-panel: #c7e6d5;
+}