@brizy/ui
Version:
React elements in Brizy style
21 lines (20 loc) • 2.05 kB
JavaScript
import React from "react";
import { getHexByColorType } from "../utils/colors";
import { getFieldsStyleTheme } from "../utils/getFieldsTheme";
import { BRZ_PREFIX } from "../constants";
export const Theme = props => {
var _a, _b, _c, _d;
const { children, colors, shadow } = props;
const { header, content, sider, footer, fields, card: cardColor } = colors || {};
const { card } = shadow || {};
const headerColor = getHexByColorType((_a = header === null || header === void 0 ? void 0 : header.color) !== null && _a !== void 0 ? _a : "white");
const contentColor = getHexByColorType((_b = content === null || content === void 0 ? void 0 : content.color) !== null && _b !== void 0 ? _b : "gray-lightest");
const siderColor = getHexByColorType((_c = sider === null || sider === void 0 ? void 0 : sider.color) !== null && _c !== void 0 ? _c : "dark");
const footerColor = getHexByColorType((_d = footer === null || footer === void 0 ? void 0 : footer.color) !== null && _d !== void 0 ? _d : "white");
const fieldsColor = getFieldsStyleTheme(fields);
const cardColors = Object.assign(Object.assign({}, ((cardColor === null || cardColor === void 0 ? void 0 : cardColor.background) ? { [`--${BRZ_PREFIX}-card-background`]: getHexByColorType(cardColor === null || cardColor === void 0 ? void 0 : cardColor.background) } : {})), ((cardColor === null || cardColor === void 0 ? void 0 : cardColor.borderColor)
? { [`--${BRZ_PREFIX}-card-border-color`]: getHexByColorType(cardColor === null || cardColor === void 0 ? void 0 : cardColor.borderColor) }
: {}));
const style = Object.assign(Object.assign(Object.assign({ [`--${BRZ_PREFIX}-header-color`]: headerColor, [`--${BRZ_PREFIX}-content-color`]: contentColor, [`--${BRZ_PREFIX}-sider-color`]: siderColor, [`--${BRZ_PREFIX}-footer-color`]: footerColor }, (card && { [`--${BRZ_PREFIX}-card-shadow`]: card })), fieldsColor), cardColors);
return (React.createElement("div", { className: `${BRZ_PREFIX}-theme__provider`, style: style }, children));
};