@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
104 lines • 2.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.flatTheme = void 0;
const light_js_1 = require("./light.js");
const colors = {
bg: '#FFFFFF',
caption: '#15091F',
text: '#3A424D',
stroke: '#EFEEF1',
accent: '#5225C1',
badge: '#F80808',
bgHighlight: '#F7F6F9',
bgActive: '#F0EDF8',
transparent: 'transparent',
};
const headerFooterProps = {
backgroundColor: colors.bg,
borderRadius: '8px',
textColor: colors.accent,
borderColor: colors.stroke,
};
exports.flatTheme = {
prose: {
headings: colors.caption,
links: colors.caption,
bold: colors.caption,
hr: colors.stroke,
quotes: colors.text,
quoteBorders: colors.stroke,
captions: colors.caption,
code: colors.text,
preCode: colors.stroke,
preBg: colors.text,
thBorders: colors.stroke,
tdBorders: colors.stroke,
buttonBorders: colors.text,
buttons: colors.caption,
},
icon: {
borderColor: colors.accent,
},
header: headerFooterProps,
footer: headerFooterProps,
banner: {
backgroundColor: colors.bg,
backgroundOpacity: 1,
textColor: colors.text,
fontFamily: light_js_1.fonts.sans,
textAlign: 'left',
fontSize: '12px',
boxShadow: `inset 0 1px 0 0 ${colors.stroke}`,
},
dialog: {
backgroundColor: colors.bg,
textColor: colors.text,
accentColor: colors.accent,
},
unseenBadge: {
backgroundColor: colors.badge,
},
container: {
backgroundColor: colors.bg,
textColor: colors.text,
boxShadow: 'none',
borderColor: colors.accent,
},
notification: {
default: {
backgroundColor: colors.bgHighlight,
borderRadius: '0',
textColor: colors.text,
margin: '0',
title: {
textColor: colors.caption,
},
hover: {
backgroundColor: colors.bgActive,
backgroundOpacity: 1,
},
state: {
color: colors.transparent,
},
},
unread: {
backgroundColor: colors.bg,
hover: {
backgroundColor: colors.bgActive,
},
state: {
color: colors.accent,
},
},
unseen: {
backgroundColor: colors.bg,
hover: {
backgroundColor: colors.bgActive,
},
state: {
color: colors.accent,
},
},
},
};
//# sourceMappingURL=flat.js.map