New tokens for Checkbox
parent
ee5843c315
commit
fc2a466b02
|
@ -36,7 +36,7 @@ const theme = ({ dt }) => `
|
|||
background: ${dt('checkbox.background')};
|
||||
width: ${dt('checkbox.width')};
|
||||
height: ${dt('checkbox.width')};
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
outline-color: transparent;
|
||||
box-shadow: ${dt('checkbox.shadow')};
|
||||
}
|
||||
|
@ -72,8 +72,14 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
border-color: ${dt('checkbox.focus.border.color')};
|
||||
box-shadow: ${dt('checkbox.focus.ring.shadow')};
|
||||
outline: ${dt('checkbox.focus.ring.width')} ${dt('checkbox.focus.ring.style')} ${dt('checkbox.focus.ring.color')};
|
||||
outline-offset: ${dt('checkbox.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
|
||||
border-color: ${dt('checkbox.checked.focus.border.color')};
|
||||
}
|
||||
|
||||
.p-checkbox.p-invalid > .p-checkbox-box {
|
||||
|
|
|
@ -36,7 +36,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-inputtext.p-variant-filled:enabled:focus {
|
||||
background-color: ${dt('inputtext.filled.focus.background')};
|
||||
background: ${dt('inputtext.filled.focus.background')};
|
||||
}
|
||||
|
||||
.p-inputtext:disabled {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
root: {
|
||||
borderRadius: '{rounded.sm}',
|
||||
borderRadius: '{border.radius.sm}',
|
||||
width: '1.25rem',
|
||||
height: '1.25rem',
|
||||
background: '{form.field.background}',
|
||||
|
@ -10,10 +10,19 @@ export default {
|
|||
filledBackground: '{form.field.filled.background}',
|
||||
borderColor: '{form.field.border.color}',
|
||||
hoverBorderColor: '{form.field.hover.border.color}',
|
||||
focusBorderColor: '{form.field.border.color}',
|
||||
checkedBorderColor: '{primary.color}',
|
||||
checkedHoverBorderColor: '{primary.hover.color}',
|
||||
checkedFocusBorderColor: '{primary.color}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}',
|
||||
shadow: '{form.field.shadow}'
|
||||
shadow: '{form.field.shadow}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
size: '0.875rem',
|
||||
|
|
|
@ -122,7 +122,8 @@ export default {
|
|||
width: '1px',
|
||||
style: 'solid',
|
||||
color: '{primary.color}',
|
||||
offset: '2px'
|
||||
offset: '2px',
|
||||
shadow: 'none'
|
||||
},
|
||||
anchorGutter: '2px',
|
||||
primary: {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
export default {
|
||||
root: {
|
||||
borderRadius: '{rounded.sm}',
|
||||
width: '1.25rem',
|
||||
height: '1.25rem',
|
||||
borderRadius: '{border.radius.sm}',
|
||||
width: '1.5rem',
|
||||
height: '1.5rem',
|
||||
background: '{form.field.background}',
|
||||
checkedBackground: '{primary.color}',
|
||||
checkedHoverBackground: '{primary.hover.color}',
|
||||
|
@ -10,13 +10,22 @@ export default {
|
|||
filledBackground: '{form.field.filled.background}',
|
||||
borderColor: '{form.field.border.color}',
|
||||
hoverBorderColor: '{form.field.hover.border.color}',
|
||||
focusBorderColor: '{form.field.focus.border.color}',
|
||||
checkedBorderColor: '{primary.color}',
|
||||
checkedHoverBorderColor: '{primary.hover.color}',
|
||||
checkedFocusBorderColor: '{primary.color}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}',
|
||||
shadow: '{form.field.shadow}'
|
||||
shadow: '{form.field.shadow}',
|
||||
focusRing: {
|
||||
width: '{form.field.focus.ring.width}',
|
||||
style: '{form.field.focus.ring.style}',
|
||||
color: '{form.field.focus.ring.color}',
|
||||
offset: '{form.field.focus.ring.offset}',
|
||||
shadow: '{form.field.focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
size: '0.875rem',
|
||||
size: '1rem',
|
||||
color: '{form.field.color}',
|
||||
checkedColor: '{primary.inverse.color}',
|
||||
checkedHoverColor: '{primary.inverse.color}',
|
||||
|
|
|
@ -209,7 +209,7 @@ export default {
|
|||
const preset = value === 'Lara' ? Lara : Aura;
|
||||
const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
|
||||
|
||||
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).update();
|
||||
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
Loading…
Reference in New Issue