From b0cdb4198e11488ec7eb29495aa7f0862dfe3651 Mon Sep 17 00:00:00 2001 From: guy Date: Wed, 8 Sep 2021 00:00:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=AF=E6=8C=81modern?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- private/modern/app.less | 2 + private/modern/background.less | 2 + private/modern/font.less | 2 + private/modern/icon.less | 5 + private/modern/var.less | 5 + public/modern/app.less | 2 + public/modern/background.less | 2 + public/modern/font.less | 2 + public/modern/icon.less | 5 + public/modern/var.less | 6 + src/less/base/single/tip/tip.tooltip.less | 2 +- src/less/index-modern.less | 342 ++++++++++++++++++++++ src/less/lib/colors-modern.less | 181 ++++++++++++ src/less/lib/theme-modern.less | 52 ++++ src/less/lib/theme.less | 2 +- ui/modern/app.less | 2 + ui/modern/background.less | 2 + ui/modern/font.less | 2 + ui/modern/icon.less | 5 + ui/modern/var.less | 6 + webpack/attachments.js | 17 ++ webpack/webpack.prod.js | 1 + 22 files changed, 645 insertions(+), 2 deletions(-) create mode 100644 private/modern/app.less create mode 100644 private/modern/background.less create mode 100644 private/modern/font.less create mode 100644 private/modern/icon.less create mode 100644 private/modern/var.less create mode 100644 public/modern/app.less create mode 100644 public/modern/background.less create mode 100644 public/modern/font.less create mode 100644 public/modern/icon.less create mode 100644 public/modern/var.less create mode 100644 src/less/index-modern.less create mode 100644 src/less/lib/colors-modern.less create mode 100644 src/less/lib/theme-modern.less create mode 100644 ui/modern/app.less create mode 100644 ui/modern/background.less create mode 100644 ui/modern/font.less create mode 100644 ui/modern/icon.less create mode 100644 ui/modern/var.less diff --git a/private/modern/app.less b/private/modern/app.less new file mode 100644 index 000000000..d086387ac --- /dev/null +++ b/private/modern/app.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/app"; +@import "var"; diff --git a/private/modern/background.less b/private/modern/background.less new file mode 100644 index 000000000..996147127 --- /dev/null +++ b/private/modern/background.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/background"; +@import "var"; diff --git a/private/modern/font.less b/private/modern/font.less new file mode 100644 index 000000000..c236f82ed --- /dev/null +++ b/private/modern/font.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/font"; +@import "var"; diff --git a/private/modern/icon.less b/private/modern/icon.less new file mode 100644 index 000000000..43e3123c5 --- /dev/null +++ b/private/modern/icon.less @@ -0,0 +1,5 @@ +@import "../../src/less/resource/icon"; +@import "var"; + + + diff --git a/private/modern/var.less b/private/modern/var.less new file mode 100644 index 000000000..9eff8bc78 --- /dev/null +++ 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倍图片的基本地址 diff --git a/public/modern/app.less b/public/modern/app.less new file mode 100644 index 000000000..d086387ac --- /dev/null +++ b/public/modern/app.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/app"; +@import "var"; diff --git a/public/modern/background.less b/public/modern/background.less new file mode 100644 index 000000000..996147127 --- /dev/null +++ b/public/modern/background.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/background"; +@import "var"; diff --git a/public/modern/font.less b/public/modern/font.less new file mode 100644 index 000000000..c236f82ed --- /dev/null +++ b/public/modern/font.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/font"; +@import "var"; diff --git a/public/modern/icon.less b/public/modern/icon.less new file mode 100644 index 000000000..43e3123c5 --- /dev/null +++ b/public/modern/icon.less @@ -0,0 +1,5 @@ +@import "../../src/less/resource/icon"; +@import "var"; + + + diff --git a/public/modern/var.less b/public/modern/var.less new file mode 100644 index 000000000..189948635 --- /dev/null +++ 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倍图片的基本地址 + diff --git a/src/less/base/single/tip/tip.tooltip.less b/src/less/base/single/tip/tip.tooltip.less index 44a3d664c..d78cd410f 100644 --- 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; } } diff --git a/src/less/index-modern.less b/src/less/index-modern.less new file mode 100644 index 000000000..a237198e7 --- /dev/null +++ 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); +} diff --git a/src/less/lib/colors-modern.less b/src/less/lib/colors-modern.less new file mode 100644 index 000000000..72d0c388d --- /dev/null +++ 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); diff --git a/src/less/lib/theme-modern.less b/src/less/lib/theme-modern.less new file mode 100644 index 000000000..ef5b13f78 --- /dev/null +++ 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); + diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less index fa59952d2..412fef77a 100644 --- 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; diff --git a/ui/modern/app.less b/ui/modern/app.less new file mode 100644 index 000000000..d086387ac --- /dev/null +++ b/ui/modern/app.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/app"; +@import "var"; diff --git a/ui/modern/background.less b/ui/modern/background.less new file mode 100644 index 000000000..996147127 --- /dev/null +++ b/ui/modern/background.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/background"; +@import "var"; diff --git a/ui/modern/font.less b/ui/modern/font.less new file mode 100644 index 000000000..c236f82ed --- /dev/null +++ b/ui/modern/font.less @@ -0,0 +1,2 @@ +@import "../../src/less/resource/font"; +@import "var"; diff --git a/ui/modern/icon.less b/ui/modern/icon.less new file mode 100644 index 000000000..43e3123c5 --- /dev/null +++ b/ui/modern/icon.less @@ -0,0 +1,5 @@ +@import "../../src/less/resource/icon"; +@import "var"; + + + diff --git a/ui/modern/var.less b/ui/modern/var.less new file mode 100644 index 000000000..50a52a2ca --- /dev/null +++ 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倍图片的基本地址 diff --git a/webpack/attachments.js b/webpack/attachments.js index dc061810f..79a0709a6 100644 --- 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), diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js index 3de146bdd..e1fd15819 100644 --- 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,