New tokens for Slider

components/lib/slider/style/SliderStyle.js

@@ -4,7 +4,7 @@ const theme = ({ dt }) => `
 .p-slider {
     position: relative;
     background: ${dt('slider.track.background')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('slider.border.radius')};
 }
 
 .p-slider-handle {
@@ -13,43 +13,48 @@ const theme = ({ dt }) => `
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 20px;
+    height: ${dt('slider.handle.height')};
-    width: 20px;
+    width: ${dt('slider.handle.width')};
     background: ${dt('slider.handle.background')};
-    border: 0 none;
+    border-radius: ${dt('slider.handle.border.radius')};
-    border-radius: 50%;
     transition: background ${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;
 }
 
 .p-slider-handle::before {
     content: "";
-    width: 16px;
+    width: ${dt('slider.handle.content.width')};
-    height: 16px;
+    height: ${dt('slider.handle.content.height')};
     display: block;
-    background-color: ${dt('slider.handle.content.background')};
+    background: ${dt('slider.handle.content.background')};
-    border-radius: 50%;
+    border-radius: ${dt('slider.handle.content.border.radius')};
-    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
+    box-shadow: ${dt('slider.handle.content.shadow')};
+    transition: background ${dt('transition.duration')};
 }
 
 .p-slider:not(.p-disabled) .p-slider-handle:hover {
     background: ${dt('slider.handle.hover.background')};
-    border-color: transparent;
+}
+
+.p-slider:not(.p-disabled) .p-slider-handle:hover::before {
+    background: ${dt('slider.handle.content.hover.background')};
 }
 
 .p-slider-handle:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    border-color: ${dt('slider.handle.focus.border.color')};
-    outline-offset: 0;
+    box-shadow: ${dt('slider.handle.focus.ring.shadow')};
+    outline: ${dt('slider.handle.focus.ring.width')} ${dt('slider.handle.focus.ring.style')} ${dt('slider.handle.focus.ring.color')};
+    outline-offset: ${dt('slider.handle.focus.ring.offset')};
 }
 
 .p-slider-range {
     display: block;
     background: ${dt('slider.range.background')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('slider.border.radius')};
 }
 
 .p-slider.p-slider-horizontal {
-    height: 3px;
+    height: ${dt('slider.track.size')};
 }
 
 .p-slider-horizontal .p-slider-range {
@@ -60,19 +65,19 @@ const theme = ({ dt }) => `
 
 .p-slider-horizontal .p-slider-handle {
     top: 50%;
-    margin-top: -10px;
+    margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
-    margin-left: -10px;
+    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
 }
 
 .p-slider-vertical {
-    height: 100px;
+    min-height: 100px;
-    width: 3px;
+    height: ${dt('slider.track.size')};
 }
 
 .p-slider-vertical .p-slider-handle {
     left: 50%;
-    margin-left: -10px;
+    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
-    margin-bottom: -10px;
+    margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2));
 }
 
 .p-slider-vertical .p-slider-range {

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

@@ -1,13 +1,33 @@
 export default {
     track: {
-        background: '{content.border.color}'
+        background: '{content.border.color}',
+        borderRadius: '{border.radius.md}',
+        size: '3px'
     },
     range: {
         background: '{primary.color}'
     },
     handle: {
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
         background: '{content.border.color}',
-        hoverBackground: '{content.border.color}'
+        hoverBackground: '{content.border.color}',
+        content: {
+            borderRadius: '50%',
+            background: '{content.background}',
+            hoverBackground: '{content.background}',
+            width: '16px',
+            height: '16px',
+            shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
+        },
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     colorScheme: {
         light: {

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

@@ -1,13 +1,33 @@
 export default {
     track: {
-        background: '{content.border.color}'
+        background: '{content.border.color}',
+        borderRadius: '{border.radius.sm}',
+        size: '3px'
     },
     range: {
         background: '{primary.color}'
     },
     handle: {
-        background: '{content.border.color}',
+        width: '16px',
-        hoverBackground: '{content.border.color}'
+        height: '16px',
+        borderRadius: '50%',
+        background: '{primary.color}',
+        hoverBackground: '{primary.color}',
+        content: {
+            background: '{content.background}',
+            hoverBackground: '{primary.color}',
+            borderRadius: '50%',
+            width: '12px',
+            height: '12px',
+            shadow: 'none'
+        },
+        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: {