@kalamazoo/theme
Version:
The Atlaskit theme framework
84 lines • 4.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var styled_components_1 = tslib_1.__importStar(require("styled-components"));
var exenv_1 = tslib_1.__importDefault(require("exenv"));
var colors = tslib_1.__importStar(require("../colors"));
var constants_1 = require("../constants");
// For forward-compat until everything is upgraded.
var Theme_1 = tslib_1.__importDefault(require("./Theme"));
function getStylesheetResetCSS(state) {
var backgroundColor = colors.background(state);
return "\n body { background: " + backgroundColor + "; }\n ";
}
function buildThemeState(mode) {
var _a;
return { theme: (_a = {}, _a[constants_1.CHANNEL] = { mode: mode }, _a) };
}
var LegacyReset = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n\n a {\n color: ", ";\n }\n a:hover {\n color: ", ";\n }\n a:active {\n color: ", ";\n }\n a:focus {\n outline-color: ", ";\n }\n h1 {\n color: ", ";\n }\n h2 {\n color: ", ";\n }\n h3 {\n color: ", ";\n }\n h4 {\n color: ", ";\n }\n h5 {\n color: ", ";\n }\n h6 {\n color: ", ";\n }\n small {\n color: ", ";\n }\n"], ["\n background-color: ", ";\n color: ", ";\n\n a {\n color: ", ";\n }\n a:hover {\n color: ", ";\n }\n a:active {\n color: ", ";\n }\n a:focus {\n outline-color: ", ";\n }\n h1 {\n color: ", ";\n }\n h2 {\n color: ", ";\n }\n h3 {\n color: ", ";\n }\n h4 {\n color: ", ";\n }\n h5 {\n color: ", ";\n }\n h6 {\n color: ", ";\n }\n small {\n color: ", ";\n }\n"])), colors.background, colors.text, colors.link, colors.linkHover, colors.linkActive, colors.linkOutline, colors.heading, colors.heading, colors.heading, colors.heading, colors.heading, colors.subtleHeading, colors.subtleText);
var AtlaskitThemeProvider = /** @class */ (function (_super) {
tslib_1.__extends(AtlaskitThemeProvider, _super);
function AtlaskitThemeProvider(props) {
var _this = _super.call(this, props) || this;
_this.state = buildThemeState(props.mode);
return _this;
}
AtlaskitThemeProvider.prototype.getChildContext = function () {
return { hasAtlaskitThemeProvider: true };
};
AtlaskitThemeProvider.prototype.UNSAFE_componentWillMount = function () {
if (!this.context.hasAtlaskitThemeProvider && exenv_1.default.canUseDOM) {
var css = getStylesheetResetCSS(this.state);
this.stylesheet = document.createElement('style');
this.stylesheet.type = 'text/css';
this.stylesheet.innerHTML = css;
if (document && document.head) {
document.head.appendChild(this.stylesheet);
}
}
};
AtlaskitThemeProvider.prototype.UNSAFE_componentWillReceiveProps = function (newProps) {
if (newProps.mode !== this.props.mode) {
var newThemeState = buildThemeState(newProps.mode);
if (this.stylesheet) {
var css = getStylesheetResetCSS(newThemeState);
this.stylesheet.innerHTML = css;
}
this.setState(newThemeState);
}
};
AtlaskitThemeProvider.prototype.componentWillUnmount = function () {
if (this.stylesheet && document && document.head) {
document.head.removeChild(this.stylesheet);
delete this.stylesheet;
}
};
AtlaskitThemeProvider.prototype.render = function () {
var children = this.props.children;
var theme = this.state.theme;
return (
/* Wrapping the new provider around the old one provides forward
compatibility when using the old provider for styled components. This
allows us to use components converted to use the new API with consumers
using the old provider along side components that may still be using the
old theming API. */
react_1.default.createElement(Theme_1.default.Provider, { value: function () { return ({ mode: theme[constants_1.CHANNEL].mode }); } },
react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
react_1.default.createElement(LegacyReset, null, children))));
};
AtlaskitThemeProvider.defaultProps = {
mode: constants_1.DEFAULT_THEME_MODE,
};
AtlaskitThemeProvider.childContextTypes = {
hasAtlaskitThemeProvider: prop_types_1.default.bool,
};
AtlaskitThemeProvider.contextTypes = {
hasAtlaskitThemeProvider: prop_types_1.default.bool,
};
return AtlaskitThemeProvider;
}(react_1.Component));
exports.default = AtlaskitThemeProvider;
var templateObject_1;
//# sourceMappingURL=AtlaskitThemeProvider.js.map