feat: add color classes for textarea

saadeghi · May 30, 2021 · 84925d0 · 84925d0
1 parent 3b3eac7
commit 84925d0
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 1 deletion.
diff --git a/src/components/styled/textarea.css b/src/components/styled/textarea.css
@@ -5,12 +5,54 @@
   }
   &:focus {
     box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2);
-
   }
   &-ghost {
     @apply bg-opacity-5;
     &:focus {
       @apply bg-opacity-100 text-base-content;
+      box-shadow: none;
+    }
+  }
+  &-primary {
+    @apply border-primary;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
+    }
+  }
+  &-secondary {
+    @apply border-secondary;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
+    }
+  }
+  &-accent {
+    @apply border-accent;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
+    }
+  }
+  &-info {
+    @apply border-info;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
+    }
+  }
+  &-success {
+    @apply border-success;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
+    }
+  }
+  &-warning {
+    @apply border-warning;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
+    }
+  }
+  &-error {
+    @apply border-error;
+    &:focus {
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
   &-disabled,

diff --git a/src/docs/pages/components/form/textarea.vue b/src/docs/pages/components/form/textarea.vue
@@ -57,5 +57,85 @@
         </Textarea>
       </FormControl>
     </Wrapper>
+    <Wrapper
+      title="Textarea with brand colors"
+      classes="flex flex-col space-y-2 max-w-xs"
+    >
+      <FormControl>
+        <label class="label">
+          <span class="label-text">primary</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-primary"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+      <FormControl>
+        <label class="label">
+          <span class="label-text">secondary</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-secondary"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+      <FormControl>
+        <label class="label">
+          <span class="label-text">accent</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-accent"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+    </Wrapper>
+    <Wrapper
+      title="Textarea with state colors"
+      classes="flex flex-col space-y-2 max-w-xs"
+    >
+      <FormControl>
+        <label class="label">
+          <span class="label-text">info</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-info"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+      <FormControl>
+        <label class="label">
+          <span class="label-text">success</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-success"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+      <FormControl>
+        <label class="label">
+          <span class="label-text">warning</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-warning"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+      <FormControl>
+        <label class="label">
+          <span class="label-text">error</span>
+        </label>
+        <Textarea
+          class="h-24 textarea textarea-bordered textarea-error"
+          placeholder="Bio"
+        >
+        </Textarea>
+      </FormControl>
+    </Wrapper>
   </div>
 </template>