Skip to content
This repository has been archived by the owner on Mar 31, 2021. It is now read-only.

Commit

Permalink
Move fannypack theme into its own 'context' as it was conflicticting …
Browse files Browse the repository at this point in the history 
…with Reakit
  • Loading branch information
@jxom
jxom committed Nov 1, 2018
1 parent 462568c commit 81ed6e8
Show file tree
Hide file tree
Showing 34 changed files with 136 additions and 135 deletions.
4 changes: 2 additions & 2 deletions src/Alert/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Label from '../Label';

export const AlertTitle = styled(Label)`
& {
${theme('Alert.title.base')};
${theme('fannypack.Alert.title.base')};
}
`;

Expand All @@ -21,6 +21,6 @@ export default styled(Box)`
padding: 1rem;
& {
${theme('Alert.base')};
${theme('fannypack.Alert.base')};
}
`;
2 changes: 1 addition & 1 deletion src/Blockquote/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export default styled(Blockquote)`
padding: 1rem;
& {
${theme('Blockquote.base')};
${theme('fannypack.Blockquote.base')};
}
`;
16 changes: 8 additions & 8 deletions src/Button/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const sizeProperties = {
padding: 0 0.5rem;
}
& {
${theme('Button.sizes.small')};
${theme('fannypack.Button.sizes.small')};
}
`,
medium: css`
Expand All @@ -22,7 +22,7 @@ const sizeProperties = {
padding: 0 1.25rem;
}
& {
${theme('Button.sizes.medium')};
${theme('fannypack.Button.sizes.medium')};
}
`,
large: css`
Expand All @@ -32,7 +32,7 @@ const sizeProperties = {
padding: 0 1.5rem;
}
& {
${theme('Button.sizes.large')};
${theme('fannypack.Button.sizes.large')};
}
`
};
Expand All @@ -51,7 +51,7 @@ const linkProperties = css`
}
}
& {
${theme('Button.link')};
${theme('fannypack.Button.link')};
}
`;
const outlinedProperties = css`
Expand All @@ -65,7 +65,7 @@ const outlinedProperties = css`
}
}
& {
${theme('Button.outlined')};
${theme('fannypack.Button.outlined')};
}
`;

Expand All @@ -77,7 +77,7 @@ const disabledProperties = css`
pointer-events: unset;
}
& {
${theme('Button.disabled')};
${theme('fannypack.Button.disabled')};
}
`;

Expand All @@ -98,7 +98,7 @@ const loadingProperties = css`
}
}
& {
${theme('Button.loading')};
${theme('fannypack.Button.loading')};
}
`;

Expand Down Expand Up @@ -144,6 +144,6 @@ export default styled(Button)`
: ''} /* Add interactive styles */
& {
${theme('Button.base')}
${theme('fannypack.Button.base')}
}
`;
4 changes: 2 additions & 2 deletions src/Buttons/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const groupedProperties = css`
border-top-right-radius: 0px;
}
& {
${theme('Buttons.grouped')};
${theme('fannypack.Buttons.grouped')};
}
`;

Expand All @@ -23,7 +23,7 @@ export default styled(Box)`
margin-left: ${props => (props.isGrouped ? '' : '0.5rem')};
}
& {
${theme('Buttons.base')};
${theme('fannypack.Buttons.base')};
}
${props => props.isGrouped && groupedProperties};
`;
4 changes: 2 additions & 2 deletions src/Checkbox/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const CheckboxIcon = styled(Box)`
}
& {
${theme('Checkbox.icon.base')};
${theme('fannypack.Checkbox.icon.base')};
}
`;

Expand Down Expand Up @@ -56,5 +56,5 @@ export default styled(Label)`
display: flex;
align-items: center;
${theme('Checkbox.base')};
${theme('fannypack.Checkbox.base')};
`;
6 changes: 3 additions & 3 deletions src/Code/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ export default styled(Code)`
code& {
padding: 0.1rem 0.2rem;
${theme('Code.inline')};
${theme('fannypack.Code.inline')};
}
pre& {
padding: 1rem;
${theme('Code.block')};
${theme('fannypack.Code.block')};
}
& {
${theme('Code.base')};
${theme('fannypack.Code.base')};
}
`;
18 changes: 9 additions & 9 deletions src/Column/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const getSpreadProperties = props => {
!spreadFullHD
) {
return css`
@media (max-width: ${theme('layout.tabletBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.tabletBreakpoint')}px) {
flex: none;
width: 100%;
}
Expand All @@ -45,7 +45,7 @@ const getSpreadProperties = props => {
if (!spread) return null;
if (breakpoint) {
return css`
@media (max-width: ${theme(`layout.${breakpoint}`)}px) {
@media (max-width: ${theme(`fannypack.layout.${breakpoint}`)}px) {
${properties};
}
`;
Expand All @@ -63,15 +63,15 @@ const getSpreadProperties = props => {
!spreadTablet &&
!spreadMobile &&
css`
@media (max-width: ${theme('layout.tabletBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.tabletBreakpoint')}px) {
width: 100%;
}
`};
${getProperties({ spread: spreadTablet, breakpoint: 'tabletBreakpoint' })};
${minBreakpoint !== 'mobile' &&
!spreadMobile &&
css`
@media (max-width: ${theme('layout.mobileBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.mobileBreakpoint')}px) {
width: 100%;
}
`};
Expand Down Expand Up @@ -106,7 +106,7 @@ const getSpreadOffsetProperties = props => {
if (!spreadOffset) return null;
if (breakpoint) {
return css`
@media (max-width: ${theme(`layout.${breakpoint}`)}px) {
@media (max-width: ${theme(`fannypack.layout.${breakpoint}`)}px) {
${properties};
}
`;
Expand All @@ -126,14 +126,14 @@ const getSpreadOffsetProperties = props => {
${!spreadTabletOffset &&
!spreadMobileOffset &&
css`
@media (max-width: ${theme('layout.tabletBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.tabletBreakpoint')}px) {
margin-left: 0;
}
`};
${getProperties({ spreadOffset: spreadTabletOffset, breakpoint: 'tabletBreakpoint' })};
${!spreadMobileOffset &&
css`
@media (max-width: ${theme('layout.mobileBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.mobileBreakpoint')}px) {
margin-left: 0;
}
`};
Expand All @@ -149,7 +149,7 @@ const Column = styled(Box)`
${props =>
!props.isGapless
? css`
padding: ${theme('layout.gapFactor')}rem;
padding: ${theme('fannypack.layout.gapFactor')}rem;
`
: null};
Expand All @@ -162,7 +162,7 @@ const Column = styled(Box)`
}
& {
${theme('Column.base')};
${theme('fannypack.Column.base')};
}
`;

Expand Down
8 changes: 4 additions & 4 deletions src/Columns/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ const getWrapProperties = props => {
if (isOneLine) {
if (minBreakpoint !== 'tablet' && minBreakpoint !== 'mobile') {
return css`
@media (max-width: ${theme('layout.tabletBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.tabletBreakpoint')}px) {
flex-wrap: wrap;
}
`;
}
if (minBreakpoint !== 'mobile') {
return css`
@media (max-width: ${theme('layout.mobileBreakpoint')}px) {
@media (max-width: ${theme('fannypack.layout.mobileBreakpoint')}px) {
flex-wrap: wrap;
}
`;
Expand All @@ -33,12 +33,12 @@ export default styled(Box)`
${props =>
!props.isGapless &&
css`
margin: 0 -${theme('layout.gapFactor')}rem;
margin: 0 -${theme('fannypack.layout.gapFactor')}rem;
`} /**/
${getWrapProperties};
& {
${theme('Columns.base')};
${theme('fannypack.Columns.base')};
}
`;
24 changes: 12 additions & 12 deletions src/Container/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,21 @@ const getResponsiveProperties = props => {
if (breakpoint) {
return css`
& {
max-width: ${theme(`layout.${breakpoint}Breakpoint`)}px;
max-width: ${theme(`fannypack.layout.${breakpoint}Breakpoint`)}px;
}
`;
}
return css`
@media (max-width: ${props => theme('layout.fullHDBreakpoint')(props) + 128}px) {
max-width: ${theme('layout.widescreenBreakpoint')}px;
@media (max-width: ${props => theme('fannypack.layout.fullHDBreakpoint')(props) + 128}px) {
max-width: ${theme('fannypack.layout.widescreenBreakpoint')}px;
}
@media (max-width: ${props => theme('layout.widescreenBreakpoint')(props) + 128}px) {
max-width: ${theme('layout.desktopBreakpoint')}px;
@media (max-width: ${props => theme('fannypack.layout.widescreenBreakpoint')(props) + 128}px) {
max-width: ${theme('fannypack.layout.desktopBreakpoint')}px;
}
@media (max-width: ${props => theme('layout.desktopBreakpoint')(props) + 128}px) {
max-width: ${theme('layout.tabletBreakpoint')}px;
@media (max-width: ${props => theme('fannypack.layout.desktopBreakpoint')(props) + 128}px) {
max-width: ${theme('fannypack.layout.tabletBreakpoint')}px;
}
`;
};
Expand All @@ -44,20 +44,20 @@ export default styled(Box)`
${props =>
!props.isFluid &&
css`
max-width: ${theme('layout.fullHDBreakpoint')}px;
max-width: ${theme('fannypack.layout.fullHDBreakpoint')}px;
`}
${props =>
props.isFluid &&
css`
margin: ${theme('Container.fluidMargin')};
margin: ${theme('fannypack.Container.fluidMargin')};
`}
@media (max-width: ${theme('layout.tabletBreakpoint')}px) {
margin: ${theme('Container.tabletMargin')};
@media (max-width: ${theme('fannypack.layout.tabletBreakpoint')}px) {
margin: ${theme('fannypack.Container.tabletMargin')};
}
${getResponsiveProperties} /**/
${props => !props.isFluid && alignProperties[props.align]};
${theme('Container.base')}
${theme('fannypack.Container.base')}
`;
6 changes: 3 additions & 3 deletions src/Divider/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ const contentProperties = css`
padding: 0.2rem 0.5rem;
& {
${theme('Divider.content')}
${theme('fannypack.Divider.content')}
}
}
`;
const verticalProperties = css`
height: auto;
& {
${theme('Divider.vertical')};
${theme('fannypack.Divider.vertical')};
}
`;

Expand All @@ -39,6 +39,6 @@ export default styled(Divider)`
}
& {
${theme('Divider.base')};
${theme('fannypack.Divider.base')};
}
`;
12 changes: 6 additions & 6 deletions src/FieldWrapper/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Label = styled(_Label)`
margin-bottom: 0 !important;
& {
${theme('FieldWrapper.label')};
${theme('fannypack.FieldWrapper.label')};
}
`;

Expand All @@ -19,7 +19,7 @@ export const DescriptionText = styled(_Text)`
font-size: 0.8rem;
& {
${theme('FieldWrapper.description')};
${theme('fannypack.FieldWrapper.description')};
}
`;

Expand All @@ -29,7 +29,7 @@ export const HintText = styled(_Text)`
margin-top: 0.25rem;
& {
${theme('FieldWrapper.hint')};
${theme('fannypack.FieldWrapper.hint')};
}
`;

Expand All @@ -38,7 +38,7 @@ export const OptionalText = styled(_Text)`
color: ${palette('textLightest')};
& {
${theme('FieldWrapper.optional')};
${theme('fannypack.FieldWrapper.optional')};
}
`;

Expand All @@ -48,7 +48,7 @@ export const ValidationText = styled(_Text)`
margin-top: 0.25rem;
& {
${theme('FieldWrapper.validation')};
${theme('fannypack.FieldWrapper.validation')};
}
`;

Expand All @@ -61,5 +61,5 @@ export default styled(Field)`
`};
}
${theme('FieldWrapper.base')};
${theme('fannypack.FieldWrapper.base')};
`;
Loading

0 comments on commit 81ed6e8

Please sign in to comment.