update primer-support to v4.0.0

Author: broccolini

packages/primer-support/lib/mixins/buttons.scss

@@ -70,7 +70,7 @@
       box-shadow: none;
     }
 
-    .counter {
+    .Counter {
       color: darken($bg, 8%);
       background-color: $white;
     }
@@ -93,7 +93,7 @@
     background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
     border-color: $black-fade-50;
 
-    .counter {
+    .Counter {
       color: $text-white;
     }
   }
@@ -123,7 +123,7 @@
   background-color: $bg-color;
   background-image: none;
 
-  .counter {
+  .Counter {
     background-color: rgba(0, 0, 0, 0.07);
   }
 
@@ -135,7 +135,7 @@
     background-image: none;
     border-color: $text-color;
 
-    .counter {
+    .Counter {
       color: $text-color;
       background-color: $bg-color;
     }

packages/primer-support/lib/mixins/typography.scss

@@ -40,37 +40,45 @@
 }
 
 // Responsive heading mixins
-// There are no responsive mixins for h5 and h6 because they are small
+// There are no responsive mixins for h4—h6 because they are small
 // and don't need to be smaller on mobile.
-@mixin h1-reponsive {
-  font-size: 26px;
-  font-weight: $font-weight-bold;
+@mixin f1-responsive {
+  font-size: $h1-size-mobile;
 
-  // Up to 32px in future
-  @include breakpoint(md) { font-size: 30px; }
+  // 32px on desktop
+  @include breakpoint(md) { font-size: $h1-size; }
 
 }
 
-@mixin h2-responsive {
-  font-size: 20px;
-  font-weight: $font-weight-bold;
+@mixin f2-responsive {
+  font-size: $h2-size-mobile;
 
-  // Up to 22px or 24px in future
-  @include breakpoint(md) { font-size: 21px; }
+  // 24px on desktop
+  @include breakpoint(md) { font-size: $h2-size; }
 }
 
-@mixin h3-responsive {
-  font-size: 14px;
-  font-weight: $font-weight-bold;
+@mixin f3-responsive {
+  font-size: $h3-size-mobile;
 
-  @include breakpoint(md) { font-size: 16px; }
+  // 20px on desktop
+  @include breakpoint(md) { font-size: $h3-size; }
 
 }
 
-@mixin h4-responsive {
-  font-size: 13px;
+// These use the mixins from above for responsive heading sizes.
+// The following mixins can be used where it's convenient or necessary to
+// couple the responsive font-size with the font-weight.
+@mixin h1-responsive {
+  @include f1-responsive;
   font-weight: $font-weight-bold;
+}
 
-  @include breakpoint(md) { font-size: 14px; }
+@mixin h2-responsive {
+  @include f2-responsive;
+  font-weight: $font-weight-bold;
+}
 
+@mixin h3-responsive {
+  @include f3-responsive;
+  font-weight: $font-weight-bold;
 }

packages/primer-support/lib/variables/colors.scss

@@ -3,7 +3,6 @@
 // stylelint-disable declaration-bang-space-before
 
 // State indicators.
-$status-renamed:    $yellow-500 !default;
 $status-pending:    desaturate($yellow-700, 15%) !default;
 
 // Repository type colors
@@ -24,9 +23,13 @@ $border-blue-light:  $blue-200 !default;
 $border-green:       $green-400 !default;
 $border-green-light: desaturate($green-300, 40%) !default;
 
+$border-purple:      $purple !default;
+
 $border-red:         $red !default;
 $border-red-light:   desaturate($red-300, 60%) !default;
 
+$border-purple:      $purple !default;
+
 $border-yellow:      desaturate($yellow-300, 60%) !default;
 
 $border-gray-dark:   $gray-300 !default;

packages/primer-support/lib/variables/layout.scss

@@ -6,7 +6,7 @@
 //    0 => 0px
 //    1 => 4px
 //    2 => 8px
-//    3 => 12px
+//    3 => 16px
 //    4 => 24px
 //    5 => 32px
 //    6 => 40px

packages/primer-support/lib/variables/misc.scss

@@ -15,7 +15,7 @@ $exploregrid-item-border-radius: 4px;
 $box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
 $box-shadow-medium: 0 1px 5px rgba(0, 0, 0, 0.15) !default;
 $box-shadow-large: 0 1px 15px rgba(0, 0, 0, 0.15) !default;
-$box-shadow-extra-large: 0 10px 50px rgba(0, 0, 0, 0.05) !default;
+$box-shadow-extra-large: 0 10px 50px rgba(0, 0, 0, 0.07) !default;
 
 // Tooltips
 $tooltip-max-width: 250px !default;

packages/primer-support/lib/variables/typography.scss

@@ -1,7 +1,15 @@
 // Typography variables
 // stylelint-disable declaration-bang-space-before
 
-// Heading sizes
+// Heading sizes - mobile
+// h4—h6 remain the same size on both mobile & desktop
+$h00-size-mobile: 40px !default;
+$h0-size-mobile: 32px !default;
+$h1-size-mobile: 26px !default;
+$h2-size-mobile: 22px !default;
+$h3-size-mobile: 18px !default;
+
+// Heading sizes - desktop
 $h00-size: 48px !default;
 $h0-size: 40px !default;
 $h1-size: 32px !default;

packages/primer-support/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.2",
+  "version": "4.0.0",
   "name": "primer-support",
   "description": "Sass variables, mixins, and functions for use in our components.",
   "homepage": "http://primercss.io/",