Fixed #6657 - Deprecate plain button in favor of Contrast

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>
 

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>
 

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;

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}',

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}',

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}',

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}',