@atlaskit/tokens
Version:
Design tokens are the single source of truth to name and store design decisions.
39 lines (38 loc) • 1.83 kB
JavaScript
import { loadAndAppendCustomThemeCss } from './custom-theme';
import { themeStateDefaults } from './theme-config';
import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
import { isValidBrandHex } from './utils/is-valid-brand-hex';
/**
* Synchronously generates and applies custom theme styles to the page.
*
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
* @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
*
* @example
* ```
* UNSAFE_loadCustomThemeStyles({
* colorMode: 'auto',
* UNSAFE_themeOptions: { brandColor: '#FF0000' }
* });
* ```
*/
var UNSAFE_loadCustomThemeStyles = function UNSAFE_loadCustomThemeStyles() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$colorMode = _ref.colorMode,
colorMode = _ref$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref$colorMode,
_ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
// Load custom theme styles
if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
var attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, colorMode);
if (attrOfMissingCustomStyles.length !== 0) {
loadAndAppendCustomThemeCss({
colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
// only load the missing custom theme styles
attrOfMissingCustomStyles[0],
UNSAFE_themeOptions: UNSAFE_themeOptions
});
}
}
};
export default UNSAFE_loadCustomThemeStyles;