From 1a2f6cceb12df452a93b29479b759f218bfad31a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2024 14:36:27 +0300
Subject: [PATCH] Fixed #6657 - Deprecate plain button in favor of Contrast

---
 apps/showcase/doc/button/RaisedTextDoc.vue     |  8 ++++----
 apps/showcase/doc/button/TextDoc.vue           |  8 ++++----
 .../primevue/src/button/style/ButtonStyle.js   | 18 ++++++++++++++++++
 .../themes/src/presets/aura/button/index.js    | 10 ++++++++++
 .../themes/src/presets/lara/button/index.js    | 10 ++++++++++
 .../src/presets/material/button/index.js       | 10 ++++++++++
 .../themes/src/presets/nora/button/index.js    | 10 ++++++++++
 7 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/apps/showcase/doc/button/RaisedTextDoc.vue b/apps/showcase/doc/button/RaisedTextDoc.vue
index 7967cb05c..0b21edfea 100644
--- a/apps/showcase/doc/button/RaisedTextDoc.vue
+++ b/apps/showcase/doc/button/RaisedTextDoc.vue
@@ -10,7 +10,7 @@
         <Button label="Warn" severity="warn" text raised />
         <Button label="Help" severity="help" text raised />
         <Button label="Danger" severity="danger" text raised />
-        <Button label="Plain" plain text raised />
+        <Button label="Contrast" severity="contrast" text raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -28,7 +28,7 @@ export default {
 <Button label="Warn" severity="warn" text raised />
 <Button label="Help" severity="help" text raised />
 <Button label="Danger" severity="danger" text raised />
-<Button label="Plain" plain text raised />
+<Button label="Contrast" severity="contrast" text raised />
 `,
                 options: `
 <template>
@@ -40,7 +40,7 @@ export default {
         <Button label="Warn" severity="warn" text raised />
         <Button label="Help" severity="help" text raised />
         <Button label="Danger" severity="danger" text raised />
-        <Button label="Plain" plain text raised />
+        <Button label="Contrast" severity="contrast" text raised />
     </div>
 </template>
 
@@ -57,7 +57,7 @@ export default {
         <Button label="Warn" severity="warn" text raised />
         <Button label="Help" severity="help" text raised />
         <Button label="Danger" severity="danger" text raised />
-        <Button label="Plain" plain text raised />
+        <Button label="Contrast" severity="contrast" text raised />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/button/TextDoc.vue b/apps/showcase/doc/button/TextDoc.vue
index f4324300d..3d352b8cd 100644
--- a/apps/showcase/doc/button/TextDoc.vue
+++ b/apps/showcase/doc/button/TextDoc.vue
@@ -10,7 +10,7 @@
         <Button label="Warn" severity="warn" text />
         <Button label="Help" severity="help" text />
         <Button label="Danger" severity="danger" text />
-        <Button label="Plain" plain text />
+        <Button label="Contrast" severity="contrast" text />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -28,7 +28,7 @@ export default {
 <Button label="Warn" severity="warn" text />
 <Button label="Help" severity="help" text />
 <Button label="Danger" severity="danger" text />
-<Button label="Plain" plain text />
+<Button label="Contrast" severity="contrast" text />
 `,
                 options: `
 <template>
@@ -40,7 +40,7 @@ export default {
         <Button label="Warn" severity="warn" text />
         <Button label="Help" severity="help" text />
         <Button label="Danger" severity="danger" text />
-        <Button label="Plain" plain text />
+        <Button label="Contrast" severity="contrast" text />
     </div>
 </template>
 
@@ -57,7 +57,7 @@ export default {
         <Button label="Warn" severity="warn" text />
         <Button label="Help" severity="help" text />
         <Button label="Danger" severity="danger" text />
-        <Button label="Plain" plain text />
+        <Button label="Contrast" severity="contrast" text />
     </div>
 </template>
 
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index d0fa7bffd..63fa8bb34 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -559,6 +559,24 @@ const theme = ({ dt }) => `
     color: ${dt('button.text.danger.color')};
 }
 
+.p-button-text.p-button-contrast {
+    background: transparent;
+    border-color: transparent;
+    color: ${dt('button.text.contrast.color')};
+}
+
+.p-button-text.p-button-contrast:not(:disabled):hover {
+    background: ${dt('button.text.contrast.hover.background')};
+    border-color: transparent;
+    color: ${dt('button.text.contrast.color')};
+}
+
+.p-button-text.p-button-contrast:not(:disabled):active {
+    background: ${dt('button.text.contrast.active.background')};
+    border-color: transparent;
+    color: ${dt('button.text.contrast.color')};
+}
+
 .p-button-text.p-button-plain {
     background: transparent;
     border-color: transparent;
diff --git a/packages/themes/src/presets/aura/button/index.js b/packages/themes/src/presets/aura/button/index.js
index ba501593d..dc7a9abed 100644
--- a/packages/themes/src/presets/aura/button/index.js
+++ b/packages/themes/src/presets/aura/button/index.js
@@ -244,6 +244,11 @@ export default {
                     activeBackground: '{red.100}',
                     color: '{red.500}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.950}'
+                },
                 plain: {
                     hoverBackground: '{surface.50}',
                     activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
                     activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
                     color: '{red.400}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.0}'
+                },
                 plain: {
                     hoverBackground: '{surface.800}',
                     activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/lara/button/index.js b/packages/themes/src/presets/lara/button/index.js
index 294a33ec8..4198b3dd2 100644
--- a/packages/themes/src/presets/lara/button/index.js
+++ b/packages/themes/src/presets/lara/button/index.js
@@ -244,6 +244,11 @@ export default {
                     activeBackground: '{red.100}',
                     color: '{red.500}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.950}'
+                },
                 plain: {
                     hoverBackground: '{surface.50}',
                     activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
                     activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
                     color: '{red.400}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.0}'
+                },
                 plain: {
                     hoverBackground: '{surface.800}',
                     activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js
index 448cba3a5..1c1c100a7 100644
--- a/packages/themes/src/presets/material/button/index.js
+++ b/packages/themes/src/presets/material/button/index.js
@@ -244,6 +244,11 @@ export default {
                     activeBackground: '{red.100}',
                     color: '{red.500}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.950}'
+                },
                 plain: {
                     hoverBackground: '{surface.50}',
                     activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
                     activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
                     color: '{red.400}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.0}'
+                },
                 plain: {
                     hoverBackground: '{surface.800}',
                     activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/nora/button/index.js b/packages/themes/src/presets/nora/button/index.js
index 5af916271..6f22942f0 100644
--- a/packages/themes/src/presets/nora/button/index.js
+++ b/packages/themes/src/presets/nora/button/index.js
@@ -244,6 +244,11 @@ export default {
                     activeBackground: '{red.100}',
                     color: '{red.600}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.50}',
+                    activeBackground: '{surface.100}',
+                    color: '{surface.950}'
+                },
                 plain: {
                     hoverBackground: '{surface.50}',
                     activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
                     activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
                     color: '{red.500}'
                 },
+                contrast: {
+                    hoverBackground: '{surface.800}',
+                    activeBackground: '{surface.700}',
+                    color: '{surface.0}'
+                },
                 plain: {
                     hoverBackground: '{surface.800}',
                     activeBackground: '{surface.700}',