@codecademy/gamut-styles 16.1.4-alpha.cd6532.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
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
import { pxRem } from '../styles/pxRem';
|
|
2
|
-
export
|
|
3
|
-
"Segoe UI"
|
|
4
|
-
"
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
sans-serif`;
|
|
8
|
-
export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
|
|
9
|
-
monospace`;
|
|
10
|
-
export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
|
|
11
|
-
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
|
|
12
|
-
export const fontFamily = {
|
|
2
|
+
export var fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
|
|
3
|
+
export var fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
4
|
+
export var fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
|
|
5
|
+
export var fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
|
|
6
|
+
export var fontFamily = {
|
|
13
7
|
accent: fontAccent,
|
|
14
8
|
base: fontBase,
|
|
15
9
|
monospace: fontMonospace,
|
|
16
10
|
system: fontSystem
|
|
17
11
|
};
|
|
18
|
-
export
|
|
12
|
+
export var fontSize = {
|
|
19
13
|
64: pxRem(64),
|
|
20
14
|
44: pxRem(44),
|
|
21
15
|
34: pxRem(34),
|
|
@@ -26,12 +20,12 @@ export const fontSize = {
|
|
|
26
20
|
16: pxRem(16),
|
|
27
21
|
14: pxRem(14)
|
|
28
22
|
};
|
|
29
|
-
export
|
|
23
|
+
export var lineHeight = {
|
|
30
24
|
base: 1.5,
|
|
31
25
|
spacedTitle: 1.3,
|
|
32
26
|
title: 1.2
|
|
33
27
|
};
|
|
34
|
-
export
|
|
28
|
+
export var fontWeight = {
|
|
35
29
|
base: 400,
|
|
36
30
|
title: 700,
|
|
37
31
|
700: 700,
|
package/dist/variance/config.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
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 { transformSize } from '@codecademy/variance';
|
|
2
|
-
export
|
|
8
|
+
export var color = {
|
|
3
9
|
color: {
|
|
4
10
|
property: 'color',
|
|
5
11
|
scale: 'colors'
|
|
@@ -43,7 +49,7 @@ export const color = {
|
|
|
43
49
|
scale: 'colors'
|
|
44
50
|
}
|
|
45
51
|
};
|
|
46
|
-
export
|
|
52
|
+
export var border = {
|
|
47
53
|
// Border
|
|
48
54
|
border: {
|
|
49
55
|
property: 'border',
|
|
@@ -156,7 +162,7 @@ export const border = {
|
|
|
156
162
|
property: 'borderBottomStyle'
|
|
157
163
|
}
|
|
158
164
|
};
|
|
159
|
-
|
|
165
|
+
var selfAlignments = {
|
|
160
166
|
justifySelf: {
|
|
161
167
|
property: 'justifySelf'
|
|
162
168
|
},
|
|
@@ -167,7 +173,7 @@ const selfAlignments = {
|
|
|
167
173
|
property: 'gridArea'
|
|
168
174
|
}
|
|
169
175
|
};
|
|
170
|
-
|
|
176
|
+
var alignments = _objectSpread({
|
|
171
177
|
justifyContent: {
|
|
172
178
|
property: 'justifyContent'
|
|
173
179
|
},
|
|
@@ -179,10 +185,9 @@ const alignments = {
|
|
|
179
185
|
},
|
|
180
186
|
alignContent: {
|
|
181
187
|
property: 'alignContent'
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
const flexItems = {
|
|
188
|
+
}
|
|
189
|
+
}, selfAlignments);
|
|
190
|
+
var flexItems = {
|
|
186
191
|
flexBasis: {
|
|
187
192
|
property: 'flexBasis'
|
|
188
193
|
},
|
|
@@ -196,7 +201,7 @@ const flexItems = {
|
|
|
196
201
|
property: 'order'
|
|
197
202
|
}
|
|
198
203
|
};
|
|
199
|
-
export
|
|
204
|
+
export var flex = _objectSpread(_objectSpread({
|
|
200
205
|
flexDirection: {
|
|
201
206
|
property: 'flexDirection'
|
|
202
207
|
},
|
|
@@ -205,11 +210,9 @@ export const flex = {
|
|
|
205
210
|
},
|
|
206
211
|
flex: {
|
|
207
212
|
property: 'flex'
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
};
|
|
212
|
-
const gridItems = {
|
|
213
|
+
}
|
|
214
|
+
}, alignments), flexItems);
|
|
215
|
+
var gridItems = {
|
|
213
216
|
gridColumn: {
|
|
214
217
|
property: 'gridColumn'
|
|
215
218
|
},
|
|
@@ -229,7 +232,7 @@ const gridItems = {
|
|
|
229
232
|
property: 'gridRowEnd'
|
|
230
233
|
}
|
|
231
234
|
};
|
|
232
|
-
export
|
|
235
|
+
export var grid = _objectSpread(_objectSpread({
|
|
233
236
|
gridAutoColumns: {
|
|
234
237
|
property: 'gridAutoColumns'
|
|
235
238
|
},
|
|
@@ -259,11 +262,9 @@ export const grid = {
|
|
|
259
262
|
columnGap: {
|
|
260
263
|
property: 'columnGap',
|
|
261
264
|
scale: 'spacing'
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
};
|
|
266
|
-
export const background = {
|
|
265
|
+
}
|
|
266
|
+
}, alignments), gridItems);
|
|
267
|
+
export var background = {
|
|
267
268
|
background: {
|
|
268
269
|
property: 'background'
|
|
269
270
|
},
|
|
@@ -280,7 +281,7 @@ export const background = {
|
|
|
280
281
|
property: 'backgroundPosition'
|
|
281
282
|
}
|
|
282
283
|
};
|
|
283
|
-
export
|
|
284
|
+
export var positioning = {
|
|
284
285
|
position: {
|
|
285
286
|
property: 'position'
|
|
286
287
|
},
|
|
@@ -312,7 +313,7 @@ export const positioning = {
|
|
|
312
313
|
property: 'opacity'
|
|
313
314
|
}
|
|
314
315
|
};
|
|
315
|
-
export
|
|
316
|
+
export var shadows = {
|
|
316
317
|
boxShadow: {
|
|
317
318
|
property: 'boxShadow'
|
|
318
319
|
},
|
|
@@ -320,7 +321,7 @@ export const shadows = {
|
|
|
320
321
|
property: 'textShadow'
|
|
321
322
|
}
|
|
322
323
|
};
|
|
323
|
-
export
|
|
324
|
+
export var layout = _objectSpread(_objectSpread(_objectSpread({
|
|
324
325
|
display: {
|
|
325
326
|
property: 'display'
|
|
326
327
|
},
|
|
@@ -364,12 +365,9 @@ export const layout = {
|
|
|
364
365
|
},
|
|
365
366
|
verticalAlign: {
|
|
366
367
|
property: 'verticalAlign'
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
...flexItems
|
|
371
|
-
};
|
|
372
|
-
export const typography = {
|
|
368
|
+
}
|
|
369
|
+
}, selfAlignments), gridItems), flexItems);
|
|
370
|
+
export var typography = {
|
|
373
371
|
fontFamily: {
|
|
374
372
|
property: 'fontFamily',
|
|
375
373
|
scale: 'fontFamily'
|
|
@@ -405,7 +403,7 @@ export const typography = {
|
|
|
405
403
|
property: 'whiteSpace'
|
|
406
404
|
}
|
|
407
405
|
};
|
|
408
|
-
export
|
|
406
|
+
export var margin = {
|
|
409
407
|
m: {
|
|
410
408
|
property: 'margin',
|
|
411
409
|
scale: 'spacing'
|
|
@@ -437,7 +435,7 @@ export const margin = {
|
|
|
437
435
|
scale: 'spacing'
|
|
438
436
|
}
|
|
439
437
|
};
|
|
440
|
-
export
|
|
438
|
+
export var padding = {
|
|
441
439
|
p: {
|
|
442
440
|
property: 'padding',
|
|
443
441
|
scale: 'spacing'
|
|
@@ -469,19 +467,5 @@ export const padding = {
|
|
|
469
467
|
scale: 'spacing'
|
|
470
468
|
}
|
|
471
469
|
};
|
|
472
|
-
export
|
|
473
|
-
|
|
474
|
-
...padding
|
|
475
|
-
};
|
|
476
|
-
export const all = {
|
|
477
|
-
...typography,
|
|
478
|
-
...space,
|
|
479
|
-
...shadows,
|
|
480
|
-
...grid,
|
|
481
|
-
...flex,
|
|
482
|
-
...layout,
|
|
483
|
-
...positioning,
|
|
484
|
-
...border,
|
|
485
|
-
...background,
|
|
486
|
-
...color
|
|
487
|
-
};
|
|
470
|
+
export var space = _objectSpread(_objectSpread({}, margin), padding);
|
|
471
|
+
export var all = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), space), shadows), grid), flex), layout), positioning), border), background), color);
|
package/dist/variance/index.js
CHANGED
package/dist/variance/props.js
CHANGED
|
@@ -2,22 +2,22 @@ import { variance } from '@codecademy/variance';
|
|
|
2
2
|
import * as PROPERTIES from './config';
|
|
3
3
|
|
|
4
4
|
/** General Prop Groups */
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
export
|
|
10
|
-
export
|
|
11
|
-
export
|
|
12
|
-
export
|
|
13
|
-
export
|
|
14
|
-
export
|
|
5
|
+
export var typography = variance.create(PROPERTIES.typography);
|
|
6
|
+
export var grid = variance.create(PROPERTIES.grid);
|
|
7
|
+
export var flex = variance.create(PROPERTIES.flex);
|
|
8
|
+
export var layout = variance.create(PROPERTIES.layout);
|
|
9
|
+
export var positioning = variance.create(PROPERTIES.positioning);
|
|
10
|
+
export var background = variance.create(PROPERTIES.background);
|
|
11
|
+
export var color = variance.create(PROPERTIES.color);
|
|
12
|
+
export var shadow = variance.create(PROPERTIES.shadows);
|
|
13
|
+
export var space = variance.create(PROPERTIES.space);
|
|
14
|
+
export var border = variance.create(PROPERTIES.border);
|
|
15
15
|
|
|
16
16
|
/** Sub Groups */
|
|
17
|
-
export
|
|
18
|
-
export
|
|
17
|
+
export var padding = variance.create(PROPERTIES.padding);
|
|
18
|
+
export var margin = variance.create(PROPERTIES.margin);
|
|
19
19
|
|
|
20
20
|
/** CSS */
|
|
21
|
-
export
|
|
22
|
-
export
|
|
23
|
-
export
|
|
21
|
+
export var css = variance.createCss(PROPERTIES.all);
|
|
22
|
+
export var variant = variance.createVariant(PROPERTIES.all);
|
|
23
|
+
export var states = variance.createStates(PROPERTIES.all);
|
package/dist/variance/utils.js
CHANGED
|
@@ -1,18 +1,26 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
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; }
|
|
1
7
|
import isPropValid from '@emotion/is-prop-valid';
|
|
2
8
|
import { all as allProps } from './config';
|
|
3
|
-
|
|
9
|
+
var allPropnames = ['mode', 'variant'].concat(_toConsumableArray(Object.keys(allProps)));
|
|
4
10
|
|
|
5
11
|
/**
|
|
6
12
|
* Emotion will not attempt to forward all system props - so this pre filters all possible exceptions to search agains
|
|
7
13
|
* props like `color` and `width`.
|
|
8
14
|
*/
|
|
9
|
-
|
|
15
|
+
var validPropnames = allPropnames.filter(isPropValid);
|
|
10
16
|
export function createStyledOptions() {
|
|
11
|
-
|
|
17
|
+
var additional = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
12
18
|
// Cache possible valid prop names to prevent searching a larger list.
|
|
13
|
-
|
|
19
|
+
var additionalExclusions = additional.filter(isPropValid);
|
|
14
20
|
return {
|
|
15
|
-
shouldForwardProp:
|
|
21
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
22
|
+
return isPropValid(prop) && !validPropnames.includes(prop) && !additionalExclusions.includes(prop);
|
|
23
|
+
}
|
|
16
24
|
};
|
|
17
25
|
}
|
|
18
26
|
|
|
@@ -32,4 +40,4 @@ export function createStyledOptions() {
|
|
|
32
40
|
* styled(Box)()
|
|
33
41
|
*
|
|
34
42
|
*/
|
|
35
|
-
export
|
|
43
|
+
export var styledOptions = Object.assign(createStyledOptions, createStyledOptions());
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut-styles",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "16.1.4
|
|
4
|
+
"version": "16.1.4",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.21.2
|
|
7
|
+
"@codecademy/variance": "0.21.2",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
9
|
"polished": "^4.1.2"
|
|
10
10
|
},
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "nx build @codecademy/gamut-styles"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "211364c302abe4d75af11ecabd79c9507284abdc"
|
|
38
38
|
}
|