lowercase pasted color (#594)

* lowercase pasted color

* remove unused class & don't lowercase input

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/ColorPicker.css

@@ -99,7 +99,6 @@
   border-radius: 0px 4px 4px 0px;
   float: left;
   padding-left: 0.5em;
-  text-transform: lowercase;
 }
 
 .color-picker-label-swatch {
@@ -108,13 +107,3 @@
   margin-right: 0.25rem;
   border: 1px solid #dee2e6;
 }
-
-.color-picker-swatch-input {
-  font-size: 1rem;
-  display: inline-block;
-  width: 6.25rem;
-  border-radius: 2px;
-  padding: 0.125em 0.25em;
-  border: 1px solid #dee2e6;
-  text-transform: lowercase;
-}

src/components/ColorPicker.tsx

@@ -131,7 +131,7 @@ const ColorInput = React.forwardRef(
           className="color-picker-input"
           aria-label={label}
           onChange={e => {
-            const value = e.target.value;
+            const value = e.target.value.toLowerCase();
             if (value.match(colorRegex)) {
               onChange(value === "transparent" ? "transparent" : "#" + value);
             }