vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #7086 - Refactor ToggleButton Implementation and Design Tokens

pull/6454/merge
Cagatay Civici 2025-01-14 14:59:22 +03:00
parent a14c535eb2
commit e427f85a6b
6 changed files with 89 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
View File

@ -5,8 +5,6 @@ const theme = ({ dt }) => `
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
color: ${dt('togglebutton.color')};
@ -24,35 +22,16 @@ const theme = ({ dt }) => `
}
.p-togglebutton-content {
position: relative;
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: ${dt('togglebutton.gap')};
}
.p-togglebutton-label,
.p-togglebutton-icon {
position: relative;
transition: none;
}
.p-togglebutton::before {
content: "";
padding: ${dt('togglebutton.content.padding')};
background: transparent;
border-radius: ${dt('togglebutton.content.border.radius')};
transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
position: absolute;
inset-inline-start: ${dt('togglebutton.content.left')};
inset-block-start: ${dt('togglebutton.content.top')};
width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
border-radius: ${dt('togglebutton.border.radius')};
}
.p-togglebutton.p-togglebutton-checked::before {
background: ${dt('togglebutton.content.checked.background')};
box-shadow: ${dt('togglebutton.content.checked.shadow')};
}
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
@ -66,6 +45,11 @@ const theme = ({ dt }) => `
color: ${dt('togglebutton.checked.color')};
}
.p-togglebutton-checked .p-togglebutton-content {
background: ${dt('togglebutton.content.checked.background')};
box-shadow: ${dt('togglebutton.content.checked.shadow')};
}
.p-togglebutton:focus-visible {
box-shadow: ${dt('togglebutton.focus.ring.shadow')};
outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
@ -84,6 +68,12 @@ const theme = ({ dt }) => `
color: ${dt('togglebutton.disabled.color')};
}
.p-togglebutton-label,
.p-togglebutton-icon {
position: relative;
transition: none;
}
.p-togglebutton-icon {
color: ${dt('togglebutton.icon.color')};
}
@ -105,10 +95,18 @@ const theme = ({ dt }) => `
font-size: ${dt('togglebutton.sm.font.size')};
}
.p-togglebutton-sm .p-togglebutton-content {
padding: ${dt('togglebutton.content.sm.padding')};
}
.p-togglebutton-lg {
padding: ${dt('togglebutton.lg.padding')};
font-size: ${dt('togglebutton.lg.font.size')};
}
.p-togglebutton-lg .p-togglebutton-content {
padding: ${dt('togglebutton.content.lg.padding')};
}
`;
const classes = {

18
packages/themes/src/presets/aura/togglebutton/index.js
View File

@ -1,6 +1,6 @@
export default {
root: {
padding: '0.5rem 1rem',
padding: '0.25rem',
borderRadius: '{content.border.radius}',
gap: '0.5rem',
fontWeight: '500',
@ -18,20 +18,26 @@ export default {
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
padding: '0.375rem 0.75rem'
padding: '0.25rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
padding: '0.625rem 1.25rem'
padding: '0.25rem'
}
},
icon: {
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
padding: '0.25rem 0.75rem',
borderRadius: '{content.border.radius}',
checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
sm: {
padding: '0.25rem 0.75rem'
},
lg: {
padding: '0.25rem 0.75rem'
}
},
colorScheme: {
light: {

12
packages/themes/src/presets/lara/togglebutton/index.js
View File

@ -39,10 +39,16 @@ export default {
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedBackground: 'transparent',
checkedShadow: 'none'
checkedShadow: 'none',
padding: '0',
borderRadius: '0',
sm: {
padding: '0'
},
lg: {
padding: '0'
}
},
colorScheme: {
light: {

12
packages/themes/src/presets/material/togglebutton/index.js
View File

@ -38,10 +38,16 @@ export default {
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedBackground: 'transparent',
checkedShadow: 'none'
checkedShadow: 'none',
padding: '0',
borderRadius: '0',
sm: {
padding: '0'
},
lg: {
padding: '0'
}
},
colorScheme: {
light: {

12
packages/themes/src/presets/nora/togglebutton/index.js
View File

@ -39,10 +39,16 @@ export default {
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedBackground: 'transparent',
checkedShadow: 'none'
checkedShadow: 'none',
padding: '0',
borderRadius: '0',
sm: {
padding: '0'
},
lg: {
padding: '0'
}
},
colorScheme: {
light: {

34
packages/themes/types/togglebutton/index.d.ts vendored
View File

@ -221,17 +221,17 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
*/
content?: {
/**
* Left of content
* Padding of the content
*
* @designToken togglebutton.content.left
* @designToken togglebutton.content.padding
*/
left?: string;
padding?: string;
/**
* Top of content
* Border radius of the content
*
* @designToken togglebutton.content.top
* @designToken togglebutton.border.radius
*/
top?: string;
borderRadius?: string;
/**
* Checked shadow of content
*
@ -244,5 +244,27 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
* @designToken togglebutton.content.checked.background
*/
checkedBackground?: string;
/**
* Sm of content
*/
sm?: {
/**
* Sm padding of content
*
* @designToken togglebutton.content.sm.padding
*/
padding?: string;
};
/**
* Lg of root
*/
lg?: {
/**
* Lg padding of content
*
* @designToken togglebutton.content.lg.padding
*/
padding?: string;
};
};
}