样式支持modern模式

3 years ago · b0cdb4198e
22 changed files with 645 additions and 2 deletions
--- a/private/modern/app.less
+++ b/private/modern/app.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/app";
+@import "var";
--- a/private/modern/background.less
+++ b/private/modern/background.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/background";
+@import "var";
--- a/private/modern/font.less
+++ b/private/modern/font.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/font";
+@import "var";
--- a/private/modern/icon.less
+++ b/private/modern/icon.less
@ -0,0 +1,5 @@
+@import "../../src/less/resource/icon";
+@import "var";
+
+
+
--- a/private/modern/var.less
+++ b/private/modern/var.less
@ -0,0 +1,5 @@
+@import "../../src/less/index-modern";
+@webUrl: './';
+@fontUrl: '@{webUrl}font/'; //图片的基本地址
+@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址
+@image2xUrl: '@{webUrl}images/2x/'; //2倍图片的基本地址
--- a/public/modern/app.less
+++ b/public/modern/app.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/app";
+@import "var";
--- a/public/modern/background.less
+++ b/public/modern/background.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/background";
+@import "var";
--- a/public/modern/font.less
+++ b/public/modern/font.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/font";
+@import "var";
--- a/public/modern/icon.less
+++ b/public/modern/icon.less
@ -0,0 +1,5 @@
+@import "../../src/less/resource/icon";
+@import "var";
+
+
+
--- a/public/modern/var.less
+++ b/public/modern/var.less
@ -0,0 +1,6 @@
+@import "../../src/less/index-modern";
+@webUrl: 'https://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/';
+@fontUrl: '@{webUrl}font/'; //图片的基本地址
+@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址
+@image2xUrl: '@{webUrl}images/2x/'; //2倍图片的基本地址
+
--- a/src/less/base/single/tip/tip.tooltip.less
+++ b/src/less/base/single/tip/tip.tooltip.less
@ -13,7 +13,7 @@

  }
  &.tooltip-warning{
-    background: @color-bi-background-tooltip-success;
+    background: @color-bi-background-tooltip-failure;
    border: 1px solid @color-bi-border-tooltip-failure;
  }
 }
--- a/src/less/index-modern.less
+++ b/src/less/index-modern.less
@ -0,0 +1,342 @@
+@import "lib/colors-modern";
+@import "lib/theme-modern";
+
+:root{
+  --font-size-12: 12px;
+  --font-size-13: 13px;
+  --font-size-14: 14px;
+  --font-size-15: 15px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-22: 22px;
+  --font-size-24: 24px;
+  --font-size-30: 30px;
+  --font-size-40: 40px;
+  --font-size-50: 50px;
+  --font-size-60: 60px;
+  --font-size-70: 70px;
+  --radius-2: 2px;
+  --radius-6: 6px;
+
+  --opacity-15: 0.15;
+  --opacity-20: 0.2;
+
+  //font color
+  --font-color-black: #232e40;
+  --font-color-normal: #3d4d66;
+  --font-color-normal-theme-dark: #d6e0dc;
+  --font-color-light-gray: #647185;
+  --font-color-light-gray-theme-dark: #afb7c6;
+  --font-color-disabled: #9ea6b2;
+  --font-color-disabled-theme-dark: #878d9f;
+  --font-color-tips: #9ea6b2;
+  --font-color-tips-theme-dark: #6b7084;
+  --font-color-light-disabled: #d0d4da;
+  --font-color-light-disabled-theme-dark: #606479;
+  --font-color-gray: #999999;
+  --font-color-white: #ffffff;
+  --font-color-white-theme-dark: #20263b;
+  --font-color-light-highlight: #eaf2fd;
+  --font-color-medium-highlight: #d7e7fc;
+  --font-color-highlight: #3685f2;
+  --font-color-blue: #23beef;
+  --font-color-light-blue: #e9f8fd;
+  --font-color-success: #13cd66;
+  --font-color-warning: #faaa39;
+  --font-color-negative: #e65251;
+  --font-color-yellow: #ffc101;
+
+  //background color
+  --background-color-black: #232E40;
+  --background-color-black-theme-dark: #606479;
+  --background-color-light-black: #3d4d66;
+  --background-color-light-black-theme-dark: #d6e0dc;
+  --background-color-default: #ffffff;
+  --background-color-default-theme-dark: #20263b;
+  --background-color-normal: #f7f8fa;
+  --background-color-normal-theme-dark: #191b2b;
+  --background-color-light-highlight: #eaf2fd;
+  --background-color-medium-highlight: #d7e7fc;
+  --background-color-highlight: #3685f2;
+  --background-color-blue: #23beef;
+  --background-color-light-blue: #e9f8fd;
+  --background-color-dark: #d4dadd;
+  --background-color-light-gray: #f2f4f7;
+  --background-color-light-gray-theme-dark: #292f45;
+  --background-color-medium-gray: #e8eaed;
+  --background-color-medium-gray-theme-dark: #363e55;
+  --background-color-dark-gray: #d0d4da;
+  --background-color-dark-gray-theme-dark: #606479;
+  --background-color-disabled: #f2f4f7;
+  --background-color-disabled-theme-dark: #292f45;
+  --background-color-light-disabled: #9ea6b2;
+  --background-color-light-disabled-theme-dark: #878d9f;
+  --background-color-yellow: #ffc101;
+
+  --background-color-negative: #e65251;
+  --background-color-light-negative: #ffecec;
+  --background-color-dark-negative: #3A2940;
+  --background-color-light-warning: #feeed7;
+  --background-color-warning: #faaa39;
+
+  --background-color-dark-success: #13cd66;
+  --background-color-light-success: #e1f4e7;
+  --background-color-normal-success: #647185;
+
+  //border color
+  --border-color-default: #ffffff;
+  --border-color-black: #232e40;
+  --border-color-line: #e8eaed;
+  --border-color-line-theme-dark: #363e55;
+  --border-color-light-line: #f2f4f7;
+  --border-color-light-line-theme-dark: #292f45;
+  --border-color-dark-gray-line: #d0d4da;
+  --border-color-dark-gray-line-theme-dark: #606479;
+  --border-color-dark-line: #9ea6b2;
+  --border-color-dark-line-theme-dark: #878d9f;
+  --border-color-highlight: #3685f2;
+
+  --border-color-warning: #fbb03b;
+  --border-color-negative: #e65251;
+  --border-color-success: #13cd66;
+  --border-color-light-negative: #f4cbcb;
+  --border-color-normal-success: #eddea2;
+
+  //split color
+  --border-color-disabled: #e8eaed;
+  --border-color-disabled-theme-dark: #363e55;
+
+  //scroll color
+  --scroll-color: #232e40;
+  --scroll-color-theme-dark: #ffffff;
+  --scroll-thumb-color: #232e40;
+  --scroll-thumb-color-theme-dark: #232e40;
+
+  //默认字体颜色
+  --color-bi-text-normal: var(--font-color-normal);
+  //深色主题默认字体颜色
+  --color-bi-text-theme-dark: var(--font-color-normal-theme-dark);
+  --color-bi-text-normal-theme-dark: var(--font-color-normal-theme-dark);
+  //黑色字体颜色
+  --color-bi-text-black: var(--font-color-black);
+  //深色主题黑色字体颜色
+  --color-bi-text-black-theme-dark: var(--font-color-normal-theme-dark);
+  //灰色字体颜色
+  --color-bi-text-gray: var(--font-color-gray);
+  //浅灰色字体
+  --color-bi-text-light-gray: var(--font-color-light-gray);
+  //深色主题浅灰色字体
+  --color-bi-text-light-gray-theme-dark: var(--font-color-light-gray-theme-dark);
+  //白色字体颜色
+  --color-bi-text: var(--font-color-white);
+  --color-bi-text-white: var(--font-color-white);
+  //深色主题白色字体颜色
+  --color-bi-text-white-theme-dark: var(--font-color-white-theme-dark);
+  //灰化字体颜色
+  --color-bi-text-disabled: var(--font-color-disabled);
+  //深色主题灰化字体颜色
+  --color-bi-text-disabled-theme-dark: var(--font-color-disabled-theme-dark);
+  //灰化图标色
+  --color-bi-icon-disabled: var(--font-color-light-disabled);
+  //深色主题灰化图标颜色
+  --color-bi-icon-disabled-theme-dark: var(--font-color-light-disabled-theme-dark);
+  //提示字体颜色
+  --color-bi-text-tips: var(--font-color-tips);
+  //深色主题提示字体颜色
+  --color-bi-text-tips-theme-dark: var(--font-color-tips-theme-dark);
+  //成功字体颜色
+  --color-bi-text-success: var(--font-color-success);
+  //失败字体颜色
+  --color-bi-text-failure: var(--font-color-negative);
+  //基本提亮颜色
+  --color-bi-text-highlight: var(--font-color-highlight);
+  //标红色
+  --color-bi-text-redmark: var(--font-color-warning);
+
+  //普通背景
+  --color-bi-background-normal: var(--background-color-normal);
+  //深色主题普通背景
+  --color-bi-background-normal-theme-dark: var(--background-color-normal-theme-dark);
+  //默认背景
+  --color-bi-background-default: var(--background-color-default);
+  //深色主题默认背景
+  --color-bi-background-default-theme-dark: var(--background-color-default-theme-dark);
+  //黑色背景
+  --color-bi-background-black: var(--background-color-black);
+  //深色主题黑色背景
+  --color-bi-background-black-theme-dark: var(--background-color-black-theme-dark);
+  //浅黑色背景
+  --color-bi-background-light-black: var(--background-color-light-black);
+  //深色主题浅黑色背景
+  --color-bi-background-light-black-theme-dark: var(--background-color-light-black-theme-dark);
+  //深灰色背景
+  --color-bi-background-dark-gray: var(--background-color-dark-gray);
+  //深色主题深灰色背景
+  --color-bi-background-dark-gray-theme-dark: var(--background-color-dark-gray-theme-dark);
+  //灰色背景(浅)
+  --color-bi-background-light-gray: var(--background-color-light-gray);
+  //深色主题灰色背景(浅)
+  --color-bi-background-light-gray-theme-dark: var(--background-color-light-gray-theme-dark);
+  //灰色背景(中)
+  --color-bi-background-medium-gray: var(--background-color-medium-gray);
+  //深色主题灰色背景(中)
+  --color-bi-background-medium-gray-theme-dark: var(--background-color-medium-gray-theme-dark);
+  //灰化背景
+  --color-bi-background-disabled: var(--background-color-disabled);
+  //深色主题灰化背景
+  --color-bi-background-disabled-theme-dark: var(--background-color-disabled-theme-dark);
+  //浅灰化背景
+  --color-bi-background-light-disabled: var(--background-color-light-disabled);
+  //深色主题浅灰化背景
+  --color-bi-background-light-disabled-theme-dark: var(--background-color-light-disabled-theme-dark);
+  //成功背景色
+  --color-bi-background-success: var(--background-color-dark-success);
+  //成功背景色(浅)
+  --color-bi-background-light-success: var(--background-color-light-success);
+  //失败背景色
+  --color-bi-background-failure: var(--background-color-negative);
+  //失败背景色(浅)
+  --color-bi-background-light-failure: var(--background-color-light-negative);
+  //失败背景色(深)
+  --color-bi-background-dark-failure: var(--background-color-dark-negative);
+  //警示背景色
+  --color-bi-background-warning: var(--background-color-warning);
+  //警示背景色(浅)
+  --color-bi-background-light-warning: var(--background-color-light-warning);
+  //背景提亮色
+  --color-bi-background-highlight: var(--background-color-highlight);
+  //背景提亮色(浅)
+  --color-bi-background-light-highlight: var(--background-color-light-highlight);
+
+  //黑色边框色
+  --color-bi-border-black: var(--border-color-black);
+  //默认边框色
+  --color-bi-border-default: var(--border-color-default);
+  //边框线色
+  --color-bi-border-line: var(--border-color-line);
+  //深色主题边框线色
+  --color-bi-border-line-theme-dark: var(--border-color-line-theme-dark);
+  //深灰色边框线
+  --color-bi-border-dark-gray-line: var(--border-color-dark-gray-line);
+  //深灰色主题深色边框线
+  --color-bi-border-dark-gray-line-theme-dark: var(--border-color-dark-gray-line-theme-dark);
+  //深色边框线
+  --color-bi-border-dark-line: var(--border-color-dark-line);
+  //深色主题深色边框线
+  --color-bi-border-dark-line-theme-dark: var(--border-color-dark-line-theme-dark);
+  //灰化边框
+  --color-bi-border-disabled: var(--border-color-disabled);
+  //深色主题灰化边框
+  --color-bi-border-disabled-theme-dark: var(--border-color-disabled-theme-dark);
+  //成功边框色
+  --color-bi-border-success: var(--border-color-success);
+  //失败边框色
+  --color-bi-border-failure: var(--border-color-negative);
+  //警示边框色
+  --color-bi-border-warning: var(--border-color-warning);
+  //边框提亮
+  --color-bi-border-highlight: var(--border-color-highlight);
+
+  //颜色百分比
+  //green
+  --color-bi-green-80: fade(@font-color-success, 80);
+  --color-bi-green-60: fade(@font-color-success, 60);
+  --color-bi-green-40: fade(@font-color-success, 40);
+  --color-bi-green-30: fade(@font-color-success, 30);
+  --color-bi-green-20: fade(@font-color-success, 20);
+  --color-bi-green-10: fade(@font-color-success, 10);
+  --color-bi-green-5: fade(@font-color-success, 5);
+
+  //blue
+  --color-bi-blue-80: fade(@font-color-highlight, 80);
+  --color-bi-blue-60: fade(@font-color-highlight, 60);
+  --color-bi-blue-40: fade(@font-color-highlight, 40);
+  --color-bi-blue-30: fade(@font-color-highlight, 30);
+  --color-bi-blue-20: fade(@font-color-highlight, 20);
+  --color-bi-blue-10: fade(@font-color-highlight, 10);
+  --color-bi-blue-5: fade(@font-color-highlight, 5);
+
+  //light-blue
+  --color-bi-light-blue-80: fade(@font-color-light-highlight, 80);
+  --color-bi-light-blue-60: fade(@font-color-light-highlight, 60);
+  --color-bi-light-blue-40: fade(@font-color-light-highlight, 40);
+  --color-bi-light-blue-30: fade(@font-color-light-highlight, 30);
+  --color-bi-light-blue-20: fade(@font-color-light-highlight, 20);
+  --color-bi-light-blue-10: fade(@font-color-light-highlight, 10);
+  --color-bi-light-blue-5: fade(@font-color-light-highlight, 5);
+
+  // orange
+  --color-bi-orange-80: fade(@font-color-warning, 80);
+  --color-bi-orange-60: fade(@font-color-warning, 60);
+  --color-bi-orange-40: fade(@font-color-warning, 40);
+  --color-bi-orange-30: fade(@font-color-warning, 30);
+  --color-bi-orange-20: fade(@font-color-warning, 20);
+  --color-bi-orange-10: fade(@font-color-warning, 10);
+  --color-bi-orange-5: fade(@font-color-warning, 5);
+
+  // red
+  --color-bi-red-80: fade(@font-color-negative, 80);
+  --color-bi-red-60: fade(@font-color-negative, 60);
+  --color-bi-red-40: fade(@font-color-negative, 40);
+  --color-bi-red-30: fade(@font-color-negative, 30);
+  --color-bi-red-20: fade(@font-color-negative, 20);
+  --color-bi-red-10: fade(@font-color-negative, 10);
+  --color-bi-red-5: fade(@font-color-negative, 5);
+
+  // yellow
+  --color-bi-yellow-80: fade(@font-color-yellow, 90);
+  --color-bi-yellow-60: fade(@font-color-yellow, 60);
+  --color-bi-yellow-40: fade(@font-color-yellow, 40);
+  --color-bi-yellow-20: fade(@font-color-yellow, 20);
+  --color-bi-yellow-5: fade(@font-color-yellow, 5);
+
+
+  //tooltip
+  //成功背景(专属配色)
+  --color-bi-background-tooltip-success: var(--background-color-normal-success);
+  //成功边框(专属配色)
+  --color-bi-border-tooltip-success: var(--border-color-normal-success);
+  //失败背景
+  --color-bi-background-tooltip-failure: var(--color-bi-background-failure);
+  //失败边框
+  --color-bi-border-tooltip-failure: var(--color-bi-border-failure);
+
+  //按钮的mask颜色
+  --color-bi-background-button-mask: var(--color-bi-background-black);
+
+  //水印字体颜色
+  --color-bi-text-water-mark: var(--color-bi-text-tips);
+  --color-bi-text-water-mark-theme-dark: var(--color-bi-text-tips-theme-dark);
+
+  //toast
+  --color-bi-background-toast-success: var(--color-bi-background-success);
+  --color-bi-background-toast-warning: var(--color-bi-background-warning);
+  --color-bi-background-toast-error: var(--color-bi-background-failure);
+  --color-bi-background-toast-normal: var(--color-bi-background-highlight);
+
+  //bubble
+  --color-bi-background-bubble-success: var(--color-bi-background-light-success);
+  --color-bi-background-bubble-warning: var(--color-bi-background-light-warning);
+  --color-bi-background-bubble-error: var(--color-bi-background-light-failure);
+  --color-bi-background-bubble-error-theme-dark: var(--color-bi-background-dark-failure);
+  --color-bi-background-bubble-normal: var(--color-bi-background-light-highlight);
+
+  //bi-background背景
+  --color-bi-background-background: var(--color-bi-background-normal);
+  --color-bi-background-background-theme-dark: var(--color-bi-background-normal-theme-dark);
+  --color-bi-text-background: var(--color-bi-text-normal);
+  --color-bi-text-background-theme-dark: var(--color-bi-text-theme-dark);
+
+  //bi-header-background背景
+  --color-bi-background-header-background: var(--color-bi-background-light-gray);
+  --color-bi-background-header-background-theme-dark: var(--color-bi-background-light-gray-theme-dark);
+  --color-bi-text-header-background: var(--color-bi-text-light-gray);
+  --color-bi-text-header-background-theme-dark: var(--color-bi-text-light-gray-theme-dark);
+
+  //bi-card卡片
+  --color-bi-background-card: var(--color-bi-background-default);
+  --color-bi-background-card-theme-dark: var(--color-bi-background-default-theme-dark);
+  --color-bi-text-card: var(--color-bi-text-normal);
+  --color-bi-text-card-theme-dark: var(--color-bi-text-theme-dark);
+}
--- a/src/less/lib/colors-modern.less
+++ b/src/less/lib/colors-modern.less
@ -0,0 +1,181 @@
+@import "constant";
+
+// 通用色彩库。从constant.less中获取相关颜色,不要出现#xxxxxx
+
+//默认字体颜色
+@color-bi-text-normal: var(--color-bi-text-normal);
+//深色主题默认字体颜色
+@color-bi-text-theme-dark: var(--color-bi-text-theme-dark);
+@color-bi-text-normal-theme-dark: var(--color-bi-text-normal-theme-dark);
+//黑色字体颜色
+@color-bi-text-black: var(--color-bi-text-black);
+//深色主题黑色字体颜色
+@color-bi-text-black-theme-dark: var(--color-bi-text-black-theme-dark);
+//灰色字体颜色
+@color-bi-text-gray: var(--color-bi-text-gray);
+//浅灰色字体
+@color-bi-text-light-gray: var(--color-bi-text-light-gray);
+//深色主题浅灰色字体
+@color-bi-text-light-gray-theme-dark: var(--color-bi-text-light-gray-theme-dark);
+//白色字体颜色
+@color-bi-text: var(--color-bi-text);
+@color-bi-text-white: var(--color-bi-text-white);
+//深色主题白色字体颜色
+@color-bi-text-white-theme-dark: var(--color-bi-text-white-theme-dark);
+//灰化字体颜色
+@color-bi-text-disabled: var(--color-bi-text-disabled);
+//深色主题灰化字体颜色
+@color-bi-text-disabled-theme-dark: var(--color-bi-text-disabled-theme-dark);
+//灰化图标色
+@color-bi-icon-disabled: var(--color-bi-icon-disabled);
+//深色主题灰化图标颜色
+@color-bi-icon-disabled-theme-dark: var(--color-bi-icon-disabled-theme-dark);
+//提示字体颜色
+@color-bi-text-tips: var(--color-bi-text-tips);
+//深色主题提示字体颜色
+@color-bi-text-tips-theme-dark: var(--color-bi-text-tips-theme-dark);
+//成功字体颜色
+@color-bi-text-success: var(--color-bi-text-success);
+//失败字体颜色
+@color-bi-text-failure: var(--color-bi-text-failure);
+//基本提亮颜色
+@color-bi-text-highlight: var(--color-bi-text-highlight);
+//标红色
+@color-bi-text-redmark: var(--color-bi-text-redmark);
+
+//普通背景
+@color-bi-background-normal: var(--color-bi-background-normal);
+//深色主题普通背景
+@color-bi-background-normal-theme-dark: var(--color-bi-background-normal-theme-dark);
+//默认背景
+@color-bi-background-default: var(--color-bi-background-default);
+//深色主题默认背景
+@color-bi-background-default-theme-dark: var(--color-bi-background-default-theme-dark);
+//黑色背景
+@color-bi-background-black: var(--color-bi-background-black);
+//深色主题黑色背景
+@color-bi-background-black-theme-dark: var(--color-bi-background-black-theme-dark);
+//浅黑色背景
+@color-bi-background-light-black: var(--color-bi-background-light-black);
+//深色主题浅黑色背景
+@color-bi-background-light-black-theme-dark: var(--color-bi-background-light-black-theme-dark);
+//深灰色背景
+@color-bi-background-dark-gray: var(--color-bi-background-dark-gray);
+//深色主题深灰色背景
+@color-bi-background-dark-gray-theme-dark: var(--color-bi-background-dark-gray-theme-dark);
+//灰色背景(浅)
+@color-bi-background-light-gray: var(--color-bi-background-light-gray);
+//深色主题灰色背景(浅)
+@color-bi-background-light-gray-theme-dark: var(--color-bi-background-light-gray-theme-dark);
+//灰色背景(中)
+@color-bi-background-medium-gray: var(--color-bi-background-medium-gray);
+//深色主题灰色背景(中)
+@color-bi-background-medium-gray-theme-dark: var(--color-bi-background-medium-gray-theme-dark);
+//灰化背景
+@color-bi-background-disabled: var(--color-bi-background-disabled);
+//深色主题灰化背景
+@color-bi-background-disabled-theme-dark: var(--color-bi-background-disabled-theme-dark);
+//浅灰化背景
+@color-bi-background-light-disabled: var(--color-bi-background-light-disabled);
+//深色主题浅灰化背景
+@color-bi-background-light-disabled-theme-dark: var(--color-bi-background-light-disabled-theme-dark);
+//成功背景色
+@color-bi-background-success: var(--color-bi-background-success);
+//成功背景色(浅)
+@color-bi-background-light-success: var(--color-bi-background-light-success);
+//失败背景色
+@color-bi-background-failure: var(--color-bi-background-failure);
+//失败背景色(浅)
+@color-bi-background-light-failure: var(--color-bi-background-light-failure);
+//失败背景色(深)
+@color-bi-background-dark-failure: var(--color-bi-background-dark-failure);
+//警示背景色
+@color-bi-background-warning: var(--color-bi-background-warning);
+//警示背景色(浅)
+@color-bi-background-light-warning: var(--color-bi-background-light-warning);
+//背景提亮色
+@color-bi-background-highlight: var(--color-bi-background-highlight);
+//背景提亮色(浅)
+@color-bi-background-light-highlight: var(--color-bi-background-light-highlight);
+
+//黑色边框色
+@color-bi-border-black: var(--color-bi-border-black);
+//默认边框色
+@color-bi-border-default: var(--color-bi-border-default);
+//边框线色
+@color-bi-border-line: var(--color-bi-border-line);
+//深色主题边框线色
+@color-bi-border-line-theme-dark: var(--color-bi-border-line-theme-dark);
+//深灰色边框线
+@color-bi-border-dark-gray-line: var(--color-bi-border-dark-gray-line);
+//深灰色主题深色边框线
+@color-bi-border-dark-gray-line-theme-dark: var(--color-bi-border-dark-gray-line-theme-dark);
+//深色边框线
+@color-bi-border-dark-line: var(--color-bi-border-dark-line);
+//深色主题深色边框线
+@color-bi-border-dark-line-theme-dark: var(--color-bi-border-dark-line-theme-dark);
+//灰化边框
+@color-bi-border-disabled: var(--color-bi-border-disabled);
+//深色主题灰化边框
+@color-bi-border-disabled-theme-dark: var(--color-bi-border-disabled-theme-dark);
+//成功边框色
+@color-bi-border-success: var(--color-bi-border-success);
+//失败边框色
+@color-bi-border-failure: var(--color-bi-border-failure);
+//警示边框色
+@color-bi-border-warning: var(--color-bi-border-warning);
+//边框提亮
+@color-bi-border-highlight: var(--color-bi-border-highlight);
+
+//颜色百分比
+//green
+@color-bi-green-80: var(--color-bi-green-80);
+@color-bi-green-60: var(--color-bi-green-60);
+@color-bi-green-40: var(--color-bi-green-40);
+@color-bi-green-30: var(--color-bi-green-30);
+@color-bi-green-20: var(--color-bi-green-20);
+@color-bi-green-10: var(--color-bi-green-10);
+@color-bi-green-5: var(--color-bi-green-5);
+
+//blue
+@color-bi-blue-80: var(--color-bi-blue-80);
+@color-bi-blue-60: var(--color-bi-blue-60);
+@color-bi-blue-40: var(--color-bi-blue-40);
+@color-bi-blue-30: var(--color-bi-blue-30);
+@color-bi-blue-20: var(--color-bi-blue-20);
+@color-bi-blue-10: var(--color-bi-blue-10);
+@color-bi-blue-5: var(--color-bi-blue-5);
+
+//light-blue
+@color-bi-light-blue-80: var(--color-bi-light-blue-80);
+@color-bi-light-blue-60: var(--color-bi-light-blue-60);
+@color-bi-light-blue-40: var(--color-bi-light-blue-40);
+@color-bi-light-blue-30: var(--color-bi-light-blue-30);
+@color-bi-light-blue-20: var(--color-bi-light-blue-20);
+@color-bi-light-blue-10: var(--color-bi-light-blue-10);
+@color-bi-light-blue-5: var(--color-bi-light-blue-5);
+
+// orange
+@color-bi-orange-80: var(--color-bi-orange-80);
+@color-bi-orange-60: var(--color-bi-orange-60);
+@color-bi-orange-40: var(--color-bi-orange-40);
+@color-bi-orange-30: var(--color-bi-orange-30);
+@color-bi-orange-20: var(--color-bi-orange-20);
+@color-bi-orange-10: var(--color-bi-orange-10);
+@color-bi-orange-5: var(--color-bi-orange-5);
+
+// red
+@color-bi-red-80: var(--color-bi-red-80);
+@color-bi-red-60: var(--color-bi-red-60);
+@color-bi-red-40: var(--color-bi-red-40);
+@color-bi-red-30: var(--color-bi-red-30);
+@color-bi-red-20: var(--color-bi-red-20);
+@color-bi-red-10: var(--color-bi-red-10);
+@color-bi-red-5: var(--color-bi-red-5);
+
+// yellow
+@color-bi-yellow-80: var(--color-bi-yellow-80);
+@color-bi-yellow-60: var(--color-bi-yellow-60);
+@color-bi-yellow-40: var(--color-bi-yellow-40);
+@color-bi-yellow-20: var(--color-bi-yellow-20);
+@color-bi-yellow-5: var(--color-bi-yellow-5);
--- a/src/less/lib/theme-modern.less
+++ b/src/less/lib/theme-modern.less
@ -0,0 +1,52 @@
+@import "colors";
+
+// 专属组件色彩库，通用配色中有的用通用配色，否则选constant自定义配色
+
+//tooltip
+//成功背景(专属配色)
+@color-bi-background-tooltip-success: var(--color-bi-background-tooltip-success);
+//成功边框(专属配色)
+@color-bi-border-tooltip-success: var(--color-bi-border-tooltip-success);
+//失败背景
+@color-bi-background-tooltip-success: var(--color-bi-background-tooltip-success);
+//失败边框
+@color-bi-border-tooltip-failure: var(--color-bi-border-tooltip-failure);
+
+//按钮的mask颜色
+@color-bi-background-button-mask: var(--color-bi-background-button-mask);
+
+//水印字体颜色
+@color-bi-text-water-mark: var(--color-bi-text-water-mark);
+@color-bi-text-water-mark-theme-dark: var(--color-bi-text-water-mark-theme-dark);
+
+//toast
+@color-bi-background-toast-success: var(--color-bi-background-toast-success);
+@color-bi-background-toast-warning: var(--color-bi-background-toast-warning);
+@color-bi-background-toast-error: var(--color-bi-background-toast-error);
+@color-bi-background-toast-normal: var(--color-bi-background-toast-normal);
+
+//bubble
+@color-bi-background-bubble-success: var(--color-bi-background-bubble-success);
+@color-bi-background-bubble-warning: var(--color-bi-background-bubble-warning);
+@color-bi-background-bubble-error: var(--color-bi-background-bubble-error);
+@color-bi-background-bubble-error-theme-dark: var(--color-bi-background-bubble-error-theme-dark);
+@color-bi-background-bubble-normal: var(--color-bi-background-bubble-normal);
+
+//bi-background背景
+@color-bi-background-background: var(--color-bi-background-background);
+@color-bi-background-background-theme-dark: var(--color-bi-background-background-theme-dark);
+@color-bi-text-background: var(--color-bi-text-background);
+@color-bi-text-background-theme-dark: var(--color-bi-text-background-theme-dark);
+
+//bi-header-background背景
+@color-bi-background-header-background: var(--color-bi-background-header-background);
+@color-bi-background-header-background-theme-dark: var(--color-bi-background-header-background-theme-dark);
+@color-bi-text-header-background: var(--color-bi-text-header-background);
+@color-bi-text-header-background-theme-dark: var(--color-bi-text-header-background-theme-dark);
+
+//bi-card卡片
+@color-bi-background-card: var(--color-bi-background-card);
+@color-bi-background-card-theme-dark: var(--color-bi-background-card-theme-dark);
+@color-bi-text-card: var(--color-bi-text-card);
+@color-bi-text-card-theme-dark: var(--color-bi-text-card-theme-dark);
+
--- a/src/less/lib/theme.less
+++ b/src/less/lib/theme.less
@ -8,7 +8,7 @@
 //成功边框(专属配色)
@color-bi-border-tooltip-success: @border-color-normal-success;
 //失败背景
-@color-bi-background-tooltip-success: @color-bi-background-failure;
+@color-bi-background-tooltip-failure: @color-bi-background-failure;
 //失败边框
@color-bi-border-tooltip-failure: @color-bi-border-failure;

--- a/ui/modern/app.less
+++ b/ui/modern/app.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/app";
+@import "var";
--- a/ui/modern/background.less
+++ b/ui/modern/background.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/background";
+@import "var";
--- a/ui/modern/font.less
+++ b/ui/modern/font.less
@ -0,0 +1,2 @@
+@import "../../src/less/resource/font";
+@import "var";
--- a/ui/modern/icon.less
+++ b/ui/modern/icon.less
@ -0,0 +1,5 @@
+@import "../../src/less/resource/icon";
+@import "var";
+
+
+
--- a/ui/modern/var.less
+++ b/ui/modern/var.less
@ -0,0 +1,6 @@
+@import "../../src/less/index-modern";
+@webUrl: 'resources?path=/com/fr/web/ui/';
+
+@fontUrl: '@{webUrl}font/'; //图片的基本地址
+@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址
+@image2xUrl: '@{webUrl}images/2x/'; //2倍图片的基本地址
--- a/webpack/attachments.js
+++ b/webpack/attachments.js
@ -165,6 +165,22 @@ const fineui = [].concat(
    basicAttachmentMap.ts,
 );

+const fineuiModern = [].concat(
+    basicAttachmentMap.core,
+    basicAttachmentMap.fixProxy,
+    basicAttachmentMap.base,
+    basicAttachmentMap.case,
+    basicAttachmentMap.widget,
+    basicAttachmentMap.router,
+    [fixCompact, workerCompact],
+    sync([
+        'ui/modern/app.less',
+        'ui/modern/**/*.less',
+        'ui/js/**/*.js',
+    ]),
+    basicAttachmentMap.ts,
+);
+
 const fineuiProxy = [].concat(
    basicAttachmentMap.core,
    basicAttachmentMap.fixProxy,
@ -235,6 +251,7 @@ module.exports = {
    fineuiWithoutNormalize: uniq(fineuiWithoutNormalize),
    bundleWithoutNormalize: uniq(bundleWithoutNormalize),
    fineui: uniq(fineui),
+    fineuiModern: uniq(fineuiModern),
    fineuiProxy: uniq(fineuiProxy),
    fineuiIE: uniq(fineuiIE),
    fineuiWithoutJqueryAndPolyfillJs: uniq(fineuiWithoutJqueryAndPolyfillJs),
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@ -17,6 +17,7 @@ module.exports = merge.smart(common, {
        font: attachments.font,
        "fineui.min": attachments.fineui,
        'fineui_without_normalize.min': attachments.fineuiWithoutNormalize,
+        "fineui.modern.min": attachments.fineuiModern,
        "fineui.proxy.min": attachments.fineuiProxy,
        "fineui.ie.min": attachments.fineuiIE,
        utils: attachments.utils,