docs: add CssVars docs

README.md

@@ -69,7 +69,7 @@ const MyComponent = mock();
   - [Context](./docs/en/Context.md)
      - [`<Provider>`](./docs/en/Provider.md#provider), [`<Consumer>`](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator)
      - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator)
-     - `<CssVars>`
+     - [`<CssVarsProvider>`](./docs/en/cssvars.md), [`<CssVars>`](./docs/en/cssvars.md#cssvars), [`withCssVars()`](./docs/en/cssvars.md#withcssvars-hoc), and [`@withCssVars`](./docs/en/cssvars.md#withcssvars-decorator)
      - [`<Router>`](./docs/en/routing.md#router), [`<Route>`](./docs/en/routing.md#route), [`withRoute()`](./docs/en/routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./docs/en/translate.md#translations), [`<Translate>`](./docs/en/translate.md#translate-or-t), [`<T>`](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)
   - Generators

docs/en/Context.md

@@ -5,6 +5,6 @@ to easily use React's context.
 
   - [`<Provider>`](./Provider.md) and [`<Consumer>`](./Provider.md#consumer) &mdash; utilities to work with React's context.
   - [`<Theme>`](./theme.md#theme) and [`<Themed>`](./theme.md#themed) &mdash; theme provider and consumer.
-  - `<CssVars>` &mdash; provides ability to use CSS variables today.
+  - [`<CssVarsProvider>`](./cssvars.md) &mdash; use CSS variables today.
   - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), and `<Go>` &mdash; best router for React.
   - [`<Translations>`](./docs/translate.md#translations) and [`<Translate>`](./docs/translate.md#translate-or-t) &mdash; translation provider and consumer.

docs/en/README.md

@@ -38,7 +38,7 @@
   - [Context](./Context.md)
      - [`<Provider>`](./Provider.md#provider), [`<Consumer>`](./Provider.md#consumer), [`withContext()`](./Provider.md#withcontext-hoc), and [`@withContext`](./Provider.md#withcontext-decorator)
      - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme-hoc), and [`@withTheme`](./theme.md#withtheme-decorator)
-     - `<CssVars>`
+     - [`<CssVarsProvider>`](./cssvars.md), [`<CssVars>`](./cssvars.md#cssvars), [`withCssVars()`](./cssvars.md#withcssvars-hoc), and [`@withCssVars`](./cssvars.md#withcssvars-decorator)
      - [`<Router>`](./routing.md#router), [`<Route>`](./routing.md#route), [`withRoute()`](./routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)
   - Generators

docs/en/SUMMARY.md

@@ -46,6 +46,7 @@
 * [Context](Context.md)
   * [Provider](Provider.md)
   * [Theming](theme.md)
+  * [CSS Variables](cssvars.md)
   * [Router](routing.md)
   * [Translations](translate.md)
 * [Generators](Generators.md)

docs/en/cssvars.md

@@ -0,0 +1,86 @@
+# CSS Variables
+
+Use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (aka CSS variables) theming with automatic fallback
+to [regular theming](./theme.md). Below components allow you to safely use CSS variables. You simply use `<CssVarsProvider>` similar
+to how you use [`<Theme>`](./theme.me#theme), but if CSS variables are supported by user's browser all values will be replaces instead
+by CSS variables and on subsequent re-renders it will try to just modify the CSS variables without re-rendering the its children.
+
+> If CSS Custom Properties are not supported, CssVars works like a typical theme provider.
+
+## Usage
+
+```jsx
+import {CssVarsProvider, CssVars} from 'libreact/lib/cssvars';
+
+<CssVarsProvider vars={{
+  color: 'tomato'
+}}>
+  <CssVars>{vars =>
+    <button style={vars}>Click me!</button>
+  }</CssVars>
+</CssVarsProvider>
+```
+
+
+## `<CssVarsProvider>`
+
+CSS variable context provider.
+
+### Props
+
+  - `ns` &mdash; optional, string, context namespace, defaults to `''`.
+  - `vars` &mdash; require, plain flat JavaScript object, map of keys to CSS values, which will be replaces by CSS variables.
+
+
+## `<CssVars>`
+
+CSS variable context consumer render prop.
+
+### Props
+
+  - `ns` &mdash; optional, string, context namespace, defaults to `''`.
+
+### Arguments
+
+Render prop receives a single argument &mdash; map of variables where values are replaced by CSS variables.
+
+
+## `withCssVars()` HOC
+
+Enhancer that injects `vars` prop into component.
+
+### Usage
+
+```js
+import {withCssVars} from 'libreact/lib/cssvars';
+
+const MyCompWithVars = withCssVars(MyComp);
+const MyCompWithVars = withCssVars(MyComp, 'theme', {ns: 'css-theme'});
+```
+
+### Signature
+
+```js
+withCssVars(Component, propName?, cssVarsProps?);
+```
+
+
+## `@withCssVars` Decorator
+
+Stateful class decorator that injects `vars` prop.
+
+### Usage
+
+```js
+import {withCssVars} from 'libreact/lib/cssvars';
+
+@withCssVars
+class MyCompWithVars extends Component {
+
+}
+
+@withCssVars('theme', {ns: 'css-theme'})
+class MyCompWithVars extends Component {
+
+}
+```

src/index.ts

@@ -28,6 +28,7 @@ export * from './Audio';
 export * from './context';
 export * from './theme';
 export * from './route';
+export * from './cssvars';
 
 // Other
 export * from './Resolve';