@primer/css 18.1.0-rc.e2a1e4e2 → 18.1.0

package/navigation/sidenav.scss

@@ -37,7 +37,7 @@
     z-index: 1;
     width: 2px;
     pointer-events: none;
-    content: "";
+    content: '';
   }
 }
 
@@ -60,7 +60,7 @@
 }
 
 .SideNav-item[aria-current]:not([aria-current=false]),
-.SideNav-item[aria-selected="true"] {
+.SideNav-item[aria-selected='true'] {
   background-color: var(--color-sidenav-selected-bg);
 
   // Bar on the left
@@ -102,7 +102,7 @@
 }
 
 .SideNav-subItem[aria-current]:not([aria-current=false]),
-.SideNav-subItem[aria-selected="true"] {
+.SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "18.1.0-rc.e2a1e4e2",
+  "version": "18.1.0",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -35,14 +35,14 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^5.1.0"
+    "@primer/primitives": "6.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.1",
     "@changesets/cli": "2.17.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/stylelint-config": "12.0.1",
+    "@primer/stylelint-config": "12.1.0",
     "autoprefixer": "10.3.7",
     "cssstats": "4.0.2",
     "eslint": "7.32.0",
@@ -63,8 +63,8 @@
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.4.1",
     "semver": "7.3.5",
-    "stylelint": "13.13.1",
-    "stylelint-scss": "3.21.0",
+    "stylelint": "14.0.0",
+    "stylelint-scss": "4.0.0",
     "table": "6.7.2"
   },
   "jest": {

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

@@ -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

@@ -15,7 +15,7 @@
     position: absolute;
     left: 50%;
     display: inline-block;
-    content: "";
+    content: '';
   }
 
   &::before {

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;
@@ -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,7 +1,7 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
   plugins: ['stylelint-scss'],
-  syntax: 'scss',
+  customSyntax: require('postcss-scss'),
   ignoreFiles: ['src/fonts/**/*'],
   rules: {
     'scss/dollar-variable-default': [true, {ignore: 'local'}],

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/variables/layout.scss

@@ -149,14 +149,6 @@ $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",

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/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';

package/utilities/details.scss

@@ -9,7 +9,7 @@
   z-index: 80;
   display: block;
   cursor: default;
-  content: " ";
+  content: ' ';
   background: transparent;
 }
 

package/utilities/index.scss

@@ -1,14 +1,14 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 // utilities
-@import "./animations.scss";
-@import "./borders.scss";
-@import "./box-shadow.scss";
-@import "./colors.scss";
-@import "./details.scss";
-@import "./flexbox.scss";
-@import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";
-@import "./typography.scss";
+@import './animations.scss';
+@import './borders.scss';
+@import './box-shadow.scss';
+@import './colors.scss';
+@import './details.scss';
+@import './flexbox.scss';
+@import './layout.scss';
+@import './margin.scss';
+@import './padding.scss';
+@import './typography.scss';
 // Visibility and display should always come last in the imports so that they override other utilities with !important
-@import "./visibility-display.scss";
+@import './visibility-display.scss';