@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/select-menu/select-menu.scss

@@ -40,8 +40,8 @@ $SelectMenu-max-height: 480px !default;
   bottom: 0;
   left: 0;
   pointer-events: none;
-  content: "";
-  background-color: $bg-black-fade;
+  content: '';
+  background-color: var(--color-primer-canvas-backdrop);
 
   @include breakpoint(sm) {
     display: none;
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-select-menu-backdrop-border);
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 0 18px rgba($black, 0.4);
+  box-shadow: var(--color-shadow-large);
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border: $border;
+    border-color: var(--color-border-default);
     border-radius: $border-radius;
-    box-shadow: $box-shadow-large;
+    box-shadow: var(--color-shadow-large);
     animation-name: SelectMenu-modal-animation--sm;
   }
 }
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,8 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   margin: -$spacer-3;
   line-height: 1;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-light;
+  color: var(--color-fg-muted);
   background-color: transparent;
   border: 0;
 
@@ -145,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -174,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-overlay);
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -188,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   text-align: left;
   cursor: pointer;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-overlay);
   border: 0;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -235,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-light;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -253,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: $text-gray-light;
+  color: var(--color-fg-muted);
   text-align: center;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-light;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
 
   @include breakpoint(sm) {
     flex: none;
@@ -269,16 +268,16 @@ $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: $text-gray-dark;
+    color: var(--color-fg-default);
     cursor: default;
-    background-color: $bg-white;
+    background-color: var(--color-canvas-overlay);
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px $border-gray-light;
+    box-shadow: 0 0 0 1px var(--color-border-muted);
 
     @include breakpoint(sm) {
-      border-color: $border-gray-light;
+      border-color: var(--color-border-muted);
       box-shadow: none;
     }
   }
@@ -292,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: $bg-white;
-  border-bottom: $border-width $border-style $border-gray-light;
+  background-color: var(--color-canvas-overlay);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 }
 
 // Blankslate and Loading
@@ -304,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-overlay);
 }
 
 // Divider
@@ -316,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: $text-gray-light;
-  background-color: $bg-gray;
-  border-bottom: $border-width $border-style $border-gray-light;
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style $border-gray-light;
+    border-top: $border-width $border-style var(--color-border-muted);
 
     &:empty {
       padding: 0;
@@ -339,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
-  color: $text-gray-light;
+  color: var(--color-fg-muted);
   text-align: center;
-  border-top: $border-width $border-style $border-gray-light;
+  border-top: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -389,7 +388,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item[aria-checked=true] {
   font-weight: $font-weight-semibold;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
 
   .SelectMenu-icon--check {
     visibility: visible;
@@ -404,7 +403,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled=true] {
-  color: $text-gray-light;
+  color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }
 
@@ -415,34 +414,33 @@ $SelectMenu-max-height: 480px !default;
 @media (hover: hover) {
   body:not(.intent-mouse) .SelectMenu-closeButton:focus,
   .SelectMenu-closeButton:hover {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
   }
 
   .SelectMenu-closeButton:active {
-    color: $text-gray;
+    color: var(--color-fg-muted);
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: $bg-gray;
+    background-color: var(--color-neutral-subtle);
   }
 
   .SelectMenu-item:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-canvas-subtle);
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
-    // stylelint-disable-next-line primer/colors
-    background-color: $blue-100;
+    background-color: var(--color-select-menu-tap-focus-bg);
   }
 
   .SelectMenu-tab:hover {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
   }
 
-  .SelectMenu-tab:not([aria-selected="true"]):active {
-    color: $text-gray-dark;
-    background-color: $bg-gray;
+  .SelectMenu-tab:not([aria-selected='true']):active {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-subtle);
   }
 }
 
@@ -454,13 +452,13 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-canvas-subtle);
   }
 
   // iOS Safari
   // :active would work if ontouchstart is added to the button
   // Instead this tweaks the "native" highlight color
   .SelectMenu-item {
-    -webkit-tap-highlight-color: rgba($gray-300, 0.5);
+    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
   }
 }

package/{stylelint.config.js → stylelint.config.cjs}

@@ -1,9 +1,8 @@
-const currentVersion = process.env.PRIMER_VERSION || require('./package.json').version
-
 module.exports = {
-  extends: ['stylelint-config-primer'],
-  plugins: ['stylelint-scss', './lib/stylelint-todo'],
-  syntax: 'scss',
+  extends: ['@primer/stylelint-config'],
+  plugins: ['stylelint-scss'],
+  customSyntax: require('postcss-scss'),
+  ignoreFiles: ['src/fonts/**/*'],
   rules: {
     'scss/dollar-variable-default': [true, {ignore: 'local'}],
     'primer/no-override': false,
@@ -12,6 +11,6 @@ module.exports = {
     'primer/spacing': true,
     'primer/typography': true,
     'primer/box-shadow': true,
-    'primer-css/TODO': [true, {currentVersion, severity: 'error'}]
+    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
   }
 }

package/subhead/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

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

@@ -3,8 +3,9 @@
   display: flex;
   padding-bottom: $spacer-2;
   margin-bottom: $spacer-3;
-  border-bottom: $border;
+  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.
@@ -22,18 +23,23 @@
 // Make the text bold and red for dangerous content
 .Subhead-heading--danger {
   font-weight: $font-weight-bold;
-  color: $text-red;
+  color: var(--color-danger-fg);
 }
 
 // One-liner of supporting text
 .Subhead-description {
   font-size: $body-font-size;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   flex: 1 100%;
 }
 
 // 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/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/support/index.scss

@@ -1,11 +1,10 @@
 // variables
-@import "./variables/typography.scss";
-@import "./variables/colors.scss";
-@import "./variables/layout.scss";
-@import "./variables/misc.scss";
+@import './variables/typography.scss';
+@import './variables/layout.scss';
+@import './variables/misc.scss';
 
 // mixins
-@import "./mixins/typography.scss";
-@import "./mixins/layout.scss";
-@import "./mixins/buttons.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

@@ -0,0 +1,106 @@
+@mixin color-mode-theme($theme-name, $include-root: false) {
+  @if $include-root {
+    :root,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      @content;
+
+      /*! */ // 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}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+}
+
+@mixin color-mode($mode) {
+  @if $mode == light {
+    :root,
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+  @else {
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+}
+
+// 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.
+//
+// Example input for $color-map
+//
+// @include color-variables(("custom-css-variable-1": (
+//     light: var(--color-scale-gray-3),
+//     dark: var(--color-scale-gray-5)
+//   ),
+//   "custom-css-variable-2": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   ),
+//   "custom-css-variable-3": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   )
+// ));
+@mixin color-variables($color-map) {
+  // Create map to store incoming variables
+  $dark-colors: ();
+  $light-colors: ();
+
+  @each $name, $value in $color-map {
+    @each $type, $color in $value {
+      @if $type == dark {
+        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
+      }
+      @else {
+        $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
+      }
+    }
+  }
+
+  $mode-colors: (
+    dark: $dark-colors,
+    light: $light-colors
+  );
+
+  // Loop through sorted list
+  @each $mode, $variables in $mode-colors {
+    @include color-mode($mode) {
+      @each $prop, $val in $variables {
+        #{$prop}: $val;
+      }
+    }
+  }
+}

package/support/mixins/misc.scss

@@ -1,29 +1,35 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
+@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
   &::after,
   &::before {
     position: absolute;
     top: 11px;
     right: 100%;
-    left: -16px;
+    left: -8px;
     display: block;
-    width: 0;
-    height: 0;
+    width: 8px;
+    height: 16px;
     pointer-events: none;
-    content: " ";
-    border-color: transparent;
-    border-style: solid solid outset;
+    content: ' ';
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 
   &::after {
-    margin-top: 1px;
-    margin-left: 2px;
-    border-width: 7px;
-    border-right-color: $foreground;
+    margin-left: 1px;
+    background-color: var(--color-canvas-default);
+    background-image: linear-gradient($background, $background);
   }
 
   &::before {
-    border-width: 8px;
-    border-right-color: $background;
+    background-color: $border;
   }
 }
+
+// global focus styles
+
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}

package/support/variables/layout.scss

@@ -33,7 +33,7 @@ $spacer: 8px !default;
 
 // Our spacing scale
 $spacer-0: 0 !default;                  // 0
-$spacer-1: round($spacer / 2) !default; // 4px
+$spacer-1: $spacer * 0.5 !default;      // 4px
 $spacer-2: $spacer !default;            // 8px
 $spacer-3: $spacer * 2 !default;        // 16px
 $spacer-4: $spacer * 3 !default;        // 24px
@@ -63,6 +63,38 @@ $spacer-map: (
   6: $spacer-6,
 ) !default;
 
+// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
+// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
+// 80, 96, etc.
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
+
+$spacers-large: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$spacer-map-extended: map-merge(
+  (
+    0: 0,
+    1: $spacer-1,
+    2: $spacer-2,
+    3: $spacer-3,
+    4: $spacer-4,
+    5: $spacer-5,
+    6: $spacer-6,
+  ),
+  $spacers-large,
+) !default;
+
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
 $em-spacer-2: 0.125em !default;  // 1/8
@@ -117,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",
@@ -141,3 +165,38 @@ $responsive-positions: (
   fixed,
   sticky
 ) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px
+) !default;
+
+$sidebar-wide-width: (
+  md: 296px,
+  lg: 320px,
+  xl: 344px
+) !default;
+
+$gutter: (
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5
+) !default;
+
+$gutter-condensed: (
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4
+) !default;
+
+$gutter-spacious: (
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6
+) !default;

package/support/variables/misc.scss

@@ -2,41 +2,16 @@
 
 // Border
 $border-width: 1px !default;
-$border-color: $border-gray !default;
 $border-style: solid !default;
-$border: $border-width $border-color $border-style !default;
+$border: $border-width $border-style var(--color-border-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;
 $border-radius-2:  6px !default;
+$border-radius-3:  8px !default;
 $border-radius: $border-radius-2 !default;
 
-// Box shadow
-$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
-$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
-$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
-$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
-
-$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
-$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
-$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
-
-// Button variables
-$border-color-button: $black-fade-15 !default;
-$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
-
-// Form variables
-$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
-$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
-
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: $black !default;
-$tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;
-
-// diffstat background colors
-$bg-diffstat-added: darken($green-400, 5%) !default;
-$bg-diffstat-deleted: $red-600 !default;
-$bg-diffstat-neutral: $gray-300 !default;

package/support/variables/typography.scss

@@ -35,7 +35,8 @@ $lh-default: 1.5 !default;
 $body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
 
 // Monospace font stack
-$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default;
+// Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
+$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
 
 // The base body size
 $body-font-size: 14px !default;