85 lines
3.8 KiB
JavaScript
85 lines
3.8 KiB
JavaScript
|
"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 === null || updater === void 0 ? void 0 : 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];
|
||
|
|
};
|
||
|
|
// ================ 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));
|
||
|
|
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');
|
||
|
|
}
|
||
|
|
// 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 {
|
||
|
|
process.env.NODE_ENV !== "production" ? (0, _warning.default)(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.') : void 0;
|
||
|
|
}
|
||
|
|
}
|