mirror of
https://github.com/outline/outline.git
synced 2025-12-29 23:09:55 -06:00
5bc2e7e62e
* Single line sidebar items * fix: Letter icon in breadcrumb missing letter Alignment of sidebar items * fix: Editing state * fix: Shared sidebar * fix: Drag over unloaded document in sidebar does not allow drop * perf * Sidebar hover background * Allow click toggle closed * fix: Disclosure toggle * perf: Avoid rendering collapsed folders
276 lines
8.7 KiB
TypeScript
276 lines
8.7 KiB
TypeScript
import { darken, lighten, transparentize } from "polished";
|
|
import { DefaultTheme, Colors } from "styled-components";
|
|
import breakpoints from "./breakpoints";
|
|
|
|
const defaultColors: Colors = {
|
|
transparent: "transparent",
|
|
almostBlack: "#111319",
|
|
lightBlack: "#2F3336",
|
|
almostWhite: "#E6E6E6",
|
|
veryDarkBlue: "#08090C",
|
|
slate: "#66778F",
|
|
slateLight: "#DAE1E9",
|
|
slateDark: "#394351",
|
|
smoke: "#F4F7FA",
|
|
smokeLight: "#F9FBFC",
|
|
smokeDark: "#E8EBED",
|
|
white: "#FFFFFF",
|
|
white05: "rgba(255, 255, 255, 0.05)",
|
|
white10: "rgba(255, 255, 255, 0.1)",
|
|
white50: "rgba(255, 255, 255, 0.5)",
|
|
white75: "rgba(255, 255, 255, 0.75)",
|
|
black: "#000",
|
|
black05: "rgba(0, 0, 0, 0.05)",
|
|
black10: "rgba(0, 0, 0, 0.1)",
|
|
black50: "rgba(0, 0, 0, 0.50)",
|
|
black75: "rgba(0, 0, 0, 0.75)",
|
|
accent: "#0366d6",
|
|
yellow: "#EDBA07",
|
|
warmGrey: "#EDF2F7",
|
|
danger: "#ed2651",
|
|
warning: "#f08a24",
|
|
success: "#2f3336",
|
|
info: "#a0d3e8",
|
|
brand: {
|
|
red: "#FF5C80",
|
|
pink: "#FF4DFA",
|
|
purple: "#9E5CF7",
|
|
blue: "#3633FF",
|
|
marine: "#2BC2FF",
|
|
dusk: "#2930FF",
|
|
green: "#3ad984",
|
|
yellow: "#F5BE31",
|
|
},
|
|
};
|
|
|
|
const spacing = {
|
|
sidebarWidth: 260,
|
|
sidebarRightWidth: 300,
|
|
sidebarCollapsedWidth: 16,
|
|
sidebarMinWidth: 200,
|
|
sidebarMaxWidth: 600,
|
|
};
|
|
|
|
const buildBaseTheme = (input: Partial<Colors>) => {
|
|
const colors = {
|
|
...defaultColors,
|
|
...input,
|
|
};
|
|
|
|
return {
|
|
fontFamily:
|
|
"-apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Oxygen, sans-serif",
|
|
fontFamilyMono:
|
|
"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
|
fontFamilyEmoji:
|
|
"Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Segoe UI, Twemoji Mozilla, Noto Color Emoji, Android Emoji",
|
|
fontWeightRegular: 400,
|
|
fontWeightMedium: 500,
|
|
fontWeightBold: 600,
|
|
accentText: colors.white,
|
|
selected: colors.accent,
|
|
textHighlight: "#FDEA9B",
|
|
textHighlightForeground: colors.almostBlack,
|
|
commentMarkBackground: transparentize(0.5, "#2BC2FF"),
|
|
code: colors.lightBlack,
|
|
codeComment: "#008000",
|
|
codePunctuation: "#393a34",
|
|
codeNumber: "#0550ae",
|
|
codeProperty: "#ff0000",
|
|
codeTag: "#800000",
|
|
codeClassName: "#00578a",
|
|
codeString: "#a31515",
|
|
codeSelector: "#800000",
|
|
codeAttrName: "#ff0000",
|
|
codeAttrValue: colors.lightBlack,
|
|
codeEntity: "#ff0000",
|
|
codeKeyword: "#00009f",
|
|
codeFunction: "#393A34",
|
|
codeStatement: "#ff0000",
|
|
codePlaceholder: "#3d8fd1",
|
|
codeInserted: "#0550ae",
|
|
codeImportant: "#e90e90",
|
|
codeConstant: "#0550ae",
|
|
codeParameter: colors.lightBlack,
|
|
codeOperator: "#393a34",
|
|
noticeInfoBackground: colors.brand.blue,
|
|
noticeInfoText: colors.almostBlack,
|
|
noticeTipBackground: "#f5be31",
|
|
noticeTipText: colors.almostBlack,
|
|
noticeWarningBackground: "#d73a49",
|
|
noticeWarningText: colors.almostBlack,
|
|
noticeSuccessBackground: colors.brand.green,
|
|
noticeSuccessText: colors.almostBlack,
|
|
tableSelectedBackground: transparentize(0.9, colors.accent),
|
|
breakpoints,
|
|
...colors,
|
|
...spacing,
|
|
};
|
|
};
|
|
|
|
export const buildLightTheme = (input: Partial<Colors>): DefaultTheme => {
|
|
const colors = buildBaseTheme(input);
|
|
|
|
return {
|
|
...colors,
|
|
isDark: false,
|
|
background: colors.white,
|
|
backgroundSecondary: colors.warmGrey,
|
|
backgroundTertiary: "#d7e0ea",
|
|
backgroundQuaternary: darken(0.05, "#d7e0ea"),
|
|
link: colors.accent,
|
|
cursor: colors.almostBlack,
|
|
text: colors.almostBlack,
|
|
textSecondary: colors.slateDark,
|
|
textTertiary: colors.slate,
|
|
textDiffInserted: colors.almostBlack,
|
|
textDiffInsertedBackground: "rgba(18, 138, 41, 0.16)",
|
|
textDiffDeleted: colors.slateDark,
|
|
textDiffDeletedBackground: "#ffebe9",
|
|
placeholder: "#a2b2c3",
|
|
sidebarBackground: colors.warmGrey,
|
|
sidebarHoverBackground: "hsl(212 31% 90% / 1)",
|
|
sidebarActiveBackground: "hsl(212 31% 85% / 1)",
|
|
sidebarControlHoverBackground: "rgb(138 164 193 / 20%)",
|
|
sidebarDraftBorder: darken("0.25", colors.warmGrey),
|
|
sidebarText: "rgb(78, 92, 110)",
|
|
backdrop: "rgba(0, 0, 0, 0.2)",
|
|
shadow: "rgba(0, 0, 0, 0.2)",
|
|
|
|
modalBackdrop: "rgba(0, 0, 0, 0.25)",
|
|
modalBackground: colors.white,
|
|
modalShadow:
|
|
"0 4px 8px rgb(0 0 0 / 8%), 0 2px 4px rgb(0 0 0 / 0%), 0 30px 40px rgb(0 0 0 / 8%)",
|
|
|
|
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,
|
|
mentionBackground: colors.warmGrey,
|
|
mentionHoverBackground: "#d7e0ea",
|
|
tableSelected: colors.accent,
|
|
buttonNeutralBackground: colors.white,
|
|
buttonNeutralText: colors.almostBlack,
|
|
buttonNeutralBorder: darken(0.15, colors.white),
|
|
tooltipBackground: colors.almostBlack,
|
|
tooltipText: colors.white,
|
|
toastBackground: colors.white,
|
|
toastText: colors.almostBlack,
|
|
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 buildDarkTheme = (input: Partial<Colors>): DefaultTheme => {
|
|
const colors = buildBaseTheme(input);
|
|
|
|
return {
|
|
...colors,
|
|
isDark: true,
|
|
background: colors.almostBlack,
|
|
backgroundSecondary: "#1f232e",
|
|
backgroundTertiary: "#2a2f3e",
|
|
backgroundQuaternary: lighten(0.1, "#2a2f3e"),
|
|
link: "#137FFB",
|
|
text: colors.almostWhite,
|
|
cursor: colors.almostWhite,
|
|
textSecondary: lighten(0.1, colors.slate),
|
|
textTertiary: colors.slate,
|
|
textDiffInserted: colors.almostWhite,
|
|
textDiffInsertedBackground: "rgba(63,185,80,0.3)",
|
|
textDiffDeleted: darken(0.1, colors.almostWhite),
|
|
textDiffDeletedBackground: "rgba(248,81,73,0.15)",
|
|
placeholder: "#596673",
|
|
sidebarBackground: colors.veryDarkBlue,
|
|
sidebarHoverBackground: lighten(0.05, colors.veryDarkBlue),
|
|
sidebarActiveBackground: lighten(0.09, colors.veryDarkBlue),
|
|
sidebarControlHoverBackground: colors.white10,
|
|
sidebarDraftBorder: darken("0.35", colors.slate),
|
|
sidebarText: colors.slate,
|
|
backdrop: "rgba(0, 0, 0, 0.5)",
|
|
shadow: "rgba(0, 0, 0, 0.6)",
|
|
|
|
modalBackdrop: colors.black50,
|
|
modalBackground: "#181c25",
|
|
modalShadow:
|
|
"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)",
|
|
|
|
menuItemSelected: lighten(0.09, "#181c25"),
|
|
menuBackground: "#181c25",
|
|
menuShadow:
|
|
"0 0 0 1px rgb(34 40 52), 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.white10,
|
|
mentionBackground: lighten(0.09, colors.veryDarkBlue),
|
|
mentionHoverBackground: lighten(0.15, colors.veryDarkBlue),
|
|
tableSelected: colors.accent,
|
|
buttonNeutralBackground: colors.almostBlack,
|
|
buttonNeutralText: colors.white,
|
|
buttonNeutralBorder: colors.slateDark,
|
|
tooltipBackground: colors.white,
|
|
tooltipText: colors.lightBlack,
|
|
toastBackground: colors.veryDarkBlue,
|
|
toastText: colors.almostWhite,
|
|
quote: colors.almostWhite,
|
|
code: colors.almostWhite,
|
|
codeBackground: "#1d202a",
|
|
codeBorder: colors.white10,
|
|
codeComment: "#6a9955",
|
|
codePunctuation: "#b3b3b3",
|
|
codeProperty: "#b5cea8",
|
|
codeNumber: "#b5cea8",
|
|
codeTag: "#b5cea8",
|
|
codeOperator: "#d4d4d4",
|
|
codeConstant: "#9cdcfe",
|
|
codeParameter: "#9cdcfe",
|
|
codeSelector: "#ce9178",
|
|
codeEntity: "#d4d4d4",
|
|
codeStatement: "#d16969",
|
|
codeInserted: "#b5cea8",
|
|
codeString: "#ce9178",
|
|
codeKeyword: "#569Cd6",
|
|
codeFunction: "#dcdcaa",
|
|
codeClassName: "#4ec9b0",
|
|
codeImportant: "#569Cd6",
|
|
codeAttrName: "#9cdcfe",
|
|
codeAttrValue: "#ce9178",
|
|
embedBorder: colors.black50,
|
|
horizontalRule: lighten(0.1, colors.almostBlack),
|
|
noticeInfoText: colors.white,
|
|
noticeTipText: colors.white,
|
|
noticeWarningText: colors.white,
|
|
noticeSuccessText: colors.white,
|
|
progressBarBackground: colors.slate,
|
|
scrollbarBackground: colors.black,
|
|
scrollbarThumb: colors.lightBlack,
|
|
};
|
|
};
|
|
|
|
export const buildPitchBlackTheme = (input: Partial<Colors>) => {
|
|
const colors = buildDarkTheme(input);
|
|
|
|
return {
|
|
...colors,
|
|
background: colors.black,
|
|
codeBackground: colors.almostBlack,
|
|
};
|
|
};
|
|
|
|
export const light = buildLightTheme(defaultColors);
|
|
|
|
export default light as DefaultTheme;
|