1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- "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 _fastColor = require("@ant-design/fast-color");
- var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
- var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
- var _warning = _interopRequireDefault(require("../_util/warning"));
- 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 _fastColor.FastColor(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().setA(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 _fastColor.FastColor(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.setA(c.a * 0.12));
- const primaryActiveColor = new _fastColor.FastColor(primaryColors[0]);
- variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setA(c.a * 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;
- }
- }
|