refactor: move rules and variables to themes/teams

specifications/creating-components.md

@@ -46,7 +46,7 @@ We explored the following approaches.  The below code snippets simplified for ea
 A HOC that wraps the provided component and passes features through props.
 
 ```jsx
-import imageRules from './imageRules'
+import imageStyles from './imageStyles'
 import imageVariables from './imageVariables'
 
 const Image = (props) => {
@@ -56,7 +56,7 @@ const Image = (props) => {
 }
 
 export default createComponent(Image, {
-  rules: imageRules,
+  rules: imageStyles,
   variables: imageVariables,
 })
 ```
@@ -90,15 +90,15 @@ Directly import context consumers and use them in the render method to access th
 
 ```jsx
 import Provider from '../Provider'
-import imageRules from './imageRules'
+import imageStyles from './imageStyles'
 import imageVariables from './imageVariables'
 
 class Image extends React.Component {
   render() {
     return (
       <Provider.Consumer
         render={(theme) => {
-          const classes = getClasses(this.props, imageRules, imageVariables, theme)
+          const classes = getClasses(this.props, imageStyles, imageVariables, theme)
 
           return <img className={classes.root} />
         }}
@@ -114,12 +114,12 @@ A function to be returned in the render method. Calls back with the theme.  Impl
 
 ```jsx
 import Provider from '../Provider'
-import imageRules from './imageRules'
+import imageStyles from './imageStyles'
 import imageVariables from './imageVariables'
 
 const Image = (props) => {
   return hocContext((theme) => {
-    const classes = getClasses(props, imageRules, imageVariables, theme)
+    const classes = getClasses(props, imageStyles, imageVariables, theme)
 
     return <img className={classes.root} />
   })

src/components/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { AutoControlledComponent, customPropTypes, childrenExist } from '../../lib'
-import accordionRules from './accordionRules'
+import accordionStyles from '../../themes/teams/components/Accordion/accordionStyles'
 import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
@@ -66,7 +66,7 @@ class Accordion extends AutoControlledComponent<any, any> {
     accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   }
 
-  static rules = accordionRules
+  static styles = accordionStyles
 
   static handledProps = [
     'accessibility',

src/components/Accordion/AccordionContent.tsx

@@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
-import accordionContentRules from './accordionContentRules'
-import accordionContentVariables from './accordionContentVariables'
+import accordionContentStyles from '../../themes/teams/components/Accordion/accordionContentStyles'
+import accordionContentVariables from '../../themes/teams/components/Accordion/accordionContentVariables'
 
 /**
  * A standard AccordionContent.
@@ -42,7 +42,7 @@ class AccordionContent extends UIComponent<any, any> {
 
   static handledProps = ['as', 'active', 'children', 'className', 'content', 'onClick']
 
-  static rules = accordionContentRules
+  static styles = accordionContentStyles
 
   static variables = accordionContentVariables
 

src/components/Accordion/AccordionTitle.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
-import accordionTitleRules from './accordionTitleRules'
+import accordionTitleStyles from '../../themes/teams/components/Accordion/accordionTitleStyles'
 
 /**
  * A standard AccordionTitle.
@@ -45,7 +45,7 @@ class AccordionTitle extends UIComponent<any, any> {
 
   static handledProps = ['as', 'active', 'children', 'className', 'content', 'index', 'onClick']
 
-  static rules = accordionTitleRules
+  static styles = accordionTitleStyles
 
   handleClick = e => {
     _.invoke(this.props, 'onClick', e, this.props)

src/components/Avatar/Avatar.tsx

@@ -3,8 +3,8 @@ import * as React from 'react'
 import { Image, Label, Icon } from '../../'
 
 import { customPropTypes, UIComponent } from '../../lib'
-import avatarRules from './avatarRules'
-import avatarVariables from './avatarVariables'
+import avatarStyles from '../../themes/teams/components/Avatar/avatarStyles'
+import avatarVariables from '../../themes/teams/components/Avatar/avatarVariables'
 
 /**
  * An avatar is a graphic representation of user alongside with a presence icon.
@@ -18,7 +18,7 @@ class Avatar extends UIComponent<any, any> {
 
   static handledProps = ['alt', 'as', 'className', 'getInitials', 'name', 'size', 'src', 'status']
 
-  static rules = avatarRules
+  static styles = avatarStyles
 
   static variables = avatarVariables
 

src/components/Button/Button.tsx

@@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { UIComponent, childrenExist, customPropTypes } from '../../lib'
-import buttonRules from './buttonRules'
-import buttonVariables from './buttonVariables'
+import buttonStyles from '../../themes/teams/components/Button/buttonStyles'
+import buttonVariables from '../../themes/teams/components/Button/buttonVariables'
 import Icon from '../Icon'
 import Text from '../Text'
 import { ButtonBehavior } from '../../lib/accessibility'
@@ -18,7 +18,7 @@ class Button extends UIComponent<any, any> {
 
   public static className = 'ui-button'
 
-  public static rules = buttonRules
+  public static styles = buttonStyles
 
   public static variables = buttonVariables
 

src/components/Chat/Chat.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, customPropTypes, UIComponent } from '../../lib'
-import chatRules from './chatRules'
+import chatStyles from '../../themes/teams/components/Chat/chatStyles'
 import ChatMessage from './ChatMessage'
 
 class Chat extends UIComponent<any, any> {
@@ -27,7 +27,7 @@ class Chat extends UIComponent<any, any> {
 
   static defaultProps = { as: 'ul' }
 
-  static rules = chatRules
+  static styles = chatStyles
 
   static Message = ChatMessage
 

src/components/Chat/ChatMessage.tsx

@@ -3,8 +3,8 @@ import * as PropTypes from 'prop-types'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
-import chatMessageRules from './chatMessageRules'
-import chatMessageVariables from './chatMessageVariables'
+import chatMessageStyles from '../../themes/teams/components/Chat/chatMessageStyles'
+import chatMessageVariables from '../../themes/teams/components/Chat/chatMessageVariables'
 
 class ChatMessage extends UIComponent<any, any> {
   static className = 'ui-chat__message'
@@ -35,7 +35,7 @@ class ChatMessage extends UIComponent<any, any> {
     as: 'li',
   }
 
-  static rules = chatMessageRules
+  static styles = chatMessageStyles
 
   static variables = chatMessageVariables
 

src/components/Divider/Divider.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
-import dividerRules from './dividerRules'
-import dividerVariables from './dividerVariables'
+import dividerStyles from '../../themes/teams/components/Divider/dividerStyles'
+import dividerVariables from '../../themes/teams/components/Divider/dividerVariables'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
@@ -17,7 +17,7 @@ class Divider extends UIComponent<any, any> {
 
   static className = 'ui-divider'
 
-  static rules = dividerRules
+  static styles = dividerStyles
 
   static variables = dividerVariables
 

src/components/Header/Header.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import { childrenExist, customPropTypes, UIComponent } from '../../lib'
 import HeaderDescription from './HeaderDescription'
-import headerRules from './headerRules'
+import headerStyles from '../../themes/teams/components/Header/headerStyles'
 
 /**
  * A header provides a short summary of content
@@ -42,7 +42,7 @@ class Header extends UIComponent<any, any> {
 
   static handledProps = ['as', 'children', 'className', 'content', 'description', 'textAlign']
 
-  static rules = headerRules
+  static styles = headerStyles
 
   static Description = HeaderDescription
 

src/components/Header/HeaderDescription.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
-import headerDescriptionRules from './headerDescriptionRules'
+import headerDescriptionStyles from '../../themes/teams/components/Header/headerDescriptionStyles'
 
 /**
  * Headers may contain description.
@@ -35,7 +35,7 @@ class HeaderDescription extends UIComponent<any, any> {
 
   static handledProps = ['as', 'children', 'className', 'content']
 
-  static rules = headerDescriptionRules
+  static styles = headerDescriptionStyles
 
   renderComponent({ ElementType, classes, rest }) {
     const { children, content } = this.props

src/components/Icon/Icon.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import { customPropTypes, UIComponent, createShorthandFactory } from '../../lib'
 
-import iconRules from './iconRules'
-import iconVariables from './iconVariables'
+import iconStyles from '../../themes/teams/components/Icon/iconStyles'
+import iconVariables from '../../themes/teams/components/Icon/iconVariables'
 import svgIcons from './svgIcons'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
@@ -77,7 +77,7 @@ class Icon extends UIComponent<any, any> {
     size: 'normal',
   }
 
-  static rules = iconRules
+  static styles = iconStyles
 
   renderFontIcon(ElementType, classes, rest): React.ReactNode {
     return <ElementType className={classes.root} {...rest} />

src/components/Image/Image.tsx

@@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { customPropTypes, UIComponent } from '../../lib'
-import imageRules from './imageRules'
-import imageVariables from './imageVariables'
+import imageStyles from '../../themes/teams/components/Image/imageStyles'
+import imageVariables from '../../themes/teams/components/Image/imageVariables'
 import { ImageBehavior } from '../../lib/accessibility'
 
 /**
@@ -14,7 +14,7 @@ class Image extends UIComponent<any, any> {
 
   static displayName = 'Image'
 
-  static rules = imageRules
+  static styles = imageStyles
 
   static variables = imageVariables
 

src/components/Input/Input.tsx

@@ -10,8 +10,8 @@ import {
   partitionHTMLProps,
   UIComponent,
 } from '../../lib'
-import inputRules from './inputRules'
-import inputVariables from './inputVariables'
+import inputStyles from '../../themes/teams/components/Input/inputStyles'
+import inputVariables from '../../themes/teams/components/Input/inputVariables'
 import Icon from '../Icon'
 import callable from '../../lib/callable'
 
@@ -24,7 +24,7 @@ class Input extends UIComponent<any, any> {
 
   static displayName = 'Input'
 
-  static rules = inputRules
+  static styles = inputStyles
   static variables = inputVariables
 
   static propTypes = {

src/components/Label/Label.tsx

@@ -5,8 +5,8 @@ import * as _ from 'lodash'
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
 import { Icon } from '../..'
-import labelRules from './labelRules'
-import labelVariables from './labelVariables'
+import labelStyles from '../../themes/teams/components/Label/labelStyles'
+import labelVariables from '../../themes/teams/components/Label/labelVariables'
 import callable from '../../lib/callable'
 
 /**
@@ -65,7 +65,7 @@ class Label extends UIComponent<any, any> {
     as: 'label',
   }
 
-  static rules = labelRules
+  static styles = labelStyles
 
   static variables = labelVariables
 

src/components/Layout/Layout.tsx

@@ -3,14 +3,14 @@ import * as PropTypes from 'prop-types'
 import * as cx from 'classnames'
 
 import { customPropTypes, UIComponent } from '../../lib'
-import layoutRules from './layoutRules'
+import layoutStyles from '../../themes/teams/components/Layout/layoutStyles'
 
 class Layout extends UIComponent<any, any> {
   static className = 'ui-layout'
 
   static displayName = 'Layout'
 
-  static rules = layoutRules
+  static styles = layoutStyles
 
   static propTypes = {
     as: customPropTypes.as,

src/components/List/List.tsx

@@ -4,18 +4,15 @@ import * as PropTypes from 'prop-types'
 
 import { customPropTypes, UIComponent, childrenExist } from '../../lib'
 import ListItem from './ListItem'
-import listRules from './listRules'
-import listVariables from './listVariables'
+import listStyles from '../../themes/teams/components/List/listStyles'
 import { ListBehavior } from '../../lib/accessibility'
 
 class List extends UIComponent<any, any> {
   static displayName = 'List'
 
   static className = 'ui-list'
 
-  static rules = listRules
-
-  static variables = listVariables
+  static styles = listStyles
 
   static propTypes = {
     as: customPropTypes.as,

src/components/List/ListItem.tsx

@@ -4,8 +4,8 @@ import * as cx from 'classnames'
 
 import { createShorthandFactory, customPropTypes, pxToRem, UIComponent } from '../../lib'
 import Layout from '../Layout'
-import listVariables from './listVariables'
-import listItemRules from './listItemRules'
+import listVariables from '../../themes/teams/components/List/listItemVariables'
+import listItemStyles from '../../themes/teams/components/List/listItemStyles'
 import { ListItemBehavior } from '../../lib/accessibility'
 
 class ListItem extends UIComponent<any, any> {
@@ -15,7 +15,7 @@ class ListItem extends UIComponent<any, any> {
 
   static className = 'ui-list__item'
 
-  static rules = listItemRules
+  static styles = listItemStyles
 
   static variables = listVariables