Skip to content

Instantly share code, notes, and snippets.

@jssee
Last active April 19, 2019 15:22
Show Gist options
  • Save jssee/c8aa6c68f364ff5fe1b17ef3796b54fb to your computer and use it in GitHub Desktop.
Save jssee/c8aa6c68f364ff5fe1b17ef3796b54fb to your computer and use it in GitHub Desktop.
ColorProvider
/** @jsx jsx */
import * as React from "react";
import { jsx } from "@emotion/core";
import theme from "../../../lib/theme";
type ColorScheme = "dark" | "light";
interface Props {
scheme: ColorScheme;
}
/* No need to loop through options if we define colorschemes in the themefile, we just acces them via props. */
const ColorProvider: React.FC<Props> = ({ scheme = "dark", ...props }) => (
<main
css={{
background: theme.colors.scheme[scheme].bg,
color: theme.colors.scheme[scheme].fg,
}}
{...props}
/>
);
export default ColorProvider;
/* We can have named `colorschemes` as part the themefile, this allows us to just define and use as many as we want, without having to edit a function to call them */
export default {
colors: {
mojogreen: "#00ba40",
white: "#ffffff",
black: "#000000",
dark: "#14111D",
gray: "#F0F0F0",
scheme: {
dark: { bg: "#000", fg: "#fff" },
light: { bg: "#fff", fg: "#000" },
},
},
spacing: [
"calc(4px + (8 - 4) * ((100vw - 400px) / (1800 - 600)))",
"calc(8px + (16 - 8) * ((100vw - 400px) / (1800 - 600)))",
"calc(16px + (32 - 16) * ((100vw - 400px) / (1800 - 600)))",
"calc(44px + (88 - 44) * ((100vw - 400px) / (1800 - 600)))",
"calc(88px + (176 - 88) * ((100vw - 400px) / (1800 - 600)))",
"calc(176px + (352 - 176) * ((100vw - 400px) / (1800 - 600)))",
],
fonts: {
main: `'GT America Light', system-ui, sans-serif`,
display: `'altis-mojoregular', system-ui, sans-serif`,
},
fontSizes: [
"calc(16px + (18 - 16) * ((100vw - 400px) / (1800 - 600)))",
"calc(18px + (24 - 18) * ((100vw - 400px) / (1800 - 600)))",
"calc(18px + (32 - 18) * ((100vw - 400px) / (1800 - 600)))",
"calc(18px + (42 - 18) * ((100vw - 400px) / (1800 - 600)))",
"calc(24px + (56 - 24) * ((100vw - 400px) / (1800 - 600)))",
"calc(32px + (75 - 32) * ((100vw - 400px) / (1800 - 600)))",
],
lineHeights: [2, 1.5, 1.2],
maxWidths: ["904px", "1400px"],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment