delete custom-checkbox-primary

packages/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -43,7 +43,7 @@ export const UpdateParentConfirmModal: FC = () => {
                 {t('admin:user_group_management.update_parent_confirm_modal.danger_message')}
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-primary pl-5">
+              <div className="custom-control custom-checkbox custom-checkbox-succsess pl-5">
                 <input
                   className="custom-control-input"
                   name="forceUpdateParents"

packages/app/src/components/PageRenameModal.tsx

@@ -304,7 +304,7 @@ const PageRenameModal = (): JSX.Element => {
             </label>
           </div>
 
-          <div className="custom-control custom-checkbox custom-checkbox-primary">
+          <div className="custom-control custom-checkbox custom-checkbox-success">
             <input
               className="custom-control-input"
               name="remain_metadata"

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -118,7 +118,7 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
             </div>
             <div className="d-none d-lg-flex align-items-center ml-auto search-control-include-options">
               <div className="border rounded px-2 py-1 mr-3">
-                <div className="custom-control custom-checkbox custom-checkbox-primary">
+                <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"
@@ -132,7 +132,7 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
                 </div>
               </div>
               <div className="border rounded px-2 py-1">
-                <div className="custom-control custom-checkbox custom-checkbox-primary">
+                <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -85,7 +85,7 @@
   .form-control[disabled],
   .form-control[readonly] {
     color: hsl.lighten(var(--color-global),10%);
-    background-color: hsl.lighten(var(--color-global),5%);
+    background-color: hsl.lighten(var(--bgcolor-global),5%);
   }
 
   .input-group > .input-group-prepend > .input-group-text {

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -10,9 +10,9 @@
   $color-list: var(--color-list,var(--color-global));
   $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
   $color-list-hover: var(--color-list-hover,var(--color-global));
-  $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-  $bgcolor-list-active: var(--bgcolor-list-active,hsl.lighten(var(--primary),65%));
-  $color-list-active: var(--color-list-active,hsl(var(--primary-hs), clamp(10%, (100% - var(--primary-l)  + 65% - 51%) * 1000, 95%)));
+  $bgcolor-list-hover: var(--bgcolor-list-hover, var(--bgcolor-global));
+  $bgcolor-list-active: var(--bgcolor-list-active, hsl.lighten(var(--primary),65%));
+  $color-list-active: var(--color-list-active,hsl(var(--primary-hs), clamp(10%, (100% - var(--primary-l)  - 65% - 51%) * 1000, 95%)));
   $color-table: var(--color-table,var(--color-global));
   $bgcolor-table: var(--bgcolor-table,null);
   $border-color-table: var(--border-color-table,#{$gray-200});
@@ -77,7 +77,7 @@
   .form-control[disabled],
   .form-control[readonly] {
     color: hsl.lighten(var(--color-global),10%);
-    background-color: hsl.darken(var(--color-global),5%);
+    background-color: hsl.darken(var(--bgcolor-global),5%);
   }
 
   /*

packages/app/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss

@@ -71,32 +71,6 @@ $hsl-colors: (
   }
 }
 
-@each $color, $value in $hsl-colors {
-  .custom-checkbox-#{$color} {
-    .custom-control-label::before {
-      border-color: $input-border-color;
-      transition: 0.3s ease-in-out;
-    }
-    .custom-control-input:checked + .custom-control-label::before {
-      background-color: $value;
-      border-color: $value;
-    }
-    .custom-control-input:checked + .custom-control-label::after {
-      color: var(--bgcolor-global);
-    }
-    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-      color: var(--bgcolor-global);
-      background-color: $value;
-      border-color: $value;
-    }
-    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-      color: var(--bgcolor-global);
-      background-color: var(--bgcolor-global);
-      border-color: $input-focus-border-color;
-    }
-  }
-}
-
 @each $color, $value in $hsl-colors {
   .alert-#{$color} {
     $alert-color: hsl.contrast($value,0%,90%);

packages/app/src/styles/theme/_override-functions.scss

@@ -1,21 +0,0 @@
-@use './hsl-functions' as hsl;
-
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-  @return hsl.contrast($color);
-}
-
-@function lighten($color, $degrees) {
-  @return hsl.lighten($color, $degrees);
-}
-
-@function darken($color, $degrees) {
-  @return hsl.darken($color, $degrees);
-}
-
-@function mix($color1, $color2, $degrees) {
-  @return $color1;
-}
-
-@function rgba($color, $degrees) {
-  @return hsl.alpha($color, $degrees);
-}

packages/preset-themes/src/styles/default.scss

@@ -60,7 +60,7 @@
   // --color-list-hover: var(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
   // --color-list-active: white ; // optional
-  --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
+  // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-page-list-group-item-meta: #{$gray-500}; // optional
 
   // Table colors