✨ Add zIndex to theme

exah · Mar 5, 2019 · b7b879f · b7b879f
1 parent 0fbd276
commit b7b879f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -1829,9 +1829,9 @@ const Text = styled.p`
 import { zIndex } from 'pss'
 ```
 
-| prop     | css       | type                          | value | true | false |
-| :------- | :-------- | :---------------------------- | :---- | :--- | :---- |
-| `zIndex` | `z-index` | `String`, `Number`, `Boolean` | ✓     | —    | –     |
+| prop     | css       | type                                    | value | true | false |
+| :------- | :-------- | :-------------------------------------- | :---- | :--- | :---- |
+| `zIndex` | `z-index` | `String`, `Number`, `theme.zIndex[key]` | ✓     | —    | –     |
 
 Related: [position][103], [rule][179], [boolValue][182], [sizeValue][185].
 
@@ -1852,6 +1852,7 @@ const Box = styled.div`
 
 ```js
 <Box zIndex={10} /> // position: relative; z-index: 10;
+<Box zIndex='modal' /> // position: relative; z-index: 100;
 ```
 
 ## Atomic Styles

diff --git a/src/styles/z-index.js b/src/styles/z-index.js
@@ -1,13 +1,13 @@
-import { createStyles, rule } from '../core'
+import { createVariant } from '../core'
 
 /**
  * ```js
  * import { zIndex } from 'pss'
  * ```
  *
- * prop       | css       | type                          | value | true   | false
- * :----------|:----------|:------------------------------|:------|:-------|:--------
- * `zIndex`   | `z-index` | `String`, `Number`, `Boolean` | ✓     | —      | –
+ * prop       | css       | type                                    | value | true   | false
+ * :----------|:----------|:----------------------------------------|:------|:-------|:--------
+ * `zIndex`   | `z-index` | `String`, `Number`, `theme.zIndex[key]` | ✓     | —      | –
  *
  *
  * Related: {@link position}, {@link rule}, {@link boolValue}, {@link sizeValue}.
@@ -24,10 +24,13 @@ import { createStyles, rule } from '../core'
  *
  * @example
  * <Box zIndex={10} /> // position: relative; z-index: 10;
+ * <Box zIndex='modal' /> // position: relative; z-index: 100;
  */
 
-const zIndex = createStyles({
-  zIndex: rule('zIndex')
+const zIndex = createVariant({
+  prop: 'zIndex',
+  cssProp: 'zIndex',
+  themeKey: 'zIndex'
 })
 
 export {