feat: simplify core & remove theme dependency

Refactor all components to avoid theme dependency. It should reduce
bundle size and load only needed functions from theme. The library will
be able to scale easily.

BREAKING CHANGE:

- `prop` utility has been removed
- Undocumented utilities are no longer exported
- `controlFocus` has been renamed `baseFocus`, `controlFocus` is only
for controls (when control prop is `true`)
- `mixin` function is no longer available, also mixins have changed

**Mixins:**

Previously mixins were called using `mixin` helper:

```js
import { styled, mixin } from '@smooth-ui/core-sc'

const Styled = styled.div`
  color: ${mixin('colorLevel', 'red', 5)};
`
```

All mixins are now exported:

```js
import { styled, colorLevel } from '@smooth-ui/core-sc'

const Styled = styled.div`
  color: ${colorLevel('red', 5)};
`
```

**Theme**

Theme is no longer required, Smooth UI will work well without theme and
you can override only needed properties without having to load the
entire theme.

The benefit from that approach is that code splitting is fully
efficient, if you use only one component in Smooth UI you will load only
theme primitives of this component.

The size of a result bundle that is using only a `Button`:

```
 202K  bundle-smooth-ui-v8.js
 194K  bundle-smooth-ui-v9.js
  65K  bundle-smooth-ui-v8.js.gz
  63K  bundle-smooth-ui-v9.js.gz
```

As you can see the bundle has been reduced of 8K (no gzip) and of 2K
(gzip).

Author: gregberge

docs/basics/Accessibility.mdx

@@ -14,14 +14,14 @@ Smooth UI takes accessibility seriously. We do our best to ensure that all compo
 
 All components implement [reduced motion media query](https://css-tricks.com/introduction-reduced-motion-media-query/), it means they respect settings of users.
 
-`transition` mixin automatically adds the reduced motion media query.
+`transition` utility automatically adds the reduced motion media query.
 
 ```js
-import { mixin } from '@smooth-ui/core-sc'
+import { transition } from '@smooth-ui/core-sc'
 
 const AccessibleButton = styled.button`
   background-color: red;
-  ${mixin('transition', 'background-color 200ms')};
+  ${transition('background-color 200ms')};
 
   &:hover {
     background-color: blue;

docs/basics/Theming.mdx

@@ -13,15 +13,14 @@ Smooth UI has a powerful theming feature. It uses [Styled Components theming fea
 
 ## Create a custom theme
 
-The recommended way to create a custom theme is to create a file named `theme.js` that exports all `@smooth-ui/core-*/theme` and overrides only the needed parts.
+The recommended way to create a custom theme is to create a file named `theme.js`, you can add your custom values and override existing ones.
 
 ```js
 // theme.js
-import { theme } from '@smooth-ui/core-sc'
 
 export default {
-  ...theme,
   primary: 'blue',
+  myNewColor: '#000',
 }
 ```
 
@@ -46,11 +45,35 @@ render(
 
 ## Default theme
 
-You can find all theme values in [the default theme](https://github.com/smooth-code/smooth-ui/blob/master/packages/shared/core/theme.js).
+You can find all theme values in [theming section](https://github.com/smooth-code/smooth-ui/blob/master/packages/shared/core/theming/).
 
-Two ways to import theme in your code:
+The whole theme is exported under `theme` named export:
 
 ```js
 import { theme } from '@smooth-ui/core-sc'
-import theme from '@smooth-ui/core-sc/theme'
+```
+
+## Use theme property
+
+You can use `th` utility to use a theme property in your code:
+
+```js
+import { styled, th } from '@smooth-ui/core-sc'
+
+const RedBox = styled.div`
+  background-color: ${th('primary')};
+`
+```
+
+But you can also use it to create a reference in your theme:
+
+```js
+// theme.js
+import { th } from '@smooth-ui/core-sc'
+
+export default {
+  blue: '#00bdff',
+  // primary is now a reference to `blue`
+  primary: th('blue'),
+}
 ```

docs/basics/Utilities.mdx

@@ -45,7 +45,7 @@ const Box = styled.div`
 
 ### th
 
-`th` lets you get a property from the theme, you can also apply a modifier.
+`th` lets you get a property from the theme, you can also apply a transform function.
 
 ```js
 import { styled, th } from '@smooth-ui/core-sc'
@@ -58,20 +58,6 @@ const RedBox = styled.div`
 `
 ```
 
-### prop
-
-`prop` lets you get a property from props, you can also specify a theme default.
-
-```js
-import { styled, prop } from '@smooth-ui/core-sc'
-
-const RedBox = styled.div`
-  width: 200px;
-  height: 200px;
-  background-color: ${prop('bgColor', 'primary')};
-`
-```
-
 ### unit, px
 
 `unit` automatically adds unit.

docs/components/Checkbox.mdx

@@ -56,8 +56,8 @@ Disable using `disabled` prop.
 
 ## Control & Validation
 
-* Set `display` to "block" and `width` to "100%" using `control` prop.
-* Set validation using `valid` or `valid={false}`
+- Set custom focus effect using `control` prop.
+- Set validation using `valid` or `valid={false}`
 
 <Playground>
   <FormCheck>

docs/components/Radio.mdx

@@ -50,16 +50,52 @@ Disable using `disabled` prop.
 
 In most of case you don't need a `RadioGroup`. It is only necessary if you use [uncontrolled radio buttons](https://reactjs.org/docs/uncontrolled-components.html). All moderns like [Final Form](https://github.com/final-form/react-final-form) or [Formik](https://github.com/jaredpalmer/formik) uses controlled components, so `RadioGroup` is not required.
 
+## Control & Validation
+
+- Set custom focus effect using `control` prop.
+- Set validation using `valid` or `valid={false}`
+
+<Playground>
+  <RadioGroup>
+    <FormCheck>
+      <Radio control id="controlRadio1" name="controlRadios" value="option1" />
+      <FormCheckLabel htmlFor="controlRadio1">Control</FormCheckLabel>
+    </FormCheck>
+    <FormCheck>
+      <Radio
+        control
+        valid={true}
+        id="controlRadio2"
+        name="controlRadios"
+        value="option2"
+      />
+      <FormCheckLabel htmlFor="controlRadio2">Valid control</FormCheckLabel>
+    </FormCheck>
+    <FormCheck>
+      <Radio
+        control
+        valid={false}
+        id="controlRadio3"
+        name="controlRadios"
+        value="option3"
+      />
+      <FormCheckLabel htmlFor="controlRadio3">Invalid control</FormCheckLabel>
+    </FormCheck>
+  </RadioGroup>
+</Playground>
+
 ## API
 
 ### Radio
 
 <PropsTable
   of={PropDesc({
     checked: PropDesc.bool,
+    control: PropDesc.bool,
     disabled: PropDesc.bool,
     onChange: PropDesc.func,
     size: PropDesc.oneOf(['sm', 'lg']),
+    valid: PropDesc.bool,
     value: PropDesc.string,
     ...getSystemPropDesc(Radio),
   })}

docs/components/Typography.mdx

@@ -58,10 +58,10 @@ HTML component is automatically determined from variant. You can customize it us
   }}
 </Playground>
 
-### Using `uiAs` property
+### Using `as` property
 
 <Playground>
-  <Typography variant="h4" uiAs="div">
+  <Typography variant="h4" as="div">
     div displayed as h4
   </Typography>
 </Playground>

examples/basics/.gitignore

@@ -0,0 +1 @@
+/dist/

examples/basics/src/emotion/index.js

@@ -2,7 +2,7 @@
 /* @jsx jsx */
 import React from 'react'
 import { render } from 'react-dom'
-import { jsx, css, Button, Normalize, styled, uiAs } from '@smooth-ui/core-em'
+import { jsx, css, Button, Normalize, styled } from '@smooth-ui/core-em'
 
 const BlackButton = styled(Button)`
   color: black;
@@ -35,6 +35,7 @@ const App = () => (
     <div>
       <Button
         css={{ color: 'black' }}
+        backgroundColor="secondary"
       >{`<Button css={{{color: 'black'}}>`}</Button>
     </div>
   </>

examples/basics/src/styled-components/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react'
-import { Button, Normalize, styled, uiAs } from '@smooth-ui/core-sc'
+import { Button, Normalize, styled } from '@smooth-ui/core-sc'
 
 const BlackButton = styled(Button)`
   color: black;
@@ -33,6 +33,7 @@ const App = () => (
     <div>
       <Button
         css={{ color: 'black' }}
+        backgroundColor="secondary"
       >{`<Button css={{{color: 'black'}}>`}</Button>
     </div>
   </>

examples/basics/webpack.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  mode: 'development',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   module: {
     rules: [
       {
@@ -8,4 +8,7 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    usedExports: true,
+  },
 }