Add dark theme to the buttons (#3807)

* Add dark theme to default button component * Add dark theme to base button * Dark themes for positive and negative buttons * Add dark theme to the brand button * Make base buttons transparent again * Bump file size threshold * Document button dark theme * Update button colors
canonical · Jul 1, 2021 · 47d6001 · 47d6001
1 parent 78005a9
commit 47d6001
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 39 deletions.
diff --git a/scss/_base_button.scss b/scss/_base_button.scss
@@ -93,8 +93,8 @@
 }
 
 @mixin vf-button-pattern(
-  $button-background-color: $color-x-light,
-  $button-text-color: $color-dark,
+  $button-background-color: $colors--light-theme--background-default,
+  $button-text-color: $colors--light-theme--text-default,
   $button-disabled-background-color: $color-transparent,
   $button-disabled-border-color: $colors--light-theme--border-high-contrast,
   $button-border-color: $colors--light-theme--border-high-contrast,

diff --git a/scss/_patterns_buttons.scss b/scss/_patterns_buttons.scss
@@ -24,14 +24,41 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 }
 
 @mixin vf-button-plain {
-  %p-button {
-    @extend %vf-button-base;
+  %p-button-light {
+    @include vf-button-pattern();
+  }
 
-    @include vf-button-pattern($button-disabled-background-color: transparent, $button-disabled-border-color: transparent);
+  %p-button-dark {
+    @include vf-button-pattern(
+      $button-background-color: $colors--dark-theme--background-default,
+      $button-text-color: $colors--dark-theme--text-default,
+      $button-disabled-background-color: $color-transparent,
+      $button-disabled-border-color: $colors--dark-theme--border-high-contrast,
+      $button-border-color: $colors--dark-theme--border-high-contrast,
+      $button-hover-background-color: $colors--dark-theme--background-hover,
+      $button-hover-border-color: $colors--dark-theme--border-high-contrast,
+      $button-active-background-color: $colors--dark-theme--background-active,
+      $button-active-border-color: $colors--dark-theme--border-high-contrast
+    );
   }
 
   .p-button {
-    @extend %p-button;
+    @extend %vf-button-base;
+
+    // Theming
+    @if ($theme-default-p-button == 'dark') {
+      @extend %p-button-dark;
+
+      &.is-light {
+        @extend %p-button-light;
+      }
+    } @else {
+      @extend %p-button-light;
+
+      &.is-dark {
+        @extend %p-button-dark;
+      }
+    }
   }
 }
 
@@ -51,9 +78,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 }
 
 @mixin vf-button-brand {
-  %p-button--brand {
-    @extend %vf-button-base;
-
+  %p-button--brand-light {
     @include vf-button-pattern(
       $button-background-color: $color-brand,
       $button-hover-background-color: adjust-color($color-brand, $lightness: -$hover-background-opacity-percentage),
@@ -67,16 +92,44 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
     );
   }
 
+  %p-button--brand-dark {
+    @include vf-button-pattern(
+      $button-background-color: $color-brand-dark,
+      $button-hover-background-color: adjust-color($color-brand-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-background-color: adjust-color($color-brand-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-background-color: $color-brand-dark,
+      $button-border-color: $color-brand-dark,
+      $button-hover-border-color: adjust-color($color-brand-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-border-color: adjust-color($color-brand-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-border-color: $color-brand-dark,
+      $button-text-color: vf-contrast-text-color($color-brand-dark)
+    );
+  }
+
   .p-button--brand {
-    @extend %p-button--brand;
+    @extend %vf-button-base;
+
+    // Theming
+    @if ($theme-default-p-button == 'dark') {
+      @extend %p-button--brand-dark;
+
+      &.is-light {
+        @extend %p-button--brand-light;
+      }
+    } @else {
+      @extend %p-button--brand-light;
+
+      &.is-dark {
+        @extend %p-button--brand-dark;
+      }
+    }
+
     @extend %vf-button-white-success-icon;
   }
 }
 
 @mixin vf-button-positive {
-  %p-button--positive {
-    @extend %vf-button-base;
-
+  %p-button--positive-light {
     @include vf-button-pattern(
       $button-background-color: $color-positive,
       $button-hover-background-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
@@ -92,16 +145,46 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
     @include vf-focus($color-focus-positive);
   }
 
+  %p-button--positive-dark {
+    @include vf-button-pattern(
+      $button-background-color: $color-positive-dark,
+      $button-hover-background-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-background-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-background-color: $color-positive-dark,
+      $button-border-color: $color-positive-dark,
+      $button-hover-border-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-border-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-border-color: $color-positive-dark,
+      $button-text-color: vf-contrast-text-color($color-positive-dark)
+    );
+
+    @include vf-focus($color-focus-positive);
+  }
+
   .p-button--positive {
-    @extend %p-button--positive;
+    @extend %vf-button-base;
+
+    // Theming
+    @if ($theme-default-p-button == 'dark') {
+      @extend %p-button--positive-dark;
+
+      &.is-light {
+        @extend %p-button--positive-light;
+      }
+    } @else {
+      @extend %p-button--positive-light;
+
+      &.is-dark {
+        @extend %p-button--positive-dark;
+      }
+    }
+
     @extend %vf-button-white-success-icon;
   }
 }
 
 @mixin vf-button-negative {
-  %p-button--negative {
-    @extend %vf-button-base;
-
+  %p-button--negative-light {
     @include vf-button-pattern(
       $button-background-color: $color-negative,
       $button-hover-background-color: adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage),
@@ -117,17 +200,62 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
     @include vf-focus($color-focus-negative);
   }
 
+  %p-button--negative-dark {
+    @include vf-button-pattern(
+      $button-background-color: $color-negative-dark,
+      $button-hover-background-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-background-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-background-color: $color-negative-dark,
+      $button-border-color: $color-negative-dark,
+      $button-hover-border-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
+      $button-active-border-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
+      $button-disabled-border-color: $color-negative-dark,
+      $button-text-color: vf-contrast-text-color($color-negative-dark)
+    );
+
+    @include vf-focus($color-focus-negative);
+  }
+
   .p-button--negative {
-    @extend %p-button--negative;
+    @extend %vf-button-base;
+
+    // Theming
+    @if ($theme-default-p-button == 'dark') {
+      @extend %p-button--negative-dark;
+
+      &.is-light {
+        @extend %p-button--negative-light;
+      }
+    } @else {
+      @extend %p-button--negative-light;
+
+      &.is-dark {
+        @extend %p-button--negative-dark;
+      }
+    }
+
     @extend %vf-button-white-success-icon;
   }
 }
 
 @mixin vf-button-base {
-  %p-button--base {
-    @extend %vf-button-base;
+  %p-button--base-light {
+    @include vf-button-pattern(
+      $button-background-color: $color-transparent,
+      $button-border-color: $color-transparent,
+      $button-hover-border-color: $color-transparent,
+      $button-active-border-color: $color-transparent,
+      $button-disabled-border-color: $color-transparent
+    );
+  }
 
+  %p-button--base-dark {
     @include vf-button-pattern(
+      $button-background-color: $color-transparent,
+      $button-text-color: $colors--dark-theme--text-default,
+      $button-disabled-background-color: $color-transparent,
+      $button-hover-background-color: $colors--dark-theme--background-hover,
+      $button-active-background-color: $colors--dark-theme--background-active,
       $button-border-color: $color-transparent,
       $button-hover-border-color: $color-transparent,
       $button-active-border-color: $color-transparent,
@@ -136,7 +264,22 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 
   .p-button--base {
-    @extend %p-button--base;
+    @extend %vf-button-base;
+
+    // Theming
+    @if ($theme-default-p-button == 'dark') {
+      @extend %p-button--base-dark;
+
+      &.is-light {
+        @extend %p-button--base-light;
+      }
+    } @else {
+      @extend %p-button--base-light;
+
+      &.is-dark {
+        @extend %p-button--base-dark;
+      }
+    }
   }
 }
 

diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss
@@ -18,6 +18,10 @@ $color-caution: #f99b11 !default;
 $color-positive: #0e8420 !default;
 $color-information: #24598f !default;
 
+// for dark themes
+$color-negative-dark: #a11223 !default;
+$color-positive-dark: #008013 !default;
+
 // STATE VARIABLES
 $disabled-element-opacity: 0.33;
 
@@ -108,6 +112,7 @@ $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default
 
 // Branding colors
 $color-brand: #333 !default;
+$color-brand-dark: $color-brand !default;
 $color-brand-background: $colors--dark-theme--background-default;
 $color-accent: #e95420 !default;
 $color-accent-background: $color-brand !default;
diff --git a/scss/_settings_themes.scss b/scss/_settings_themes.scss
@@ -6,3 +6,4 @@ $theme-default-p-search-box: 'light' !default;
 $theme-default-p-divider: 'light' !default;
 $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;
+$theme-default-p-button: 'light' !default;
diff --git a/templates/docs/component-status.md b/templates/docs/component-status.md
@@ -29,7 +29,13 @@ When we add, make significant updates, or deprecate a component we update their
       <td>2.32.0</td>
       <td>We've added a default label <code>p-label</code></td>
     </tr>
-     <tr>
+    <tr>
+      <th><a href="/docs/patterns/buttons#theming">Button / Dark</a></th>
+      <td><div class="p-label--new">New</div></td>
+      <td>2.32.0</td>
+      <td>We added the dark theme to the buttons.</td>
+    </tr>
+    <tr>
       <th><a href="/docs/patterns/buttons#neutral">Button / Neutral</a></th>
       <td><div class="p-label--deprecated">Deprecated</div></td>
       <td>2.32.0</td>

diff --git a/templates/docs/examples/patterns/buttons/dark.html b/templates/docs/examples/patterns/buttons/dark.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Dark{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+<div class="p-strip--dark is-shallow" style="background: #111">
+    <button class="p-button is-dark">Default button</button>
+    <button class="p-button--base is-dark">Base button</button>
+    <button class="p-button--positive is-dark">Positive button</button>
+    <button class="p-button--negative is-dark">Negative button</button>
+    <button class="p-button--brand is-dark">Brand button</button>
+</div>
+{% endblock %}
diff --git a/templates/docs/examples/templates/external-links.html b/templates/docs/examples/templates/external-links.html
@@ -34,11 +34,11 @@ <h4>
     <div class="col-12">
       <p><a href="#">Link</a></p>
       <p><a class="p-link--external">External link</a></p>
-      <a class="p-button"><span class="p-link--external">External button</span></a>
-      <a class="p-button--positive"><span class="p-link--external">External positive button</span></a>
-      <a class="p-button--negative"><span class="p-link--external">External negative button</span></a>
-      <a class="p-button--neutral"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
-      <a class="p-button--base"><span class="p-link--external">External base button</span></a>
+      <a class="p-button is-dark"><span class="p-link--external">External button</span></a>
+      <a class="p-button--positive is-dark"><span class="p-link--external">External positive button</span></a>
+      <a class="p-button--negative is-dark"><span class="p-link--external">External negative button</span></a>
+      <a class="p-button--neutral is-dark"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
+      <a class="p-button--base is-dark"><span class="p-link--external">External base button</span></a>
     </div>
   </div>
 </section>
@@ -60,11 +60,11 @@ <h4>
     <div class="col-12">
       <p><a href="#">Link</a></p>
       <p><a class="p-link--external">External link</a></p>
-      <a class="p-button"><span class="p-link--external">External button</span></a>
-      <a class="p-button--positive"><span class="p-link--external">External positive button</span></a>
-      <a class="p-button--negative"><span class="p-link--external">External negative button</span></a>
-      <a class="p-button--neutral"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
-      <a class="p-button--base"><span class="p-link--external">External base button</span></a>
+      <a class="p-button is-dark"><span class="p-link--external">External button</span></a>
+      <a class="p-button--positive is-dark"><span class="p-link--external">External positive button</span></a>
+      <a class="p-button--negative is-dark"><span class="p-link--external">External negative button</span></a>
+      <a class="p-button--neutral is-dark"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
+      <a class="p-button--base is-dark"><span class="p-link--external">External base button</span></a>
     </div>
   </div>
 </section>
@@ -86,11 +86,11 @@ <h4>
     <div class="col-12">
       <p><a href="#">Link</a></p>
       <p><a class="p-link--external">External link</a></p>
-      <a class="p-button"><span class="p-link--external">External button</span></a>
-      <a class="p-button--positive"><span class="p-link--external">External positive button</span></a>
-      <a class="p-button--negative"><span class="p-link--external">External negative button</span></a>
-      <a class="p-button--neutral"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
-      <a class="p-button--base"><span class="p-link--external">External base button</span></a>
+      <a class="p-button is-dark"><span class="p-link--external">External button</span></a>
+      <a class="p-button--positive is-dark"><span class="p-link--external">External positive button</span></a>
+      <a class="p-button--negative is-dark"><span class="p-link--external">External negative button</span></a>
+      <a class="p-button--neutral is-dark"><span class="p-link--external">External neutral button</span></a><!-- deprecated, but we keep it here for reference until 3.0 -->
+      <a class="p-button--base is-dark"><span class="p-link--external">External base button</span></a>
     </div>
   </div>
 </section>

diff --git a/templates/docs/patterns/buttons.md b/templates/docs/patterns/buttons.md
@@ -118,6 +118,17 @@ View example of the processing button pattern
 
 The `is-active` utility class was renamed to the more appropriate `is-processing`, as mentioned above.
 
+### Theming
+
+The buttons use Vanilla's light theme by default. There are two ways to switch between the light and the dark themes:
+
+- Override the default by adding a state to `p-putton`: `is-dark` when the default navigation is light, or `is-light` when the default has been changed to dark:
+- Change the default: go to `_settings_themes.scss` and set `$theme-default-p-button` to `dark`
+
+<div class="embedded-example"><a href="/docs/examples/patterns/buttons/dark" class="js-example">
+View example of the buttons with an is-dark class
+</a></div>
+
 ### Accessibility
 
 In some contexts, it may be necessary to indicate to the user that a button is in a pressed state, such as when a button opens a contextual menu. This can be done by adding `aria-pressed="true"` to the button with JavaScript when the button is clicked, and removed when necessary.

diff --git a/tests/parker.js b/tests/parker.js
@@ -12,7 +12,7 @@ function generateMetrics(file, metricsArray) {
     {
       name: 'Stylesheet size',
       benchmark: 150000,
-      threshold: 290000,
+      threshold: 300000,
       result: results['total-stylesheet-size'],
     },
     {
@@ -37,7 +37,7 @@ function generateMetrics(file, metricsArray) {
     {
       name: 'Identifiers per selectors',
       benchmark: 1.75,
-      threshold: 2.6,
+      threshold: 2.7,
       result: results['identifiers-per-selector'],
     },
     {