@zl-ui-kit/theme 0.0.0-stage → 0.3.0

package/src/generated/theme-red-dark.css

@@ -0,0 +1,447 @@
+/* red-dark 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
+body[data-theme='red-dark'] {
+  --zl-bg-1: #171f30;
+  --zl-bg-2: #212a3c;
+  --zl-bg-3: #313e56;
+  --zl-bg-4: #3d4b65;
+  --zl-bg-5: #576b87;
+  --zl-bg-more: #76879f;
+  --zl-blue-1: rgba(85,179,216,0.2);
+  --zl-blue-10: #e9fcff;
+  --zl-blue-2: rgba(85,179,216,0.35);
+  --zl-blue-3: rgba(85,179,216,0.5);
+  --zl-blue-4: rgba(85,179,216,0.65);
+  --zl-blue-5: #40a2ce;
+  --zl-blue-6: #55b3d8;
+  --zl-blue-7: #76c7e2;
+  --zl-blue-8: #99daeb;
+  --zl-blue-9: #c0ebf5;
+  --zl-gray-2: #35435e;
+  --zl-neutral-2: #35435e;
+  --zl-border-1: #35435e;
+  --zl-gray-3: #4d5e7d;
+  --zl-neutral-3: #4d5e7d;
+  --zl-border-2: #4d5e7d;
+  --zl-gray-4: #5e708a;
+  --zl-neutral-4: #5e708a;
+  --zl-border-3: #5e708a;
+  --zl-gray-6: #95a6ba;
+  --zl-neutral-6: #95a6ba;
+  --zl-border-4: #95a6ba;
+  --zl-cyan-1: rgba(98,212,201,0.2);
+  --zl-cyan-10: #f1fffc;
+  --zl-cyan-2: rgba(98,212,201,0.35);
+  --zl-cyan-3: rgba(98,212,201,0.5);
+  --zl-cyan-4: rgba(45,170,165,0.65);
+  --zl-cyan-5: #49c9c1;
+  --zl-cyan-6: #62d4c9;
+  --zl-cyan-7: #82dfd2;
+  --zl-cyan-8: #a4e9de;
+  --zl-cyan-9: #c9f4eb;
+  --zl-danger-1: rgba(255,121,38,0.2);
+  --zl-red-10: #fff4e8;
+  --zl-danger-10: #fff4e8;
+  --zl-danger-2: rgba(255,121,38,0.35);
+  --zl-danger-3: rgba(255,121,38,0.5);
+  --zl-danger-4: rgba(255,121,38,0.65);
+  --zl-red-5: #ff6d1f;
+  --zl-danger-5: #ff6d1f;
+  --zl-red-6: #ff7926;
+  --zl-danger-6: #ff7926;
+  --zl-red-7: #ff9c57;
+  --zl-danger-7: #ff9c57;
+  --zl-red-8: #ffbd87;
+  --zl-danger-8: #ffbd87;
+  --zl-red-9: #ffdab8;
+  --zl-danger-9: #ffdab8;
+  --zl-gray-1: #242e43;
+  --zl-neutral-1: #242e43;
+  --zl-fill-1: #242e43;
+  --zl-fill-2: #35435e;
+  --zl-fill-3: #4d5e7d;
+  --zl-fill-4: #5e708a;
+  --zl-gold-1: rgba(247,215,72,0.2);
+  --zl-gold-10: #fffeee;
+  --zl-gold-2: rgba(247,215,72,0.35);
+  --zl-gold-3: rgba(247,215,72,0.5);
+  --zl-gold-4: rgba(247,215,72,0.65);
+  --zl-gold-5: #f5cc39;
+  --zl-gold-6: #f7d748;
+  --zl-gold-7: #f9e471;
+  --zl-gold-8: #fbef9a;
+  --zl-gold-9: #fdf8c4;
+  --zl-gray-10: #f9fbfd;
+  --zl-gray-5: #79879c;
+  --zl-gray-7: #b3c0cc;
+  --zl-gray-8: #e3e9ef;
+  --zl-gray-9: #eff4f9;
+  --zl-green-1: #004d32;
+  --zl-green-10: #eefff4;
+  --zl-green-2: #0a6844;
+  --zl-green-3: #1f845a;
+  --zl-green-4: #3ca073;
+  --zl-green-5: #60bc8f;
+  --zl-green-6: #70c69a;
+  --zl-green-7: #9bd7b6;
+  --zl-green-8: #b5e4c8;
+  --zl-green-9: #d1f2de;
+  --zl-lime-1: rgba(173,201,131,0.2);
+  --zl-lime-10: #faffee;
+  --zl-lime-2: rgba(173,201,131,0.35);
+  --zl-lime-3: rgba(173,201,131,0.5);
+  --zl-lime-4: rgba(173,201,131,0.65);
+  --zl-lime-5: #94bc60;
+  --zl-lime-6: #adc983;
+  --zl-lime-7: #c1d79b;
+  --zl-lime-8: #d4e4b5;
+  --zl-lime-9: #e7f2d1;
+  --zl-link-1: rgba(235,35,61,0.2);
+  --zl-modo-10: #ffe8e8;
+  --zl-link-10: #ffe8e8;
+  --zl-link-2: rgba(235,35,61,0.35);
+  --zl-link-3: rgba(235,35,61,0.5);
+  --zl-link-4: rgba(235,35,61,0.65);
+  --zl-modo-5: #e61c3e;
+  --zl-link-5: #e61c3e;
+  --zl-modo-6: #eb233d;
+  --zl-link-6: #eb233d;
+  --zl-modo-7: #f05262;
+  --zl-link-7: #f05262;
+  --zl-modo-8: #f58289;
+  --zl-link-8: #f58289;
+  --zl-modo-9: #fab4b6;
+  --zl-link-9: #fab4b6;
+  --zl-magenta-1: rgba(221,118,183,0.2);
+  --zl-magenta-10: #ffeef7;
+  --zl-magenta-2: rgba(221,118,183,0.35);
+  --zl-magenta-3: rgba(221,118,183,0.5);
+  --zl-magenta-4: rgba(221,118,183,0.65);
+  --zl-magenta-5: #d459ab;
+  --zl-magenta-6: #dd76b7;
+  --zl-magenta-7: #e591c3;
+  --zl-magenta-8: #eeaed3;
+  --zl-magenta-9: #f6cde3;
+  --zl-mask-bg: rgba(36,46,67,0.6);
+  --zl-modo-1: #4d0017;
+  --zl-modo-2: #730322;
+  --zl-modo-3: #99092b;
+  --zl-modo-4: #c01134;
+  --zl-neutral-10: #f9fbfd;
+  --zl-neutral-5: #79879c;
+  --zl-neutral-7: #b3c0cc;
+  --zl-neutral-8: #e3e9ef;
+  --zl-neutral-9: #eff4f9;
+  --zl-orange-1: #4d2500;
+  --zl-orange-10: #fffbee;
+  --zl-orange-2: #774006;
+  --zl-orange-3: #a16112;
+  --zl-orange-4: #cb8423;
+  --zl-orange-5: #e5ae55;
+  --zl-orange-6: #e7b962;
+  --zl-orange-7: #f9ce71;
+  --zl-orange-8: #fbe09a;
+  --zl-orange-9: #fdefc4;
+  --zl-orangered-1: rgba(232,135,83,0.2);
+  --zl-orangered-10: #fff4ea;
+  --zl-orangered-2: rgba(232,135,83,0.35);
+  --zl-orangered-3: rgba(232,135,83,0.5);
+  --zl-orangered-4: rgba(232,135,83,0.65);
+  --zl-orangered-5: #e2733f;
+  --zl-orangered-6: #e88753;
+  --zl-orangered-7: #eea577;
+  --zl-orangered-8: #f3c09b;
+  --zl-orangered-9: #f9dbc2;
+  --zl-pinkpurple-1: rgba(190,97,218,0.2);
+  --zl-pinkpurple-10: #fdecff;
+  --zl-pinkpurple-2: rgba(190,97,218,0.35);
+  --zl-pinkpurple-3: rgba(190,97,218,0.5);
+  --zl-pinkpurple-4: rgba(190,97,218,0.65);
+  --zl-pinkpurple-5: #ae4bd1;
+  --zl-pinkpurple-6: #be61da;
+  --zl-pinkpurple-7: #d081e3;
+  --zl-pinkpurple-8: #e0a3ed;
+  --zl-pinkpurple-9: #f0c6f6;
+  --zl-primary-1: rgba(235,35,61,0.2);
+  --zl-primary-10: #ffe8e8;
+  --zl-primary-2: rgba(235,35,61,0.35);
+  --zl-primary-3: rgba(235,35,61,0.5);
+  --zl-primary-4: rgba(235,35,61,0.65);
+  --zl-primary-5: #e61c3e;
+  --zl-primary-6: #eb233d;
+  --zl-primary-7: #f05262;
+  --zl-primary-8: #f58289;
+  --zl-primary-9: #fab4b6;
+  --zl-purple-1: rgba(145,111,209,0.2);
+  --zl-purple-10: #f6edff;
+  --zl-purple-2: rgba(145,111,209,0.35);
+  --zl-purple-3: rgba(145,111,209,0.5);
+  --zl-purple-4: rgba(145,111,209,0.65);
+  --zl-purple-5: #7753c5;
+  --zl-purple-6: #916fd1;
+  --zl-purple-7: #aa8bdc;
+  --zl-purple-8: #c3aae8;
+  --zl-purple-9: #dccaf3;
+  --zl-red-1: #4d1100;
+  --zl-red-2: #792104;
+  --zl-red-3: #a6360a;
+  --zl-red-4: #d25013;
+  --zl-shadow: rgba(0,0,0,0.3);
+  --zl-success-1: rgba(112,198,154,0.2);
+  --zl-success-10: #eefff4;
+  --zl-success-2: rgba(112,198,154,0.35);
+  --zl-success-3: rgba(112,198,154,0.5);
+  --zl-success-4: rgba(112,198,154,0.65);
+  --zl-success-5: #60bc8f;
+  --zl-success-6: #70c69a;
+  --zl-success-7: #9bd7b6;
+  --zl-success-8: #b5e4c8;
+  --zl-success-9: #d1f2de;
+  --zl-text-1: #ffffff;
+  --zl-text-2: rgba(255,255,255,0.7);
+  --zl-text-3: rgba(255,255,255,0.5);
+  --zl-text-4: rgba(255,255,255,0.3);
+  --zl-tooltip-bg: #171f30;
+  --zl-warning-1: rgba(231,185,98,0.2);
+  --zl-warning-10: #fffbee;
+  --zl-warning-2: rgba(231,185,98,0.35);
+  --zl-warning-3: rgba(231,185,98,0.5);
+  --zl-warning-4: rgba(231,185,98,0.65);
+  --zl-warning-5: #e5ae55;
+  --zl-warning-6: #e7b962;
+  --zl-warning-7: #f9ce71;
+  --zl-warning-8: #fbe09a;
+  --zl-warning-9: #fdefc4;
+  --zl-white: #ffffff;
+  --zl-yellow-1: rgba(243,243,154,0.2);
+  --zl-yellow-10: #fcffe9;
+  --zl-yellow-2: rgba(243,243,154,0.35);
+  --zl-yellow-3: rgba(243,243,154,0.5);
+  --zl-yellow-4: rgba(243,243,154,0.65);
+  --zl-yellow-5: #f0ec79;
+  --zl-yellow-6: #f3f39a;
+  --zl-yellow-7: #f4f6ad;
+  --zl-yellow-8: #f5f9c1;
+  --zl-yellow-9: #f8fcd5;
+  --zl-primary-1: #4d0017;
+  --zl-link-1: rgba(235,35,61,0.2);
+  --zl-primary-2: #730322;
+  --zl-link-2: rgba(235,35,61,0.35);
+  --zl-primary-3: #99092b;
+  --zl-link-3: rgba(235,35,61,0.5);
+  --zl-primary-4: #c01134;
+  --zl-link-4: rgba(235,35,61,0.65);
+  --zl-primary-5: #e61c3e;
+  --zl-link-5: #e61c3e;
+  --zl-primary-6: #eb233d;
+  --zl-link-6: #eb233d;
+  --zl-primary-7: #f05262;
+  --zl-link-7: #f05262;
+  --zl-primary-8: #f58289;
+  --zl-link-8: #f58289;
+  --zl-primary-9: #fab4b6;
+  --zl-link-9: #fab4b6;
+  --zl-primary-10: #ffe8e8;
+  --zl-link-10: #ffe8e8;
+  --el-color-primary: #EB233D;
+  --el-color-primary-light-1: #fde9ec;
+  --el-color-primary-light-2: #fbd3d8;
+  --el-color-primary-light-3: #f9bdc5;
+  --el-color-primary-light-4: #f7a7b1;
+  --el-color-primary-light-5: #f5919e;
+  --el-color-primary-light-6: #f37b8b;
+  --el-color-primary-light-7: #f16577;
+  --el-color-primary-light-8: #ef4f64;
+  --el-color-primary-light-9: #ed3950;
+  --el-color-primary-dark-2: #2f070c;
+  --el-color-success: #70C69A;
+  --el-color-success-light-1: #f1f9f5;
+  --el-color-success-light-2: #e2f4eb;
+  --el-color-success-light-3: #d4eee1;
+  --el-color-success-light-4: #c6e8d7;
+  --el-color-success-light-5: #b8e3cd;
+  --el-color-success-light-6: #a9ddc2;
+  --el-color-success-light-7: #9bd7b8;
+  --el-color-success-light-8: #8dd1ae;
+  --el-color-success-light-9: #7ecca4;
+  --el-color-success-dark-2: #16281f;
+  --el-color-warning: #E7B962;
+  --el-color-warning-light-1: #fdf8ef;
+  --el-color-warning-light-2: #faf1e0;
+  --el-color-warning-light-3: #f8ead0;
+  --el-color-warning-light-4: #f5e3c0;
+  --el-color-warning-light-5: #f3dcb1;
+  --el-color-warning-light-6: #f1d5a1;
+  --el-color-warning-light-7: #eece91;
+  --el-color-warning-light-8: #ecc781;
+  --el-color-warning-light-9: #e9c072;
+  --el-color-warning-dark-2: #2e2514;
+  --el-color-danger: #FF7926;
+  --el-color-danger-light-1: #fff2e9;
+  --el-color-danger-light-2: #ffe4d4;
+  --el-color-danger-light-3: #ffd7be;
+  --el-color-danger-light-4: #ffc9a8;
+  --el-color-danger-light-5: #ffbc93;
+  --el-color-danger-light-6: #ffaf7d;
+  --el-color-danger-light-7: #ffa167;
+  --el-color-danger-light-8: #ff9451;
+  --el-color-danger-light-9: #ff863c;
+  --el-color-danger-dark-2: #331808;
+  --el-color-info: #95A6BA;
+  --el-color-info-light-1: #f4f6f8;
+  --el-color-info-light-2: #eaedf1;
+  --el-color-info-light-3: #dfe4ea;
+  --el-color-info-light-4: #d5dbe3;
+  --el-color-info-light-5: #cad3dd;
+  --el-color-info-light-6: #bfcad6;
+  --el-color-info-light-7: #b5c1cf;
+  --el-color-info-light-8: #aab8c8;
+  --el-color-info-light-9: #a0afc1;
+  --el-color-info-dark-2: #1e2125;
+  --el-text-color-primary: #FFFFFF;
+  --el-text-color-regular: rgba(255,255,255,0.7);
+  --el-text-color-secondary: rgba(255,255,255,0.5);
+  --el-text-color-placeholder: rgba(255,255,255,0.3);
+  --el-text-color-disabled: ;
+  --el-border-color-extra-light: #35435E;
+  --el-border-color-lighter: #4D5E7D;
+  --el-border-color-light: #5E708A;
+  --el-border-color: #95A6BA;
+  --el-border-color-dark: #95A6BA;
+  --el-border-color-darker: #95A6BA;
+  --el-fill-color-extra-light: #242E43;
+  --el-fill-color-lighter: #35435E;
+  --el-fill-color-light: #4D5E7D;
+  --el-fill-color: #5E708A;
+  --el-fill-color-dark: #5E708A;
+  --el-fill-color-blank: #212A3C;
+  --el-bg-color: #212A3C;
+  --el-bg-color-page: #171F30;
+  --el-bg-color-overlay: #313E56;
+  --el-color-white: #141414;
+  --el-color-black: #ffffff;
+  --el-mask-color: rgb(0, 0, 0, 0.8);
+  color-scheme: dark;
+  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
+  --zl-menu-text-color: var(--zl-white);
+  --zl-menu-trigger-arrow-color: #263247;
+  --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
+  --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
+  --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+}
+
+/*
+ * 全局 reset（随每套主题 CSS 一并注入；变量取 --zl-*，缺省回退为浅色值）
+ * 由参考实现迁移，变量命名按需求 §7.2.1 统一 zl- 前缀
+ */
+
+/* ============================================================
+ * 开源字体（OFL-1.1）自托管：替换参考实现中的商业授权字体
+ *   - Noto Sans SC（思源黑体）：通用中文正文字体，覆盖系统字体缺失场景
+ *   - Smiley Sans（得意黑）：品牌标语展示字体，替换商业「方正」系列
+ * 字体文件见本包 src/assets/fonts/（经 ./assets/* 导出）
+ * ============================================================ */
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../assets/fonts/noto-sans-sc-400.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../assets/fonts/noto-sans-sc-500.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../assets/fonts/noto-sans-sc-700.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Smiley Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../assets/fonts/smiley-sans.woff2) format('woff2');
+}
+
+:root {
+  /* 品牌标语字体：默认得意黑（开源），回退思源黑体 / 系统字体；替换参考实现的商业字体 */
+  --zl-slogan-font-family: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+html,
+body,
+micro-app,
+#root,
+#app {
+  height: 100%;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  background: var(--zl-fill-2, #f0f2f5);
+  color: var(--zl-text-2, #4d5e7d);
+  font-size: 12px;
+  line-height: 20px;
+  overscroll-behavior: contain;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'PingFang SC',
+    'Hiragino Sans GB',
+    'Noto Sans SC',
+    'Microsoft YaHei',
+    'Helvetica Neue',
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--zl-fill-3, #e3e9ef) content-box;
+  border: 2px solid transparent;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--zl-fill-4, rgb(179, 192, 204));
+}
+
+/*
+ * Element Plus 组件样式覆盖（占位骨架）
+ * 参考实现的 18 个组件覆盖基于原 UI 库类名体系，需按 EP 的 .el-* BEM 结构逐组件重写，
+ * 以 playground 主题预览页视觉验收为准（需求 §7.2.2 / P15）。
+ * 本文件随 per-theme CSS 一同生效；以下为首批全局性微调。
+ */
+
+/* 与 zl 设计一致的圆角与动效基调 */
+.el-button {
+  --el-button-border-radius: var(--zl-radius-base, 4px);
+}
+
+.el-dialog {
+  --el-dialog-border-radius: var(--zl-radius-base, 4px);
+}