@codecademy/gamut-styles 16.1.4-alpha.ab0105.0 → 16.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AssetProvider.js +16 -14
- package/dist/Background.js +45 -28
- package/dist/ColorMode.js +76 -69
- package/dist/GamutProvider.js +19 -19
- package/dist/cache/createEmotionCache.js +26 -11
- package/dist/cache/stylisPlugins/focusVisible.js +4 -4
- package/dist/globals/Reboot.js +6 -4
- package/dist/globals/Typography.js +20 -18
- package/dist/globals/Variables.js +19 -11
- package/dist/remoteAssets/fonts.js +8 -8
- package/dist/styles/boxShadow.js +20 -10
- package/dist/styles/fontSmoothing.js +7 -5
- package/dist/styles/noSelect.js +1 -1
- package/dist/styles/pxRem.js +3 -3
- package/dist/styles/responsive.js +6 -4
- package/dist/styles/screenReaderOnly.js +2 -2
- package/dist/styles/transitionConcat.js +4 -4
- package/dist/themes/admin.js +1 -1
- package/dist/themes/core.js +11 -13
- package/dist/themes/platform.js +1 -1
- package/dist/utilities/themed.js +2 -4
- package/dist/variables/colors.js +18 -19
- package/dist/variables/deprecated-colors.js +16 -17
- package/dist/variables/elements.js +1 -1
- package/dist/variables/responsive.js +6 -4
- package/dist/variables/spacing.js +1 -1
- package/dist/variables/timing.js +5 -5
- package/dist/variables/typography.js +8 -14
- package/dist/variance/config.js +31 -47
- package/dist/variance/index.js +2 -1
- package/dist/variance/props.js +15 -15
- package/dist/variance/utils.js +14 -6
- package/package.json +3 -3
|
@@ -2,22 +2,24 @@ import { css, Global } from '@emotion/react';
|
|
|
2
2
|
import { webFonts } from '../remoteAssets/fonts';
|
|
3
3
|
import { coreTheme as theme } from '../themes';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
5
|
+
var fontSize = theme.fontSize,
|
|
6
|
+
spacing = theme.spacing,
|
|
7
|
+
fontWeight = theme.fontWeight,
|
|
8
|
+
lineHeight = theme.lineHeight;
|
|
9
|
+
var typographyGlobals = /*#__PURE__*/css(webFonts.map(function (_ref) {
|
|
10
|
+
var name = _ref.name,
|
|
11
|
+
_ref$style = _ref.style,
|
|
12
|
+
style = _ref$style === void 0 ? 'normal' : _ref$style,
|
|
13
|
+
_ref$weight = _ref.weight,
|
|
14
|
+
weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
|
|
15
|
+
extensions = _ref.extensions,
|
|
16
|
+
filePath = _ref.filePath;
|
|
17
|
+
return /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(function (ext) {
|
|
18
|
+
return "url(\"".concat(filePath, ".").concat(ext, "\") format(\"").concat(ext, "\")");
|
|
19
|
+
}).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVhIiwiZmlsZSI6Ii4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHdlYkZvbnRzIH0gZnJvbSAnLi4vcmVtb3RlQXNzZXRzL2ZvbnRzJztcbmltcG9ydCB7IGNvcmVUaGVtZSBhcyB0aGVtZSB9IGZyb20gJy4uL3RoZW1lcyc7XG5cbmNvbnN0IHsgZm9udFNpemUsIHNwYWNpbmcsIGZvbnRXZWlnaHQsIGxpbmVIZWlnaHQgfSA9IHRoZW1lO1xuXG5jb25zdCB0eXBvZ3JhcGh5R2xvYmFscyA9IGNzc2BcbiAgJHt3ZWJGb250cy5tYXAoXG4gICAgKHtcbiAgICAgIG5hbWUsXG4gICAgICBzdHlsZSA9ICdub3JtYWwnLFxuICAgICAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gICAgICBleHRlbnNpb25zLFxuICAgICAgZmlsZVBhdGgsXG4gICAgfSkgPT4gY3NzYFxuICAgICAgQGZvbnQtZmFjZSB7XG4gICAgICAgIGZvbnQtZGlzcGxheTogc3dhcDtcbiAgICAgICAgZm9udC1mYW1pbHk6ICcke25hbWV9JztcbiAgICAgICAgZm9udC1zdHlsZTogJHtzdHlsZX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke3dlaWdodH07XG4gICAgICAgIHNyYzogJHtleHRlbnNpb25zXG4gICAgICAgICAgLm1hcCgoZXh0KSA9PiBgdXJsKFwiJHtmaWxlUGF0aH0uJHtleHR9XCIpIGZvcm1hdChcIiR7ZXh0fVwiKWApXG4gICAgICAgICAgLmpvaW4oJywgJyl9O1xuICAgICAgfVxuICAgIGBcbiAgKX1cblxuICBoMSxcbiAgaDIsXG4gIGgzLFxuICBoNCxcbiAgaDUsXG4gIGg2IHtcbiAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmdbMTZdfTtcbiAgICBmb250LXdlaWdodDogJHtmb250V2VpZ2h0LnRpdGxlfTtcbiAgICBsaW5lLWhlaWdodDogJHtsaW5lSGVpZ2h0LnRpdGxlfTtcbiAgfVxuXG4gIGgxIHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbNjRdfTtcbiAgfVxuICBoMiB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzQ0XX07XG4gIH1cbiAgaDMge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVszNF19O1xuICB9XG4gIGg0IHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMjZdfTtcbiAgfVxuICBoNSB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzIyXX07XG4gIH1cbiAgaDYge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsyMF19O1xuICB9XG5cbiAgc21hbGwge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsxNF19O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRXZWlnaHQuYmFzZX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUeXBvZ3JhcGh5ID0gKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3R5cG9ncmFwaHlHbG9iYWxzfSAvPjtcbiJdfQ== */"));
|
|
20
20
|
}), " h1,h2,h3,h4,h5,h6{margin-bottom:", spacing[16], ";font-weight:", fontWeight.title, ";line-height:", lineHeight.title, ";}h1{font-size:", fontSize[64], ";}h2{font-size:", fontSize[44], ";}h3{font-size:", fontSize[34], ";}h4{font-size:", fontSize[26], ";}h5{font-size:", fontSize[22], ";}h6{font-size:", fontSize[20], ";}small{font-size:", fontSize[14], ";font-weight:", fontWeight.base, ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU82QiIsImZpbGUiOiIuLi8uLi9zcmMvZ2xvYmFscy9UeXBvZ3JhcGh5LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyB3ZWJGb250cyB9IGZyb20gJy4uL3JlbW90ZUFzc2V0cy9mb250cyc7XG5pbXBvcnQgeyBjb3JlVGhlbWUgYXMgdGhlbWUgfSBmcm9tICcuLi90aGVtZXMnO1xuXG5jb25zdCB7IGZvbnRTaXplLCBzcGFjaW5nLCBmb250V2VpZ2h0LCBsaW5lSGVpZ2h0IH0gPSB0aGVtZTtcblxuY29uc3QgdHlwb2dyYXBoeUdsb2JhbHMgPSBjc3NgXG4gICR7d2ViRm9udHMubWFwKFxuICAgICh7XG4gICAgICBuYW1lLFxuICAgICAgc3R5bGUgPSAnbm9ybWFsJyxcbiAgICAgIHdlaWdodCA9ICdub3JtYWwnLFxuICAgICAgZXh0ZW5zaW9ucyxcbiAgICAgIGZpbGVQYXRoLFxuICAgIH0pID0+IGNzc2BcbiAgICAgIEBmb250LWZhY2Uge1xuICAgICAgICBmb250LWRpc3BsYXk6IHN3YXA7XG4gICAgICAgIGZvbnQtZmFtaWx5OiAnJHtuYW1lfSc7XG4gICAgICAgIGZvbnQtc3R5bGU6ICR7c3R5bGV9O1xuICAgICAgICBmb250LXdlaWdodDogJHt3ZWlnaHR9O1xuICAgICAgICBzcmM6ICR7ZXh0ZW5zaW9uc1xuICAgICAgICAgIC5tYXAoKGV4dCkgPT4gYHVybChcIiR7ZmlsZVBhdGh9LiR7ZXh0fVwiKSBmb3JtYXQoXCIke2V4dH1cIilgKVxuICAgICAgICAgIC5qb2luKCcsICcpfTtcbiAgICAgIH1cbiAgICBgXG4gICl9XG5cbiAgaDEsXG4gIGgyLFxuICBoMyxcbiAgaDQsXG4gIGg1LFxuICBoNiB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nWzE2XX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udFdlaWdodC50aXRsZX07XG4gICAgbGluZS1oZWlnaHQ6ICR7bGluZUhlaWdodC50aXRsZX07XG4gIH1cblxuICBoMSB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzY0XX07XG4gIH1cbiAgaDIge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVs0NF19O1xuICB9XG4gIGgzIHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMzRdfTtcbiAgfVxuICBoNCB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzI2XX07XG4gIH1cbiAgaDUge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsyMl19O1xuICB9XG4gIGg2IHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMjBdfTtcbiAgfVxuXG4gIHNtYWxsIHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMTRdfTtcbiAgICBmb250LXdlaWdodDogJHtmb250V2VpZ2h0LmJhc2V9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgVHlwb2dyYXBoeSA9ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt0eXBvZ3JhcGh5R2xvYmFsc30gLz47XG4iXX0= */"));
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
export var Typography = function Typography() {
|
|
22
|
+
return /*#__PURE__*/_jsx(Global, {
|
|
23
|
+
styles: typographyGlobals
|
|
24
|
+
});
|
|
25
|
+
};
|
|
@@ -1,20 +1,28 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
6
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
7
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
9
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
10
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
11
|
import { css, Global } from '@emotion/react';
|
|
2
12
|
import * as React from 'react';
|
|
3
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
14
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return /*#__PURE__*/css({
|
|
8
|
-
[scope]: vars
|
|
9
|
-
}, ";label:scopeVariables;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1ZhcmlhYmxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0UiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVmFyaWFibGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBzY29wZVZhcmlhYmxlcyA9ICh2YXJzOiBDU1NPYmplY3QsIHNjb3BlID0gJzpyb290JykgPT5cbiAgY3NzKHsgW3Njb3BlXTogdmFycyB9KTtcblxuZXhwb3J0IGNvbnN0IFZhcmlhYmxlczogUmVhY3QuRkM8e1xuICB2YXJpYWJsZXM6IFJlY29yZDxzdHJpbmcsIENTU09iamVjdD47XG59PiA9ICh7IHZhcmlhYmxlcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtPYmplY3QuZW50cmllcyh2YXJpYWJsZXMpLm1hcCgoW2tleSwgdmFyc10pID0+IChcbiAgICAgICAgPEdsb2JhbCBrZXk9e2tleX0gc3R5bGVzPXtzY29wZVZhcmlhYmxlcyh2YXJzKX0gLz5cbiAgICAgICkpfVxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */"));
|
|
15
|
+
var scopeVariables = function scopeVariables(vars) {
|
|
16
|
+
var scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':root';
|
|
17
|
+
return /*#__PURE__*/css(_defineProperty({}, scope, vars), ";label:scopeVariables;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1ZhcmlhYmxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0UiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVmFyaWFibGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBzY29wZVZhcmlhYmxlcyA9ICh2YXJzOiBDU1NPYmplY3QsIHNjb3BlID0gJzpyb290JykgPT5cbiAgY3NzKHsgW3Njb3BlXTogdmFycyB9KTtcblxuZXhwb3J0IGNvbnN0IFZhcmlhYmxlczogUmVhY3QuRkM8e1xuICB2YXJpYWJsZXM6IFJlY29yZDxzdHJpbmcsIENTU09iamVjdD47XG59PiA9ICh7IHZhcmlhYmxlcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtPYmplY3QuZW50cmllcyh2YXJpYWJsZXMpLm1hcCgoW2tleSwgdmFyc10pID0+IChcbiAgICAgICAgPEdsb2JhbCBrZXk9e2tleX0gc3R5bGVzPXtzY29wZVZhcmlhYmxlcyh2YXJzKX0gLz5cbiAgICAgICkpfVxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */"));
|
|
10
18
|
};
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
variables
|
|
14
|
-
} = _ref;
|
|
19
|
+
export var Variables = function Variables(_ref) {
|
|
20
|
+
var variables = _ref.variables;
|
|
15
21
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
16
|
-
children: Object.entries(variables).map(_ref2
|
|
17
|
-
|
|
22
|
+
children: Object.entries(variables).map(function (_ref2) {
|
|
23
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
24
|
+
key = _ref3[0],
|
|
25
|
+
vars = _ref3[1];
|
|
18
26
|
return /*#__PURE__*/_jsx(Global, {
|
|
19
27
|
styles: scopeVariables(vars)
|
|
20
28
|
}, key);
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
filePath:
|
|
1
|
+
export var FONT_ASSET_PATH = "https://static-assets.codecademy.com/gamut";
|
|
2
|
+
export var webFonts = [{
|
|
3
|
+
filePath: "".concat(FONT_ASSET_PATH, "/apercu-regular-pro"),
|
|
4
4
|
extensions: ['woff', 'woff2'],
|
|
5
5
|
name: 'Apercu'
|
|
6
6
|
}, {
|
|
7
|
-
filePath:
|
|
7
|
+
filePath: "".concat(FONT_ASSET_PATH, "/apercu-italic-pro"),
|
|
8
8
|
extensions: ['woff', 'woff2'],
|
|
9
9
|
name: 'Apercu',
|
|
10
10
|
style: 'italic'
|
|
11
11
|
}, {
|
|
12
|
-
filePath:
|
|
12
|
+
filePath: "".concat(FONT_ASSET_PATH, "/apercu-bold-pro"),
|
|
13
13
|
extensions: ['woff', 'woff2'],
|
|
14
14
|
name: 'Apercu',
|
|
15
15
|
weight: 'bold'
|
|
16
16
|
}, {
|
|
17
|
-
filePath:
|
|
17
|
+
filePath: "".concat(FONT_ASSET_PATH, "/apercu-bold-italic-pro"),
|
|
18
18
|
extensions: ['woff', 'woff2'],
|
|
19
19
|
name: 'Apercu',
|
|
20
20
|
weight: 'bold',
|
|
21
21
|
style: 'italic'
|
|
22
22
|
}, {
|
|
23
|
-
filePath:
|
|
23
|
+
filePath: "".concat(FONT_ASSET_PATH, "/SuisseIntlMono-Bold-WebS"),
|
|
24
24
|
extensions: ['woff', 'woff2'],
|
|
25
25
|
name: 'Suisse',
|
|
26
26
|
weight: 'bold'
|
|
27
27
|
}, {
|
|
28
|
-
filePath:
|
|
28
|
+
filePath: "".concat(FONT_ASSET_PATH, "/SuisseIntlMono-Regular-WebS"),
|
|
29
29
|
extensions: ['woff', 'woff2'],
|
|
30
30
|
name: 'Suisse'
|
|
31
31
|
}];
|
package/dist/styles/boxShadow.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
1
7
|
import { css } from '@emotion/react';
|
|
2
|
-
|
|
8
|
+
var shadowsForDepth = {
|
|
3
9
|
1: {
|
|
4
10
|
offsets: [1, 3, 1, 3],
|
|
5
11
|
shades: [0.12, 0.24]
|
|
@@ -21,15 +27,19 @@ const shadowsForDepth = {
|
|
|
21
27
|
shades: [0.3, 0.22]
|
|
22
28
|
}
|
|
23
29
|
};
|
|
24
|
-
export
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
export var createShadow = function createShadow(depth) {
|
|
31
|
+
var _shadowsForDepth$dept = shadowsForDepth[depth],
|
|
32
|
+
_shadowsForDepth$dept2 = _slicedToArray(_shadowsForDepth$dept.offsets, 4),
|
|
33
|
+
o1 = _shadowsForDepth$dept2[0],
|
|
34
|
+
o2 = _shadowsForDepth$dept2[1],
|
|
35
|
+
o3 = _shadowsForDepth$dept2[2],
|
|
36
|
+
o4 = _shadowsForDepth$dept2[3],
|
|
37
|
+
_shadowsForDepth$dept3 = _slicedToArray(_shadowsForDepth$dept.shades, 2),
|
|
38
|
+
s1 = _shadowsForDepth$dept3[0],
|
|
39
|
+
s2 = _shadowsForDepth$dept3[1];
|
|
40
|
+
return " 0 ".concat(o1, "px ").concat(o2, "px rgba(0, 0, 0, ").concat(s1, "),\n 0 ").concat(o3, "px ").concat(o4, "px rgba(0, 0, 0, ").concat(s2, ")");
|
|
31
41
|
};
|
|
32
|
-
export
|
|
33
|
-
|
|
42
|
+
export var boxShadow = function boxShadow() {
|
|
43
|
+
var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
34
44
|
return /*#__PURE__*/css("box-shadow:", createShadow(depth), ";;label:boxShadow;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvYm94U2hhZG93LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDWSIsImZpbGUiOiIuLi8uLi9zcmMvc3R5bGVzL2JveFNoYWRvdy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IHR5cGUgU2hhZG93RGVwdGggPSBrZXlvZiB0eXBlb2Ygc2hhZG93c0ZvckRlcHRoO1xuXG5jb25zdCBzaGFkb3dzRm9yRGVwdGggPSB7XG4gIDE6IHtcbiAgICBvZmZzZXRzOiBbMSwgMywgMSwgM10sXG4gICAgc2hhZGVzOiBbMC4xMiwgMC4yNF0sXG4gIH0sXG4gIDI6IHtcbiAgICBvZmZzZXRzOiBbMywgNiwgMywgNl0sXG4gICAgc2hhZGVzOiBbMC4xOSwgMC4yM10sXG4gIH0sXG4gIDM6IHtcbiAgICBvZmZzZXRzOiBbMTAsIDIwLCA2LCA2XSxcbiAgICBzaGFkZXM6IFswLjI1LCAwLjIyXSxcbiAgfSxcbiAgNDoge1xuICAgIG9mZnNldHM6IFsxNCwgMjgsIDEwLCAxMF0sXG4gICAgc2hhZGVzOiBbMC4yNSwgMC4yMl0sXG4gIH0sXG4gIDU6IHtcbiAgICBvZmZzZXRzOiBbMTksIDM4LCAxNSwgMTJdLFxuICAgIHNoYWRlczogWzAuMywgMC4yMl0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgY3JlYXRlU2hhZG93ID0gKGRlcHRoOiBTaGFkb3dEZXB0aCkgPT4ge1xuICBjb25zdCB7XG4gICAgb2Zmc2V0czogW28xLCBvMiwgbzMsIG80XSxcbiAgICBzaGFkZXM6IFtzMSwgczJdLFxuICB9ID0gc2hhZG93c0ZvckRlcHRoW2RlcHRoXTtcbiAgcmV0dXJuIGAgMCAke28xfXB4ICR7bzJ9cHggcmdiYSgwLCAwLCAwLCAke3MxfSksXG4gIDAgJHtvM31weCAke280fXB4IHJnYmEoMCwgMCwgMCwgJHtzMn0pYDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3hTaGFkb3cgPSAoZGVwdGg6IFNoYWRvd0RlcHRoID0gMSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGJveC1zaGFkb3c6ICR7Y3JlYXRlU2hhZG93KGRlcHRoKX07XG4gIGA7XG59O1xuIl19 */"));
|
|
35
45
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { variance } from '@codecademy/variance';
|
|
2
|
-
|
|
2
|
+
var smoothing = {
|
|
3
3
|
pixel: {
|
|
4
4
|
WebkitFontSmoothing: 'antialiased',
|
|
5
5
|
MozOsxFontSmoothing: 'grayscale'
|
|
@@ -9,19 +9,21 @@ const smoothing = {
|
|
|
9
9
|
MozOsxFontSmoothing: 'auto'
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export var fontSmoothing = variance.create({
|
|
13
13
|
fontSmoothing: {
|
|
14
14
|
property: 'fontSmooth',
|
|
15
15
|
scale: {
|
|
16
16
|
pixel: 'pixel',
|
|
17
17
|
subpixel: 'subpixel'
|
|
18
18
|
},
|
|
19
|
-
transform: value
|
|
19
|
+
transform: function transform(value) {
|
|
20
|
+
return smoothing[value];
|
|
21
|
+
}
|
|
20
22
|
}
|
|
21
23
|
});
|
|
22
|
-
export
|
|
24
|
+
export var fontSmoothPixel = fontSmoothing({
|
|
23
25
|
fontSmoothing: 'pixel'
|
|
24
26
|
});
|
|
25
|
-
export
|
|
27
|
+
export var fontSmoothSubpixel = fontSmoothing({
|
|
26
28
|
fontSmoothing: 'subpixel'
|
|
27
29
|
});
|
package/dist/styles/noSelect.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
export
|
|
3
|
+
export var noSelect = process.env.NODE_ENV === "production" ? {
|
|
4
4
|
name: "1ui1tha-noSelect",
|
|
5
5
|
styles: "-webkit-touch-callout:none;user-select:none;label:noSelect;"
|
|
6
6
|
} : {
|
package/dist/styles/pxRem.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
return
|
|
1
|
+
export var pxRem = function pxRem(pixelValue) {
|
|
2
|
+
var parsedValue = typeof pixelValue === 'string' ? parseInt(pixelValue, 10) : pixelValue;
|
|
3
|
+
return "".concat(parsedValue / 16, "rem");
|
|
4
4
|
};
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { mediaQueries } from '../variables/responsive';
|
|
3
|
-
export
|
|
4
|
-
|
|
3
|
+
export var atViewport = function atViewport(size, content) {
|
|
4
|
+
return /*#__PURE__*/css(mediaQueries[size], "{", content, ";};label:atViewport;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvcmVzcG9uc2l2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPUSIsImZpbGUiOiIuLi8uLi9zcmMvc3R5bGVzL3Jlc3BvbnNpdmUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1lZGlhUXVlcmllcywgTWVkaWFTaXplIH0gZnJvbSAnLi4vdmFyaWFibGVzL3Jlc3BvbnNpdmUnO1xuXG5leHBvcnQgY29uc3QgYXRWaWV3cG9ydCA9IChcbiAgc2l6ZTogTWVkaWFTaXplLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IGNzc2BcbiAgJHttZWRpYVF1ZXJpZXNbc2l6ZV19IHtcbiAgICAke2NvbnRlbnR9XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JlZW5TaXplTFRFID0gKFxuICBtYXg6IHN0cmluZyxcbiAgY29udGVudDogc3RyaW5nIHwgU2VyaWFsaXplZFN0eWxlc1xuKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke21heH0pIHtcbiAgICAgICR7Y29udGVudH1cbiAgICB9XG4gIGA7XG59O1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuU2l6ZUdURSA9IChcbiAgbWluOiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogJHttaW59KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IHNjcmVlblNpemVCZXR3ZWVuID0gKFxuICBtaW46IHN0cmluZyxcbiAgbWF4OiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogJHttaW59KSBhbmQgKG1heC13aWR0aDogJHttYXh9KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcbiJdfQ== */"));
|
|
5
|
+
};
|
|
6
|
+
export var screenSizeLTE = function screenSizeLTE(max, content) {
|
|
5
7
|
return /*#__PURE__*/css("@media only screen and (max-width: ", max, "){", content, ";};label:screenSizeLTE;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvcmVzcG9uc2l2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQlkiLCJmaWxlIjoiLi4vLi4vc3JjL3N0eWxlcy9yZXNwb25zaXZlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBtZWRpYVF1ZXJpZXMsIE1lZGlhU2l6ZSB9IGZyb20gJy4uL3ZhcmlhYmxlcy9yZXNwb25zaXZlJztcblxuZXhwb3J0IGNvbnN0IGF0Vmlld3BvcnQgPSAoXG4gIHNpemU6IE1lZGlhU2l6ZSxcbiAgY29udGVudDogc3RyaW5nIHwgU2VyaWFsaXplZFN0eWxlc1xuKSA9PiBjc3NgXG4gICR7bWVkaWFRdWVyaWVzW3NpemVdfSB7XG4gICAgJHtjb250ZW50fVxuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuU2l6ZUxURSA9IChcbiAgbWF4OiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHttYXh9KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IHNjcmVlblNpemVHVEUgPSAoXG4gIG1pbjogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBzY3JlZW5TaXplQmV0d2VlbiA9IChcbiAgbWluOiBzdHJpbmcsXG4gIG1heDogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkgYW5kIChtYXgtd2lkdGg6ICR7bWF4fSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG4iXX0= */"));
|
|
6
8
|
};
|
|
7
|
-
export
|
|
9
|
+
export var screenSizeGTE = function screenSizeGTE(min, content) {
|
|
8
10
|
return /*#__PURE__*/css("@media only screen and (min-width: ", min, "){", content, ";};label:screenSizeGTE;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvcmVzcG9uc2l2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QlkiLCJmaWxlIjoiLi4vLi4vc3JjL3N0eWxlcy9yZXNwb25zaXZlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBtZWRpYVF1ZXJpZXMsIE1lZGlhU2l6ZSB9IGZyb20gJy4uL3ZhcmlhYmxlcy9yZXNwb25zaXZlJztcblxuZXhwb3J0IGNvbnN0IGF0Vmlld3BvcnQgPSAoXG4gIHNpemU6IE1lZGlhU2l6ZSxcbiAgY29udGVudDogc3RyaW5nIHwgU2VyaWFsaXplZFN0eWxlc1xuKSA9PiBjc3NgXG4gICR7bWVkaWFRdWVyaWVzW3NpemVdfSB7XG4gICAgJHtjb250ZW50fVxuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuU2l6ZUxURSA9IChcbiAgbWF4OiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHttYXh9KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IHNjcmVlblNpemVHVEUgPSAoXG4gIG1pbjogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBzY3JlZW5TaXplQmV0d2VlbiA9IChcbiAgbWluOiBzdHJpbmcsXG4gIG1heDogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkgYW5kIChtYXgtd2lkdGg6ICR7bWF4fSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG4iXX0= */"));
|
|
9
11
|
};
|
|
10
|
-
export
|
|
12
|
+
export var screenSizeBetween = function screenSizeBetween(min, max, content) {
|
|
11
13
|
return /*#__PURE__*/css("@media only screen and (min-width: ", min, ") and (max-width: ", max, "){", content, ";};label:screenSizeBetween;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvcmVzcG9uc2l2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q1kiLCJmaWxlIjoiLi4vLi4vc3JjL3N0eWxlcy9yZXNwb25zaXZlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBtZWRpYVF1ZXJpZXMsIE1lZGlhU2l6ZSB9IGZyb20gJy4uL3ZhcmlhYmxlcy9yZXNwb25zaXZlJztcblxuZXhwb3J0IGNvbnN0IGF0Vmlld3BvcnQgPSAoXG4gIHNpemU6IE1lZGlhU2l6ZSxcbiAgY29udGVudDogc3RyaW5nIHwgU2VyaWFsaXplZFN0eWxlc1xuKSA9PiBjc3NgXG4gICR7bWVkaWFRdWVyaWVzW3NpemVdfSB7XG4gICAgJHtjb250ZW50fVxuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuU2l6ZUxURSA9IChcbiAgbWF4OiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHttYXh9KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IHNjcmVlblNpemVHVEUgPSAoXG4gIG1pbjogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG5cbmV4cG9ydCBjb25zdCBzY3JlZW5TaXplQmV0d2VlbiA9IChcbiAgbWluOiBzdHJpbmcsXG4gIG1heDogc3RyaW5nLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6ICR7bWlufSkgYW5kIChtYXgtd2lkdGg6ICR7bWF4fSkge1xuICAgICAgJHtjb250ZW50fVxuICAgIH1cbiAgYDtcbn07XG4iXX0= */"));
|
|
12
14
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
export
|
|
3
|
+
export var screenReaderOnly = process.env.NODE_ENV === "production" ? {
|
|
4
4
|
name: "ut38oz-screenReaderOnly",
|
|
5
5
|
styles: "position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);border:0;label:screenReaderOnly;"
|
|
6
6
|
} : {
|
|
@@ -9,7 +9,7 @@ export const screenReaderOnly = process.env.NODE_ENV === "production" ? {
|
|
|
9
9
|
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvc2NyZWVuUmVhZGVyT25seS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoiLi4vLi4vc3JjL3N0eWxlcy9zY3JlZW5SZWFkZXJPbmx5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuUmVhZGVyT25seSA9IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY2xpcDogcmVjdCgwLCAwLCAwLCAwKTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgY2xpcC1wYXRoOiBpbnNldCg1MCUpO1xuICBib3JkZXI6IDA7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuUmVhZGVyT25seUZvY3VzYWJsZSA9IGNzc2BcbiAgJjphY3RpdmUsXG4gICY6Zm9jdXMge1xuICAgIHBvc2l0aW9uOiBzdGF0aWM7XG4gICAgd2lkdGg6IGF1dG87XG4gICAgaGVpZ2h0OiBhdXRvO1xuICAgIG92ZXJmbG93OiB2aXNpYmxlO1xuICAgIGNsaXA6IGF1dG87XG4gICAgd2hpdGUtc3BhY2U6IG5vcm1hbDtcbiAgICBjbGlwLXBhdGg6IG5vbmU7XG4gIH1cbmA7XG4iXX0= */",
|
|
10
10
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export var screenReaderOnlyFocusable = process.env.NODE_ENV === "production" ? {
|
|
13
13
|
name: "13y3pk0-screenReaderOnlyFocusable",
|
|
14
14
|
styles: "&:active,&:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;clip-path:none;};label:screenReaderOnlyFocusable;"
|
|
15
15
|
} : {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { timing } from '../variables';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
export var transitionConcat = function transitionConcat(arrayOfProperties, transition) {
|
|
3
|
+
var timingFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';
|
|
4
|
+
var transitionString = "".concat(timing[transition], " ").concat(timingFn);
|
|
5
|
+
var cssString = "".concat(arrayOfProperties.join(" ".concat(transitionString, ",")), " ").concat(transitionString);
|
|
6
6
|
return cssString;
|
|
7
7
|
};
|
package/dist/themes/admin.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createTheme } from '@codecademy/variance';
|
|
2
2
|
import { coreTheme } from './core';
|
|
3
|
-
export
|
|
3
|
+
export var adminTheme = createTheme(coreTheme).addColorModes('light', {
|
|
4
4
|
light: {
|
|
5
5
|
primary: {
|
|
6
6
|
_: 'blue-500',
|
package/dist/themes/core.js
CHANGED
|
@@ -7,14 +7,14 @@ import { corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, me
|
|
|
7
7
|
* are guaranteed to be interoperable between all contexts, but with differing behaviors.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
export
|
|
10
|
+
export var coreTheme = createTheme({
|
|
11
11
|
breakpoints: mediaQueries,
|
|
12
|
-
fontSize,
|
|
13
|
-
fontFamily,
|
|
14
|
-
lineHeight,
|
|
15
|
-
fontWeight,
|
|
16
|
-
spacing,
|
|
17
|
-
elements
|
|
12
|
+
fontSize: fontSize,
|
|
13
|
+
fontFamily: fontFamily,
|
|
14
|
+
lineHeight: lineHeight,
|
|
15
|
+
fontWeight: fontWeight,
|
|
16
|
+
spacing: spacing,
|
|
17
|
+
elements: elements
|
|
18
18
|
}).addColors(corePalette).addColorModes('light', {
|
|
19
19
|
light: {
|
|
20
20
|
text: {
|
|
@@ -102,12 +102,10 @@ export const coreTheme = createTheme({
|
|
|
102
102
|
hover: 'yellow-400'
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
}).addScale('borders', _ref
|
|
106
|
-
|
|
107
|
-
colors
|
|
108
|
-
} = _ref;
|
|
105
|
+
}).addScale('borders', function (_ref) {
|
|
106
|
+
var colors = _ref.colors;
|
|
109
107
|
return {
|
|
110
|
-
1:
|
|
111
|
-
2:
|
|
108
|
+
1: "1px solid ".concat(colors.secondary),
|
|
109
|
+
2: "2px solid ".concat(colors.secondary)
|
|
112
110
|
};
|
|
113
111
|
}).createScaleVariables('elements').build();
|
package/dist/themes/platform.js
CHANGED
|
@@ -7,7 +7,7 @@ import { coreTheme } from './core';
|
|
|
7
7
|
* That are not needed for the rest of the application.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
export
|
|
10
|
+
export var platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
|
|
11
11
|
light: {
|
|
12
12
|
editor: {
|
|
13
13
|
attribute: 'green-700',
|
package/dist/utilities/themed.js
CHANGED
package/dist/variables/colors.js
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
7
|
import { flattenScale } from '@codecademy/variance';
|
|
2
8
|
import { rgba } from 'polished';
|
|
3
9
|
/**
|
|
4
10
|
* Core Colors
|
|
5
11
|
*/
|
|
6
12
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
13
|
+
var black = '#000000';
|
|
14
|
+
var white = '#ffffff';
|
|
15
|
+
var navy = '#10162F';
|
|
16
|
+
var effects = {
|
|
11
17
|
shadow: {
|
|
12
18
|
black: {
|
|
13
19
|
slight: rgba(black, 0.15),
|
|
@@ -19,7 +25,7 @@ const effects = {
|
|
|
19
25
|
}
|
|
20
26
|
}
|
|
21
27
|
};
|
|
22
|
-
export
|
|
28
|
+
export var coreSwatches = {
|
|
23
29
|
beige: {
|
|
24
30
|
'100': '#FFF0E5'
|
|
25
31
|
},
|
|
@@ -88,7 +94,7 @@ export const coreSwatches = {
|
|
|
88
94
|
'700': rgba(white, 0.8)
|
|
89
95
|
}
|
|
90
96
|
};
|
|
91
|
-
export
|
|
97
|
+
export var trueColors = {
|
|
92
98
|
beige: coreSwatches.beige[100],
|
|
93
99
|
blue: coreSwatches.blue[500],
|
|
94
100
|
green: coreSwatches.green[700],
|
|
@@ -105,20 +111,16 @@ export const trueColors = {
|
|
|
105
111
|
paleRed: coreSwatches.red[100],
|
|
106
112
|
red: coreSwatches.red[500],
|
|
107
113
|
yellow: coreSwatches.yellow[500],
|
|
108
|
-
black,
|
|
109
|
-
white
|
|
110
|
-
};
|
|
111
|
-
export const corePalette = {
|
|
112
|
-
...flattenScale(coreSwatches),
|
|
113
|
-
...flattenScale(effects),
|
|
114
|
-
...trueColors
|
|
114
|
+
black: black,
|
|
115
|
+
white: white
|
|
115
116
|
};
|
|
117
|
+
export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
|
|
116
118
|
|
|
117
119
|
/**
|
|
118
120
|
* Platform Colors
|
|
119
121
|
*/
|
|
120
122
|
|
|
121
|
-
export
|
|
123
|
+
export var platformSwatches = {
|
|
122
124
|
beige: {
|
|
123
125
|
'0': '#FFFBF8'
|
|
124
126
|
},
|
|
@@ -138,13 +140,10 @@ export const platformSwatches = {
|
|
|
138
140
|
'300': '#B3CCFF'
|
|
139
141
|
}
|
|
140
142
|
};
|
|
141
|
-
|
|
143
|
+
var truePlatformColors = {
|
|
142
144
|
lightBeige: platformSwatches.beige[0],
|
|
143
145
|
gold: platformSwatches.gold[800],
|
|
144
146
|
teal: platformSwatches.teal[500],
|
|
145
147
|
purple: platformSwatches.purple[300]
|
|
146
148
|
};
|
|
147
|
-
export
|
|
148
|
-
...flattenScale(platformSwatches),
|
|
149
|
-
...truePlatformColors
|
|
150
|
-
};
|
|
149
|
+
export var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
7
|
import { flattenScale } from '@codecademy/variance';
|
|
2
8
|
import { corePalette } from './colors';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
white
|
|
6
|
-
} = corePalette;
|
|
7
|
-
|
|
9
|
+
var black = corePalette.black,
|
|
10
|
+
white = corePalette.white;
|
|
8
11
|
/**
|
|
9
12
|
* @deprecated
|
|
10
13
|
* Using these variables directly is no longer supported.
|
|
11
14
|
*
|
|
12
15
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
13
16
|
*/
|
|
14
|
-
|
|
15
|
-
export const interactiveColors = {
|
|
17
|
+
export var interactiveColors = {
|
|
16
18
|
dark: corePalette.hyper,
|
|
17
19
|
light: corePalette.yellow
|
|
18
20
|
};
|
|
@@ -24,7 +26,7 @@ export const interactiveColors = {
|
|
|
24
26
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
25
27
|
*/
|
|
26
28
|
|
|
27
|
-
export
|
|
29
|
+
export var editorColors = {
|
|
28
30
|
blue: '#83fff5',
|
|
29
31
|
deepPurple: '#cc7bc2',
|
|
30
32
|
gray: '#939598',
|
|
@@ -42,7 +44,7 @@ export const editorColors = {
|
|
|
42
44
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
43
45
|
*/
|
|
44
46
|
|
|
45
|
-
export
|
|
47
|
+
export var platformColors = {
|
|
46
48
|
mint: {
|
|
47
49
|
'500': '#37c3be',
|
|
48
50
|
'600': '#2c9c98',
|
|
@@ -67,7 +69,7 @@ export const platformColors = {
|
|
|
67
69
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
68
70
|
*/
|
|
69
71
|
|
|
70
|
-
export
|
|
72
|
+
export var swatches = {
|
|
71
73
|
beige: {
|
|
72
74
|
'0': '#FFF0E5'
|
|
73
75
|
},
|
|
@@ -123,7 +125,7 @@ export const swatches = {
|
|
|
123
125
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
124
126
|
*/
|
|
125
127
|
|
|
126
|
-
|
|
128
|
+
var trueColors = {
|
|
127
129
|
beige: swatches.beige[0],
|
|
128
130
|
blue: swatches.blue[500],
|
|
129
131
|
green: swatches.green[700],
|
|
@@ -139,8 +141,8 @@ const trueColors = {
|
|
|
139
141
|
pink: swatches.pink[400],
|
|
140
142
|
red: swatches.red[500],
|
|
141
143
|
yellow: swatches.yellow[500],
|
|
142
|
-
black,
|
|
143
|
-
white
|
|
144
|
+
black: black,
|
|
145
|
+
white: white
|
|
144
146
|
};
|
|
145
147
|
|
|
146
148
|
/**
|
|
@@ -150,7 +152,4 @@ const trueColors = {
|
|
|
150
152
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
151
153
|
*/
|
|
152
154
|
|
|
153
|
-
export
|
|
154
|
-
...flattenScale(swatches),
|
|
155
|
-
...trueColors
|
|
156
|
-
};
|
|
155
|
+
export var colors = _objectSpread(_objectSpread({}, flattenScale(swatches)), trueColors);
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var breakpoints = {
|
|
2
2
|
xs: '480px',
|
|
3
3
|
sm: '768px',
|
|
4
4
|
md: '1024px',
|
|
5
5
|
lg: '1200px',
|
|
6
6
|
xl: '1440px'
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var createMediaQuery = function createMediaQuery(size, direction) {
|
|
9
|
+
return "@media only screen and (".concat(direction, "-width: ").concat(breakpoints[size], ")");
|
|
10
|
+
};
|
|
11
|
+
export var mediaQueries = {
|
|
10
12
|
xs: createMediaQuery('xs', 'min'),
|
|
11
13
|
sm: createMediaQuery('sm', 'min'),
|
|
12
14
|
md: createMediaQuery('md', 'min'),
|
|
13
15
|
lg: createMediaQuery('lg', 'min'),
|
|
14
16
|
xl: createMediaQuery('xl', 'min')
|
|
15
17
|
};
|
|
16
|
-
export
|
|
18
|
+
export var contentWidths = {
|
|
17
19
|
md: breakpoints.lg,
|
|
18
20
|
max: breakpoints.xl
|
|
19
21
|
};
|
package/dist/variables/timing.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var timingValues = {
|
|
2
2
|
fast: 150,
|
|
3
3
|
medium: 200,
|
|
4
4
|
slow: 350
|
|
5
5
|
};
|
|
6
|
-
export
|
|
7
|
-
fast:
|
|
8
|
-
medium:
|
|
9
|
-
slow:
|
|
6
|
+
export var timing = {
|
|
7
|
+
fast: "".concat(timingValues.fast, "ms"),
|
|
8
|
+
medium: "".concat(timingValues.medium, "ms"),
|
|
9
|
+
slow: "".concat(timingValues.slow, "ms")
|
|
10
10
|
};
|