linkmore-design/lib/config-provider/cssVariables.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getStyle = getStyle;
exports.registerTheme = registerTheme;
var _colors = require("@ant-design/colors");
var _tinycolor = require("@ctrl/tinycolor");
var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
var _warning = _interopRequireDefault(require("../_util/warning"));
/* eslint-disable import/prefer-default-export, prefer-destructuring */

const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
function getStyle(globalPrefixCls, theme) {
  const variables = {};
  const formatColor = (color, updater) => {
    let clone = color.clone();
    clone = updater?.(clone) || clone;
    return clone.toRgbString();
  };
  const fillColor = (colorVal, type) => {
    const baseColor = new _tinycolor.TinyColor(colorVal);
    const colorPalettes = (0, _colors.generate)(baseColor.toRgbString());
    variables[`${type}-color`] = formatColor(baseColor);
    variables[`${type}-color-disabled`] = colorPalettes[1];
    variables[`${type}-color-hover`] = colorPalettes[4];
    variables[`${type}-color-active`] = colorPalettes[6];
    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
    variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
    variables[`${type}-color-deprecated-border`] = colorPalettes[2];
    try {
      [0.85, 0.75, 0.6, 0.5, 0.25, 0.2, 0.1].forEach((value, index) => {
        variables[`${type}-color-alpha-${index + 1}`] = baseColor.clone().setAlpha(value).toRgbString();
      });
    } catch (err) {
      console.log('颜色转换失败');
    }
  };

  // ================ Primary Color ================
  if (theme.primaryColor) {
    fillColor(theme.primaryColor, 'primary');
    const primaryColor = new _tinycolor.TinyColor(theme.primaryColor);
    const primaryColors = (0, _colors.generate)(primaryColor.toRgbString());

    // Legacy - We should use semantic naming standard
    primaryColors.forEach((color, index) => {
      variables[`primary-${index + 1}`] = color;
    });
    // Deprecated
    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c => c.setAlpha(c.getAlpha() * 0.12));

    /** 添加五个主色的case */
    [...new Array(5).keys()].forEach((_, index) => {
      if (theme?.[`primaryColorCase${index + 1}`]) {
        variables[`primary-color-case${index + 1}`] = theme[`primaryColorCase${index + 1}`];
      }
    });
    const primaryActiveColor = new _tinycolor.TinyColor(primaryColors[0]);
    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setAlpha(c.getAlpha() * 0.3));
    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c => c.darken(2));
  }

  // ================ Success Color ================
  if (theme.successColor) {
    fillColor(theme.successColor, 'success');
  }

  // ================ Warning Color ================
  if (theme.warningColor) {
    fillColor(theme.warningColor, 'warning');
  }

  // ================= Error Color =================
  if (theme.errorColor) {
    fillColor(theme.errorColor, 'error');
  }

  // ================= Info Color ==================
  if (theme.infoColor) {
    fillColor(theme.infoColor, 'info');
  }
  if (theme.borderRadiusBase) {
    variables['border-radius-base'] = theme.borderRadiusBase;
  }
  if (theme.modalRadiusBase) {
    variables['modal-radius-base'] = theme.modalRadiusBase;
  }

  // Convert to css variables
  const cssList = Object.keys(variables).map(key => `--${globalPrefixCls}-${key}: ${variables[key]};`);
  return `
  :root {
    ${cssList.join('\n')}
  }
  `.trim();
}
function registerTheme(globalPrefixCls, theme) {
  const style = getStyle(globalPrefixCls, theme);
  if ((0, _canUseDom.default)()) {
    (0, _dynamicCSS.updateCSS)(style, `${dynamicStyleMark}-dynamic-theme`);
  } else {
    (0, _warning.default)(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
  }
}