@codecademy/gamut-styles 17.1.1-alpha.c4786d.0 → 17.1.1-alpha.d009df.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.
Files changed (46) hide show
  1. package/dist/AssetProvider.d.ts +2 -3
  2. package/dist/AssetProvider.js +15 -18
  3. package/dist/Background.d.ts +1 -1
  4. package/dist/Background.js +28 -45
  5. package/dist/ColorMode.d.ts +229 -231
  6. package/dist/ColorMode.js +70 -77
  7. package/dist/GamutProvider.js +20 -22
  8. package/dist/cache/createEmotionCache.js +11 -26
  9. package/dist/cache/stylisPlugins/focusVisible.js +4 -4
  10. package/dist/globals/Reboot.d.ts +1 -2
  11. package/dist/globals/Reboot.js +4 -6
  12. package/dist/globals/Typography.d.ts +1 -2
  13. package/dist/globals/Typography.js +18 -20
  14. package/dist/globals/Variables.js +12 -21
  15. package/dist/remoteAssets/fonts.d.ts +1 -1
  16. package/dist/remoteAssets/fonts.js +8 -8
  17. package/dist/styles/boxShadow.js +10 -20
  18. package/dist/styles/fontSmoothing.d.ts +1 -1
  19. package/dist/styles/fontSmoothing.js +5 -7
  20. package/dist/styles/noSelect.js +1 -1
  21. package/dist/styles/pxRem.js +3 -3
  22. package/dist/styles/responsive.js +4 -6
  23. package/dist/styles/screenReaderOnly.js +2 -2
  24. package/dist/styles/transitionConcat.js +4 -4
  25. package/dist/themes/admin.d.ts +12 -12
  26. package/dist/themes/admin.js +1 -1
  27. package/dist/themes/core.d.ts +6 -6
  28. package/dist/themes/core.js +14 -12
  29. package/dist/themes/platform.d.ts +14 -14
  30. package/dist/themes/platform.js +1 -1
  31. package/dist/utilities/themed.js +4 -2
  32. package/dist/variables/borderRadii.js +1 -1
  33. package/dist/variables/colors.js +19 -18
  34. package/dist/variables/deprecated-colors.js +17 -16
  35. package/dist/variables/elements.js +1 -1
  36. package/dist/variables/responsive.js +4 -6
  37. package/dist/variables/spacing.js +1 -1
  38. package/dist/variables/timing.js +6 -6
  39. package/dist/variables/typography.js +14 -8
  40. package/dist/variance/config.js +49 -32
  41. package/dist/variance/index.js +1 -2
  42. package/dist/variance/props.d.ts +16 -16
  43. package/dist/variance/props.js +16 -16
  44. package/dist/variance/utils.d.ts +1 -1
  45. package/dist/variance/utils.js +6 -14
  46. package/package.json +3 -3
@@ -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
- var black = '#000000';
14
- var white = '#ffffff';
15
- var navy = '#10162F';
16
- var effects = {
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 var coreSwatches = {
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 var trueColors = {
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: black,
115
- white: 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 var platformSwatches = {
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
- var truePlatformColors = {
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 var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);
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
- var black = corePalette.black,
10
- white = corePalette.white;
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
- export var interactiveColors = {
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 var editorColors = {
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 var platformColors = {
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 var swatches = {
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
- var trueColors = {
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: black,
145
- white: 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 var colors = _objectSpread(_objectSpread({}, flattenScale(swatches)), trueColors);
153
+ export const colors = {
154
+ ...flattenScale(swatches),
155
+ ...trueColors
156
+ };
@@ -1,4 +1,4 @@
1
- export var elements = {
1
+ export const elements = {
2
2
  headerHeight: {
3
3
  base: '4rem',
4
4
  md: '5rem'
@@ -1,21 +1,19 @@
1
- export var breakpoints = {
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
- var createMediaQuery = function createMediaQuery(size, direction) {
9
- return "@media only screen and (".concat(direction, "-width: ").concat(breakpoints[size], ")");
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 var contentWidths = {
16
+ export const contentWidths = {
19
17
  md: breakpoints.lg,
20
18
  max: breakpoints.xl
21
19
  };
@@ -1,5 +1,5 @@
1
1
  import { pxRem } from '../styles/pxRem';
2
- export var spacing = {
2
+ export const spacing = {
3
3
  0: 0,
4
4
  4: pxRem(4),
5
5
  8: pxRem(8),
@@ -1,12 +1,12 @@
1
- export var timingValues = {
1
+ export const timingValues = {
2
2
  fast: 150,
3
3
  medium: 200,
4
4
  base: 300,
5
5
  slow: 350
6
6
  };
7
- export var timing = {
8
- fast: "".concat(timingValues.fast, "ms"),
9
- medium: "".concat(timingValues.medium, "ms"),
10
- base: "".concat(timingValues.base, "ms"),
11
- slow: "".concat(timingValues.slow, "ms")
7
+ export const timing = {
8
+ fast: `${timingValues.fast}ms`,
9
+ medium: `${timingValues.medium}ms`,
10
+ base: `${timingValues.base}ms`,
11
+ slow: `${timingValues.slow}ms`
12
12
  };
@@ -1,15 +1,21 @@
1
1
  import { pxRem } from '../styles/pxRem';
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 = {
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 = {
7
13
  accent: fontAccent,
8
14
  base: fontBase,
9
15
  monospace: fontMonospace,
10
16
  system: fontSystem
11
17
  };
12
- export var fontSize = {
18
+ export const fontSize = {
13
19
  64: pxRem(64),
14
20
  44: pxRem(44),
15
21
  34: pxRem(34),
@@ -20,12 +26,12 @@ export var fontSize = {
20
26
  16: pxRem(16),
21
27
  14: pxRem(14)
22
28
  };
23
- export var lineHeight = {
29
+ export const lineHeight = {
24
30
  base: 1.5,
25
31
  spacedTitle: 1.3,
26
32
  title: 1.2
27
33
  };
28
- export var fontWeight = {
34
+ export const fontWeight = {
29
35
  base: 400,
30
36
  title: 700,
31
37
  700: 700,
@@ -1,11 +1,5 @@
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 { transformSize } from '@codecademy/variance';
8
- export var color = {
2
+ export const color = {
9
3
  color: {
10
4
  property: 'color',
11
5
  scale: 'colors'
@@ -49,7 +43,7 @@ export var color = {
49
43
  scale: 'colors'
50
44
  }
51
45
  };
52
- export var border = {
46
+ export const border = {
53
47
  // Border
54
48
  border: {
55
49
  property: 'border',
@@ -171,7 +165,7 @@ export var border = {
171
165
  property: 'borderBottomStyle'
172
166
  }
173
167
  };
174
- var selfAlignments = {
168
+ const selfAlignments = {
175
169
  justifySelf: {
176
170
  property: 'justifySelf'
177
171
  },
@@ -182,7 +176,7 @@ var selfAlignments = {
182
176
  property: 'gridArea'
183
177
  }
184
178
  };
185
- var alignments = _objectSpread({
179
+ const alignments = {
186
180
  justifyContent: {
187
181
  property: 'justifyContent'
188
182
  },
@@ -194,9 +188,10 @@ var alignments = _objectSpread({
194
188
  },
195
189
  alignContent: {
196
190
  property: 'alignContent'
197
- }
198
- }, selfAlignments);
199
- var flexItems = {
191
+ },
192
+ ...selfAlignments
193
+ };
194
+ const flexItems = {
200
195
  flexBasis: {
201
196
  property: 'flexBasis'
202
197
  },
@@ -210,7 +205,7 @@ var flexItems = {
210
205
  property: 'order'
211
206
  }
212
207
  };
213
- export var flex = _objectSpread(_objectSpread({
208
+ export const flex = {
214
209
  flexDirection: {
215
210
  property: 'flexDirection'
216
211
  },
@@ -219,9 +214,11 @@ export var flex = _objectSpread(_objectSpread({
219
214
  },
220
215
  flex: {
221
216
  property: 'flex'
222
- }
223
- }, alignments), flexItems);
224
- var gridItems = {
217
+ },
218
+ ...alignments,
219
+ ...flexItems
220
+ };
221
+ const gridItems = {
225
222
  gridColumn: {
226
223
  property: 'gridColumn'
227
224
  },
@@ -241,7 +238,7 @@ var gridItems = {
241
238
  property: 'gridRowEnd'
242
239
  }
243
240
  };
244
- export var grid = _objectSpread(_objectSpread({
241
+ export const grid = {
245
242
  gridAutoColumns: {
246
243
  property: 'gridAutoColumns'
247
244
  },
@@ -271,9 +268,11 @@ export var grid = _objectSpread(_objectSpread({
271
268
  columnGap: {
272
269
  property: 'columnGap',
273
270
  scale: 'spacing'
274
- }
275
- }, alignments), gridItems);
276
- export var background = {
271
+ },
272
+ ...alignments,
273
+ ...gridItems
274
+ };
275
+ export const background = {
277
276
  background: {
278
277
  property: 'background'
279
278
  },
@@ -290,7 +289,7 @@ export var background = {
290
289
  property: 'backgroundPosition'
291
290
  }
292
291
  };
293
- export var positioning = {
292
+ export const positioning = {
294
293
  position: {
295
294
  property: 'position'
296
295
  },
@@ -322,7 +321,7 @@ export var positioning = {
322
321
  property: 'opacity'
323
322
  }
324
323
  };
325
- export var shadows = {
324
+ export const shadows = {
326
325
  boxShadow: {
327
326
  property: 'boxShadow'
328
327
  },
@@ -330,7 +329,7 @@ export var shadows = {
330
329
  property: 'textShadow'
331
330
  }
332
331
  };
333
- export var layout = _objectSpread(_objectSpread(_objectSpread({
332
+ export const layout = {
334
333
  display: {
335
334
  property: 'display'
336
335
  },
@@ -374,9 +373,12 @@ export var layout = _objectSpread(_objectSpread(_objectSpread({
374
373
  },
375
374
  verticalAlign: {
376
375
  property: 'verticalAlign'
377
- }
378
- }, selfAlignments), gridItems), flexItems);
379
- export var list = {
376
+ },
377
+ ...selfAlignments,
378
+ ...gridItems,
379
+ ...flexItems
380
+ };
381
+ export const list = {
380
382
  listStyle: {
381
383
  property: 'listStyle'
382
384
  },
@@ -390,7 +392,7 @@ export var list = {
390
392
  property: 'listStyleImage'
391
393
  }
392
394
  };
393
- export var typography = {
395
+ export const typography = {
394
396
  fontFamily: {
395
397
  property: 'fontFamily',
396
398
  scale: 'fontFamily'
@@ -426,7 +428,7 @@ export var typography = {
426
428
  property: 'whiteSpace'
427
429
  }
428
430
  };
429
- export var margin = {
431
+ export const margin = {
430
432
  m: {
431
433
  property: 'margin',
432
434
  scale: 'spacing'
@@ -458,7 +460,7 @@ export var margin = {
458
460
  scale: 'spacing'
459
461
  }
460
462
  };
461
- export var padding = {
463
+ export const padding = {
462
464
  p: {
463
465
  property: 'padding',
464
466
  scale: 'spacing'
@@ -490,5 +492,20 @@ export var padding = {
490
492
  scale: 'spacing'
491
493
  }
492
494
  };
493
- export var space = _objectSpread(_objectSpread({}, margin), padding);
494
- export var all = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), space), shadows), grid), flex), layout), positioning), border), background), color), list);
495
+ export const space = {
496
+ ...margin,
497
+ ...padding
498
+ };
499
+ export const all = {
500
+ ...typography,
501
+ ...space,
502
+ ...shadows,
503
+ ...grid,
504
+ ...flex,
505
+ ...layout,
506
+ ...positioning,
507
+ ...border,
508
+ ...background,
509
+ ...color,
510
+ ...list
511
+ };
@@ -1,4 +1,3 @@
1
- import * as _system from './props';
2
- export { _system as system };
1
+ export * as system from './props';
3
2
  export { css, variant, states } from './props';
4
3
  export * from './utils';
@@ -1,5 +1,5 @@
1
1
  /** General Prop Groups */
2
- export declare const typography: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
2
+ export declare const typography: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
3
3
  readonly fontFamily: {
4
4
  readonly property: "fontFamily";
5
5
  readonly scale: "fontFamily";
@@ -35,7 +35,7 @@ export declare const typography: import("@codecademy/variance/dist/types/config"
35
35
  readonly property: "whiteSpace";
36
36
  };
37
37
  }>>;
38
- export declare const grid: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
38
+ export declare const grid: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
39
39
  readonly gridColumn: {
40
40
  readonly property: "gridColumn";
41
41
  };
@@ -106,7 +106,7 @@ export declare const grid: import("@codecademy/variance/dist/types/config").Pars
106
106
  readonly scale: "spacing";
107
107
  };
108
108
  }>>;
109
- export declare const flex: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
109
+ export declare const flex: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
110
110
  readonly flexBasis: {
111
111
  readonly property: "flexBasis";
112
112
  };
@@ -150,7 +150,7 @@ export declare const flex: import("@codecademy/variance/dist/types/config").Pars
150
150
  readonly property: "flex";
151
151
  };
152
152
  }>>;
153
- export declare const layout: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
153
+ export declare const layout: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
154
154
  readonly flexBasis: {
155
155
  readonly property: "flexBasis";
156
156
  };
@@ -235,7 +235,7 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
235
235
  readonly property: "verticalAlign";
236
236
  };
237
237
  }>>;
238
- export declare const positioning: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
238
+ export declare const positioning: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
239
239
  readonly position: {
240
240
  readonly property: "position";
241
241
  };
@@ -267,7 +267,7 @@ export declare const positioning: import("@codecademy/variance/dist/types/config
267
267
  readonly property: "opacity";
268
268
  };
269
269
  }>>;
270
- export declare const background: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
270
+ export declare const background: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
271
271
  readonly background: {
272
272
  readonly property: "background";
273
273
  };
@@ -284,7 +284,7 @@ export declare const background: import("@codecademy/variance/dist/types/config"
284
284
  readonly property: "backgroundPosition";
285
285
  };
286
286
  }>>;
287
- export declare const color: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
287
+ export declare const color: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
288
288
  readonly color: {
289
289
  readonly property: "color";
290
290
  readonly scale: "colors";
@@ -328,7 +328,7 @@ export declare const color: import("@codecademy/variance/dist/types/config").Par
328
328
  readonly scale: "colors";
329
329
  };
330
330
  }>>;
331
- export declare const shadow: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
331
+ export declare const shadow: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
332
332
  readonly boxShadow: {
333
333
  readonly property: "boxShadow";
334
334
  };
@@ -336,7 +336,7 @@ export declare const shadow: import("@codecademy/variance/dist/types/config").Pa
336
336
  readonly property: "textShadow";
337
337
  };
338
338
  }>>;
339
- export declare const space: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
339
+ export declare const space: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
340
340
  readonly p: {
341
341
  readonly property: "padding";
342
342
  readonly scale: "spacing";
@@ -398,7 +398,7 @@ export declare const space: import("@codecademy/variance/dist/types/config").Par
398
398
  readonly scale: "spacing";
399
399
  };
400
400
  }>>;
401
- export declare const border: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
401
+ export declare const border: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
402
402
  readonly border: {
403
403
  readonly property: "border";
404
404
  readonly scale: "borders";
@@ -516,7 +516,7 @@ export declare const border: import("@codecademy/variance/dist/types/config").Pa
516
516
  readonly property: "borderBottomStyle";
517
517
  };
518
518
  }>>;
519
- export declare const list: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
519
+ export declare const list: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
520
520
  readonly listStyle: {
521
521
  readonly property: "listStyle";
522
522
  };
@@ -531,7 +531,7 @@ export declare const list: import("@codecademy/variance/dist/types/config").Pars
531
531
  };
532
532
  }>>;
533
533
  /** Sub Groups */
534
- export declare const padding: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
534
+ export declare const padding: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
535
535
  readonly p: {
536
536
  readonly property: "padding";
537
537
  readonly scale: "spacing";
@@ -563,7 +563,7 @@ export declare const padding: import("@codecademy/variance/dist/types/config").P
563
563
  readonly scale: "spacing";
564
564
  };
565
565
  }>>;
566
- export declare const margin: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
566
+ export declare const margin: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
567
567
  readonly m: {
568
568
  readonly property: "margin";
569
569
  readonly scale: "spacing";
@@ -596,7 +596,7 @@ export declare const margin: import("@codecademy/variance/dist/types/config").Pa
596
596
  };
597
597
  }>>;
598
598
  /** CSS */
599
- export declare const css: import("@codecademy/variance/dist/types/config").CSS<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
599
+ export declare const css: import("packages/variance/dist/types/config").CSS<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
600
600
  listStyle: {
601
601
  readonly property: "listStyle";
602
602
  };
@@ -1047,7 +1047,7 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
1047
1047
  readonly property: "whiteSpace";
1048
1048
  };
1049
1049
  }>>>;
1050
- export declare const variant: import("@codecademy/variance/dist/types/config").Variant<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
1050
+ export declare const variant: import("packages/variance/dist/types/config").Variant<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
1051
1051
  listStyle: {
1052
1052
  readonly property: "listStyle";
1053
1053
  };
@@ -1498,7 +1498,7 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
1498
1498
  readonly property: "whiteSpace";
1499
1499
  };
1500
1500
  }>>>;
1501
- export declare const states: import("@codecademy/variance/dist/types/config").States<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
1501
+ export declare const states: import("packages/variance/dist/types/config").States<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
1502
1502
  listStyle: {
1503
1503
  readonly property: "listStyle";
1504
1504
  };
@@ -2,23 +2,23 @@ import { variance } from '@codecademy/variance';
2
2
  import * as PROPERTIES from './config';
3
3
 
4
4
  /** General Prop Groups */
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
- export var list = variance.create(PROPERTIES.list);
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);
15
+ export const list = variance.create(PROPERTIES.list);
16
16
 
17
17
  /** Sub Groups */
18
- export var padding = variance.create(PROPERTIES.padding);
19
- export var margin = variance.create(PROPERTIES.margin);
18
+ export const padding = variance.create(PROPERTIES.padding);
19
+ export const margin = variance.create(PROPERTIES.margin);
20
20
 
21
21
  /** CSS */
22
- export var css = variance.createCss(PROPERTIES.all);
23
- export var variant = variance.createVariant(PROPERTIES.all);
24
- export var states = variance.createStates(PROPERTIES.all);
22
+ export const css = variance.createCss(PROPERTIES.all);
23
+ export const variant = variance.createVariant(PROPERTIES.all);
24
+ export const states = variance.createStates(PROPERTIES.all);