fix(toggle): update colors

Fixes carbon-design-system#3614.
asudoh · Sep 19, 2019 · 1c4a898 · 1c4a898
1 parent a537961
commit 1c4a898
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -55,7 +55,8 @@
       border-radius: carbon--rem(15px);
       top: 0;
       will-change: box-shadow;
-      box-shadow: 0 0 0 2px transparent;
+      box-shadow: 0 0 0 1px transparent, 0 0 0 1px transparent,
+        0 0 0 3px transparent;
       transition: box-shadow $duration--fast-01 motion(exit, productive),
         background-color $duration--fast-01 motion(exit, productive);
     }
@@ -70,15 +71,15 @@
       top: carbon--rem(3px);
       width: carbon--rem(18px);
       height: carbon--rem(18px);
-      background-color: $ui-03;
+      background-color: $icon-03;
       border-radius: 50%;
       content: '';
       transition: transform $duration--fast-01 motion(exit, productive);
     }
   }
 
   .#{$prefix}--toggle__check {
-    fill: $ui-03;
+    fill: $icon-03;
     position: absolute;
     left: carbon--rem(6px);
     top: carbon--rem(6px);
@@ -138,13 +139,13 @@
   .#{$prefix}--toggle + .#{$prefix}--toggle__label,
   .#{$prefix}--toggle + .#{$prefix}--toggle__label {
     .#{$prefix}--toggle__appearance:before {
-      box-shadow: 0 0 0 2px transparent;
+      box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
     }
   }
   .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
   .#{$prefix}--toggle:active + .#{$prefix}--toggle__label {
     .#{$prefix}--toggle__appearance:before {
-      box-shadow: 0 0 0 2px $focus;
+      box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
     }
   }
 
@@ -285,7 +286,8 @@
       content: '';
       background-color: $ui-04;
       will-change: box-shadow;
-      box-shadow: 0 0 0 2px transparent;
+      box-shadow: 0 0 0 1px transparent, 0 0 0 1px transparent,
+        0 0 0 3px transparent;
       transition: box-shadow $duration--fast-01 motion(exit, productive),
         background-color $duration--fast-01 motion(exit, productive);
     }
@@ -300,7 +302,7 @@
       width: carbon--rem(18px);
       height: carbon--rem(18px);
       border-radius: 50%;
-      background-color: $ui-03;
+      background-color: $icon-03;
       content: '';
       transition: transform $duration--fast-01 motion(exit, productive);
     }
@@ -350,7 +352,7 @@
   .#{$prefix}--toggle-input:active
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::before {
-    box-shadow: 0 0 0 2px $focus;
+    box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
   }
 
   //----------------------------------------------