feat(Toggle): new design for toggle input

wfp · Nov 26, 2019 · 5ec81b8 · 5ec81b8
1 parent 10e9ce8
commit 5ec81b8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Toggle/_toggle.scss b/src/components/Toggle/_toggle.scss
@@ -34,8 +34,9 @@
       display: block;
       content: '';
       width: 100%;
-      height: rem(4px);
-      top: -2px;
+      height: rem(28px);
+      top: rem(-14px);
+      border-radius: rem(28px);
       background-color: $ui-05;
       transition: $transition--base $carbon--standard-easing;
       cursor: pointer;
@@ -45,11 +46,11 @@
       box-sizing: border-box;
       position: absolute;
       display: block;
-      border: 2px solid $ui-05;
+      border: 3px solid $ui-05;
       cursor: pointer;
-      top: -12px;
-      width: rem(24px);
-      height: rem(24px);
+      top: -14px;
+      width: rem(28px);
+      height: rem(28px);
       background-color: $ui-01;
       border-radius: 50%;
       content: '';
@@ -127,7 +128,7 @@
 
     &:after {
       transform: translateX(24px);
-      background-color: $interactive-01;
+      background-color: $ui-01;
       box-shadow: none;
       border-color: $interactive-01;
     }

diff --git a/src/documentation/Editorial/Editorial-story.js b/src/documentation/Editorial/Editorial-story.js
@@ -26,12 +26,13 @@ storiesOf('Design|Core', module)
       the harder it is for users to complete their tasks.
     </p>*/}
 
-      <Blockquote title="Editorial Guidelines" type="warning">
+      <Blockquote title="WFP editorial style guide">
         <p>
           All editorial guidelines can be found in{' '}
           <Link href="https://cdn.wfp.org/guides/editorial" target="_blank">
             this guide
           </Link>
+          .
         </p>
       </Blockquote>
 

diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
@@ -38,6 +38,9 @@
   $nav-02: $color__main-80 !default !global;
   $nav-03: $color__magenta-30 !default !global;
   $nav-04: $color__magenta-60 !default !global;
+  $disabled: $color__navy-gray-10 !default !global;
+  $disabled-01: $color__navy-gray-10 !default !global;
+  $disabled-02: $color__navy-gray-8 !default !global;
 
   $hover-primary: darken($interactive-01, 10%) !default !global;
   $hover-primary-text: darken($interactive-01, 15%) !default !global;