@codecademy/gamut-styles 16.1.3 → 16.1.4-alpha.6a1d33.0
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 +14 -16
- package/dist/Background.js +28 -45
- package/dist/ColorMode.js +69 -76
- package/dist/GamutProvider.js +19 -19
- package/dist/cache/createEmotionCache.js +11 -26
- package/dist/cache/stylisPlugins/focusVisible.js +4 -4
- package/dist/globals/Reboot.js +4 -6
- package/dist/globals/Typography.js +18 -20
- package/dist/globals/Variables.js +11 -19
- package/dist/remoteAssets/fonts.js +8 -8
- package/dist/styles/boxShadow.js +10 -20
- package/dist/styles/fontSmoothing.js +5 -7
- package/dist/styles/noSelect.js +1 -1
- package/dist/styles/pxRem.js +3 -3
- package/dist/styles/responsive.js +4 -6
- 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 +13 -11
- package/dist/themes/platform.js +1 -1
- package/dist/utilities/themed.js +4 -2
- package/dist/variables/colors.js +19 -18
- package/dist/variables/deprecated-colors.js +17 -16
- package/dist/variables/elements.js +1 -1
- package/dist/variables/responsive.js +4 -6
- package/dist/variables/spacing.js +1 -1
- package/dist/variables/timing.js +5 -5
- package/dist/variables/typography.js +14 -8
- package/dist/variance/config.js +47 -31
- package/dist/variance/index.js +1 -2
- package/dist/variance/props.js +15 -15
- package/dist/variance/utils.js +6 -14
- package/package.json +14 -17
|
@@ -2,24 +2,22 @@ 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
|
-
}).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVhIiwiZmlsZSI6Ii4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHdlYkZvbnRzIH0gZnJvbSAnLi4vcmVtb3RlQXNzZXRzL2ZvbnRzJztcbmltcG9ydCB7IGNvcmVUaGVtZSBhcyB0aGVtZSB9IGZyb20gJy4uL3RoZW1lcyc7XG5cbmNvbnN0IHsgZm9udFNpemUsIHNwYWNpbmcsIGZvbnRXZWlnaHQsIGxpbmVIZWlnaHQgfSA9IHRoZW1lO1xuXG5jb25zdCB0eXBvZ3JhcGh5R2xvYmFscyA9IGNzc2BcbiAgJHt3ZWJGb250cy5tYXAoXG4gICAgKHtcbiAgICAgIG5hbWUsXG4gICAgICBzdHlsZSA9ICdub3JtYWwnLFxuICAgICAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gICAgICBleHRlbnNpb25zLFxuICAgICAgZmlsZVBhdGgsXG4gICAgfSkgPT4gY3NzYFxuICAgICAgQGZvbnQtZmFjZSB7XG4gICAgICAgIGZvbnQtZGlzcGxheTogc3dhcDtcbiAgICAgICAgZm9udC1mYW1pbHk6ICcke25hbWV9JztcbiAgICAgICAgZm9udC1zdHlsZTogJHtzdHlsZX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke3dlaWdodH07XG4gICAgICAgIHNyYzogJHtleHRlbnNpb25zXG4gICAgICAgICAgLm1hcCgoZXh0KSA9PiBgdXJsKFwiJHtmaWxlUGF0aH0uJHtleHR9XCIpIGZvcm1hdChcIiR7ZXh0fVwiKWApXG4gICAgICAgICAgLmpvaW4oJywgJyl9O1xuICAgICAgfVxuICAgIGBcbiAgKX1cblxuICBoMSxcbiAgaDIsXG4gIGgzLFxuICBoNCxcbiAgaDUsXG4gIGg2IHtcbiAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmdbMTZdfTtcbiAgICBmb250LXdlaWdodDogJHtmb250V2VpZ2h0LnRpdGxlfTtcbiAgICBsaW5lLWhlaWdodDogJHtsaW5lSGVpZ2h0LnRpdGxlfTtcbiAgfVxuXG4gIGgxIHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbNjRdfTtcbiAgfVxuICBoMiB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzQ0XX07XG4gIH1cbiAgaDMge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVszNF19O1xuICB9XG4gIGg0IHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMjZdfTtcbiAgfVxuICBoNSB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzIyXX07XG4gIH1cbiAgaDYge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsyMF19O1xuICB9XG5cbiAgc21hbGwge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsxNF19O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRXZWlnaHQuYmFzZX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUeXBvZ3JhcGh5ID0gKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3R5cG9ncmFwaHlHbG9iYWxzfSAvPjtcbiJdfQ== */"));
|
|
5
|
+
const {
|
|
6
|
+
fontSize,
|
|
7
|
+
spacing,
|
|
8
|
+
fontWeight,
|
|
9
|
+
lineHeight
|
|
10
|
+
} = theme;
|
|
11
|
+
const typographyGlobals = /*#__PURE__*/css(webFonts.map(_ref => {
|
|
12
|
+
let {
|
|
13
|
+
name,
|
|
14
|
+
style = 'normal',
|
|
15
|
+
weight = 'normal',
|
|
16
|
+
extensions,
|
|
17
|
+
filePath
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(ext => `url("${filePath}.${ext}") format("${ext}")`).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
|
-
|
|
24
|
-
});
|
|
25
|
-
};
|
|
21
|
+
export const Typography = () => /*#__PURE__*/_jsx(Global, {
|
|
22
|
+
styles: typographyGlobals
|
|
23
|
+
});
|
|
@@ -1,28 +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 _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); }
|
|
11
1
|
import { css, Global } from '@emotion/react';
|
|
12
2
|
import * as React from 'react';
|
|
13
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
4
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return /*#__PURE__*/css(
|
|
5
|
+
const scopeVariables = function (vars) {
|
|
6
|
+
let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':root';
|
|
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== */"));
|
|
18
10
|
};
|
|
19
|
-
export
|
|
20
|
-
|
|
11
|
+
export const Variables = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
variables
|
|
14
|
+
} = _ref;
|
|
21
15
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
22
|
-
children: Object.entries(variables).map(
|
|
23
|
-
|
|
24
|
-
key = _ref3[0],
|
|
25
|
-
vars = _ref3[1];
|
|
16
|
+
children: Object.entries(variables).map(_ref2 => {
|
|
17
|
+
let [key, vars] = _ref2;
|
|
26
18
|
return /*#__PURE__*/_jsx(Global, {
|
|
27
19
|
styles: scopeVariables(vars)
|
|
28
20
|
}, key);
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
filePath:
|
|
1
|
+
export const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`;
|
|
2
|
+
export const webFonts = [{
|
|
3
|
+
filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`,
|
|
4
4
|
extensions: ['woff', 'woff2'],
|
|
5
5
|
name: 'Apercu'
|
|
6
6
|
}, {
|
|
7
|
-
filePath:
|
|
7
|
+
filePath: `${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: `${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: `${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: `${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: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`,
|
|
29
29
|
extensions: ['woff', 'woff2'],
|
|
30
30
|
name: 'Suisse'
|
|
31
31
|
}];
|
package/dist/styles/boxShadow.js
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
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; }
|
|
7
1
|
import { css } from '@emotion/react';
|
|
8
|
-
|
|
2
|
+
const shadowsForDepth = {
|
|
9
3
|
1: {
|
|
10
4
|
offsets: [1, 3, 1, 3],
|
|
11
5
|
shades: [0.12, 0.24]
|
|
@@ -27,19 +21,15 @@ var shadowsForDepth = {
|
|
|
27
21
|
shades: [0.3, 0.22]
|
|
28
22
|
}
|
|
29
23
|
};
|
|
30
|
-
export
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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, ")");
|
|
24
|
+
export const createShadow = depth => {
|
|
25
|
+
const {
|
|
26
|
+
offsets: [o1, o2, o3, o4],
|
|
27
|
+
shades: [s1, s2]
|
|
28
|
+
} = shadowsForDepth[depth];
|
|
29
|
+
return ` 0 ${o1}px ${o2}px rgba(0, 0, 0, ${s1}),
|
|
30
|
+
0 ${o3}px ${o4}px rgba(0, 0, 0, ${s2})`;
|
|
41
31
|
};
|
|
42
|
-
export
|
|
43
|
-
|
|
32
|
+
export const boxShadow = function () {
|
|
33
|
+
let depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
44
34
|
return /*#__PURE__*/css("box-shadow:", createShadow(depth), ";;label:boxShadow;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvYm94U2hhZG93LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDWSIsImZpbGUiOiIuLi8uLi9zcmMvc3R5bGVzL2JveFNoYWRvdy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IHR5cGUgU2hhZG93RGVwdGggPSBrZXlvZiB0eXBlb2Ygc2hhZG93c0ZvckRlcHRoO1xuXG5jb25zdCBzaGFkb3dzRm9yRGVwdGggPSB7XG4gIDE6IHtcbiAgICBvZmZzZXRzOiBbMSwgMywgMSwgM10sXG4gICAgc2hhZGVzOiBbMC4xMiwgMC4yNF0sXG4gIH0sXG4gIDI6IHtcbiAgICBvZmZzZXRzOiBbMywgNiwgMywgNl0sXG4gICAgc2hhZGVzOiBbMC4xOSwgMC4yM10sXG4gIH0sXG4gIDM6IHtcbiAgICBvZmZzZXRzOiBbMTAsIDIwLCA2LCA2XSxcbiAgICBzaGFkZXM6IFswLjI1LCAwLjIyXSxcbiAgfSxcbiAgNDoge1xuICAgIG9mZnNldHM6IFsxNCwgMjgsIDEwLCAxMF0sXG4gICAgc2hhZGVzOiBbMC4yNSwgMC4yMl0sXG4gIH0sXG4gIDU6IHtcbiAgICBvZmZzZXRzOiBbMTksIDM4LCAxNSwgMTJdLFxuICAgIHNoYWRlczogWzAuMywgMC4yMl0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgY3JlYXRlU2hhZG93ID0gKGRlcHRoOiBTaGFkb3dEZXB0aCkgPT4ge1xuICBjb25zdCB7XG4gICAgb2Zmc2V0czogW28xLCBvMiwgbzMsIG80XSxcbiAgICBzaGFkZXM6IFtzMSwgczJdLFxuICB9ID0gc2hhZG93c0ZvckRlcHRoW2RlcHRoXTtcbiAgcmV0dXJuIGAgMCAke28xfXB4ICR7bzJ9cHggcmdiYSgwLCAwLCAwLCAke3MxfSksXG4gIDAgJHtvM31weCAke280fXB4IHJnYmEoMCwgMCwgMCwgJHtzMn0pYDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3hTaGFkb3cgPSAoZGVwdGg6IFNoYWRvd0RlcHRoID0gMSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGJveC1zaGFkb3c6ICR7Y3JlYXRlU2hhZG93KGRlcHRoKX07XG4gIGA7XG59O1xuIl19 */"));
|
|
45
35
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { variance } from '@codecademy/variance';
|
|
2
|
-
|
|
2
|
+
const smoothing = {
|
|
3
3
|
pixel: {
|
|
4
4
|
WebkitFontSmoothing: 'antialiased',
|
|
5
5
|
MozOsxFontSmoothing: 'grayscale'
|
|
@@ -9,21 +9,19 @@ var smoothing = {
|
|
|
9
9
|
MozOsxFontSmoothing: 'auto'
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export const 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:
|
|
20
|
-
return smoothing[value];
|
|
21
|
-
}
|
|
19
|
+
transform: value => smoothing[value]
|
|
22
20
|
}
|
|
23
21
|
});
|
|
24
|
-
export
|
|
22
|
+
export const fontSmoothPixel = fontSmoothing({
|
|
25
23
|
fontSmoothing: 'pixel'
|
|
26
24
|
});
|
|
27
|
-
export
|
|
25
|
+
export const fontSmoothSubpixel = fontSmoothing({
|
|
28
26
|
fontSmoothing: 'subpixel'
|
|
29
27
|
});
|
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 const 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 const pxRem = pixelValue => {
|
|
2
|
+
const parsedValue = typeof pixelValue === 'string' ? parseInt(pixelValue, 10) : pixelValue;
|
|
3
|
+
return `${parsedValue / 16}rem`;
|
|
4
4
|
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { mediaQueries } from '../variables/responsive';
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
export var screenSizeLTE = function screenSizeLTE(max, content) {
|
|
3
|
+
export const atViewport = (size, content) => /*#__PURE__*/css(mediaQueries[size], "{", content, ";};label:atViewport;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvcmVzcG9uc2l2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPUSIsImZpbGUiOiIuLi8uLi9zcmMvc3R5bGVzL3Jlc3BvbnNpdmUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1lZGlhUXVlcmllcywgTWVkaWFTaXplIH0gZnJvbSAnLi4vdmFyaWFibGVzL3Jlc3BvbnNpdmUnO1xuXG5leHBvcnQgY29uc3QgYXRWaWV3cG9ydCA9IChcbiAgc2l6ZTogTWVkaWFTaXplLFxuICBjb250ZW50OiBzdHJpbmcgfCBTZXJpYWxpemVkU3R5bGVzXG4pID0+IGNzc2BcbiAgJHttZWRpYVF1ZXJpZXNbc2l6ZV19IHtcbiAgICAke2NvbnRlbnR9XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JlZW5TaXplTFRFID0gKFxuICBtYXg6IHN0cmluZyxcbiAgY29udGVudDogc3RyaW5nIHwgU2VyaWFsaXplZFN0eWxlc1xuKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke21heH0pIHtcbiAgICAgICR7Y29udGVudH1cbiAgICB9XG4gIGA7XG59O1xuXG5leHBvcnQgY29uc3Qgc2NyZWVuU2l6ZUdURSA9IChcbiAgbWluOiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogJHttaW59KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcblxuZXhwb3J0IGNvbnN0IHNjcmVlblNpemVCZXR3ZWVuID0gKFxuICBtaW46IHN0cmluZyxcbiAgbWF4OiBzdHJpbmcsXG4gIGNvbnRlbnQ6IHN0cmluZyB8IFNlcmlhbGl6ZWRTdHlsZXNcbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogJHttaW59KSBhbmQgKG1heC13aWR0aDogJHttYXh9KSB7XG4gICAgICAke2NvbnRlbnR9XG4gICAgfVxuICBgO1xufTtcbiJdfQ== */"));
|
|
4
|
+
export const screenSizeLTE = (max, content) => {
|
|
7
5
|
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= */"));
|
|
8
6
|
};
|
|
9
|
-
export
|
|
7
|
+
export const screenSizeGTE = (min, content) => {
|
|
10
8
|
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= */"));
|
|
11
9
|
};
|
|
12
|
-
export
|
|
10
|
+
export const screenSizeBetween = (min, max, content) => {
|
|
13
11
|
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= */"));
|
|
14
12
|
};
|
|
@@ -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 const 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 var 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 const 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 const transitionConcat = function (arrayOfProperties, transition) {
|
|
3
|
+
let timingFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';
|
|
4
|
+
const transitionString = `${timing[transition]} ${timingFn}`;
|
|
5
|
+
const cssString = `${arrayOfProperties.join(` ${transitionString},`)} ${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 const 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 const coreTheme = createTheme({
|
|
11
11
|
breakpoints: mediaQueries,
|
|
12
|
-
fontSize
|
|
13
|
-
fontFamily
|
|
14
|
-
lineHeight
|
|
15
|
-
fontWeight
|
|
16
|
-
spacing
|
|
17
|
-
elements
|
|
12
|
+
fontSize,
|
|
13
|
+
fontFamily,
|
|
14
|
+
lineHeight,
|
|
15
|
+
fontWeight,
|
|
16
|
+
spacing,
|
|
17
|
+
elements
|
|
18
18
|
}).addColors(corePalette).addColorModes('light', {
|
|
19
19
|
light: {
|
|
20
20
|
text: {
|
|
@@ -102,10 +102,12 @@ export var coreTheme = createTheme({
|
|
|
102
102
|
hover: 'yellow-400'
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
}).addScale('borders',
|
|
106
|
-
|
|
105
|
+
}).addScale('borders', _ref => {
|
|
106
|
+
let {
|
|
107
|
+
colors
|
|
108
|
+
} = _ref;
|
|
107
109
|
return {
|
|
108
|
-
1:
|
|
109
|
-
2:
|
|
110
|
+
1: `1px solid ${colors.secondary}`,
|
|
111
|
+
2: `2px solid ${colors.secondary}`
|
|
110
112
|
};
|
|
111
113
|
}).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 const 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,19 +1,13 @@
|
|
|
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); }
|
|
7
1
|
import { flattenScale } from '@codecademy/variance';
|
|
8
2
|
import { rgba } from 'polished';
|
|
9
3
|
/**
|
|
10
4
|
* Core Colors
|
|
11
5
|
*/
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
const black = '#000000';
|
|
8
|
+
const white = '#ffffff';
|
|
9
|
+
const navy = '#10162F';
|
|
10
|
+
const effects = {
|
|
17
11
|
shadow: {
|
|
18
12
|
black: {
|
|
19
13
|
slight: rgba(black, 0.15),
|
|
@@ -25,7 +19,7 @@ var effects = {
|
|
|
25
19
|
}
|
|
26
20
|
}
|
|
27
21
|
};
|
|
28
|
-
export
|
|
22
|
+
export const coreSwatches = {
|
|
29
23
|
beige: {
|
|
30
24
|
'100': '#FFF0E5'
|
|
31
25
|
},
|
|
@@ -94,7 +88,7 @@ export var coreSwatches = {
|
|
|
94
88
|
'700': rgba(white, 0.8)
|
|
95
89
|
}
|
|
96
90
|
};
|
|
97
|
-
export
|
|
91
|
+
export const trueColors = {
|
|
98
92
|
beige: coreSwatches.beige[100],
|
|
99
93
|
blue: coreSwatches.blue[500],
|
|
100
94
|
green: coreSwatches.green[700],
|
|
@@ -111,16 +105,20 @@ export var trueColors = {
|
|
|
111
105
|
paleRed: coreSwatches.red[100],
|
|
112
106
|
red: coreSwatches.red[500],
|
|
113
107
|
yellow: coreSwatches.yellow[500],
|
|
114
|
-
black
|
|
115
|
-
white
|
|
108
|
+
black,
|
|
109
|
+
white
|
|
110
|
+
};
|
|
111
|
+
export const corePalette = {
|
|
112
|
+
...flattenScale(coreSwatches),
|
|
113
|
+
...flattenScale(effects),
|
|
114
|
+
...trueColors
|
|
116
115
|
};
|
|
117
|
-
export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
|
|
118
116
|
|
|
119
117
|
/**
|
|
120
118
|
* Platform Colors
|
|
121
119
|
*/
|
|
122
120
|
|
|
123
|
-
export
|
|
121
|
+
export const platformSwatches = {
|
|
124
122
|
beige: {
|
|
125
123
|
'0': '#FFFBF8'
|
|
126
124
|
},
|
|
@@ -140,10 +138,13 @@ export var platformSwatches = {
|
|
|
140
138
|
'300': '#B3CCFF'
|
|
141
139
|
}
|
|
142
140
|
};
|
|
143
|
-
|
|
141
|
+
const truePlatformColors = {
|
|
144
142
|
lightBeige: platformSwatches.beige[0],
|
|
145
143
|
gold: platformSwatches.gold[800],
|
|
146
144
|
teal: platformSwatches.teal[500],
|
|
147
145
|
purple: platformSwatches.purple[300]
|
|
148
146
|
};
|
|
149
|
-
export
|
|
147
|
+
export const platformPalette = {
|
|
148
|
+
...flattenScale(platformSwatches),
|
|
149
|
+
...truePlatformColors
|
|
150
|
+
};
|
|
@@ -1,20 +1,18 @@
|
|
|
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); }
|
|
7
1
|
import { flattenScale } from '@codecademy/variance';
|
|
8
2
|
import { corePalette } from './colors';
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
const {
|
|
4
|
+
black,
|
|
5
|
+
white
|
|
6
|
+
} = corePalette;
|
|
7
|
+
|
|
11
8
|
/**
|
|
12
9
|
* @deprecated
|
|
13
10
|
* Using these variables directly is no longer supported.
|
|
14
11
|
*
|
|
15
12
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
16
13
|
*/
|
|
17
|
-
|
|
14
|
+
|
|
15
|
+
export const interactiveColors = {
|
|
18
16
|
dark: corePalette.hyper,
|
|
19
17
|
light: corePalette.yellow
|
|
20
18
|
};
|
|
@@ -26,7 +24,7 @@ export var interactiveColors = {
|
|
|
26
24
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
27
25
|
*/
|
|
28
26
|
|
|
29
|
-
export
|
|
27
|
+
export const editorColors = {
|
|
30
28
|
blue: '#83fff5',
|
|
31
29
|
deepPurple: '#cc7bc2',
|
|
32
30
|
gray: '#939598',
|
|
@@ -44,7 +42,7 @@ export var editorColors = {
|
|
|
44
42
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
45
43
|
*/
|
|
46
44
|
|
|
47
|
-
export
|
|
45
|
+
export const platformColors = {
|
|
48
46
|
mint: {
|
|
49
47
|
'500': '#37c3be',
|
|
50
48
|
'600': '#2c9c98',
|
|
@@ -69,7 +67,7 @@ export var platformColors = {
|
|
|
69
67
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
70
68
|
*/
|
|
71
69
|
|
|
72
|
-
export
|
|
70
|
+
export const swatches = {
|
|
73
71
|
beige: {
|
|
74
72
|
'0': '#FFF0E5'
|
|
75
73
|
},
|
|
@@ -125,7 +123,7 @@ export var swatches = {
|
|
|
125
123
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
126
124
|
*/
|
|
127
125
|
|
|
128
|
-
|
|
126
|
+
const trueColors = {
|
|
129
127
|
beige: swatches.beige[0],
|
|
130
128
|
blue: swatches.blue[500],
|
|
131
129
|
green: swatches.green[700],
|
|
@@ -141,8 +139,8 @@ var trueColors = {
|
|
|
141
139
|
pink: swatches.pink[400],
|
|
142
140
|
red: swatches.red[500],
|
|
143
141
|
yellow: swatches.yellow[500],
|
|
144
|
-
black
|
|
145
|
-
white
|
|
142
|
+
black,
|
|
143
|
+
white
|
|
146
144
|
};
|
|
147
145
|
|
|
148
146
|
/**
|
|
@@ -152,4 +150,7 @@ var trueColors = {
|
|
|
152
150
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
153
151
|
*/
|
|
154
152
|
|
|
155
|
-
export
|
|
153
|
+
export const colors = {
|
|
154
|
+
...flattenScale(swatches),
|
|
155
|
+
...trueColors
|
|
156
|
+
};
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const 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
|
-
|
|
10
|
-
};
|
|
11
|
-
export var mediaQueries = {
|
|
8
|
+
const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
|
|
9
|
+
export const mediaQueries = {
|
|
12
10
|
xs: createMediaQuery('xs', 'min'),
|
|
13
11
|
sm: createMediaQuery('sm', 'min'),
|
|
14
12
|
md: createMediaQuery('md', 'min'),
|
|
15
13
|
lg: createMediaQuery('lg', 'min'),
|
|
16
14
|
xl: createMediaQuery('xl', 'min')
|
|
17
15
|
};
|
|
18
|
-
export
|
|
16
|
+
export const contentWidths = {
|
|
19
17
|
md: breakpoints.lg,
|
|
20
18
|
max: breakpoints.xl
|
|
21
19
|
};
|
package/dist/variables/timing.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const 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 const timing = {
|
|
7
|
+
fast: `${timingValues.fast}ms`,
|
|
8
|
+
medium: `${timingValues.medium}ms`,
|
|
9
|
+
slow: `${timingValues.slow}ms`
|
|
10
10
|
};
|