Align @mamba/switch style (#307)

* Add postcss-rgbahex for allowing rgba(#hex, opacity) * Add correct switch styles * Use new switch css
stone-payments · Jan 9, 2019 · 5258311 · 5258311
1 parent 68722f8
commit 5258311
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 23 deletions.
diff --git a/packages/components/Switch/Switch.html b/packages/components/Switch/Switch.html
@@ -31,15 +31,7 @@
 </script>
 
 <style type="text/postcss">
-  @import '@mamba/styles/colors.pcss';
-
-  $checked-icon-border: $green;
-  $checked-bar-bg: $green;
-  $unchecked-icon-bg: $white;
-  $unchecked-icon-border: $blue-gray-dark;
-  $unchecked-bar-bg: $blue-gray-dark;
-  $disabled-icon-border: $gray-light;
-  $disabled-bar-bg: $gray-lighter;
+  @import '@mamba/styles/theme.pcss';
 
   input {
     display: none;
@@ -48,42 +40,43 @@
   .switch {
     position: relative;
     display: inline-block;
-    width: 30px;
-    height: 16px;
+    width: 27px;
+    height: 12px;
     vertical-align: middle;
     border-radius: 8px;
-    background-color: $unchecked-bar-bg;
+    background-color: $switch-unchecked-bg;
 
     &::after {
       content: '';
       display: inline-block;
       position: absolute;
       top: -2px;
       left: -3px;
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
       border-radius: 50%;
-      border: 0.2rem solid $unchecked-icon-border;
-      background-color: $unchecked-icon-bg;
+      border: none;
+      background-color: $switch-unchecked-color;
+      box-shadow: 0 0 1px 0 rgba($black, 0.12), 0 1px 1px 0 rgba($black, 0.24);
     }
 
     /** Checked switch style */
     &[checked='true'] {
-      background-color: $checked-bar-bg;
+      background-color: $switch-checked-bg;
 
       &::after {
         left: auto;
         right: -3px;
-        border-color: $checked-icon-border;
+        background-color: $switch-checked-color;
       }
     }
 
     /** Disabled switch style */
     &[disabled='true'] {
-      background-color: $disabled-bar-bg;
+      background-color: rgba($switch-disabled-bg, 0.5);
 
       &::after {
-        border-color: $disabled-icon-border;
+        background-color: $switch-disabled-color;
       }
     }
   }

diff --git a/packages/configs/package.json b/packages/configs/package.json
@@ -50,6 +50,7 @@
     "postcss-calc": "^7.0.1",
     "postcss-easy-import": "^3.0.0",
     "postcss-extend-rule": "^2.0.0",
+    "postcss-hexrgba": "^1.0.1",
     "postcss-html": "^0.36.0",
     "postcss-nested": "^4.1.1",
     "postcss-preset-env": "^6.5.0",

diff --git a/packages/configs/postcss/index.js b/packages/configs/postcss/index.js
@@ -11,6 +11,7 @@ const postcssPropertyLookup = require('postcss-property-lookup');
 const postcssNested = require('postcss-nested');
 const cssMqpacker = require('css-mqpacker');
 const postcssReporter = require('postcss-reporter');
+const postcssHexRGBA = require('postcss-hexrgba');
 const prependImports = require('./prependImports.js');
 
 const IS_BUILDING_APP = !!process.env.APP_ENV;
@@ -36,6 +37,7 @@ module.exports = {
     postcssCalc({
       warnWhenCannotResolve: true,
     }),
+    postcssHexRGBA(),
     postcssPresetEnv({
       stage: 2 /** Defaults postcss-preset-env to stage 2 */,
       features: {

diff --git a/packages/styles/colors.pcss b/packages/styles/colors.pcss
@@ -1,18 +1,21 @@
+$black: #000;
+
+$white: #fff;
+$seashell: #f1f1f1;
+
 $stone-green: #4fb341;
 $stone-green-dark: #153522;
 
 $gray-darker: #353535;
 $gray: #757575;
 $gray-lighter: #e3e6e7;
 $gray-lightest: #f1f2f3;
+$silver: #bab9b9;
 
 $red-light: #e85b5b;
 
 /* --- */
 
-$black: #000;
-$white: #fff;
-
 $blue: #2196f3;
 $blue-dark: #1565c0;
 

diff --git a/packages/styles/theme.pcss b/packages/styles/theme.pcss
@@ -8,12 +8,23 @@ $app-bg-color: $gray-lighter;
 
 $default-text-color: $gray-darker;
 
+/** Row component */
 $row-border-color: $gray-lighter;
 
+/** Input component */
 $input-border-color: $gray-lighter;
 $input-focus-border-color: $stone-green;
 $input-invalid-border-color: $red-light;
 $input-error-color: $red-light;
 
+/** Dialog component */
 $dialog-negative-color: $red-light;
 $dialog-positive-color: $stone-green;
+
+/** Switch component */
+$switch-unchecked-bg: $silver;
+$switch-unchecked-color: $seashell;
+$switch-checked-bg: rgba($green, 0.5);
+$switch-checked-color: $green;
+$switch-disabled-bg: $silver;
+$switch-disabled-color: $silver;