api-sketch.js

import styled from "styled-components";
import { soft, flush, h4 } from "junction";

const Title = styled.h1`
  ${soft.left}
  ${flush.bottom}
  ${h4}
  color: "rebeccapurple"
`;


// generated for web / SSR with preact compat
// <h4 className="soft-left flush-bottom h1 ljasluv">
//   My Title
// </h4>

// generated for react-native
// <Text
//   style={{
//     paddingLeft: "20px",
//     marginBottom: "0",
//     fontFamily: "colfax-web",
//     color: "rebeccapurple"
//   }}
// >
//   My Title
// </Text>


// chaining with modifiers
import styled from "styled-components";
import { soft, backgrounds } from "junction";

const Section = styled.section`
  ${soft.half.ends.palm}
  ${soft.double.ends.lapAndup}
  ${backgrounds.primary}
`;


// using components with set shape
import styled from "styled-components";
import { Card, CardItem, backgrounds } from "junction";

const DarkCard = styled(Card)`
  ${backgrounds.darkPrimary}
`;

const ProfileCard = ({ url, description }) => (
  <DarkCard>
    <CardItem flush image={url} />
    <CardItem>
      {description}
    </CardItem>
  </DarkCard>
);


// using custom media queries, variables
import styled from "styled-components";
import { breakpoints, colors } from "junction";

const ResponsiveThing = styled.div`
  ${breakpoints.palm`
    text-decoration: underline; 
  `}
  ${({ color }) => color || colors.primary}
`;


// junction theme shape
{
  junction: {
    colors: {
      primary: "blue",
      // and so on 
    },
    fonts: {
      h1: {
        fontFamily: "colfax-web",
        // and so on 
      },
    },
    border: {
      size: 2,
      // and so on
    },
    unit: 20,
    // etc
  }
}