Update tokens for ColorPicker

pull/5756/head
Cagatay Civici 2024-05-08 18:45:23 +03:00
parent 3ac1d2766f
commit af230a824a
3 changed files with 32 additions and 6 deletions

View File

@ -11,19 +11,21 @@ const theme = ({ dt }) => `
}
.p-colorpicker-preview {
width: 1.5rem;
height: 1.5rem;
width: ${dt('colorpicker.preview.width')};
height: ${dt('colorpicker.preview.height')};
padding: 0;
border: 0 none;
border-radius: ${dt('border.radius.md')};
transition: outline-color ${dt('transition.duration')};
border-radius: ${dt('colorpicker.preview.border.radius')};
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')};
outline-color: transparent;
cursor: pointer;
}
.p-colorpicker-preview:enabled:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
border-color: ${dt('colorpicker.preview.focus.border.color')};
box-shadow: ${dt('colorpicker.preview.focus.ring.shadow')};
outline: ${dt('colorpicker.preview.focus.ring.width')} ${dt('colorpicker.preview.focus.ring.style')} ${dt('colorpicker.preview.focus.ring.color')};
outline-offset: ${dt('colorpicker.preview.focus.ring.offset')};
}
.p-colorpicker-panel {

View File

@ -1,4 +1,16 @@
export default {
preview: {
width: '1.5rem',
height: '1.5rem',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
colorScheme: {
light: {
panel: {

View File

@ -1,4 +1,16 @@
export default {
preview: {
width: '1.75rem',
height: '1.75rem',
borderRadius: '{form.field.border.radius}',
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}'
}
},
colorScheme: {
light: {
panel: {