@harjs/react-ui 1.1.5 → 1.1.7

package/dist/assets/css/components/form/checkbox-card/color.unchecked.css

@@ -0,0 +1,753 @@
+.har-checkbox-card-wrapper {
+  > .har-checkbox-card {
+    &.blue {
+      &.filled {
+        background-color: var(--blue-500);
+        border: solid var(--stroke-1) var(--blue-500);
+        color: var(--blue-50) !important;
+
+        &:hover {
+          background-color: var(--blue-600);
+          border-color: var(--blue-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--blue-50);
+        border: solid var(--stroke-1) var(--blue-200);
+        color: var(--blue-800) !important;
+
+        &:hover {
+          background-color: var(--blue-200);
+          border-color: var(--blue-300);
+        }
+
+        &:active {
+          background-color: var(--blue-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--blue-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--blue-800) !important;
+
+        &:hover {
+          background-color: var(--blue-100);
+        }
+
+        &:active {
+          background-color: var(--blue-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--blue-500);
+        color: var(--blue-700) !important;
+
+        &:hover {
+          background-color: var(--blue-50);
+          border-color: var(--blue-600);
+        }
+
+        &:active {
+          background-color: var(--blue-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--blue-500);
+        color: var(--blue-700) !important;
+
+        &:hover {
+          border-color: var(--blue-400);
+          color: var(--blue-800);
+          background-color: var(--blue-50);
+        }
+
+        &:active {
+          border-color: var(--blue-600);
+          color: var(--blue-900);
+          background-color: var(--blue-100);
+        }
+      }
+    }
+
+    &.purple {
+      &.filled {
+        background-color: var(--purple-500);
+        border: solid var(--stroke-1) var(--purple-500);
+        color: var(--purple-50) !important;
+
+        &:hover {
+          background-color: var(--purple-600);
+          border-color: var(--purple-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--purple-50);
+        border: solid var(--stroke-1) var(--purple-200);
+        color: var(--purple-800) !important;
+
+        &:hover {
+          background-color: var(--purple-200);
+          border-color: var(--purple-300);
+        }
+
+        &:active {
+          background-color: var(--purple-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--purple-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--purple-800) !important;
+
+        &:hover {
+          background-color: var(--purple-100);
+        }
+
+        &:active {
+          background-color: var(--purple-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--purple-500);
+        color: var(--purple-700) !important;
+
+        &:hover {
+          background-color: var(--purple-50);
+          border-color: var(--purple-600);
+        }
+
+        &:active {
+          background-color: var(--purple-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--purple-500);
+        color: var(--purple-700) !important;
+
+        &:hover {
+          border-color: var(--purple-400);
+          color: var(--purple-800);
+          background-color: var(--purple-50);
+        }
+
+        &:active {
+          border-color: var(--purple-600);
+          color: var(--purple-900);
+          background-color: var(--purple-100);
+        }
+      }
+    }
+
+    &.pink {
+      &.filled {
+        background-color: var(--pink-500);
+        border: solid var(--stroke-1) var(--pink-500);
+        color: var(--pink-50) !important;
+
+        &:hover {
+          background-color: var(--pink-600);
+          border-color: var(--pink-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--pink-50);
+        border: solid var(--stroke-1) var(--pink-200);
+        color: var(--pink-800) !important;
+
+        &:hover {
+          background-color: var(--pink-200);
+          border-color: var(--pink-300);
+        }
+
+        &:active {
+          background-color: var(--pink-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--pink-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--pink-800) !important;
+
+        &:hover {
+          background-color: var(--pink-100);
+        }
+
+        &:active {
+          background-color: var(--pink-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--pink-500);
+        color: var(--pink-700) !important;
+
+        &:hover {
+          background-color: var(--pink-50);
+          border-color: var(--pink-600);
+        }
+
+        &:active {
+          background-color: var(--pink-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--pink-500);
+        color: var(--pink-700) !important;
+
+        &:hover {
+          border-color: var(--pink-400);
+          color: var(--pink-800);
+          background-color: var(--pink-50);
+        }
+
+        &:active {
+          border-color: var(--pink-600);
+          color: var(--pink-900);
+          background-color: var(--pink-100);
+        }
+      }
+    }
+
+    &.red {
+      &.filled {
+        background-color: var(--red-500);
+        border: solid var(--stroke-1) var(--red-500);
+        color: var(--red-50) !important;
+
+        &:hover {
+          background-color: var(--red-600);
+          border-color: var(--red-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--red-50);
+        border: solid var(--stroke-1) var(--red-200);
+        color: var(--red-800) !important;
+
+        &:hover {
+          background-color: var(--red-200);
+          border-color: var(--red-300);
+        }
+
+        &:active {
+          background-color: var(--red-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--red-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--red-800) !important;
+
+        &:hover {
+          background-color: var(--red-100);
+        }
+
+        &:active {
+          background-color: var(--red-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--red-500);
+        color: var(--red-700) !important;
+
+        &:hover {
+          background-color: var(--red-50);
+          border-color: var(--red-600);
+        }
+
+        &:active {
+          background-color: var(--red-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--red-500);
+        color: var(--red-700) !important;
+
+        &:hover {
+          border-color: var(--red-400);
+          color: var(--red-800);
+          background-color: var(--red-50);
+        }
+
+        &:active {
+          border-color: var(--red-600);
+          color: var(--red-900);
+          background-color: var(--red-100);
+        }
+      }
+    }
+
+    &.orange {
+      &.filled {
+        background-color: var(--orange-500);
+        border: solid var(--stroke-1) var(--orange-500);
+        color: var(--orange-50) !important;
+
+        &:hover {
+          background-color: var(--orange-600);
+          border-color: var(--orange-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--orange-50);
+        border: solid var(--stroke-1) var(--orange-200);
+        color: var(--orange-800) !important;
+
+        &:hover {
+          background-color: var(--orange-200);
+          border-color: var(--orange-300);
+        }
+
+        &:active {
+          background-color: var(--orange-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--orange-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--orange-800) !important;
+
+        &:hover {
+          background-color: var(--orange-100);
+        }
+
+        &:active {
+          background-color: var(--orange-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--orange-500);
+        color: var(--orange-700) !important;
+
+        &:hover {
+          background-color: var(--orange-50);
+          border-color: var(--orange-600);
+        }
+
+        &:active {
+          background-color: var(--orange-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--orange-500);
+        color: var(--orange-700) !important;
+
+        &:hover {
+          border-color: var(--orange-400);
+          color: var(--orange-800);
+          background-color: var(--orange-50);
+        }
+
+        &:active {
+          border-color: var(--orange-600);
+          color: var(--orange-900);
+          background-color: var(--orange-100);
+        }
+      }
+    }
+
+    &.yellow {
+      &.filled {
+        background-color: var(--yellow-500);
+        border: solid var(--stroke-1) var(--yellow-500);
+        color: var(--yellow-50) !important;
+
+        &:hover {
+          background-color: var(--yellow-600);
+          border-color: var(--yellow-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--yellow-50);
+        border: solid var(--stroke-1) var(--yellow-200);
+        color: var(--yellow-800) !important;
+
+        &:hover {
+          background-color: var(--yellow-200);
+          border-color: var(--yellow-300);
+        }
+
+        &:active {
+          background-color: var(--yellow-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--yellow-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--yellow-800) !important;
+
+        &:hover {
+          background-color: var(--yellow-100);
+        }
+
+        &:active {
+          background-color: var(--yellow-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--yellow-500);
+        color: var(--yellow-700) !important;
+
+        &:hover {
+          background-color: var(--yellow-50);
+          border-color: var(--yellow-600);
+        }
+
+        &:active {
+          background-color: var(--yellow-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--yellow-500);
+        color: var(--yellow-700) !important;
+
+        &:hover {
+          border-color: var(--yellow-400);
+          color: var(--yellow-800);
+          background-color: var(--yellow-50);
+        }
+
+        &:active {
+          border-color: var(--yellow-600);
+          color: var(--yellow-900);
+          background-color: var(--yellow-100);
+        }
+      }
+    }
+
+    &.green {
+      &.filled {
+        background-color: var(--green-500);
+        border: solid var(--stroke-1) var(--green-500);
+        color: var(--green-50) !important;
+
+        &:hover {
+          background-color: var(--green-600);
+          border-color: var(--green-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--green-50);
+        border: solid var(--stroke-1) var(--green-200);
+        color: var(--green-800) !important;
+
+        &:hover {
+          background-color: var(--green-200);
+          border-color: var(--green-300);
+        }
+
+        &:active {
+          background-color: var(--green-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--green-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--green-800) !important;
+
+        &:hover {
+          background-color: var(--green-100);
+        }
+
+        &:active {
+          background-color: var(--green-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--green-500);
+        color: var(--green-700) !important;
+
+        &:hover {
+          background-color: var(--green-50);
+          border-color: var(--green-600);
+        }
+
+        &:active {
+          background-color: var(--green-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--green-500);
+        color: var(--green-700) !important;
+
+        &:hover {
+          border-color: var(--green-400);
+          color: var(--green-800);
+          background-color: var(--green-50);
+        }
+
+        &:active {
+          border-color: var(--green-600);
+          color: var(--green-900);
+          background-color: var(--green-100);
+        }
+      }
+    }
+
+    &.teal {
+      &.filled {
+        background-color: var(--teal-500);
+        border: solid var(--stroke-1) var(--teal-500);
+        color: var(--teal-50) !important;
+
+        &:hover {
+          background-color: var(--teal-600);
+          border-color: var(--teal-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--teal-50);
+        border: solid var(--stroke-1) var(--teal-200);
+        color: var(--teal-800) !important;
+
+        &:hover {
+          background-color: var(--teal-200);
+          border-color: var(--teal-300);
+        }
+
+        &:active {
+          background-color: var(--teal-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--teal-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--teal-800) !important;
+
+        &:hover {
+          background-color: var(--teal-100);
+        }
+
+        &:active {
+          background-color: var(--teal-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--teal-500);
+        color: var(--teal-700) !important;
+
+        &:hover {
+          background-color: var(--teal-50);
+          border-color: var(--teal-600);
+        }
+
+        &:active {
+          background-color: var(--teal-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--teal-500);
+        color: var(--teal-700) !important;
+
+        &:hover {
+          border-color: var(--teal-400);
+          color: var(--teal-800);
+          background-color: var(--teal-50);
+        }
+
+        &:active {
+          border-color: var(--teal-600);
+          color: var(--teal-900);
+          background-color: var(--teal-100);
+        }
+      }
+    }
+
+    &.cyan {
+      &.filled {
+        background-color: var(--cyan-500);
+        border: solid var(--stroke-1) var(--cyan-500);
+        color: var(--cyan-50) !important;
+
+        &:hover {
+          background-color: var(--cyan-600);
+          border-color: var(--cyan-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--cyan-50);
+        border: solid var(--stroke-1) var(--cyan-200);
+        color: var(--cyan-800) !important;
+
+        &:hover {
+          background-color: var(--cyan-200);
+          border-color: var(--cyan-300);
+        }
+
+        &:active {
+          background-color: var(--cyan-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--cyan-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--cyan-800) !important;
+
+        &:hover {
+          background-color: var(--cyan-100);
+        }
+
+        &:active {
+          background-color: var(--cyan-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--cyan-500);
+        color: var(--cyan-700) !important;
+
+        &:hover {
+          background-color: var(--cyan-50);
+          border-color: var(--cyan-600);
+        }
+
+        &:active {
+          background-color: var(--cyan-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--cyan-500);
+        color: var(--cyan-700) !important;
+
+        &:hover {
+          border-color: var(--cyan-400);
+          color: var(--cyan-800);
+          background-color: var(--cyan-50);
+        }
+
+        &:active {
+          border-color: var(--cyan-600);
+          color: var(--cyan-900);
+          background-color: var(--cyan-100);
+        }
+      }
+    }
+
+    &.gray {
+      &.filled {
+        background-color: var(--gray-500);
+        border: solid var(--stroke-1) var(--gray-500);
+        color: var(--gray-50) !important;
+
+        &:hover {
+          background-color: var(--gray-600);
+          border-color: var(--gray-600);
+        }
+      }
+
+      &.surface {
+        background-color: var(--gray-50);
+        border: solid var(--stroke-1) var(--gray-200);
+        color: var(--gray-800) !important;
+
+        &:hover {
+          background-color: var(--gray-200);
+          border-color: var(--gray-300);
+        }
+
+        &:active {
+          background-color: var(--gray-300);
+        }
+      }
+
+      &.surface-borderless {
+        background-color: var(--gray-50);
+        border: solid var(--stroke-1) transparent;
+        color: var(--gray-800) !important;
+
+        &:hover {
+          background-color: var(--gray-100);
+        }
+
+        &:active {
+          background-color: var(--gray-200);
+        }
+      }
+
+      &.outlined {
+        background-color: var(--surface-primary);
+        border: solid var(--stroke-1) var(--gray-500);
+        color: var(--gray-700) !important;
+
+        &:hover {
+          background-color: var(--gray-50);
+          border-color: var(--gray-600);
+        }
+
+        &:active {
+          background-color: var(--gray-100);
+        }
+      }
+
+      &.dashed {
+        background-color: var(--surface-primary);
+        border: dashed var(--stroke-1) var(--gray-500);
+        color: var(--gray-700) !important;
+
+        &:hover {
+          border-color: var(--gray-400);
+          color: var(--gray-800);
+          background-color: var(--gray-50);
+        }
+
+        &:active {
+          border-color: var(--gray-600);
+          color: var(--gray-900);
+          background-color: var(--gray-100);
+        }
+      }
+    }
+  }
+}