Update tokens for ColorPicker
parent
3ac1d2766f
commit
af230a824a
|
@ -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 {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue