From 8563a32a46770ec676e669354f96545f1dcb2d11 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 26 Oct 2024 17:23:18 +0300
Subject: [PATCH] Variants for #6653

---
 apps/showcase/doc/message/FormsDoc.vue        | 56 ++++++------
 apps/showcase/doc/message/OutlinedDoc.vue     | 38 +++++---
 apps/showcase/doc/message/PlainDoc.vue        | 63 +++++++++++++
 apps/showcase/doc/message/TextDoc.vue         | 45 ----------
 apps/showcase/pages/message/index.vue         | 10 +--
 .../src/message/style/MessageStyle.js         | 72 ++++++++++++++-
 .../themes/src/presets/aura/message/index.js  | 89 +++++++++++++++++++
 .../themes/src/presets/lara/message/index.js  | 89 +++++++++++++++++++
 .../src/presets/material/message/index.js     | 89 +++++++++++++++++++
 .../themes/src/presets/nora/message/index.js  | 89 +++++++++++++++++++
 10 files changed, 554 insertions(+), 86 deletions(-)
 create mode 100644 apps/showcase/doc/message/PlainDoc.vue
 delete mode 100644 apps/showcase/doc/message/TextDoc.vue

diff --git a/apps/showcase/doc/message/FormsDoc.vue b/apps/showcase/doc/message/FormsDoc.vue
index 765d5431e..c09ba040a 100644
--- a/apps/showcase/doc/message/FormsDoc.vue
+++ b/apps/showcase/doc/message/FormsDoc.vue
@@ -2,14 +2,16 @@
     <DocSectionText v-bind="$attrs">
         <p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap mb-4 gap-2">
-            <InputText placeholder="Username" aria-label="username" invalid />
-            <Message severity="error">Username is required</Message>
-        </div>
-        <div class="flex flex-wrap gap-2">
-            <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" icon="pi pi-times-circle" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Username" aria-label="username" invalid />
+                <Message severity="error">Username is required</Message>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Email" aria-label="email" invalid />
+                <Message severity="error" icon="pi pi-times-circle" />
+            </div>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -21,7 +23,7 @@ export default {
         return {
             code: {
                 basic: `
- <div class="flex flex-wrap mb-4 gap-2">
+<div class="flex flex-wrap gap-2">
     <InputText placeholder="Username" aria-label="username" invalid />
     <Message severity="error">Username is required</Message>
 </div>
@@ -32,14 +34,16 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
-        <div class="flex flex-wrap mb-4 gap-2">
-            <InputText placeholder="Username" aria-label="username" invalid />
-            <Message severity="error">Username is required</Message>
-        </div>
-        <div class="flex flex-wrap gap-2">
-            <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" icon="pi pi-times-circle" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Username" aria-label="username" invalid />
+                <Message severity="error">Username is required</Message>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Email" aria-label="email" invalid />
+                <Message severity="error" icon="pi pi-times-circle" />
+            </div>
         </div>
     </div>
 </template>
@@ -49,14 +53,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card">
-        <div class="flex flex-wrap mb-4 gap-2">
-            <InputText placeholder="Username" aria-label="username" invalid />
-            <Message severity="error">Username is required</Message>
-        </div>
-        <div class="flex flex-wrap gap-2">
-            <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" icon="pi pi-times-circle" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Username" aria-label="username" invalid />
+                <Message severity="error">Username is required</Message>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <InputText placeholder="Email" aria-label="email" invalid />
+                <Message severity="error" icon="pi pi-times-circle" />
+            </div>
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/message/OutlinedDoc.vue b/apps/showcase/doc/message/OutlinedDoc.vue
index 21e576d38..b4660ca98 100644
--- a/apps/showcase/doc/message/OutlinedDoc.vue
+++ b/apps/showcase/doc/message/OutlinedDoc.vue
@@ -1,11 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+        <p>Configure the <i>variant</i> value as <i>outlined</i> for messages with borders and no background.</p>
     </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Message size="small">Small Message</Message>
-        <Message>Normal Message</Message>
-        <Message size="large">Large Message</Message>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +19,22 @@ export default {
         return {
             code: {
                 basic: `
-<Message>Message Content</Message>
+<Message severity="success" variant="outlined">Success Message</Message>
+<Message severity="info" variant="outlined">Info Message</Message>
+<Message severity="warn" variant="outlined">Warn Message</Message>
+<Message severity="error" variant="outlined">Error Message</Message>
+<Message severity="secondary" variant="outlined">Secondary Message</Message>
+<Message severity="contrast" variant="outlined">Contrast Message</Message>
 `,
                 options: `
 <template>
-    <div class="card">
-        <Message>Message Content</Message>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
     </div>
 </template>
 
@@ -30,8 +43,13 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card">
-        <Message>Message Content</Message>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
     </div>
 </template>
 
diff --git a/apps/showcase/doc/message/PlainDoc.vue b/apps/showcase/doc/message/PlainDoc.vue
new file mode 100644
index 000000000..1bc7852c5
--- /dev/null
+++ b/apps/showcase/doc/message/PlainDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure the <i>variant</i> value as <i>plain</i> for messages without borders and backgrounds.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="plain">Success Message</Message>
+        <Message severity="info" variant="plain">Info Message</Message>
+        <Message severity="warn" variant="plain">Warn Message</Message>
+        <Message severity="error" variant="plain">Error Message</Message>
+        <Message severity="secondary" variant="plain">Secondary Message</Message>
+        <Message severity="contrast" variant="plain">Contrast Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="success" variant="plain">Success Message</Message>
+<Message severity="info" variant="plain">Info Message</Message>
+<Message severity="warn" variant="plain">Warn Message</Message>
+<Message severity="error" variant="plain">Error Message</Message>
+<Message severity="secondary" variant="plain">Secondary Message</Message>
+<Message severity="contrast" variant="plain">Contrast Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="plain">Success Message</Message>
+        <Message severity="info" variant="plain">Info Message</Message>
+        <Message severity="warn" variant="plain">Warn Message</Message>
+        <Message severity="error" variant="plain">Error Message</Message>
+        <Message severity="secondary" variant="plain">Secondary Message</Message>
+        <Message severity="contrast" variant="plain">Contrast Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="plain">Success Message</Message>
+        <Message severity="info" variant="plain">Info Message</Message>
+        <Message severity="warn" variant="plain">Warn Message</Message>
+        <Message severity="error" variant="plain">Error Message</Message>
+        <Message severity="secondary" variant="plain">Secondary Message</Message>
+        <Message severity="contrast" variant="plain">Contrast Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/message/TextDoc.vue b/apps/showcase/doc/message/TextDoc.vue
deleted file mode 100644
index 21e576d38..000000000
--- a/apps/showcase/doc/message/TextDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Message size="small">Small Message</Message>
-        <Message>Normal Message</Message>
-        <Message size="large">Large Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message>Message Content</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message>Message Content</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message>Message Content</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/pages/message/index.vue b/apps/showcase/pages/message/index.vue
index d50ae8cbd..e73abec63 100755
--- a/apps/showcase/pages/message/index.vue
+++ b/apps/showcase/pages/message/index.vue
@@ -12,10 +12,10 @@ import IconDoc from '@/doc/message/IconDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
 import LifeDoc from '@/doc/message/LifeDoc.vue';
 import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
+import PlainDoc from '@/doc/message/PlainDoc.vue';
+import PTComponent from '@/doc/message/pt/index.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import SizesDoc from '@/doc/message/SizesDoc.vue';
-import TextDoc from '@/doc/message/TextDoc.vue';
-import PTComponent from '@/doc/message/pt/index.vue';
 import ThemingDoc from '@/doc/message/theming/index.vue';
 
 export default {
@@ -48,9 +48,9 @@ export default {
                     component: OutlinedDoc
                 },
                 {
-                    id: 'text',
-                    label: 'Text',
-                    component: TextDoc
+                    id: 'plain',
+                    label: 'Plain',
+                    component: PlainDoc
                 },
                 {
                     id: 'sizes',
diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js
index 1ece597df..0fd52bb55 100644
--- a/packages/primevue/src/message/style/MessageStyle.js
+++ b/packages/primevue/src/message/style/MessageStyle.js
@@ -68,6 +68,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.info.close.button.hover.background')};
 }
 
+.p-message-info.p-message-variant-outlined {
+    color: ${dt('message.info.outlined.color')};
+    outline-color: ${dt('message.info.outlined.border.color')};
+}
+
+.p-message-info.p-message-variant-plain {
+    color: ${dt('message.info.plain.color')};
+}
+
 .p-message-success {
     background: ${dt('message.success.background')};
     outline-color: ${dt('message.success.border.color')};
@@ -84,6 +93,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.success.close.button.hover.background')};
 }
 
+.p-message-success.p-message-variant-outlined {
+    color: ${dt('message.success.outlined.color')};
+    outline-color: ${dt('message.success.outlined.border.color')};
+}
+
+.p-message-success.p-message-variant-plain {
+    color: ${dt('message.success.plain.color')};
+}
+
 .p-message-warn {
     background: ${dt('message.warn.background')};
     outline-color: ${dt('message.warn.border.color')};
@@ -100,6 +118,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.warn.close.button.hover.background')};
 }
 
+.p-message-warn.p-message-variant-outlined {
+    color: ${dt('message.warn.outlined.color')};
+    outline-color: ${dt('message.warn.outlined.border.color')};
+}
+
+.p-message-warn.p-message-variant-plain {
+    color: ${dt('message.warn.plain.color')};
+}
+
 .p-message-error {
     background: ${dt('message.error.background')};
     outline-color: ${dt('message.error.border.color')};
@@ -116,6 +143,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.error.close.button.hover.background')};
 }
 
+.p-message-error.p-message-variant-outlined {
+    color: ${dt('message.error.outlined.color')};
+    outline-color: ${dt('message.error.outlined.border.color')};
+}
+
+.p-message-error.p-message-variant-plain {
+    color: ${dt('message.error.plain.color')};
+}
+
 .p-message-secondary {
     background: ${dt('message.secondary.background')};
     outline-color: ${dt('message.secondary.border.color')};
@@ -132,6 +168,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.secondary.close.button.hover.background')};
 }
 
+.p-message-secondary.p-message-variant-outlined {
+    color: ${dt('message.secondary.outlined.color')};
+    outline-color: ${dt('message.secondary.outlined.border.color')};
+}
+
+.p-message-secondary.p-message-variant-plain {
+    color: ${dt('message.secondary.plain.color')};
+}
+
 .p-message-contrast {
     background: ${dt('message.contrast.background')};
     outline-color: ${dt('message.contrast.border.color')};
@@ -148,6 +193,15 @@ const theme = ({ dt }) => `
     background: ${dt('message.contrast.close.button.hover.background')};
 }
 
+.p-message-contrast.p-message-variant-outlined {
+    color: ${dt('message.contrast.outlined.color')};
+    outline-color: ${dt('message.contrast.outlined.border.color')};
+}
+
+.p-message-contrast.p-message-variant-plain {
+    color: ${dt('message.contrast.plain.color')};
+}
+
 .p-message-text {
     font-size: ${dt('message.text.font.size')};
     font-weight: ${dt('message.text.font.weight')};
@@ -225,6 +279,22 @@ const theme = ({ dt }) => `
     width: ${dt('message.close.icon.lg.size')};
     height: ${dt('message.close.icon.lg.size')};
 }
+
+.p-message-variant-outlined {
+    background: transparent;
+    outline-width: ${dt('message.outlined.border.width')};
+}
+
+.p-message-variant-plain {
+    background: transparent;
+    outline-color: transparent;
+    box-shadow: none;
+}
+
+.p-message-variant-outlined .p-message-close-button:hover,
+.p-message-variant-plain .p-message-close-button:hover {
+    background: transparent;
+}
 `;
 
 const classes = {
@@ -232,7 +302,7 @@ const classes = {
         'p-message p-component p-message-' + props.severity,
         {
             'p-message-variant-outlined': props.variant === 'outlined',
-            'p-message-variant-text': props.variant === 'text',
+            'p-message-variant-plain': props.variant === 'plain',
             'p-message-sm': props.size === 'small',
             'p-message-lg': props.size === 'large'
         }
diff --git a/packages/themes/src/presets/aura/message/index.js b/packages/themes/src/presets/aura/message/index.js
index 75ca6a68f..0426e4c6a 100644
--- a/packages/themes/src/presets/aura/message/index.js
+++ b/packages/themes/src/presets/aura/message/index.js
@@ -52,6 +52,11 @@ export default {
             size: '1.125rem'
         }
     },
+    outlined: {
+        root: {
+            borderWidth: '1px'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -65,6 +70,13 @@ export default {
                         color: '{blue.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.600}',
+                    borderColor: '{blue.600}'
+                },
+                plain: {
+                    color: '{blue.600}'
                 }
             },
             success: {
@@ -78,6 +90,13 @@ export default {
                         color: '{green.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.600}',
+                    borderColor: '{green.600}'
+                },
+                plain: {
+                    color: '{green.600}'
                 }
             },
             warn: {
@@ -91,6 +110,13 @@ export default {
                         color: '{yellow.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.600}',
+                    borderColor: '{yellow.600}'
+                },
+                plain: {
+                    color: '{yellow.600}'
                 }
             },
             error: {
@@ -104,6 +130,13 @@ export default {
                         color: '{red.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.600}',
+                    borderColor: '{red.600}'
+                },
+                plain: {
+                    color: '{red.600}'
                 }
             },
             secondary: {
@@ -117,6 +150,13 @@ export default {
                         color: '{surface.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.500}',
+                    borderColor: '{surface.500}'
+                },
+                plain: {
+                    color: '{surface.500}'
                 }
             },
             contrast: {
@@ -130,6 +170,13 @@ export default {
                         color: '{surface.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.950}',
+                    borderColor: '{surface.950}'
+                },
+                plain: {
+                    color: '{surface.950}'
                 }
             }
         },
@@ -145,6 +192,13 @@ export default {
                         color: '{blue.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.500}',
+                    borderColor: '{blue.500}'
+                },
+                plain: {
+                    color: '{blue.500}'
                 }
             },
             success: {
@@ -158,6 +212,13 @@ export default {
                         color: '{green.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.500}',
+                    borderColor: '{green.500}'
+                },
+                plain: {
+                    color: '{green.500}'
                 }
             },
             warn: {
@@ -171,6 +232,13 @@ export default {
                         color: '{yellow.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.500}',
+                    borderColor: '{yellow.500}'
+                },
+                plain: {
+                    color: '{yellow.500}'
                 }
             },
             error: {
@@ -184,6 +252,13 @@ export default {
                         color: '{red.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.500}',
+                    borderColor: '{red.500}'
+                },
+                plain: {
+                    color: '{red.500}'
                 }
             },
             secondary: {
@@ -197,6 +272,13 @@ export default {
                         color: '{surface.300}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.400}',
+                    borderColor: '{surface.400}'
+                },
+                plain: {
+                    color: '{surface.400}'
                 }
             },
             contrast: {
@@ -210,6 +292,13 @@ export default {
                         color: '{surface.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.0}',
+                    borderColor: '{surface.0}'
+                },
+                plain: {
+                    color: '{surface.0}'
                 }
             }
         }
diff --git a/packages/themes/src/presets/lara/message/index.js b/packages/themes/src/presets/lara/message/index.js
index dbc49d4b0..991f5c768 100644
--- a/packages/themes/src/presets/lara/message/index.js
+++ b/packages/themes/src/presets/lara/message/index.js
@@ -52,6 +52,11 @@ export default {
             fontSize: '1.125rem'
         }
     },
+    outlined: {
+        root: {
+            borderWidth: '1px'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -65,6 +70,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {blue.200}'
                     }
+                },
+                outlined: {
+                    color: '{blue.600}',
+                    borderColor: '{blue.600}'
+                },
+                plain: {
+                    color: '{blue.600}'
                 }
             },
             success: {
@@ -78,6 +90,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {green.200}'
                     }
+                },
+                outlined: {
+                    color: '{green.600}',
+                    borderColor: '{green.600}'
+                },
+                plain: {
+                    color: '{green.600}'
                 }
             },
             warn: {
@@ -91,6 +110,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {yellow.200}'
                     }
+                },
+                outlined: {
+                    color: '{yellow.600}',
+                    borderColor: '{yellow.600}'
+                },
+                plain: {
+                    color: '{yellow.600}'
                 }
             },
             error: {
@@ -104,6 +130,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {red.200}'
                     }
+                },
+                outlined: {
+                    color: '{red.600}',
+                    borderColor: '{red.600}'
+                },
+                plain: {
+                    color: '{red.600}'
                 }
             },
             secondary: {
@@ -117,6 +150,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {surface.200}'
                     }
+                },
+                outlined: {
+                    color: '{surface.500}',
+                    borderColor: '{surface.500}'
+                },
+                plain: {
+                    color: '{surface.500}'
                 }
             },
             contrast: {
@@ -130,6 +170,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem {surface.400}'
                     }
+                },
+                outlined: {
+                    color: '{surface.900}',
+                    borderColor: '{surface.900}'
+                },
+                plain: {
+                    color: '{surface.900}'
                 }
             }
         },
@@ -145,6 +192,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{blue.500}',
+                    borderColor: '{blue.500}'
+                },
+                plain: {
+                    color: '{blue.500}'
                 }
             },
             success: {
@@ -158,6 +212,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{green.500}',
+                    borderColor: '{green.500}'
+                },
+                plain: {
+                    color: '{green.500}'
                 }
             },
             warn: {
@@ -171,6 +232,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{yellow.500}',
+                    borderColor: '{yellow.500}'
+                },
+                plain: {
+                    color: '{yellow.500}'
                 }
             },
             error: {
@@ -184,6 +252,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{red.500}',
+                    borderColor: '{red.500}'
+                },
+                plain: {
+                    color: '{red.500}'
                 }
             },
             secondary: {
@@ -197,6 +272,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{surface.400}',
+                    borderColor: '{surface.400}'
+                },
+                plain: {
+                    color: '{surface.400}'
                 }
             },
             contrast: {
@@ -210,6 +292,13 @@ export default {
                         color: '{focus.ring.color}',
                         shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
                     }
+                },
+                outlined: {
+                    color: '{surface.0}',
+                    borderColor: '{surface.0}'
+                },
+                plain: {
+                    color: '{surface.0}'
                 }
             }
         }
diff --git a/packages/themes/src/presets/material/message/index.js b/packages/themes/src/presets/material/message/index.js
index d88a48db9..d474e982b 100644
--- a/packages/themes/src/presets/material/message/index.js
+++ b/packages/themes/src/presets/material/message/index.js
@@ -52,6 +52,11 @@ export default {
             fontSize: '1.125rem'
         }
     },
+    outlined: {
+        root: {
+            borderWidth: '1px'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -65,6 +70,13 @@ export default {
                         color: '{blue.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.600}',
+                    borderColor: '{blue.600}'
+                },
+                plain: {
+                    color: '{blue.600}'
                 }
             },
             success: {
@@ -78,6 +90,13 @@ export default {
                         color: '{green.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.600}',
+                    borderColor: '{green.600}'
+                },
+                plain: {
+                    color: '{green.600}'
                 }
             },
             warn: {
@@ -91,6 +110,13 @@ export default {
                         color: '{yellow.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.900}',
+                    borderColor: '{yellow.900}'
+                },
+                plain: {
+                    color: '{yellow.900}'
                 }
             },
             error: {
@@ -104,6 +130,13 @@ export default {
                         color: '{red.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.600}',
+                    borderColor: '{red.600}'
+                },
+                plain: {
+                    color: '{red.600}'
                 }
             },
             secondary: {
@@ -117,6 +150,13 @@ export default {
                         color: '{surface.600}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.600}',
+                    borderColor: '{surface.600}'
+                },
+                plain: {
+                    color: '{surface.600}'
                 }
             },
             contrast: {
@@ -130,6 +170,13 @@ export default {
                         color: '{surface.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.950}',
+                    borderColor: '{surface.950}'
+                },
+                plain: {
+                    color: '{surface.950}'
                 }
             }
         },
@@ -145,6 +192,13 @@ export default {
                         color: '{blue.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.500}',
+                    borderColor: '{blue.500}'
+                },
+                plain: {
+                    color: '{blue.500}'
                 }
             },
             success: {
@@ -158,6 +212,13 @@ export default {
                         color: '{green.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.500}',
+                    borderColor: '{green.500}'
+                },
+                plain: {
+                    color: '{green.500}'
                 }
             },
             warn: {
@@ -171,6 +232,13 @@ export default {
                         color: '{yellow.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.500}',
+                    borderColor: '{yellow.500}'
+                },
+                plain: {
+                    color: '{yellow.500}'
                 }
             },
             error: {
@@ -184,6 +252,13 @@ export default {
                         color: '{red.500}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.500}',
+                    borderColor: '{red.500}'
+                },
+                plain: {
+                    color: '{red.500}'
                 }
             },
             secondary: {
@@ -197,6 +272,13 @@ export default {
                         color: '{surface.300}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.400}',
+                    borderColor: '{surface.400}'
+                },
+                plain: {
+                    color: '{surface.400}'
                 }
             },
             contrast: {
@@ -210,6 +292,13 @@ export default {
                         color: '{surface.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.0}',
+                    borderColor: '{surface.0}'
+                },
+                plain: {
+                    color: '{surface.0}'
                 }
             }
         }
diff --git a/packages/themes/src/presets/nora/message/index.js b/packages/themes/src/presets/nora/message/index.js
index 52a55ec1e..a1d4acc5a 100644
--- a/packages/themes/src/presets/nora/message/index.js
+++ b/packages/themes/src/presets/nora/message/index.js
@@ -52,6 +52,11 @@ export default {
             size: '1.125rem'
         }
     },
+    outlined: {
+        root: {
+            borderWidth: '1px'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -65,6 +70,13 @@ export default {
                         color: '{blue.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.800}',
+                    borderColor: '{blue.800}'
+                },
+                plain: {
+                    color: '{blue.800}'
                 }
             },
             success: {
@@ -78,6 +90,13 @@ export default {
                         color: '{green.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.800}',
+                    borderColor: '{green.800}'
+                },
+                plain: {
+                    color: '{green.800}'
                 }
             },
             warn: {
@@ -91,6 +110,13 @@ export default {
                         color: '{yellow.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.600}',
+                    borderColor: '{yellow.600}'
+                },
+                plain: {
+                    color: '{yellow.600}'
                 }
             },
             error: {
@@ -104,6 +130,13 @@ export default {
                         color: '{red.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.800}',
+                    borderColor: '{red.800}'
+                },
+                plain: {
+                    color: '{red.800}'
                 }
             },
             secondary: {
@@ -117,6 +150,13 @@ export default {
                         color: '{surface.700}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.600}',
+                    borderColor: '{surface.600}'
+                },
+                plain: {
+                    color: '{surface.600}'
                 }
             },
             contrast: {
@@ -130,6 +170,13 @@ export default {
                         color: '{surface.50}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.900}',
+                    borderColor: '{surface.900}'
+                },
+                plain: {
+                    color: '{surface.900}'
                 }
             }
         },
@@ -145,6 +192,13 @@ export default {
                         color: '{blue.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{blue.200}',
+                    borderColor: '{blue.200}'
+                },
+                plain: {
+                    color: '{blue.200}'
                 }
             },
             success: {
@@ -158,6 +212,13 @@ export default {
                         color: '{green.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{green.200}',
+                    borderColor: '{green.200}'
+                },
+                plain: {
+                    color: '{green.200}'
                 }
             },
             warn: {
@@ -171,6 +232,13 @@ export default {
                         color: '{yellow.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{yellow.200}',
+                    borderColor: '{yellow.200}'
+                },
+                plain: {
+                    color: '{yellow.200}'
                 }
             },
             error: {
@@ -184,6 +252,13 @@ export default {
                         color: '{red.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{red.200}',
+                    borderColor: '{red.200}'
+                },
+                plain: {
+                    color: '{red.200}'
                 }
             },
             secondary: {
@@ -197,6 +272,13 @@ export default {
                         color: '{surface.200}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.400}',
+                    borderColor: '{surface.400}'
+                },
+                plain: {
+                    color: '{surface.400}'
                 }
             },
             contrast: {
@@ -210,6 +292,13 @@ export default {
                         color: '{surface.950}',
                         shadow: 'none'
                     }
+                },
+                outlined: {
+                    color: '{surface.0}',
+                    borderColor: '{surface.0}'
+                },
+                plain: {
+                    color: '{surface.0}'
                 }
             }
         }