shared/styles/theme.ts
Rama main · réplica de lectura del repositorio original.
import { darken, lighten, mix, saturate, transparentize } from "polished";
import type { DefaultTheme, Colors } from "styled-components";
import { breakpoints } from "./breakpoint";
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: "hsl(212 31% 95% / 1)",
danger: "#ed2651",
warning: "#f08a24",
success: "#3ad984",
info: "#a0d3e8",
brand: {
red: "#FF5C80",
pink: "#FF4DFA",
purple: "#9E5CF7",
blue: "#3633FF",
marine: "#2BC2FF",
dusk: "#2930FF",
green: "#3ad984",
yellow: "#F5BE31",
},
};
/** The narrowest the content of a sidebar can be, excluding its padding. */
const sidebarMinWidth = 240;
const sidebarPadding = 16;
const spacing = {
sidebarWidth: 260,
sidebarRightWidth: 300,
sidebarCollapsedWidth: 16,
sidebarMinWidth,
sidebarMaxWidth: 500,
/** The narrowest a sidebar can be resized to, including its padding. */
sidebarResizeMinWidth: sidebarMinWidth + sidebarPadding,
};
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, colors.brand.marine),
commentedImageOutlineDark: colors.brand.marine,
commentedImageOutlineLight: transparentize(0.7, colors.brand.marine),
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.slate,
noticeInfoText: saturate(0.1, mix(0.5, colors.slate, colors.almostBlack)),
noticeTipBackground: colors.brand.blue,
noticeTipText: saturate(
0.1,
mix(0.5, colors.brand.blue, colors.almostBlack)
),
noticeWarningBackground: colors.warning,
noticeWarningText: saturate(
0.1,
mix(0.5, colors.warning, colors.almostBlack)
),
noticeSuccessBackground: colors.brand.green,
noticeSuccessText: saturate(
0.1,
mix(0.5, colors.brand.green, 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: "rgba(255, 180, 173, 0.25)",
placeholder: "#a2b2c3",
sidebarBackground: "hsl(212 31% 95% / 1)",
sidebarHoverBackground: "hsl(212 31% 90% / 1)",
sidebarActiveBackground: "hsl(212 31% 85% / 1)",
sidebarControlHoverBackground: "rgb(138 164 193 / 20%)",
sidebarDraftBorder: "hsl(212 31% 75% / 1)",
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,
inputBackground: colors.warmGrey,
listItemHoverBackground: colors.warmGrey,
mentionBackground: colors.warmGrey,
mentionHoverBackground: "#d7e0ea",
tableSelected: colors.accent,
buttonNeutralBackground: colors.white,
buttonNeutralHoverBackground: colors.warmGrey,
buttonNeutralText: colors.almostBlack,
buttonNeutralBorder: "hsl(212 31% 88% / 1)",
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.25)",
textDiffDeleted: darken(0.1, colors.almostWhite),
textDiffDeletedBackground: "rgba(248,81,73,0.15)",
placeholder: "hsl(215 17% 30% / 1)",
sidebarBackground: colors.veryDarkBlue,
sidebarHoverBackground: lighten(0.05, colors.veryDarkBlue),
sidebarActiveBackground: lighten(0.09, colors.veryDarkBlue),
sidebarControlHoverBackground: colors.white10,
sidebarDraftBorder: lighten(0.2, colors.veryDarkBlue),
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,
inputBackground: "#262d36",
listItemHoverBackground: colors.white10,
mentionBackground: lighten(0.09, colors.veryDarkBlue),
mentionHoverBackground: lighten(0.15, colors.veryDarkBlue),
tableSelected: colors.accent,
buttonNeutralBackground: colors.almostBlack,
buttonNeutralHoverBackground: lighten(0.09, colors.veryDarkBlue),
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: mix(0.5, colors.slate, colors.white),
noticeTipText: mix(0.5, colors.brand.blue, colors.white),
noticeWarningText: mix(0.5, colors.warning, colors.white),
noticeSuccessText: mix(0.5, colors.brand.green, 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;