DRY: light theme sass mixin (#4606)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/checkbox/checkbox.scss

@@ -19,6 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+@include theme-light {
+  .Checkbox {
+    --checkbox-color-active: var(--blue);
+    --checkbox-bgc-active: none;
+  }
+}
 
 .Checkbox {
   --checkbox-color: var(--textColorPrimary); // tick color [√]
@@ -27,16 +33,6 @@
 
   flex-shrink: 0;
 
-  &.theme {
-    &-dark {
-      // default
-    }
-    &-light {
-      --checkbox-color-active: var(--blue);
-      --checkbox-bgc-active: none;
-    }
-  }
-
   &:hover {
     input:not(:checked):not(:disabled) {
       ~ .tick:after {
@@ -47,25 +43,30 @@
 
   input[type="checkbox"] {
     display: none;
+
     &:checked {
       ~ .box {
         color: var(--checkbox-color-active);
         background: var(--checkbox-bgc-active);
         border-color: var(--checkbox-bgc-active);
+
         &:after {
           opacity: 1;
         }
       }
     }
+
     &:disabled {
       ~ .box {
         color: var(--checkbox-color);
       }
+
       ~ * {
         opacity: .5;
         pointer-events: none;
       }
     }
+
     &:not(:disabled) ~ * {
       cursor: pointer;
     }
@@ -104,4 +105,4 @@
       margin-left: .5em;
     }
   }
-}
+}

src/renderer/components/checkbox/checkbox.tsx

@@ -24,7 +24,6 @@ import React from "react";
 import { boundMethod, cssNames } from "../../utils";
 
 export interface CheckboxProps<T = boolean> {
-  theme?: "dark" | "light";
   className?: string;
   label?: React.ReactNode;
   inline?: boolean;
@@ -50,12 +49,11 @@ export class Checkbox extends React.PureComponent<CheckboxProps> {
   }
 
   render() {
-    const { label, inline, className, value, theme, children, ...inputProps } = this.props;
+    const { label, inline, className, value, children, ...inputProps } = this.props;
     const componentClass = cssNames("Checkbox flex align-center", className, {
       inline,
       checked: value,
       disabled: this.props.disabled,
-      [`theme-${theme}`]: theme,
     });
 
     return (