Updated tokens of Knob

components/lib/knob/style/KnobStyle.js

@@ -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')};
+    box-shadow: ${dt('knob.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    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 {

components/lib/themes/aura/knob/index.js

@@ -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}'

components/lib/themes/lara/knob/index.js

@@ -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}'

components/lib/themes/nora/knob/index.js

@@ -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}'
+            }
+        }
     }
 };