cssVariables.js 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.registerTheme = registerTheme;
  7. var _tinycolor = require("@ctrl/tinycolor");
  8. var _colors = require("@ant-design/colors");
  9. var _dynamicCSS = require("../vc-util/Dom/dynamicCSS");
  10. var _canUseDom = _interopRequireDefault(require("../_util/canUseDom"));
  11. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  12. /* eslint-disable import/prefer-default-export, prefer-destructuring */
  13. var dynamicStyleMark = "-ant-".concat(Date.now(), "-").concat(Math.random());
  14. function registerTheme(globalPrefixCls, theme) {
  15. var variables = {};
  16. var formatColor = function formatColor(color, updater) {
  17. var clone = color.clone();
  18. clone = (updater === null || updater === void 0 ? void 0 : updater(clone)) || clone;
  19. return clone.toRgbString();
  20. };
  21. var fillColor = function fillColor(colorVal, type) {
  22. var baseColor = new _tinycolor.TinyColor(colorVal);
  23. var colorPalettes = (0, _colors.generate)(baseColor.toRgbString());
  24. variables["".concat(type, "-color")] = formatColor(baseColor);
  25. variables["".concat(type, "-color-disabled")] = colorPalettes[1];
  26. variables["".concat(type, "-color-hover")] = colorPalettes[4];
  27. variables["".concat(type, "-color-active")] = colorPalettes[6];
  28. variables["".concat(type, "-color-outline")] = baseColor.clone().setAlpha(0.2).toRgbString();
  29. variables["".concat(type, "-color-deprecated-bg")] = colorPalettes[1];
  30. variables["".concat(type, "-color-deprecated-border")] = colorPalettes[3];
  31. };
  32. // ================ Primary Color ================
  33. if (theme.primaryColor) {
  34. fillColor(theme.primaryColor, 'primary');
  35. var primaryColor = new _tinycolor.TinyColor(theme.primaryColor);
  36. var primaryColors = (0, _colors.generate)(primaryColor.toRgbString());
  37. // Legacy - We should use semantic naming standard
  38. primaryColors.forEach(function (color, index) {
  39. variables["primary-".concat(index + 1)] = color;
  40. });
  41. // Deprecated
  42. variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, function (c) {
  43. return c.lighten(35);
  44. });
  45. variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, function (c) {
  46. return c.lighten(20);
  47. });
  48. variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, function (c) {
  49. return c.tint(20);
  50. });
  51. variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, function (c) {
  52. return c.tint(50);
  53. });
  54. variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, function (c) {
  55. return c.setAlpha(c.getAlpha() * 0.12);
  56. });
  57. var primaryActiveColor = new _tinycolor.TinyColor(primaryColors[0]);
  58. variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, function (c) {
  59. return c.setAlpha(c.getAlpha() * 0.3);
  60. });
  61. variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, function (c) {
  62. return c.darken(2);
  63. });
  64. }
  65. // ================ Success Color ================
  66. if (theme.successColor) {
  67. fillColor(theme.successColor, 'success');
  68. }
  69. // ================ Warning Color ================
  70. if (theme.warningColor) {
  71. fillColor(theme.warningColor, 'warning');
  72. }
  73. // ================= Error Color =================
  74. if (theme.errorColor) {
  75. fillColor(theme.errorColor, 'error');
  76. }
  77. // ================= Info Color ==================
  78. if (theme.infoColor) {
  79. fillColor(theme.infoColor, 'info');
  80. }
  81. // Convert to css variables
  82. var cssList = Object.keys(variables).map(function (key) {
  83. return "--".concat(globalPrefixCls, "-").concat(key, ": ").concat(variables[key], ";");
  84. });
  85. if ((0, _canUseDom.default)()) {
  86. (0, _dynamicCSS.updateCSS)("\n :root {\n ".concat(cssList.join('\n'), "\n }\n "), "".concat(dynamicStyleMark, "-dynamic-theme"));
  87. } else {
  88. (0, _devWarning.default)(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
  89. }
  90. }