@chaoswise/business 0.0.1

package/config/theme/default.less

@@ -0,0 +1,144 @@
+@import '~antd/lib/style/themes/default.less';
+// @import '/Users/howard/products/aops_web_commons/node_modules/antd/lib/style/themes/default.less';
+@import './common.less';
+
+
+// 通用
+@text-color: rgba(0, 0, 0, 0.85); // 主文本色
+@text-color-show: rgba(0, 0, 0, 0.65); // 主文本色 鉴于主和次文本之间
+@disabled-bg: rgba(0, 0, 0, 0.04); // 禁用背景颜色符合UI规范
+@border-color-base: rgba(0, 0, 0, 0.15); // 基础边框与禁用边框色统一符合UI规范
+@sider-background: rgba(0, 0, 0, 0.02); // 左侧导航背景色符合UI规范
+@border-color-split : rgba(0, 0, 0, 0.06); // 边框分割线
+@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+// 基础布局
+@layout-body-background: #F4F5FA; // 大背景色 ui 规范
+@layout-header-color: white; // 头部字体色
+@layout-header-background: #1E324E; // 头部背景色
+@layout-header-division-color:rgba(255, 255, 255, 0.3); // 头部分割线颜色，161新增
+@sider-collopse-btn-bg: #000; // 左右布局收起按钮背景色
+@sider-collopse-btn-opacity: 0.06; // 左右布局收起按钮背景色
+@top-nav-menu-bg: #FAFBFE;
+// 按钮
+@btn-warn-new: @red-6;
+@btn-warn-hover-new: @red-5;
+@btn-warn-focus-new: @red-7;
+@btn-disabled-primary-color: @primary-1; // #97CDFF; // 主要按钮禁用背景色
+@btn-disabled-group-primary-color: rgba(255, 255, 255, 0.45); // 主要按钮中组合按钮禁用状态下分割线色
+
+// Tag
+@tag-default-bg: rgba(0, 0, 0, 0.02);
+@tag-border-color: rgba(0, 0, 0, 0.09);
+@tag-custom-bg: @rate-star-bg;
+
+// 菜单
+@menu-dark-bg: #fff; // 菜单背景色
+@menu-dark-submenu-bg: @menu-dark-bg; // 调整与整体菜单背景色一致
+@menu-dark-color: @text-color; // 菜单文字颜色
+@menu-dark-highlight-color: @primary-color; // 菜单高亮字体颜色
+@menu-dark-item-active-bg: #F6F7F8; // 菜单的高亮背景色
+@menu-dark-arrow-color: #000; // 菜单项下拉箭头颜色
+@menu-dark-item-hover-bg: #F6F7F8; // 菜单项悬停背景色
+@menu-dark-item-hover-color: @text-color; // 菜单hover色
+@menu-dark-selected-item-icon-color: @primary-color; // 菜单项选中icon颜色
+@menu-collapsed-btn-bg: @menu-dark-item-active-bg; // 菜单底部控制区收缩按钮背景色
+@menu-collapsed-btn-color: @text-color-secondary; // 菜单底部控制区收缩按钮icon颜色
+@menu-collapsed-btn-hover-color: @primary-5; // 菜单底部控制区收缩按钮悬停颜色
+@menu-setting-btn-color: @text-color-secondary; // 菜单底部控制区设置icon颜色
+@menu-setting-btn-hover-color: @primary-5; // 菜单底部控制区设置icon悬停色
+@menu-version-color: @text-color-show; // 菜单底部控制区版本信息颜色
+@menu-version-hover-color: @primary-5; // 菜单底部控制区版本信息悬停颜色
+@menu-item-group-border-bottom-color: #F6F7F8;  // 菜单收缩状态一级标题下边框颜色(非只有根元素)
+@menu-wrapper-border-right-color: @tag-border-color; // 菜单外壳右边框颜色
+// 提示框
+@tooltip-color: @text-color;
+@tooltip-bg: #fff;
+
+// Modal
+@modal-footer-border-color-split: @border-color-split; //  边框色
+
+
+// input
+@input-placeholder-color: @text-color-secondary;
+@input-addon-bg: @component-background;
+// @input-addon-bg:@component-background;
+@caret-color: @text-color-show; // 光标颜色
+// Form
+@label-color: @text-color-show; // form label字体颜色
+
+// Switch
+@switch-disabled-opacity: 0.35; // 开关禁用透明度
+@switch-disabled-bg: rgba(0, 0, 0, 0.15);
+@switch-unchekcked-hover-bg: rgba(0, 0, 0, 0.2);
+// 徽标数
+@badge-highlight-color: #FF4D4F;
+
+// 表格
+@table-header-color: rgba(0, 0, 0, .65);
+@table-row-hover-bg: rgba(0, 0, 0, 0.02); // 列表行hover色
+@table-selected-row-bg: @component-background; // 选中背景色：复选框背景样式调整
+@table-header-sort-bg :@table-header-bg; // 表头排序背景色
+// Popover
+@popover-min-width: 180px;
+
+
+// Radio
+@radio-button-color: @text-color-show; // 默认的Radio.Button颜色
+@radio-background-color: @component-background; // 容器背景色
+@radio-border-default: @border-color-base; // 边框默认颜色即未选中的颜色
+@radio-border-disabled-unselected: @tag-border-color; // 容器禁用且未选中边框颜色
+@radio-title-color: @text-color-show; // 内容标题颜色
+@radio-describe-color: @text-color-secondary; // 内容描述区颜色
+@radio-dot-disabled-bg: fade(@black, 20%); // Radio禁用圆点背景色
+@radio-disabled-checked-bg: #e6e6e6; // Radio.Button禁用且选中背景色
+// Checkbox
+@checkbox-check-color: @component-background;
+@checkbox-color-bg: @checkbox-color;
+@checkbox-color-border: @checkbox-color;
+@checkbox-check_-color:@checkbox-check-color; // 选中且非禁用状态下的边框色
+// Slider
+@slider-wrapper-rail-bgcolor: rgba(24, 144, 255, 0.15); // 默认的容器整条轨道颜色
+@silder-wrapper-circle-border: @border-width-base @border-style-base @component-background; // 滑块边框颜色
+@slider-wrapper-disabled-rail-color: rgba(0, 0, 0, 0.06); // 禁用状态下轨道颜色修正
+@slider-wrapper-disabled-handle-color: @normal-color; // 禁用状态下触发颜色修正
+
+// breadcrumb
+// @breadcrumb-separator-margin: 0 10px;
+
+
+// collapse
+// @collapse-header-bg:rgba(0,0,0,0.02); // 默认背景
+@collapse-header-hover-bg: @primary-1; // 头部hover背景色
+
+// Steps
+@process-tail-color: rgba(0, 0, 0, 0.15); // ui规范
+@finish-tail-color: rgba(0, 0, 0, 0.15); // 新规范
+
+// CWSelect
+@select-selected-enable-bg: @primary-1;
+@select-selected-enable-color: @primary-color;
+@select-item-selected-font-weight: 500;
+// 滚动条
+@scroll-bar-background-color: auto;
+@scroll-bar-thumb-background-color: auto;
+
+// Skeleton
+@skeleton-color: rgba(190, 190, 190, 0.2);
+
+//
+@sider-bottom-bg: @menu-dark-bg; // 侧边栏底部版本区域背景色，161新增
+@advanced-filter-color: @primary-color; // 高级筛选字体色，161新增
+@advanced-filter-expand-bg: @sider-background; // 高级搜索展开区域背景色
+@advanced-filter-expand-icon-bg: #F2F3F5; // 高级搜索展开区域展开icon背景色
+
+// tab
+@tabs-border-color: @tag-border-color; // tab卡片默认边框色
+@tabs-disabled-border-color: @border-color-base; // tab卡片禁用边框色
+@tabs-card-head-background: @tag-default-bg; // tab卡片默认头部背景色
+
+// 配合portal定制主题 -- develop分支需要
+@portal-header-search-border-color: #d8d8d8;
+@portal-header-search-bg: #173066;
+@portal-header-logo:#fff;
+
+@form-back-font: #FFFFFF;

package/config/theme/style/color/bezierEasing.less

@@ -0,0 +1,110 @@
+/* stylelint-disable */
+.bezierEasingMixin() {
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+  // less 3 requires a return
+  return '';
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.bezierEasingMixin();

package/config/theme/style/color/colorPalette.less

@@ -0,0 +1,85 @@
+/* stylelint-disable no-duplicate-selectors */
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+.colorPaletteMixin() {
+@functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 0.16;
+  var saturationStep2 = 0.05;
+  var brightnessStep1 = 0.05;
+  var brightnessStep2 = 0.15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    // grey color don't change saturation
+    if (hsv.h === 0 && hsv.s === 0) {
+      return hsv.s;
+    }
+    var saturation;
+    if (isLight) {
+      saturation = hsv.s - saturationStep * i;
+    } else if (i === darkColorCount) {
+      saturation = hsv.s + saturationStep;
+    } else {
+      saturation = hsv.s + saturationStep2 * i;
+    }
+    if (saturation > 1) {
+      saturation = 1;
+    }
+    if (isLight && i === lightColorCount && saturation > 0.1) {
+      saturation = 0.1;
+    }
+    if (saturation < 0.06) {
+      saturation = 0.06;
+    }
+    return Number(saturation.toFixed(2));
+  };
+  var getValue = function(hsv, i, isLight) {
+    var value;
+    if (isLight) {
+      value = hsv.v + brightnessStep1 * i;
+    }else{
+      value = hsv.v - brightnessStep2 * i
+    }
+    if (value > 1) {
+      value = 1;
+    }
+    return Number(value.toFixed(2))
+  };
+
+  this.colorPalette = function(color, index) {
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.colorPaletteMixin();

package/config/theme/style/color/colors.less

@@ -0,0 +1,162 @@
+@import 'colorPalette';
+
+// color palettes
+@blue-base: #1890ff;
+@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
+@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
+@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
+@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
+@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
+@blue-6: @blue-base;
+@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
+@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
+@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
+@blue-10: color(~`colorPalette('@{blue-6}', 10) `);
+
+@purple-base: #722ed1;
+@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
+@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
+@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
+@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
+@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
+@purple-6: @purple-base;
+@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
+@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
+@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
+@purple-10: color(~`colorPalette('@{purple-6}', 10) `);
+
+@cyan-base: #13c2c2;
+@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
+@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
+@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
+@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
+@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
+@cyan-6: @cyan-base;
+@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
+@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
+@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
+@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
+
+@green-base: #52c41a;
+@green-1: color(~`colorPalette('@{green-6}', 1) `);
+@green-2: color(~`colorPalette('@{green-6}', 2) `);
+@green-3: color(~`colorPalette('@{green-6}', 3) `);
+@green-4: color(~`colorPalette('@{green-6}', 4) `);
+@green-5: color(~`colorPalette('@{green-6}', 5) `);
+@green-6: @green-base;
+@green-7: color(~`colorPalette('@{green-6}', 7) `);
+@green-8: color(~`colorPalette('@{green-6}', 8) `);
+@green-9: color(~`colorPalette('@{green-6}', 9) `);
+@green-10: color(~`colorPalette('@{green-6}', 10) `);
+
+@magenta-base: #eb2f96;
+@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
+@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
+@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
+@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
+@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
+@magenta-6: @magenta-base;
+@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
+@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
+@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
+@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);
+
+// alias of magenta
+@pink-base: #eb2f96;
+@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
+@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
+@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
+@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
+@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
+@pink-6: @pink-base;
+@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
+@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
+@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
+@pink-10: color(~`colorPalette('@{pink-6}', 10) `);
+
+@red-base: #f5222d;
+@red-1: color(~`colorPalette('@{red-6}', 1) `);
+@red-2: color(~`colorPalette('@{red-6}', 2) `);
+@red-3: color(~`colorPalette('@{red-6}', 3) `);
+@red-4: color(~`colorPalette('@{red-6}', 4) `);
+@red-5: color(~`colorPalette('@{red-6}', 5) `);
+@red-6: @red-base;
+@red-7: color(~`colorPalette('@{red-6}', 7) `);
+@red-8: color(~`colorPalette('@{red-6}', 8) `);
+@red-9: color(~`colorPalette('@{red-6}', 9) `);
+@red-10: color(~`colorPalette('@{red-6}', 10) `);
+
+@orange-base: #fa8c16;
+@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
+@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
+@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
+@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
+@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
+@orange-6: @orange-base;
+@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
+@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
+@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
+@orange-10: color(~`colorPalette('@{orange-6}', 10) `);
+
+@yellow-base: #fadb14;
+@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
+@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
+@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
+@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
+@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
+@yellow-6: @yellow-base;
+@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
+@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
+@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
+@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);
+
+@volcano-base: #fa541c;
+@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
+@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
+@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
+@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
+@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
+@volcano-6: @volcano-base;
+@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
+@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
+@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
+@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);
+
+@geekblue-base: #2f54eb;
+@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
+@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
+@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
+@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
+@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
+@geekblue-6: @geekblue-base;
+@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
+@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
+@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
+@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);
+
+@lime-base: #a0d911;
+@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
+@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
+@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
+@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
+@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
+@lime-6: @lime-base;
+@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
+@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
+@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
+@lime-10: color(~`colorPalette('@{lime-6}', 10) `);
+
+@gold-base: #faad14;
+@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
+@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
+@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
+@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
+@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
+@gold-6: @gold-base;
+@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
+@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
+@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
+@gold-10: color(~`colorPalette('@{gold-6}', 10) `);
+
+@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
+  purple;