Fixed stroke step + added reset button

docs/.vitepress/theme/components/base/ColorPicker.vue

@@ -85,4 +85,8 @@ const value = computed({
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }
+
+.color-input[value="currentColor"] {
+
+}
 </style>

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -6,6 +6,7 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
 import RangeSlider from '../base/RangeSlider.vue'
 import InputField from '../base/InputField.vue'
 import ColorPicker from '../base/ColorPicker.vue'
+import IconButton from '../base/IconButton.vue'
 import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue'
 
 import { ref } from 'vue'
@@ -43,14 +44,13 @@ syncRef(color, colorCssVar)
 syncRef(strokeWidth, strokeWidthCssVar)
 syncRef(size, sizeCssVar)
 
-// TODO Add Reset button
-// const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
+const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
 
-// function resetStyle () {
-//   color.value = 'currentColor'
-//   strokeWidth.value = 2
-//   size.value = 24
-// }
+function resetStyle () {
+  color.value = 'currentColor'
+  strokeWidth.value = 2
+  size.value = 24
+}
 
 </script>
 
@@ -60,6 +60,9 @@ syncRef(size, sizeCssVar)
       <div class="card-column">
         <h2 class="title">
           Style as you please
+          <IconButton class="reset-button" @click="resetStyle">
+            <RotateIcon :size="20"/>
+          </IconButton>
         </h2>
         <p class="copy">
           Lucide has a lot of customization options to match the icons with you UI.
@@ -89,7 +92,7 @@ syncRef(size, sizeCssVar)
               v-model="strokeWidth"
               :min="1"
               :max="3"
-              :steps="0.25"
+              :step="0.25"
             />
           </InputField>
 
@@ -134,6 +137,10 @@ syncRef(size, sizeCssVar)
   line-height: 32px;
   font-size: 24px;
   font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: space-between;
 }
 
 .copy {
@@ -170,6 +177,6 @@ syncRef(size, sizeCssVar)
 }
 
 .color-picker-field:deep(.display-value) {
-  width: 130px;
+  width: 138px;
 }
 </style>