outline/shared/theme.js

// @flow
import { darken, lighten } from "polished";

const colors = {
  transparent: "transparent",
  almostBlack: "#111319",
  lightBlack: "#2F3336",
  almostWhite: "#E6E6E6",
  veryDarkBlue: "#08090C",

  slate: "#9BA6B2",
  slateLight: "#DAE1E9",
  slateDark: "#394351",

  smoke: "#F4F7FA",
  smokeLight: "#F9FBFC",
  smokeDark: "#E8EBED",

  white: "#FFF",
  white10: "rgba(255, 255, 255, 0.1)",
  white50: "rgba(255, 255, 255, 0.5)",
  black: "#000",
  black05: "rgba(0, 0, 0, 0.05)",
  black10: "rgba(0, 0, 0, 0.1)",
  black50: "rgba(0, 0, 0, 0.50)",
  primary: "#0366d6",
  yellow: "#FBCA04",
  warmGrey: "#EDF2F7",

  searchHighlight: "#FDEA9B",
  danger: "#ff476f",
  warning: "#f08a24",
  success: "#2f3336",
  info: "#a0d3e8",

  brand: {
    red: "#FF5C80",
    pink: "#FF4DFA",
    purple: "#9E5CF7",
    blue: "#3633FF",
    marine: "#2BC2FF",
    green: "#42DED1",
    yellow: "#F5BE31",
  },
};

const spacing = {
  padding: "1.5vw 1.875vw",
  vpadding: "1.5vw",
  hpadding: "1.875vw",
  sidebarWidth: 260,
  sidebarCollapsedWidth: 16,
  sidebarMinWidth: 200,
  sidebarMaxWidth: 400,
};

export const base = {
  ...colors,
  ...spacing,
  fontFamily:
    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
  fontFamilyMono:
    "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
  fontWeight: 400,
  backgroundTransition: "background 100ms ease-in-out",
  zIndex: 800,

  selected: colors.primary,
  buttonBackground: colors.primary,
  buttonText: colors.white,
  textHighlight: "#FDEA9B",
  textHighlightForeground: colors.almostBlack,

  codeComment: "#6a737d",
  codePunctuation: "#5e6687",
  codeNumber: "#d73a49",
  codeProperty: "#c08b30",
  codeTag: "#3d8fd1",
  codeString: "#032f62",
  codeSelector: "#6679cc",
  codeAttr: "#c76b29",
  codeEntity: "#22a2c9",
  codeKeyword: "#d73a49",
  codeFunction: "#6f42c1",
  codeStatement: "#22a2c9",
  codePlaceholder: "#3d8fd1",
  codeInserted: "#202746",
  codeImportant: "#c94922",

  blockToolbarBackground: colors.white,
  blockToolbarTrigger: colors.slate,
  blockToolbarTriggerIcon: colors.white,
  blockToolbarItem: colors.almostBlack,
  blockToolbarText: colors.almostBlack,
  blockToolbarTextSelected: colors.black,
  blockToolbarSelectedBackground: colors.slateLight,
  blockToolbarHoverBackground: colors.slateLight,
  blockToolbarDivider: colors.slateLight,
  blockToolbarIcon: undefined,
  blockToolbarIconSelected: colors.black,

  noticeInfoBackground: colors.warmGrey,
  noticeInfoText: colors.almostBlack,
  noticeTipBackground: "#fce5bb",
  noticeTipText: colors.almostBlack,
  noticeWarningBackground: "#ffadbf",
  noticeWarningText: colors.almostBlack,

  breakpoints: {
    mobile: 0, // targeting all devices
    tablet: 737, // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
    desktop: 1025, // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
    desktopLarge: 1600,
  },

  depths: {
    header: 800,
    sidebar: 900,
    // Note: editor toolbars are 900
    hoverPreview: 998,
    // Note: editor lightbox is z-index 999
    modalOverlay: 2000,
    modal: 3000,
    menu: 4000,
    toasts: 5000,
    popover: 9000,
    titleBarDivider: 10000,
    loadingIndicatorBar: 20000,
    commandBar: 30000,
  },
};

export const light = {
  ...base,
  background: colors.white,
  secondaryBackground: colors.warmGrey,

  link: colors.primary,
  text: colors.almostBlack,
  cursor: colors.almostBlack,
  textSecondary: colors.slateDark,
  textTertiary: colors.slate,
  placeholder: "#a2b2c3",

  sidebarBackground: colors.warmGrey,
  sidebarItemBackground: "#d7e0ea",
  sidebarText: "rgb(78, 92, 110)",
  backdrop: "rgba(0, 0, 0, 0.2)",
  shadow: "rgba(0, 0, 0, 0.2)",

  menuItemSelected: colors.warmGrey,
  menuBackground: colors.white,
  menuShadow:
    "0 0 0 1px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 8%), 0 2px 4px rgb(0 0 0 / 0%), 0 30px 40px rgb(0 0 0 / 8%)",
  divider: colors.slateLight,
  titleBarDivider: colors.slateLight,
  inputBorder: colors.slateLight,
  inputBorderFocused: colors.slate,

  listItemHoverBackground: colors.warmGrey,

  toolbarHoverBackground: colors.black,
  toolbarBackground: colors.lightBlack,
  toolbarInput: colors.white10,
  toolbarItem: colors.white,

  tableDivider: colors.smokeDark,
  tableSelected: colors.primary,
  tableSelectedBackground: "#E5F7FF",

  buttonNeutralBackground: colors.white,
  buttonNeutralText: colors.almostBlack,
  buttonNeutralBorder: darken(0.15, colors.white),

  tooltipBackground: colors.almostBlack,
  tooltipText: colors.white,

  toastBackground: colors.almostBlack,
  toastText: colors.white,

  quote: colors.slateLight,
  codeBackground: colors.smoke,
  codeBorder: colors.smokeDark,
  embedBorder: colors.slateLight,
  horizontalRule: colors.smokeDark,

  progressBarBackground: colors.slateLight,

  scrollbarBackground: colors.smoke,
  scrollbarThumb: darken(0.15, colors.smokeDark),
};

export const dark = {
  ...base,
  background: colors.almostBlack,
  secondaryBackground: colors.black50,

  link: "#137FFB",
  text: colors.almostWhite,
  cursor: colors.almostWhite,
  textSecondary: lighten(0.1, colors.slate),
  textTertiary: colors.slate,
  placeholder: colors.slateDark,

  sidebarBackground: colors.veryDarkBlue,
  sidebarItemBackground: lighten(0.015, colors.almostBlack),
  sidebarText: colors.slate,
  backdrop: "rgba(255, 255, 255, 0.3)",
  shadow: "rgba(0, 0, 0, 0.6)",

  menuItemSelected: lighten(0.1, "#1f2128"),
  menuBackground: "#1f2128",
  menuShadow:
    "0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08)",
  divider: lighten(0.1, colors.almostBlack),
  titleBarDivider: darken(0.4, colors.slate),
  inputBorder: colors.slateDark,
  inputBorderFocused: colors.slate,

  listItemHoverBackground: colors.black50,

  toolbarHoverBackground: colors.slate,
  toolbarBackground: colors.white,
  toolbarInput: colors.black10,
  toolbarItem: colors.lightBlack,

  tableDivider: colors.lightBlack,
  tableSelected: colors.primary,
  tableSelectedBackground: "#002333",

  buttonNeutralBackground: colors.almostBlack,
  buttonNeutralText: colors.white,
  buttonNeutralBorder: colors.slateDark,

  tooltipBackground: colors.white,
  tooltipText: colors.lightBlack,

  toastBackground: colors.white,
  toastText: colors.lightBlack,

  quote: colors.almostWhite,
  codeBackground: colors.black,
  codeBorder: colors.black50,
  codeString: "#3d8fd1",
  embedBorder: colors.black50,
  horizontalRule: lighten(0.1, colors.almostBlack),

  noticeInfoBackground: "#252a37",
  noticeInfoText: colors.white,
  noticeTipBackground: "#a3840a",
  noticeTipText: colors.white,
  noticeWarningBackground: "#7a001b",
  noticeWarningText: colors.white,

  progressBarBackground: colors.slate,

  scrollbarBackground: colors.black,
  scrollbarThumb: colors.lightBlack,
};

export const lightMobile = {
  background: colors.white,
};

export const darkMobile = {
  background: colors.black,
};

export default light;