kag359six

import {calculateStuff, fontSizes} from 'who-knows';

// we can define breakpoints and use them 
const breakpoints = {
	sm: '(max-width: 420px)',
	md: '(max-width: 1024px)',
	lg: '(max-width: 1300px)'
}

export const BodyText = styled.p`

kag359six

export const DefaultButton = styled.button`
  width: 200px;
  height: 60px;
  font-size: 15px;
`;

export const FancyButton = styled(DefaultButton)`
  background-color: gold; 
`

kag359six

export const BodyText = styled.span`
	font-size: 15px;
	color: red;
`
// we dynamically swap our span element for a link element by using "as" prop

return (
	<BodyText as="a"> This is now a link! </BodyText>
)

kag359six

const theme = {
	fontSizes: {
		sm: '10px',
		md: '15px',
		lg: '25px'
	}
}

const BodyText = styled.p`
	font-size: ${props => props.theme.fontSizes.sm}

kag359six

import { UserPage, FacebookHeader, FacebookFooter } from 'facebook-ripoff-components';
import { myUsersTheme } from 'file-that-gets-users-theme';

const myUserTheme = (parentTheme) => ({
	backgroundColor: 'ugly-green'
})

const facebookTheme = {
	backgroundColor: 'facebook-blue'
}

kag359six

import { createGlobalStyle } from 'styled-components/macro';

export default createGlobalStyle`

  html {
    font-size: 10px;
  }

  body {
    margin: 0;

kag359six

import RestOfOurApp from 'rest-of-our-app';
import GlobalStyles from './globalStyles'; // importing our global styles

export const App = () => {
  return (
    <ThemeProvider theme={theme}>
        <GlobalStyles />          // we place it as a sibling of our root app component
				<RestOfOurApp/>
    <ThemeProvider/>
  );

kag359six

// this example was taken directly from the styled components docs
// I stripped out some styling since it's not really necessary to get the point 

const Link = styled.a`
  color: purple;
`;
  
const Icon = styled.svg`
  width: 48px;
  height: 48px;

kag359six

import React, { useEffect } from "react";
import { setTargetPosition } from "./actions";

const animatedCompStyle = {
  position: "fixed",
  top: 0,
  left: 0,
  transform: "none",
  width: "50px",
  height: "50px",

kag359six

/* 
	I'm assuming you have a super simple store setup somewhere 
	(look at the codesandbox for details)
*/
import store from "./store";

export const setTargetPosition = ({ x, y }) => {
  store.dispatch({
    type: "ACTION_SET_TARGET_POSITION",
    payload: {