@codecademy/variance 1.0.0-alpha.f6cb5a.0 → 1.0.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 (65) hide show
  1. package/dist/core.d.ts +5 -5
  2. package/dist/core.js +152 -163
  3. package/dist/createTheme/createTheme.d.ts +7 -0
  4. package/dist/createTheme/createTheme.js +118 -150
  5. package/dist/createTheme/createTheme.test.js +50 -62
  6. package/dist/createTheme/types.d.ts +7 -7
  7. package/dist/createTheme/types.js +1 -0
  8. package/dist/getPropertyMode/getPropertyMode.d.ts +2 -0
  9. package/dist/getPropertyMode/getPropertyMode.js +3 -0
  10. package/dist/getPropertyMode/getPropertyMode.test.js +15 -0
  11. package/dist/getPropertyMode/index.d.ts +1 -0
  12. package/dist/getPropertyMode/index.js +1 -0
  13. package/dist/index.d.ts +1 -0
  14. package/dist/index.js +2 -1
  15. package/dist/scales/createScale.js +1 -3
  16. package/dist/scales/createScaleLookup.d.ts +2 -2
  17. package/dist/scales/createScaleLookup.js +9 -17
  18. package/dist/transforms/transformSize.js +9 -31
  19. package/dist/types/config.d.ts +18 -14
  20. package/dist/types/config.js +1 -0
  21. package/dist/types/properties.d.ts +14 -5
  22. package/dist/types/properties.js +1 -0
  23. package/dist/types/props.d.ts +27 -8
  24. package/dist/types/props.js +1 -0
  25. package/dist/types/theme.d.ts +6 -0
  26. package/dist/types/theme.js +1 -0
  27. package/dist/types/utils.d.ts +3 -3
  28. package/dist/types/utils.js +1 -0
  29. package/dist/utils/flattenScale.d.ts +5 -5
  30. package/dist/utils/flattenScale.js +24 -13
  31. package/dist/utils/getStaticProperties.js +3 -6
  32. package/dist/utils/propNames.js +42 -39
  33. package/dist/utils/responsive.d.ts +5 -5
  34. package/dist/utils/responsive.js +60 -69
  35. package/dist/utils/serializeTokens.d.ts +2 -2
  36. package/dist/utils/serializeTokens.js +34 -26
  37. package/package.json +19 -31
  38. package/CHANGELOG.md +0 -325
  39. package/LICENSE +0 -21
  40. package/babel.config.js +0 -5
  41. package/dist/core.js.map +0 -1
  42. package/dist/createTheme/createTheme.js.map +0 -1
  43. package/dist/createTheme/createTheme.test.d.ts +0 -1
  44. package/dist/createTheme/createTheme.test.js.map +0 -1
  45. package/dist/createTheme/index.js.map +0 -1
  46. package/dist/createTheme/types.js.map +0 -1
  47. package/dist/index.js.map +0 -1
  48. package/dist/scales/createScale.js.map +0 -1
  49. package/dist/scales/createScaleLookup.js.map +0 -1
  50. package/dist/transforms/index.js.map +0 -1
  51. package/dist/transforms/transformSize.js.map +0 -1
  52. package/dist/types/config.js.map +0 -1
  53. package/dist/types/properties.js.map +0 -1
  54. package/dist/types/props.js.map +0 -1
  55. package/dist/types/theme.js.map +0 -1
  56. package/dist/types/utils.js.map +0 -1
  57. package/dist/utils/__fixtures__/testConfig.js +0 -153
  58. package/dist/utils/__fixtures__/testConfig.js.map +0 -1
  59. package/dist/utils/flattenScale.js.map +0 -1
  60. package/dist/utils/getStaticProperties.js.map +0 -1
  61. package/dist/utils/propNames.js.map +0 -1
  62. package/dist/utils/responsive.js.map +0 -1
  63. package/dist/utils/serializeTokens.js.map +0 -1
  64. package/jest.config.js +0 -1
  65. package/tsconfig.base.json +0 -3
@@ -1,168 +1,136 @@
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
-
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
-
15
- import { mapValues, merge } from 'lodash';
1
+ import mapValues from 'lodash/mapValues';
2
+ import merge from 'lodash/merge';
16
3
  import { flattenScale } from '../utils/flattenScale';
17
4
  import { serializeTokens } from '../utils/serializeTokens';
18
-
19
- var _theme = _classPrivateFieldLooseKey("theme");
20
-
21
- var ThemeBuilder = /*#__PURE__*/function () {
22
- function ThemeBuilder(baseTheme) {
23
- _classCallCheck(this, ThemeBuilder);
24
-
25
- Object.defineProperty(this, _theme, {
26
- writable: true,
27
- value: {}
28
- });
29
- _classPrivateFieldLooseBase(this, _theme)[_theme] = baseTheme;
5
+ class ThemeBuilder {
6
+ #theme = {};
7
+ constructor(baseTheme) {
8
+ this.#theme = baseTheme;
30
9
  }
31
10
  /**
32
11
  *
33
12
  * @param key A key of the current theme to transform into CSS Variables and Variable References
34
13
  * @example .createScaleVariables('fontSize')
35
14
  */
36
-
37
-
38
- _createClass(ThemeBuilder, [{
39
- key: "createScaleVariables",
40
- value: function createScaleVariables(key) {
41
- 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", {
15
+ createScaleVariables(key) {
16
+ const {
17
+ variables,
18
+ tokens
19
+ } = serializeTokens(this.#theme[key], key, this.#theme);
20
+ this.#theme = merge({}, this.#theme, {
21
+ [key]: tokens,
22
+ _variables: {
48
23
  root: variables
49
- }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldLooseBase(this, _theme)[_theme][key])), _merge));
50
- return this;
51
- }
52
- /**
53
- *
54
- * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
55
- * @example .addColors({ navy: 'navy', hyper: 'purple' })
56
- */
57
-
58
- }, {
59
- key: "addColors",
60
- value: function addColors(colors) {
61
- 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], {
68
- colors: tokens,
69
- _variables: {
70
- root: variables
71
- },
72
- _tokens: {
73
- colors: flatColors
74
- }
75
- });
76
- return this;
77
- }
78
- /**
79
- *
80
- * @param initialMode A key of the object passed for modes. This sets the default state for the theme and transforms the correct variables.
81
- * @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
- * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
83
- */
84
-
85
- }, {
86
- key: "addColorModes",
87
- value: function addColorModes(initialMode, modeConfig) {
88
- var _classPrivateFieldLoo,
89
- _this = this;
90
-
91
- var modes = mapValues(modeConfig, function (mode) {
92
- return flattenScale(mode);
93
- });
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
-
101
- 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];
105
- };
24
+ },
25
+ _tokens: {
26
+ [key]: this.#theme[key]
27
+ }
28
+ });
29
+ return this;
30
+ }
106
31
 
107
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
108
- colors: colors,
109
- modes: modes,
110
- mode: initialMode,
111
- _getColorValue: getColorValue,
112
- _variables: {
113
- mode: variables
114
- },
115
- _tokens: {
116
- modes: mapValues(modes, function (mode) {
117
- return mapValues(mode, getColorValue);
118
- })
119
- }
120
- });
121
- return this;
122
- }
123
- /**
124
- *
125
- * @param key A new key of theme
126
- * @param createScale A function that accepts the current theme and returns a new object of scale values.
127
- * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
128
- */
32
+ /**
33
+ *
34
+ * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
35
+ * @example .addColors({ navy: 'navy', hyper: 'purple' })
36
+ */
37
+ addColors(colors) {
38
+ const flatColors = flattenScale(colors);
39
+ const {
40
+ variables,
41
+ tokens
42
+ } = serializeTokens(
43
+ // TS 5.9+ no longer resolves LiteralPaths<> as assignable to SerializedTokensInput; flattened scales are plain token maps at runtime.
44
+ flatColors, 'color', this.#theme);
45
+ this.#theme = merge({}, this.#theme, {
46
+ colors: tokens,
47
+ _variables: {
48
+ root: variables
49
+ },
50
+ _tokens: {
51
+ colors: flatColors
52
+ }
53
+ });
54
+ return this;
55
+ }
129
56
 
130
- }, {
131
- key: "addScale",
132
- value: function addScale(key, createScale) {
133
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldLooseBase(this, _theme)[_theme]))));
134
- return this;
135
- }
136
- /**
137
- *
138
- * @param key A current key of theme to be updated with new or computed values
139
- * @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
- * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
141
- */
57
+ /**
58
+ *
59
+ * @param initialMode A key of the object passed for modes. This sets the default state for the theme and transforms the correct variables.
60
+ * @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`
61
+ * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
62
+ */
63
+ addColorModes(initialMode, modeConfig) {
64
+ const modes = mapValues(modeConfig, mode => flattenScale(mode));
65
+ const {
66
+ tokens: colors,
67
+ variables
68
+ } = serializeTokens(mapValues(merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), color => this.#theme.colors[color]), 'color', this.#theme);
69
+ const getColorValue = color => this.#theme._tokens?.colors?.[color];
70
+ this.#theme = merge({}, this.#theme, {
71
+ colors,
72
+ modes,
73
+ mode: initialMode,
74
+ _getColorValue: getColorValue,
75
+ _variables: {
76
+ mode: variables
77
+ },
78
+ _tokens: {
79
+ modes: mapValues(modes, mode => mapValues(mode, getColorValue))
80
+ }
81
+ });
82
+ return this;
83
+ }
142
84
 
143
- }, {
144
- key: "updateScale",
145
- value: function updateScale(key, updateFn) {
146
- _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, updateFn(_classPrivateFieldLooseBase(this, _theme)[_theme][key])));
147
- return this;
148
- }
149
- /**
150
- * This finalizes the theme build and returns the final theme and variables to be provided.
151
- */
85
+ /**
86
+ *
87
+ * @param key A new key of theme
88
+ * @param createScale A function that accepts the current theme and returns a new object of scale values.
89
+ * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
90
+ */
91
+ addScale(key, createScale) {
92
+ this.#theme = merge({}, this.#theme, {
93
+ [key]: flattenScale(createScale(this.#theme))
94
+ });
95
+ return this;
96
+ }
152
97
 
153
- }, {
154
- key: "build",
155
- value: function build() {
156
- return merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
157
- _variables: {},
158
- _tokens: {}
159
- });
160
- }
161
- }]);
98
+ /**
99
+ *
100
+ * @param key A current key of theme to be updated with new or computed values
101
+ * @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.
102
+ * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
103
+ */
104
+ updateScale(key, updateFn) {
105
+ this.#theme = merge({}, this.#theme, {
106
+ [key]: updateFn(this.#theme[key])
107
+ });
108
+ return this;
109
+ }
162
110
 
163
- return ThemeBuilder;
164
- }();
111
+ /**
112
+ *
113
+ * @param name Adds a name to the theme
114
+ * This is used for referencing the theme for replacing default fonts.
115
+ * @example .addName('core')
116
+ */
117
+ addName(name) {
118
+ this.#theme = merge({}, this.#theme, {
119
+ name
120
+ });
121
+ return this;
122
+ }
165
123
 
124
+ /**
125
+ * This finalizes the theme build and returns the final theme and variables to be provided.
126
+ */
127
+ build() {
128
+ return merge({}, this.#theme, {
129
+ _variables: {},
130
+ _tokens: {}
131
+ });
132
+ }
133
+ }
166
134
  export function createTheme(base) {
167
135
  return new ThemeBuilder(base);
168
136
  }
@@ -1,13 +1,7 @@
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
-
7
- import { mapValues } from 'lodash';
1
+ import mapValues from 'lodash/mapValues';
8
2
  import { createTheme } from './createTheme';
9
- describe('createTheme', function () {
10
- var base = {
3
+ describe('createTheme', () => {
4
+ const base = {
11
5
  breakpoints: {
12
6
  xs: '1',
13
7
  sm: '2',
@@ -16,53 +10,46 @@ describe('createTheme', function () {
16
10
  xl: '5'
17
11
  }
18
12
  };
19
- it('works', function () {
20
- expect(createTheme(base).build()).toEqual(_objectSpread(_objectSpread({}, base), {}, {
13
+ it('works', () => {
14
+ expect(createTheme(base).build()).toEqual({
15
+ ...base,
21
16
  _variables: {},
22
17
  _tokens: {}
23
- }));
18
+ });
24
19
  });
25
- it('adds a scale', function () {
26
- var theme = createTheme(base).addScale('test', function () {
27
- return {
28
- test: 1,
29
- test2: 2
30
- };
31
- }).build();
20
+ it('adds a scale', () => {
21
+ const theme = createTheme(base).addScale('test', () => ({
22
+ test: 1,
23
+ test2: 2
24
+ })).build();
32
25
  expect(theme.test).toEqual({
33
26
  test: 1,
34
27
  test2: 2
35
28
  });
36
29
  });
37
- it('updates a scale', function () {
38
- var builder = createTheme(base).addScale('test', function () {
39
- return {
40
- test: 1,
41
- test2: 2
42
- };
43
- });
30
+ it('updates a scale', () => {
31
+ const builder = createTheme(base).addScale('test', () => ({
32
+ test: 1,
33
+ test2: 2
34
+ }));
44
35
  expect(builder.build().test).toEqual({
45
36
  test: 1,
46
37
  test2: 2
47
38
  });
48
- builder.updateScale('test', function () {
49
- return {
50
- test3: 3
51
- };
52
- });
39
+ builder.updateScale('test', () => ({
40
+ test3: 3
41
+ }));
53
42
  expect(builder.build().test).toEqual({
54
43
  test: 1,
55
44
  test2: 2,
56
45
  test3: 3
57
46
  });
58
47
  });
59
- it('serializes variables', function () {
60
- var theme = createTheme(base).addScale('test', function () {
61
- return {
62
- test: 1,
63
- test2: 2
64
- };
65
- }).createScaleVariables('test').build();
48
+ it('serializes variables', () => {
49
+ const theme = createTheme(base).addScale('test', () => ({
50
+ test: 1,
51
+ test2: 2
52
+ })).createScaleVariables('test').build();
66
53
  expect(theme.test).toEqual({
67
54
  test: 'var(--test-test)',
68
55
  test2: 'var(--test-test2)'
@@ -72,24 +59,22 @@ describe('createTheme', function () {
72
59
  '--test-test2': 2
73
60
  });
74
61
  });
75
- describe('colors', function () {
76
- var staticColors = {
62
+ describe('colors', () => {
63
+ const staticColors = {
77
64
  white: 'white',
78
65
  black: 'black',
79
66
  blue: 'blue',
80
67
  green: 'green',
81
68
  red: 'red'
82
69
  };
83
- var cssVariableReferences = mapValues(staticColors, function (val) {
84
- return "var(--color-".concat(val, ")");
85
- });
86
- var builder = createTheme(base);
87
- it('creates color variables', function () {
88
- var theme = builder.addColors(staticColors).build();
70
+ const cssVariableReferences = mapValues(staticColors, val => `var(--color-${val})`);
71
+ const builder = createTheme(base);
72
+ it('creates color variables', () => {
73
+ const theme = builder.addColors(staticColors).build();
89
74
  expect(theme.colors).toEqual(cssVariableReferences);
90
75
  });
91
- it('adds colorModes', function () {
92
- var theme = builder.addColors(staticColors).addColorModes('light', {
76
+ it('adds colorModes', () => {
77
+ const theme = builder.addColors(staticColors).addColorModes('light', {
93
78
  light: {
94
79
  primary: 'red'
95
80
  },
@@ -97,17 +82,16 @@ describe('createTheme', function () {
97
82
  primary: 'blue'
98
83
  }
99
84
  }).build();
100
- expect(theme.colors).toEqual(_objectSpread(_objectSpread({}, mapValues(staticColors, function (val) {
101
- return "var(--color-".concat(val, ")");
102
- })), {}, {
85
+ expect(theme.colors).toEqual({
86
+ ...mapValues(staticColors, val => `var(--color-${val})`),
103
87
  primary: 'var(--color-primary)'
104
- }));
88
+ });
105
89
  expect(theme._variables.mode).toEqual({
106
90
  '--color-primary': 'var(--color-red)'
107
91
  });
108
92
  });
109
- it('returns value checker for colors', function () {
110
- var theme = builder.addColors({
93
+ it('returns value checker for colors', () => {
94
+ const theme = builder.addColors({
111
95
  black: '#000000',
112
96
  white: '#FFFFFF'
113
97
  }).addColorModes('light', {
@@ -121,8 +105,8 @@ describe('createTheme', function () {
121
105
  expect(theme._getColorValue('white')).toEqual('#FFFFFF');
122
106
  expect(theme._getColorValue(theme.modes.light.primary)).toEqual('#000000');
123
107
  });
124
- it('returns value checker for colors with deep values', function () {
125
- var theme = builder.addColors({
108
+ it('returns value checker for colors with deep values', () => {
109
+ const theme = builder.addColors({
126
110
  black: '#000000',
127
111
  white: '#FFFFFF',
128
112
  gray: {
@@ -132,7 +116,7 @@ describe('createTheme', function () {
132
116
  }).addColorModes('light', {
133
117
  light: {
134
118
  primary: {
135
- "default": 'gray-200',
119
+ default: 'gray-200',
136
120
  cool: {
137
121
  _: 'gray-300',
138
122
  town: 'black'
@@ -143,8 +127,8 @@ describe('createTheme', function () {
143
127
  expect(theme._getColorValue('gray-300')).toEqual('#666666');
144
128
  expect(theme._getColorValue(theme.modes.light['primary-default'])).toEqual('#eeeeee');
145
129
  });
146
- it('merges color mode configurations when overriden', function () {
147
- var theme = builder.addColors({
130
+ it('merges color mode configurations when overriden', () => {
131
+ const theme = builder.addColors({
148
132
  black: '#000000',
149
133
  white: '#FFFFFF'
150
134
  }).addColorModes('light', {
@@ -155,7 +139,7 @@ describe('createTheme', function () {
155
139
  }
156
140
  }
157
141
  }).build();
158
- var override = createTheme(theme).addColorModes('light', {
142
+ const override = createTheme(theme).addColorModes('light', {
159
143
  light: {
160
144
  primary: {
161
145
  _: 'white',
@@ -165,8 +149,8 @@ describe('createTheme', function () {
165
149
  }).build();
166
150
  expect(override.modes.light.primary).toEqual('white');
167
151
  });
168
- it('returns the raw values of color mode colors on the tokens object', function () {
169
- var theme = createTheme(base).addColors({
152
+ it('returns the raw values of color mode colors on the tokens object', () => {
153
+ const theme = createTheme(base).addColors({
170
154
  black: '#000000',
171
155
  gray: {
172
156
  300: '#666666'
@@ -188,5 +172,9 @@ describe('createTheme', function () {
188
172
  }
189
173
  });
190
174
  });
175
+ it('adds a name to the theme', () => {
176
+ const theme = createTheme(base).addName('scoobyDoo').build();
177
+ expect(theme.name).toEqual('scoobyDoo');
178
+ });
191
179
  });
192
180
  });
@@ -9,21 +9,21 @@ import { AbstractTheme } from '../types/theme';
9
9
  *
10
10
  * The resulting type is then rejoined with keys that cannot be mutated (breakpoints) as the next version of Theme
11
11
  */
12
- export declare type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
12
+ export type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
13
13
  /** This merges at 2 levels of depth */
14
- export declare type Merge<A, B> = {
14
+ export type Merge<A, B> = {
15
15
  [K in keyof (A & B)]: K extends keyof B ? K extends keyof A ? AssignValueIfUnmergable<A[K], B[K]> : B[K] : K extends keyof A ? A[K] : never;
16
16
  };
17
17
  /** Extract mergable objects */
18
- export declare type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
18
+ export type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
19
19
  /** Return B if either A or B is unmergable */
20
- export declare type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
20
+ export type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
21
21
  /** Prefer all values from B */
22
- export declare type Assign<A, B> = {
22
+ export type Assign<A, B> = {
23
23
  [K in keyof A | keyof B]: K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
24
24
  };
25
25
  /** These are keys that are consistent for all theme builds - they are loosely typed as they are not meant to be accessed directly */
26
- export declare type PrivateThemeKeys = {
26
+ export type PrivateThemeKeys = {
27
27
  _variables: Record<string, CSSObject>;
28
28
  _tokens: Record<string | number, any>;
29
29
  };
@@ -39,4 +39,4 @@ export declare type PrivateThemeKeys = {
39
39
  *
40
40
  * `button-bg-hover`
41
41
  * */
42
- export declare type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;
42
+ export type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ import { PropertyMode } from '../types/properties';
2
+ export declare const getPropertyMode: (useLogicalProperties: boolean) => PropertyMode;
@@ -0,0 +1,3 @@
1
+ export const getPropertyMode = useLogicalProperties => {
2
+ return useLogicalProperties ? 'logical' : 'physical';
3
+ };
@@ -0,0 +1,15 @@
1
+ import { getPropertyMode } from './getPropertyMode';
2
+ describe('getPropertyMode', () => {
3
+ it.each([{
4
+ useLogicalProperties: true,
5
+ expected: 'logical'
6
+ }, {
7
+ useLogicalProperties: false,
8
+ expected: 'physical'
9
+ }])('returns "$expected" when useLogicalProperties is $useLogicalProperties', ({
10
+ useLogicalProperties,
11
+ expected
12
+ }) => {
13
+ expect(getPropertyMode(useLogicalProperties)).toBe(expected);
14
+ });
15
+ });
@@ -0,0 +1 @@
1
+ export * from './getPropertyMode';
@@ -0,0 +1 @@
1
+ export * from './getPropertyMode';
package/dist/index.d.ts CHANGED
@@ -3,3 +3,4 @@ export * from './createTheme';
3
3
  export * from './types/props';
4
4
  export * from './transforms';
5
5
  export * from './scales/createScale';
6
+ export * from './getPropertyMode';
package/dist/index.js CHANGED
@@ -2,4 +2,5 @@ export { variance } from './core';
2
2
  export * from './createTheme';
3
3
  export * from './types/props';
4
4
  export * from './transforms';
5
- export * from './scales/createScale';
5
+ export * from './scales/createScale';
6
+ export * from './getPropertyMode';
@@ -1,3 +1 @@
1
- export var createScale = function createScale() {
2
- return [];
3
- };
1
+ export const createScale = () => [];
@@ -1,5 +1,5 @@
1
1
  import { Prop } from '../types/config';
2
2
  import { ThemeProps } from '../types/props';
3
- declare type GetScaleValue = (val: string | number, props: ThemeProps) => string | number | undefined;
4
- export declare const createScaleLookup: (scale: Prop['scale']) => GetScaleValue;
3
+ type GetScaleValue = (val: string | number, props: ThemeProps) => string | number | undefined;
4
+ export declare const createScaleLookup: (scale: Prop["scale"]) => GetScaleValue;
5
5
  export {};
@@ -1,24 +1,16 @@
1
- import { get, isArray, isObject, isString } from 'lodash';
2
- export var createScaleLookup = function createScaleLookup(scale) {
1
+ import get from 'lodash/get';
2
+ import isArray from 'lodash/isArray';
3
+ import isObject from 'lodash/isObject';
4
+ import isString from 'lodash/isString';
5
+ export const createScaleLookup = scale => {
3
6
  if (isString(scale)) {
4
- return function (val, props) {
5
- return get(props, ['theme', scale, val]);
6
- };
7
+ return (val, props) => get(props, ['theme', scale, val]);
7
8
  }
8
-
9
9
  if (isArray(scale)) {
10
- return function (val) {
11
- return val;
12
- };
10
+ return val => val;
13
11
  }
14
-
15
12
  if (isObject(scale)) {
16
- return function (val) {
17
- return get(scale, val);
18
- };
13
+ return val => get(scale, val);
19
14
  }
20
-
21
- return function () {
22
- return undefined;
23
- };
15
+ return () => undefined;
24
16
  };