@atlaskit/theme
Version:
The AtlasKit theme framework
408 lines • 24.3 kB
JavaScript
!function(root, factory) {
"object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("babel-runtime/helpers/defineProperty"), require("react"), require("prop-types"), require("styled-components"), require("babel-runtime/helpers/taggedTemplateLiteral")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "babel-runtime/helpers/defineProperty", "react", "prop-types", "styled-components", "babel-runtime/helpers/taggedTemplateLiteral" ], factory) : "object" == typeof exports ? exports["@atlaskit/theme"] = factory(require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("babel-runtime/helpers/defineProperty"), require("react"), require("prop-types"), require("styled-components"), require("babel-runtime/helpers/taggedTemplateLiteral")) : root["@atlaskit/theme"] = factory(root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root["babel-runtime/helpers/defineProperty"], root.react, root["prop-types"], root["styled-components"], root["babel-runtime/helpers/taggedTemplateLiteral"]);
}(this, function(__WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_16__) {
/******/
return function(modules) {
/******/
/******/
// The require function
/******/
function __webpack_require__(moduleId) {
/******/
/******/
// Check if module is in cache
/******/
if (installedModules[moduleId]) /******/
return installedModules[moduleId].exports;
/******/
/******/
// Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
exports: {},
/******/
id: moduleId,
/******/
loaded: !1
};
/******/
/******/
// Return the exports of the module
/******/
/******/
/******/
// Execute the module function
/******/
/******/
/******/
// Flag the module as loaded
/******/
return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__),
module.loaded = !0, module.exports;
}
// webpackBootstrap
/******/
// The module cache
/******/
var installedModules = {};
/******/
/******/
// Load entry module and return exports
/******/
/******/
/******/
/******/
// expose the modules object (__webpack_modules__)
/******/
/******/
/******/
// expose the module cache
/******/
/******/
/******/
// __webpack_public_path__
/******/
return __webpack_require__.m = modules, __webpack_require__.c = installedModules,
__webpack_require__.p = "", __webpack_require__(0);
}([ /* 0 */
/***/
function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
}, /* 1 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) return obj;
var newObj = {};
if (null != obj) for (var key in obj) Object.prototype.hasOwnProperty.call(obj, key) && (newObj[key] = obj[key]);
return newObj.default = obj, newObj;
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.codeFontFamily = exports.fontFamily = exports.fontSize = exports.gridSize = exports.borderRadius = exports.AtlasKitThemeProvider = exports.themed = exports.math = exports.colors = void 0;
var _colors2 = __webpack_require__(2), _colors = _interopRequireWildcard(_colors2), _math2 = __webpack_require__(6), _math = _interopRequireWildcard(_math2), _themed2 = __webpack_require__(3), _themed3 = _interopRequireDefault(_themed2), _AtlasKitThemeProvider2 = __webpack_require__(7), _AtlasKitThemeProvider3 = _interopRequireDefault(_AtlasKitThemeProvider2);
exports.colors = _colors, exports.math = _math, exports.themed = _themed3.default,
exports.AtlasKitThemeProvider = _AtlasKitThemeProvider3.default;
/*
These theme values are expressed as functions so that if we decide to make
them dependent on props in the future, it wouldn't require a significant
refactor everywhere they are being used.
*/
exports.borderRadius = function() {
return 3;
}, exports.gridSize = function() {
return 8;
}, exports.fontSize = function() {
return 14;
}, exports.fontFamily = function() {
return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif';
}, exports.codeFontFamily = function() {
return '"SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Courier, monospace';
};
}, /* 2 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.green = exports.yellow = exports.red = exports.purple = exports.teal = exports.blue = exports.primary = exports.linkOutline = exports.linkActive = exports.linkHover = exports.link = exports.codeBlock = exports.subtleHeading = exports.heading = exports.subtleText = exports.text = exports.background = exports.DN10A = exports.DN20A = exports.DN30A = exports.DN40A = exports.DN50A = exports.DN60A = exports.DN70A = exports.DN80A = exports.DN90A = exports.DN100A = exports.DN200A = exports.DN300A = exports.DN400A = exports.DN500A = exports.DN600A = exports.DN700A = exports.DN800A = exports.DN0 = exports.DN10 = exports.DN20 = exports.DN30 = exports.DN40 = exports.DN50 = exports.DN60 = exports.DN70 = exports.DN80 = exports.DN90 = exports.DN100 = exports.DN200 = exports.DN300 = exports.DN400 = exports.DN500 = exports.DN600 = exports.DN700 = exports.DN800 = exports.DN900 = exports.N800A = exports.N700A = exports.N600A = exports.N500A = exports.N400A = exports.N300A = exports.N200A = exports.N100A = exports.N90A = exports.N80A = exports.N70A = exports.N60A = exports.N50A = exports.N40A = exports.N30A = exports.N20A = exports.N10A = exports.N900 = exports.N800 = exports.N700 = exports.N600 = exports.N500 = exports.N400 = exports.N300 = exports.N200 = exports.N100 = exports.N90 = exports.N80 = exports.N70 = exports.N60 = exports.N50 = exports.N40 = exports.N30 = exports.N20 = exports.N10 = exports.N0 = exports.T500 = exports.T400 = exports.T300 = exports.T200 = exports.T100 = exports.T75 = exports.T50 = exports.P500 = exports.P400 = exports.P300 = exports.P200 = exports.P100 = exports.P75 = exports.P50 = exports.B500 = exports.B400 = exports.B300 = exports.B200 = exports.B100 = exports.B75 = exports.B50 = exports.G500 = exports.G400 = exports.G300 = exports.G200 = exports.G100 = exports.G75 = exports.G50 = exports.Y500 = exports.Y400 = exports.Y300 = exports.Y200 = exports.Y100 = exports.Y75 = exports.Y50 = exports.R500 = exports.R400 = exports.R300 = exports.R200 = exports.R100 = exports.R75 = exports.R50 = void 0;
var _themed = __webpack_require__(3), _themed2 = _interopRequireDefault(_themed), R300 = (exports.R50 = "#FFEBE6",
exports.R75 = "#FFBDAD", exports.R100 = "#FF8F73", exports.R200 = "#FF7452", exports.R300 = "#FF5630"), Y300 = (exports.R400 = "#DE350B",
exports.R500 = "#BF2600", exports.Y50 = "#FFFAE6", exports.Y75 = "#FFF0B3", exports.Y100 = "#FFE380",
exports.Y200 = "#FFC400", exports.Y300 = "#FFAB00"), G300 = (exports.Y400 = "#FF991F",
exports.Y500 = "#FF8B00", exports.G50 = "#E3FCEF", exports.G75 = "#ABF5D1", exports.G100 = "#79F2C0",
exports.G200 = "#57D9A3", exports.G300 = "#36B37E"), B100 = (exports.G400 = "#00875A",
exports.G500 = "#006644", exports.B50 = "#DEEBFF", exports.B75 = "#B3D4FF", exports.B100 = "#4C9AFF"), B200 = exports.B200 = "#2684FF", B300 = exports.B300 = "#0065FF", B400 = exports.B400 = "#0052CC", B500 = exports.B500 = "#0747A6", P100 = (exports.P50 = "#EAE6FF",
exports.P75 = "#C0B6F2", exports.P100 = "#998DD9"), P300 = (exports.P200 = "#8777D9",
exports.P300 = "#6554C0"), T200 = (exports.P400 = "#5243AA", exports.P500 = "#403294",
exports.T50 = "#E6FCFF", exports.T75 = "#B3F5FF", exports.T100 = "#79E2F2", exports.T200 = "#00C7E6"), T300 = exports.T300 = "#00B8D9", N0 = (exports.T400 = "#00A3BF",
exports.T500 = "#008DA6", exports.N0 = "#FFFFFF"), N20 = (exports.N10 = "#FAFBFC",
exports.N20 = "#F4F5F7"), N300 = (exports.N30 = "#EBECF0", exports.N40 = "#DFE1E6",
exports.N50 = "#C1C7D0", exports.N60 = "#B3BAC5", exports.N70 = "#A5ADBA", exports.N80 = "#97A0AF",
exports.N90 = "#8993A4", exports.N100 = "#7A869A", exports.N200 = "#6B778C", exports.N300 = "#5E6C84"), N800 = (exports.N400 = "#505F79",
exports.N500 = "#42526E", exports.N600 = "#344563", exports.N700 = "#253858", exports.N800 = "#172B4D"), N900 = exports.N900 = "#091E42", DN600 = (exports.N10A = "rgba(9, 30, 66, 0.02)",
exports.N20A = "rgba(9, 30, 66, 0.04)", exports.N30A = "rgba(9, 30, 66, 0.08)",
exports.N40A = "rgba(9, 30, 66, 0.13)", exports.N50A = "rgba(9, 30, 66, 0.25)",
exports.N60A = "rgba(9, 30, 66, 0.31)", exports.N70A = "rgba(9, 30, 66, 0.36)",
exports.N80A = "rgba(9, 30, 66, 0.42)", exports.N90A = "rgba(9, 30, 66, 0.48)",
exports.N100A = "rgba(9, 30, 66, 0.54)", exports.N200A = "rgba(9, 30, 66, 0.60)",
exports.N300A = "rgba(9, 30, 66, 0.66)", exports.N400A = "rgba(9, 30, 66, 0.71)",
exports.N500A = "rgba(9, 30, 66, 0.77)", exports.N600A = "rgba(9, 30, 66, 0.82)",
exports.N700A = "rgba(9, 30, 66, 0.89)", exports.N800A = "rgba(9, 30, 66, 0.95)",
exports.DN900 = "#E6EDFA", exports.DN800 = "#DCE5F5", exports.DN700 = "#CED9EB",
exports.DN600 = "#B8C7E0"), DN300 = (exports.DN500 = "#ABBBD6", exports.DN400 = "#9FB0CC",
exports.DN300 = "#8C9CB8"), DN50 = (exports.DN200 = "#7988A3", exports.DN100 = "#67758F",
exports.DN90 = "#56637A", exports.DN80 = "#455166", exports.DN70 = "#3B475C", exports.DN60 = "#313D52",
exports.DN50 = "#283447"), DN30 = (exports.DN40 = "#202B3D", exports.DN30 = "#1B2638");
exports.DN20 = "#121A29", exports.DN10 = "#0E1624", exports.DN0 = "#0D1424", exports.DN800A = "rgba(13, 20, 36, 0.06)",
exports.DN700A = "rgba(13, 20, 36, 0.14)", exports.DN600A = "rgba(13, 20, 36, 0.18)",
exports.DN500A = "rgba(13, 20, 36, 0.29)", exports.DN400A = "rgba(13, 20, 36, 0.36)",
exports.DN300A = "rgba(13, 20, 36, 0.40)", exports.DN200A = "rgba(13, 20, 36, 0.47)",
exports.DN100A = "rgba(13, 20, 36, 0.53)", exports.DN90A = "rgba(13, 20, 36, 0.63)",
exports.DN80A = "rgba(13, 20, 36, 0.73)", exports.DN70A = "rgba(13, 20, 36, 0.78)",
exports.DN60A = "rgba(13, 20, 36, 0.81)", exports.DN50A = "rgba(13, 20, 36, 0.85)",
exports.DN40A = "rgba(13, 20, 36, 0.89)", exports.DN30A = "rgba(13, 20, 36, 0.92)",
exports.DN20A = "rgba(13, 20, 36, 0.95)", exports.DN10A = "rgba(13, 20, 36, 0.97)",
exports.background = (0, _themed2.default)({
light: N0,
dark: DN30
}), exports.text = (0, _themed2.default)({
light: N900,
dark: DN600
}), exports.subtleText = (0, _themed2.default)({
light: N300,
dark: DN300
}), exports.heading = (0, _themed2.default)({
light: N800,
dark: DN600
}), exports.subtleHeading = (0, _themed2.default)({
light: N300,
dark: DN300
}), exports.codeBlock = (0, _themed2.default)({
light: N20,
dark: DN50
}), exports.link = (0, _themed2.default)({
light: B400,
dark: B100
}), exports.linkHover = (0, _themed2.default)({
light: B300,
dark: B200
}), exports.linkActive = (0, _themed2.default)({
light: B500,
dark: B100
}), exports.linkOutline = (0, _themed2.default)({
light: B100,
dark: B200
}), exports.primary = (0, _themed2.default)({
light: B400,
dark: B100
}), exports.blue = (0, _themed2.default)({
light: B400,
dark: B100
}), exports.teal = (0, _themed2.default)({
light: T300,
dark: T200
}), exports.purple = (0, _themed2.default)({
light: P300,
dark: P100
}), exports.red = (0, _themed2.default)({
light: R300,
dark: R300
}), exports.yellow = (0, _themed2.default)({
light: Y300,
dark: Y300
}), exports.green = (0, _themed2.default)({
light: G300,
dark: G300
});
}, /* 3 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function themedVariants(variantProp, variants) {
return function(props) {
var theme = (0, _getTheme2.default)(props), modes = variants[props[variantProp]];
if (modes) return modes[theme.mode];
};
}
/* eslint-disable prefer-rest-params */
function themed(modes) {
return "string" == typeof modes ? themedVariants.apply(void 0, arguments) : function(props) {
var theme = (0, _getTheme2.default)(props);
return modes[theme.mode];
};
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.default = themed;
var _getTheme = __webpack_require__(4), _getTheme2 = _interopRequireDefault(_getTheme);
}, /* 4 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
/* eslint-disable no-nested-ternary */
function getTheme(props) {
return props.theme && props.theme[_constants.CHANNEL] ? props.theme[_constants.CHANNEL] : defaultTheme;
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.default = getTheme;
var _constants = __webpack_require__(5), defaultTheme = {
mode: _constants.DEAULT_THEME_MODE
};
}, /* 5 */
/***/
function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
exports.FLATTENED = "__FLATTENED__", exports.CHANNEL = "__ATLASKIT_THEME__", exports.DEAULT_THEME_MODE = "light",
exports.THEME_MODES = [ "light", "dark" ];
}, /* 6 */
/***/
function(module, exports) {
"use strict";
function add(fn, addend) {
return function(props) {
return fn(props) + addend;
};
}
function subtract(fn, subtrahend) {
return function(props) {
return fn(props) - subtrahend;
};
}
function multiply(fn, factor) {
return function(props) {
return fn(props) * factor;
};
}
function divide(fn, divisor) {
return function(props) {
return fn(props) / divisor;
};
}
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.add = add, exports.subtract = subtract, exports.multiply = multiply,
exports.divide = divide;
}, /* 7 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function getStylesheetResetCSS(state) {
return "\n body { background: " + (0, _colors.background)(state) + "; }\n ";
}
function buildThemeState(mode) {
return {
theme: (0, _defineProperty3.default)({}, _constants.CHANNEL, {
mode: mode
})
};
}
Object.defineProperty(exports, "__esModule", {
value: !0
});
var _classCallCheck2 = __webpack_require__(8), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _defineProperty2 = __webpack_require__(11), _defineProperty3 = _interopRequireDefault(_defineProperty2), _react = __webpack_require__(12), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(13), _propTypes2 = _interopRequireDefault(_propTypes), _styledComponents = __webpack_require__(14), _colors = __webpack_require__(2), _ThemeReset = __webpack_require__(15), _ThemeReset2 = _interopRequireDefault(_ThemeReset), _constants = __webpack_require__(5), AtlasKitThemeProvider = function(_Component) {
function AtlasKitThemeProvider(props) {
(0, _classCallCheck3.default)(this, AtlasKitThemeProvider);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
return _this.state = buildThemeState(props.mode), _this;
}
return (0, _inherits3.default)(AtlasKitThemeProvider, _Component), AtlasKitThemeProvider.prototype.getChildContext = function() {
return {
hasAtlasKitThemeProvider: !0
};
}, AtlasKitThemeProvider.prototype.componentWillMount = function() {
if (!this.context.hasAtlasKitThemeProvider) {
var css = getStylesheetResetCSS(this.state);
this.stylesheet = document.createElement("style"), this.stylesheet.type = "text/css",
this.stylesheet.innerHTML = css, document.head.appendChild(this.stylesheet);
}
}, AtlasKitThemeProvider.prototype.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() {
this.stylesheet && (document.head.removeChild(this.stylesheet), delete this.stylesheet);
}, AtlasKitThemeProvider.prototype.render = function() {
var children = this.props.children;
return _react2.default.createElement(_styledComponents.ThemeProvider, {
theme: this.state.theme
}, _react2.default.createElement(_ThemeReset2.default, null, children));
}, AtlasKitThemeProvider;
}(_react.Component);
AtlasKitThemeProvider.propTypes = {
mode: _propTypes2.default.oneOf(_constants.THEME_MODES)
}, AtlasKitThemeProvider.defaultProps = {
mode: _constants.DEFAULT_THEME_MODE
}, AtlasKitThemeProvider.childContextTypes = {
hasAtlasKitThemeProvider: _propTypes2.default.bool
}, AtlasKitThemeProvider.contextTypes = {
hasAtlasKitThemeProvider: _propTypes2.default.bool
}, exports.default = AtlasKitThemeProvider, AtlasKitThemeProvider.propTypes = {
children: _propTypes2.default.node
};
}, /* 8 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
}, /* 9 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
}, /* 10 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
}, /* 11 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
}, /* 12 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
}, /* 13 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
}, /* 14 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
}, /* 15 */
/***/
function(module, exports, __webpack_require__) {
"use strict";
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) return obj;
var newObj = {};
if (null != obj) for (var key in obj) Object.prototype.hasOwnProperty.call(obj, key) && (newObj[key] = obj[key]);
return newObj.default = obj, newObj;
}
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
Object.defineProperty(exports, "__esModule", {
value: !0
});
var _taggedTemplateLiteral2 = __webpack_require__(16), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0,
_taggedTemplateLiteral3.default)([ "\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" ]), _styledComponents = __webpack_require__(14), _styledComponents2 = _interopRequireDefault(_styledComponents), _colors = __webpack_require__(2), colors = _interopRequireWildcard(_colors), ThemeReset = _styledComponents2.default.div(_templateObject, 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);
exports.default = ThemeReset;
}, /* 16 */
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
} ]);
});