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

Commit 4c33e13

Browse files
gregbergegregberge
committed
feat: flatten theme & utils
BREAKING CHANGE: previous version will break if you use theme.
1 parent cf7f974 commit 4c33e13

24 files changed

+508
-794
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
},
5454
"dependencies": {
5555
"classnames": "^2.2.5",
56-
"object.omit": "^3.0.0",
5756
"polished": "^1.9.2",
5857
"prop-types": "^15.6.0",
5958
"recompact": "^3.2.1"

‎src/Box.js‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React from 'react'
22
import classNames from 'classnames'
33
import PropTypes from 'prop-types'
44
import styled, { css } from 'styled-components'
5-
import omit from 'object.omit'
6-
import defaultTheme from './style/defaultTheme'
5+
import * as defaultTheme from './style/defaultTheme'
76
import handleRef from './internal/handleRef'
87

98
const addProp = (propName, attribute, transform = x => x) => props =>
@@ -13,23 +12,21 @@ const addProp = (propName, attribute, transform = x => x) => props =>
1312
`
1413
: null
1514

16-
const BoxComponent = ({ className, component: Component, ...props }) => (
17-
<Component
18-
className={classNames('sui-box', className)}
19-
{...omit(props, [
20-
'flex',
21-
'theme',
22-
'direction',
23-
'wrap',
24-
'alignItems',
25-
'alignContent',
26-
'alignSelf',
27-
'justifyContent',
28-
'padding',
29-
'margin',
30-
])}
31-
/>
32-
)
15+
const BoxComponent = ({
16+
className,
17+
component: Component,
18+
flex,
19+
theme,
20+
direction,
21+
wrap,
22+
alignItems,
23+
alignContent,
24+
alignSelf,
25+
justifyContent,
26+
padding,
27+
margin,
28+
...props
29+
}) => <Component className={classNames('sui-box', className)} {...props} />
3330

3431
/** @component */
3532
const Box = styled(handleRef(BoxComponent))`

‎src/Button.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import classNames from 'classnames'
44
import styled from 'styled-components'
5-
import { darken } from 'polished'
65
import handleRef from './internal/handleRef'
7-
import defaultTheme from './style/defaultTheme'
6+
import * as defaultTheme from './style/defaultTheme'
7+
import { th } from './utils'
88

99
const ButtonComponent = ({ className, size, ...props }) => (
1010
<button
@@ -21,40 +21,40 @@ const ButtonComponent = ({ className, size, ...props }) => (
2121

2222
const Button = styled(handleRef(ButtonComponent))`
2323
display: inline-block;
24-
padding: ${props => props.theme.textControlPadding.sm};
25-
z-index: ${props => props.theme.zIndexes.control};
26-
border-radius: ${props => props.theme.borderRadius.md};
27-
font-size: 1rem;
28-
line-height: 1.5;
29-
background-color: ${props => props.theme.colors.primary};
30-
color: ${props => props.theme.colors.white};
31-
border: 0;
24+
padding: ${th('btnPaddingY')} ${th('btnPaddingX')};
25+
z-index: ${th('zIndexControl')};
26+
border-radius: ${th('borderRadius')};
27+
font-size: ${th('fontSizeBase')};
28+
line-height: ${th('lineHeightBase')};
29+
background-color: ${th('btnBackgroundColor')};
30+
color: ${th('white')};
31+
border-width: ${th('btnBorderWidth')};
3232
cursor: pointer;
33-
transition: background-color 300ms;
33+
transition: ${th('transitionBase')};
3434
3535
&:focus {
36-
${props => props.theme.mixins.controlFocus};
36+
${th('controlFocus')};
3737
}
3838
3939
&:not(:disabled):hover,
4040
&:not(:disabled):active {
41-
background-color: ${props => darken(0.05, props.theme.colors.primary)};
41+
background-color: ${th('btnHoverBackgroundColor')};
4242
}
4343
44-
&.sui-button-lg {
45-
padding: ${props => props.theme.textControlPadding.lg};
46-
font-size: ${props => props.theme.controlFontSize.lg};
47-
border-radius: ${props => props.theme.borderRadius.lg};
44+
&.sui-button-sm {
45+
padding: ${th('btnPaddingYSm')} ${th('btnPaddingXSm')};
46+
font-size: ${th('fontSizeSm')};
47+
border-radius: ${th('borderRadiusSm')};
4848
}
4949
50-
&.sui-button-sm {
51-
padding: ${props => props.theme.textControlPadding.sm};
52-
font-size: ${props => props.theme.controlFontSize.sm};
53-
border-radius: ${props => props.theme.borderRadius.sm};
50+
&.sui-button-lg {
51+
padding: ${th('btnPaddingYLg')} ${th('btnPaddingXLg')};
52+
font-size: ${th('fontSizeLg')};
53+
border-radius: ${th('borderRadiusLg')};
5454
}
5555
5656
&:disabled {
57-
opacity: 0.8;
57+
opacity: ${th('btnDisabledOpacity')};
5858
}
5959
`
6060

‎src/Checkbox.js‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
33
import styled from 'styled-components'
44
import classNames from 'classnames'
55
import InnerSwitch from './internal/InnerSwitch'
6-
import defaultTheme from './style/defaultTheme'
6+
import * as defaultTheme from './style/defaultTheme'
7+
import { th } from './utils'
78

8-
const CheckboxComponent = ({ className, size, ...props }) => (
9+
const CheckboxComponent = ({ className, size, theme, ...props }) => (
910
<div
1011
className={classNames(
1112
'sui-checkbox',
@@ -43,23 +44,23 @@ const Checkbox = styled(CheckboxComponent)`
4344
position: relative;
4445
width: 1.5rem;
4546
height: 1.5rem;
46-
z-index: ${props => props.theme.zIndexes.control};
47+
z-index: ${th('zIndexControl')};
4748
4849
.sui-checkbox-content {
4950
display: flex;
5051
align-items: center;
5152
justify-content: center;
5253
width: 1rem;
5354
height: 1rem;
54-
background-color: ${props => props.theme.colors.white};
55-
border-radius: ${props => props.theme.borderRadius.md};
56-
border: 1px solid ${props => props.theme.colors.controlBorder};
57-
transition: border-color ${props => props.theme.transition.time},
58-
background-color ${props => props.theme.transition.time},
59-
box-shadow ${props => props.theme.transition.time};
55+
background-color: ${th('inputBgColor')};
56+
border-radius: ${th('borderRadius')};
57+
border-style: solid;
58+
border-width: ${th('inputBorderWidth')};
59+
border-color: ${th('inputBorderColor')};
60+
transition: ${th('transitionBase')};
6061
6162
&.checked {
62-
background-color: ${props => props.theme.colors.primary};
63+
background-color: ${th('primary')};
6364
border-color: transparent;
6465
6566
svg {
@@ -68,24 +69,24 @@ const Checkbox = styled(CheckboxComponent)`
6869
}
6970
7071
&.focused {
71-
${props => props.theme.mixins.controlFocus};
72+
${th('controlFocus')};
7273
}
7374
7475
&.disabled {
75-
background-color: ${props => props.theme.colors.disabledControlBg};
76+
background-color: ${th('inputDisabledBgColor')};
7677
}
7778
}
7879
7980
svg {
8081
width: 0.75rem;
8182
pointer-events: none;
8283
transform: scale(0);
83-
transition: transform ${props => props.theme.transition.time};
84+
transition: ${th('transitionBase')};
8485
}
8586
8687
&.sui-checkbox-sm {
8788
.sui-checkbox-content {
88-
border-radius: ${props => props.theme.borderRadius.sm};
89+
border-radius: ${th('borderRadiusSm')};
8990
width: 0.875rem;
9091
height: 0.875rem;
9192
}
@@ -97,7 +98,7 @@ const Checkbox = styled(CheckboxComponent)`
9798
9899
&.sui-checkbox-lg {
99100
.sui-checkbox-content {
100-
border-radius: ${props => props.theme.borderRadius.lg};
101+
border-radius: ${th('borderRadiusLg')};
101102
width: 1.25rem;
102103
height: 1.25rem;
103104
}

‎src/Col.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React from 'react'
22
import classNames from 'classnames'
33
import PropTypes from 'prop-types'
44
import styled, { css } from 'styled-components'
5-
import omit from 'object.omit'
6-
import defaultTheme from './style/defaultTheme'
5+
import * as defaultTheme from './style/defaultTheme'
76
import handleRef from './internal/handleRef'
87

98
const GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto']
@@ -49,7 +48,7 @@ function generateBreakPoint(breakpoint) {
4948
`
5049
}
5150

52-
const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
51+
const ColComponent = ({ className, xs, sm, md, lg, xl, theme, ...props }) => (
5352
<div
5453
className={classNames(
5554
'sui-col',
@@ -67,7 +66,7 @@ const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
6766
},
6867
className,
6968
)}
70-
{...omit(props, ['theme'])}
69+
{...props}
7170
/>
7271
)
7372

‎src/ControlFeedBack.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react'
22
import styled from 'styled-components'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
5-
import defaultTheme from './style/defaultTheme'
5+
import * as defaultTheme from './style/defaultTheme'
6+
import { th } from './utils'
67

7-
const ControlFeedbackComponent = ({ className, valid, ...props }) => (
8+
const ControlFeedbackComponent = ({ className, theme, valid, ...props }) => (
89
<div
910
className={classNames(
1011
'sui-control-feedback',
@@ -24,11 +25,11 @@ const ControlFeedback = styled(ControlFeedbackComponent)`
2425
font-size: 80%;
2526
2627
&.sui-is-valid {
27-
color: ${props => props.theme.colors.success};
28+
color: ${th('success')};
2829
}
2930
3031
&.sui-is-invalid {
31-
color: ${props => props.theme.colors.danger};
32+
color: ${th('danger')};
3233
}
3334
`
3435

‎src/FormCheck.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
55

6-
const FormCheckComponent = ({ className, inline, ...props }) => (
6+
const FormCheckComponent = ({ className, inline, theme, ...props }) => (
77
<div
88
className={classNames(
99
'sui-form-check',

‎src/FormCheckLabel.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@ import React from 'react'
33
import styled from 'styled-components'
44
import PropTypes from 'prop-types'
55
import classNames from 'classnames'
6-
import defaultTheme from './style/defaultTheme'
6+
import * as defaultTheme from './style/defaultTheme'
7+
import { th } from './utils'
78

8-
const FormCheckLabelComponent = ({ className, ...props }) => (
9+
const FormCheckLabelComponent = ({ className, theme, ...props }) => (
910
<label className={classNames('sui-form-check-label', className)} {...props} />
1011
)
1112

1213
const FormCheckLabel = styled(FormCheckLabelComponent)`
1314
padding-left: 0.25rem;
1415
1516
[class*='disabled'] ~ & {
16-
color: ${props => props.theme.colors.disabledControlText};
17+
color: ${th('inputDisabledText')};
1718
}
1819
`
1920

‎src/FormGroup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
55

6-
const FormGroupComponent = ({ className, ...props }) => (
6+
const FormGroupComponent = ({ className, theme, ...props }) => (
77
<div className={classNames('sui-form-group', className)} {...props} />
88
)
99

0 commit comments

Comments
 (0)