feat(theme): added styled system variables

Author: codebender828

package.json

@@ -20,7 +20,8 @@
     "register-service-worker": "^1.6.2",
     "style-loader": "^1.0.0",
     "vue": "^2.6.10",
-    "vue-router": "^3.0.3"
+    "vue-router": "^3.0.3",
+    "vue-styled-components": "^1.4.13"
   },
   "devDependencies": {
     "@babel/core": "^7.6.0",

src/App.vue

@@ -13,11 +13,11 @@
 
 <script>
 import Button from './components/Button'
-import { useIncrement } from './use-increment'
+import { useIncrement as useFeature } from './use-increment'
 
 export default {
   setup () {
-    const { state, increment } = useIncrement()
+    const { state, increment } = useFeature()
 
     return {
       state,

src/components/Box/index.js

@@ -0,0 +1 @@
+// import styled from 'vue-styled-components'

src/components/Button/button.styled.js

@@ -0,0 +1,19 @@
+import * as Vue from 'vue';
+
+declare const Button: Vue.Component<{
+  as?: String,
+  color?: String,
+  variant?: String,
+  active?: Boolean,
+  disabled?: Boolean,
+  isLoading?: Boolean,
+  size?: String,
+  loadingText?: String,
+  px?: String,
+  py?: String,
+  iconSpacing?: String,
+  rounded?: Boolean,
+  ripple?: Boolean,
+  shadow?: Boolean
+}>;
+export default Button;

src/components/Button/index.d.ts

@@ -21,7 +21,7 @@
 <script>
 export default {
   name: 'Button',
-  inject: ['KiwiTheme'],
+  inject: ['theme', 'colorMode'],
   props: {
     as: {
       type: String,

src/components/Button/index.vue

@@ -0,0 +1,62 @@
+import styled from 'vue-styled-components'
+// import { colors } from '../../lib/theme'
+
+const buttonProps = {
+  variant: String
+}
+
+/**
+ * @description Determines style colors for solid variant
+ * @param {{color:String, colorMode:String, _theme:Object }} params
+ */
+const solidVariantProps = ({ color, colorMode = 'light', _theme }) => {
+  let style = {
+    light: {
+      bg: `${color}.500`,
+      color: 'white',
+      _hover: {
+        bg: `${color}.600`
+      },
+      _active: {
+        bg: `${color}.700`
+      }
+    }
+  }
+  return style[colorMode]
+}
+
+/**
+ * @description Generates styled for variants
+ * @param {Object} props
+ * @returns {Object} Variant styles object
+ */
+const variantProps = props => {
+  switch (props.variant) {
+    case 'solid':
+      return solidVariantProps(props)
+  }
+}
+
+// const baseProps = {
+//   display: 'inline-flex',
+//   appearance: 'none',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+//   transition: 'all 250ms',
+//   userSelect: 'none',
+//   position: 'relative',
+//   whiteSpace: 'nowrap',
+//   verticalAlign: 'middle',
+//   lineHeight: '1.2',
+//   outline: 'none'
+// }
+
+const Button = styled('button', buttonProps)`
+  font-size: 1em;
+  text-align: center;
+  padding: 10px 15px;
+  border-radius: ${({ radius }) => radius ? '6px' : null};
+  ${(props) => variantProps(props)}
+`
+
+export default Button

src/components/Button/styles.js

@@ -0,0 +1,5 @@
+import * as Vue from 'vue';
+
+declare const ThemeProvider: Vue.Component<{ theme?: Object }>;
+export default ThemeProvider;
+

src/components/ThemeProvider/index.d.ts

@@ -3,13 +3,13 @@ import Theme from '../../../kiwi.config'
 const Kiwi = {
   install (Vue, options = {}) {
     // Create Kiwi instance and initialize theme
-    const KiwiTheme = {
+    const theme = {
       ...Theme,
       ...options.theme
     }
 
     Vue.prototype.$kiwi = {
-      theme: KiwiTheme
+      theme
     }
 
     // TODO:
@@ -18,7 +18,7 @@ const Kiwi = {
     // Provide Theme via global mixin.
     Vue.mixin({
       provide: {
-        KiwiTheme
+        theme
       }
     })
   }

src/lib/plugin/index.js

@@ -0,0 +1,11 @@
+/**
+ * @description These border styles were adapted from [@chakra-ui](https://chakra-ui.com/)
+ */
+const borders = {
+  none: 0,
+  '1px': '1px solid',
+  '2px': '2px solid',
+  '4px': '4px solid'
+}
+
+export default borders