@primer/css 0.0.0-202198224040 → 0.0.0-20220107003222

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-202198224040",
+  "version": "0.0.0-20220107003222",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "dist": "script/dist.js",
-    "stylelint": "stylelint --quiet src/**/*.scss",
+    "stylelint": "stylelint --quiet 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
     "start": "yarn dev",
@@ -35,37 +35,36 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^5.0.0"
+    "@primer/primitives": "^7.4.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.1",
-    "@changesets/cli": "2.17.0",
+    "@changesets/changelog-github": "0.4.2",
+    "@changesets/cli": "2.19.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/stylelint-config": "12.0.1",
-    "autoprefixer": "10.3.6",
+    "@primer/stylelint-config": "12.2.0",
+    "autoprefixer": "10.4.1",
     "cssstats": "4.0.2",
-    "eslint": "7.32.0",
-    "eslint-plugin-github": "4.3.0",
-    "eslint-plugin-jest": "24.5.2",
+    "eslint": "8.6.0",
+    "eslint-plugin-github": "4.3.5",
+    "eslint-plugin-jest": "25.3.3",
     "eslint-plugin-prettier": "4.0.0",
-    "filesize": "8.0.3",
+    "filesize": "8.0.6",
     "front-matter": "4.0.2",
     "fs-extra": "10.0.0",
     "globby": "12.0.2",
-    "jest": "27.2.4",
+    "jest": "27.4.5",
     "js-yaml": "4.1.0",
-    "postcss": "8.3.8",
+    "postcss": "8.4.5",
     "postcss-calc": "8.0.0",
     "postcss-import": "14.0.2",
     "postcss-load-config": "3.1.0",
-    "postcss-scss": "4.0.1",
+    "postcss-scss": "4.0.2",
     "postcss-simple-vars": "6.0.3",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "semver": "7.3.5",
-    "stylelint": "13.13.1",
-    "stylelint-scss": "3.21.0",
-    "table": "6.7.2"
+    "stylelint": "14.2.0",
+    "table": "6.7.5"
   },
   "jest": {
     "testEnvironment": "node",

package/pagination/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./pagination.scss";
+@import '../support/index.scss';
+@import './pagination.scss';

package/pagination/pagination.scss

@@ -42,7 +42,7 @@
 
   .current,
   .current:hover,
-  [aria-current]:not([aria-current=false]) {
+  [aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: transparent;
@@ -50,11 +50,11 @@
 
   .gap,
   .disabled,
-  [aria-disabled=true],
+  [aria-disabled='true'],
   .gap:hover,
   .disabled:hover,
-  [aria-disabled=true]:hover {
-    color: var(--color-fg-muted);
+  [aria-disabled='true']:hover {
+    color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;
   }
@@ -67,7 +67,7 @@
       width: 16px;
       height: 16px;
       vertical-align: text-bottom;
-      content: "";
+      content: '';
       // stylelint-disable-next-line primer/colors
       background-color: currentColor;
     }

package/popover/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./popover.scss";
+@import '../support/index.scss';
+@import './popover.scss';

package/popover/popover.scss

@@ -8,6 +8,9 @@
   width: 232px;
   margin-right: auto;
   margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
 
   // Carets
   &::before,
@@ -15,7 +18,7 @@
     position: absolute;
     left: 50%;
     display: inline-block;
-    content: "";
+    content: '';
   }
 
   &::before {
@@ -34,10 +37,13 @@
     border: 7px $border-style transparent;
     border-bottom-color: var(--color-canvas-overlay);
   }
+}
 
-  // TODO: Refactor so that .Popover is not dependant on .Box
-  &.Box {
-    background-color: var(--color-canvas-overlay);
+// No caret
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
   }
 }
 
@@ -182,8 +188,40 @@
 }
 
 .Popover-message--large {
-
   @include breakpoint(sm) {
     min-width: 320px;
   }
 }
+
+// Responsive Popover
+// For < md it will show full-width anchored to the bottom
+
+@media (max-width: ($width-md - 0.02px)) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: $spacer-2;
+  }
+
+  // Increase tap area for touch input
+  .Popover-message > .btn-octicon {
+    padding: $spacer-2 + $spacer-1 !important;
+  }
+
+  // Remove caret
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

package/postcss.config.cjs

@@ -9,7 +9,7 @@ module.exports = {
     sourcesContent: false,
     annotation: true
   },
-  syntax: scss,
+  customSyntax: scss,
   parser: scss,
   plugins: [
     scssImport,

package/product/index.scss

@@ -6,22 +6,22 @@
  */
 
 // Global requirements
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Product specific css modules
-@import "../alerts/index.scss";
-@import "../autocomplete/index.scss";
-@import "../avatars/index.scss";
-@import "../blankslate/index.scss";
-@import "../branch-name/index.scss";
-@import "../dropdown/index.scss";
-@import "../header/index.scss";
-@import "../labels/index.scss";
-@import "../loaders/index.scss";
-@import "../markdown/index.scss";
-@import "../popover/index.scss";
-@import "../progress/index.scss";
-@import "../select-menu/index.scss";
-@import "../subhead/index.scss";
-@import "../timeline/index.scss";
-@import "../toasts/index.scss"
+@import '../alerts/index.scss';
+@import '../autocomplete/index.scss';
+@import '../avatars/index.scss';
+@import '../blankslate/index.scss';
+@import '../branch-name/index.scss';
+@import '../dropdown/index.scss';
+@import '../header/index.scss';
+@import '../labels/index.scss';
+@import '../loaders/index.scss';
+@import '../markdown/index.scss';
+@import '../popover/index.scss';
+@import '../progress/index.scss';
+@import '../select-menu/index.scss';
+@import '../subhead/index.scss';
+@import '../timeline/index.scss';
+@import '../toasts/index.scss'

package/progress/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./progress.scss";
+@import '../support/index.scss';
+@import './progress.scss';

package/select-menu/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./select-menu.scss";
+@import '../support/index.scss';
+@import './select-menu.scss';

package/select-menu/select-menu.scss

@@ -40,7 +40,7 @@ $SelectMenu-max-height: 480px !default;
   bottom: 0;
   left: 0;
   pointer-events: none;
-  content: "";
+  content: '';
   background-color: var(--color-primer-canvas-backdrop);
 
   @include breakpoint(sm) {
@@ -268,7 +268,7 @@ $SelectMenu-max-height: 480px !default;
     border-top-right-radius: $border-radius;
   }
 
-  &[aria-selected="true"] {
+  &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
     color: var(--color-fg-default);
     cursor: default;
@@ -386,7 +386,7 @@ $SelectMenu-max-height: 480px !default;
 //
 // Visible when a user clicks/taps on a list item
 
-.SelectMenu-item[aria-checked=true] {
+.SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);
 
@@ -402,8 +402,8 @@ $SelectMenu-max-height: 480px !default;
 // Prevent list items to be selected
 
 .SelectMenu-item:disabled,
-.SelectMenu-item[aria-disabled=true] {
-  color: var(--color-fg-muted);
+.SelectMenu-item[aria-disabled='true'] {
+  color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }
 
@@ -438,7 +438,7 @@ $SelectMenu-max-height: 480px !default;
     color: var(--color-fg-default);
   }
 
-  .SelectMenu-tab:not([aria-selected="true"]):active {
+  .SelectMenu-tab:not([aria-selected='true']):active {
     color: var(--color-fg-default);
     background-color: var(--color-canvas-subtle);
   }

package/stylelint.config.cjs

@@ -1,16 +1,7 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
-  plugins: ['stylelint-scss'],
-  syntax: 'scss',
-  ignoreFiles: ['src/fonts/**/*'],
+  ignoreFiles: ['**/*.js', '**/*.cjs'],
   rules: {
-    'scss/dollar-variable-default': [true, {ignore: 'local'}],
-    'primer/no-override': false,
-    'primer/colors': true,
-    'primer/borders': true,
-    'primer/spacing': true,
-    'primer/typography': true,
-    'primer/box-shadow': true,
-    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
+    'primer/no-override': false
   }
 }

package/subhead/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./subhead.scss";
+@import '../support/index.scss';
+@import './subhead.scss';

package/subhead/subhead.scss

@@ -5,6 +5,7 @@
   margin-bottom: $spacer-3;
   border-bottom: $border-width $border-style var(--color-border-muted);
   flex-flow: row wrap;
+  justify-content: flex-end; // Keep actions right aligned.
 }
 
 // Modifier class to give a lot of breathing room between sections of content.
@@ -34,6 +35,11 @@
 
 // Add 1 or 2 buttons to the right of the heading
 .Subhead-actions {
+  margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+
+  + .Subhead-description {
+    margin-top: $spacer-1;
+  }
 }

package/support/index.scss

@@ -1,10 +1,10 @@
 // variables
-@import "./variables/typography.scss";
-@import "./variables/layout.scss";
-@import "./variables/misc.scss";
+@import './variables/typography.scss';
+@import './variables/layout.scss';
+@import './variables/misc.scss';
 
 // mixins
-@import "./mixins/color-modes.scss";
-@import "./mixins/typography.scss";
-@import "./mixins/layout.scss";
-@import "./mixins/misc.scss";
+@import './mixins/color-modes.scss';
+@import './mixins/typography.scss';
+@import './mixins/layout.scss';
+@import './mixins/misc.scss';

package/support/mixins/color-modes.scss

@@ -8,6 +8,7 @@
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
@@ -36,6 +37,7 @@
       @content;
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme*="#{$mode}"],
     [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
@@ -84,6 +86,7 @@
       @if $type == dark {
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
+
       @else {
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }

package/support/mixins/layout.scss

@@ -1,7 +1,7 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  @if $breakpoint == "" {
+  @if $breakpoint == '' {
     @content;
   }
 
@@ -19,8 +19,8 @@
 
     // If the key doesn't exist in the map
     @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-        + "Please make sure it is defined in `$breakpoints` map.";
+      @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '
+        + 'Please make sure it is defined in `$breakpoints` map.';
     }
   }
 }
@@ -47,12 +47,12 @@
 @mixin clearfix {
   &::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 }

package/support/mixins/misc.scss

@@ -10,7 +10,7 @@
     width: 8px;
     height: 16px;
     pointer-events: none;
-    content: " ";
+    content: ' ';
     clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 

package/support/mixins/typography.scss

@@ -47,7 +47,6 @@
 
   // 32px on desktop
   @include breakpoint(md) { font-size: $h1-size; }
-
 }
 
 @mixin f2-responsive {
@@ -62,7 +61,6 @@
 
   // 20px on desktop
   @include breakpoint(md) { font-size: $h3-size; }
-
 }
 
 // These use the mixins from above for responsive heading sizes.
@@ -70,15 +68,18 @@
 // couple the responsive font-size with the font-weight.
 @mixin h1-responsive {
   @include f1-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
+
   font-weight: $font-weight-bold;
 }

package/support/variables/layout.scss

@@ -149,20 +149,12 @@ $breakpoints: (
 // This map in the form (breakpoint: variant) is used to iterate over
 // breakpoints and create both responsive and non-responsive classes in one
 // loop:
-//
-// ```scss
-// @each $breakpoint, $variant of $responsive-variants {
-//   @include breakpoint($breakpoint) {
-//     .foo#{$variant}-bar { foo: bar !important; }
-//   }
-// }
-// ```
 $responsive-variants: (
-  "": "",
-  sm: "-sm",
-  md: "-md",
-  lg: "-lg",
-  xl: "-xl",
+  '': '',
+  sm: '-sm',
+  md: '-md',
+  lg: '-lg',
+  xl: '-xl',
 ) !default;
 
 // responive utility position values
@@ -177,20 +169,17 @@ $responsive-positions: (
 $sidebar-width: (
   sm: 220px,
   md: 256px,
-  lg: 296px,
-  xl: 320px
+  lg: 296px
 ) !default;
 
 $sidebar-narrow-width: (
   md: 240px,
-  lg: 256px,
-  xl: 296px
+  lg: 256px
 ) !default;
 
 $sidebar-wide-width: (
-  md: 296px,
   lg: 320px,
-  xl: 344px
+  xl: 336px
 ) !default;
 
 $gutter: (

package/support/variables/typography.scss

@@ -32,7 +32,7 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 
 // Font stacks
-$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
+$body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
 
 // Monospace font stack
 // Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome

package/table-object/index.scss

@@ -1 +1 @@
-@import "./table-object.scss";
+@import './table-object.scss';

package/timeline/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./timeline-item.scss";
+@import '../support/index.scss';
+@import './timeline-item.scss';

package/timeline/timeline-item.scss

@@ -12,7 +12,7 @@
     left: 0;
     display: block;
     width: 2px;
-    content: "";
+    content: '';
     background-color: var(--color-border-muted);
   }
 

package/toasts/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./toasts.scss";
+@import '../support/index.scss';
+@import './toasts.scss';

package/toasts/toasts.scss

@@ -58,7 +58,6 @@
   box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-fg-on-emphasis);
     background-color: var(--color-neutral-emphasis);
   }
 }
@@ -68,7 +67,6 @@
   box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-fg-on-emphasis);
     background-color: var(--color-danger-emphasis);
   }
 }
@@ -78,7 +76,6 @@
   box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-fg-default);
     background-color: var(--color-attention-emphasis);
   }
 }
@@ -88,7 +85,6 @@
   box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-fg-on-emphasis);
     background-color: var(--color-success-emphasis);
   }
 }

package/tooltips/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./tooltips.scss";
+@import '../support/index.scss';
+@import './tooltips.scss';

package/tooltips/tooltips.scss

@@ -34,7 +34,7 @@
   height: 0;
   color: var(--color-neutral-emphasis-plus);
   pointer-events: none;
-  content: "";
+  content: '';
   // stylelint-disable-next-line primer/borders
   border: 6px $border-style transparent;
   opacity: 0;

package/truncate/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./truncate.scss";
+@import '../support/index.scss';
+@import './truncate.scss';