feat(checkbox): Changes stylinbg to use custom properties

dynatrace-oss · May 20, 2020 · 701aadc · 701aadc
1 parent 193b3e5
commit 701aadc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/libs/barista-components/checkbox/src/_checkbox-theme.scss b/libs/barista-components/checkbox/src/_checkbox-theme.scss
@@ -1,40 +1,42 @@
-@import '../../core/src/style/variables';
-@import '../../core/src/theming/theming';
 @import '../../core/src/style/interactive-common';
+@import '../../core/src/style/variables';
 
-@mixin dt-theme-checkbox($theme) {
-  $is-dark: map-get($theme, 'is-dark');
+.dt-theme-dark {
+  :host {
+    .dt-checkbox-content {
+      color: #ffffff;
+    }
 
-  @if ($is-dark == true) {
-    :host {
-      .dt-checkbox-content {
-        color: #ffffff;
-      }
+    .dt-checkbox-container {
+      border-color: #ffffff;
+    }
+
+    .dt-checkbox-icon svg {
+      stroke: #ffffff;
+    }
 
+    &:hover {
       .dt-checkbox-container {
         border-color: #ffffff;
+        background-color: rgba(255, 255, 255, 0.2);
       }
 
       .dt-checkbox-icon svg {
         stroke: #ffffff;
       }
+    }
 
-      &:hover .dt-checkbox-container {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
+    &.dt-checkbox-focused .dt-checkbox-container {
+      @include dt-focus-style(true);
+    }
 
-      &.dt-checkbox-focused .dt-checkbox-container {
-        @include dt-focus-style(true);
+    &.dt-checkbox-disabled {
+      .dt-checkbox-container {
+        background-color: transparent;
+        border-color: $gray-500;
       }
-
-      &.dt-checkbox-disabled {
-        .dt-checkbox-container {
-          background-color: transparent;
-          border-color: $gray-500;
-        }
-        .dt-checkbox-icon svg {
-          stroke: $gray-500;
-        }
+      .dt-checkbox-icon svg {
+        stroke: $gray-500;
       }
     }
   }

diff --git a/libs/barista-components/checkbox/src/checkbox.scss b/libs/barista-components/checkbox/src/checkbox.scss
@@ -1,7 +1,6 @@
 @import '../../core/src/style/variables';
 @import '../../core/src/style/interactive-common';
 @import '../../core/src/style/transition';
-@import '../../core/src/theming/theming';
 @import '../../style/font-mixins';
 @import './checkbox-theme';
 
@@ -198,8 +197,3 @@ $dt-checkbox-size: 20px;
     opacity: 0;
   }
 }
-
-// Apply the checkbox theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-checkbox($dt-current-theme);
-}