From b263c1eec529fdf11c703f90915fd8e12d9bebbe Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2024 14:12:15 +0300
Subject: [PATCH] Rename plain to simple for #6653

---
 apps/showcase/doc/inputtext/FormsDoc.vue      | 32 +++++-----
 apps/showcase/doc/message/PlainDoc.vue        | 63 -------------------
 apps/showcase/doc/message/SimpleDoc.vue       | 63 +++++++++++++++++++
 apps/showcase/layouts/AppConfigurator.vue     |  2 +-
 apps/showcase/pages/message/index.vue         |  8 +--
 packages/primevue/src/message/Message.d.ts    |  2 +-
 .../src/message/style/MessageStyle.js         | 52 ++++++++-------
 .../themes/src/presets/aura/message/index.js  | 29 +++++----
 .../themes/src/presets/lara/message/index.js  | 29 +++++----
 .../src/presets/material/message/index.js     | 29 +++++----
 .../themes/src/presets/nora/message/index.js  | 29 +++++----
 11 files changed, 181 insertions(+), 157 deletions(-)
 delete mode 100644 apps/showcase/doc/message/PlainDoc.vue
 create mode 100644 apps/showcase/doc/message/SimpleDoc.vue

diff --git a/apps/showcase/doc/inputtext/FormsDoc.vue b/apps/showcase/doc/inputtext/FormsDoc.vue
index 736cb52ac..d541f30ef 100644
--- a/apps/showcase/doc/inputtext/FormsDoc.vue
+++ b/apps/showcase/doc/inputtext/FormsDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -38,13 +38,13 @@ export default {
             code: {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
         <InputText name="username" type="text" placeholder="Username" />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
     </div>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
         <InputText name="email" type="text" placeholder="Email" />
-        <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
+        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -53,13 +53,13 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -100,13 +100,13 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/message/PlainDoc.vue b/apps/showcase/doc/message/PlainDoc.vue
deleted file mode 100644
index 1bc7852c5..000000000
--- a/apps/showcase/doc/message/PlainDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<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/SimpleDoc.vue b/apps/showcase/doc/message/SimpleDoc.vue
new file mode 100644
index 000000000..8d1bdeb8e
--- /dev/null
+++ b/apps/showcase/doc/message/SimpleDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure the <i>variant</i> value as <i>simple</i> for messages without borders, backgrounds and paddings.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="success" variant="simple">Success Message</Message>
+<Message severity="info" variant="simple">Info Message</Message>
+<Message severity="warn" variant="simple">Warn Message</Message>
+<Message severity="error" variant="simple">Error Message</Message>
+<Message severity="secondary" variant="simple">Secondary Message</Message>
+<Message severity="contrast" variant="simple">Contrast Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index 9ba12a027..5b15ecd84 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -98,7 +98,7 @@ export default {
                 },
                 {
                     name: 'soho',
-                    palette: { 0: '#ffffff', 50: '#f4f4f4', 100: '#e8e9e9', 200: '#d2d2d4', 300: '#bbbcbe', 400: '#a5a5a9', 500: '#8e8f93', 600: '#77787d', 700: '#616268', 800: '#4a4b52', 900: '#34343d', 950: '#1d1e27' }
+                    palette: { 0: '#ffffff', 50: '#ececec', 100: '#dedfdf', 200: '#c4c4c6', 300: '#adaeb0', 400: '#97979b', 500: '#7f8084', 600: '#6a6b70', 700: '#55565b', 800: '#3f4046', 900: '#2c2c34', 950: '#16161d' }
                 },
                 {
                     name: 'viva',
diff --git a/apps/showcase/pages/message/index.vue b/apps/showcase/pages/message/index.vue
index e73abec63..64cbfe443 100755
--- a/apps/showcase/pages/message/index.vue
+++ b/apps/showcase/pages/message/index.vue
@@ -12,7 +12,7 @@ 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 SimpleDoc from '@/doc/message/SimpleDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import SizesDoc from '@/doc/message/SizesDoc.vue';
@@ -48,9 +48,9 @@ export default {
                     component: OutlinedDoc
                 },
                 {
-                    id: 'plain',
-                    label: 'Plain',
-                    component: PlainDoc
+                    id: 'simple',
+                    label: 'Simple',
+                    component: SimpleDoc
                 },
                 {
                     id: 'sizes',
diff --git a/packages/primevue/src/message/Message.d.ts b/packages/primevue/src/message/Message.d.ts
index f9a741353..f401798ac 100755
--- a/packages/primevue/src/message/Message.d.ts
+++ b/packages/primevue/src/message/Message.d.ts
@@ -164,7 +164,7 @@ export interface MessageProps {
      * Specifies the input variant of the component.
      * @defaultValue outlined
      */
-    variant?: 'outlined' | 'text' | undefined;
+    variant?: 'outlined' | 'simple' | undefined;
 }
 
 /**
diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js
index 0fd52bb55..7b6916398 100644
--- a/packages/primevue/src/message/style/MessageStyle.js
+++ b/packages/primevue/src/message/style/MessageStyle.js
@@ -68,13 +68,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.info.close.button.hover.background')};
 }
 
-.p-message-info.p-message-variant-outlined {
+.p-message-info.p-message-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-info.p-message-simple {
+    color: ${dt('message.info.simple.color')};
 }
 
 .p-message-success {
@@ -93,13 +93,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.success.close.button.hover.background')};
 }
 
-.p-message-success.p-message-variant-outlined {
+.p-message-success.p-message-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-success.p-message-simple {
+    color: ${dt('message.success.simple.color')};
 }
 
 .p-message-warn {
@@ -118,13 +118,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.warn.close.button.hover.background')};
 }
 
-.p-message-warn.p-message-variant-outlined {
+.p-message-warn.p-message-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-warn.p-message-simple {
+    color: ${dt('message.warn.simple.color')};
 }
 
 .p-message-error {
@@ -143,13 +143,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.error.close.button.hover.background')};
 }
 
-.p-message-error.p-message-variant-outlined {
+.p-message-error.p-message-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-error.p-message-simple {
+    color: ${dt('message.error.simple.color')};
 }
 
 .p-message-secondary {
@@ -168,13 +168,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.secondary.close.button.hover.background')};
 }
 
-.p-message-secondary.p-message-variant-outlined {
+.p-message-secondary.p-message-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-secondary.p-message-simple {
+    color: ${dt('message.secondary.simple.color')};
 }
 
 .p-message-contrast {
@@ -193,13 +193,13 @@ const theme = ({ dt }) => `
     background: ${dt('message.contrast.close.button.hover.background')};
 }
 
-.p-message-contrast.p-message-variant-outlined {
+.p-message-contrast.p-message-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-contrast.p-message-simple {
+    color: ${dt('message.contrast.simple.color')};
 }
 
 .p-message-text {
@@ -280,19 +280,23 @@ const theme = ({ dt }) => `
     height: ${dt('message.close.icon.lg.size')};
 }
 
-.p-message-variant-outlined {
+.p-message-outlined {
     background: transparent;
     outline-width: ${dt('message.outlined.border.width')};
 }
 
-.p-message-variant-plain {
+.p-message-simple {
     background: transparent;
     outline-color: transparent;
     box-shadow: none;
 }
+    
+.p-message-simple .p-message-content {
+    padding: ${dt('message.simple.content.padding')};
+}
 
-.p-message-variant-outlined .p-message-close-button:hover,
-.p-message-variant-plain .p-message-close-button:hover {
+.p-message-outlined .p-message-close-button:hover,
+.p-message-simple .p-message-close-button:hover {
     background: transparent;
 }
 `;
@@ -301,8 +305,8 @@ const classes = {
     root: ({ props }) => [
         'p-message p-component p-message-' + props.severity,
         {
-            'p-message-variant-outlined': props.variant === 'outlined',
-            'p-message-variant-plain': props.variant === 'plain',
+            'p-message-outlined': props.variant === 'outlined',
+            'p-message-simple': props.variant === 'simple',
             '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 0426e4c6a..6ef9c120a 100644
--- a/packages/themes/src/presets/aura/message/index.js
+++ b/packages/themes/src/presets/aura/message/index.js
@@ -57,6 +57,11 @@ export default {
             borderWidth: '1px'
         }
     },
+    simple: {
+        content: {
+            padding: '0'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -75,7 +80,7 @@ export default {
                     color: '{blue.600}',
                     borderColor: '{blue.600}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.600}'
                 }
             },
@@ -95,7 +100,7 @@ export default {
                     color: '{green.600}',
                     borderColor: '{green.600}'
                 },
-                plain: {
+                simple: {
                     color: '{green.600}'
                 }
             },
@@ -115,7 +120,7 @@ export default {
                     color: '{yellow.600}',
                     borderColor: '{yellow.600}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.600}'
                 }
             },
@@ -135,7 +140,7 @@ export default {
                     color: '{red.600}',
                     borderColor: '{red.600}'
                 },
-                plain: {
+                simple: {
                     color: '{red.600}'
                 }
             },
@@ -155,7 +160,7 @@ export default {
                     color: '{surface.500}',
                     borderColor: '{surface.500}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.500}'
                 }
             },
@@ -175,7 +180,7 @@ export default {
                     color: '{surface.950}',
                     borderColor: '{surface.950}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.950}'
                 }
             }
@@ -197,7 +202,7 @@ export default {
                     color: '{blue.500}',
                     borderColor: '{blue.500}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.500}'
                 }
             },
@@ -217,7 +222,7 @@ export default {
                     color: '{green.500}',
                     borderColor: '{green.500}'
                 },
-                plain: {
+                simple: {
                     color: '{green.500}'
                 }
             },
@@ -237,7 +242,7 @@ export default {
                     color: '{yellow.500}',
                     borderColor: '{yellow.500}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.500}'
                 }
             },
@@ -257,7 +262,7 @@ export default {
                     color: '{red.500}',
                     borderColor: '{red.500}'
                 },
-                plain: {
+                simple: {
                     color: '{red.500}'
                 }
             },
@@ -277,7 +282,7 @@ export default {
                     color: '{surface.400}',
                     borderColor: '{surface.400}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.400}'
                 }
             },
@@ -297,7 +302,7 @@ export default {
                     color: '{surface.0}',
                     borderColor: '{surface.0}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.0}'
                 }
             }
diff --git a/packages/themes/src/presets/lara/message/index.js b/packages/themes/src/presets/lara/message/index.js
index 991f5c768..d87ddf34b 100644
--- a/packages/themes/src/presets/lara/message/index.js
+++ b/packages/themes/src/presets/lara/message/index.js
@@ -57,6 +57,11 @@ export default {
             borderWidth: '1px'
         }
     },
+    simple: {
+        content: {
+            padding: '0'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -75,7 +80,7 @@ export default {
                     color: '{blue.600}',
                     borderColor: '{blue.600}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.600}'
                 }
             },
@@ -95,7 +100,7 @@ export default {
                     color: '{green.600}',
                     borderColor: '{green.600}'
                 },
-                plain: {
+                simple: {
                     color: '{green.600}'
                 }
             },
@@ -115,7 +120,7 @@ export default {
                     color: '{yellow.600}',
                     borderColor: '{yellow.600}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.600}'
                 }
             },
@@ -135,7 +140,7 @@ export default {
                     color: '{red.600}',
                     borderColor: '{red.600}'
                 },
-                plain: {
+                simple: {
                     color: '{red.600}'
                 }
             },
@@ -155,7 +160,7 @@ export default {
                     color: '{surface.500}',
                     borderColor: '{surface.500}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.500}'
                 }
             },
@@ -175,7 +180,7 @@ export default {
                     color: '{surface.900}',
                     borderColor: '{surface.900}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.900}'
                 }
             }
@@ -197,7 +202,7 @@ export default {
                     color: '{blue.500}',
                     borderColor: '{blue.500}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.500}'
                 }
             },
@@ -217,7 +222,7 @@ export default {
                     color: '{green.500}',
                     borderColor: '{green.500}'
                 },
-                plain: {
+                simple: {
                     color: '{green.500}'
                 }
             },
@@ -237,7 +242,7 @@ export default {
                     color: '{yellow.500}',
                     borderColor: '{yellow.500}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.500}'
                 }
             },
@@ -257,7 +262,7 @@ export default {
                     color: '{red.500}',
                     borderColor: '{red.500}'
                 },
-                plain: {
+                simple: {
                     color: '{red.500}'
                 }
             },
@@ -277,7 +282,7 @@ export default {
                     color: '{surface.400}',
                     borderColor: '{surface.400}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.400}'
                 }
             },
@@ -297,7 +302,7 @@ export default {
                     color: '{surface.0}',
                     borderColor: '{surface.0}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.0}'
                 }
             }
diff --git a/packages/themes/src/presets/material/message/index.js b/packages/themes/src/presets/material/message/index.js
index d474e982b..55d04fbee 100644
--- a/packages/themes/src/presets/material/message/index.js
+++ b/packages/themes/src/presets/material/message/index.js
@@ -57,6 +57,11 @@ export default {
             borderWidth: '1px'
         }
     },
+    simple: {
+        content: {
+            padding: '0'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -75,7 +80,7 @@ export default {
                     color: '{blue.600}',
                     borderColor: '{blue.600}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.600}'
                 }
             },
@@ -95,7 +100,7 @@ export default {
                     color: '{green.600}',
                     borderColor: '{green.600}'
                 },
-                plain: {
+                simple: {
                     color: '{green.600}'
                 }
             },
@@ -115,7 +120,7 @@ export default {
                     color: '{yellow.900}',
                     borderColor: '{yellow.900}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.900}'
                 }
             },
@@ -135,7 +140,7 @@ export default {
                     color: '{red.600}',
                     borderColor: '{red.600}'
                 },
-                plain: {
+                simple: {
                     color: '{red.600}'
                 }
             },
@@ -155,7 +160,7 @@ export default {
                     color: '{surface.600}',
                     borderColor: '{surface.600}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.600}'
                 }
             },
@@ -175,7 +180,7 @@ export default {
                     color: '{surface.950}',
                     borderColor: '{surface.950}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.950}'
                 }
             }
@@ -197,7 +202,7 @@ export default {
                     color: '{blue.500}',
                     borderColor: '{blue.500}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.500}'
                 }
             },
@@ -217,7 +222,7 @@ export default {
                     color: '{green.500}',
                     borderColor: '{green.500}'
                 },
-                plain: {
+                simple: {
                     color: '{green.500}'
                 }
             },
@@ -237,7 +242,7 @@ export default {
                     color: '{yellow.500}',
                     borderColor: '{yellow.500}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.500}'
                 }
             },
@@ -257,7 +262,7 @@ export default {
                     color: '{red.500}',
                     borderColor: '{red.500}'
                 },
-                plain: {
+                simple: {
                     color: '{red.500}'
                 }
             },
@@ -277,7 +282,7 @@ export default {
                     color: '{surface.400}',
                     borderColor: '{surface.400}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.400}'
                 }
             },
@@ -297,7 +302,7 @@ export default {
                     color: '{surface.0}',
                     borderColor: '{surface.0}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.0}'
                 }
             }
diff --git a/packages/themes/src/presets/nora/message/index.js b/packages/themes/src/presets/nora/message/index.js
index a1d4acc5a..74322d1b4 100644
--- a/packages/themes/src/presets/nora/message/index.js
+++ b/packages/themes/src/presets/nora/message/index.js
@@ -57,6 +57,11 @@ export default {
             borderWidth: '1px'
         }
     },
+    simple: {
+        content: {
+            padding: '0'
+        }
+    },
     colorScheme: {
         light: {
             info: {
@@ -75,7 +80,7 @@ export default {
                     color: '{blue.800}',
                     borderColor: '{blue.800}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.800}'
                 }
             },
@@ -95,7 +100,7 @@ export default {
                     color: '{green.800}',
                     borderColor: '{green.800}'
                 },
-                plain: {
+                simple: {
                     color: '{green.800}'
                 }
             },
@@ -115,7 +120,7 @@ export default {
                     color: '{yellow.600}',
                     borderColor: '{yellow.600}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.600}'
                 }
             },
@@ -135,7 +140,7 @@ export default {
                     color: '{red.800}',
                     borderColor: '{red.800}'
                 },
-                plain: {
+                simple: {
                     color: '{red.800}'
                 }
             },
@@ -155,7 +160,7 @@ export default {
                     color: '{surface.600}',
                     borderColor: '{surface.600}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.600}'
                 }
             },
@@ -175,7 +180,7 @@ export default {
                     color: '{surface.900}',
                     borderColor: '{surface.900}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.900}'
                 }
             }
@@ -197,7 +202,7 @@ export default {
                     color: '{blue.200}',
                     borderColor: '{blue.200}'
                 },
-                plain: {
+                simple: {
                     color: '{blue.200}'
                 }
             },
@@ -217,7 +222,7 @@ export default {
                     color: '{green.200}',
                     borderColor: '{green.200}'
                 },
-                plain: {
+                simple: {
                     color: '{green.200}'
                 }
             },
@@ -237,7 +242,7 @@ export default {
                     color: '{yellow.200}',
                     borderColor: '{yellow.200}'
                 },
-                plain: {
+                simple: {
                     color: '{yellow.200}'
                 }
             },
@@ -257,7 +262,7 @@ export default {
                     color: '{red.200}',
                     borderColor: '{red.200}'
                 },
-                plain: {
+                simple: {
                     color: '{red.200}'
                 }
             },
@@ -277,7 +282,7 @@ export default {
                     color: '{surface.400}',
                     borderColor: '{surface.400}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.400}'
                 }
             },
@@ -297,7 +302,7 @@ export default {
                     color: '{surface.0}',
                     borderColor: '{surface.0}'
                 },
-                plain: {
+                simple: {
                     color: '{surface.0}'
                 }
             }