Replace css variables with css custom props

Author: Alex Page

packages/custom-properties/README.md

@@ -1,6 +1,6 @@
 # @theme-ui/custom-properties
 
-Generate CSS variables for use with Theme UI.
+Generate CSS custom properties for use with Theme UI.
 
 
 ## Installation
@@ -35,5 +35,5 @@ toCustomProperties( $theme, $prefix );
 ```
 
 1. theme - The theme ui specification object
-1. prefix - An optional prefix for the css variables _optional_
+1. prefix - An optional prefix for the css custom property _optional_
 

packages/custom-properties/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/custom-properties",
-  "description": "Generate CSS variables for use with Theme UI",
+  "description": "Generate CSS custom properties for use with Theme UI",
   "version": "0.0.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

packages/custom-properties/test/__snapshots__/test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`transforms a theme config to css variables 1`] = `
+exports[`transforms a theme config to CSS custom properties 1`] = `
 Object {
   "--color-accent": "#609",
   "--color-background": "#fff",
@@ -31,7 +31,7 @@ Object {
 }
 `;
 
-exports[`transforms a theme config to css variables with prefix 1`] = `
+exports[`transforms a theme config to CSS custom properties with prefix 1`] = `
 Object {
   "--🍭-color-accent": "#609",
   "--🍭-color-background": "#fff",

packages/custom-properties/test/test.js

@@ -32,13 +32,13 @@ const theme = {
   size: ['10em', '20em', '30em', '40em'],
 }
 
-it('transforms a theme config to css variables', () => {
+it('transforms a theme config to CSS custom properties', () => {
   const result = toCustomProperties(theme)
 
   expect(result).toMatchSnapshot()
 })
 
-it('transforms a theme config to css variables with prefix', () => {
+it('transforms a theme config to CSS custom properties with prefix', () => {
   const result = toCustomProperties(theme, '🍭')
 
   expect(result).toMatchSnapshot()