Skip to content

Instantly share code, notes, and snippets.

@jordangarcia
Created December 30, 2019 20:31
Show Gist options
  • Save jordangarcia/2b64be3007f74f6a20b6360644da08d4 to your computer and use it in GitHub Desktop.
Save jordangarcia/2b64be3007f74f6a20b6360644da08d4 to your computer and use it in GitHub Desktop.
import icons from "./icons";
const breakpoints = ["480px", "900px", "1025px", "1280px"];
// TODO should this be `small` medium and large
breakpoints.sm = breakpoints[0];
breakpoints.med = breakpoints[1];
breakpoints.lg = breakpoints[2];
const colors = {
primary: "#0c40fc",
blue: "#0c40fc",
black: "#000000",
charcoal: "#333333",
darkgrey: "#666666",
grey: "#999999",
lightgrey: "#cccccc",
smoke: "#e6e6e6",
smokewhite: "#f2f2f2",
smokeblue: "#f3f5ff",
smoke2: "#F9FAFB",
white: "#ffffff",
success: "#2EC777",
error: "#C63D2E",
transparentwhite10: "rgba(255,255,255,.1)",
transparentwhite20: "rgba(255,255,255,.2)",
transparentwhite60: "rgba(255,255,255,.6)",
overlay: "rgba(0,0,0,.5)",
gradient1:
"linear-gradient(180deg, #F3F5FF 0%, #FFFFFF 44.6%, #FFFFFF 54.82%, #FFFFFF 63.49%, #F3F5FF 100%)",
};
const space = [0, 4, 8, 16, 24, 32, 64, 128, 256];
export const abeTheme = {
borders: {
none: "0px",
light: `1px solid ${colors.smoke}`,
error: `1px solid ${colors.error}`,
lightgrey: `1px solid ${colors.lightgrey}`,
primary: `1px solid ${colors.primary}`,
dark: `1px solid ${colors.charcoal}`,
white: `1px solid ${colors.white}`,
},
breakpoints,
colors,
fontSizes: {
huge: "64px",
hugemobile: "64px",
title1: "48px",
title1mobile: "32px",
title2: "28px",
title2mobile: "20px",
title3: "24px",
title3mobile: "16px",
title4: "18px",
title4mobile: "14px",
title5: "16px",
title5mobile: "12px",
title6: "12px",
title6mobile: "10px",
body1: "18px",
body1mobile: "14px",
body2: "16px",
body2mobile: "12px",
body3: "14px",
body3mobile: "10px",
buttonNormal: "16px",
buttonSmall: "14px",
buttonNormalMobile: "14px",
buttonSmallMobile: "12px",
},
fonts: {
base: "Regular,Segoe UI,sans-serif",
},
fontWeights: {
normal: "400",
semibold: "600",
bold: "700",
huge: 700,
title1: 700,
title2: 700,
title3: 600,
title4: 600,
title5: 600,
title6: 600,
body1: 400,
body2: 400,
body3: 400,
buttonNormal: 400,
},
lineHeights: {
huge: "80px",
hugemobile: "80px",
title: "1.25",
// title1: "44px",
// title1mobile: "32px",
// title2: "40px",
// title2mobile: "40px",
// title3: "32px",
// title3mobile: "32px",
// title4: "28px",
// title4mobile: "20px",
// title5: "20px",
// title5mobile: "20px",
// title6: "16px",
// title6mobile: "16px",
body1: "28px",
body2: "20px",
body3: "18px",
loose: "1.6",
tight: "1.25",
base: "1.4",
buttonNormal: "20px",
},
mediaQueries: {
small: `@media screen and (min-width: ${breakpoints[0]})`,
medium: `@media screen and (min-width: ${breakpoints[1]})`,
large: `@media screen and (min-width: ${breakpoints[2]})`,
},
radii: {
none: 0,
small: 4,
medium: 8,
big: 12,
smallPill: 20,
full: "50%",
sides: "9999px",
},
shadows: {
none: "none",
light: "0px 1px 3px rgba(0, 0, 0, 0.1)",
medium: "0px 3px 6px rgba(0, 0, 0, 0.12)",
heavy: "0px 10px 20px rgba(0, 0, 0, 0.12)",
dialog: "0px 19px 38px rgba(0, 0, 0, 0.32)",
"100light": "0px 1px 3px rgba(0, 0, 0, 0.12)",
"100dark": "0px 1px 3px rgba(0, 0, 0, 0.24)",
"200light": "0px 3px 6px rgba(0, 0, 0, 0.12)",
"200dark": "0px 3px 6px rgba(0, 0, 0, 0.24)",
"300light": "0px 10px 20px rgba(0, 0, 0, 0.12)",
"300dark": "0px 10px 20px rgba(0, 0, 0, 0.24)",
"400light": "0px 14px 28px rgba(0, 0, 0, 0.16)",
"400dark": "0px 14px 28px rgba(0, 0, 0, 0.28)",
"500light": "0px 19px 38px rgba(0, 0, 0, 0.2)",
"500dark": "0px 19px 38px rgba(0, 0, 0, 0.32)",
},
space,
sizes: {
// breakpoint sizes
wrapper: [
breakpoints[0],
breakpoints[1],
breakpoints[2] - 2 * 20 /* padding */,
],
heightMedium: "48px",
heightMedium4x3: "64px",
heightMediumMobile: "40px",
heightMediumMobile4x3: "53px",
heightSmall: "32px",
heightSmallMobile: "32px",
heightLarge: "64px",
heightLarge4x3: "85.333px",
heightLargeMobile: "48px",
},
zIndices: {
overlay: 39,
drawer: 40,
dialogContent: 41,
header: 10,
subheader: 20,
tooltip: 25,
},
icons,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment