mikeyamadeo

// src/App/style/settings
export const colors = {
  primary: 'red'
}

// post-css-plugins/settings-from-js.js
var postcss = require('postcss')
var settings = require('./src/App/style/settings')

module.exports = postcss.plugin('settings-from-js', function (opts) {

mikeyamadeo

* {
  animation: spin 10s infinite;
}

span {
  font-size: .5em;
  animation: spin .25s infinite;
}

@keyframes spin {

mikeyamadeo

.body > :last-child {
  margin-bottom: 0;
}

.theme-red .txt {
  color: red;
}

mikeyamadeo

import { StyleSheet, css } from 'aphrodite' 
import { colors } from 'App/style/settings'
import Media from 'App/shared/obj.Media'

const PokemonListing = ({name, num, loc, imgSrc}) =>
  <div className={css(styles.root)}>
    <Media img={imgSrc}>
     <h2>{name}</h2> <h4>#{num}</h4>
     <Media

mikeyamadeo

import { colors, baseFontSize } from 'App/style/settings'

const Txt = ({
  color = 'text',
  size = baseFontSize,
  tag = 'span',
  children,
  ...rest
}) => {
  const Tag = tag

mikeyamadeo

import { ___, X } from 'react-ditto'
import Txt from 'react-txt'
import Btn from 'App/shared/atm.Btn'
import Input from 'App/shared/atm.Input'

const SearchUI = ({inputVal, onInputUpdate, onSearch}) =>
  <X x p>
    <___ mr1>
      <Txt tag='label' color='secondary'>Search</Txt>
      <Input value={inputVal} onChange={onInputUpdate} />

mikeyamadeo

.thing {
  color: red;
  padding-top: var(--spacing-default);
}

.pt {
 padding-top: var(--spacing-tiny) !important;
}

mikeyamadeo

import './style/css'
import React from 'react'

const Root = ({children}) =>
  <div>
    { children }
  </div>

export default Root

mikeyamadeo

@import "generic.reset";
@import "generic.normalize";
@import "generic.box-sizing";

@import "elements.page";
@import "elements.link";
@import "elements.typography";

html,
#app {

mikeyamadeo

import { StyleSheet, css } from 'aphrodite'
import { colors, spacing } from 'App/style/settings'
import Btn from 'App/shared/atm.Btn'
import Input from 'App/shared/atm.Input'

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    align: 'center',
    padding: spacing.default