xcoderzach

import { get } from 'lodash/fp'

styled.div`
  background-color: ${get('theme.mediumGrey')}
`

xcoderzach

export default (props) => {
  <FieldContainer>{{
    label: <Label>{props.label}</Label>,
    input: <Input />
  }}</FieldContainer>
}

xcoderzach

import ComponentProvider from './component-provider'

const SliderNumber = styled.div`
  position: absolute;
  top: 0;
  text-align: center;
`

const sliderTheme = ({ SliderHandle }) => {
  

xcoderzach

import ComponentProvider from './component-provider'

const sliderTheme = ({ SliderBar, SliderHandle }) => {
  return {
    SliderBar: styled.div`
      width: 100%;
      height: 2px;
      background-color: green;
    `,
    SliderHandle: styled(SliderHandle)`

xcoderzach

import ComponentProvider from './provider'

// I'm doing the interpolation here, because
// the range is a visual concern (pixels).
// The visual part of your code shouldn't be
// logicless, it should only have logic related
// to visuals.
function interp(domain, range, value) {
  let domainSize = domain[1] - domain[0]
    , rangeSize = range[1] - range[0]

xcoderzach

import React from 'react'
/* 
  This is the semantic component, notice there is nothing about
  the display of the component defined here. 👍Yay SoC👍.
  There's nothing preventing this component from being used with
  react native, or as part of an svg, because it only describes
  the semantics of the slider.
  
  Obviously a full featured slider would probably need to do a lot
  more.

xcoderzach

import React from 'react'
import * as ui from './ui'

export default const FormField = ({
  Container = ui.Container,
  Label = ui.Label,
  Input = ui.Input 
}) =>
  ({ type, label, value, onChange }) => (
    <Container>

xcoderzach

import React from 'react'
/* 
  This is the Semantic Component, notice there is nothing about
  the display of the component defined here. 👍Yay SoC👍.
  There's nothing preventing this component from being used with
  react native, or as part of an svg, because it only describes
  the semantics of the slider.
  
  Obviously a full featured slider would probably need to do a lot
  more.

xcoderzach

// Basically you put any "dynamic" styles in regular css
// and any postcss as an interpolated variable thing and
// then write a quick babel transform like https://github.com/4Catalyzer/css-literal-loader
// the downside being you can't use props with the postcss stuff

styled.div`
  border-top: ${({top}) => top}; 
  ${postcssify`
  @mixin 'adfsa';
  @whateverFancyThing;

xcoderzach

Alternative Method for Component Library Theming

I really like the idea of styled components as the lowest level visual primitive, so theme-ing via passing around color strings and pixel values (or worse, 😨 css snippets 😨) makes me sad 😢.

Here's an alternative. Instead of passing in theme variables, which requires the library author to explicitly allow certain css properties to be overridden, we pass styled components as the theme😃. Now, styled components are the lowest level visual primitive that a user works with. Plus, it allows for much much more powerful extension. A user can decorate, wrap, replace,