@primer/css 19.1.0-rc.54bc42a2 → 19.1.0-rc.5a69592b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "19.1.0-rc.54bc42a2",
+  "version": "19.1.0-rc.5a69592b",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -35,17 +35,17 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.1.0"
+    "@primer/primitives": "^7.2.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",
     "@changesets/cli": "2.18.1",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/stylelint-config": "12.1.1",
+    "@primer/stylelint-config": "12.2.0",
     "autoprefixer": "10.4.0",
     "cssstats": "4.0.2",
-    "eslint": "8.3.0",
+    "eslint": "8.4.0",
     "eslint-plugin-github": "4.3.5",
     "eslint-plugin-jest": "25.3.0",
     "eslint-plugin-prettier": "4.0.0",
@@ -53,7 +53,7 @@
     "front-matter": "4.0.2",
     "fs-extra": "10.0.0",
     "globby": "12.0.2",
-    "jest": "27.4.2",
+    "jest": "27.4.3",
     "js-yaml": "4.1.0",
     "postcss": "8.4.4",
     "postcss-calc": "8.0.0",
@@ -61,11 +61,10 @@
     "postcss-load-config": "3.1.0",
     "postcss-scss": "4.0.2",
     "postcss-simple-vars": "6.0.3",
-    "prettier": "2.5.0",
+    "prettier": "2.5.1",
     "semver": "7.3.5",
     "stylelint": "14.1.0",
-    "stylelint-scss": "4.0.0",
-    "table": "6.7.3"
+    "table": "6.7.5"
   },
   "jest": {
     "testEnvironment": "node",

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,10 +50,10 @@
 
   .gap,
   .disabled,
-  [aria-disabled=true],
+  [aria-disabled='true'],
   .gap:hover,
   .disabled:hover,
-  [aria-disabled=true]:hover {
+  [aria-disabled='true']:hover {
     color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;

package/select-menu/select-menu.scss

@@ -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,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 // Prevent list items to be selected
 
 .SelectMenu-item:disabled,
-.SelectMenu-item[aria-disabled=true] {
+.SelectMenu-item[aria-disabled='true'] {
   color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }

package/stylelint.config.cjs

@@ -1,16 +1,7 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
-  plugins: ['stylelint-scss'],
-  customSyntax: require('postcss-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/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/misc.scss

@@ -24,3 +24,27 @@
     background-color: $border;
   }
 }
+
+// global focus styles
+
+@mixin focusOutline {
+  z-index: 1;
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 32px, $min-width: '') {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  content: '';
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

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;
 }