Browse Source

Pull request #2164: 无JIRA任务 样式支持modern模式

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '6ee9556792e5b0b76807ad685f1c9065f37771be':
  样式支持modern模式
  样式支持modern模式
es6
guy 3 years ago
parent
commit
a6d542332a
  1. 2
      private/modern/app.less
  2. 2
      private/modern/background.less
  3. 2
      private/modern/font.less
  4. 5
      private/modern/icon.less
  5. 5
      private/modern/var.less
  6. 2
      public/modern/app.less
  7. 2
      public/modern/background.less
  8. 2
      public/modern/font.less
  9. 5
      public/modern/icon.less
  10. 6
      public/modern/var.less
  11. 2
      src/less/base/single/tip/tip.tooltip.less
  12. 342
      src/less/index-modern.less
  13. 181
      src/less/lib/colors-modern.less
  14. 52
      src/less/lib/theme-modern.less
  15. 2
      src/less/lib/theme.less
  16. 2
      ui/modern/app.less
  17. 2
      ui/modern/background.less
  18. 2
      ui/modern/font.less
  19. 5
      ui/modern/icon.less
  20. 6
      ui/modern/var.less
  21. 37
      webpack/attachments.js
  22. 2
      webpack/webpack.prod.js

2
private/modern/app.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/app";
@import "var";

2
private/modern/background.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/background";
@import "var";

2
private/modern/font.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/font";
@import "var";

5
private/modern/icon.less

@ -0,0 +1,5 @@
@import "../../src/less/resource/icon";
@import "var";

5
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倍图片的基本地址

2
public/modern/app.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/app";
@import "var";

2
public/modern/background.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/background";
@import "var";

2
public/modern/font.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/font";
@import "var";

5
public/modern/icon.less

@ -0,0 +1,5 @@
@import "../../src/less/resource/icon";
@import "var";

6
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倍图片的基本地址

2
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;
}
}

342
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);
}

181
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);

52
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);

2
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;

2
ui/modern/app.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/app";
@import "var";

2
ui/modern/background.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/background";
@import "var";

2
ui/modern/font.less

@ -0,0 +1,2 @@
@import "../../src/less/resource/font";
@import "var";

5
ui/modern/icon.less

@ -0,0 +1,5 @@
@import "../../src/less/resource/icon";
@import "var";

6
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倍图片的基本地址

37
webpack/attachments.js

@ -101,6 +101,19 @@ const bundle = [].concat(
basicAttachmentMap.ts,
);
const bundleModern = [].concat(
basicAttachmentMap.core,
basicAttachmentMap.fixProxy,
basicAttachmentMap.base,
basicAttachmentMap.case,
basicAttachmentMap.widget,
sync(["public/modern/app.less", "public/modern/**/*.less"]),
[fixCompact, workerCompact],
basicAttachmentMap.router,
sync(["public/js/**/*.js", "public/js/index.js", "i18n/i18n.cn.js"]),
basicAttachmentMap.ts,
);
const coreJs = [].concat(
basicAttachmentMap.polyfill,
basicAttachmentMap.core,
@ -165,6 +178,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,
@ -196,11 +225,13 @@ const fineuiWithoutJqueryAndPolyfillJs = [].concat(
lodashJs,
"src/core/**/*.js",
"src/data/**/*.js",
"dist/fix/fix.js",
"!src/core/platform/web/**/*.js",
]),
basicAttachmentMap.fix,
sync([
"src/base/**/*.js",
"src/case/**/*.js",
"!src/core/platform/web/**/*.js",
"!src/base/single/input/file.js",
"!src/case/ztree/**/*.js",
]),
@ -231,10 +262,12 @@ module.exports = {
lodash: lodashJs,
font: basicAttachmentMap.font,
bundle: uniq(bundle),
bundleModern: uniq(bundleModern),
bundleIE: uniq(bundleIE),
fineuiWithoutNormalize: uniq(fineuiWithoutNormalize),
bundleWithoutNormalize: uniq(bundleWithoutNormalize),
fineui: uniq(fineui),
fineuiModern: uniq(fineuiModern),
fineuiProxy: uniq(fineuiProxy),
fineuiIE: uniq(fineuiIE),
fineuiWithoutJqueryAndPolyfillJs: uniq(fineuiWithoutJqueryAndPolyfillJs),

2
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,
@ -25,6 +26,7 @@ module.exports = merge.smart(common, {
"2.0/fineui.ie.min": attachments.bundleIE,
"2.0/fineui": attachments.bundle,
"2.0/fineui.min": attachments.bundle,
"2.0/fineui.modern.min": attachments.bundleModern,
'2.0/fineui_without_normalize': attachments.bundleWithoutNormalize,
'2.0/fineui_without_normalize.min': attachments.bundleWithoutNormalize,
core: attachments.coreJs,

Loading…
Cancel
Save