@codecademy/variance 1.0.0-alpha.f43515.0 → 67.0.0-alpha.7455bb.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 (43) hide show
  1. package/LICENSE +1 -1
  2. package/dist/core.js +37 -66
  3. package/dist/createTheme/createTheme.js +43 -61
  4. package/dist/createTheme/createTheme.test.js +6 -6
  5. package/dist/createTheme/types.js +1 -0
  6. package/dist/scales/createScaleLookup.js +0 -3
  7. package/dist/transforms/transformSize.js +5 -17
  8. package/dist/types/config.js +1 -0
  9. package/dist/types/properties.js +1 -0
  10. package/dist/types/props.js +1 -0
  11. package/dist/types/theme.js +1 -0
  12. package/dist/types/utils.js +1 -0
  13. package/dist/utils/flattenScale.js +7 -8
  14. package/dist/utils/propNames.js +6 -13
  15. package/dist/utils/responsive.js +19 -32
  16. package/dist/utils/serializeTokens.js +6 -12
  17. package/package.json +11 -12
  18. package/CHANGELOG.md +0 -325
  19. package/babel.config.js +0 -5
  20. package/dist/core.js.map +0 -1
  21. package/dist/createTheme/createTheme.js.map +0 -1
  22. package/dist/createTheme/createTheme.test.d.ts +0 -1
  23. package/dist/createTheme/createTheme.test.js.map +0 -1
  24. package/dist/createTheme/index.js.map +0 -1
  25. package/dist/createTheme/types.js.map +0 -1
  26. package/dist/index.js.map +0 -1
  27. package/dist/scales/createScale.js.map +0 -1
  28. package/dist/scales/createScaleLookup.js.map +0 -1
  29. package/dist/transforms/index.js.map +0 -1
  30. package/dist/transforms/transformSize.js.map +0 -1
  31. package/dist/types/config.js.map +0 -1
  32. package/dist/types/properties.js.map +0 -1
  33. package/dist/types/props.js.map +0 -1
  34. package/dist/types/theme.js.map +0 -1
  35. package/dist/types/utils.js.map +0 -1
  36. package/dist/utils/__fixtures__/testConfig.js.map +0 -1
  37. package/dist/utils/flattenScale.js.map +0 -1
  38. package/dist/utils/getStaticProperties.js.map +0 -1
  39. package/dist/utils/propNames.js.map +0 -1
  40. package/dist/utils/responsive.js.map +0 -1
  41. package/dist/utils/serializeTokens.js.map +0 -1
  42. package/jest.config.js +0 -1
  43. package/tsconfig.base.json +0 -3
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 Ryzac, Inc.
3
+ Copyright (c) 2022 Codecademy LLC
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/dist/core.js CHANGED
@@ -1,23 +1,15 @@
1
1
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
2
-
3
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."); }
4
-
5
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); }
6
-
7
4
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
8
-
9
5
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
10
-
11
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; }
12
-
13
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
14
-
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
16
-
17
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
-
19
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
20
-
7
+ 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; }
8
+ 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; }
9
+ 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; }
10
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
11
+ 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); }
12
+ 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); }
21
13
  import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
22
14
  import { createScaleLookup } from './scales/createScaleLookup';
23
15
  import { getStaticCss } from './utils/getStaticProperties';
@@ -28,49 +20,41 @@ export var variance = {
28
20
  createParser: function createParser(config) {
29
21
  var propNames = orderPropNames(config);
30
22
  var breakpoints;
31
-
32
23
  var parser = function parser(props) {
33
24
  var styles = {};
34
25
  var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
35
-
36
26
  if (breakpoints === undefined || breakpoints === null && theme !== null && theme !== void 0 && theme.breakpoints) {
37
27
  // Save the breakpoints if we can
38
28
  breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
39
- } // Loops over all prop names on the configured config to check for configured styles
40
-
29
+ }
41
30
 
31
+ // Loops over all prop names on the configured config to check for configured styles
42
32
  propNames.forEach(function (prop) {
43
33
  var property = config[prop];
44
34
  var value = get(props, prop);
45
-
46
35
  switch (_typeof(value)) {
47
36
  case 'string':
48
37
  case 'number':
49
38
  case 'function':
50
39
  return Object.assign(styles, property.styleFn(value, prop, props));
51
40
  // handle any props configured with the responsive notation
52
-
53
41
  case 'object':
54
42
  if (!breakpoints) {
55
43
  return;
56
- } // If it is an array the order of values is smallest to largest: [_, xs, ...]
57
-
58
-
44
+ }
45
+ // If it is an array the order of values is smallest to largest: [_, xs, ...]
59
46
  if (isMediaArray(value)) {
60
47
  return merge(styles, arrayParser(value, props, property, breakpoints.array));
61
- } // Check to see if value is an object matching the responsive syntax and generate the styles.
62
-
63
-
48
+ }
49
+ // Check to see if value is an object matching the responsive syntax and generate the styles.
64
50
  if (isMediaMap(value)) {
65
51
  return merge(styles, objectParser(value, props, property, breakpoints.map));
66
52
  }
67
-
68
53
  }
69
54
  });
70
55
  return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
71
- }; // return the parser function with the resulting meta information for further composition
72
-
73
-
56
+ };
57
+ // return the parser function with the resulting meta information for further composition
74
58
  return Object.assign(parser, {
75
59
  propNames: propNames,
76
60
  config: config
@@ -80,28 +64,24 @@ export var variance = {
80
64
  // that traverses the properties the function is responsible for.
81
65
  createTransform: function createTransform(prop, config) {
82
66
  var _config$transform = config.transform,
83
- transform = _config$transform === void 0 ? identity : _config$transform,
84
- property = config.property,
85
- _config$properties = config.properties,
86
- properties = _config$properties === void 0 ? [property] : _config$properties,
87
- scale = config.scale;
67
+ transform = _config$transform === void 0 ? identity : _config$transform,
68
+ property = config.property,
69
+ _config$properties = config.properties,
70
+ properties = _config$properties === void 0 ? [property] : _config$properties,
71
+ scale = config.scale;
88
72
  var getScaleValue = createScaleLookup(scale);
89
73
  var alwaysTransform = scale === undefined || isArray(scale);
90
74
  return _objectSpread(_objectSpread({}, config), {}, {
91
75
  prop: prop,
92
76
  styleFn: function styleFn(value, prop, props) {
93
77
  var _scaleValue;
94
-
95
78
  var styles = {};
96
-
97
79
  if (isUndefined(value)) {
98
80
  return styles;
99
81
  }
100
-
101
82
  var useTransform = false;
102
83
  var intermediateValue;
103
84
  var scaleValue;
104
-
105
85
  switch (_typeof(value)) {
106
86
  case 'number':
107
87
  case 'string':
@@ -109,39 +89,32 @@ export var variance = {
109
89
  useTransform = scaleValue !== undefined || alwaysTransform;
110
90
  intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
111
91
  break;
112
-
113
92
  case 'function':
114
93
  if (props.theme) {
115
94
  intermediateValue = value(props.theme);
116
95
  }
117
-
118
96
  break;
119
-
120
97
  default:
121
98
  return styles;
122
- } // for each property look up the scale value from theme if passed and apply any
123
- // final transforms to the value
124
-
99
+ }
125
100
 
101
+ // for each property look up the scale value from theme if passed and apply any
102
+ // final transforms to the value
126
103
  properties.forEach(function (property) {
127
104
  var styleValue = intermediateValue;
128
-
129
105
  if (useTransform && !isUndefined(styleValue)) {
130
106
  styleValue = transform(styleValue, property, props);
131
107
  }
132
-
133
108
  switch (_typeof(styleValue)) {
134
109
  case 'number':
135
110
  case 'string':
136
111
  return styles[property] = styleValue;
137
-
138
112
  case 'object':
139
113
  return Object.assign(styles, styleValue);
140
-
141
114
  default:
142
115
  }
143
- }); // return the resulting styles object
144
-
116
+ });
117
+ // return the resulting styles object
145
118
  return styles;
146
119
  }
147
120
  });
@@ -150,7 +123,6 @@ export var variance = {
150
123
  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
151
124
  parsers[_key] = arguments[_key];
152
125
  }
153
-
154
126
  return this.createParser(parsers.reduce(function (carry, parser) {
155
127
  return _objectSpread(_objectSpread({}, carry), parser.config);
156
128
  }, {}));
@@ -161,13 +133,13 @@ export var variance = {
161
133
  return function (cssProps) {
162
134
  var cache;
163
135
  var allKeys = Object.keys(cssProps);
164
- /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
165
136
 
137
+ /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
166
138
  var selectors = allKeys.filter(function (key) {
167
139
  return !filteredProps.includes(key) && isObject(cssProps[key]);
168
140
  });
169
- /** Static CSS Properties get extracted if they match neither syntax */
170
141
 
142
+ /** Static CSS Properties get extracted if they match neither syntax */
171
143
  var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
172
144
  return function (_ref) {
173
145
  var theme = _ref.theme;
@@ -177,14 +149,13 @@ export var variance = {
177
149
  }));
178
150
  selectors.forEach(function (selector) {
179
151
  var _cssProps$selector;
180
-
181
152
  var selectorConfig = (_cssProps$selector = cssProps[selector]) !== null && _cssProps$selector !== void 0 ? _cssProps$selector : {};
182
153
  css[selector] = _objectSpread(_objectSpread({}, getStaticCss(selectorConfig, filteredProps)), parser(_objectSpread(_objectSpread({}, selectorConfig), {}, {
183
154
  theme: theme
184
155
  })));
185
156
  });
186
- /** Merge the static and generated css and save it to the cache */
187
157
 
158
+ /** Merge the static and generated css and save it to the cache */
188
159
  cache = _objectSpread(_objectSpread({}, staticCss), css);
189
160
  return cache;
190
161
  };
@@ -194,11 +165,11 @@ export var variance = {
194
165
  var css = this.createCss(config);
195
166
  return function (_ref2) {
196
167
  var _ref2$prop = _ref2.prop,
197
- prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
198
- defaultVariant = _ref2.defaultVariant,
199
- _ref2$base = _ref2.base,
200
- base = _ref2$base === void 0 ? {} : _ref2$base,
201
- variants = _ref2.variants;
168
+ prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
169
+ defaultVariant = _ref2.defaultVariant,
170
+ _ref2$base = _ref2.base,
171
+ base = _ref2$base === void 0 ? {} : _ref2$base,
172
+ variants = _ref2.variants;
202
173
  var baseFn = css(base);
203
174
  var variantFns = {};
204
175
  Object.keys(variants).forEach(function (key) {
@@ -208,9 +179,8 @@ export var variance = {
208
179
  });
209
180
  return function (props) {
210
181
  var _variantFns;
211
-
212
182
  var _props$prop = props[prop],
213
- selected = _props$prop === void 0 ? defaultVariant : _props$prop;
183
+ selected = _props$prop === void 0 ? defaultVariant : _props$prop;
214
184
  var styles = {};
215
185
  if (!selected) return styles;
216
186
  return merge(styles, baseFn(props), variantFns === null || variantFns === void 0 ? void 0 : (_variantFns = variantFns[selected]) === null || _variantFns === void 0 ? void 0 : _variantFns.call(variantFns, props));
@@ -237,15 +207,16 @@ export var variance = {
237
207
  };
238
208
  },
239
209
  create: function create(config) {
240
- var transforms = {}; // Create a transform function for each of the props
210
+ var transforms = {};
241
211
 
212
+ // Create a transform function for each of the props
242
213
  for (var prop in config) {
243
214
  if (typeof prop === 'string') {
244
215
  transforms[prop] = this.createTransform(prop, config[prop]);
245
216
  }
246
- } // Create a parser that handles all the props within the config
247
-
217
+ }
248
218
 
219
+ // Create a parser that handles all the props within the config
249
220
  return this.createParser(transforms);
250
221
  }
251
222
  };
@@ -1,70 +1,59 @@
1
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
2
-
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 _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; }
3
3
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
-
5
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
6
-
7
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
8
-
9
- function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
10
-
11
- var id = 0;
12
-
13
- function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
14
-
4
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
5
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
6
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
7
+ 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); }
8
+ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
9
+ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
10
+ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
11
+ function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
12
+ function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
15
13
  import { mapValues, merge } from 'lodash';
16
14
  import { flattenScale } from '../utils/flattenScale';
17
15
  import { serializeTokens } from '../utils/serializeTokens';
18
-
19
- var _theme = _classPrivateFieldLooseKey("theme");
20
-
16
+ var _theme = new WeakMap();
21
17
  var ThemeBuilder = /*#__PURE__*/function () {
22
18
  function ThemeBuilder(baseTheme) {
23
19
  _classCallCheck(this, ThemeBuilder);
24
-
25
- Object.defineProperty(this, _theme, {
20
+ _theme.set(this, {
26
21
  writable: true,
27
22
  value: {}
28
23
  });
29
- _classPrivateFieldLooseBase(this, _theme)[_theme] = baseTheme;
24
+ _classPrivateFieldSet(this, _theme, baseTheme);
30
25
  }
31
26
  /**
32
27
  *
33
28
  * @param key A key of the current theme to transform into CSS Variables and Variable References
34
29
  * @example .createScaleVariables('fontSize')
35
30
  */
36
-
37
-
38
31
  _createClass(ThemeBuilder, [{
39
32
  key: "createScaleVariables",
40
33
  value: function createScaleVariables(key) {
41
34
  var _merge;
42
-
43
- var _serializeTokens = serializeTokens(_classPrivateFieldLooseBase(this, _theme)[_theme][key], key, _classPrivateFieldLooseBase(this, _theme)[_theme]),
44
- variables = _serializeTokens.variables,
45
- tokens = _serializeTokens.tokens;
46
-
47
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
35
+ var _serializeTokens = serializeTokens(_classPrivateFieldGet(this, _theme)[key], key, _classPrivateFieldGet(this, _theme)),
36
+ variables = _serializeTokens.variables,
37
+ tokens = _serializeTokens.tokens;
38
+ _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
48
39
  root: variables
49
- }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldLooseBase(this, _theme)[_theme][key])), _merge));
40
+ }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
50
41
  return this;
51
42
  }
43
+
52
44
  /**
53
45
  *
54
46
  * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
55
47
  * @example .addColors({ navy: 'navy', hyper: 'purple' })
56
48
  */
57
-
58
49
  }, {
59
50
  key: "addColors",
60
51
  value: function addColors(colors) {
61
52
  var flatColors = flattenScale(colors);
62
-
63
- var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldLooseBase(this, _theme)[_theme]),
64
- variables = _serializeTokens2.variables,
65
- tokens = _serializeTokens2.tokens;
66
-
67
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
53
+ var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldGet(this, _theme)),
54
+ variables = _serializeTokens2.variables,
55
+ tokens = _serializeTokens2.tokens;
56
+ _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
68
57
  colors: tokens,
69
58
  _variables: {
70
59
  root: variables
@@ -72,39 +61,34 @@ var ThemeBuilder = /*#__PURE__*/function () {
72
61
  _tokens: {
73
62
  colors: flatColors
74
63
  }
75
- });
64
+ }));
76
65
  return this;
77
66
  }
67
+
78
68
  /**
79
69
  *
80
70
  * @param initialMode A key of the object passed for modes. This sets the default state for the theme and transforms the correct variables.
81
71
  * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys. This must be called after `addColors`
82
72
  * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
83
73
  */
84
-
85
74
  }, {
86
75
  key: "addColorModes",
87
76
  value: function addColorModes(initialMode, modeConfig) {
88
- var _classPrivateFieldLoo,
89
- _this = this;
90
-
77
+ var _classPrivateFieldGet2,
78
+ _this = this;
91
79
  var modes = mapValues(modeConfig, function (mode) {
92
80
  return flattenScale(mode);
93
81
  });
94
-
95
- var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldLoo = _classPrivateFieldLooseBase(this, _theme)[_theme].modes) === null || _classPrivateFieldLoo === void 0 ? void 0 : _classPrivateFieldLoo[initialMode], modes[initialMode]), function (color) {
96
- return _classPrivateFieldLooseBase(_this, _theme)[_theme].colors[color];
97
- }), 'color', _classPrivateFieldLooseBase(this, _theme)[_theme]),
98
- colors = _serializeTokens3.tokens,
99
- variables = _serializeTokens3.variables;
100
-
82
+ var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _theme).modes) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[initialMode], modes[initialMode]), function (color) {
83
+ return _classPrivateFieldGet(_this, _theme).colors[color];
84
+ }), 'color', _classPrivateFieldGet(this, _theme)),
85
+ colors = _serializeTokens3.tokens,
86
+ variables = _serializeTokens3.variables;
101
87
  var getColorValue = function getColorValue(color) {
102
- var _classPrivateFieldLoo2, _classPrivateFieldLoo3;
103
-
104
- return (_classPrivateFieldLoo2 = _classPrivateFieldLooseBase(_this, _theme)[_theme]._tokens) === null || _classPrivateFieldLoo2 === void 0 ? void 0 : (_classPrivateFieldLoo3 = _classPrivateFieldLoo2.colors) === null || _classPrivateFieldLoo3 === void 0 ? void 0 : _classPrivateFieldLoo3[color];
88
+ var _classPrivateFieldGet3, _classPrivateFieldGet4;
89
+ return (_classPrivateFieldGet3 = _classPrivateFieldGet(_this, _theme)._tokens) === null || _classPrivateFieldGet3 === void 0 ? void 0 : (_classPrivateFieldGet4 = _classPrivateFieldGet3.colors) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4[color];
105
90
  };
106
-
107
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
91
+ _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
108
92
  colors: colors,
109
93
  modes: modes,
110
94
  mode: initialMode,
@@ -117,52 +101,50 @@ var ThemeBuilder = /*#__PURE__*/function () {
117
101
  return mapValues(mode, getColorValue);
118
102
  })
119
103
  }
120
- });
104
+ }));
121
105
  return this;
122
106
  }
107
+
123
108
  /**
124
109
  *
125
110
  * @param key A new key of theme
126
111
  * @param createScale A function that accepts the current theme and returns a new object of scale values.
127
112
  * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
128
113
  */
129
-
130
114
  }, {
131
115
  key: "addScale",
132
116
  value: function addScale(key, createScale) {
133
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldLooseBase(this, _theme)[_theme]))));
117
+ _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldGet(this, _theme))))));
134
118
  return this;
135
119
  }
120
+
136
121
  /**
137
122
  *
138
123
  * @param key A current key of theme to be updated with new or computed values
139
124
  * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
140
125
  * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
141
126
  */
142
-
143
127
  }, {
144
128
  key: "updateScale",
145
129
  value: function updateScale(key, updateFn) {
146
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, updateFn(_classPrivateFieldLooseBase(this, _theme)[_theme][key])));
130
+ _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, updateFn(_classPrivateFieldGet(this, _theme)[key]))));
147
131
  return this;
148
132
  }
133
+
149
134
  /**
150
135
  * This finalizes the theme build and returns the final theme and variables to be provided.
151
136
  */
152
-
153
137
  }, {
154
138
  key: "build",
155
139
  value: function build() {
156
- return merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
140
+ return merge({}, _classPrivateFieldGet(this, _theme), {
157
141
  _variables: {},
158
142
  _tokens: {}
159
143
  });
160
144
  }
161
145
  }]);
162
-
163
146
  return ThemeBuilder;
164
147
  }();
165
-
166
148
  export function createTheme(base) {
167
149
  return new ThemeBuilder(base);
168
150
  }
@@ -1,9 +1,9 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2
-
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
4
-
5
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
-
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
7
  import { mapValues } from 'lodash';
8
8
  import { createTheme } from './createTheme';
9
9
  describe('createTheme', function () {
@@ -0,0 +1 @@
1
+ export {};
@@ -5,19 +5,16 @@ export var createScaleLookup = function createScaleLookup(scale) {
5
5
  return get(props, ['theme', scale, val]);
6
6
  };
7
7
  }
8
-
9
8
  if (isArray(scale)) {
10
9
  return function (val) {
11
10
  return val;
12
11
  };
13
12
  }
14
-
15
13
  if (isObject(scale)) {
16
14
  return function (val) {
17
15
  return get(scale, val);
18
16
  };
19
17
  }
20
-
21
18
  return function () {
22
19
  return undefined;
23
20
  };
@@ -1,25 +1,17 @@
1
1
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
-
3
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."); }
4
-
5
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); }
6
-
7
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; }
8
-
9
- function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
10
-
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; } }
11
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
-
13
7
  import { isNumber } from 'lodash';
14
8
  export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
15
9
  if (coordinate === 0) {
16
10
  return coordinate;
17
11
  }
18
-
19
12
  if (coordinate <= 1 && coordinate >= -1) {
20
13
  return "".concat(coordinate * 100, "%");
21
14
  }
22
-
23
15
  return "".concat(coordinate, "px");
24
16
  };
25
17
  var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
@@ -27,21 +19,17 @@ export var transformSize = function transformSize(value) {
27
19
  if (isNumber(value)) {
28
20
  return percentageOrAbsolute(value);
29
21
  }
30
-
31
22
  if (value.includes('calc')) {
32
23
  return value;
33
24
  }
34
-
35
25
  var _ref = valueWithUnit.exec(value) || [],
36
- _ref2 = _slicedToArray(_ref, 3),
37
- match = _ref2[0],
38
- number = _ref2[1],
39
- unit = _ref2[2];
40
-
26
+ _ref2 = _slicedToArray(_ref, 3),
27
+ match = _ref2[0],
28
+ number = _ref2[1],
29
+ unit = _ref2[2];
41
30
  if (match === undefined) {
42
31
  return value;
43
32
  }
44
-
45
33
  var numericValue = parseFloat(number);
46
34
  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
47
35
  };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -1,10 +1,11 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2
-
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
4
-
5
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
-
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
7
  import { isObject } from 'lodash';
8
+
8
9
  /**
9
10
  * Returns an exhaustive list of all possible paths of an object T for keys K.
10
11
  * Possibilities are returned as `k1.k2.k3`.
@@ -14,11 +15,9 @@ export function flattenScale(object, path) {
14
15
  return Object.keys(object).reduce(function (carry, key) {
15
16
  var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
16
17
  var current = object[key];
17
-
18
18
  if (isObject(current)) {
19
19
  return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
20
20
  }
21
-
22
21
  return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
23
22
  }, {});
24
23
  }