Browse Source

KERNEL-9882 基础色板

es6
windy 3 years ago
parent
commit
2afaf45071
  1. 53
      src/less/lib/colors.less
  2. 99
      src/less/lib/constant.less

53
src/less/lib/colors.less

@ -126,56 +126,3 @@
@color-bi-border-warning: @border-color-warning;
//边框提亮
@color-bi-border-highlight: @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);

99
src/less/lib/constant.less

@ -20,6 +20,75 @@
@opacity-15: 0.15;
@opacity-20: 0.2;
//色板
//green
@color-bi-green-100: #13cd66;
@color-bi-green-80: fade(@color-bi-green-100, 80);
@color-bi-green-60: fade(@color-bi-green-100, 60);
@color-bi-green-40: fade(@color-bi-green-100, 40);
@color-bi-green-30: fade(@color-bi-green-100, 30);
@color-bi-green-20: fade(@color-bi-green-100, 20);
@color-bi-green-10: fade(@color-bi-green-100, 10);
@color-bi-green-5: fade(@color-bi-green-100, 5);
//cyan
@color-bi-green-100: #13cd66;
@color-bi-green-80: fade(@color-bi-green-100, 80);
@color-bi-green-60: fade(@color-bi-green-100, 60);
@color-bi-green-40: fade(@color-bi-green-100, 40);
@color-bi-green-30: fade(@color-bi-green-100, 30);
@color-bi-green-20: fade(@color-bi-green-100, 20);
@color-bi-green-10: fade(@color-bi-green-100, 10);
@color-bi-green-5: fade(@color-bi-green-100, 5);
//blue
@color-bi-blue-100: #3685f2;
@color-bi-blue-80: fade(@color-bi-blue-100, 80);
@color-bi-blue-60: fade(@color-bi-blue-100, 60);
@color-bi-blue-40: fade(@color-bi-blue-100, 40);
@color-bi-blue-30: fade(@color-bi-blue-100, 30);
@color-bi-blue-20: fade(@color-bi-blue-100, 20);
@color-bi-blue-10: fade(@color-bi-blue-100, 10);
@color-bi-blue-5: fade(@color-bi-blue-100, 5);
//light-blue
@color-bi-light-blue-100: #eaf2fd;
@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80);
@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60);
@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40);
@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30);
@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20);
@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10);
@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5);
// orange
@color-bi-orange-100: #faaa39;
@color-bi-orange-80: fade(@color-bi-orange-100, 80);
@color-bi-orange-60: fade(@color-bi-orange-100, 60);
@color-bi-orange-40: fade(@color-bi-orange-100, 40);
@color-bi-orange-30: fade(@color-bi-orange-100, 30);
@color-bi-orange-20: fade(@color-bi-orange-100, 20);
@color-bi-orange-10: fade(@color-bi-orange-100, 10);
@color-bi-orange-5: fade(@color-bi-orange-100, 5);
// red
@color-bi-red-100: #e65251;
@color-bi-red-80: fade(@color-bi-red-100, 80);
@color-bi-red-60: fade(@color-bi-red-100, 60);
@color-bi-red-40: fade(@color-bi-red-100, 40);
@color-bi-red-30: fade(@color-bi-red-100, 30);
@color-bi-red-20: fade(@color-bi-red-100, 20);
@color-bi-red-10: fade(@color-bi-red-100, 10);
@color-bi-red-5: fade(@color-bi-red-100, 5);
// yellow
@font-color-yellow-100: #ffc101;
@color-bi-yellow-80: fade(@font-color-yellow-100, 90);
@color-bi-yellow-60: fade(@font-color-yellow-100, 60);
@color-bi-yellow-40: fade(@font-color-yellow-100, 40);
@color-bi-yellow-20: fade(@font-color-yellow-100, 20);
@color-bi-yellow-5: fade(@font-color-yellow-100, 5);
//font color
@font-color-black: #232e40;
@font-color-normal: #3d4d66;
@ -35,15 +104,15 @@
@font-color-gray: #999999;
@font-color-white: #ffffff;
@font-color-white-theme-dark: #20263b;
@font-color-light-highlight: #eaf2fd;
@font-color-light-highlight: @color-bi-light-blue-100;
@font-color-medium-highlight: #d7e7fc;
@font-color-highlight: #3685f2;
@font-color-highlight: @color-bi-blue-100;
@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;
@font-color-success: @color-bi-green-100;
@font-color-warning: @color-bi-orange-100;
@font-color-negative: @color-bi-red-100;
@font-color-yellow: @font-color-yellow-100;
//background color
@background-color-black: #232E40;
@ -54,9 +123,9 @@
@background-color-default-theme-dark: #20263b;
@background-color-normal: #f7f8fa;
@background-color-normal-theme-dark: #191b2b;
@background-color-light-highlight: #eaf2fd;
@background-color-light-highlight: @color-bi-light-blue-100;
@background-color-medium-highlight: #d7e7fc;
@background-color-highlight: #3685f2;
@background-color-highlight: @color-bi-blue-100;
@background-color-blue: #23beef;
@background-color-light-blue: #e9f8fd;
@background-color-dark: #d4dadd;
@ -70,15 +139,15 @@
@background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2;
@background-color-light-disabled-theme-dark: #878d9f;
@background-color-yellow: #ffc101;
@background-color-yellow: @font-color-yellow-100;
@background-color-negative: #e65251;
@background-color-negative: @color-bi-red-100;
@background-color-light-negative: #ffecec;
@background-color-dark-negative: #3A2940;
@background-color-light-warning: #feeed7;
@background-color-warning: #faaa39;
@background-color-warning: @color-bi-orange-100;
@background-color-dark-success: #13cd66;
@background-color-dark-success: @color-bi-green-100;
@background-color-light-success: #e1f4e7;
@background-color-normal-success: #647185;
@ -93,11 +162,11 @@
@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-highlight: @color-bi-blue-100;
@border-color-success: #13cd66;
@border-color-success: @color-bi-green-100;
@border-color-warning: #fbb03b;
@border-color-negative: #e65251;
@border-color-negative: @color-bi-red-100;
@border-color-light-negative: #f4cbcb;
@border-color-normal-success: #647185;

Loading…
Cancel
Save