agora-ui-foundation 1.0.0

package/lib/theme/fcr-ui-config.js

@@ -0,0 +1,373 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrUIRadius = exports.FcrUILightColors = exports.FcrUIDarkColors = exports.FcrUIConfig = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var FcrUIConfig = exports.FcrUIConfig = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIConfig() {
+  (0, _classCallCheck2["default"])(this, FcrUIConfig);
+  (0, _defineProperty2["default"])(this, "colors", new FcrUIColors());
+  (0, _defineProperty2["default"])(this, "radius", new FcrUIRadius());
+  (0, _defineProperty2["default"])(this, "font", new FcrUIFont());
+});
+var FcrUIColors = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIColors() {
+  (0, _classCallCheck2["default"])(this, FcrUIColors);
+  (0, _defineProperty2["default"])(this, "light", new FcrUILightColors());
+  (0, _defineProperty2["default"])(this, "dark", new FcrUIDarkColors());
+});
+var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2["default"])(function FcrUILightColors() {
+  (0, _classCallCheck2["default"])(this, FcrUILightColors);
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill1", '#f2f2faff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill2", '#f6f6fcff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneGuide", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation1", '#ffffff80');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation2", '#ffffff80');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill1", '#f5f6faf7');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock2", '#f1f3f8ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneToast1", '#2f2f2fcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext1", '#373c42ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext2", '#787676cc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext3", '#bbbbbbff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInverse", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine1", '#e3e7efff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine2", '#d8d8d880');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput", '#f9f9fcff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#4262FF12');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand1", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand2", '#4262ff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand3", '#4262ff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand4", '#4262ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand5", '#4262ffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand6", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand7", '#354eccff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand8", '#283b99ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand9", '#1a2766ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand10", '#0d1433ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple1", '#7c79ff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple2", '#7c79ff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple3", '#7c79ff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple4", '#7c79ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple5", '#7c79ffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple6", '#7c79ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple8", '#4a4999ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple9", '#323066ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple10", '#191833ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed6", '#f5655cff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple7", '#6361ccff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite10", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite95", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite8", '#ffffffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite7", '#ffffffb2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite6", '#ffffff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite5", '#ffffff80');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite4", '#ffffff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite3", '#ffffff4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite2", '#ffffff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite1", '#ffffff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack10", '#373c42ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack95", '#000000f2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack8", '#000000cc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardBlue1", '#e4e6ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardPurple1", '#5765ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardGray", '#f0f0f7ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack7", '#000000b2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack6", '#00000099');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack5", '#00000080');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack4", '#00000066');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack3", '#0000004d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack2", '#00000033');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack1", '#0000001a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen6", '#16d1a4ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardGreen1", '#ebf6faff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn2", '#f6f6f6ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampLightgreen6", '#64bb5cff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneVideo", '#e7e7f2ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneNavigation", '#fcfcfcff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneNavigation2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "forChatFillTip1", '#ffffffe5');
+  (0, _defineProperty2["default"])(this, "fcrChatBg", '#eef2faff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext4", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "forHead1", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "forHead12", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "forHead2", '#0081a7ff');
+  (0, _defineProperty2["default"])(this, "fcrPink6", '#ee4878ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow6", '#ffb800ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext5", '#444b71ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow4", '#ffb80099');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext6", '#3b457480');
+  (0, _defineProperty2["default"])(this, "forHead22", '#0081a726');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext7", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "forHead3", '#6fcfa2ff');
+  (0, _defineProperty2["default"])(this, "forHead32", '#6fcfa24d');
+  (0, _defineProperty2["default"])(this, "forHead4", '#758bfdff');
+  (0, _defineProperty2["default"])(this, "forHead42", '#758bfd26');
+  (0, _defineProperty2["default"])(this, "forHead5", '#fc4c14ff');
+  (0, _defineProperty2["default"])(this, "forHead52", '#fc4c1426');
+  (0, _defineProperty2["default"])(this, "forHead6", '#70a9a1ff');
+  (0, _defineProperty2["default"])(this, "forHead62", '#70a9a126');
+  (0, _defineProperty2["default"])(this, "forHead7", '#9a9670ff');
+  (0, _defineProperty2["default"])(this, "forHead72", '#9a967026');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill1", '#f2f2faff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill2", '#ffffffd9');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill3", '#f7f7fae5');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill4Popup", '#f4f5f5ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill5", '#e5eaf3e5');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteground", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1", '#484957e5');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon2", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRamp2yellow6", '#ffc700ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInverse2", '#1e1e1ef2');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover2", '#c9cfe040');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteboard", '#f9f9fbff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlackSpecial", '#ffffffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneViewToast", '#ffffff8c');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed5", '#f5655ce5');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneVideoS", '#edf9ffcc');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill3", '#e9e9e9ff');
+  (0, _defineProperty2["default"])(this, "fcrChatBg2", '#c6d6ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteboard2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill4", '#f8f9fdff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneTitlebackground", '#d9dff7ff');
+  (0, _defineProperty2["default"])(this, "fcrPadFill1", '#242527ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed4", '#f5655cb2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock4", '#ffffffd9');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow3", '#ffb80080');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneGolden", '#b36100ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn3", '#b4b8c8cc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn4", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine3", '#e3e7efff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCheckbox", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneChoose", '#ebeeffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneMobileClick", '#0000000d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneChatBg2", '#d4e2fcff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneChatBg3", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover3", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrChatBg3", '#c6d6ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneMask", '#90909099');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill3", '#f5f6fafc');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock3", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1Block", '#3c3d40ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed3", '#f5655c80');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed7", '#e55e56ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#00000003');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock5", '#f1f3f866');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed2", '#f5655c4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed1", '#f5655c1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed8", '#933d37ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneClick", '#4262ff33');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneLine1Hover", '#4262fffc');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon3Red", '#f55c52ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneLine4", '#5b5b5bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow7", '#e6a600ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampLightgreen7", '#5aa853ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow2", '#ffb8004d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow1", '#ffb8001a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext8", '#444b71cc');
+  (0, _defineProperty2["default"])(this, "fcrNoticeBg", '#57678bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen4", '#16d1a4b2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen2", '#16d1a44d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen1", '#16d1a41a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange6", '#ff8c38ff');
+  (0, _defineProperty2["default"])(this, "fcrOrange6", '#ff8c38ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange7", '#e86e16ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen7", '#07b78dff');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropup", '0px 0px 15px 0px rgba(151, 151, 151, 0.25)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupM", '0px 0px 15px 0px rgba(143, 143, 143, 0.15)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupS", '0px 0px 4px 0px rgba(0, 0, 0, 0.25)');
+});
+var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIDarkColors() {
+  (0, _classCallCheck2["default"])(this, FcrUIDarkColors);
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill1", '#26282cff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill2", '#3b3e48ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneGuide", '#26282cf2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation1", '#26282c80');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation2", '#32354580');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill1", '#1f2327f7');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill2", '#3c3c3cff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#292e33f2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock2", '#353638f2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneToast1", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext1", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext2", '#ffffffb2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext3", '#bbbbbbff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInverse", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine1", '#4a4c5f80');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine2", '#40404033');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput", '#3d404bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#C9CFE04D');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand1", '#4262ff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand2", '#4262ff4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand3", '#4262ff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand4", '#4262ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand5", '#4262ffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand6", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand7", '#354eccff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand8", '#283b99ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand9", '#1a2766ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand10", '#0d1433ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple1", '#7c79ff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple2", '#7c79ff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple3", '#7c79ff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple4", '#7c79ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple5", '#7c79ffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple6", '#7c79ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple8", '#4a4999ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple9", '#323066ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple10", '#191833ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed6", '#fb584eff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple7", '#6361ccff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite10", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite95", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite8", '#ffffffcc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite7", '#ffffffb2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite6", '#ffffff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite5", '#ffffff80');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite4", '#ffffff66');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite3", '#ffffff4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite2", '#ffffff33');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhite1", '#ffffff1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack10", '#121416ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack95", '#000000f2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack8", '#000000cc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardBlue1", '#e4e6ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardPurple1", '#5765ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardGray", '#f0f0f7ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack7", '#000000b2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack6", '#00000099');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack5", '#00000080');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack4", '#00000066');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack3", '#0000004d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack2", '#5b599833');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack1", '#0000001a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen6", '#67d569ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCardGreen1", '#ebf6faff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn2", '#555b69ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampLightgreen6", '#64bb5cff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneVideo", '#43434eff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneNavigation", '#323545ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneNavigation2", '#26282cff');
+  (0, _defineProperty2["default"])(this, "forChatFillTip1", '#3b3e4880');
+  (0, _defineProperty2["default"])(this, "fcrChatBg", '#43434eff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext4", '#000000ff');
+  (0, _defineProperty2["default"])(this, "forHead1", '#3aacffff');
+  (0, _defineProperty2["default"])(this, "forHead12", '#4262ff33');
+  (0, _defineProperty2["default"])(this, "forHead2", '#03a7d7ff');
+  (0, _defineProperty2["default"])(this, "fcrPink6", '#ee4878ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow6", '#ffd952ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext5", '#ffffffe5');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow4", '#ffd95299');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext6", '#ffffffe5');
+  (0, _defineProperty2["default"])(this, "forHead22", '#03a7d733');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext7", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "forHead3", '#6fcfa2ff');
+  (0, _defineProperty2["default"])(this, "forHead32", '#6fcfa233');
+  (0, _defineProperty2["default"])(this, "forHead4", '#758bfdff');
+  (0, _defineProperty2["default"])(this, "forHead42", '#758bfd33');
+  (0, _defineProperty2["default"])(this, "forHead5", '#fc4c14ff');
+  (0, _defineProperty2["default"])(this, "forHead52", '#fc4c1433');
+  (0, _defineProperty2["default"])(this, "forHead6", '#70a9a1ff');
+  (0, _defineProperty2["default"])(this, "forHead62", '#70a9a133');
+  (0, _defineProperty2["default"])(this, "forHead7", '#aca885ff');
+  (0, _defineProperty2["default"])(this, "forHead72", '#aca88533');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill1", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill2", '#404043d9');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill3", '#2c2727cc');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill4Popup", '#43434eff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill5", '#4c5462ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteground", '#232529ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover", '#6666664d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRamp2yellow6", '#ffc700ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInverse2", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover2", '#c9cfe04d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteboard", '#232529ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlackSpecial", '#4c5462cc');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneViewToast", '#3b3e4880');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed5", '#fb584ee5');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneVideoS", '#535364cc');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill3", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrChatBg2", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput2", '#3d404bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteboard2", '#232529ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneFill4", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneTitlebackground", '#37394fff');
+  (0, _defineProperty2["default"])(this, "fcrPadFill1", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed4", '#fb584eb2');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock4", '#2f2f2fa6');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow3", '#ffeeb380');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneGolden", '#5d3301ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn3", '#555b69ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBtn4", '#575d6dff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneLine3", '#6a6a6cff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCheckbox", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneChoose", '#3a4372ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneMobileClick", '#00000033');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneChatBg2", '#d4e2fcff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneChatBg3", '#585858ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneHover3", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrChatBg3", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneMask", '#08080859');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill3", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock3", '#292e33ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1Block", '#e1e1e7ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed3", '#fb584e80');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed7", '#e34d43ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#00000003');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock5", '#2f2f2fa6');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed2", '#fb584e4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed1", '#fb584e1a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed8", '#933d37ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneClick", '#c9cfe080');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneLine1Hover", '#c9cfe033');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon3Red", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneLine4", '#ffffff4d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow7", '#ffda56ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampLightgreen7", '#5aa853ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow2", '#ffeeb34d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampYellow1", '#ffeeb31a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext8", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrNoticeBg", '#57678bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen4", '#67d569b2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen2", '#67d5694d');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen1", '#67d5691a');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange6", '#ffa216ff');
+  (0, _defineProperty2["default"])(this, "fcrOrange6", '#ffa216ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange7", '#e86e16ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen7", '#00a703ff');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropup", '0px 0px 15px 0px rgba(0, 0, 0, 0.25)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupM", '0px 2px 50px 5px rgba(143, 143, 143, 0.2)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupS", '0px 2px 8px 5px rgba(255, 255, 255, 0.1)');
+});
+var FcrUIRadius = exports.FcrUIRadius = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIRadius() {
+  (0, _classCallCheck2["default"])(this, FcrUIRadius);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxxl", 24);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusL", 12);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxs", 4);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusM", 10);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusRound", 9999);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxxs", 3);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXl", 16);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusS", 8);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxl", 20);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXs", 6);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxxxs", 2);
+  (0, _defineProperty2["default"])(this, "fcrCornerradiusXxxxl", 40);
+});
+var FcrUIFont = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIFont() {
+  (0, _classCallCheck2["default"])(this, FcrUIFont);
+  (0, _defineProperty2["default"])(this, "fcrFontWeightXXL", 900);
+  (0, _defineProperty2["default"])(this, "fcrFontWeightX", 800);
+  (0, _defineProperty2["default"])(this, "fcrFontWeightL", 700);
+  (0, _defineProperty2["default"])(this, "fcrFontWeightM", 600);
+  (0, _defineProperty2["default"])(this, "fcrFontWeightS", 400);
+});

package/lib/theme/generate.d.ts

@@ -0,0 +1,4 @@
+export type ThemeMode = 'light' | 'dark';
+export declare let themeMode: ThemeMode;
+export declare const setThemeMode: (mode: ThemeMode) => void;
+export declare const generateTheme: () => void;

package/lib/theme/generate.js

@@ -0,0 +1,54 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeMode = exports.setThemeMode = exports.generateTheme = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.entries.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _fcrUiConfig = require("./fcr-ui-config");
+var themeMode = exports.themeMode = 'light';
+var setThemeMode = exports.setThemeMode = function setThemeMode(mode) {
+  exports.themeMode = themeMode = mode;
+};
+var generateTheme = exports.generateTheme = function generateTheme() {
+  var theme = new _fcrUiConfig.FcrUIConfig();
+  var colors = theme.colors,
+    radius = theme.radius,
+    font = theme.font;
+  // add css variables to the root element
+  var root = document.documentElement;
+  // insert colors by theme
+  Object.entries(colors[themeMode]).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    // console.log('root', key, document.documentElement);
+
+    root.style.setProperty("--".concat(camelTounderline(key)), value);
+  });
+  // insert radius
+  Object.entries(radius).forEach(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    root.style.setProperty("--".concat(camelTounderline(key)), value + 'px');
+  });
+  // insert font
+  Object.entries(font).forEach(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    root.style.setProperty("--".concat(camelTounderline(key)), value);
+  });
+};
+var camelTounderline = function camelTounderline(str) {
+  return str.replace(/([A-Z])/g, '_$1').toLowerCase();
+};

package/lib/utilities/click-anywhere.d.ts

@@ -0,0 +1 @@
+export declare const clickAnywhere: (el: HTMLElement, cb: () => void) => () => void;

package/lib/utilities/click-anywhere.js

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clickAnywhere = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var callbacks = new Set();
+var clickAnywhere = exports.clickAnywhere = function clickAnywhere(el, cb) {
+  var propaHandler = function propaHandler(e) {
+    // need to call back other clickAnywhere
+    // before e.stopPropagation,
+    // if there are more than one
+    callbacks.forEach(function (ocb) {
+      if (ocb !== cb) {
+        ocb();
+      }
+    });
+    e.stopPropagation();
+  };
+  var callbackHandler = function callbackHandler() {
+    cb();
+  };
+  el.addEventListener('mousedown', propaHandler);
+  window.addEventListener('mousedown', callbackHandler);
+  callbacks.add(cb);
+  return function () {
+    el.addEventListener('mousedown', propaHandler);
+    window.removeEventListener('mousedown', callbackHandler);
+    callbacks["delete"](cb);
+  };
+};

package/lib/utilities/color-palette.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utilities/color-palette.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _range = _interopRequireDefault(require("lodash/range"));
+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 getHue(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 getSaturation(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 getValue(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));
+};
+var getColorByDepthLevel = function getColorByDepthLevel(color, index) {
+  var isLight = index <= 6;
+  var hsv = (0, _tinycolor["default"])(color).toHsv();
+  var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+  return (0, _tinycolor["default"])({
+    h: getHue(hsv, i, isLight),
+    s: getSaturation(hsv, i, isLight),
+    v: getValue(hsv, i, isLight)
+  }).toHexString();
+};
+module.exports.colorDepth = function (baseColor) {
+  var palette = {
+    DEFAULT: baseColor
+  };
+  (0, _range["default"])(1, 11).forEach(function (n) {
+    if (n === 6) {
+      palette[6] = baseColor;
+    } else {
+      palette[n] = getColorByDepthLevel(baseColor, n);
+    }
+  });
+  return palette;
+};
+module.exports.colorAlpha = function (baseColor, alpha) {
+  return (0, _tinycolor["default"])(baseColor).setAlpha(alpha).toRgbString();
+};