cssVariables.js 3.4 KB

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