feat(theme): add default theme

README.md

@@ -21,7 +21,7 @@ Be the most accessible it can be out of the box and the fastest way to productio
 
 - [ ] Docs
   - [ ] Next.js + MDX (see [Tailwind Starter Kit](https://github.com/estevanmaito/tailwind-starter-kit))
-- [ ] Themes
+- [ ] Themes (separate themes into dark/light)
 - [ ] Development live server (currently using Styleguidist; polutes the `src` directory)
 - [ ] Scope Tailwind? Prefix? Use user config?
   - I'm inclined to create a root theme file, with all classes used, for every element. This way users can import it and extend/modify, but it would be used to let purge know which classes are being used. But what about custom theme configs, like the `shadow-outline` custom plugin, or extended styles? Maybe create a plugin that could be imported from this package also?

defaultTheme.js

@@ -0,0 +1,24 @@
+export default {
+  // Button
+  'button-base':
+    'inline-flex items-center justify-center cursor-pointer leading-5 transition-colors duration-150 font-medium focus:outline-none',
+  'button-block': 'w-full',
+  'button-size-larger': 'px-10 py-4 rounded-lg',
+  'button-size-large': 'px-5 py-3 rounded-lg',
+  'button-size-regular': 'px-4 py-2 rounded-lg text-sm',
+  'button-size-small': 'px-3 py-1 rounded-md text-sm',
+  'button-size-icon': 'px-2 py-2 rounded-lg',
+  'button-primary-base': 'text-white bg-purple-600 border border-transparent',
+  'button-outline-base':
+    'text-gray-600 border-gray-300 border dark:text-gray-400 focus:outline-none',
+  'button-link-base': 'text-gray-600 dark:text-gray-400 focus:outline-none',
+  'button-primary-active': 'active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
+  'button-outline-active':
+    'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:shadow-outline-gray',
+  'button-link-active': 'hover:bg-gray-100 focus:shadow-outline-gray',
+  'button-primary-disabled': 'opacity-50 cursor-not-allowed',
+  'button-outline-disabled': 'opacity-50 cursor-not-allowed bg-gray-300',
+  'button-link-disabled': 'opacity-50 cursor-not-allowed',
+  'button-dropdown-item':
+    'inline-flex items-center cursor-pointer w-full px-2 py-1 text-sm font-medium transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200',
+}

src/Button.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import warn from '../utils/warning'
+import theme from '../defaultTheme'
 
 const Button = React.forwardRef(function Button(props, ref) {
   const { tag, disabled, size, layout, block, className, ...other } = props
@@ -14,39 +15,36 @@ const Button = React.forwardRef(function Button(props, ref) {
 
   const Component = tag
 
-  const baseStyle =
-    'inline-flex items-center justify-center cursor-pointer leading-5 transition-colors duration-150 font-medium focus:outline-none'
-  const blockStyle = 'w-full'
+  const baseStyle = theme['button-base']
+  const blockStyle = theme['button-block']
   const sizeStyles = {
-    larger: 'px-10 py-4 rounded-lg',
-    large: 'px-5 py-3 rounded-lg',
-    regular: 'px-4 py-2 rounded-lg text-sm',
-    small: 'px-3 py-1 rounded-md text-sm',
-    icon: 'px-2 py-2 rounded-lg',
+    larger: theme['button-size-larger'],
+    large: theme['button-size-large'],
+    regular: theme['button-size-regular'],
+    small: theme['button-size-small'],
+    icon: theme['button-size-icon'],
   }
   const layoutStyles = {
-    primary: 'text-white bg-purple-600 border border-transparent',
-    outline: 'text-gray-600 border-gray-300 border dark:text-gray-400 focus:outline-none',
-    link: 'text-gray-600 dark:text-gray-400 focus:outline-none',
+    primary: theme['button-primary-base'],
+    outline: theme['button-outline-base'],
+    link: theme['button-link-base'],
   }
   const activeStyles = {
-    primary: 'active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    outline:
-      'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:shadow-outline-gray',
-    link: 'hover:bg-gray-100 focus:shadow-outline-gray',
+    primary: theme['button-primary-active'],
+    outline: theme['button-outline-active'],
+    link: theme['button-link-active'],
   }
   const disabledStyles = {
-    primary: 'opacity-50 cursor-not-allowed',
-    outline: 'opacity-50 cursor-not-allowed bg-gray-300',
-    link: 'opacity-50 cursor-not-allowed',
+    primary: theme['button-primary-disabled'],
+    outline: theme['button-outline-disabled'],
+    link: theme['button-link-disabled'],
   }
 
   /**
    * Only used in DropdownItem.
    * Not meant for general use.
    */
-  const dropdownItemStyle =
-    'inline-flex items-center cursor-pointer w-full px-2 py-1 text-sm font-medium transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+  const dropdownItemStyle = theme['button-dropdown-item']
 
   const cls =
     layout === '__dropdownItem'