Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 7297fa9

Browse files
codebender828codebender828
committed
feat(theme): added styled system variables
1 parent 6d71eb6 commit 7297fa9

20 files changed

+376
-9
lines changed

Diff for: ‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"register-service-worker": "^1.6.2",
2121
"style-loader": "^1.0.0",
2222
"vue": "^2.6.10",
23-
"vue-router": "^3.0.3"
23+
"vue-router": "^3.0.3",
24+
"vue-styled-components": "^1.4.13"
2425
},
2526
"devDependencies": {
2627
"@babel/core": "^7.6.0",

Diff for: ‎src/App.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313

1414
<script>
1515
import Button from './components/Button'
16-
import { useIncrement } from './use-increment'
16+
import { useIncrement as useFeature } from './use-increment'
1717
1818
export default {
1919
setup () {
20-
const { state, increment } = useIncrement()
20+
const { state, increment } = useFeature()
2121
2222
return {
2323
state,

Diff for: ‎src/components/Box/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// import styled from 'vue-styled-components'

Diff for: ‎src/components/Button/button.styled.js

Whitespace-only changes.

Diff for: ‎src/components/Button/index.d.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as Vue from 'vue';
2+
3+
declare const Button: Vue.Component<{
4+
as?: String,
5+
color?: String,
6+
variant?: String,
7+
active?: Boolean,
8+
disabled?: Boolean,
9+
isLoading?: Boolean,
10+
size?: String,
11+
loadingText?: String,
12+
px?: String,
13+
py?: String,
14+
iconSpacing?: String,
15+
rounded?: Boolean,
16+
ripple?: Boolean,
17+
shadow?: Boolean
18+
}>;
19+
export default Button;

Diff for: ‎src/components/Button/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<script>
2222
export default {
2323
name: 'Button',
24-
inject: ['KiwiTheme'],
24+
inject: ['theme', 'colorMode'],
2525
props: {
2626
as: {
2727
type: String,

Diff for: ‎src/components/Button/styles.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from 'vue-styled-components'
2+
// import { colors } from '../../lib/theme'
3+
4+
const buttonProps = {
5+
variant: String
6+
}
7+
8+
/**
9+
* @description Determines style colors for solid variant
10+
* @param {{color:String, colorMode:String, _theme:Object }} params
11+
*/
12+
const solidVariantProps = ({ color, colorMode = 'light', _theme }) => {
13+
let style = {
14+
light: {
15+
bg: `${color}.500`,
16+
color: 'white',
17+
_hover: {
18+
bg: `${color}.600`
19+
},
20+
_active: {
21+
bg: `${color}.700`
22+
}
23+
}
24+
}
25+
return style[colorMode]
26+
}
27+
28+
/**
29+
* @description Generates styled for variants
30+
* @param {Object} props
31+
* @returns {Object} Variant styles object
32+
*/
33+
const variantProps = props => {
34+
switch (props.variant) {
35+
case 'solid':
36+
return solidVariantProps(props)
37+
}
38+
}
39+
40+
// const baseProps = {
41+
// display: 'inline-flex',
42+
// appearance: 'none',
43+
// alignItems: 'center',
44+
// justifyContent: 'center',
45+
// transition: 'all 250ms',
46+
// userSelect: 'none',
47+
// position: 'relative',
48+
// whiteSpace: 'nowrap',
49+
// verticalAlign: 'middle',
50+
// lineHeight: '1.2',
51+
// outline: 'none'
52+
// }
53+
54+
const Button = styled('button', buttonProps)`
55+
font-size: 1em;
56+
text-align: center;
57+
padding: 10px 15px;
58+
border-radius: ${({ radius }) => radius ? '6px' : null};
59+
${(props) => variantProps(props)}
60+
`
61+
62+
export default Button

Diff for: ‎src/components/ThemeProvider/index.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as Vue from 'vue';
2+
3+
declare const ThemeProvider: Vue.Component<{ theme?: Object }>;
4+
export default ThemeProvider;
5+

Diff for: ‎src/lib/plugin/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Theme from '../../../kiwi.config'
33
const Kiwi = {
44
install (Vue, options = {}) {
55
// Create Kiwi instance and initialize theme
6-
const KiwiTheme = {
6+
const theme = {
77
...Theme,
88
...options.theme
99
}
1010

1111
Vue.prototype.$kiwi = {
12-
theme: KiwiTheme
12+
theme
1313
}
1414

1515
// TODO:
@@ -18,7 +18,7 @@ const Kiwi = {
1818
// Provide Theme via global mixin.
1919
Vue.mixin({
2020
provide: {
21-
KiwiTheme
21+
theme
2222
}
2323
})
2424
}

Diff for: ‎src/lib/theme/borders.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @description These border styles were adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const borders = {
5+
none: 0,
6+
'1px': '1px solid',
7+
'2px': '2px solid',
8+
'4px': '4px solid'
9+
}
10+
11+
export default borders

Diff for: ‎src/lib/theme/breakpoints.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @description These breakpoint styles were adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
5+
const breakpoints = ['30em', '48em', '62em', '80em']
6+
7+
breakpoints.sm = breakpoints[0]
8+
breakpoints.md = breakpoints[1]
9+
breakpoints.lg = breakpoints[2]
10+
breakpoints.xl = breakpoints[3]
11+
12+
export default breakpoints

Diff for: ‎src/lib/theme/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import colors from './colors'
2+
import typography from './typography'
3+
4+
const theme = {
5+
colors,
6+
typography
7+
}
8+
9+
export default theme

Diff for: ‎src/lib/theme/opacity.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @description These opacity styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const opacity = {
5+
'0': '0',
6+
'20%': '0.2',
7+
'40%': '0.4',
8+
'60%': '0.6',
9+
'80%': '0.8',
10+
'100%': '1'
11+
}
12+
13+
export default opacity

Diff for: ‎src/lib/theme/radii.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @description These radii styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const radii = {
5+
none: '0',
6+
sm: '0.125rem',
7+
md: '0.25rem',
8+
lg: '0.5rem',
9+
full: '9999px'
10+
}
11+
12+
export default radii

Diff for: ‎src/lib/theme/shadows.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* @description These shadow styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const shadows = {
5+
sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
6+
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
7+
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
8+
xl:
9+
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
10+
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
11+
outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
12+
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
13+
none: 'none'
14+
}
15+
16+
export default shadows

Diff for: ‎src/lib/theme/sizes.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* @description These sizes styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
export const baseSizes = {
5+
px: '1px',
6+
'0': '0',
7+
'1': '0.25rem',
8+
'2': '0.5rem',
9+
'3': '0.75rem',
10+
'4': '1rem',
11+
'5': '1.25rem',
12+
'6': '1.5rem',
13+
'8': '2rem',
14+
'10': '2.5rem',
15+
'12': '3rem',
16+
'16': '4rem',
17+
'20': '5rem',
18+
'24': '6rem',
19+
'32': '8rem',
20+
'40': '10rem',
21+
'48': '12rem',
22+
'56': '14rem',
23+
'64': '16rem'
24+
}
25+
26+
const largeSizes = {
27+
full: '100%',
28+
'3xs': '14rem',
29+
'2xs': '16rem',
30+
xs: '20rem',
31+
sm: '24rem',
32+
md: '28rem',
33+
lg: '32rem',
34+
xl: '36rem',
35+
'2xl': '42rem',
36+
'3xl': '48rem',
37+
'4xl': '56rem',
38+
'5xl': '64rem',
39+
'6xl': '72rem'
40+
}
41+
42+
const containers = {
43+
sm: '640px',
44+
md: '768px',
45+
lg: '1024px',
46+
xl: '1280px'
47+
}
48+
49+
const sizes = {
50+
...baseSizes,
51+
...largeSizes,
52+
containers
53+
}
54+
55+
export default sizes

Diff for: ‎src/lib/theme/typography.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const typography = {
5+
letterSpacings: {
6+
tighter: '-0.05em',
7+
tight: '-0.025em',
8+
normal: '0',
9+
wide: '0.025em',
10+
wider: '0.05em',
11+
widest: '0.1em'
12+
},
13+
lineHeights: {
14+
normal: 'normal',
15+
none: '1',
16+
shorter: '1.25',
17+
short: '1.375',
18+
base: '1.5',
19+
tall: '1.625',
20+
taller: '2'
21+
},
22+
fontWeights: {
23+
hairline: 100,
24+
thin: 200,
25+
light: 300,
26+
normal: 400,
27+
medium: 500,
28+
semibold: 600,
29+
bold: 700,
30+
extrabold: 800,
31+
black: 900
32+
},
33+
fonts: {
34+
heading: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
35+
body: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
36+
mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`
37+
},
38+
fontSizes: {
39+
xs: '0.75rem',
40+
sm: '0.875rem',
41+
md: '1rem',
42+
lg: '1.125rem',
43+
xl: '1.25rem',
44+
'2xl': '1.5rem',
45+
'3xl': '1.875rem',
46+
'4xl': '2.25rem',
47+
'5xl': '3rem',
48+
'6xl': '4rem'
49+
}
50+
}
51+
52+
export default typography

Diff for: ‎src/lib/theme/utils/colors.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Here we shall have files functions that manipulate colors based on the theme on a per component basis
2+
/**
3+
* An example would be in the `Badge` component
4+
* ```js
5+
* import { addOpacity } from '@/lib/theme/utils'
6+
* let foo = addOpacity('green')
7+
* ```
8+
*/

Diff for: ‎src/lib/theme/z-indices.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
3+
*/
4+
const zIndices = {
5+
hide: -1,
6+
auto: 'auto',
7+
base: 0,
8+
docked: 10,
9+
dropdown: 1000,
10+
sticky: 1100,
11+
banner: 1200,
12+
overlay: 1300,
13+
modal: 1400,
14+
popover: 1500,
15+
skipLink: 1600,
16+
toast: 1700,
17+
tooltip: 1800
18+
}
19+
20+
export default zIndices

0 commit comments

Comments
 (0)