cssVariables.js 3.7 KB

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