Release 12.4.0

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 12.4.0
+
+### :rocket: Enhancement
+- More responsive border utilities [#775](https://github.com/primer/css/pull/775)
+- Add `overflow: visible` utilities [#798](https://github.com/primer/css/pull/798)
+- Add `yellow` color utilities that will replace `pending` [#737](https://github.com/primer/css/pull/737)
+
+### :bug: Bug Fix
+- Fix Ruby Sass compiler warnings by quoting keys in `$hue-maps` declaration [#794](https://github.com/primer/css/pull/794)
+
+### :house: Internal
+- Remove `test-all-modules` scripts and old monorepo test scripts [#795](https://github.com/primer/css/pull/795)
+- Resolve all but one ([#796](https://github.com/primer/css/pull/796)) vulnerability in npm dev dependencies [#797](https://github.com/primer/css/pull/797)
+
+### Committers
+- [@broccolini](https://github.com/broccolini)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+
 # 12.3.1
 
 ### 🐛 Bug Fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.3.1",
+  "version": "12.4.0",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -39,7 +39,6 @@
     "start-storybook": "start-storybook -p 8001",
     "build-storybook": "build-storybook -o .storybuild",
     "test": "npm-run-all -s test-urls test-migrate",
-    "test-all-modules": "ava --verbose tests/test-*.js",
     "test-urls": "node docs-test/urls.js",
     "test-migrate": "script/test-migrate"
   },
@@ -50,21 +49,18 @@
     "@primer/blueprints": "4.0.1",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
-    "@storybook/addon-viewport": "5.0.0",
-    "@storybook/react": "5.0.10",
+    "@storybook/addon-viewport": "5.0.11",
+    "@storybook/react": "5.0.11",
     "@svgr/webpack": "2.4.1",
-    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-css": "1.0.1",
     "@zeit/next-sass": "^1.0.1",
     "action-status": "0.1.1",
     "autoprefixer": "9.4.7",
-    "ava": "^0.23.0",
-    "broken-link-checker": "^0.7.8",
-    "char-spinner": "^1.0.1",
     "chroma-js": "^1.4.1",
     "clipboard-copy-element": "^0.5.0",
     "code-blocks": "^1.1.0",
     "colorette": "^1.0.7",
-    "css-loader": "^0.28.4",
+    "css-loader": "1.0.0",
     "cssstats": "3.3.0",
     "details-dialog-element": "^1.4.0",
     "eslint": "4.19.1",
@@ -83,10 +79,6 @@
     "klaw": "3.0.0",
     "loader-utils": "^1.1.0",
     "mdx-constant": "^0.1.0",
-    "metalsmith": "^2.3.0",
-    "metalsmith-filter": "^1.0.2",
-    "metalsmith-matters": "^1.2.0",
-    "metalsmith-watch": "^1.0.3",
     "minimist": "1.2.0",
     "next": "7.0.2",
     "node-fetch": "2.4.0",

pages/css/utilities/borders.md

@@ -21,7 +21,7 @@ The default border utility applies a solid, 1px border, with a default gray colo
 </div>
 ```
 
-Borders can be applied to a specific edge or to the Y axis.
+Borders can be applied to a specific edge or to the X and Y axes individually:
 
 ```html
 <div class="d-flex mb-3">
@@ -38,6 +38,9 @@ Borders can be applied to a specific edge or to the Y axis.
     .border-right
   </div>
 </div>
+<div class="border-x">
+  .border-x
+</div>
 <div class="border-y">
   .border-y
 </div>
@@ -198,10 +201,18 @@ You can also add rounded corners to each edge (top, right, bottom, left) with th
 
 ## Responsive borders
 
-Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
+You can adjust border widths on all sides or each side individually with responsive border utilities:
+
+* `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
+* `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
+* `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
+* `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
 
 ```html
-<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
-  .border-top-0
+ <div class="border-top border-sm-right border-md-bottom border-md-top-0">
+  .border-top
+  <span class="d-none d-sm-inline">.border-sm-right </span>
+  <span class="d-none d-md-inline">.border-md-bottom </span>
+  <span class="d-none d-lg-inline">.border-md-top-0 </span>
 </div>
 ```

pages/css/utilities/colors.md

@@ -75,9 +75,16 @@ Background colors are most commonly used for filling large blocks of content or
   </div>
   <div class="col-9 float-left">
     <div class="container-lg clearfix">
-      <div class="h4">.bg-yellow-light</div>
-      <code>{colors.yellow[2]}, $bg-yellow-light</code>
-      <Swatch className="bg-yellow-light" />
+      <div class="col-6 float-left">
+        <div class="h4">.bg-yellow-dark</div>
+        <code>{colors.yellow[7]}, $bg-yellow-dark</code>
+        <Swatch className="bg-yellow-dark border-right-0" />
+      </div>
+      <div class="col-6 float-left">
+        <div class="h4">.bg-yellow-light</div>
+        <code>{colors.yellow[2]}, $bg-yellow-light</code>
+        <Swatch className="bg-yellow-light" />
+      </div>
     </div>
   </div>
 </div>
@@ -173,6 +180,10 @@ You can set the color inheritance on an element by using the `text-inherit` clas
   .text-orange-light on white
 </div>
 <span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
+<div class="text-yellow mb-2">
+  .text-yellow on white
+</div>
+<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
 <div class="text-green mb-2 ml-4">
   .text-green on white
 </div>
@@ -199,6 +210,9 @@ You can set the color inheritance on an element by using the `text-inherit` clas
 <div class="bg-green-light mb-2">
   .text-gray-dark on .bg-green-light
 </div>
+<div class="bg-yellow-dark mb-2">
+  .text-gray-dark on .bg-yellow-dark
+</div>
 <div class="bg-yellow mb-2">
   .text-gray-dark on .bg-yellow
 </div>

pages/css/utilities/layout.md

@@ -105,16 +105,18 @@ Hide utilities are able to be applied or changed per breakpoint using the follow
 Adjust the visibility of an element with `.v-hidden` and `.v-visible`.
 
 ## Overflow
-Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
+Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`, or use `.overflow-visible` to undo the effects of CSS with overflow issues. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
 
 Overflow utilities can also target x- and y-axes independently via:
 
 * `.overflow-x-auto`
 * `.overflow-x-hidden`
 * `.overflow-x-scroll`
+* `.overflow-x-visible`
 * `.overflow-y-auto`
 * `.overflow-y-hidden`
 * `.overflow-y-scroll`
+* `.overflow-y-visible`
 
 ## Floats
 Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.

src/support/variables/color-system.scss

@@ -232,12 +232,12 @@ $pinks: (
 ) !default;
 
 $hue-maps: (
-  gray: $grays,
-  blue: $blues,
-  green: $greens,
-  yellow: $yellows,
-  orange: $oranges,
-  red: $reds,
-  purple: $purples,
-  pink: $pinks,
+  "gray": $grays,
+  "blue": $blues,
+  "green": $greens,
+  "yellow": $yellows,
+  "orange": $oranges,
+  "red": $reds,
+  "purple": $purples,
+  "pink": $pinks,
 ) !default;

src/support/variables/colors.scss

@@ -29,8 +29,6 @@ $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;
@@ -55,6 +53,7 @@ $bg-red-light:      $red-100 !default;
 $bg-white:          $white !default;
 $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
+$bg-yellow-dark:    $yellow-700 !default;
 
 // Text colors
 $text-blue:         $blue-500 !default;
@@ -68,3 +67,4 @@ $text-purple:       $purple !default;
 $text-pink:         $pink-500 !default;
 $text-red:          $red-600 !default;
 $text-white:        $white !default;
+$text-yellow:       $yellow-800 !default;