Merge pull request #260 from dabapps/hollow-button-fix

Hollow button fix

docs/less/index.less

@@ -59,3 +59,12 @@
     right: @gutter-width / 2;
   }
 }
+
+.button,
+button {
+  .create-button(custom-light, @white, @black);
+}
+
+.grey-background {
+  background-color: @grey-medium;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/less/buttons.less

@@ -33,7 +33,7 @@
   }
 }
 
-.create-button-styles (@background: @button-background-default, @color: @button-text-color-dark) {
+.create-button-styles (@background: @button-background-default, @color: @button-text-color-light) {
   .create-button-pew();
   background-color: @background;
   color: @color;
@@ -60,26 +60,6 @@
   &::before {
     background-color: contrast(@background, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
   }
-}
-
-.create-button (@type, @background, @color) {
-  &.@{type} {
-    .create-button-styles(@background, @color);
-  }
-}
-
-/* @end Mixins */
-
-.button {
-  .button-overrides();
-  .create-button-styles();
-  .create-button(primary, @primary, @button-text-color-light);
-  .create-button(secondary, @secondary, @button-text-color-light);
-  .create-button(tertiary, @tertiary, @button-text-color-light);
-  .create-button(info, @info, @button-text-color-light);
-  .create-button(success, @success, @button-text-color-light);
-  .create-button(warning, @warning, @button-text-color-light);
-  .create-button(error, @error, @button-text-color-light);
 
   transition: ease-in-out 0.1s background-color, ease-in-out 0.1s box-shadow;
   box-shadow: @shadow-none;
@@ -131,20 +111,20 @@
 
   &.hollow,
   &.link {
-    background-color: @button-transparent-background;
+    background-color: @button-background-hollow;
 
     &::before {
-      background-color: @button-transparent-pew-color;
+      background-color: contrast(@color, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
     }
 
     &:hover:not([disabled]):not(.disabled) {
-      background-color: @button-transparent-background-hover;
+      background-color: darken(contrast(@color, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1)), 5%);
       box-shadow: @shadow-none;
     }
   }
 
   &.hollow {
-    color: @button-text-color-dark;
+    color: @background;
 
     &::after {
       content: '';
@@ -154,7 +134,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      border: @button-border-width solid @button-text-color-dark;
+      border: @button-border-width solid @background;
       border-radius: @border-radius-base;
       // Fixes a Chrome rendering bug
       transform: translate3d(0, 0, 0); // DO NOT CHANGE
@@ -163,7 +143,7 @@
     }
 
     &:hover:not([disabled]):not(.disabled) {
-      color: @button-text-color-dark;
+      color: @background;
     }
   }
 
@@ -187,6 +167,26 @@
   }
 }
 
+.create-button (@type, @background, @color) {
+  &.@{type} {
+    .create-button-styles(@background, @color);
+  }
+}
+
+/* @end Mixins */
+
+.button {
+  .button-overrides();
+  .create-button-styles();
+  .create-button(primary, @primary, @button-text-color-light);
+  .create-button(secondary, @secondary, @button-text-color-light);
+  .create-button(tertiary, @tertiary, @button-text-color-light);
+  .create-button(info, @info, @button-text-color-light);
+  .create-button(success, @success, @button-text-color-light);
+  .create-button(warning, @warning, @button-text-color-light);
+  .create-button(error, @error, @button-text-color-light);
+}
+
 /* @group Animations */
 
 @keyframes button-click {

src/less/variables.less

@@ -106,7 +106,8 @@
 @button-border-width: 2px;
 @button-text-color-dark: @grey-dark;
 @button-text-color-light: @grey-lightest;
-@button-background-default: @grey-lighter;
+@button-background-default: @grey-medium;
+@button-background-hollow: transparent;
 
 @speech-bubble-arrow-size: 10px;
 @speech-bubble-border-radius: 10px;
@@ -115,10 +116,6 @@
 @speech-bubble-text-color-default: @font-color-base;
 @speech-bubble-max-width: 75%;
 
-@button-transparent-background: transparent;
-@button-transparent-background-hover: rgba(0, 0, 0, 0.05);
-@button-transparent-pew-color: rgba(0, 0, 0, 0.1);
-
 @table-stripe: @grey-lightest;
 @table-hover: darken(@grey-lightest, 3%);
 @table-border: @border-base;

src/ts/components/forms/button.examples.md

@@ -78,26 +78,28 @@ This should be applied within the selector (element / class) that you want to ap
 Note: the background color is used for the text & border of hollow buttons.
 
 ```less
-button,
-.button {
+.button,
+button {
   // You must use the mixin within the selectors you want the new class to apply to
-  // This example will generate selectors for: 'button.custom-name' and '.button.custom-name'
-  .create-button(custom-name, @background-color, @text-color);
+  // This example will generate selectors for: '.button.custom-light' and 'button.custom-light'
+  .create-button(custom-light, @white, @black);
 }
 ```
 
 You can then use your custom buttons by supplying the name you provided to the mixin as the class name.
 
-```html
-JSX
-<Button className="custom-name">
-  Custom
-</Button>
+```js
+<ContentBox className="grey-background">
+  <SpacedGroup block className="margin-vertical-base">
+    <Button className="custom-light">
+      Custom light
+    </Button>
 
-HTML
-<button class="custom-name">
-  Custom
-</button>
+    <button className="custom-light hollow">
+      Custom light hollow
+    </button>
+  </SpacedGroup>
+</ContentBox>
 ```
 
 #### Less variables
@@ -106,7 +108,8 @@ HTML
 @button-border-width: 2px;
 @button-text-color-dark: @grey-dark;
 @button-text-color-light: @grey-lightest;
-@button-background-default: @grey-lighter;
+@button-background-default: @grey-medium;
+@button-background-hollow: transparent;
 
 @font-size-button: 1em;
 @line-height-button: 1.3em;