fix(checkbox): use theme color for checkboxes

cft-group · Feb 12, 2021 · 3110744 · 3110744
1 parent c1502b4
commit 3110744
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/packages/core/src/checkbox/checkbox.css b/src/packages/core/src/checkbox/checkbox.css
@@ -66,8 +66,12 @@
     top: 0;
     left: 0;
     display: block;
-    width: var(--S24);
-    height: var(--S24);
+    width: 18px;
+    height: 18px;
+    margin: 3px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 2px;
     z-index: 2;
   }
 }
@@ -84,22 +88,26 @@
     Checked
   */
   &:checked + ._e_checkbox__icon::before {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM9.3 16.29C9.69 16.68 10.32 16.68 10.71 16.29L18.29 8.7C18.68 8.31 18.68 7.68 18.29 7.29C17.9 6.9 17.27 6.9 16.88 7.29L10 14.17L7.12 11.29C6.73 10.9 6.1 10.9 5.71 11.29C5.52275 11.4768 5.41751 11.7305 5.41751 11.995C5.41751 12.2595 5.52275 12.5132 5.71 12.7L9.3 16.29Z' fill='%232962FF'/%3E%3C/svg%3E");
+    border-width: 0;
+    background-color: var(--Primary);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.70997 13.2901C7.31997 13.6801 6.68997 13.6801 6.29997 13.2901L2.70997 9.70006C2.52271 9.51323 2.41748 9.25958 2.41748 8.99506C2.41748 8.73054 2.52271 8.47689 2.70997 8.29006C3.09997 7.90006 3.72997 7.90006 4.11997 8.29006L6.99997 11.1701L13.88 4.29006C14.27 3.90006 14.9 3.90006 15.29 4.29006C15.68 4.68006 15.68 5.31006 15.29 5.70006L7.70997 13.2901Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
   }
 
   /*
     Unchecked
   */
   & + ._e_checkbox__icon::before {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H6C5.45 5 5 5.45 5 6V18C5 18.55 5.45 19 6 19Z' fill='%23BABBC0'/%3E%3C/svg%3E%0A");
+    border-color: var(--N200);
   }
 
   /*
     Checked and disabled
   */
   &:checked:disabled {
     & + ._e_checkbox__icon::before {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM9.3 16.29C9.69 16.68 10.32 16.68 10.71 16.29L18.29 8.7C18.68 8.31 18.68 7.68 18.29 7.29C17.9 6.9 17.27 6.9 16.88 7.29L10 14.17L7.12 11.29C6.73 10.9 6.1 10.9 5.71 11.29C5.52275 11.4768 5.41751 11.7305 5.41751 11.995C5.41751 12.2595 5.52275 12.5132 5.71 12.7L9.3 16.29Z' fill='%23646572'/%3E%3C/svg%3E%0A");  
+      border-width: 0;
+      background-color: var(--N600);
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.70997 13.2901C7.31997 13.6801 6.68997 13.6801 6.29997 13.2901L2.70997 9.70006C2.52271 9.51323 2.41748 9.25958 2.41748 8.99506C2.41748 8.73054 2.52271 8.47689 2.70997 8.29006C3.09997 7.90006 3.72997 7.90006 4.11997 8.29006L6.99997 11.1701L13.88 4.29006C14.27 3.90006 14.9 3.90006 15.29 4.29006C15.68 4.68006 15.68 5.31006 15.29 5.70006L7.70997 13.2901Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
     }
 
     & ~ ._e_checkbox__label {
@@ -112,7 +120,7 @@
   */
   &:disabled {
     & + ._e_checkbox__icon::before {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H6C5.45 5 5 5.45 5 6V18C5 18.55 5.45 19 6 19Z' fill='%23DCDDE0'/%3E%3C/svg%3E%0A");
+      border-color: var(--N200);
     }
 
     & ~ ._e_checkbox__label {
@@ -124,17 +132,19 @@
     Indeterminate
   */
   &:indeterminate + ._e_checkbox__icon::before {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 13H16C16.55 13 17 12.55 17 12C17 11.45 16.55 11 16 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13Z' fill='%232962FF'/%3E%3C/svg%3E");  
+    border-width: 0;
+    background-color: var(--Primary);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 10H5C4.45 10 4 9.55 4 9C4 8.45 4.45 8 5 8H13C13.55 8 14 8.45 14 9C14 9.55 13.55 10 13 10Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
   }
 
   /*
     Invalid
   */
   &:invalid + ._e_checkbox__icon::before {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H6C5.45 5 5 5.45 5 6V18C5 18.55 5.45 19 6 19Z' fill='%23E6243C'/%3E%3C/svg%3E");  
+    border-color: var(--R500);
   }
 }
 
 ._e_checkbox__input_invalid + ._e_checkbox__icon::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H6C5.45 5 5 5.45 5 6V18C5 18.55 5.45 19 6 19Z' fill='%23E6243C'/%3E%3C/svg%3E");  
+  border-color: var(--R500);
 }