diff --git a/src/test/TestM3.jsx b/src/test/TestM3.jsx index fe97cad..c94ab37 100644 --- a/src/test/TestM3.jsx +++ b/src/test/TestM3.jsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + Alert, Box, Card, CardContent, FormControl, InputLabel, ListItemButton, MenuItem, Paper, Select, @@ -304,6 +305,18 @@ export default function TestM3() { + + Alerts: + Success + Info + Warning + Error + { const {colorScheme, mode, setMode } = useColorScheme(); @@ -16,6 +18,7 @@ export const ModeSwitcher = () => { setMode('dark'); } }} + startIcon={darkMode ? : } > {darkMode ? 'light' : 'dark'} diff --git a/src/theme/css/dark.css b/src/theme/css/dark.css index 36880ae..51d2c5e 100644 --- a/src/theme/css/dark.css +++ b/src/theme/css/dark.css @@ -52,6 +52,10 @@ --md-extended-color-notifications-on-color: rgb(86 29 33); --md-extended-color-notifications-color-container: rgb(115 51 54); --md-extended-color-notifications-on-color-container: rgb(255 218 218); + --md-extended-color-info-color: rgb(157 203 251); + --md-extended-color-info-on-color: rgb(0 51 85); + --md-extended-color-info-color-container: rgb(18 74 115); + --md-extended-color-info-on-color-container: rgb(207 229 255); --md-extended-color-success-color: rgb(161 211 154); --md-extended-color-success-on-color: rgb(10 57 15); --md-extended-color-success-color-container: rgb(36 80 36); diff --git a/src/theme/css/light.css b/src/theme/css/light.css index fb57cdf..d706766 100644 --- a/src/theme/css/light.css +++ b/src/theme/css/light.css @@ -52,6 +52,10 @@ --md-extended-color-notifications-on-color: rgb(255 255 255); --md-extended-color-notifications-color-container: rgb(255 218 218); --md-extended-color-notifications-on-color-container: rgb(59 8 14); + --md-extended-color-info-color: rgb(49 98 141); + --md-extended-color-info-on-color: rgb(255 255 255); + --md-extended-color-info-color-container: rgb(207 229 255); + --md-extended-color-info-on-color-container: rgb(0 29 52); --md-extended-color-success-color: rgb(59 105 57); --md-extended-color-success-on-color: rgb(255 255 255); --md-extended-color-success-color-container: rgb(188 240 180); diff --git a/src/theme/ge-theme.js b/src/theme/ge-theme.js index 3a57191..e0b8d62 100644 --- a/src/theme/ge-theme.js +++ b/src/theme/ge-theme.js @@ -82,6 +82,31 @@ geTheme = extendTheme( {components: { } } }, + MuiAlert: { + styleOverrides: { + root: { + borderRadius: 12, + width: "fit-content", + margin: geTheme.spacing(1), + }, + standardSuccess: { + backgroundColor: geTheme.vars.sys.color.successContainer, + color: geTheme.vars.sys.color.onSuccessContainer + }, + standardInfo: { + backgroundColor: geTheme.vars.sys.color.infoContainer, + color: geTheme.vars.sys.color.onInfoContainer + }, + standardWarning: { + backgroundColor: geTheme.vars.sys.color.warningContainer, + color: geTheme.vars.sys.color.onWarningContainer + }, + standardError: { + backgroundColor: geTheme.vars.sys.color.errorContainer, + color: geTheme.vars.sys.color.onErrorContainer + } + } + }, MuiCard: { styleOverrides: { root: { diff --git a/src/theme/mui-theme-adapter.js b/src/theme/mui-theme-adapter.js index c69780c..39f3e2c 100644 --- a/src/theme/mui-theme-adapter.js +++ b/src/theme/mui-theme-adapter.js @@ -45,6 +45,12 @@ const createColorScheme = (mode) => ({ container: cssVar('--md-extended-color-success-color-container', mode), onContainer: cssVar('--md-extended-color-success-on-color-container', mode), }, + info:{ + main: cssVar('--md-extended-color-info-color', mode), + contrastText: cssVar('--md-extended-color-info-on-color', mode), + container: cssVar('--md-extended-color-info-color-container', mode), + onContainer: cssVar('--md-extended-color-info-on-color-container', mode), + }, warning: { main: cssVar('--md-extended-color-warning-color', mode), contrastText: cssVar('--md-extended-color-warning-on-color', mode), @@ -123,10 +129,10 @@ const theme = (mode) => ({ onWarning: cssVar("--md-extended-color-warning-color", mode), warningContainer: cssVar("--md-extended-color-warning-color-container", mode), onWarningContainer: cssVar("--md-extended-color-warning-on-color-container", mode), - info: cssVar("--md-extended-color-notifications-color", mode), - onInfo: cssVar("--md-extended-color-notifications-on-color", mode), - infoContainer: cssVar("--md-extended-color-notifications-color-container", mode), - onInfoContainer: cssVar("--md-extended-color-notifications-on-color-container", mode), + info: cssVar("--md-extended-color-info-color", mode), + onInfo: cssVar("--md-extended-color-info-on-color", mode), + infoContainer: cssVar("--md-extended-color-info-color-container", mode), + onInfoContainer: cssVar("--md-extended-color-info-on-color-container", mode), success: cssVar("--md-extended-color-success-color", mode), onSuccess: cssVar("--md-extended-color-success-on-color", mode), successContainer: cssVar("--md-extended-color-success-color-container", mode),