Clean Styled Components

helper.test.ts

import { color } from './helpers';
import { theme } from './theme';

describe('Helpers', () => {
  describe('color', () => {
    it('retrieves a colour from the theme', () => {
      expect(color('green')({theme})).toEqual('#00F')
    });
  });

  describe.todo('spacing');
  describe.todo('radius');

});

helpers.ts

import get from 'lodash.get';
import { BorderRadiusKey, Theme } from './helpers';

type ThemeProp = {
  theme: Theme
}

export const colour = (name: keyof Theme['Colours']) => ({theme}: ThemeProp) => get(theme.colours, name);
export const spacing = (multiplier: number) => ({theme}:ThemeProp) => `${get(theme,'spacingValue') * multiplier}px`;
export const radius = (size: BorderRadiusKey) => ({theme}: ThemeProp) => get(theme.radius, size)};

SomeComponent.tsx

import React from 'react';
import styled from 'styled-components';
import { colour, radius, spacing } from './helpers';

const Wrapper = styled.div`
  border: 1px solid ${color('green')};
  padding: ${spacing(5)};
  border-radius: ${radius('medium')};
`;

export const SomeComponent: React.FC = (
   <Wrapper>
    ...
   </Wrapper>
 );

theme.example.tsx

const colours = {
  green: '#00F',
  white: '#FFF',
  orange: '#CC5500'
}

type ThemeColour = typeof color;
export type BorderRadiusKeys = 'small' | 'medium' | 'large';
type BorderRadius = Record<BorderRadiusKeys, string>;

export type Theme = {
  colours: ThemeColour,
  spacingValue: number,
  radius: BorderRadius
}

const spacingValue = 4;
const radius = {
  'small' : '4px',
  'medium': '8px',
  'large': '12px',
};
  

const theme: Theme = {
  colours,
  radius,
  spacingValue
}