From 09e1273571dc2ac0eeb3bbe80dc3e2e59515d1c8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Jul 2024 16:32:14 +0300
Subject: [PATCH] Visual cosmetics

---
 apps/showcase/doc/dataview/BasicDoc.vue       | 16 +++++++++---
 apps/showcase/doc/dialog/HeadlessDoc.vue      | 16 ++++++------
 .../doc/tailwind/samples/HeadlessDoc.vue      |  8 +++---
 packages/themes/src/presets/aura/index.js     |  2 +-
 .../themes/src/presets/lara/message/index.js  | 26 +++++++++----------
 5 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/showcase/doc/dataview/BasicDoc.vue b/apps/showcase/doc/dataview/BasicDoc.vue
index 9a63c558d..607c84386 100644
--- a/apps/showcase/doc/dataview/BasicDoc.vue
+++ b/apps/showcase/doc/dataview/BasicDoc.vue
@@ -10,7 +10,9 @@
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -58,7 +60,9 @@ export default {
                 <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -97,7 +101,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -170,7 +176,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
diff --git a/apps/showcase/doc/dialog/HeadlessDoc.vue b/apps/showcase/doc/dialog/HeadlessDoc.vue
index fba7a3ef9..ca04bca67 100644
--- a/apps/showcase/doc/dialog/HeadlessDoc.vue
+++ b/apps/showcase/doc/dialog/HeadlessDoc.vue
@@ -5,9 +5,9 @@
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -46,9 +46,9 @@ export default {
                 basic: `
 <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
     <template #container="{ closeCallback }">
-        <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+        <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -80,9 +80,9 @@ export default {
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -126,9 +126,9 @@ export default {
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
diff --git a/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue b/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
index 1b3a4f3ef..b3a247bbe 100644
--- a/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
+++ b/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
@@ -5,9 +5,9 @@
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -46,9 +46,9 @@ export default {
                 basic: `
 <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
+<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
     <template #container="{ closeCallback }">
-        <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+        <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
diff --git a/packages/themes/src/presets/aura/index.js b/packages/themes/src/presets/aura/index.js
index cfbfb720b..1b62de27f 100644
--- a/packages/themes/src/presets/aura/index.js
+++ b/packages/themes/src/presets/aura/index.js
@@ -159,7 +159,7 @@ export default {
             padding: '0.25rem 0.25rem',
             gap: '2px',
             header: {
-                padding: '0.5rem 0.75rem 0.25rem 0.75rem'
+                padding: '0.5rem 1rem 0.25rem 1rem'
             },
             option: {
                 padding: '0.5rem 0.75rem',
diff --git a/packages/themes/src/presets/lara/message/index.js b/packages/themes/src/presets/lara/message/index.js
index 2ba7a2c6d..7498cc51b 100644
--- a/packages/themes/src/presets/lara/message/index.js
+++ b/packages/themes/src/presets/lara/message/index.js
@@ -1,7 +1,7 @@
 export default {
     root: {
         borderRadius: '{content.border.radius}',
-        borderWidth: '0 0 0 6px',
+        borderWidth: '1px',
         transitionDuration: '{transition.duration}'
     },
     content: {
@@ -32,7 +32,7 @@ export default {
         light: {
             info: {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
-                borderColor: '{blue.500}',
+                borderColor: 'transparent',
                 color: '{blue.600}',
                 shadow: 'none',
                 closeButton: {
@@ -45,7 +45,7 @@ export default {
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
-                borderColor: '{green.500}',
+                borderColor: 'transparent',
                 color: '{green.600}',
                 shadow: 'none',
                 closeButton: {
@@ -58,7 +58,7 @@ export default {
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
-                borderColor: '{yellow.500}',
+                borderColor: 'transparent',
                 color: '{yellow.600}',
                 shadow: 'none',
                 closeButton: {
@@ -71,7 +71,7 @@ export default {
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
-                borderColor: '{red.500}',
+                borderColor: 'transparent',
                 color: '{red.600}',
                 shadow: 'none',
                 closeButton: {
@@ -84,7 +84,7 @@ export default {
             },
             secondary: {
                 background: '{surface.100}',
-                borderColor: '{surface.500}',
+                borderColor: 'transparent',
                 color: '{surface.600}',
                 shadow: 'none',
                 closeButton: {
@@ -97,7 +97,7 @@ export default {
             },
             contrast: {
                 background: '{surface.900}',
-                borderColor: '{primary.color}',
+                borderColor: 'transparent',
                 color: '{surface.50}',
                 shadow: 'none',
                 closeButton: {
@@ -112,7 +112,7 @@ export default {
         dark: {
             info: {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
-                borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
+                borderColor: 'transparent',
                 color: '{blue.500}',
                 shadow: 'none',
                 closeButton: {
@@ -125,7 +125,7 @@ export default {
             },
             success: {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
-                borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
+                borderColor: 'transparent',
                 color: '{green.500}',
                 shadow: 'none',
                 closeButton: {
@@ -138,7 +138,7 @@ export default {
             },
             warn: {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
-                borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
+                borderColor: 'transparent',
                 color: '{yellow.500}',
                 shadow: 'none',
                 closeButton: {
@@ -151,7 +151,7 @@ export default {
             },
             error: {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
-                borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
+                borderColor: 'transparent',
                 color: '{red.500}',
                 shadow: 'none',
                 closeButton: {
@@ -164,7 +164,7 @@ export default {
             },
             secondary: {
                 background: '{surface.800}',
-                borderColor: '{surface.700}',
+                borderColor: 'transparent',
                 color: '{surface.300}',
                 shadow: 'none',
                 closeButton: {
@@ -177,7 +177,7 @@ export default {
             },
             contrast: {
                 background: '{surface.0}',
-                borderColor: '{primary.color}',
+                borderColor: 'transparent',
                 color: '{surface.950}',
                 shadow: 'none',
                 closeButton: {