Merge branch 'master' of https://github.com/primefaces/primevue

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>
 

apps/showcase/doc/common/apidoc/index.json

@@ -76868,6 +76868,33 @@
                             "default": "",
                             "description": "Danger color of text"
                         },
+                        {
+                            "name": "contrast.hoverBackground",
+                            "token": "button.text.contrast.hover.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Contrast hover background of text"
+                        },
+                        {
+                            "name": "contrast.activeBackground",
+                            "token": "button.text.contrast.active.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Contrast active background of text"
+                        },
+                        {
+                            "name": "contrast.color",
+                            "token": "button.text.contrast.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Contrast color of text"
+                        },
                         {
                             "name": "plain.hoverBackground",
                             "token": "button.text.plain.hover.background",
@@ -98643,6 +98670,14 @@
                             "default": "",
                             "description": "Used to pass tokens of the tree section"
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the clear icon section"
+                        },
                         {
                             "name": "emptyMessage",
                             "optional": true,
@@ -98994,6 +99029,15 @@
                             "default": "",
                             "description": "Padding of tree"
                         },
+                        {
+                            "name": "clearIcon.color",
+                            "token": "treeselect.clear.icon.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color of clear icon"
+                        },
                         {
                             "name": "emptyMessage.padding",
                             "token": "treeselect.empty.message.padding",

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

packages/themes/types/button/index.d.ts

@@ -1189,6 +1189,29 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
              */
             color?: string;
         };
+        /**
+         * Contrast of text
+         */
+        contrast?: {
+            /**
+             * Contrast hover background of text
+             *
+             * @designToken button.text.contrast.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Contrast active background of text
+             *
+             * @designToken button.text.contrast.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Contrast color of text
+             *
+             * @designToken button.text.contrast.color
+             */
+            color?: string;
+        };
         /**
          * Plain of text
          */

packages/themes/types/treeselect/index.d.ts

@@ -262,6 +262,17 @@ export interface TreeSelectDesignTokens extends ColorSchemeDesignToken<TreeSelec
          */
         padding?: string;
     };
+    /**
+     * Used to pass tokens of the clear icon section
+     */
+    clearIcon?: {
+        /**
+         * Color of clear icon
+         *
+         * @designToken treeselect.clear.icon.color
+         */
+        color?: string;
+    };
     /**
      * Used to pass tokens of the empty message section
      */