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

package/table-object/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/table-object/index.scss

@@ -1 +1 @@
-@import "./table-object.scss";
+@import './table-object.scss';

package/timeline/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/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,16 +12,14 @@
     left: 0;
     display: block;
     width: 2px;
-    content: "";
-    // stylelint-disable-next-line primer/colors
-    background-color: $gray-200;
+    content: '';
+    background-color: var(--color-border-muted);
   }
 
   &:target .TimelineItem-badge {
-    // stylelint-disable-next-line primer/borders
-    border-color: $blue-400;
+    border-color: var(--color-accent-emphasis);
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0.2em $blue-200;
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
   }
 }
 
@@ -33,24 +31,27 @@
   height: $spacer-5;
   margin-right: $spacer-2;
   margin-left: -$spacer-3 + 1;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-fg-muted);
   align-items: center;
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-200;
+  background-color: var(--color-timeline-badge-bg);
   // stylelint-disable-next-line primer/borders
-  border: 2px $border-style $border-white;
+  border: 2px $border-style var(--color-canvas-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
+
+  &--success {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-success-emphasis);
+    border: $border-width $border-style transparent;
+  }
 }
 
 .TimelineItem-body {
   min-width: 0;
   max-width: 100%;
   margin-top: $spacer-1;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-fg-muted);
   flex: auto;
 }
 
@@ -68,10 +69,10 @@
   margin-bottom: -$spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin-left: -($spacer-6 + $spacer-3);
-  background-color: $bg-white;
+  background-color: var(--color-canvas-default);
   border: 0;
   // stylelint-disable-next-line primer/borders
-  border-top: 4px $border-style $border-color;
+  border-top: 4px $border-style var(--color-border-default);
 }
 
 .TimelineItem--condensed {
@@ -87,9 +88,8 @@
     height: $spacer-3;
     margin-top: $spacer-2;
     margin-bottom: $spacer-2;
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
-    background-color: $bg-white;
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
     border: 0;
   }
 }

package/toasts/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/toasts/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./toasts.scss";
+@import '../support/index.scss';
+@import './toasts.scss';

package/toasts/toasts.scss

@@ -3,11 +3,10 @@
 .Toast {
   display: flex;
   margin: $spacer-2;
-  color: $text-black;
-  background-color: $bg-white;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
   border-radius: $border-radius;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 0 0 1px $border-color, $box-shadow-large;
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   @include breakpoint(sm) {
     width: max-content;
@@ -22,8 +21,10 @@
   justify-content: center;
   width: $spacer-3 * 3;
   flex-shrink: 0;
-  color: $text-white;
-  background-color: $bg-blue;
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-accent-emphasis);
+  border: $border-width $border-style transparent;
+  border-right: 0;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
 }
@@ -35,40 +36,55 @@
 .Toast-dismissButton {
   max-height: 54px; // keeps button aligned to the top
   padding: $spacer-3;
+  color: inherit;
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    color: $text-gray;
-    outline: none;
+    opacity: 0.7;
   }
 
   &:active {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    opacity: 0.5;
   }
 }
 
 // Modifier
 
-.Toast--error .Toast-icon {
-  background-color: $bg-red;
+.Toast--loading {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-neutral-emphasis);
+  }
 }
 
-.Toast--warning .Toast-icon {
-  color: $text-gray-dark;
-  // stylelint-disable-next-line primer/colors
-  background-color: $yellow-600;
+.Toast--error {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-danger-emphasis);
+  }
 }
 
-.Toast--success .Toast-icon {
-  background-color: $bg-green;
+.Toast--warning {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-attention-emphasis);
+  }
 }
 
-.Toast--loading .Toast-icon {
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-600;
+.Toast--success {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-success-emphasis);
+  }
 }
 
 // Animations
@@ -101,6 +117,11 @@
 }
 
 @keyframes Toast--spinner {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

package/tooltips/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/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

@@ -10,7 +10,7 @@
   padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
-  color: $text-white;
+  color: var(--color-fg-on-emphasis);
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,7 +20,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: $bg-black;
+  background: var(--color-neutral-emphasis-plus);
   border-radius: $border-radius;
   opacity: 0;
 }
@@ -32,9 +32,9 @@
   display: none;
   width: 0;
   height: 0;
-  color: $text-black;
+  color: var(--color-neutral-emphasis-plus);
   pointer-events: none;
-  content: "";
+  content: '';
   // stylelint-disable-next-line primer/borders
   border: 6px $border-style transparent;
   opacity: 0;
@@ -101,8 +101,7 @@
     bottom: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-color: $bg-black;
+    border-bottom-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -135,8 +134,7 @@
     bottom: auto;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    // stylelint-disable-next-line primer/borders
-    border-top-color: $bg-black;
+    border-top-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -174,8 +172,7 @@
     left: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    // stylelint-disable-next-line primer/borders
-    border-left-color: $bg-black;
+    border-left-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -195,8 +192,7 @@
     bottom: 50%;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    // stylelint-disable-next-line primer/borders
-    border-right-color: $bg-black;
+    border-right-color: var(--color-neutral-emphasis-plus);
   }
 }
 

package/truncate/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/truncate/index.scss

@@ -1 +1,2 @@
-@import "./truncate.scss";
+@import '../support/index.scss';
+@import './truncate.scss';

package/truncate/truncate.scss

@@ -29,3 +29,33 @@
     max-width: 10000px !important;
   }
 }
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+
+  > .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    + .Truncate-text {
+      margin-left: $spacer-1;
+    }
+
+    &.Truncate-text--primary {
+      flex-basis: 200%;
+    }
+
+    &.Truncate-text--expandable:hover,
+    &.Truncate-text--expandable:focus,
+    &.Truncate-text--expandable:active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+}

package/utilities/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/utilities/animations.scss

@@ -25,6 +25,7 @@
 .anim-fade-out {
   animation-name: fade-out;
   animation-duration: 1s;
+  animation-fill-mode: forwards;
   animation-timing-function: ease-out;
 
   &.fast {
@@ -173,7 +174,8 @@
 }
 
 /* Increase scale of an element on hover */
-.hover-grow {
+.hover-grow,
+.anim-hover-grow {
   transition: transform 0.3s;
   backface-visibility: hidden;
 
@@ -181,3 +183,14 @@
     transform: scale(1.025);
   }
 }
+
+/* Rotate an element 360 degrees over and over, used for spinners */
+.anim-rotate {
+  animation: rotate-keyframes 1s linear infinite;
+}
+
+@keyframes rotate-keyframes {
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/utilities/borders.scss

@@ -1,5 +1,5 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
 
 /* Add a gray border to the left and right */
 .border-x {
@@ -18,25 +18,16 @@
   @include breakpoint($breakpoint) {
     /* Add a gray border on all sides at/above this breakpoint */
     .border#{$variant}        { border: $border !important; }
-    /* Set the border width to 0 on all sides at/above this breakpoint */
     .border#{$variant}-0      { border: 0 !important; }
 
-    /* Add a gray border to the top */
     .border#{$variant}-top    { border-top: $border !important; }
-    /* Add a gray border to the right */
     .border#{$variant}-right  { border-right: $border !important; }
-    /* Add a gray border to the bottom */
     .border#{$variant}-bottom { border-bottom: $border !important; }
-    /* Add a gray border to the left */
     .border#{$variant}-left   { border-left: $border !important; }
 
-    /* Remove the top border */
     .border#{$variant}-top-0    { border-top: 0 !important; }
-    /* Remove the right border */
     .border#{$variant}-right-0  { border-right: 0 !important; }
-    /* Remove the bottom border */
     .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
-    /* Remove the left border */
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
@@ -44,6 +35,7 @@
     .rounded#{$variant}-0 { border-radius: 0 !important; }
     .rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
     .rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
+    .rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -54,19 +46,19 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius / 2 !important;
+          border-#{$corner}-radius: $border-radius-1 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius !important;
+          border-#{$corner}-radius: $border-radius-2 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius * 2 !important;
+          border-#{$corner}-radius: $border-radius-3 !important;
         }
       }
     }
@@ -81,40 +73,3 @@
   // stylelint-disable-next-line primer/borders
   border-style: dashed !important;
 }
-
-/* Use with .border to turn the border blue */
-.border-blue        { border-color: $border-blue !important; }
-/* Use with .border to turn the border blue-light */
-.border-blue-light  { border-color: $border-blue-light !important; }
-/* Use with .border to turn the border green */
-.border-green       { border-color: $border-green !important; }
-/* Use with .border to turn the border green light */
-.border-green-light { border-color: $border-green-light !important; }
-/* Use with .border to turn the border red */
-.border-red         { border-color: $border-red !important; }
-/* Use with .border to turn the border red-light */
-.border-red-light   { border-color: $border-red-light !important; }
-/* Use with .border to turn the border purple */
-.border-purple      { border-color: $border-purple !important; }
-/* Use with .border to turn the border yellow */
-.border-yellow      { border-color: $border-yellow !important; }
-/* Use with .border to turn the border gray-light */
-.border-gray-light  { border-color: $border-gray-light !important; }
-/* Use with .border to turn the border gray-dark */
-.border-gray-dark   { border-color: $border-gray-dark !important; }
-
-/* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade  { border-color: $border-black-fade !important; }
-/* Use with .border to turn the border rgba white 0.15 */
-.border-white-fade  { border-color: $border-white-fade !important; }
-
-/* Use with .border to turn the border white w/varying transparency */
-.border-white-fade-15 { border-color: $border-white-fade !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-30 { border-color: $white-fade-30 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-50 { border-color: $white-fade-50 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-70 { border-color: $white-fade-70 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-85 { border-color: $white-fade-85 !important; }

package/utilities/box-shadow.scss

@@ -2,20 +2,20 @@
 
 // Box shadows
 
-.box-shadow {
-  box-shadow: $box-shadow !important;
+.color-shadow-small {
+  box-shadow: var(--color-shadow-small) !important;
 }
 
-.box-shadow-medium {
-  box-shadow: $box-shadow-medium !important;
+.color-shadow-medium {
+  box-shadow: var(--color-shadow-medium) !important;
 }
 
-.box-shadow-large {
-  box-shadow: $box-shadow-large !important;
+.color-shadow-large {
+  box-shadow: var(--color-shadow-large) !important;
 }
 
-.box-shadow-extra-large {
-  box-shadow: $box-shadow-extra-large !important;
+.color-shadow-extra-large {
+  box-shadow: var(--color-shadow-extra-large) !important;
 }
 
 // Turn off box shadow