@primer/css 0.0.0-1ea75fe → 0.0.0-202110118627

package/utilities/colors.scss

@@ -1,118 +1,79 @@
-// Color utilities
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
-
-// background colors
-/* Set the background to $bg-white */
-.bg-white      { background-color: $bg-white !important; }
-/* Set the background to $bg-blue */
-.bg-blue       { background-color: $bg-blue !important; }
-/* Set the background to $bg-blue-light */
-.bg-blue-light { background-color: $bg-blue-light !important; }
-/* Set the background to $bg-gray-dark */
-.bg-gray-dark  { background-color: $bg-gray-dark !important; }
-/* Set the background to $bg-gray */
-.bg-gray       { background-color: $bg-gray !important; }
-/* Set the background to $bg-gray-light */
-.bg-gray-light { background-color: $bg-gray-light !important; }
-/* Set the background to $bg-green */
-.bg-green      { background-color: $bg-green !important; }
-/* Set the background to $bg-green-light */
-.bg-green-light     { background-color: $bg-green-light !important; }
-/* Set the background to $bg-red */
-.bg-red        { background-color: $bg-red !important; }
-/* Set the background to $bg-red-light */
-.bg-red-light  { background-color: $bg-red-light !important; }
-/* Set the background to $bg-yellow */
-.bg-yellow     { background-color: $bg-yellow !important; }
-/* Set the background to $bg-yellow-light */
-.bg-yellow-light     { background-color: $bg-yellow-light !important; }
-/* Set the background to $bg-purple */
-.bg-purple     { background-color: $bg-purple !important; }
-/* Set the background to $bg-pink */
-.bg-pink { background-color: $bg-pink !important; }
-/* Set the background to $bg-purple-light */
-.bg-purple-light     { background-color: $bg-purple-light !important; }
-
-// Generate a foreground and background utility for every shade of every hue
-@each $hue, $shades in $hue-maps {
-  @each $index, $color in $shades {
-    .color-#{$hue}-#{$index} { color: $color !important; }
-    .bg-#{$hue}-#{$index} { background-color: $color !important; }
-  }
-}
+// stylelint-disable block-opening-brace-space-before
 
-.bg-shade-gradient {
-  background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 200px !important;
-}
+// Foreground
 
-// text colors
-/* Set the text color to $text-blue */
-.text-blue          { color: $text-blue !important; }
-/* Set the text color to $text-red */
-.text-red           { color: $text-red !important; }
-/* Set the text color to $text-gray-light */
-.text-gray-light    { color: $text-gray-light !important; }
-/* Set the text color to $text-gray */
-.text-gray          { color: $text-gray !important; }
-/* Set the text color to $text-gray-dark */
-.text-gray-dark     { color: $text-gray-dark !important; }
-/* Set the text color to $text-green */
-.text-green         { color: $text-green !important; }
-/* Set the text color to $text-orange */
-.text-orange        { color: $text-orange !important; }
-/* Set the text color to $text-orange-light */
-.text-orange-light        { color: $text-orange-light !important; }
-/* Set the text color to $text-purple */
-.text-purple        { color: $text-purple !important; }
-/* Set the text color to $text-pink */
-.text-pink { color: $text-pink !important; }
-/* Set the text color to $text-white */
-.text-white         { color: $text-white !important; }
-/* Set the text color to inherit */
-.text-inherit       { color: inherit !important; }
-
-// Text states
-// These can probably all be regular utilities
-.text-pending { color: $yellow-800 !important; }
-// Separate text and background colors in future to improve a11y
-.bg-pending { color: $yellow-700 !important; }
-
-// Link colors
-// Sets the links color to $text-gray and $text-blue on hover
-.link-gray {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+.color-fg-default     { color: var(--color-fg-default) !important; }
+.color-fg-muted       { color: var(--color-fg-muted) !important; }
+.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
 
-// Sets the links color to $text-gray-dark and $text-blue on hover
-.link-gray-dark {
-  color: $text-gray-dark !important;
+.color-fg-accent    { color: var(--color-accent-fg) !important; }
+.color-fg-success   { color: var(--color-success-fg) !important; }
+.color-fg-attention { color: var(--color-attention-fg) !important; }
+.color-fg-severe    { color: var(--color-severe-fg) !important; }
+.color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-done      { color: var(--color-done-fg) !important; }
+.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
 
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
 
-/* Set the link color to $text-blue on hover
-  Useful when you want only part of a link to turn blue on hover */
-.link-hover-blue {
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+// Background
+
+.color-bg-default  { background-color: var(--color-canvas-default) !important; }
+.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+
+.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
+.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+
+.color-bg-success          { background-color: var(--color-success-subtle) !important; }
+.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+
+.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
+.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+
+.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
+.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
+.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+
+.color-bg-done          { background-color: var(--color-done-subtle) !important; }
+.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+
+.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
+.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+
+// Border
+
+.color-border-default { border-color: var(--color-border-default) !important; }
+.color-border-muted   { border-color: var(--color-border-muted) !important; }
+.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+
+.color-border-accent          { border-color: var(--color-accent-muted) !important; }
+.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+
+.color-border-success          { border-color: var(--color-success-muted) !important; }
+.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+
+.color-border-attention          { border-color: var(--color-attention-muted) !important; }
+.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+
+.color-border-severe          { border-color: var(--color-severe-muted) !important; }
+.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+
+.color-border-danger          { border-color: var(--color-danger-muted) !important; }
+.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+
+.color-border-done          { border-color: var(--color-done-muted) !important; }
+.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+
+.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
+.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
 
-/* Make a link $text-gray, then $text-blue on hover and removes the underline */
-.muted-link {
-  color: $text-gray !important;
+// Misc
 
-  &:hover {
-    color: $text-blue !important;
-    text-decoration: none;
-  }
+.color-fg-inherit {
+  color: inherit !important;
 }

package/utilities/details.scss

@@ -1,4 +1,3 @@
-// stylelint-disable primer/selector-no-utility
 // stylelint-disable selector-max-type
 
 .details-overlay[open] > summary::before {
@@ -10,11 +9,20 @@
   z-index: 80;
   display: block;
   cursor: default;
-  content: " ";
+  content: ' ';
   background: transparent;
 }
 
 .details-overlay-dark[open] > summary::before {
-  z-index: 99;
-  background: $black-fade-50;
+  z-index: 111;
+  background: var(--color-primer-canvas-backdrop);
+}
+
+.details-reset {
+  // Remove marker added by the display: list-item browser default
+  > summary { list-style: none; }
+  // Remove marker added by details polyfill
+  > summary::before { display: none; }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker { display: none; }
 }

package/utilities/flexbox.scss

@@ -1,17 +1,17 @@
 // Flex utility classes
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
-
+// stylelint-disable block-opening-brace-space-before
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Flexbox classes
     // Container
-    .flex#{$variant}-row         { flex-direction: row !important; }
-    .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
-    .flex#{$variant}-column      { flex-direction: column !important; }
+    .flex#{$variant}-row            { flex-direction: row !important; }
+    .flex#{$variant}-row-reverse    { flex-direction: row-reverse !important; }
+    .flex#{$variant}-column         { flex-direction: column !important; }
+    .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
 
-    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
-    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap             { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap           { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse !important; }
 
     .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
     .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
@@ -33,7 +33,9 @@
     .flex#{$variant}-content-stretch  { align-content: stretch !important; }
 
     // Item
-    .flex#{$variant}-auto { flex: 1 1 auto !important; }
+    .flex#{$variant}-1        { flex: 1 !important; }
+    .flex#{$variant}-auto     { flex: auto !important; }
+    .flex#{$variant}-grow-0   { flex-grow: 0 !important; }
     .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
 
     .flex#{$variant}-self-auto        { align-self: auto !important; }
@@ -43,10 +45,8 @@
     .flex#{$variant}-self-baseline    { align-self: baseline !important; }
     .flex#{$variant}-self-stretch     { align-self: stretch !important; }
 
-    // Shorthand for equal width and height cols
-    .flex#{$variant}-item-equal {
-      flex-grow: 1;
-      flex-basis: 0;
-    }
+    .flex#{$variant}-order-1 { order: 1 !important; }
+    .flex#{$variant}-order-2 { order: 2 !important; }
+    .flex#{$variant}-order-none { order: inherit !important; }
   }
 }

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

package/utilities/layout.scss

@@ -1,8 +1,7 @@
 // Layout
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
-// Loop through the breakpoint values
+/* Position */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @each $position in $responsive-positions {
@@ -13,14 +12,19 @@
   }
 }
 
-/* Set top 0 */
-.top-0    { top: 0 !important; }
-/* Set right 0 */
-.right-0  { right: 0 !important; }
-/* Set bottom 0 */
-.bottom-0 { bottom: 0 !important; }
-/* Set left 0 */
-.left-0   { left: 0 !important; }
+/* Final position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .top#{$variant}-0 { top: 0 !important; }
+    .right#{$variant}-0 { right: 0 !important; }
+    .bottom#{$variant}-0 { bottom: 0 !important; }
+    .left#{$variant}-0 { left: 0 !important; }
+    .top#{$variant}-auto { top: auto !important; }
+    .right#{$variant}-auto { right: auto !important; }
+    .bottom#{$variant}-auto { bottom: auto !important; }
+    .left#{$variant}-auto { left: auto !important; }
+  }
+}
 
 /* Vertical align middle */
 .v-align-middle      { vertical-align: middle !important; }
@@ -36,17 +40,15 @@
 .v-align-baseline    { vertical-align: baseline !important; }
 
 // Overflow utilities
-.overflow-hidden { overflow: hidden !important; }
-.overflow-x-hidden { overflow-x: hidden !important; }
-.overflow-y-hidden { overflow-y: hidden !important; }
-
-.overflow-auto { overflow: auto !important; }
-.overflow-x-auto { overflow-x: auto !important; }
-.overflow-y-auto { overflow-y: auto !important; }
-
-.overflow-scroll { overflow: scroll !important; }
-.overflow-x-scroll { overflow-x: scroll !important; }
-.overflow-y-scroll { overflow-y: scroll !important; }
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $overflow in (visible, hidden, auto, scroll) {
+      .overflow#{$variant}-#{$overflow}   { overflow: $overflow !important; }
+      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
+      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
+    }
+  }
+}
 
 // Clear floats
 /* Clear floats around the element */
@@ -82,6 +84,10 @@
 
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
+
+    // Auto varients
+    .width#{$variant}-auto { width: auto !important; }
+
     /* Set the direction to rtl */
     .direction#{$variant}-rtl { direction: rtl !important; }
     /* Set the direction to ltr */

package/utilities/margin.scss

@@ -1,38 +1,48 @@
 // Margin spacer utilities
-// stylelint-disable primer/selector-no-utility
 // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
 
 // Loop through the breakpoint values
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size margin to all sides at $breakpoint */
-      .m#{$variant}-#{$scale}  { margin: $size !important; }
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size margin to all sides at $breakpoint */
+        .m#{$variant}-#{$scale}  { margin: $size !important; }
+      }
+
       /* Set a $size margin on the top at $breakpoint */
       .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      /* Set a $size margin on the right at $breakpoint */
-      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
       /* Set a $size margin on the bottom at $breakpoint */
       .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
-      /* Set a $size margin on the left at $breakpoint */
-      .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size margin on the right at $breakpoint */
+        .mr#{$variant}-#{$scale} { margin-right: $size !important; }
+        /* Set a $size margin on the left at $breakpoint */
+        .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+      }
 
       @if ($size != 0) {
         /* Set a negative $size margin on top at $breakpoint */
-        .mt#{$variant}-n#{$scale} { margin-top   : -$size !important; }
-        /* Set a negative $size margin on the right at $breakpoint */
-        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+        .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
         /* Set a negative $size margin on the bottom at $breakpoint */
         .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
-        /* Set a negative $size margin on the left at $breakpoint */
-        .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+
+        @if ($scale < length($spacer-map)) {
+          /* Set a negative $size margin on the right at $breakpoint */
+          .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+          /* Set a negative $size margin on the left at $breakpoint */
+          .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+        }
       }
 
-      /* Set a $size margin on the left & right at $breakpoint */
-      .mx#{$variant}-#{$scale} {
-        margin-right: $size !important;
-        margin-left: $size !important;
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size margin on the left & right at $breakpoint */
+        .mx#{$variant}-#{$scale} {
+          margin-right: $size !important;
+          margin-left: $size !important;
+        }
       }
 
       /* Set a $size margin on the top & bottom at $breakpoint */
@@ -49,3 +59,10 @@
     }
   }
 }
+
+.m-auto { margin: auto !important; }
+
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }

package/utilities/padding.scss

@@ -1,14 +1,16 @@
 // Padding spacer utilities
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
 // Responsive padding spacer utilities
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size padding to all sides at $breakpoint */
-      .p#{$variant}-#{$scale}  { padding: $size !important; }
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size padding to all sides at $breakpoint */
+        .p#{$variant}-#{$scale}  { padding: $size !important; }
+      }
+
       /* Set a $size padding to the top at $breakpoint */
       .pt#{$variant}-#{$scale} { padding-top: $size !important; }
       /* Set a $size padding to the right at $breakpoint */
@@ -18,10 +20,12 @@
       /* Set a $size padding to the left at $breakpoint */
       .pl#{$variant}-#{$scale} { padding-left: $size !important; }
 
-      /* Set a $size padding to the left & right at $breakpoint */
-      .px#{$variant}-#{$scale} {
-        padding-right: $size !important;
-        padding-left: $size !important;
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size padding to the left & right at $breakpoint */
+        .px#{$variant}-#{$scale} {
+          padding-right: $size !important;
+          padding-left: $size !important;
+        }
       }
 
       /* Set a $size padding to the top & bottom at $breakpoint */