birdpaper-ui/es/common/theme.module.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

// 主色和辅助色释义:
// [primary]-主色调,[success]-成功色,[warning]-警告色,[danger]-危险色
// 每个色调对应匹配 10 个色板，一般来说，我们采用第三个色板作为常用色

// 中性色释义:
// [gary]-分为0 到 12个级别

//  主色
@primary-0: #f0f7fc;
@primary-1: #e6f4ff;
@primary-2: #bae0ff;
@primary-3: #91caff;
@primary-4: #449efb;
@primary-5: #4096ff;
@primary-6: #1677ff;
@primary-7: #0958d9;
@primary-8: #003eb3;
@primary-9: #002c8c;

// 成功色
@success-0: #edfceb;
@success-1: #e5f8db;
@success-2: #d9f7be;
@success-3: #b7eb8f;
@success-4: #95de64;
@success-5: #73d13d;
@success-6: #52c41a;
@success-7: #209124;
@success-8: #237804;
@success-9: #135200;

// 警告色
@warning-0: #fff7e6;
@warning-1: #faefd7;
@warning-2: #ffe49c;
@warning-3: #ffd591;
@warning-4: #ffc069;
@warning-5: #ffa940;
@warning-6: #fa8c16;
@warning-7: #d46b08;
@warning-8: #ad4e00;
@warning-9: #873800;

// 危险色
@danger-0: #fff1f0;
@danger-1: #ffe8e6;
@danger-2: #ffccc7;
@danger-3: #ffa39e;
@danger-4: #ff7875;
@danger-5: #ff4d4f;
@danger-6: #f5222d;
@danger-7: #cf1322;
@danger-8: #a8071a;
@danger-9: #820014;

// 中性色
@gary-1: #ffffff;
@gary-2: #fafafa;
@gary-3: #f5f5f5;
@gary-4: #f0f0f0;
@gary-5: #d9d9d9;
@gary-6: #bfbfbf;
@gary-7: #8c8c8c;
@gary-8: #595959;
@gary-9: #434343;
@gary-10: #262626;
@gary-11: #1f1f1f;
@gary-12: #141414;
@gary-13: #000000;

// 尺寸 Size
@size-mini: 22px;
@size-small: 30px;
@size-normal: 32px;
@size-large: 36px;

// 字重 Font Weight
@font-weight-100: 100;
@font-weight-200: 200;
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-700: 700;
@font-weight-800: 800;

// 圆角 Radius
@border-radius-none: 0px;
@border-radius-mini: 2px;
@border-radius-small: 4px;
@border-radius-medium: 4px;
@border-radius-large: 8px;
@border-radius-extra-large: 16px;
@border-radius-round: 20px;

// 尺寸 Sizes
@largeHeight: 36px;
@normalHeight: 32px;
@smallHeight: 28px;
@miniHeight: 22px;

:export {
  primary-0: @primary-0;
  primary-1: @primary-1;
  primary-2: @primary-2;
  primary-3: @primary-3;
  primary-4: @primary-4;
  primary-5: @primary-5;
  primary-6: @primary-6;
  primary-7: @primary-7;
  primary-8: @primary-8;
  primary-9: @primary-9;

  success-0: @success-0;
  success-1: @success-1;
  success-2: @success-2;
  success-3: @success-3;
  success-4: @success-4;
  success-5: @success-5;
  success-6: @success-6;
  success-7: @success-7;
  success-8: @success-8;
  success-9: @success-9;

  warning-0: @warning-0;
  warning-1: @warning-1;
  warning-2: @warning-2;
  warning-3: @warning-3;
  warning-4: @warning-4;
  warning-5: @warning-5;
  warning-6: @warning-6;
  warning-7: @warning-7;
  warning-8: @warning-8;
  warning-9: @warning-9;

  danger-0: @danger-0;
  danger-1: @danger-1;
  danger-2: @danger-2;
  danger-3: @danger-3;
  danger-4: @danger-4;
  danger-5: @danger-5;
  danger-6: @danger-6;
  danger-7: @danger-7;
  danger-8: @danger-8;
  danger-9: @danger-9;

  gary-1: @gary-1;
  gary-2: @gary-2;
  gary-3: @gary-3;
  gary-4: @gary-4;
  gary-5: @gary-5;
  gary-6: @gary-6;
  gary-7: @gary-7;
  gary-8: @gary-8;
  gary-9: @gary-9;
  gary-10: @gary-10;
  gary-11: @gary-11;
  gary-12: @gary-12;
}