carl0zen

import styled from "styled-components";

import {
  theme
} from "ui";

const { color, font, radius, transition } = theme;

export const Button = styled.button`
  background-color: ${color.ghost};

carl0zen

import React from "react"
import styled from "styled-components"
// Simple form component

const Input = styled.input`
  background: green
`

const FormWrapper = () => <Input placeholder="hola" />

carl0zen

export const theme = {
  color: {
    primary: "#47C51D",
    secondary: '#53C1DE',
    white: "#FFF",
    black: "#222",
    border: "rgba(0,0,0,0.1)",
    base: "rgba(0,0,0,0.4)",
    alert: '#FF4258',
    success: 'mediumseagreen',

carl0zen

import styled, { css } from "styled-components";

import {
  borderProps,
  marginProps,
  backgroundColorProps,
  paddingProps,
  alignmentProps,
  positioningProps,
  sizeProps,

carl0zen

// Mixin like functionality

const textInput = props => `
  color: ${props.error ? color.white : color.base};
  background-color: ${props.error ? color.alert : color.white};
`;

export const Input = styled.input`
  ${textInput}
`;

carl0zen

import styled from "styled-components";
import {
  theme,
  borderProps,
  sizeProps,
  backgroundColorProps,
  marginProps
} from "ui";

const { color, font, topbar, gutter } = theme;

carl0zen

// Block
.scenery {
   //Elements
  &__sky {
    fill: screen;
  }
  &__ground {
    float: bottom; 
  }
  &__people {

carl0zen

import styled from "styled-components"

const Sky = styled.section`
  ${props => props.dusk && 'background-color: dusk' }
  ${props => props.day && 'background-color: white' }
  ${props => props.night && 'background-color: black' }
`;

// You can use it like so:
<Sky dusk />

carl0zen

import React from "react"
import styled from "styled-components"
import { Icon } from "../ui/icon"
import { theme } from "../ui/theme"

const { color } = theme

const Logo = styled(Icon)`
  .logo {
    &__light{

carl0zen

/* eslint-disable max-len */
/* eslint-disable no-multi-comp */

import React from "react";
import styled from "styled-components";

const icons = {
  logo: () => (
    <svg viewBox="-52.409 -10.576 792.909 797.838">
      <path d="M493.014,207.005c1.37,7.876,2.395,16.095,2.395,24.313c0,47.259-23.287,89.381-58.901,115.066 c-39.384-49.656-65.067-110.613-70.204-177.393c-0.686-8.903-1.027-17.807-1.027-27.054c0-17.465,1.37-34.588,4.109-51.368 c5.48-33.904,16.096-66.438,30.822-96.23C210.146,54.612,68.369,221.045,43.712,423.779c-2.398,15.753-3.768,32.192-3.768,48.629 c0,2.396,0,4.794,0.343,6.85c3.767,164.721,138.352,297.25,303.757,297.25c167.805,0,304.102-136.296,304.102-304.1 c0-1.714,0-3.423,0-5.137C646.435,355.631,584.448,258.373,493.014,207.005z M343.361,767.605 c-43.492-30.822-71.917-81.505-71.917-139.036c0-57.535,28.425-108.219,71.917-139.038c43.491,30.822,71.915,81.506,71.915,139.038 S386.853,736.783,343.361,767.605z" />