@primer/css 19.0.0-rc.e1873198 → 19.1.0-rc.06290cbb

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/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,
@@ -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 - 1px)) {
+  .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/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/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

@@ -150,11 +150,11 @@ $breakpoints: (
 // breakpoints and create both responsive and non-responsive classes in one
 // loop:
 $responsive-variants: (
-  "": "",
-  sm: "-sm",
-  md: "-md",
-  lg: "-lg",
-  xl: "-xl",
+  '': '',
+  sm: '-sm',
+  md: '-md',
+  lg: '-lg',
+  xl: '-xl',
 ) !default;
 
 // responive utility position values

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