♻️ Add scale option to values

exah · Mar 6, 2019 · d59ade3 · d59ade3
1 parent 6515aed
commit d59ade3
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 29 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -2673,6 +2673,8 @@ See [fontFamily][65], [radius][230].
     -   `options.themeKey` **[String][223]** 
     -   `options.transformValue` **[Function][229]**  (optional, default `identity`)
     -   `options.themeGetter` **[Function][229]**  (optional, default `getThemeValue(themeKey,transformValue)`)
+    -   `options.scale`  
+    -   `options.getter`   (optional, default `getThemeValue({themeKey,transformValue,scale})`)
 
 #### Examples
 
@@ -2757,9 +2759,10 @@ Related: [textStyle][20].
 #### Parameters
 
 -   `options` **[Object][215]**  (optional, default `{}`)
-    -   `options.themeKey` **[String][223]** 
-    -   `options.transformValue` **[Function][229]**  (optional, default `identity`)
-    -   `options.themeGetter` **[Function][229]**  (optional, default `getThemeValue(themeKey,transformValue)`)
+    -   `options.themeKey`  
+    -   `options.transformValue`  
+    -   `options.scale`  
+    -   `options.getter`   (optional, default `getThemeValue({themeKey,transformValue,scale})`)
 
 #### Examples
 
@@ -2853,11 +2856,12 @@ Related: [textStyle][20], [boxStyle][14], [rule][179], [themeValue][196], [theme
 #### Parameters
 
 -   `options` **[Object][215]** 
-    -   `options.themeKey`  
     -   `options.prop`   (optional, default `VARIANT`)
     -   `options.cssProp`   (optional, default `false`)
+    -   `options.scale`  
+    -   `options.themeKey`  
     -   `options.transformValue`  
-    -   `options.themeGetter`   (optional, default `getThemeValue(themeKey)`)
+    -   `options.getter`  
 
 #### Examples
 

diff --git a/src/core/create-variant.js b/src/core/create-variant.js
@@ -1,5 +1,4 @@
 import { VARIANT } from '../constants'
-import { getThemeValue } from '../getters'
 import { themeValue } from '../values/theme-value'
 import { createStyles } from './create-styles'
 import { themeStyle } from './theme-style'
@@ -47,15 +46,16 @@ import { rule } from './rule'
  */
 
 function createVariant ({
-  themeKey,
   prop = VARIANT,
   cssProp = false,
+  scale,
+  themeKey,
   transformValue,
-  themeGetter = getThemeValue(themeKey)
+  getter
 }) {
   const style = cssProp === false
-    ? themeStyle({ themeKey, transformValue, themeGetter })
-    : rule(cssProp, themeValue({ themeKey, transformValue, themeGetter }))
+    ? themeStyle({ themeKey, transformValue, scale, getter })
+    : rule(cssProp, themeValue({ themeKey, transformValue, scale, getter }))
 
   const mixin = createStyles({
     [prop]: style

diff --git a/src/core/theme-style.js b/src/core/theme-style.js
@@ -12,9 +12,6 @@ import { everyMedia } from './every-media'
  * Related: {@link textStyle}.
  *
  * @param {Object} [options = {}]
- * @param {String} options.themeKey
- * @param {Function} [options.transformValue = identity]
- * @param {Function} [options.themeGetter = getThemeValue(themeKey, transformValue)]
  * @return {Function}
  *
  * @example
@@ -59,11 +56,12 @@ import { everyMedia } from './every-media'
 function themeStyle ({
   themeKey,
   transformValue,
-  themeGetter = getThemeValue(themeKey, transformValue)
+  scale,
+  getter = getThemeValue({ themeKey, transformValue, scale })
 } = {}) {
   return (inputs, props, mediaKey) => toArr(inputs).reduce((acc, input) => ({
     ...acc,
-    ...everyMedia(props, themeGetter(input, null, mediaKey)(props))
+    ...everyMedia(props, getter(input, null, mediaKey)(props))
   }), {})
 }
 

diff --git a/src/getters/index.js b/src/getters/index.js
@@ -48,7 +48,7 @@ export const getMedia = (input, media) => media
   ? path(input)(media)
   : (props) => path(input)(getThemeMedia(props))
 
-export function getThemeValue (themeKey, transformValue) {
+export function getThemeValue ({ themeKey, transformValue, scale }) {
   const isTransformValue = isFn(transformValue)
 
   if (!isTransformValue) {
@@ -60,7 +60,7 @@ export function getThemeValue (themeKey, transformValue) {
       ? getDefault(themeKey)(props)
       : input
 
-    const themeData = themePath(themeKey)(props)
+    const themeData = themePath(themeKey, scale)(props)
     const themeValue = path(valueKey)(themeData)
 
     if (Object(themeValue).hasOwnProperty(mediaKey)) {

diff --git a/src/values/color-value.js b/src/values/color-value.js
@@ -5,8 +5,10 @@ import { themePath, getDefault } from '../getters'
 export function createColorValue ({
   themeColorKey = COLORS_KEY,
   themePaletteKey = PALETTE_KEY,
-  colorsGetter = themePath(themeColorKey, {}),
-  paletteGetter = themePath(themePaletteKey, {})
+  colorsScale = {},
+  paletteScale = {},
+  colorsGetter = themePath(themeColorKey, colorsScale),
+  paletteGetter = themePath(themePaletteKey, paletteScale)
 } = {}) {
   const getColor = (defaultColorName) => (colorName) => (props) => {
     const colors = colorsGetter(props)

diff --git a/src/values/size-value.js b/src/values/size-value.js
@@ -1,18 +1,13 @@
-import { isStr, path, identity } from '@exah/utils'
+import { isStr, identity } from '@exah/utils'
 import { SIZES_KEY } from '../constants'
 import { px } from '../utils'
 import { getThemeValue } from '../getters'
 
-const scaleGetter = (scale, transformValue = identity) =>
-  (input, fallback) => transformValue(path(input, fallback)(scale))
-
 export function createSizeValue ({
   transformValue = identity,
   themeKey = SIZES_KEY,
-  scale = null,
-  getter = scale
-    ? scaleGetter(scale, transformValue)
-    : getThemeValue(themeKey, transformValue)
+  scale,
+  getter = getThemeValue({ themeKey, transformValue, scale })
 } = {}) {
   return (defaultValue = transformValue) => (
     input,

diff --git a/src/values/theme-value.js b/src/values/theme-value.js
@@ -45,9 +45,10 @@ import { getThemeValue } from '../getters'
 function themeValue ({
   themeKey,
   transformValue,
-  themeGetter = getThemeValue(themeKey, transformValue)
+  scale,
+  getter = getThemeValue({ themeKey, transformValue, scale })
 } = {}) {
-  return (input, props, mediaKey) => themeGetter(input, input, mediaKey)(props)
+  return (input, props, mediaKey) => getter(input, input, mediaKey)(props)
 }
 
 export {