@touchvue/ui 1.0.0-beta.2 → 1.0.0-beta.3

package/theme/base.css

@@ -0,0 +1,744 @@
+@import 'img/font/iconfont.css';
+@import 'img/font-fill/iconfont.css';
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ul,
+ul > li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+button,
+input,
+textarea,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: 0 none;
+  font-style: normal;
+  -webkit-focus-ring-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: inherit;
+  font-family: inherit;
+}
+html {
+  height: 100%;
+  font-size: 100px;
+  overflow: hidden;
+  width: 100%;
+  border: 0 none;
+  font-family: 'PingFang SC', 'microsoft yahei', simhei, verdana;
+}
+body {
+  height: 100%;
+  position: relative;
+  color: var(--color-fg);
+  overflow: hidden;
+  z-index: 0;
+  font-size: 0.12em;
+  width: 100%;
+  border: 0 none;
+  text-align: left;
+}
+a {
+  text-decoration: none;
+}
+iframe {
+  border: 0 none;
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+img {
+  border: 0 none;
+  vertical-align: top;
+  max-width: 100%;
+}
+label {
+  cursor: default !important;
+}
+#scrollerTest {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  left: -100em;
+  top: -100em;
+  overflow: scroll;
+}
+#scrollerTest div {
+  height: 100%;
+}
+.is-link {
+  cursor: pointer;
+}
+html body .height-full {
+  height: 100%;
+}
+:root {
+  --color-fg: #333;
+  --color-fg-fade: #999;
+  --color-fg-fade2: #ddd;
+  --color-bg: #fff;
+  --color-primary: #0077fa;
+  --color-success: #3BB346;
+  --color-danger: #F93920;
+  --color-warning: #FC8800;
+  --color-secondary: #4d5b65;
+  --color-bright: #fd0;
+  --color-placeholder: #ddd;
+  --color-border: #eee;
+  --radius-block: 0.5em;
+  --radius-fe: 0.25em;
+  --radius-r: 50%;
+  --bg-fe: #fff;
+  --border-fe: 1px solid #ddd;
+  --height-fe: 3em;
+  --width-border: 1px;
+  --disabled-color: #ddd;
+  --disabled-bg: #eee;
+  --disabled-border: var(--width-border) solid var(--color-border);
+  --disabled-placeholder-color: #ccc;
+  /* 基础变量 */
+  --gap: 1em;
+  --bg: #fff;
+  --fg: #000;
+  --dark-bg: #222;
+  --dark-fg: #fff;
+  --primary: #0077fa;
+  --success: #3BB346;
+  --danger: #F93920;
+  --warning: #FC8800;
+  --secondary: #4d5b65;
+  --bright: #fd0;
+  /* RGB变量，用于rgba()函数 */
+  --color-fg-rgb: 51, 51, 51;
+  --color-bg-rgb: 255, 255, 255;
+  --color-primary-rgb: 0, 133, 208;
+  --color-success-rgb: 143, 195, 32;
+  --color-danger-rgb: 228, 0, 119;
+  --color-warning-rgb: 243, 177, 0;
+  --color-secondary-rgb: 77, 91, 101;
+  --color-bright-rgb: 255, 221, 0;
+  --color-dark-bg-rgb: 34, 34, 34;
+  --color-dark-fg-rgb: 255, 255, 255;
+  /* 基于Less变量生成的CSS变量 */
+  /* Primary 相关变量 */
+  --primary-light-1: #1985fb;
+  --primary-light-2: #3392fb;
+  --primary-light-3: #4da0fc;
+  --primary-light-4: #66adfc;
+  --primary-light-5: #80bbfd;
+  --primary-light-6: #99c9fd;
+  --primary-light-7: #b3d6fe;
+  --primary-light-8: #cce4fe;
+  --primary-light-9: #e6f1ff;
+  --primary-dark-1: #006be1;
+  --primary-dark-2: #005fc8;
+  --primary-dark-3: #0053af;
+  --primary-dark-4: #004796;
+  --primary-dark-5: #003c7d;
+  --primary-dark-6: #003064;
+  --primary-dark-7: #00244b;
+  --primary-dark-8: #001832;
+  --primary-dark-9: #000c19;
+  --primary-op-0: rgba(0, 119, 250, 0);
+  --primary-op-1: rgba(0, 119, 250, 0.1);
+  --primary-op-2: rgba(0, 119, 250, 0.2);
+  --primary-op-3: rgba(0, 119, 250, 0.3);
+  --primary-op-4: rgba(0, 119, 250, 0.4);
+  --primary-op-5: rgba(0, 119, 250, 0.5);
+  --primary-op-6: rgba(0, 119, 250, 0.6);
+  --primary-op-7: rgba(0, 119, 250, 0.7);
+  --primary-op-8: rgba(0, 119, 250, 0.8);
+  --primary-op-9: rgba(0, 119, 250, 0.9);
+  /* Success 相关变量 */
+  --success-light-1: #4fbb59;
+  --success-light-2: #62c26b;
+  --success-light-3: #76ca7e;
+  --success-light-4: #89d190;
+  --success-light-5: #9dd9a3;
+  --success-light-6: #b1e1b5;
+  --success-light-7: #c4e8c8;
+  --success-light-8: #d8f0da;
+  --success-light-9: #ebf7ed;
+  --success-dark-1: #35a13f;
+  --success-dark-2: #2f8f38;
+  --success-dark-3: #297d31;
+  --success-dark-4: #236b2a;
+  --success-dark-5: #1e5a23;
+  --success-dark-6: #18481c;
+  --success-dark-7: #123615;
+  --success-dark-8: #0c240e;
+  --success-dark-9: #061207;
+  --success-op-0: rgba(59, 179, 70, 0);
+  --success-op-1: rgba(59, 179, 70, 0.1);
+  --success-op-2: rgba(59, 179, 70, 0.2);
+  --success-op-3: rgba(59, 179, 70, 0.3);
+  --success-op-4: rgba(59, 179, 70, 0.4);
+  --success-op-5: rgba(59, 179, 70, 0.5);
+  --success-op-6: rgba(59, 179, 70, 0.6);
+  --success-op-7: rgba(59, 179, 70, 0.7);
+  --success-op-8: rgba(59, 179, 70, 0.8);
+  --success-op-9: rgba(59, 179, 70, 0.9);
+  /* Danger 相关变量 */
+  --danger-light-1: #fa4d36;
+  --danger-light-2: #fa614d;
+  --danger-light-3: #fb7463;
+  --danger-light-4: #fb8879;
+  --danger-light-5: #fc9c90;
+  --danger-light-6: #fdb0a6;
+  --danger-light-7: #fdc4bc;
+  --danger-light-8: #fed7d2;
+  --danger-light-9: #feebe9;
+  --danger-dark-1: #e0331d;
+  --danger-dark-2: #c72e1a;
+  --danger-dark-3: #ae2816;
+  --danger-dark-4: #952213;
+  --danger-dark-5: #7d1d10;
+  --danger-dark-6: #64170d;
+  --danger-dark-7: #4b110a;
+  --danger-dark-8: #320b06;
+  --danger-dark-9: #190603;
+  --danger-op-0: rgba(249, 57, 32, 0);
+  --danger-op-1: rgba(249, 57, 32, 0.1);
+  --danger-op-2: rgba(249, 57, 32, 0.2);
+  --danger-op-3: rgba(249, 57, 32, 0.3);
+  --danger-op-4: rgba(249, 57, 32, 0.4);
+  --danger-op-5: rgba(249, 57, 32, 0.5);
+  --danger-op-6: rgba(249, 57, 32, 0.6);
+  --danger-op-7: rgba(249, 57, 32, 0.7);
+  --danger-op-8: rgba(249, 57, 32, 0.8);
+  --danger-op-9: rgba(249, 57, 32, 0.9);
+  /* Warning 相关变量 */
+  --warning-light-1: #fc9419;
+  --warning-light-2: #fda033;
+  --warning-light-3: #fdac4d;
+  --warning-light-4: #fdb866;
+  --warning-light-5: #fec480;
+  --warning-light-6: #fecf99;
+  --warning-light-7: #fedbb3;
+  --warning-light-8: #fee7cc;
+  --warning-light-9: #fff3e6;
+  --warning-dark-1: #e37a00;
+  --warning-dark-2: #ca6d00;
+  --warning-dark-3: #b05f00;
+  --warning-dark-4: #975200;
+  --warning-dark-5: #7e4400;
+  --warning-dark-6: #653600;
+  --warning-dark-7: #4c2900;
+  --warning-dark-8: #321b00;
+  --warning-dark-9: #190e00;
+  --warning-op-0: rgba(252, 136, 0, 0);
+  --warning-op-1: rgba(252, 136, 0, 0.1);
+  --warning-op-2: rgba(252, 136, 0, 0.2);
+  --warning-op-3: rgba(252, 136, 0, 0.3);
+  --warning-op-4: rgba(252, 136, 0, 0.4);
+  --warning-op-5: rgba(252, 136, 0, 0.5);
+  --warning-op-6: rgba(252, 136, 0, 0.6);
+  --warning-op-7: rgba(252, 136, 0, 0.7);
+  --warning-op-8: rgba(252, 136, 0, 0.8);
+  --warning-op-9: rgba(252, 136, 0, 0.9);
+  /* Bright 相关变量 */
+  --bright-light-1: #ffe019;
+  --bright-light-2: #ffe433;
+  --bright-light-3: #ffe74d;
+  --bright-light-4: #ffeb66;
+  --bright-light-5: #ffee80;
+  --bright-light-6: #fff199;
+  --bright-light-7: #fff5b3;
+  --bright-light-8: #fff8cc;
+  --bright-light-9: #fffce6;
+  --bright-dark-1: #e6c700;
+  --bright-dark-2: #ccb100;
+  --bright-dark-3: #b39b00;
+  --bright-dark-4: #998500;
+  --bright-dark-5: #806f00;
+  --bright-dark-6: #665800;
+  --bright-dark-7: #4d4200;
+  --bright-dark-8: #332c00;
+  --bright-dark-9: #191600;
+  --bright-op-0: rgba(255, 221, 0, 0);
+  --bright-op-1: rgba(255, 221, 0, 0.1);
+  --bright-op-2: rgba(255, 221, 0, 0.2);
+  --bright-op-3: rgba(255, 221, 0, 0.3);
+  --bright-op-4: rgba(255, 221, 0, 0.4);
+  --bright-op-5: rgba(255, 221, 0, 0.5);
+  --bright-op-6: rgba(255, 221, 0, 0.6);
+  --bright-op-7: rgba(255, 221, 0, 0.7);
+  --bright-op-8: rgba(255, 221, 0, 0.8);
+  --bright-op-9: rgba(255, 221, 0, 0.9);
+  /* Secondary 相关变量 */
+  --secondary-light-1: #5f6b74;
+  --secondary-light-2: #717c84;
+  --secondary-light-3: #828c93;
+  --secondary-light-4: #949da3;
+  --secondary-light-5: #a6adb2;
+  --secondary-light-6: #b8bdc1;
+  --secondary-light-7: #caced1;
+  --secondary-light-8: #dbdee0;
+  --secondary-light-9: #edeff0;
+  --secondary-dark-1: #45525b;
+  --secondary-dark-2: #3e4951;
+  --secondary-dark-3: #364047;
+  --secondary-dark-4: #2e373d;
+  --secondary-dark-5: #272e33;
+  --secondary-dark-6: #1f2428;
+  --secondary-dark-7: #171b1e;
+  --secondary-dark-8: #0f1214;
+  --secondary-dark-9: #08090a;
+  --secondary-op-0: rgba(77, 91, 101, 0);
+  --secondary-op-1: rgba(77, 91, 101, 0.1);
+  --secondary-op-2: rgba(77, 91, 101, 0.2);
+  --secondary-op-3: rgba(77, 91, 101, 0.3);
+  --secondary-op-4: rgba(77, 91, 101, 0.4);
+  --secondary-op-5: rgba(77, 91, 101, 0.5);
+  --secondary-op-6: rgba(77, 91, 101, 0.6);
+  --secondary-op-7: rgba(77, 91, 101, 0.7);
+  --secondary-op-8: rgba(77, 91, 101, 0.8);
+  --secondary-op-9: rgba(77, 91, 101, 0.9);
+  /* Background 相关变量 */
+  --bg-op-0: rgba(255, 255, 255, 0);
+  --bg-op-0-1: rgba(255, 255, 255, 0.01);
+  --bg-op-0-2: rgba(255, 255, 255, 0.02);
+  --bg-op-0-3: rgba(255, 255, 255, 0.03);
+  --bg-op-0-4: rgba(255, 255, 255, 0.04);
+  --bg-op-0-5: rgba(255, 255, 255, 0.05);
+  --bg-op-1: rgba(255, 255, 255, 0.1);
+  --bg-op-2: rgba(255, 255, 255, 0.2);
+  --bg-op-3: rgba(255, 255, 255, 0.3);
+  --bg-op-4: rgba(255, 255, 255, 0.4);
+  --bg-op-5: rgba(255, 255, 255, 0.5);
+  --bg-op-6: rgba(255, 255, 255, 0.6);
+  --bg-op-7: rgba(255, 255, 255, 0.7);
+  --bg-op-8: rgba(255, 255, 255, 0.8);
+  --bg-op-9: rgba(255, 255, 255, 0.9);
+  --bg-op-9-5: rgba(255, 255, 255, 0.95);
+  --bg-op-9-6: rgba(255, 255, 255, 0.96);
+  --bg-op-9-7: rgba(255, 255, 255, 0.97);
+  --bg-op-9-8: rgba(255, 255, 255, 0.98);
+  --bg-op-9-9: rgba(255, 255, 255, 0.99);
+  --bg-dark-0-1: #fcfcfc;
+  --bg-dark-0-2: #fafafa;
+  --bg-dark-0-3: #f7f7f7;
+  --bg-dark-0-4: #f5f5f5;
+  --bg-dark-0-5: #f2f2f2;
+  --bg-dark-0-6: #f0f0f0;
+  --bg-dark-0-7: #ededed;
+  --bg-dark-0-8: #ebebeb;
+  --bg-dark-0-9: #e8e8e8;
+  --bg-dark-1: #e6e6e6;
+  --bg-dark-1-5: #d9d9d9;
+  --bg-dark-2: #cccccc;
+  --bg-dark-2-5: #bfbfbf;
+  --bg-dark-3: #b3b3b3;
+  --bg-dark-3-5: #a6a6a6;
+  --bg-dark-4: #999999;
+  --bg-dark-4-5: #8c8c8c;
+  --bg-dark-5: #808080;
+  --bg-dark-5-5: #737373;
+  --bg-dark-6: #666666;
+  --bg-dark-6-5: #595959;
+  --bg-dark-7: #4d4d4d;
+  --bg-dark-7-5: #404040;
+  --bg-dark-8: #333333;
+  --bg-dark-8-5: #262626;
+  --bg-dark-9: #191919;
+  --bg-dark-9-1: #171717;
+  --bg-dark-9-2: #141414;
+  --bg-dark-9-3: #121212;
+  --bg-dark-9-4: #0f0f0f;
+  --bg-dark-9-5: #0d0d0d;
+  --bg-dark-9-6: #0a0a0a;
+  --bg-dark-9-7: #080808;
+  --bg-dark-9-8: #050505;
+  --bg-dark-9-9: #030303;
+  /* Foreground 相关变量 */
+  --fg-op-0: rgba(0, 0, 0, 0);
+  --fg-op-0-1: rgba(0, 0, 0, 0.01);
+  --fg-op-0-2: rgba(0, 0, 0, 0.02);
+  --fg-op-0-3: rgba(0, 0, 0, 0.03);
+  --fg-op-0-4: rgba(0, 0, 0, 0.04);
+  --fg-op-0-5: rgba(0, 0, 0, 0.05);
+  --fg-op-1: rgba(0, 0, 0, 0.1);
+  --fg-op-2: rgba(0, 0, 0, 0.2);
+  --fg-op-3: rgba(0, 0, 0, 0.3);
+  --fg-op-4: rgba(0, 0, 0, 0.4);
+  --fg-op-5: rgba(0, 0, 0, 0.5);
+  --fg-op-6: rgba(0, 0, 0, 0.6);
+  --fg-op-7: rgba(0, 0, 0, 0.7);
+  --fg-op-8: rgba(0, 0, 0, 0.8);
+  --fg-op-9: rgba(0, 0, 0, 0.9);
+  --fg-op-9-5: rgba(0, 0, 0, 0.95);
+  --fg-op-9-6: rgba(0, 0, 0, 0.96);
+  --fg-op-9-7: rgba(0, 0, 0, 0.97);
+  --fg-op-9-8: rgba(0, 0, 0, 0.98);
+  --fg-op-9-9: rgba(0, 0, 0, 0.99);
+  --fg-light-0-1: #030303;
+  --fg-light-0-2: #050505;
+  --fg-light-0-3: #080808;
+  --fg-light-0-4: #0a0a0a;
+  --fg-light-0-5: #0d0d0d;
+  --fg-light-0-6: #0f0f0f;
+  --fg-light-0-7: #121212;
+  --fg-light-0-8: #141414;
+  --fg-light-0-9: #171717;
+  --fg-light-1: #191919;
+  --fg-light-1-5: #262626;
+  --fg-light-2: #333333;
+  --fg-light-2-5: #404040;
+  --fg-light-3: #4d4d4d;
+  --fg-light-3-5: #595959;
+  --fg-light-4: #666666;
+  --fg-light-4-5: #737373;
+  --fg-light-5: #808080;
+  --fg-light-5-5: #8c8c8c;
+  --fg-light-6: #999999;
+  --fg-light-6-5: #a6a6a6;
+  --fg-light-7: #b3b3b3;
+  --fg-light-7-5: #bfbfbf;
+  --fg-light-8: #cccccc;
+  --fg-light-8-5: #d9d9d9;
+  --fg-light-9: #e6e6e6;
+  --fg-light-9-1: #e8e8e8;
+  --fg-light-9-2: #ebebeb;
+  --fg-light-9-3: #ededed;
+  --fg-light-9-4: #f0f0f0;
+  --fg-light-9-5: #f2f2f2;
+  --fg-light-9-6: #f5f5f5;
+  --fg-light-9-7: #f7f7f7;
+  --fg-light-9-8: #fafafa;
+  --fg-light-9-9: #fcfcfc;
+  /* Dark Background 相关变量 */
+  --dark-bg-op-0: rgba(34, 34, 34, 0);
+  --dark-bg-op-0-1: rgba(34, 34, 34, 0.01);
+  --dark-bg-op-0-2: rgba(34, 34, 34, 0.02);
+  --dark-bg-op-0-3: rgba(34, 34, 34, 0.03);
+  --dark-bg-op-0-4: rgba(34, 34, 34, 0.04);
+  --dark-bg-op-0-5: rgba(34, 34, 34, 0.05);
+  --dark-bg-op-1: rgba(34, 34, 34, 0.1);
+  --dark-bg-op-2: rgba(34, 34, 34, 0.2);
+  --dark-bg-op-3: rgba(34, 34, 34, 0.3);
+  --dark-bg-op-4: rgba(34, 34, 34, 0.4);
+  --dark-bg-op-5: rgba(34, 34, 34, 0.5);
+  --dark-bg-op-6: rgba(34, 34, 34, 0.6);
+  --dark-bg-op-7: rgba(34, 34, 34, 0.7);
+  --dark-bg-op-8: rgba(34, 34, 34, 0.8);
+  --dark-bg-op-9: rgba(34, 34, 34, 0.9);
+  --dark-bg-op-9-5: rgba(34, 34, 34, 0.95);
+  --dark-bg-op-9-6: rgba(34, 34, 34, 0.96);
+  --dark-bg-op-9-7: rgba(34, 34, 34, 0.97);
+  --dark-bg-op-9-8: rgba(34, 34, 34, 0.98);
+  --dark-bg-op-9-9: rgba(34, 34, 34, 0.99);
+  --dark-bg-light-0-1: #242424;
+  --dark-bg-light-0-2: #262626;
+  --dark-bg-light-0-3: #292929;
+  --dark-bg-light-0-4: #2b2b2b;
+  --dark-bg-light-0-5: #2d2d2d;
+  --dark-bg-light-0-6: #2f2f2f;
+  --dark-bg-light-0-7: #313131;
+  --dark-bg-light-0-8: #343434;
+  --dark-bg-light-0-9: #363636;
+  --dark-bg-light-1: #383838;
+  --dark-bg-light-1-5: #434343;
+  --dark-bg-light-2: #4e4e4e;
+  --dark-bg-light-2-5: #595959;
+  --dark-bg-light-3: #646464;
+  --dark-bg-light-3-5: #6f6f6f;
+  --dark-bg-light-4: #7a7a7a;
+  --dark-bg-light-4-5: #858585;
+  --dark-bg-light-5: #919191;
+  --dark-bg-light-5-5: #9c9c9c;
+  --dark-bg-light-6: #a7a7a7;
+  --dark-bg-light-6-5: #b2b2b2;
+  --dark-bg-light-7: #bdbdbd;
+  --dark-bg-light-7-5: #c8c8c8;
+  --dark-bg-light-8: #d3d3d3;
+  --dark-bg-light-8-5: #dedede;
+  --dark-bg-light-9: #e9e9e9;
+  --dark-bg-light-9-1: #ebebeb;
+  --dark-bg-light-9-2: #ededed;
+  --dark-bg-light-9-3: #f0f0f0;
+  --dark-bg-light-9-4: #f2f2f2;
+  --dark-bg-light-9-5: #f4f4f4;
+  --dark-bg-light-9-6: #f6f6f6;
+  --dark-bg-light-9-7: #f8f8f8;
+  --dark-bg-light-9-8: #fbfbfb;
+  --dark-bg-light-9-9: #fdfdfd;
+  /* Dark Foreground 相关变量 */
+  --dark-fg-op-0: rgba(255, 255, 255, 0);
+  --dark-fg-op-0-1: rgba(255, 255, 255, 0.01);
+  --dark-fg-op-0-2: rgba(255, 255, 255, 0.02);
+  --dark-fg-op-0-3: rgba(255, 255, 255, 0.03);
+  --dark-fg-op-0-4: rgba(255, 255, 255, 0.04);
+  --dark-fg-op-0-5: rgba(255, 255, 255, 0.05);
+  --dark-fg-op-1: rgba(255, 255, 255, 0.1);
+  --dark-fg-op-2: rgba(255, 255, 255, 0.2);
+  --dark-fg-op-3: rgba(255, 255, 255, 0.3);
+  --dark-fg-op-4: rgba(255, 255, 255, 0.4);
+  --dark-fg-op-5: rgba(255, 255, 255, 0.5);
+  --dark-fg-op-6: rgba(255, 255, 255, 0.6);
+  --dark-fg-op-7: rgba(255, 255, 255, 0.7);
+  --dark-fg-op-8: rgba(255, 255, 255, 0.8);
+  --dark-fg-op-9: rgba(255, 255, 255, 0.9);
+  --dark-fg-op-9-5: rgba(255, 255, 255, 0.95);
+  --dark-fg-op-9-6: rgba(255, 255, 255, 0.96);
+  --dark-fg-op-9-7: rgba(255, 255, 255, 0.97);
+  --dark-fg-op-9-8: rgba(255, 255, 255, 0.98);
+  --dark-fg-op-9-9: rgba(255, 255, 255, 0.99);
+  --dark-fg-dark-0-1: #fcfcfc;
+  --dark-fg-dark-0-2: #fafafa;
+  --dark-fg-dark-0-3: #f7f7f7;
+  --dark-fg-dark-0-4: #f5f5f5;
+  --dark-fg-dark-0-5: #f2f2f2;
+  --dark-fg-dark-0-6: #f0f0f0;
+  --dark-fg-dark-0-7: #ededed;
+  --dark-fg-dark-0-8: #ebebeb;
+  --dark-fg-dark-0-9: #e8e8e8;
+  --dark-fg-dark-1: #e6e6e6;
+  --dark-fg-dark-1-5: #d9d9d9;
+  --dark-fg-dark-2: #cccccc;
+  --dark-fg-dark-2-5: #bfbfbf;
+  --dark-fg-dark-3: #b3b3b3;
+  --dark-fg-dark-3-5: #a6a6a6;
+  --dark-fg-dark-4: #999999;
+  --dark-fg-dark-4-5: #8c8c8c;
+  --dark-fg-dark-5: #808080;
+  --dark-fg-dark-5-5: #737373;
+  --dark-fg-dark-6: #666666;
+  --dark-fg-dark-6-5: #595959;
+  --dark-fg-dark-7: #4d4d4d;
+  --dark-fg-dark-7-5: #404040;
+  --dark-fg-dark-8: #333333;
+  --dark-fg-dark-8-5: #262626;
+  --dark-fg-dark-9: #191919;
+  --dark-fg-dark-9-1: #171717;
+  --dark-fg-dark-9-2: #141414;
+  --dark-fg-dark-9-3: #121212;
+  --dark-fg-dark-9-4: #0f0f0f;
+  --dark-fg-dark-9-5: #0d0d0d;
+  --dark-fg-dark-9-6: #0a0a0a;
+  --dark-fg-dark-9-7: #080808;
+  --dark-fg-dark-9-8: #050505;
+  --dark-fg-dark-9-9: #030303;
+}
+html > body .to-color-danger {
+  color: #F93920 !important;
+}
+html > body .to-color-primary {
+  color: #0077fa !important;
+}
+html > body .to-color-primary-light {
+  color: #4da0fc !important;
+}
+html > body .to-color-primary-lighter {
+  color: #b3d6fe !important;
+}
+html > body .to-color-success {
+  color: #3BB346 !important;
+}
+html > body .to-color-warning {
+  color: #FC8800 !important;
+}
+html > body .to-color-warning-lighter {
+  color: #fedbb3 !important;
+}
+html > body .to-color-bright {
+  color: #fd0 !important;
+}
+html > body .to-color-secondary {
+  color: #4d5b65 !important;
+}
+html > body .to-color-secondary-lighter {
+  color: #828c93 !important;
+}
+html > body .to-color-info {
+  color: #999999 !important;
+}
+html > body .to-color-info-light {
+  color: #e6e6e6 !important;
+}
+html > body .to-color-fg {
+  color: #333333 !important;
+}
+html > body .to-color-fg-light {
+  color: #808080 !important;
+}
+html > body .to-color-bg {
+  color: #fff !important;
+}
+.to-color-danger * {
+  color: #F93920 !important;
+}
+.to-color-primary * {
+  color: #0077fa !important;
+}
+.to-color-success * {
+  color: #3BB346 !important;
+}
+.to-color-warning * {
+  color: #FC8800 !important;
+}
+.to-color-warning-lighter * {
+  color: #fedbb3 !important;
+}
+.to-color-secondary * {
+  color: #4d5b65 !important;
+}
+.to-color-bright * {
+  color: #fd0 !important;
+}
+.to-color-secondary-lighter * {
+  color: #828c93 !important;
+}
+.to-color-info * {
+  color: #999999 !important;
+}
+.to-color-info-light * {
+  color: #e6e6e6 !important;
+}
+.to-color-fg * {
+  color: #333333 !important;
+}
+.to-color-fg-light * {
+  color: #666666 !important;
+}
+.to-color-bg * {
+  color: #fff !important;
+}
+.theme-dark body {
+  color: #fff;
+  background: #2f2f2f;
+}
+/* dark mode */
+.theme-dark .c_md {
+  color: #fff;
+}
+.theme-dark .c_md > table tr {
+  background-color: #222;
+  border-top-color: #333;
+}
+.theme-dark .c_md > table tr:nth-child(2n) {
+  background-color: #2a2a2a;
+}
+.theme-dark .c_md > table th,
+.theme-dark .c_md > table td {
+  border-color: #333;
+}
+.theme-dark .c_md .demo-block {
+  border-color: #333;
+}
+.theme-dark .c_md .demo-block.hover {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+}
+.theme-dark .c_md .demo-block .meta {
+  background-color: #000;
+  border-top-color: #333;
+}
+.theme-dark .c_md .demo-block .description {
+  border-color: #333;
+  color: #ddd;
+  background-color: #222;
+}
+.theme-dark .c_md .demo-block .description code {
+  color: #5e6d82;
+  background-color: #222;
+}
+.theme-dark .c_md .demo-block .demo-block-control {
+  border-color: #333;
+  background-color: #222;
+}
+.theme-dark .c_md .demo-block .demo-block-control i.hovering {
+  transform: translateX(-40px);
+}
+.theme-dark .c_md .demo-block .demo-block-control:hover {
+  color: #fff;
+  background-color: #333;
+}
+.theme-dark .c_md > pre {
+  background: #000;
+}
+.theme-dark .c_md code[class*="language-"],
+.theme-dark .c_md pre[class*="language-"] {
+  color: #fff;
+}
+.theme-dark .c_md .highlight pre {
+  background: #000;
+}
+/**
+ * 组件公共样式
+ */
+.is-clip {
+  overflow: hidden;
+}