@harjs/react-ui 1.1.5 → 1.1.7

package/dist/assets/css/components/form/input/color.css

@@ -0,0 +1,1131 @@
+.har-input-wrapper {
+  &.blue {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--blue-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--blue-100);
+            border: var(--stroke-1) solid var(--blue-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--blue-500);
+            }
+
+            &::placeholder {
+              color: var(--blue-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--blue-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--blue-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--blue-200);
+            }
+
+            &::placeholder {
+              color: var(--blue-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--blue-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--blue-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--blue-200);
+            }
+
+            &::placeholder {
+              color: var(--blue-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--blue-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--blue-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--blue-200);
+            }
+
+            &::placeholder {
+              color: var(--blue-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--blue-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--blue-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.purple {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--purple-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--purple-100);
+            border: var(--stroke-1) solid var(--purple-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--purple-500);
+            }
+
+            &::placeholder {
+              color: var(--purple-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--purple-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--purple-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--purple-200);
+            }
+
+            &::placeholder {
+              color: var(--purple-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--purple-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--purple-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--purple-200);
+            }
+
+            &::placeholder {
+              color: var(--purple-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--purple-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--purple-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--purple-200);
+            }
+
+            &::placeholder {
+              color: var(--purple-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--purple-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--purple-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.pink {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--pink-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--pink-100);
+            border: var(--stroke-1) solid var(--pink-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--pink-500);
+            }
+
+            &::placeholder {
+              color: var(--pink-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--pink-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--pink-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--pink-200);
+            }
+
+            &::placeholder {
+              color: var(--pink-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--pink-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--pink-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--pink-200);
+            }
+
+            &::placeholder {
+              color: var(--pink-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--pink-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--pink-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--pink-200);
+            }
+
+            &::placeholder {
+              color: var(--pink-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--pink-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--pink-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.red {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--red-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--red-100);
+            border: var(--stroke-1) solid var(--red-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--red-500);
+            }
+
+            &::placeholder {
+              color: var(--red-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--red-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--red-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--red-200);
+            }
+
+            &::placeholder {
+              color: var(--red-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--red-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--red-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--red-200);
+            }
+
+            &::placeholder {
+              color: var(--red-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--red-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--red-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--red-200);
+            }
+
+            &::placeholder {
+              color: var(--red-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--red-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--red-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.orange {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--orange-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--orange-100);
+            border: var(--stroke-1) solid var(--orange-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--orange-500);
+            }
+
+            &::placeholder {
+              color: var(--orange-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--orange-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--orange-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--orange-200);
+            }
+
+            &::placeholder {
+              color: var(--orange-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--orange-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--orange-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--orange-200);
+            }
+
+            &::placeholder {
+              color: var(--orange-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--orange-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--orange-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--orange-200);
+            }
+
+            &::placeholder {
+              color: var(--orange-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--orange-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--orange-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.yellow {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--yellow-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--yellow-100);
+            border: var(--stroke-1) solid var(--yellow-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--yellow-500);
+            }
+
+            &::placeholder {
+              color: var(--yellow-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--yellow-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--yellow-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--yellow-200);
+            }
+
+            &::placeholder {
+              color: var(--yellow-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--yellow-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--yellow-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--yellow-200);
+            }
+
+            &::placeholder {
+              color: var(--yellow-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--yellow-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--yellow-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--yellow-200);
+            }
+
+            &::placeholder {
+              color: var(--yellow-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--yellow-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--yellow-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.green {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--green-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--green-100);
+            border: var(--stroke-1) solid var(--green-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--green-500);
+            }
+
+            &::placeholder {
+              color: var(--green-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--green-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--green-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--green-200);
+            }
+
+            &::placeholder {
+              color: var(--green-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--green-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--green-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--green-200);
+            }
+
+            &::placeholder {
+              color: var(--green-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--green-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--green-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--green-200);
+            }
+
+            &::placeholder {
+              color: var(--green-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--green-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--green-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.teal {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--teal-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--teal-100);
+            border: var(--stroke-1) solid var(--teal-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--teal-500);
+            }
+
+            &::placeholder {
+              color: var(--teal-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--teal-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--teal-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--teal-200);
+            }
+
+            &::placeholder {
+              color: var(--teal-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--teal-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--teal-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--teal-200);
+            }
+
+            &::placeholder {
+              color: var(--teal-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--teal-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--teal-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--teal-200);
+            }
+
+            &::placeholder {
+              color: var(--teal-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--teal-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--teal-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.cyan {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--cyan-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--cyan-100);
+            border: var(--stroke-1) solid var(--cyan-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--cyan-500);
+            }
+
+            &::placeholder {
+              color: var(--cyan-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--cyan-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--cyan-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--cyan-200);
+            }
+
+            &::placeholder {
+              color: var(--cyan-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--cyan-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--cyan-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--cyan-200);
+            }
+
+            &::placeholder {
+              color: var(--cyan-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--cyan-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--cyan-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--cyan-200);
+            }
+
+            &::placeholder {
+              color: var(--cyan-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--cyan-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--cyan-400);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.gray {
+    &.filled {
+      > .har-input {
+        > label {
+          color: var(--gray-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--gray-100);
+            border: var(--stroke-1) solid var(--gray-300);
+
+            &:focus {
+              border: var(--stroke-1) solid var(--gray-500);
+            }
+
+            &::placeholder {
+              color: var(--gray-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .har-input {
+        > label {
+          color: var(--gray-500);
+        }
+
+        > .input {
+          > input {
+            background-color: var(--gray-100);
+
+            &:focus {
+              background-color: transparent;
+              box-shadow: 0 0 0 2.5px var(--gray-200);
+            }
+
+            &::placeholder {
+              color: var(--gray-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.outlined {
+      > .har-input {
+        > label {
+          color: var(--gray-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid var(--gray-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--gray-200);
+            }
+
+            &::placeholder {
+              color: var(--gray-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.dashed {
+      > .har-input {
+        > label {
+          color: var(--gray-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) dashed var(--gray-300);
+
+            &:focus {
+              box-shadow: 0 0 0 2.5px var(--gray-200);
+            }
+
+            &::placeholder {
+              color: var(--gray-400);
+            }
+          }
+        }
+      }
+    }
+
+    &.borderless {
+      > .har-input {
+        > label {
+          color: var(--gray-500);
+        }
+
+        > .input {
+          > input {
+            background-color: transparent;
+            border: var(--stroke-1) solid transparent;
+
+            &::placeholder {
+              color: var(--gray-400);
+            }
+          }
+        }
+      }
+    }
+  }
+}