CSS in JS / Styled Components / Emotion - Theming file with colors, typography, borders, and 16-col grid (based on Semantic UI)
import Color from "tinycolor2"; | |
/** | |
* Creates column percentages based on column count | |
*/ | |
const createColumns = columnCount => { | |
const columns = {}; | |
for (let i = 1; i <= columnCount; i += 1) { | |
columns[i] = `${(i / columnCount) * 100}%`; | |
} | |
return columns; | |
}; | |
const grid = { | |
columnCount: 16, | |
columns: createColumns(16) | |
}; | |
// Define bold vs 700pt | |
const weight = { | |
bold: "bold", | |
normal: "normal" | |
}; | |
const border = { | |
color: "rgba(34, 36, 38, 0.15)", | |
strong: "rgba(34, 36, 38, 0.22)", | |
internal: "rgba(34, 36, 38, 0.1)", | |
selected: "rgba(34, 36, 38, 0.35)", | |
strongSelected: "rgba(34, 36, 38, 0.5)", | |
disabled: "rgba(34, 36, 38, 0.5)", | |
solidInternal: "#FAFAFA", | |
solidBorder: "#D4D4D5", | |
solidSelected: "#BCBDBD" | |
}; | |
const colors = { | |
offBlack: "#111", | |
fullBlack: "#000000", | |
offWhite: "#F9FAFB", | |
darkWhite: "#F3F4F5", | |
midWhite: "#DCDDDE", | |
white: "#FFFFFF", | |
red: "#DB2828", | |
orange: "#F2711C", | |
yellow: "#FBBD08", | |
olive: "#B5CC18", | |
green: "#21BA45", | |
teal: "#00B5AD", | |
blue: "#2185D0", | |
violet: "#6435C9", | |
purple: "#A333C8", | |
pink: "#E03997", | |
brown: "#A5673F", | |
grey: "#767676", | |
primary: "#CC2029", | |
secondary: "purple", | |
disabled: "rgba(40, 40, 40, 0.3)", | |
disabledInverted: "rgba(225, 225, 225, 0.3)", | |
positive: { | |
color: "green", | |
background: "#FFF6F6", | |
border: "#A3C293", | |
header: "#1A531B", | |
text: "#2C662D" | |
}, | |
negative: { | |
color: "red", | |
background: "#FFF6F6", | |
border: "#E0B4B4", | |
header: "#912D2B", | |
text: "#9F3A38" | |
}, | |
info: { | |
color: "#31CCEC", | |
background: "#F8FFFF", | |
border: "#A9D5DE", | |
header: "#0E566C", | |
text: "#276F86" | |
}, | |
warning: { | |
color: "#F2C037", | |
background: "#C9BA9B", | |
border: "#FFFAF3", | |
header: "#794B02", | |
text: "#573A08" | |
}, | |
brand: { | |
facebook: "#3B5998", | |
twitter: "#55ACEE", | |
googleplus: "#DD4B39", | |
linkedin: "#1F88BE", | |
youtube: "#FF0000", | |
pinterest: "#BD081C", | |
instagram: "#49769C" | |
} | |
}; | |
const textColors = { | |
red: colors.red, | |
blue: colors.blue | |
}; | |
const hoverColors = (color = primary) => Color(colors[color]) | |
.darken(10) | |
.saturate(10) | |
.toHexString() | |
const focusColors = (color = primary) => Color(colors[color]) | |
.darken(20) | |
.saturate(20) | |
.toHexString() | |
const downColors = (color = primary) => Color(colors[color]) | |
.darken(30) | |
.toHexString() | |
const activeColors = (color = primary) => Color(colors[color]) | |
.lighten(10) | |
.saturate(20) | |
.toHexString() | |
const sizes = { | |
mini: 11 / 14, | |
tiny: 12 / 14, | |
small: 13 / 14, | |
medium: 14 / 14, | |
large: 16 / 14, | |
big: 18 / 14, | |
huge: 20 / 14, | |
massive: 24 / 14 | |
}; | |
const page = { | |
background: colors.white, | |
lineHeight: "1.4285em" | |
}; | |
const theme = { | |
background: "#000", | |
borderColor: "#BF67AD", | |
typography: { | |
// Color of default text | |
color: colors.offBlack, | |
fonts: { | |
header: `"Heebo", Arial, Helvetica, sans-serif`, | |
page: `"Heebo", Arial, Helvetica, sans-serif` | |
}, | |
// The font sizes | |
size: { | |
// Controls all em references | |
em: "14px", | |
// Base page font | |
page: "14px" | |
}, | |
heading: { | |
weight: weight.bold, | |
lineHeight: "1.5em", | |
h1: `${28 / 14}rem`, | |
h2: `${24 / 14}rem`, | |
h3: `${18 / 14}rem`, | |
h4: `${15 / 14}rem`, | |
h5: `${14 / 14}rem` | |
}, | |
paragraph: { | |
margin: "0em 0em 1em", | |
lineHeight: page.lineHeight | |
} | |
}, | |
borderRadius: "4px", | |
links: { | |
color: colors.primary, | |
underline: "none", | |
hoverColor: colors.primary | |
}, | |
// Form input | |
input: { | |
background: colors.white, | |
color: colors.offBlack, | |
placeholderColor: "#222", | |
placeholderFocusColor: "#333", | |
verticalPadding: "11px", | |
horizontalPadding: "14px", | |
inputPadding: "11px 14px", | |
lineHeight: `${17 / 14}em`, | |
focused: { | |
borderColor: "#85B7D9", | |
mutedBorderColor: "#96C8DA" | |
} | |
}, | |
// Grid | |
columnCount: 16, | |
// Opacities | |
opacity: { | |
disabled: "0.45" | |
}, | |
// Animation | |
animation: { | |
duration: "400ms", | |
easing: "ease" | |
}, | |
// Breakpoints | |
breakpoints: { | |
mobile: "320px", | |
tablet: "768px", | |
computer: "992px", | |
desktop: "1200px", | |
widescreen: "1920px" | |
}, | |
icons: { | |
width: "1.18em" | |
}, | |
// Shadows | |
shadows: { | |
subtle: `0px 1px 2px 0 ${border.color}`, | |
floatingShadow: ` | |
0px 2px 4px 0px rgba(34, 36, 38, 0.12), | |
0px 2px 10px 0px rgba(34, 36, 38, 0.15) | |
`, | |
floatingShadowHover: ` | |
0px 2px 4px 0px rgba(34, 36, 38, 0.15), | |
0px 2px 10px 0px rgba(34, 36, 38, 0.25) | |
` | |
}, | |
// Import any external objects for easy access | |
colors, | |
textColors, | |
hoverColors, | |
focusColors, | |
downColors, | |
activeColors, | |
weight, | |
sizes, | |
border, | |
page, | |
grid | |
}; | |
export default theme; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment