Merge branch 'main' into jest_tests

.changeset/hip-bulldogs-judge.md

@@ -1,5 +0,0 @@
----
-"@primer/css": patch
----
-
-Add bg to UnderlineNav Counter

.github/workflows/bundle_report.yml

@@ -2,7 +2,7 @@ name: Bundle report
 on:
   push:
     paths:
-      - 'src'
+      - 'src/**'
 jobs:
   bundle:
     runs-on: ubuntu-latest

.github/workflows/release_canary.yml

@@ -15,7 +15,6 @@ on:
       - 'lib/**'
       - '__tests__/**'
       - 'script/**'
-      - 'static/**'
       - 'next.config.js'
       - 'now.json'
 

.npmignore

@@ -13,4 +13,3 @@ pages/
 script/
 # we ignore this because everything in src/ is copied out in script/prepublish
 src/
-static/

CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/css
 
+## 16.1.2
+
+### Patch Changes
+
+- [#1282](https://github.com/primer/css/pull/1282) [`5ee52dfe`](https://github.com/primer/css/commit/5ee52dfe59f1b209ca6c1f2489db0e32660388e9) Thanks [@simurai](https://github.com/simurai)! - Add bg to UnderlineNav Counter
+
+* [#1286](https://github.com/primer/css/pull/1286) [`9044eecf`](https://github.com/primer/css/commit/9044eecf4ef7a1c6ad9ccf0b51def53c52d0def4) Thanks [@jonrohan](https://github.com/jonrohan)! - color-mode mixin fix for keyboard toggle
+
 ## 16.1.1
 
 ### Patch Changes

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="./static/readme.png">
+  <img width="300px" src="./docs/src/readme.png">
 </p>
 
 <h1 align="center">Primer CSS</h1>

docs/gatsby-config.js

@@ -23,13 +23,6 @@ module.exports = {
         svgo: false
       }
     },
-    {
-      resolve: 'gatsby-plugin-google-analytics',
-      options: {
-        trackingId: 'UA-126681523-2',
-        anonymize: true
-      }
-    },
     {
       resolve: `gatsby-plugin-alias-imports`,
       options: {

docs/package.json

@@ -22,7 +22,6 @@
     "core-js": "^3.6.5",
     "gatsby": "^2.24.62",
     "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-google-analytics": "^2.3.14",
     "gatsby-plugin-sass": "^2.3.13",
     "gatsby-plugin-svgr": "^2.0.2",
     "postcss-loader": "^3.0.0",

docs/yarn.lock

@@ -6935,14 +6935,6 @@ gatsby-plugin-catch-links@^2.1.2:
     "@babel/runtime" "^7.12.5"
     escape-string-regexp "^1.0.5"
 
-gatsby-plugin-google-analytics@^2.3.14:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.11.0.tgz#8d74bd3c100706f03bbccf7b130a758fce9994ad"
-  integrity sha512-aVFmzoozd0ifn5HJJY0W8R7DHkyTEvj/ueRyJJNlQMadQagIAYq+7efKon4gJzd4NZkLcoDb6moiAR066FwIIg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    minimatch "3.0.4"
-
 gatsby-plugin-manifest@^2.2.1:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.12.1.tgz#d92f23d2d17d3c69445ef7b7842e5441e8dd785e"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "16.1.1",
+  "version": "16.1.2",
   "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.",

script/update-assets

@@ -1,12 +0,0 @@
-#!/bin/sh
-set -e
-
-asset_path=./static
-
-bundles="styleguide.js styleguide.css"
-
-echo "Grabbing the latest assets from github.com..."
-for bundle in $bundles; do
-    echo "Downloading $bundle -> $asset_path/github/$bundle ..."
-    curl -fsSLo "$asset_path/github/$bundle" "https://github.com/site/assets/$bundle"
-done

src/support/mixins/color-modes.scss

@@ -29,12 +29,14 @@
 @mixin color-mode($mode) {
   @if $mode == light {
     :root,
-    [data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
       @content;
     }
   }
   @else {
-    [data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
       @content;
     }
   }
@@ -53,7 +55,7 @@
 }
 
 // This mixin takes a map of color mode vars and splits them into dark and light mode
-// The goal is to reduce the amount of dark/light mode selectors compiled
+// The goal is to reduce the amount of dark/light mode selectors compiled.
 //
 // Example input for $color-map
 //

static/analytics.js

@@ -1,4 +0,0 @@
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'UA-126681523-2');