Merge pull request #115 from Tripwire/feature/button-style-update

feat(buttons): change styles to match UX preferences
Tripwire · Aug 25, 2017 · 09ae129 · 09ae129
2 parents 167e211 + aa0ca16
commit 09ae129
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 98 deletions.
diff --git a/semantic/src/themes/tripwire/elements/button.overrides b/semantic/src/themes/tripwire/elements/button.overrides
@@ -4,55 +4,60 @@
 
 
 .ui.button {
-  color: @grey;
-  border: 2px solid #A6A8AB;
+  color: @blue;
+  border: 2px solid @blue;
   background: @white;
-  border-radius: 0px;
+  border-radius: 2px;
 }
 
+.ui.buttons .button:first-child,
 .ui.button.primary {
   border: 2px solid @primaryColor;
 }
+
 .ui.button.primary:hover {
   border-color: @primaryColorHover;
 }
 
-.ui.button:active,
-.ui.active.button:active {
+.ui.button:focus {
   border-color: @blue;
-  color: @white;
-  background: @blue;
-}
-.ui.active.button {
-  border-color: @blue;
-  color: @white;
-  background: @blue;
+  color: @blue;
+  background: @white;
+  box-shadow: @focusedButtonShadow;
 }
 
-.ui.button:focus,
 .ui.button:hover {
-  border-color: @hoverBackgroundColor;
-  color: @white;
-}
-.ui.button:active {
   border-color: @blue;
-  color: @white;
+  color: @invertedTextColor;
   background: @blue;
 }
+
+.ui.button:active,
+.ui.active.button:active,
 .ui.active.button {
   border-color: @blue;
-  color: @white;
+  color: @invertedTextColor;
   background: @blue;
+  box-shadow: @focusedButtonShadow;
 }
+
 .ui.active.button:hover {
   border-color: @blue;
-  color: @white;
+  color: @invertedTextColor;
   background: @blue;
 }
 .ui.active.button:active {
   border-color: @blue;
-  color: @white;
+  color: @invertedTextColor;
   background: @blue;
+  box-shadow: @focusedButtonShadow;
+}
+
+.ui.disabled.button {
+  background-color: @white;
+  border-color: @genericDisabledBorder;
+  color: @disabledText;
+  opacity: 100 !important;
 }
 
 /*---------------
@@ -64,44 +69,53 @@
 .ui.positive.button {
   background-color: @blue;
   border-color: @blue;
-  color: @white;
+  color: @invertedTextColor;
   text-shadow: @positiveTextShadow;
   background-image: @coloredBackgroundImage;
 }
+
+.ui.buttons .ui.positive.button:first-child {
+  border-style: solid;
+  border-width: 2px;
+}
+
 .ui.positive.button {
   box-shadow: @coloredBoxShadow;
 }
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
-  background-color: @primaryColorHover;
-  border-color: @primaryColorHover;
-  color: @white;
-  text-shadow: @positiveTextShadow;
-}
 .ui.positive.buttons .button:focus,
 .ui.positive.button:focus {
-  background-color: @primaryColorHover;
-  border-color: @primaryColorHover;
-  color: @white;
+  background-color: @blue;
+  border-color: @blue;
+  color: @invertedTextColor;
   text-shadow: @positiveTextShadow;
+  box-shadow: @focusedButtonShadow;
 }
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover {
   background-color: @primaryColorHover;
   border-color: @primaryColorHover;
-  color: @white;
+  color: @invertedTextColor;
   text-shadow: @positiveTextShadow;
 }
+.ui.positive.buttons .button:active,
+.ui.positive.button:active,
 .ui.positive.buttons .active.button,
 .ui.positive.buttons .active.button:active,
 .ui.positive.active.button,
 .ui.positive.button .active.button:active {
   background-color: @primaryColorHover;
   border-color: @primaryColorHover;
-  color: @white;
+  color: @invertedTextColor;
   text-shadow: @positiveTextShadow;
+  box-shadow: @focusedButtonShadow;
 }
 
+.ui.positive.disabled.button {
+  background-color: @positiveDisabledBackground;
+  border-color: @positiveDisabledBackground;
+  color: @disabledText;
+  opacity: 100 !important;
+}
 
 /*---------------
      Negative
@@ -111,43 +125,52 @@
 .ui.negative.buttons .button,
 .ui.negative.button {
   background: @white;
-  color: @grey;
-  border: 2px solid #A6A8AB;
+  color: @negativeTextColor;
+  border: 2px solid @negativeBorder;
   text-shadow: @negativeTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.negative.button {
   box-shadow: @coloredBoxShadow;
 }
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
-  background: @secondaryColorHover;
-  color: @grey;
-  border: 2px solid @secondaryColorHover;
-  text-shadow: @negativeTextShadow;
+.ui.buttons .ui.negative.button:first-child {
+  border: 2px solid @negativeBorder;
 }
 .ui.negative.buttons .button:focus,
 .ui.negative.button:focus {
-  background: @secondaryColorHover;
-  color: @grey;
-  border: 2px solid @secondaryColorHover;
+  background: @white;
+  color: @negativeTextColor;
+  border: 2px solid @negativeBorder;
   text-shadow: @negativeTextShadow;
+  background-image: @coloredBackgroundImage;
+  box-shadow: @focusedButtonShadow;
 }
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background: @secondaryColorHover;
-  color: @grey;
-  border: 2px solid @secondaryColorHover;
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover,
+.ui.buttons .ui.negative.button:hover:first-child {
+  background: @negativeInverted;
+  color: @invertedTextColor;
+  border: 2px solid @negativeInverted;
   text-shadow: @negativeTextShadow;
 }
+.ui.negative.buttons .button:active,
+.ui.negative.button:active,
 .ui.negative.buttons .active.button,
 .ui.negative.buttons .active.button:active,
 .ui.negative.active.button,
 .ui.negative.button .active.button:active {
-  background: @secondaryColorHover;
-  color: @grey;
-  border: 2px solid @secondaryColorHover;
+  background: #999999;
+  color: @invertedTextColor;
+  border: 2px solid @negativeInverted;
   text-shadow: @negativeTextShadow;
+  box-shadow: @focusedButtonShadow;
+}
+
+.ui.negative.disabled.button {
+  background-color: @white;
+  border-color: @negativeDisabledBorder;
+  color: @disabledText;
+  opacity: 100 !important;
 }
 
 /*--------------

diff --git a/semantic/src/themes/tripwire/elements/button.variables b/semantic/src/themes/tripwire/elements/button.variables
@@ -131,6 +131,21 @@
   opacity @defaultDuration @defaultEasing
 ;
 
+/*
+note that this double box shadow is a pretty good copy of the webkit default:
+  outline: 5px auto @selectedSolidWhiteBorderColor 0;
+
+The alternative was
+outline-color:  @selectedSolidWhiteBorderColor;
+outline-offset: 1px;
+outline-style: solid;
+outline-width: 2px;
+
+which ends out being a hard edged box rather than the slightly blurred outline
+*/
+
+@focusedButtonShadow: 0 0 0 1px @white, 0 0 1px 4px #bfbebe;
+
 /*-------------------
         Types
 --------------------*/
@@ -315,6 +330,12 @@
 @lightGreyTextShadow: @textShadow;
 
 
+@disabledText: #ababab;
+@genericDisabledBorder: #cccccc;
+@negativeDisabledBorder: #cccccc;
+@negativeBorder: #bdc3c7;
+@negativeInverted: #999999;
+
 /* Ordinality */
 @primaryBackgroundImage: @coloredBackgroundImage;
 @primaryTextColor: @invertedTextColor;
@@ -330,10 +351,10 @@
 @positiveTextColor: @invertedTextColor;
 @positiveTextShadow: @invertedTextShadow;
 @positiveBoxShadow: @coloredBoxShadow;
-
+@positiveDisabledBackground: #ebebeb;
 
 @negativeBackgroundImage: @coloredBackgroundImage;
-@negativeTextColor: @invertedTextColor;
+@negativeTextColor: #454545;
 @negativeTextShadow: @invertedTextShadow;
 @negativeBoxShadow: @coloredBoxShadow;
 

diff --git a/semantic/src/themes/tripwire/elements/input.variables b/semantic/src/themes/tripwire/elements/input.variables
@@ -81,7 +81,7 @@
 
 /* Error */
 @errorBackground: @negativeBackgroundColor;
-@errorColor: @negativeTextColor;
+@errorColor: @invertedTextColor;
 @errorBorder: @negativeBorderColor;
 @errorBoxShadow: none;