diff --git a/src/theme.js b/src/theme.js index ebc91805..8b285bf1 100644 --- a/src/theme.js +++ b/src/theme.js @@ -21,7 +21,19 @@ const { progressBg, progressBar, progressShadow, - switchShadow + switchShadow, + nodeRedBackgroundColor, + nodeRedBorderColor, + nodeRedBoxShadow, + nodeRedTextColor, + nodeBlueBackgroundColor, + nodeBlueBoxShadow, + nodeBlueBorderColor, + nodeBlueTextColor, + nodeGrayBoxShadow, + nodeGrayBackgroundColor, + nodeGrayBorderColor, + nodeGrayTextColor, } = vars; const theme = { @@ -237,6 +249,55 @@ const theme = { }, }, }, + + MuiCssBaseline: { + styleOverrides: ` + .primary-node.node-red { + background: ${nodeRedBackgroundColor}; + box-shadow: ${nodeRedBoxShadow}; + border-color: ${nodeRedBorderColor}; + } + + .primary-node.node-red .primary-node_header p { + color: ${nodeRedTextColor}; + } + + .primary-node.node-red .node-button .icon { + background: ${nodeRedBackgroundColor}; + border-color: ${nodeRedBorderColor}; + } + + .primary-node.node-blue { + background: ${nodeBlueBackgroundColor}; + box-shadow: ${nodeBlueBoxShadow}; + border-color: ${nodeBlueBorderColor}; + } + + .primary-node.node-blue .primary-node_header p { + color: ${nodeBlueTextColor}; + } + + .primary-node.node-blue .node-button .icon { + background: ${nodeBlueBackgroundColor}; + border-color: ${nodeBlueBorderColor}; + } + + .primary-node.node-gray { + background: ${nodeGrayBackgroundColor}; + box-shadow: ${nodeGrayBoxShadow}; + border-color: ${nodeGrayBorderColor}; + } + + .primary-node.node-gray .primary-node_header p { + color: ${nodeGrayTextColor}; + } + + .primary-node.node-gray .node-button .icon { + background: ${nodeGrayBackgroundColor}; + border-color: rgba(130, 130, 130, 0.2); + } + `, + }, }, };