@razorpay/blade
Version:
The Design System that powers Razorpay
67 lines (63 loc) • 2.07 kB
JavaScript
import bladeTheme from './bladeTheme.js';
import '../../utils/lodashButBetter/merge.js';
import cloneDeep from '../../utils/lodashButBetter/cloneDeep.js';
import '../../utils/hasSameObjectStructure/index.js';
import '../../utils/isPartialMatchObjectKeys/index.js';
import '../../utils/logger/index.js';
import { hasSameObjectStructure } from '../../utils/hasSameObjectStructure/hasSameObjectStructure.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { isPartialMatchObjectKeys } from '../../utils/isPartialMatchObjectKeys/isPartialMatchObjectKeys.js';
import merge from 'ts-deepmerge';
/**
* @deprecated Use `createTheme` from `@razorpay/blade/tokens` instead
*
* @description
*
* `overrideTheme` merges the `baseThemeTokens` and `overrides` and returns a new ThemeTokens object,
* which you can pass into BladeProvider.
*
* @example
* ```tsx
* const customTheme = overrideTheme({
* baseThemeTokens: bladeTheme, // theme to override
* overrides: {
* colors: {
* onLight: {
* brand: {
* primary: {
* '500': 'hsla(222, 100%, 96%, 1)',
* },
* },
* },
* },
* },
* });
*
* <BladeProvider themeTokens={customTheme} />
* ```
*/
var overrideTheme = function overrideTheme(_ref) {
var baseThemeTokens = _ref.baseThemeTokens,
overrides = _ref.overrides;
if (true) {
if (!hasSameObjectStructure(baseThemeTokens, bladeTheme)) {
throwBladeError({
message: 'The base theme provided is not a valid Blade theme',
moduleName: 'overrideTheme'
});
}
if (!isPartialMatchObjectKeys({
objectToMatch: overrides,
objectToInspect: baseThemeTokens
})) {
throwBladeError({
message: 'The overrides object is not valid',
moduleName: 'overrideTheme'
});
}
}
// Need to clone before merging since merge changes/mutates the actual object
return merge(cloneDeep(baseThemeTokens), overrides);
};
export { overrideTheme as default };
//# sourceMappingURL=overrideTheme.js.map