Tokens for inplace

pull/5756/head
Cagatay Civici 2024-05-09 22:00:50 +03:00
parent 4654a8d0af
commit c86c01e20c
3 changed files with 27 additions and 17 deletions

View File

@ -4,9 +4,9 @@ const theme = ({ dt }) => `
.p-inplace-display { .p-inplace-display {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
padding: 0.5rem 0.75rem; padding: ${dt('inplace.padding')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('inplace.border.radius')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
} }
@ -16,8 +16,9 @@ const theme = ({ dt }) => `
} }
.p-inplace-display:focus-visible { .p-inplace-display:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; box-shadow: ${dt('inplace.focus.ring.shadow')};
outline-offset: ${dt('focus.ring.offset')}; outline: ${dt('inplace.focus.ring.width')} ${dt('inplace.focus.ring.style')} ${dt('inplace.focus.ring.color')};
outline-offset: ${dt('inplace.focus.ring.offset')};
} }
.p-inplace-content { .p-inplace-content {

View File

@ -1,4 +1,12 @@
export default { export default {
padding: '{form.field.padding.y} {form.field.padding.x}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
},
colorScheme: { colorScheme: {
light: { light: {
display: { display: {

View File

@ -1,16 +1,17 @@
export default { export default {
colorScheme: { root: {
light: { padding: '{form.field.padding.y} {form.field.padding.x}',
display: { borderRadius: '{content.border.radius}',
hoverBackground: '{surface.100}', focusRing: {
hoverColor: '{surface.800}' 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}'
} }
}, },
dark: {
display: { display: {
hoverBackground: '{surface.800}', hoverBackground: '{content.hover.background}',
hoverColor: '{surface.0}' hoverColor: '{content.hover.color}'
}
}
} }
}; };