colors and filters

front/sass/_checkbox.scss

@@ -1,9 +1,9 @@
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) {
     .checkbox-wrapper input[type=checkbox] {
-        --active-inner: #fff;
-        --focus: 2px rgba(39, 94, 254, .3);
-        --border-hover: #275EFE;
+        --active-inner: var(--p10);
+        --focus: 2px var(--p30);
+        --border-hover: var(--p30);
         --disabled: #F6F8FF;
         --disabled-inner: #E1E6F9;
         -webkit-appearance: none;
@@ -15,8 +15,8 @@
         position: relative;
         margin: 0;
         cursor: pointer;
-        border: 1px solid var(--bc, var(--border-color));
-        background: var(--b, var(--background));
+        border: 1px solid var(--bc, var(--p30));
+        background: var(--b, var(--p10));
         transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
     }
     .checkbox-wrapper input[type=checkbox]:after {
@@ -28,8 +28,8 @@
         transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
     }
     .checkbox-wrapper input[type=checkbox]:checked {
-        --b: var(--secondary);
-        --bc: var(--secondary);
+        --b: var(--p40);
+        --bc: var(--p40);
         --d-o: .3s;
         --d-t: .6s;
         --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
@@ -41,7 +41,7 @@
     }
     .checkbox-wrapper input[type=checkbox]:disabled:checked {
         --b: var(--disabled-inner);
-        --bc: var(--border-color);
+        --bc: var(--p40);
     }
     .checkbox-wrapper input[type=checkbox]:disabled + label {
         cursor: not-allowed;
@@ -95,8 +95,8 @@
 }
 
 .checkbox-wrapper input[type=checkbox]:indeterminate {
-    --b: var(--secondary);
-    --bc: var(--secondary);
+    --b: var(--p40);
+    --bc: var(--p40);
     --d-o: .3s;
     --d-t: .6s;
     --d-t-e: cubic-bezier(.2, .85, .32, 1.2);