Updated tokens of Knob

pull/5806/head
Cagatay Civici 2024-05-25 11:24:38 +03:00
parent 8b46ae3bd0
commit 9ce80e1a3f
4 changed files with 42 additions and 10 deletions

View File

@ -18,13 +18,15 @@ const theme = ({ dt }) => `
}
.p-knob svg {
border-radius: ${dt('border.radius.md')};
border-radius: 50%;
outline-color: transparent;
transition: outline-color ${dt('knob.transition.duration')};
transition: background ${dt('knob.transition.duration')}, color ${dt('knob.transition.duration')}, outline-color ${dt('knob.transition.duration')}, box-shadow ${dt('knob.transition.duration')};
}
.p-knob svg:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
box-shadow: ${dt('knob.focus.ring.shadow')};
outline: ${dt('knob.focus.ring.width')} ${dt('knob.focus.ring.style')} ${dt('knob.focus.ring.color')};
outline-offset: ${dt('knob.focus.ring.offset')};
}
@keyframes p-knob-dash-frame {

View File

@ -1,6 +1,13 @@
export default {
root: {
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
value: {
background: '{primary.color}'

View File

@ -1,6 +1,13 @@
export default {
root: {
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
value: {
background: '{primary.color}'

View File

@ -1,14 +1,30 @@
export default {
root: {
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
value: {
background: '{primary.color}'
},
range: {
background: '{content.border.color}'
},
text: {
color: '{text.muted.color}'
},
colorScheme: {
light: {
range: {
background: '{surface.300}'
}
},
dark: {
range: {
background: '{surface.600}'
}
}
}
};