feat: flatten style & remove classNames

To prepare styled-components v4 & simplify.

BREAKING CHANGE:

A lot of classes have been removed.

Introduced a new default size "md".

Author: gregberge

docs/advanced/AddVariant.mdx

@@ -10,35 +10,16 @@ import { theme as defaultTheme, ThemeProvider, Button } from '@smooth-ui/core-sc
 
 Components like `Button` or `Alert` implements some `variants` based on colors.
 
-Variants are defined in theme, so you can add, remove or completely change variants. If you are not confortable with Smooth UI theming, please read [theming guide](/docs-basics-theming) first.
-
-## What is a variant?
-
-A variant is an array of strings defined in theme, for an example `alertVariants` for `Alert` and `btnVariants` for `Button`.
-
-Each string of this array must be a property of your theme, most of the time it represent a color.
+You can use any color defined in theme as variant. If you are not confortable with Smooth UI theming, please read [theming guide](/docs-basics-theming) first.
 
 ## Example for Button
 
-`Button` variants are defined using `btnVariants` that inherits from `colorVariants`. In our example, we will just add a new `Button` variant.
+In documentation, you can see only main variants `Button` but it is possible to use any color defined in theme as variant.
 
 <Playground>
   {() => {
-    const theme = Object.assign({}, defaultTheme, {
-      violet: '#EE82EE',
-      btnVariants: [
-        'primary',
-        'secondary',
-        'success',
-        'danger',
-        'warning',
-        'info',
-        'light',
-        'dark',
-        'violet',
-      ]
-    })
-
+    // Define a new theme with "violet" color.
+    const theme = Object.assign({}, defaultTheme, { violet: '#EE82EE' })
     return (
       <ThemeProvider theme={theme}>
         <Button variant="violet">Violet button 😎</Button>

docs/components/Alert.mdx

@@ -31,7 +31,7 @@ Set variants using `variant` prop.
 <PropsTable
   of={PropDesc({
     children: PropDesc.node,
-    variant: PropDesc.oneOf(themeProp('alertVariants')).defaultTo('primary'),
+    variant: PropDesc.oneOf(themeProp('colorVariants')).defaultTo('primary'),
     ...getSystemPropDesc(Alert),
   })}
 />

docs/components/Button.mdx

@@ -24,21 +24,21 @@ Set variants using `variant` prop.
     <Button variant="info">Info</Button>
     <Button variant="light">Light</Button>
     <Button variant="dark">Dark</Button>
-    <Button variant={null}>No variant</Button>
+    <Button>No variant</Button>
   </BlockList>
 </Playground>
 
 ## Sizes
 
-Set sizes using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <BlockList>
-    <Button variant="primary" size="sm">
+    <Button size="sm">
       Small
     </Button>
-    <Button variant="primary">Medium</Button>
-    <Button variant="primary" size="lg">
+    <Button size="md">Medium</Button>
+    <Button size="lg">
       Large
     </Button>
   </BlockList>
@@ -64,7 +64,7 @@ Disable using `disabled` prop.
     children: PropDesc.node,
     disabled: PropDesc.bool,
     size: PropDesc.oneOf(['sm', 'lg']),
-    variant: PropDesc.oneOf(themeProp('btnVariants')).defaultTo('primary'),
+    variant: PropDesc.oneOf(themeProp('colorVariants')).defaultTo('primary'),
     ...getSystemPropDesc(Button),
   })}
 />

docs/components/Checkbox.mdx

@@ -11,7 +11,7 @@ import { Checkbox, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
 
 ## Sizes
 
-Set sizes using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <FormCheck>

docs/components/Input.mdx

@@ -11,12 +11,12 @@ import { Input } from '@smooth-ui/core-sc'
 
 ## Sizes
 
-Set heights using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <BlockList>
     <Input size="sm" placeholder="Small" />
-    <Input placeholder="Medium" />
+    <Input size="md" placeholder="Medium" />
     <Input size="lg" placeholder="Large" />
   </BlockList>
 </Playground>

docs/components/Radio.mdx

@@ -11,7 +11,7 @@ import { Radio, RadioGroup, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc
 
 ## Sizes
 
-Set sizes using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <RadioGroup>
@@ -20,7 +20,7 @@ Set sizes using `size` prop like `"sm"` or `"lg"`.
       <FormCheckLabel htmlFor="sizeRadio1">Small</FormCheckLabel>
     </FormCheck>
     <FormCheck>
-      <Radio id="sizeRadio2" name="sizeRadios" value="option2" />
+      <Radio size="md" id="sizeRadio2" name="sizeRadios" value="option2" />
       <FormCheckLabel htmlFor="sizeRadio2">Medium</FormCheckLabel>
     </FormCheck>
     <FormCheck>

docs/components/Select.mdx

@@ -11,12 +11,12 @@ import { Select } from '@smooth-ui/core-sc'
 
 ## Sizes
 
-Set heights using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <BlockList>
     <Select size="sm" placeholder="Small" options={['One', 'Two']} />
-    <Select placeholder="Medium" options={['Yes', 'No', 'Maybe']} />
+    <Select size="md" placeholder="Medium" options={['Yes', 'No', 'Maybe']} />
     <Select size="lg" placeholder="Large" options={['Amazing', 'Great']} />
   </BlockList>
 </Playground>

docs/components/Textarea.mdx

@@ -11,12 +11,12 @@ import { Textarea } from '@smooth-ui/core-sc'
 
 ## Sizes
 
-Set heights using `size` prop like `"sm"` or `"lg"`.
+Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
 
 <Playground>
   <BlockList>
     <Textarea size="sm" placeholder="Small" />
-    <Textarea placeholder="Medium" />
+    <Textarea size="md" placeholder="Medium" />
     <Textarea size="lg" placeholder="Large" />
   </BlockList>
 </Playground>

docs/utilities/Toggler.mdx

@@ -14,7 +14,7 @@ Toggler is a render-props component that provide a toggle behaviour.
 <Playground>
   <Toggler>
     {({ toggled, onToggle }) => (
-      <Button variant="primary" onClick={onToggle}>
+      <Button onClick={onToggle}>
         {toggled ? 'ON' : 'OFF'}
       </Button>
     )}
@@ -29,10 +29,10 @@ Toggler is a render-props component that provide a toggle behaviour.
       <div className="block-list">
         <div>{toggled ? '🌞' : '🌛'}</div>
         <div>
-          <Button variant="primary" size="sm" onClick={() => onToggle(false)}>
+          <Button size="sm" onClick={() => onToggle(false)}>
             Night
           </Button>{' '}
-          <Button variant="primary" size="sm" onClick={() => onToggle(true)}>
+          <Button size="sm" onClick={() => onToggle(true)}>
             Day
           </Button>
         </div>
@@ -48,7 +48,7 @@ You can define the default `toggled` value using `defaultToggled` property.
 <Playground>
   <Toggler defaultToggled>
     {({ toggled, onToggle }) => (
-      <Button variant="primary" onClick={onToggle}>
+      <Button onClick={onToggle}>
         {toggled ? 'ON' : 'OFF'}
       </Button>
     )}
@@ -62,7 +62,7 @@ You can listen when the element is toggled using `onToggle` property.
 <Playground>
   <Toggler onToggle={toggled => console.log('Toggled', toggled)}>
     {({ toggled, onToggle }) => (
-      <Button variant="primary" onClick={onToggle}>
+      <Button onClick={onToggle}>
         {toggled ? 'ON' : 'OFF'}
       </Button>
     )}

packages/core-em/package.json

@@ -26,7 +26,6 @@
     "access": "public"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
     "polished": "^2.2.0",
     "prop-types": "^15.6.2",
     "react-transition-group": "^2.5.0"