feat(input): adjust with new design token

src/components/dropzone/Dropzone.vue

@@ -224,7 +224,7 @@ export default defineComponent({
 
   &:disabled,
   &--disabled {
-    @apply opacity-50 pointer-events-none;
+    @apply pointer-events-none;
   }
 
   a,

src/components/form-group/FormGroup.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .form-group {
-  @apply flex flex-col;
+  @apply flex flex-col mb-4;
 
   &__label {
     @apply font-bold text-xs mb-2 relative;

src/components/form-group/index.md

@@ -1,6 +1,7 @@
 <script setup>
   import pFormGroup from './FormGroup.vue'
   import pInput from '../input/Input.vue'
+  import pCheckbox from '../checkbox/Checkbox.vue'
 </script>
 
 # Form Group
@@ -118,13 +119,22 @@ Add decription note below the form input using `description` prop.
 
 Error message from validation can be add in here using prop `error`. Note, it'll replace `description` message.
 
-<preview>
-  <p-form-group
-    label="First Name"
-    description="Lorem Ipsum dolor sitar"
-    error="Please fill this field">
-    <p-input />
-  </p-form-group>
+<preview class="flex-col space-y-4">
+  <div>
+    <p-form-group
+      label="First Name"
+      description="Lorem Ipsum dolor sitar"
+      error="Please fill this field">
+      <p-input />
+    </p-form-group>
+    <p-form-group
+      label="First Name"
+      description="Lorem Ipsum dolor sitar"
+      error="Please fill this field">
+      <p-checkbox>Female</p-checkbox>
+      <p-checkbox>Male</p-checkbox>
+    </p-form-group>
+  </div>
 </preview>
 
 ```vue

src/components/input-file/InputFile.vue

@@ -153,6 +153,14 @@ export default defineComponent({
     }
   }
 
+  &--disabled,
+  &:disabled {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply bg-muted border-muted text-muted;
+    }
+  }
+
   &:hover {
     .input-group__addon,
     .input-group .input__form {

src/components/input-group/InputGroupAddon.vue

@@ -7,7 +7,7 @@
 <style lang="postcss">
 .input-group {
   &__addon {
-    @apply flex items-center text-base rounded border border-solid border-muted outline-none bg-default;
+    @apply flex items-center text-muted rounded border border-solid border-muted outline-none bg-default;
   }
 
   &--xs > .input-group__addon {

src/components/input-range/InputRange.vue

@@ -272,7 +272,7 @@ export default defineComponent({
   @apply p-2 w-full;
 
   &__tracks {
-    @apply relative flex w-full bg-gray-15 cursor-pointer overflow-visible rounded;
+    @apply relative flex w-full bg-subtle cursor-pointer overflow-visible rounded;
   }
 
   &__track {
@@ -288,7 +288,7 @@ export default defineComponent({
   }
 
   &__thumb {
-    @apply w-4 h-4 rounded-full bg-default shadow absolute top-1/2 bottom-0 -translate-y-1/2 border border-gray-25;
+    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-gray-25;
     @apply touch-none select-none;
 
     &:hover,

src/components/input/Input.vue

@@ -110,14 +110,18 @@ export default defineComponent({
 
     &:disabled,
     &--disabled {
-      @apply opacity-50 pointer-events-none;
+      @apply bg-muted border-muted pointer-events-none text-muted;
     }
 
     &:focus {
       @apply border-subtle ring-4 ring-subtle/10 z-[1];
     }
   }
 
+  &--xs {
+    @apply text-xs px-3 py-2;
+  }
+
   &--sm {
     @apply px-3 py-2;
   }

src/components/input/index.md

@@ -11,7 +11,7 @@
 
 ### Simple Usage
 <preview>
-  <p-input v-model.number="value" placeholder="Input Here" />
+  <p-input v-model="value" placeholder="Input Here" />
 </preview>
 
 ```vue
@@ -22,7 +22,7 @@
 
 ## Sizing
 
-<preview class="flex-col space-gap-3">
+<preview class="flex-col space-y-3">
   <p-input size="xs" />
   <p-input size="sm" />
   <p-input size="md" />
@@ -40,7 +40,7 @@
 
 ## Disabled state
 
-<preview class="flex-col space-gap-3">
+<preview class="flex-col space-y-3">
   <p-input disabled />
 </preview>
 
@@ -52,7 +52,7 @@
 
 ## Readonly state
 
-<preview class="flex-col space-gap-3">
+<preview class="flex-col space-y-3">
   <p-input readonly />
 </preview>
 
@@ -64,7 +64,7 @@
 
 ## Error state
 
-<preview class="flex-col space-gap-3">
+<preview class="flex-col space-y-3">
   <p-input error />
 </preview>
 
@@ -78,7 +78,7 @@
 
 Add clear button to input with prop `clearable`.
 
-<preview class="flex-col space-gap-3">
+<preview class="flex-col space-y-3">
   <p-input clearable />
 </preview>
 

src/components/textarea/Textarea.vue

@@ -164,7 +164,7 @@ export default defineComponent({
   }
 
   &__counter {
-    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none;
+    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
   }
 }
 

src/docs/browser-support.md

@@ -96,6 +96,6 @@ _We need to keep moving forward, and savoring the journey_ 😎
     {{ item.browser }}
   </template>
   <template #cell(version)="{ item }">
-    <p-label size="sm" variant="light">{{ item.version }}</p-label>
+    <p-label size="sm">{{ item.version }}</p-label>
   </template>
 </p-table>