@next-core/brick-kit 2.99.2 → 2.101.2

package/dist/index.bundle.js

@@ -1527,6 +1527,11 @@
         return {
           check: collectCoverage ? fakeCheckPermissions : checkPermissions
         };
+
+      case "THEME":
+        return {
+          getTheme: collectCoverage ? () => "light" : getTheme
+        };
     }
   }
 
@@ -1893,39 +1898,16 @@
           });
 
         case "QUERY":
-          return getDynamicReadOnlyProxy({
-            get(target, key) {
-              return query.has(key) ? query.get(key) : undefined;
-            },
-
-            ownKeys() {
-              return Array.from(query.keys());
-            }
-
-          });
+          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.get(key)]));
 
         case "QUERY_ARRAY":
-          return getDynamicReadOnlyProxy({
-            get(target, key) {
-              return query.has(key) ? query.getAll(key) : undefined;
-            },
-
-            ownKeys() {
-              return Array.from(query.keys());
-            }
-
-          });
+          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.getAll(key)]));
 
         case "SEGUE":
           return {
             getUrl: getUrlBySegueFactory(app, segues)
           };
 
-        case "THEME":
-          return {
-            getTheme
-          };
-
         case "SESSION_STORAGE":
           return {
             getItem: getItemFactory("session")
@@ -6208,6 +6190,892 @@
     return _standaloneBootstrap.apply(this, arguments);
   }
 
+  /**
+   * Take input from [0, n] and return it as [0, 1]
+   * @hidden
+   */
+  function bound01(n, max) {
+      if (isOnePointZero(n)) {
+          n = '100%';
+      }
+      var isPercent = isPercentage(n);
+      n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+      // Automatically convert percentage into number
+      if (isPercent) {
+          n = parseInt(String(n * max), 10) / 100;
+      }
+      // Handle floating point rounding errors
+      if (Math.abs(n - max) < 0.000001) {
+          return 1;
+      }
+      // Convert into [0, 1] range if it isn't already
+      if (max === 360) {
+          // If n is a hue given in degrees,
+          // wrap around out-of-range values into [0, 360] range
+          // then convert into [0, 1].
+          n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+      }
+      else {
+          // If n not a hue given in degrees
+          // Convert into [0, 1] range if it isn't already.
+          n = (n % max) / parseFloat(String(max));
+      }
+      return n;
+  }
+  /**
+   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+   * @hidden
+   */
+  function isOnePointZero(n) {
+      return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
+  }
+  /**
+   * Check to see if string passed in is a percentage
+   * @hidden
+   */
+  function isPercentage(n) {
+      return typeof n === 'string' && n.indexOf('%') !== -1;
+  }
+  /**
+   * Return a valid alpha value [0,1] with all invalid values being set to 1
+   * @hidden
+   */
+  function boundAlpha(a) {
+      a = parseFloat(a);
+      if (isNaN(a) || a < 0 || a > 1) {
+          a = 1;
+      }
+      return a;
+  }
+  /**
+   * Replace a decimal with it's percentage value
+   * @hidden
+   */
+  function convertToPercentage(n) {
+      if (n <= 1) {
+          return Number(n) * 100 + "%";
+      }
+      return n;
+  }
+  /**
+   * Force a hex value to have 2 characters
+   * @hidden
+   */
+  function pad2(c) {
+      return c.length === 1 ? '0' + c : String(c);
+  }
+
+  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
+  /**
+   * Handle bounds / percentage checking to conform to CSS color spec
+   * <http://www.w3.org/TR/css3-color/>
+   * *Assumes:* r, g, b in [0, 255] or [0, 1]
+   * *Returns:* { r, g, b } in [0, 255]
+   */
+  function rgbToRgb(r, g, b) {
+      return {
+          r: bound01(r, 255) * 255,
+          g: bound01(g, 255) * 255,
+          b: bound01(b, 255) * 255,
+      };
+  }
+  function hue2rgb(p, q, t) {
+      if (t < 0) {
+          t += 1;
+      }
+      if (t > 1) {
+          t -= 1;
+      }
+      if (t < 1 / 6) {
+          return p + (q - p) * (6 * t);
+      }
+      if (t < 1 / 2) {
+          return q;
+      }
+      if (t < 2 / 3) {
+          return p + (q - p) * (2 / 3 - t) * 6;
+      }
+      return p;
+  }
+  /**
+   * Converts an HSL color value to RGB.
+   *
+   * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+   * *Returns:* { r, g, b } in the set [0, 255]
+   */
+  function hslToRgb(h, s, l) {
+      var r;
+      var g;
+      var b;
+      h = bound01(h, 360);
+      s = bound01(s, 100);
+      l = bound01(l, 100);
+      if (s === 0) {
+          // achromatic
+          g = l;
+          b = l;
+          r = l;
+      }
+      else {
+          var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+          var p = 2 * l - q;
+          r = hue2rgb(p, q, h + 1 / 3);
+          g = hue2rgb(p, q, h);
+          b = hue2rgb(p, q, h - 1 / 3);
+      }
+      return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * Converts an RGB color value to HSV
+   *
+   * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+   * *Returns:* { h, s, v } in [0,1]
+   */
+  function rgbToHsv(r, g, b) {
+      r = bound01(r, 255);
+      g = bound01(g, 255);
+      b = bound01(b, 255);
+      var max = Math.max(r, g, b);
+      var min = Math.min(r, g, b);
+      var h = 0;
+      var v = max;
+      var d = max - min;
+      var s = max === 0 ? 0 : d / max;
+      if (max === min) {
+          h = 0; // achromatic
+      }
+      else {
+          switch (max) {
+              case r:
+                  h = (g - b) / d + (g < b ? 6 : 0);
+                  break;
+              case g:
+                  h = (b - r) / d + 2;
+                  break;
+              case b:
+                  h = (r - g) / d + 4;
+                  break;
+          }
+          h /= 6;
+      }
+      return { h: h, s: s, v: v };
+  }
+  /**
+   * Converts an HSV color value to RGB.
+   *
+   * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+   * *Returns:* { r, g, b } in the set [0, 255]
+   */
+  function hsvToRgb(h, s, v) {
+      h = bound01(h, 360) * 6;
+      s = bound01(s, 100);
+      v = bound01(v, 100);
+      var i = Math.floor(h);
+      var f = h - i;
+      var p = v * (1 - s);
+      var q = v * (1 - f * s);
+      var t = v * (1 - (1 - f) * s);
+      var mod = i % 6;
+      var r = [v, q, p, p, t, v][mod];
+      var g = [t, v, v, q, p, p][mod];
+      var b = [p, p, t, v, v, q][mod];
+      return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * Converts an RGB color to hex
+   *
+   * Assumes r, g, and b are contained in the set [0, 255]
+   * Returns a 3 or 6 character hex
+   */
+  function rgbToHex(r, g, b, allow3Char) {
+      var hex = [
+          pad2(Math.round(r).toString(16)),
+          pad2(Math.round(g).toString(16)),
+          pad2(Math.round(b).toString(16)),
+      ];
+      // Return a 3 character hex if possible
+      if (allow3Char &&
+          hex[0].startsWith(hex[0].charAt(1)) &&
+          hex[1].startsWith(hex[1].charAt(1)) &&
+          hex[2].startsWith(hex[2].charAt(1))) {
+          return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+      }
+      return hex.join('');
+  }
+  /** Converts a hex value to a decimal */
+  function convertHexToDecimal(h) {
+      return parseIntFromHex(h) / 255;
+  }
+  /** Parse a base-16 hex value into a base-10 integer */
+  function parseIntFromHex(val) {
+      return parseInt(val, 16);
+  }
+
+  // https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
+  /**
+   * @hidden
+   */
+  var names = {
+      aliceblue: '#f0f8ff',
+      antiquewhite: '#faebd7',
+      aqua: '#00ffff',
+      aquamarine: '#7fffd4',
+      azure: '#f0ffff',
+      beige: '#f5f5dc',
+      bisque: '#ffe4c4',
+      black: '#000000',
+      blanchedalmond: '#ffebcd',
+      blue: '#0000ff',
+      blueviolet: '#8a2be2',
+      brown: '#a52a2a',
+      burlywood: '#deb887',
+      cadetblue: '#5f9ea0',
+      chartreuse: '#7fff00',
+      chocolate: '#d2691e',
+      coral: '#ff7f50',
+      cornflowerblue: '#6495ed',
+      cornsilk: '#fff8dc',
+      crimson: '#dc143c',
+      cyan: '#00ffff',
+      darkblue: '#00008b',
+      darkcyan: '#008b8b',
+      darkgoldenrod: '#b8860b',
+      darkgray: '#a9a9a9',
+      darkgreen: '#006400',
+      darkgrey: '#a9a9a9',
+      darkkhaki: '#bdb76b',
+      darkmagenta: '#8b008b',
+      darkolivegreen: '#556b2f',
+      darkorange: '#ff8c00',
+      darkorchid: '#9932cc',
+      darkred: '#8b0000',
+      darksalmon: '#e9967a',
+      darkseagreen: '#8fbc8f',
+      darkslateblue: '#483d8b',
+      darkslategray: '#2f4f4f',
+      darkslategrey: '#2f4f4f',
+      darkturquoise: '#00ced1',
+      darkviolet: '#9400d3',
+      deeppink: '#ff1493',
+      deepskyblue: '#00bfff',
+      dimgray: '#696969',
+      dimgrey: '#696969',
+      dodgerblue: '#1e90ff',
+      firebrick: '#b22222',
+      floralwhite: '#fffaf0',
+      forestgreen: '#228b22',
+      fuchsia: '#ff00ff',
+      gainsboro: '#dcdcdc',
+      ghostwhite: '#f8f8ff',
+      goldenrod: '#daa520',
+      gold: '#ffd700',
+      gray: '#808080',
+      green: '#008000',
+      greenyellow: '#adff2f',
+      grey: '#808080',
+      honeydew: '#f0fff0',
+      hotpink: '#ff69b4',
+      indianred: '#cd5c5c',
+      indigo: '#4b0082',
+      ivory: '#fffff0',
+      khaki: '#f0e68c',
+      lavenderblush: '#fff0f5',
+      lavender: '#e6e6fa',
+      lawngreen: '#7cfc00',
+      lemonchiffon: '#fffacd',
+      lightblue: '#add8e6',
+      lightcoral: '#f08080',
+      lightcyan: '#e0ffff',
+      lightgoldenrodyellow: '#fafad2',
+      lightgray: '#d3d3d3',
+      lightgreen: '#90ee90',
+      lightgrey: '#d3d3d3',
+      lightpink: '#ffb6c1',
+      lightsalmon: '#ffa07a',
+      lightseagreen: '#20b2aa',
+      lightskyblue: '#87cefa',
+      lightslategray: '#778899',
+      lightslategrey: '#778899',
+      lightsteelblue: '#b0c4de',
+      lightyellow: '#ffffe0',
+      lime: '#00ff00',
+      limegreen: '#32cd32',
+      linen: '#faf0e6',
+      magenta: '#ff00ff',
+      maroon: '#800000',
+      mediumaquamarine: '#66cdaa',
+      mediumblue: '#0000cd',
+      mediumorchid: '#ba55d3',
+      mediumpurple: '#9370db',
+      mediumseagreen: '#3cb371',
+      mediumslateblue: '#7b68ee',
+      mediumspringgreen: '#00fa9a',
+      mediumturquoise: '#48d1cc',
+      mediumvioletred: '#c71585',
+      midnightblue: '#191970',
+      mintcream: '#f5fffa',
+      mistyrose: '#ffe4e1',
+      moccasin: '#ffe4b5',
+      navajowhite: '#ffdead',
+      navy: '#000080',
+      oldlace: '#fdf5e6',
+      olive: '#808000',
+      olivedrab: '#6b8e23',
+      orange: '#ffa500',
+      orangered: '#ff4500',
+      orchid: '#da70d6',
+      palegoldenrod: '#eee8aa',
+      palegreen: '#98fb98',
+      paleturquoise: '#afeeee',
+      palevioletred: '#db7093',
+      papayawhip: '#ffefd5',
+      peachpuff: '#ffdab9',
+      peru: '#cd853f',
+      pink: '#ffc0cb',
+      plum: '#dda0dd',
+      powderblue: '#b0e0e6',
+      purple: '#800080',
+      rebeccapurple: '#663399',
+      red: '#ff0000',
+      rosybrown: '#bc8f8f',
+      royalblue: '#4169e1',
+      saddlebrown: '#8b4513',
+      salmon: '#fa8072',
+      sandybrown: '#f4a460',
+      seagreen: '#2e8b57',
+      seashell: '#fff5ee',
+      sienna: '#a0522d',
+      silver: '#c0c0c0',
+      skyblue: '#87ceeb',
+      slateblue: '#6a5acd',
+      slategray: '#708090',
+      slategrey: '#708090',
+      snow: '#fffafa',
+      springgreen: '#00ff7f',
+      steelblue: '#4682b4',
+      tan: '#d2b48c',
+      teal: '#008080',
+      thistle: '#d8bfd8',
+      tomato: '#ff6347',
+      turquoise: '#40e0d0',
+      violet: '#ee82ee',
+      wheat: '#f5deb3',
+      white: '#ffffff',
+      whitesmoke: '#f5f5f5',
+      yellow: '#ffff00',
+      yellowgreen: '#9acd32',
+  };
+
+  /**
+   * Given a string or object, convert that input to RGB
+   *
+   * Possible string inputs:
+   * ```
+   * "red"
+   * "#f00" or "f00"
+   * "#ff0000" or "ff0000"
+   * "#ff000000" or "ff000000"
+   * "rgb 255 0 0" or "rgb (255, 0, 0)"
+   * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+   * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+   * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+   * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+   * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+   * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+   * ```
+   */
+  function inputToRGB(color) {
+      var rgb = { r: 0, g: 0, b: 0 };
+      var a = 1;
+      var s = null;
+      var v = null;
+      var l = null;
+      var ok = false;
+      var format = false;
+      if (typeof color === 'string') {
+          color = stringInputToObject(color);
+      }
+      if (typeof color === 'object') {
+          if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+              rgb = rgbToRgb(color.r, color.g, color.b);
+              ok = true;
+              format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
+          }
+          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+              s = convertToPercentage(color.s);
+              v = convertToPercentage(color.v);
+              rgb = hsvToRgb(color.h, s, v);
+              ok = true;
+              format = 'hsv';
+          }
+          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+              s = convertToPercentage(color.s);
+              l = convertToPercentage(color.l);
+              rgb = hslToRgb(color.h, s, l);
+              ok = true;
+              format = 'hsl';
+          }
+          if (Object.prototype.hasOwnProperty.call(color, 'a')) {
+              a = color.a;
+          }
+      }
+      a = boundAlpha(a);
+      return {
+          ok: ok,
+          format: color.format || format,
+          r: Math.min(255, Math.max(rgb.r, 0)),
+          g: Math.min(255, Math.max(rgb.g, 0)),
+          b: Math.min(255, Math.max(rgb.b, 0)),
+          a: a,
+      };
+  }
+  // <http://www.w3.org/TR/css3-values/#integers>
+  var CSS_INTEGER = '[-\\+]?\\d+%?';
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+  // Actual matching.
+  // Parentheses and commas are optional, but not required.
+  // Whitespace can take the place of commas or opening paren
+  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var matchers = {
+      CSS_UNIT: new RegExp(CSS_UNIT),
+      rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
+      rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
+      hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
+      hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
+      hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
+      hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
+      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+      hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+      hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+      hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  };
+  /**
+   * Permissive string parsing.  Take in a number of formats, and output an object
+   * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+   */
+  function stringInputToObject(color) {
+      color = color.trim().toLowerCase();
+      if (color.length === 0) {
+          return false;
+      }
+      var named = false;
+      if (names[color]) {
+          color = names[color];
+          named = true;
+      }
+      else if (color === 'transparent') {
+          return { r: 0, g: 0, b: 0, a: 0, format: 'name' };
+      }
+      // Try to match string input using regular expressions.
+      // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
+      // Just return an object and let the conversion functions handle that.
+      // This way the result will be the same whether the tinycolor is initialized with string or object.
+      var match = matchers.rgb.exec(color);
+      if (match) {
+          return { r: match[1], g: match[2], b: match[3] };
+      }
+      match = matchers.rgba.exec(color);
+      if (match) {
+          return { r: match[1], g: match[2], b: match[3], a: match[4] };
+      }
+      match = matchers.hsl.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], l: match[3] };
+      }
+      match = matchers.hsla.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], l: match[3], a: match[4] };
+      }
+      match = matchers.hsv.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], v: match[3] };
+      }
+      match = matchers.hsva.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], v: match[3], a: match[4] };
+      }
+      match = matchers.hex8.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1]),
+              g: parseIntFromHex(match[2]),
+              b: parseIntFromHex(match[3]),
+              a: convertHexToDecimal(match[4]),
+              format: named ? 'name' : 'hex8',
+          };
+      }
+      match = matchers.hex6.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1]),
+              g: parseIntFromHex(match[2]),
+              b: parseIntFromHex(match[3]),
+              format: named ? 'name' : 'hex',
+          };
+      }
+      match = matchers.hex4.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1] + match[1]),
+              g: parseIntFromHex(match[2] + match[2]),
+              b: parseIntFromHex(match[3] + match[3]),
+              a: convertHexToDecimal(match[4] + match[4]),
+              format: named ? 'name' : 'hex8',
+          };
+      }
+      match = matchers.hex3.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1] + match[1]),
+              g: parseIntFromHex(match[2] + match[2]),
+              b: parseIntFromHex(match[3] + match[3]),
+              format: named ? 'name' : 'hex',
+          };
+      }
+      return false;
+  }
+  /**
+   * Check to see if it looks like a CSS unit
+   * (see `matchers` above for definition).
+   */
+  function isValidCSSUnit(color) {
+      return Boolean(matchers.CSS_UNIT.exec(String(color)));
+  }
+
+  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 darkColorMap = [{
+    index: 7,
+    opacity: 0.15
+  }, {
+    index: 6,
+    opacity: 0.25
+  }, {
+    index: 5,
+    opacity: 0.3
+  }, {
+    index: 5,
+    opacity: 0.45
+  }, {
+    index: 5,
+    opacity: 0.65
+  }, {
+    index: 5,
+    opacity: 0.85
+  }, {
+    index: 4,
+    opacity: 0.9
+  }, {
+    index: 3,
+    opacity: 0.95
+  }, {
+    index: 2,
+    opacity: 0.97
+  }, {
+    index: 1,
+    opacity: 0.98
+  }]; // Wrapper function ported from TinyColor.prototype.toHsv
+  // Keep it here because of `hsv.h * 360`
+
+  function toHsv(_ref) {
+    var r = _ref.r,
+        g = _ref.g,
+        b = _ref.b;
+    var hsv = rgbToHsv(r, g, b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v
+    };
+  } // Wrapper function ported from TinyColor.prototype.toHexString
+  // Keep it here because of the prefix `#`
+
+
+  function toHex(_ref2) {
+    var r = _ref2.r,
+        g = _ref2.g,
+        b = _ref2.b;
+    return "#".concat(rgbToHex(r, g, b, false));
+  } // Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
+  // Amount in range [0, 1]
+  // Assume color1 & color2 has no alpha, since the following src code did so.
+
+
+  function mix(rgb1, rgb2, amount) {
+    var p = amount / 100;
+    var rgb = {
+      r: (rgb2.r - rgb1.r) * p + rgb1.r,
+      g: (rgb2.g - rgb1.g) * p + rgb1.g,
+      b: (rgb2.b - rgb1.b) * p + rgb1.b
+    };
+    return rgb;
+  }
+
+  function getHue(hsv, i, light) {
+    var hue; // 根据色相不同，色相转向不同
+
+    if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
+      hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
+    } else {
+      hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
+    }
+
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+
+    return hue;
+  }
+
+  function getSaturation(hsv, i, light) {
+    // grey color don't change saturation
+    if (hsv.h === 0 && hsv.s === 0) {
+      return hsv.s;
+    }
+
+    var saturation;
+
+    if (light) {
+      saturation = hsv.s - saturationStep * i;
+    } else if (i === darkColorCount) {
+      saturation = hsv.s + saturationStep;
+    } else {
+      saturation = hsv.s + saturationStep2 * i;
+    } // 边界值修正
+
+
+    if (saturation > 1) {
+      saturation = 1;
+    } // 第一格的 s 限制在 0.06-0.1 之间
+
+
+    if (light && i === lightColorCount && saturation > 0.1) {
+      saturation = 0.1;
+    }
+
+    if (saturation < 0.06) {
+      saturation = 0.06;
+    }
+
+    return Number(saturation.toFixed(2));
+  }
+
+  function getValue(hsv, i, light) {
+    var value;
+
+    if (light) {
+      value = hsv.v + brightnessStep1 * i;
+    } else {
+      value = hsv.v - brightnessStep2 * i;
+    }
+
+    if (value > 1) {
+      value = 1;
+    }
+
+    return Number(value.toFixed(2));
+  }
+
+  function generate(color) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var patterns = [];
+    var pColor = inputToRGB(color);
+
+    for (var i = lightColorCount; i > 0; i -= 1) {
+      var hsv = toHsv(pColor);
+      var colorString = toHex(inputToRGB({
+        h: getHue(hsv, i, true),
+        s: getSaturation(hsv, i, true),
+        v: getValue(hsv, i, true)
+      }));
+      patterns.push(colorString);
+    }
+
+    patterns.push(toHex(pColor));
+
+    for (var _i = 1; _i <= darkColorCount; _i += 1) {
+      var _hsv = toHsv(pColor);
+
+      var _colorString = toHex(inputToRGB({
+        h: getHue(_hsv, _i),
+        s: getSaturation(_hsv, _i),
+        v: getValue(_hsv, _i)
+      }));
+
+      patterns.push(_colorString);
+    } // dark theme patterns
+
+
+    if (opts.theme === 'dark') {
+      return darkColorMap.map(function (_ref3) {
+        var index = _ref3.index,
+            opacity = _ref3.opacity;
+        var darkColorString = toHex(mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100));
+        return darkColorString;
+      });
+    }
+
+    return patterns;
+  }
+
+  var presetPrimaryColors = {
+    red: '#F5222D',
+    volcano: '#FA541C',
+    orange: '#FA8C16',
+    gold: '#FAAD14',
+    yellow: '#FADB14',
+    lime: '#A0D911',
+    green: '#52C41A',
+    cyan: '#13C2C2',
+    blue: '#1890FF',
+    geekblue: '#2F54EB',
+    purple: '#722ED1',
+    magenta: '#EB2F96',
+    grey: '#666666'
+  };
+  var presetPalettes = {};
+  var presetDarkPalettes = {};
+  Object.keys(presetPrimaryColors).forEach(function (key) {
+    presetPalettes[key] = generate(presetPrimaryColors[key]);
+    presetPalettes[key].primary = presetPalettes[key][5]; // dark presetPalettes
+
+    presetDarkPalettes[key] = generate(presetPrimaryColors[key], {
+      theme: 'dark',
+      backgroundColor: '#141414'
+    });
+    presetDarkPalettes[key].primary = presetDarkPalettes[key][5];
+  });
+  presetPalettes.red;
+  presetPalettes.volcano;
+  presetPalettes.gold;
+  presetPalettes.orange;
+  presetPalettes.yellow;
+  presetPalettes.lime;
+  presetPalettes.green;
+  presetPalettes.cyan;
+  presetPalettes.blue;
+  presetPalettes.geekblue;
+  presetPalettes.purple;
+  presetPalettes.magenta;
+  presetPalettes.grey;
+
+  function getStyleByBaseColors(theme, baseColors, backgroundColor) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByPalettes(generatePalettes(baseColors, theme, backgroundColor)));
+  }
+  function getStyleByBrandColor(theme, brandColor) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByBrand(brandColor));
+  }
+  function getStyleByVariables(theme, variables) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByVariables(variables));
+  }
+
+  function getLightStyle(cssVariableDefinitions) {
+    return ":root,\n[data-override-theme=\"light\"] {\n".concat(cssVariableDefinitions, "}");
+  }
+
+  function getDarkStyle(cssVariableDefinitions) {
+    return "html[data-theme=\"dark-v2\"],\n[data-override-theme=\"dark-v2\"] {\n".concat(cssVariableDefinitions, "}");
+  }
+
+  function getCssVariableDefinitionsByPalettes(palettes) {
+    return Object.entries(palettes).flatMap(_ref => {
+      var [colorName, palette] = _ref;
+      ensureBaseColorName(colorName);
+      return palette.map((color, index) => "  --palette-".concat(colorName, "-").concat(index + 1, ": ").concat(color, ";")) // Concat an empty string to make a double-line-break for each group of color name.
+      .concat("");
+    }).join("\n");
+  }
+
+  function generatePalettes(baseColors, theme, backgroundColor) {
+    return Object.fromEntries(Object.entries(baseColors).map(_ref2 => {
+      var [colorName, baseColor] = _ref2;
+      return [colorName, generate(baseColor, theme === "dark" ? {
+        theme,
+        backgroundColor
+      } : undefined)];
+    }));
+  }
+
+  function getCssVariableDefinitionsByBrand(color) {
+    if (typeof color === "string") {
+      return "  --color-brand: ".concat(color, ";\n");
+    }
+
+    return ["  --color-brand: ".concat(color.default, ";"), "  --color-brand-hover: ".concat(color.hover, ";"), "  --color-brand-active: ".concat(color.active, ";"), ""].join("\n");
+  }
+
+  function getCssVariableDefinitionsByVariables(variables) {
+    return Object.entries(variables).map(_ref3 => {
+      var [name, color] = _ref3;
+      ensureCssVariableName(name);
+      return "  ".concat(name, ": ").concat(color, ";");
+    }).concat("").join("\n");
+  }
+
+  function ensureCssVariableName(name) {
+    if (!/^--[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(name)) {
+      throw new Error("Invalid css variable name: ".concat(JSON.stringify(name)));
+    }
+  }
+
+  function ensureBaseColorName(name) {
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) {
+      throw new Error("Invalid base color name: ".concat(JSON.stringify(name)));
+    }
+  }
+
+  function applyColorTheme(options) {
+    var style = [];
+    var themes = ["light", "dark"];
+    themes.forEach(theme => {
+      if (options[theme]) {
+        switch (options.type) {
+          case "brandColor":
+            style.push(getStyleByBrandColor(theme, options[theme]));
+            break;
+
+          case "baseColors":
+            style.push(getStyleByBaseColors(theme, options[theme], options.backgroundColor));
+            break;
+
+          case "variables":
+            style.push(getStyleByVariables(theme, options[theme]));
+            break;
+        }
+      }
+    });
+
+    if (style.length > 0) {
+      var element = document.createElement("style");
+      element.textContent = style.join("\n\n");
+      document.head.appendChild(element);
+      return () => {
+        element.remove();
+      };
+    }
+  }
+
   class Kernel {
     constructor() {
       _defineProperty__default["default"](this, "mountPoints", void 0);
@@ -6257,6 +7125,8 @@
       var _this = this;
 
       return _asyncToGenerator__default["default"](function* () {
+        var _this$bootstrapData$s, _this$bootstrapData$s2;
+
         _this.mountPoints = mountPoints;
         yield Promise.all([_this.loadCheckLogin(), _this.loadMicroApps()]);
 
@@ -6264,6 +7134,8 @@
           throw new Error("No storyboard were found.");
         }
 
+        generateColorTheme((_this$bootstrapData$s = _this.bootstrapData.settings) === null || _this$bootstrapData$s === void 0 ? void 0 : (_this$bootstrapData$s2 = _this$bootstrapData$s.misc) === null || _this$bootstrapData$s2 === void 0 ? void 0 : _this$bootstrapData$s2.theme);
+
         if (isLoggedIn()) {
           _this.loadSharedData();
         }
@@ -6818,9 +7690,9 @@
     }
 
     getFeatureFlags() {
-      var _this$bootstrapData, _this$bootstrapData$s;
+      var _this$bootstrapData, _this$bootstrapData$s3;
 
-      return Object.assign({}, (_this$bootstrapData = this.bootstrapData) === null || _this$bootstrapData === void 0 ? void 0 : (_this$bootstrapData$s = _this$bootstrapData.settings) === null || _this$bootstrapData$s === void 0 ? void 0 : _this$bootstrapData$s.featureFlags);
+      return Object.assign({}, (_this$bootstrapData = this.bootstrapData) === null || _this$bootstrapData === void 0 ? void 0 : (_this$bootstrapData$s3 = _this$bootstrapData.settings) === null || _this$bootstrapData$s3 === void 0 ? void 0 : _this$bootstrapData$s3.featureFlags);
     }
 
     getStandaloneMenus(menuId) {
@@ -6889,6 +7761,24 @@
     return brickUtils.loadScript(src, window.PUBLIC_ROOT);
   }
 
+  function generateColorTheme(theme) {
+    if (!theme) {
+      return;
+    } else if (theme.brandColor) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "brandColor"
+      }, theme.brandColor));
+    } else if (theme.baseColors) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "baseColors"
+      }, theme.baseColors));
+    } else if (theme.variables) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "variables"
+      }, theme.variables));
+    }
+  }
+
   /*! (c) Andrea Giammarchi - ISC */
   var self = {};
 
@@ -9203,15 +10093,25 @@
 
     if (useMocks) mocks = _objectSpread__default["default"](_objectSpread__default["default"]({}, useMocks), {}, {
       mockList: (_useMocks$mockList = useMocks.mockList) === null || _useMocks$mockList === void 0 ? void 0 : _useMocks$mockList.map(item => _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
-        uri: item.uri.replace(/(easyops\.api\.)(.+)(@\d+\.\d+\.\d+(?=\/))(.+)/, (_match, p1, p2, _p3, p4) => {
-          return "(".concat(p1, ")?").concat(p2, "(@\\d+\\.\\d+\\.\\d+)?").concat(p4, "$");
-        }).replace(/:\w+/g, "[\\w|-]+")
+        uri: item.uri.replace(/(easyops\.api\.)(.+?)\/(.+)/, (_match, p1, p2, p3) => {
+          return "(".concat(p1, ")?").concat(p2, "(@\\d+\\.\\d+\\.\\d+)?/").concat(p3, "$");
+        }).replace(/:\w+/g, "([^/]+)")
       }))
     });
   }
-  var getMockId = requestUrl => {
-    if (mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl))) return mocks.mockId;
-    return undefined;
+  var getMockInfo = requestUrl => {
+    var item = mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl));
+
+    if (item) {
+      return {
+        url: requestUrl.replace(/(api\/gateway\/.+?)(@\d+\.\d+\.\d+)?\/(.+)/, (_match, p1, _p2, p3) => {
+          return "".concat(p1, "/").concat(p3);
+        }).replace(/(api\/gateway)/, "api/gateway/mock_server.proxy.".concat(mocks.mockId)),
+        mockId: mocks.mockId
+      };
+    }
+
+    return;
   };
 
   class Router {
@@ -9379,7 +10279,7 @@
       var _this3 = this;
 
       return _asyncToGenerator__default["default"](function* () {
-        var _apiAnalyzer$getInsta;
+        var _apiAnalyzer$getInsta, _currentApp$theme;
 
         _this3.state = "initial";
         _this3.renderId = lodash.uniqueId("render-id-");
@@ -9430,6 +10330,8 @@
         var legacy = currentApp ? currentApp.legacy : undefined;
         _this3.kernel.nextApp = currentApp;
         var layoutType = (currentApp === null || currentApp === void 0 ? void 0 : currentApp.layoutType) || "console";
+        setTheme((_currentApp$theme = currentApp === null || currentApp === void 0 ? void 0 : currentApp.theme) !== null && _currentApp$theme !== void 0 ? _currentApp$theme : "light");
+        setMode("default");
         devtoolsHookEmit("rendering");
         unmountTree(mountPoints.bg);
 
@@ -9440,7 +10342,7 @@
         };
 
         if (storyboard) {
-          var _currentApp$breadcrum, _currentApp$breadcrum2, _currentApp$theme;
+          var _currentApp$breadcrum, _currentApp$breadcrum2;
 
           if (appChanged && currentApp.id && isLoggedIn()) {
             var usedCustomApis = brickUtils.mapCustomApisToNameAndNamespace(brickUtils.scanCustomApisInStoryboard(storyboard));
@@ -9537,10 +10439,8 @@
           _this3.kernel.unsetBars({
             appChanged,
             legacy: actualLegacy
-          });
+          }); // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
 
-          setTheme((_currentApp$theme = currentApp.theme) !== null && _currentApp$theme !== void 0 ? _currentApp$theme : "light");
-          setMode("default"); // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
 
           _this3.locationContext.handleBeforePageLoad();
 
@@ -11713,7 +12613,7 @@
   exports.event = event;
   exports.getAuth = getAuth;
   exports.getHistory = getHistory;
-  exports.getMockId = getMockId;
+  exports.getMockInfo = getMockInfo;
   exports.getRuntime = getRuntime;
   exports.handleHttpError = handleHttpError;
   exports.httpErrorToString = httpErrorToString;