Theming problems

Blob.re

let component = ReasonReact.statelessComponent("Blob");

type maxWidth = {
  small: string,
  large: string,
};

type typography = {
  light: int,
  bold: int,
  maxWidth,
};

type shade = {
  extraLight: string,
  light: string,
  medium: string,
  dark: string,
};

type mediumshade = {medium: string};

type palette = {
  honey: shade,
  grey: mediumshade,
  peachy: shade,
  bliue: shade,
  mint: shade,
  navy: shade,
  white: shade,
  black: shade,
};

type theme = {
  typograpraph: typography,
  palette,
};

[@bs.deriving abstract]
type jsProps = {
  className: string,
  colour: string,
  opacity: float,
  shade: string,
  height: string,
  theme,
};

let make =
    (
      ~className,
      ~colour="peachy",
      ~shade="medium",
      ~opacity=1.,
      ~height="100%",
      ~theme,
      children,
    ) => {
  ...component,
  render: _self =>
    <svg
      className
      height
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 838 897">
      <path
        fill="#fff"
        opacity=(theme.palette[colour][shade])
        fillRule="evenodd"
        d="M795.310761,252.694177 C867.236309,443.44706 851.116627,625.105971 712.072427,788.496655 C573.028226,951.88734 259.3955,919.778093 128.072972,759.885817 C-3.24955621,599.993541 -92.2301095,240.427234 163.76911,71.4322315 C419.768329,-97.5627706 723.385212,61.941294 795.310761,252.694177 Z"
      />
    </svg>,
};

let jsComponent =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(
      ~className=jsProps->classNameGet,
      ~colour=jsProps->colourGet,
      ~shade=jsProps->shadeGet,
      ~opacity=jsProps->opacityGet,
      ~height=jsProps->heightGet,
      ~theme=jsProps->themeGet,
    )
  );

theme.js

const theme = {
  typography: {
    light: 300,
    bold: 500,
    maxWidth: {
      small: '690px',
      large: '790px',
    },
  },
  palette: {
    honey: {
      extraLight: 'hsl(37, 100%, 86%)',
      light: 'hsl(37,100%,84%)', // #ffe0ad
      medium: 'hsl(37,100%,77%)', // #ffd28a
      dark: 'hsl(37,100%,70%)', // #ffc466
    },
    grey: {
      medium: 'hsl(70, 12%, 90%)', // roughly #eceee7
    },
    peachy: {
      extraLight: 'hsl(20, 100%, 96%)', // roughly #fbf3ee
      light: 'hsl(20,100%,92%)', // #ffe4d6
      medium: 'hsl(20,100%,86%)', // #ffcfb8
      dark: 'hsl(20,100%,78%)', // # #ffb48f
    },
    blue: {
      extraLight: 'hsl(212,100%,98%)', // #f5faff
      light: 'hsl(212,100%,96%)', // #ebf4ff
      medium: 'hsl(212,100%,92%)', // #d6e9ff
      dark: 'hsl(212,100%,86%)', // #b8d9ff
    },
    mint: {
      extraLight: 'hsl(165, 48%, 94%)',
      light: 'hsl(165,48%,92%)', // #e1f4ef
      medium: 'hsl(165,48%,84%)', // #c3eae0
      dark: 'hsl(165,48%,76%)', // #a4dfd0
    },
    navy: {
      extraLight: 'hsl(219,21%,80%)', // #51607b
      light: 'hsl(219,21%,40%)', // #51607b
      medium: 'hsl(219,21%,26%)', // #343e50 (also #353F52 due to a bad conversion by Sean)
      dark: 'hsl(219,21%,18%)', // #242b38
    },
    white: {
      extraLight: 'hsl(0, 0%, 100%)', // #ffffff
      light: 'hsl(0, 0%, 100%)', // #ffffff
      medium: 'hsl(0, 0%, 100%)', // #ffffff
      dark: 'hsl(0, 0%, 100%)', // #ffffff
    },
    black: {
      extraLight: 'hsl(0, 0%, 50%)', // #000000
      light: 'hsl(0, 0%, 50%)', // #000000
      medium: 'hsl(0, 0%, 50%)', // #000000
      dark: 'hsl(0, 0%, 50%)', // #000000
    },
  },
};

export default theme;

UseInJsWorld.js

import React from 'react';
import Blob from './Blob.bs.js'
import { withTheme } from 'styled-components';


export default withTheme(Blob);