fix(css-variables): improve robustness and developer warnings (#449)

* fix(css-variables): improve robustness and developer warnings

* chore(eslint): remove unneeded env setting

* chore(css-variables): fix typo

* fix(css-variables): adjusted prop validator name

* fix(css-variables): stop using whitelistProps because it's overkill

* chore(eslint): remove redundant `propWrapperFunctions` config

src/CssVariables.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import propTypes from 'prop-types'
+import propTypes from '@dhis2/prop-types'
 import * as theme from './theme.js'
 
 const toPrefixedThemeSection = themeSectionKey =>
@@ -22,10 +22,11 @@ const toCustomPropertyString = themeSection =>
  * @example import { CssVariables } from @dhis2/ui-core
  * @see Live demo: {@link /demo/?path=/story/cssvariables--default|Storybook}
  */
-const CssVariables = props => {
-    const variables = Object.keys(props)
+const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
+    const allowedProps = { colors, theme, layers, spacers, elevations }
+    const variables = Object.keys(allowedProps)
         // Filter all props that are false
-        .filter(prop => props[prop])
+        .filter(prop => allowedProps[prop])
         // Map props to corresponding theme section and prefixes keys with section name
         .map(toPrefixedThemeSection)
         // Map each section to a single string of css custom property declarations