adjust color

src/client/js/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -6,7 +6,7 @@ const TriggerEventCheckBox = (props) => {
   const { t } = props;
 
   return (
-    <div className="checkbox checkbox-inverse">
+    <div className="checkbox checkbox-primary">
       <input
         type="checkbox"
         id={`trigger-event-${props.event}`}

src/client/styles/scss/_form.scss

@@ -74,11 +74,89 @@
   }
 }
 
-.checkbox-inverse {
+.checkbox-primary {
   input[type='checkbox']:checked + label {
     &::before {
-      background-color: $inverse;
-      border-color: $inverse;
+      background-color: $primary;
+      border-color: $primary;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-danger {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $danger;
+      border-color: $danger;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-info {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $info;
+      border-color: $info;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-warning {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $warning;
+      border-color: $warning;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-success {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $success;
+      border-color: $success;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-purple {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $purple;
+      border-color: $purple;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-red {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $danger;
+      border-color: $danger;
     }
 
     &::after {

src/client/styles/scss/_variables.scss

@@ -4,9 +4,6 @@ $growi-blue: #175fa5;
 
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
-// Color
-$inverse: #3e4d6c;
-
 //== Layout
 $grw-navbar-height: 50px;
 $grw-logo-width: 60px;