@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.
@@ -1,21 +1,15 @@
1
1
  import { pxRem } from '../styles/pxRem';
2
- export const fontAccent = `"Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
3
- "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
4
- "Helvetica Neue", sans-serif`;
5
- export const fontBase = `"Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
6
- "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
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 const fontSize = {
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 const lineHeight = {
23
+ export var lineHeight = {
30
24
  base: 1.5,
31
25
  spacedTitle: 1.3,
32
26
  title: 1.2
33
27
  };
34
- export const fontWeight = {
28
+ export var fontWeight = {
35
29
  base: 400,
36
30
  title: 700,
37
31
  700: 700,
@@ -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 const color = {
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 const border = {
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
- const selfAlignments = {
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
- const alignments = {
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
- ...selfAlignments
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 const flex = {
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
- ...alignments,
210
- ...flexItems
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 const grid = {
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
- ...alignments,
264
- ...gridItems
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 const positioning = {
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 const shadows = {
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 const layout = {
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
- ...selfAlignments,
369
- ...gridItems,
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 const margin = {
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 const padding = {
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 const space = {
473
- ...margin,
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);
@@ -1,3 +1,4 @@
1
- export * as system from './props';
1
+ import * as _system from './props';
2
+ export { _system as system };
2
3
  export { css, variant, states } from './props';
3
4
  export * from './utils';
@@ -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 const typography = variance.create(PROPERTIES.typography);
6
- export const grid = variance.create(PROPERTIES.grid);
7
- export const flex = variance.create(PROPERTIES.flex);
8
- export const layout = variance.create(PROPERTIES.layout);
9
- export const positioning = variance.create(PROPERTIES.positioning);
10
- export const background = variance.create(PROPERTIES.background);
11
- export const color = variance.create(PROPERTIES.color);
12
- export const shadow = variance.create(PROPERTIES.shadows);
13
- export const space = variance.create(PROPERTIES.space);
14
- export const border = variance.create(PROPERTIES.border);
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 const padding = variance.create(PROPERTIES.padding);
18
- export const margin = variance.create(PROPERTIES.margin);
17
+ export var padding = variance.create(PROPERTIES.padding);
18
+ export var margin = variance.create(PROPERTIES.margin);
19
19
 
20
20
  /** CSS */
21
- export const css = variance.createCss(PROPERTIES.all);
22
- export const variant = variance.createVariant(PROPERTIES.all);
23
- export const states = variance.createStates(PROPERTIES.all);
21
+ export var css = variance.createCss(PROPERTIES.all);
22
+ export var variant = variance.createVariant(PROPERTIES.all);
23
+ export var states = variance.createStates(PROPERTIES.all);
@@ -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
- const allPropnames = ['mode', 'variant', ...Object.keys(allProps)];
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
- const validPropnames = allPropnames.filter(isPropValid);
15
+ var validPropnames = allPropnames.filter(isPropValid);
10
16
  export function createStyledOptions() {
11
- let additional = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
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
- const additionalExclusions = additional.filter(isPropValid);
19
+ var additionalExclusions = additional.filter(isPropValid);
14
20
  return {
15
- shouldForwardProp: prop => isPropValid(prop) && !validPropnames.includes(prop) && !additionalExclusions.includes(prop)
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 const styledOptions = Object.assign(createStyledOptions, createStyledOptions());
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-alpha.cd6532.0",
4
+ "version": "16.1.4",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.21.2-alpha.cd6532.0",
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": "ed4335a5a592f5210d2ff84f14dc50c897c2a355"
37
+ "gitHead": "211364c302abe4d75af11ecabd79c9507284abdc"
38
38
  }