pull/6674/head
tugcekucukoglu 2024-10-28 14:48:03 +03:00
commit 811a792341
10 changed files with 144 additions and 8 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

@ -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
*/

View File

@ -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
*/