cssVariables.js 3.7 KB

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