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

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

@@ -0,0 +1,447 @@
+/* red-light 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
+body[data-theme='red-light'] {
+  --zl-bg-1: #ffffff;
+  --zl-bg-2: #ffffff;
+  --zl-bg-3: #ffffff;
+  --zl-bg-4: #ffffff;
+  --zl-bg-5: #ffffff;
+  --zl-bg-more: #ffffff;
+  --zl-blue-1: #e8fcff;
+  --zl-blue-10: #002a4d;
+  --zl-blue-2: #beebf5;
+  --zl-blue-3: #97d9eb;
+  --zl-blue-4: #73c6e2;
+  --zl-blue-5: #51b2d8;
+  --zl-blue-6: #329dce;
+  --zl-blue-7: #207cae;
+  --zl-blue-8: #115e8d;
+  --zl-blue-9: #07426d;
+  --zl-gray-2: #eff4f9;
+  --zl-neutral-2: #eff4f9;
+  --zl-border-1: #eff4f9;
+  --zl-gray-3: #e3e9ef;
+  --zl-neutral-3: #e3e9ef;
+  --zl-border-2: #e3e9ef;
+  --zl-gray-4: #b3c0cc;
+  --zl-neutral-4: #b3c0cc;
+  --zl-border-3: #b3c0cc;
+  --zl-gray-6: #79879c;
+  --zl-neutral-6: #79879c;
+  --zl-border-4: #79879c;
+  --zl-cyan-1: #e8fffa;
+  --zl-cyan-10: #00424d;
+  --zl-cyan-2: #bff4e9;
+  --zl-cyan-3: #98e9dc;
+  --zl-cyan-4: #74dfd0;
+  --zl-cyan-5: #53d4c7;
+  --zl-cyan-6: #35c9c0;
+  --zl-cyan-7: #22aaa5;
+  --zl-cyan-8: #128b8b;
+  --zl-cyan-9: #07686c;
+  --zl-red-1: #fff4e8;
+  --zl-danger-1: #fff4e8;
+  --zl-red-10: #4d1100;
+  --zl-danger-10: #4d1100;
+  --zl-red-2: #ffdbba;
+  --zl-danger-2: #ffdbba;
+  --zl-red-3: #ffbf8b;
+  --zl-danger-3: #ffbf8b;
+  --zl-red-4: #ffa05d;
+  --zl-danger-4: #ffa05d;
+  --zl-red-5: #ff7e2e;
+  --zl-danger-5: #ff7e2e;
+  --zl-red-6: #ff5900;
+  --zl-danger-6: #ff5900;
+  --zl-red-7: #d24300;
+  --zl-danger-7: #d24300;
+  --zl-red-8: #a62f00;
+  --zl-danger-8: #a62f00;
+  --zl-red-9: #791e00;
+  --zl-danger-9: #791e00;
+  --zl-gray-1: #f9fbfd;
+  --zl-neutral-1: #f9fbfd;
+  --zl-fill-1: #f9fbfd;
+  --zl-fill-2: #eff4f9;
+  --zl-fill-3: #e3e9ef;
+  --zl-fill-4: #b3c0cc;
+  --zl-gold-1: #fffee8;
+  --zl-gold-10: #4d2d00;
+  --zl-gold-2: #fdf8bf;
+  --zl-gold-3: #fbef97;
+  --zl-gold-4: #f9e470;
+  --zl-gold-5: #f7d749;
+  --zl-gold-6: #f5c723;
+  --zl-gold-7: #cb9e16;
+  --zl-gold-8: #a1760b;
+  --zl-gold-9: #775204;
+  --zl-gray-10: #242e43;
+  --zl-gray-5: #95a6ba;
+  --zl-gray-7: #5e708a;
+  --zl-gray-8: #4d5e7d;
+  --zl-gray-9: #35435e;
+  --zl-green-1: #e8fff0;
+  --zl-green-10: #004d32;
+  --zl-green-2: #c6f2d7;
+  --zl-green-3: #a6e4c0;
+  --zl-green-4: #88d7ac;
+  --zl-green-5: #6ec99a;
+  --zl-green-6: #55bc8a;
+  --zl-green-7: #36a071;
+  --zl-green-8: #1e845a;
+  --zl-green-9: #0c6845;
+  --zl-lime-1: #f9ffe8;
+  --zl-lime-10: #2a4d00;
+  --zl-lime-2: #e4f2c6;
+  --zl-lime-3: #cfe4a6;
+  --zl-lime-4: #bad788;
+  --zl-lime-5: #a5c96e;
+  --zl-lime-6: #8fbc55;
+  --zl-lime-7: #6fa036;
+  --zl-lime-8: #51841e;
+  --zl-lime-9: #37680c;
+  --zl-modo-1: #ffe8e8;
+  --zl-link-1: #ffe8e8;
+  --zl-modo-10: #4d0017;
+  --zl-link-10: #4d0017;
+  --zl-modo-2: #fab6b8;
+  --zl-link-2: #fab6b8;
+  --zl-modo-3: #f5868d;
+  --zl-link-3: #f5868d;
+  --zl-modo-4: #f05767;
+  --zl-link-4: #f05767;
+  --zl-modo-5: #eb2b44;
+  --zl-link-5: #eb2b44;
+  --zl-modo-6: #e60027;
+  --zl-link-6: #e60027;
+  --zl-modo-7: #c00026;
+  --zl-link-7: #c00026;
+  --zl-modo-8: #990024;
+  --zl-link-8: #990024;
+  --zl-modo-9: #73001f;
+  --zl-link-9: #73001f;
+  --zl-magenta-1: #ffe8f4;
+  --zl-magenta-10: #4d0034;
+  --zl-magenta-2: #f6c6e0;
+  --zl-magenta-3: #eea6cf;
+  --zl-magenta-4: #e588c0;
+  --zl-magenta-5: #dd6cb3;
+  --zl-magenta-6: #d451a8;
+  --zl-magenta-7: #b2338c;
+  --zl-magenta-8: #901c71;
+  --zl-magenta-9: #6e0b57;
+  --zl-mask-bg: rgba(36,46,67,0.6);
+  --zl-neutral-10: #242e43;
+  --zl-neutral-5: #95a6ba;
+  --zl-neutral-7: #5e708a;
+  --zl-neutral-8: #4d5e7d;
+  --zl-neutral-9: #35435e;
+  --zl-orange-1: #fffae8;
+  --zl-orange-10: #4d2500;
+  --zl-orange-2: #fdeebf;
+  --zl-orange-3: #fbdf97;
+  --zl-orange-4: #f9ce70;
+  --zl-orange-5: #f7ba49;
+  --zl-orange-6: #f5a623;
+  --zl-orange-7: #cb7f16;
+  --zl-orange-8: #a15e0b;
+  --zl-orange-9: #773f04;
+  --zl-orangered-1: #fff3e8;
+  --zl-orangered-10: #4d0e00;
+  --zl-orangered-2: #f9dac0;
+  --zl-orangered-3: #f3bf99;
+  --zl-orangered-4: #eea374;
+  --zl-orangered-5: #e88651;
+  --zl-orangered-6: #e2682f;
+  --zl-orangered-7: #bd4b1d;
+  --zl-orangered-8: #973210;
+  --zl-orangered-9: #721d06;
+  --zl-pinkpurple-1: #fde8ff;
+  --zl-pinkpurple-10: #42004d;
+  --zl-pinkpurple-2: #efc2f6;
+  --zl-pinkpurple-3: #df9ded;
+  --zl-pinkpurple-4: #cf7be3;
+  --zl-pinkpurple-5: #bd5bda;
+  --zl-pinkpurple-6: #ab3ed1;
+  --zl-pinkpurple-7: #8727b0;
+  --zl-pinkpurple-8: #66158f;
+  --zl-pinkpurple-9: #48086e;
+  --zl-primary-1: #ffe8e8;
+  --zl-primary-10: #4d0017;
+  --zl-primary-2: #fab6b8;
+  --zl-primary-3: #f5868d;
+  --zl-primary-4: #f05767;
+  --zl-primary-5: #eb2b44;
+  --zl-primary-6: #e60027;
+  --zl-primary-7: #c00026;
+  --zl-primary-8: #990024;
+  --zl-primary-9: #73001f;
+  --zl-purple-1: #f3e8ff;
+  --zl-purple-10: #0e004d;
+  --zl-purple-2: #d9c4f3;
+  --zl-purple-3: #bfa2e8;
+  --zl-purple-4: #a582dc;
+  --zl-purple-5: #8b65d1;
+  --zl-purple-6: #724bc5;
+  --zl-purple-7: #5130a7;
+  --zl-purple-8: #361a89;
+  --zl-purple-9: #1f0a6b;
+  --zl-shadow: rgba(36,46,67,0.1);
+  --zl-success-1: #e8fff0;
+  --zl-success-10: #004d32;
+  --zl-success-2: #c6f2d7;
+  --zl-success-3: #a6e4c0;
+  --zl-success-4: #88d7ac;
+  --zl-success-5: #6ec99a;
+  --zl-success-6: #55bc8a;
+  --zl-success-7: #36a071;
+  --zl-success-8: #1e845a;
+  --zl-success-9: #0c6845;
+  --zl-text-1: #242e43;
+  --zl-text-2: #4d5e7d;
+  --zl-text-3: #79879c;
+  --zl-text-4: #b3c0cc;
+  --zl-tooltip-bg: #242e43;
+  --zl-warning-1: #fffae8;
+  --zl-warning-10: #4d2500;
+  --zl-warning-2: #fdeebf;
+  --zl-warning-3: #fbdf97;
+  --zl-warning-4: #f9ce70;
+  --zl-warning-5: #f7ba49;
+  --zl-warning-6: #f5a623;
+  --zl-warning-7: #cb7f16;
+  --zl-warning-8: #a15e0b;
+  --zl-warning-9: #773f04;
+  --zl-white: #ffffff;
+  --zl-yellow-1: #fcffe8;
+  --zl-yellow-10: #4d3800;
+  --zl-yellow-2: #f7fccd;
+  --zl-yellow-3: #f4f9b3;
+  --zl-yellow-4: #f3f69a;
+  --zl-yellow-5: #f3f380;
+  --zl-yellow-6: #f0eb68;
+  --zl-yellow-7: #c7be41;
+  --zl-yellow-8: #9e9222;
+  --zl-yellow-9: #75670d;
+  --zl-primary-1: #ffe8e8;
+  --zl-link-1: #ffe8e8;
+  --zl-primary-2: #fab6b8;
+  --zl-link-2: #fab6b8;
+  --zl-primary-3: #f5868d;
+  --zl-link-3: #f5868d;
+  --zl-primary-4: #f05767;
+  --zl-link-4: #f05767;
+  --zl-primary-5: #eb2b44;
+  --zl-link-5: #eb2b44;
+  --zl-primary-6: #e60027;
+  --zl-link-6: #e60027;
+  --zl-primary-7: #c00026;
+  --zl-link-7: #c00026;
+  --zl-primary-8: #990024;
+  --zl-link-8: #990024;
+  --zl-primary-9: #73001f;
+  --zl-link-9: #73001f;
+  --zl-primary-10: #4d0017;
+  --zl-link-10: #4d0017;
+  --el-color-primary: #E60027;
+  --el-color-primary-light-1: #fde6e9;
+  --el-color-primary-light-2: #faccd4;
+  --el-color-primary-light-3: #f8b3be;
+  --el-color-primary-light-4: #f599a9;
+  --el-color-primary-light-5: #f38093;
+  --el-color-primary-light-6: #f0667d;
+  --el-color-primary-light-7: #ee4d68;
+  --el-color-primary-light-8: #eb3352;
+  --el-color-primary-light-9: #e9193d;
+  --el-color-primary-dark-2: #2e0008;
+  --el-color-success: #55BC8A;
+  --el-color-success-light-1: #eef8f3;
+  --el-color-success-light-2: #ddf2e8;
+  --el-color-success-light-3: #ccebdc;
+  --el-color-success-light-4: #bbe4d0;
+  --el-color-success-light-5: #aadec5;
+  --el-color-success-light-6: #99d7b9;
+  --el-color-success-light-7: #88d0ad;
+  --el-color-success-light-8: #77c9a1;
+  --el-color-success-light-9: #66c396;
+  --el-color-success-dark-2: #11261c;
+  --el-color-warning: #F5A623;
+  --el-color-warning-light-1: #fef6e9;
+  --el-color-warning-light-2: #fdedd3;
+  --el-color-warning-light-3: #fce4bd;
+  --el-color-warning-light-4: #fbdba7;
+  --el-color-warning-light-5: #fad391;
+  --el-color-warning-light-6: #f9ca7b;
+  --el-color-warning-light-7: #f8c165;
+  --el-color-warning-light-8: #f7b84f;
+  --el-color-warning-light-9: #f6af39;
+  --el-color-warning-dark-2: #312107;
+  --el-color-danger: #FF5900;
+  --el-color-danger-light-1: #ffeee6;
+  --el-color-danger-light-2: #ffdecc;
+  --el-color-danger-light-3: #ffcdb3;
+  --el-color-danger-light-4: #ffbd99;
+  --el-color-danger-light-5: #ffac80;
+  --el-color-danger-light-6: #ff9b66;
+  --el-color-danger-light-7: #ff8b4d;
+  --el-color-danger-light-8: #ff7a33;
+  --el-color-danger-light-9: #ff6a19;
+  --el-color-danger-dark-2: #331200;
+  --el-color-info: #79879C;
+  --el-color-info-light-1: #f2f3f5;
+  --el-color-info-light-2: #e4e7eb;
+  --el-color-info-light-3: #d7dbe1;
+  --el-color-info-light-4: #c9cfd7;
+  --el-color-info-light-5: #bcc3ce;
+  --el-color-info-light-6: #afb7c4;
+  --el-color-info-light-7: #a1abba;
+  --el-color-info-light-8: #949fb0;
+  --el-color-info-light-9: #8693a6;
+  --el-color-info-dark-2: #181b1f;
+  --el-text-color-primary: #242E43;
+  --el-text-color-regular: #4D5E7D;
+  --el-text-color-secondary: #79879C;
+  --el-text-color-placeholder: #B3C0CC;
+  --el-text-color-disabled: ;
+  --el-border-color-extra-light: #EFF4F9;
+  --el-border-color-lighter: #E3E9EF;
+  --el-border-color-light: #B3C0CC;
+  --el-border-color: #79879C;
+  --el-border-color-dark: #79879C;
+  --el-border-color-darker: #79879C;
+  --el-fill-color-extra-light: #F9FBFD;
+  --el-fill-color-lighter: #EFF4F9;
+  --el-fill-color-light: #E3E9EF;
+  --el-fill-color: #B3C0CC;
+  --el-fill-color-dark: #B3C0CC;
+  --el-fill-color-blank: #ffffff;
+  --el-bg-color: #FFFFFF;
+  --el-bg-color-page: #FFFFFF;
+  --el-bg-color-overlay: #FFFFFF;
+  --el-color-white: #ffffff;
+  --el-color-black: #000000;
+  --el-mask-color: rgb(0, 0, 0, 0.5);
+  color-scheme: light;
+  --zl-menu-hover-bg: rgba(255, 255, 255, 0.2);
+  --zl-menu-text-color: var(--zl-white);
+  --zl-menu-trigger-arrow-color: #a51e1e;
+  --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);
+}