Skip to content

Instantly share code, notes, and snippets.

@whoisryosuke whoisryosuke/theme.js

Last active Jul 14, 2020
Embed
What would you like to do?
Design Systems - System UI / Styled System default theme structure -- learn more: https://system-ui.com/theme/
export const theme = {
animation: {
default: "400ms ease-in",
fast: "300ms ease-in",
},
// Breakpoint values for media queries
breakpoints: [
// mobile
"320px",
// tablet
"768px",
// computer
"992px",
// desktop
"1200px",
// widescreen
"1920px",
],
// Media queries
// Note the use of breakpoint vars
// Usually you define sections in separate vars
// (e.g. `const breakpoints`)
// So you can reference them across theme file
// @see: https://gist.github.com/whoisryosuke/7a035953003bd75e389290bae7e11ae4
mediaQueries: {
mobile: `@media screen and (min-width: ${breakpoints[0]})`,
tablet: `@media screen and (min-width: ${breakpoints[1]})`,
computer: `@media screen and (min-width: ${breakpoints[2]})`,
desktop: `@media screen and (min-width: ${breakpoints[3]})`,
widescreen: `@media screen and (min-width: ${breakpoints[4]})`,
},
colors: {
text: "#111212",
background: "#fff",
primary: "#005CDD",
secondary: "#6D59F0",
muted: "#f6f6f9",
gray: "#D3D7DA",
highlight: "hsla(205, 100%, 40%, 0.125)",
white: "#FFF",
black: "#111212",
},
gradients: {
subtle: `linear-gradient(180deg, ${colors.primary} 0%, ${colors.secondary} 100%)`,
purple: `linear-gradient(180deg, ${colors.primary} 0%, #A000C4 100%)`,
blue: `linear-gradient(180deg, #00D2FF 0%, ${colors.secondary} 100%)`,
},
// Typography
fonts: {
body: "Roboto, Helvetiva Neue, Helvetica, Aria, sans-serif",
heading: "Archivo, Helvetiva Neue, Helvetica, Aria, sans-serif",
monospace: "Menlo, monospace",
},
// Integers are converted to px for font sizing
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
fontWeights: {
body: 400,
heading: 500,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.25,
},
// Sizing scale
// Integers are converted to px
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
sizes: {
avatar: 48,
text: breakpoints[2],
},
radii: {
default: 0,
circle: 99999,
},
// Shadows
shadows: {
card: {
light: "15px 15px 35px rgba(0, 127, 255, 0.5)",
dark: `7px 7px 15px ${colors.primary}`,
},
},
// Text Variants
// Integers are converted to corresponding value in related array
// e.g. fontSize: 6 = 48px in fontSize size array above
text: {
header: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [6, 6, 6, 6],
marginBottom: 3,
},
subheader: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [3, 3, 4, 4],
marginBottom: 3,
},
h2: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [2, 3, 4, 5],
marginBottom: 3,
},
h3: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [2, 2, 3, 3],
marginBottom: 3,
},
h4: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [1],
marginBottom: 3,
},
label: {
fontFamily: fonts.heading,
lineHeight: "1.25",
fontSize: [0],
letterSpacing: "0.1em",
textTransform: "uppercase",
},
paragraph: {
fontFamily: fonts.body,
lineHeight: "1.75",
fontSize: [1, 2],
marginBottom: 4,
"& code": {
py: 1,
px: 2,
mx: 1,
border: "1px solid",
borderColor: "black",
backgroundColor: "muted",
color: "primary",
},
},
list: {
fontFamily: fonts.body,
lineHeight: "1.75",
fontSize: [1, 2],
marginBottom: 3,
},
display: {
fontFamily: fonts.body,
lineHeight: "1.5",
fontSize: [5, 6, 7],
},
caps: {
textTransform: "uppercase",
letterSpacing: "0.1em",
},
},
// General/Global Variants
variants: {
avatar: {
width: "avatar",
height: "avatar",
borderRadius: "circle",
},
card: {
p: 2,
bg: "background",
boxShadow: "card",
avatar: {
width: "avatar",
height: "avatar",
backgroundSize: "cover",
backgroundPosition: "center",
marginBottom: "3rem",
},
},
link: {
color: "primary",
},
nav: {
fontSize: 1,
fontWeight: "bold",
display: "inline-block",
p: 2,
color: "inherit",
textDecoration: "none",
":hover,:focus,.active": {
color: "primary",
},
},
hr: {
width: "100%",
borderTop: 0,
borderBottom: "1px solid black",
my: 4,
},
},
// Component Specific Variants
// Button variants
buttons: {
primary: {
fontSize: 2,
fontWeight: "bold",
color: "background",
bg: "primary",
borderRadius: "default",
padding: "1em 4em",
},
outline: {
variant: "buttons.primary",
color: "black",
bg: "transparent",
border: "1px solid #000",
textTransform: "uppercase",
letterSpacing: "0.1em",
fontSize: 1,
},
secondary: {
variant: "buttons.primary",
color: "background",
bg: "secondary",
},
},
// Global Styles
styles: {
root: {
fontFamily: fonts.body,
fontWeight: "normal",
lineHeight: "1.5",
},
},
};
export default theme;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.