@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
301 lines • 8.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeProvider = exports.injectCustomPaletteToTheme = exports.darkTheme = exports.lightTheme = exports.bodyFontFamily = exports.getColorFromStatus = exports.EFontSize = exports.EFontWeight = exports.EButtonStatus = exports.EStatusColor = exports.colors = void 0;
const core_1 = require("@material-ui/core");
exports.colors = {
WHITE: "#FFFFFF",
BLACK: "#000000",
STATUS_GREEN: "#00C3A9",
STATUS_RED: "#D32F2F",
STATUS_BLUE: "#0078FF",
BACKGROUND_GREY: "#F9F9F9",
MAIN_TEXT_BLACK: "#1D1D1D",
BOX_BORDER_COLOR: "#F6F6F6",
STATUS_GREY: "#676767",
GRAY0: "#FFFFFF",
GRAY100: "#FAFBFC",
GRAY150: "#F4F5F7",
GRAY200: "#DFE1E6",
GRAY300: "#EBECF0",
GRAY400: "#7A869A",
GRAY500: "#42526E",
GRAY600: "#172B4D",
GRAY700: "#091E42",
PURPLE100: "#EAE6FF",
PURPLE200: "#C0B6F2",
PURPLE300: "#998DD9",
PURPLE400: "#8174F7",
PURPLE700: "#6554C0",
GREEN100: "#E3FCEF",
GREEN200: "#ABF5D1",
GREEN500: "#36B37E",
GREEN700: "#006644",
BLUE100: "#DEEBFF",
BLUE200: "#B3D4FF",
BLUE300: "#4C9AFF",
BLUE400: "#0052CC",
BLUE700: "#0747A6",
RED100: "#FFEBE6",
RED200: "#FFBDAD",
RED400: "#DE350B",
RED700: "#BF2600",
ORANGE100: "#FFFAE6",
ORANGE200: "##FFE380",
ORANGE400: "#FFAB00",
ORANGE700: "#FF8B00",
};
var EStatusColor;
(function (EStatusColor) {
EStatusColor["IDLE"] = "IDLE";
EStatusColor["SUCCESS"] = "SUCCESS";
EStatusColor["DANGER"] = "DANGER";
EStatusColor["PRIMARY"] = "PRIMARY";
})(EStatusColor = exports.EStatusColor || (exports.EStatusColor = {}));
var EButtonStatus;
(function (EButtonStatus) {
EButtonStatus[EButtonStatus["primary"] = 0] = "primary";
EButtonStatus[EButtonStatus["secondary"] = 1] = "secondary";
EButtonStatus[EButtonStatus["link"] = 2] = "link";
})(EButtonStatus = exports.EButtonStatus || (exports.EButtonStatus = {}));
var EFontWeight;
(function (EFontWeight) {
EFontWeight[EFontWeight["LIGHT"] = 300] = "LIGHT";
EFontWeight[EFontWeight["REGULAR"] = 400] = "REGULAR";
EFontWeight[EFontWeight["MEDIUM"] = 500] = "MEDIUM";
EFontWeight[EFontWeight["SEMI_BOLD"] = 600] = "SEMI_BOLD";
EFontWeight[EFontWeight["BOLD"] = 700] = "BOLD";
})(EFontWeight = exports.EFontWeight || (exports.EFontWeight = {}));
var EFontSize;
(function (EFontSize) {
EFontSize["BASE"] = "1rem";
EFontSize["H1"] = "1.476rem";
EFontSize["H2"] = "1.383rem";
EFontSize["H3"] = "1.296rem";
EFontSize["H4"] = "1.215rem";
EFontSize["H5"] = "1.138rem";
EFontSize["H6"] = "1.067rem";
EFontSize["SUBTITLE1"] = "1rem";
EFontSize["SUBTITLE2"] = ".878rem";
EFontSize["BODY1"] = ".878rem";
EFontSize["BODY2"] = ".823rem";
EFontSize["BUTTON_LARGE"] = "1rem";
EFontSize["BUTTON_MEDIUM"] = ".878rem";
EFontSize["BUTTON_SMALL"] = ".772rem";
EFontSize["LABEL_LARGE"] = ".878rem";
EFontSize["LABEL_SMALL"] = ".772rem";
})(EFontSize = exports.EFontSize || (exports.EFontSize = {}));
const getColorFromStatus = (status) => {
switch (status) {
case EStatusColor.DANGER:
return exports.colors.STATUS_RED;
case EStatusColor.PRIMARY:
return exports.colors.PURPLE400;
case EStatusColor.SUCCESS:
return exports.colors.STATUS_GREEN;
case EStatusColor.IDLE:
return exports.colors.STATUS_GREY;
default:
return exports.colors.WHITE;
}
};
exports.getColorFromStatus = getColorFromStatus;
const MuiTypography = {
button: {
textTransform: "none",
},
};
const MuiButton = {
root: {
padding: "12px",
fontSize: EFontSize.BUTTON_MEDIUM,
textTransform: "none",
borderRadius: 3,
},
outlined: {
padding: "12px",
},
text: {
padding: "12px",
},
sizeSmall: {
padding: "8px 12px",
fontSize: EFontSize.BUTTON_SMALL,
},
outlinedSizeSmall: {
padding: "8px 12px",
fontSize: EFontSize.BUTTON_SMALL,
},
containedSizeSmall: {
padding: "8px 12px",
fontSize: EFontSize.BUTTON_SMALL,
},
sizeLarge: {
fontSize: EFontSize.BUTTON_LARGE,
},
outlinedSizeLarge: {
fontSize: EFontSize.BUTTON_LARGE,
},
containedSizeLarge: {
fontSize: EFontSize.BUTTON_LARGE,
},
};
const MuiCheckbox = {
root: {
"&&:hover": {
backgroundColor: "transparent",
},
},
colorPrimary: {
"&$checked": {
color: exports.colors.BLUE400,
},
},
};
const MuiButtonBase = {
disableRipple: true,
root: {
fontSize: EFontSize.BASE,
textTransform: "none",
},
};
const MuiTextField = {
root: {
background: exports.colors.GRAY100,
border: `2px solid ${exports.colors.GRAY200}`,
borderRadius: 3,
fontSize: EFontSize.BODY2,
},
};
const MuiAutocomplete = {
option: {
paddingTop: 0,
paddingBottom: 0,
},
};
const MuiChip = {
root: {
borderRadius: 3,
},
deleteIcon: {
margin: "0 4px 0 0",
width: 16,
height: 16,
},
};
// GovernanceProgress applies height and backgroundColor inline.
const MuiLinearProgress = {
root: {
height: "inherit",
borderRadius: 3,
backgroundColor: exports.colors.GRAY200,
},
barColorPrimary: {
backgroundColor: "inherit",
},
bar: {
borderRadius: 3,
},
};
exports.bodyFontFamily = `"Inter", sans-serif`;
const typography = {
fontFamily: exports.bodyFontFamily,
gutterBottom: 10,
h1: {
fontSize: EFontSize.H1,
fontFamily: exports.bodyFontFamily,
},
h2: {
fontSize: EFontSize.H2,
fontFamily: exports.bodyFontFamily,
},
h3: {
fontSize: EFontSize.H3,
fontFamily: exports.bodyFontFamily,
},
h4: {
fontSize: EFontSize.H4,
fontFamily: exports.bodyFontFamily,
},
h5: {
fontSize: EFontSize.H5,
fontFamily: exports.bodyFontFamily,
},
h6: {
fontSize: EFontSize.H6,
fontFamily: exports.bodyFontFamily,
},
subtitle1: {
fontSize: EFontSize.SUBTITLE1,
fontFamily: exports.bodyFontFamily,
},
subtitle2: {
fontSize: EFontSize.SUBTITLE2,
fontFamily: exports.bodyFontFamily,
},
body1: {
fontSize: EFontSize.BODY1,
fontFamily: exports.bodyFontFamily,
},
body2: {
fontSize: EFontSize.BODY2,
fontFamily: exports.bodyFontFamily,
},
button: {
fontSize: EFontSize.BASE,
},
};
exports.lightTheme = (0, core_1.createTheme)({
typography,
palette: {
primary: {
main: exports.colors.PURPLE400,
light: exports.colors.PURPLE300,
dark: exports.colors.PURPLE700,
contrastText: exports.colors.WHITE,
},
text: {
primary: exports.colors.GRAY700,
secondary: exports.colors.GRAY500,
},
divider: exports.colors.GRAY200,
},
overrides: {
// @ts-ignore
MuiTypography,
MuiButton,
MuiTextField,
MuiLinearProgress,
MuiAutocomplete,
MuiChip,
MuiCheckbox,
},
props: {
MuiButtonBase,
},
});
exports.darkTheme = (0, core_1.createTheme)({
typography,
palette: {
type: "dark",
},
overrides: {
// @ts-ignore
MuiTypography,
MuiButton,
},
props: {
MuiButtonBase,
},
});
const injectCustomPaletteToTheme = (theme, customPalette) => {
const { palette } = theme;
const injectedPalette = {
primary: { ...palette.primary, ...customPalette === null || customPalette === void 0 ? void 0 : customPalette.primary },
text: { ...palette.text, ...customPalette === null || customPalette === void 0 ? void 0 : customPalette.text },
divider: (customPalette === null || customPalette === void 0 ? void 0 : customPalette.divider) || palette.divider,
};
return (0, core_1.createTheme)({ ...theme, palette: injectedPalette });
};
exports.injectCustomPaletteToTheme = injectCustomPaletteToTheme;
exports.ThemeProvider = core_1.ThemeProvider;
//# sourceMappingURL=theme.js.map