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

package/toasts/toasts.scss

@@ -0,0 +1,124 @@
+// Toast
+
+.Toast {
+  display: flex;
+  margin: $spacer-2;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  border-radius: $border-radius;
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  @include breakpoint(sm) {
+    width: max-content;
+    max-width: 450px;
+    margin: $spacer-3;
+  }
+}
+
+.Toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $spacer-3 * 3;
+  flex-shrink: 0;
+  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;
+}
+
+.Toast-content {
+  padding: $spacer-3;
+}
+
+.Toast-dismissButton {
+  max-height: 54px; // keeps button aligned to the top
+  padding: $spacer-3;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+
+  &:focus,
+  &:hover {
+    outline: none;
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
+// Modifier
+
+.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--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--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--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
+
+.Toast--animateIn {
+  animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
+}
+
+@keyframes Toast--animateIn {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.Toast--animateOut {
+  animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
+}
+
+@keyframes Toast--animateOut {
+  100% {
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.Toast--spinner {
+  animation: Toast--spinner 1000ms linear infinite;
+}
+
+@keyframes Toast--spinner {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

package/tooltips/README.md

@@ -1,38 +1,25 @@
-# Primer Tooltips
+---
+bundle: "tooltips"
+generated: true
+---
 
-> Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `tooltips` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-tooltips/index.scss";
+@import "@primer/css/tooltips/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/tooltips](https://primer.style/css/components/tooltips).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/tooltips.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.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: $tooltip-text-color;
+  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: $tooltip-background-color;
+  background: var(--color-neutral-emphasis-plus);
   border-radius: $border-radius;
   opacity: 0;
 }
@@ -32,9 +32,10 @@
   display: none;
   width: 0;
   height: 0;
-  color: $tooltip-background-color;
+  color: var(--color-neutral-emphasis-plus);
   pointer-events: none;
-  content: "";
+  content: '';
+  // stylelint-disable-next-line primer/borders
   border: 6px $border-style transparent;
   opacity: 0;
 }
@@ -90,6 +91,7 @@
   &::after {
     top: 100%;
     right: 50%;
+    // stylelint-disable-next-line primer/spacing
     margin-top: 6px;
   }
 
@@ -97,8 +99,9 @@
     top: auto;
     right: 50%;
     bottom: -7px;
+    // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-bottom-color: $tooltip-background-color;
+    border-bottom-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -121,6 +124,7 @@
   &::after {
     right: 50%;
     bottom: 100%;
+    // stylelint-disable-next-line primer/spacing
     margin-bottom: 6px;
   }
 
@@ -128,8 +132,9 @@
     top: -7px;
     right: 50%;
     bottom: auto;
+    // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-top-color: $tooltip-background-color;
+    border-top-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -156,6 +161,7 @@
   &::after {
     right: 100%;
     bottom: 50%;
+    // stylelint-disable-next-line primer/spacing
     margin-right: 6px;
     transform: translateY(50%);
   }
@@ -164,8 +170,9 @@
     top: 50%;
     bottom: 50%;
     left: -7px;
+    // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-left-color: $tooltip-background-color;
+    border-left-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -174,6 +181,7 @@
   &::after {
     bottom: 50%;
     left: 100%;
+    // stylelint-disable-next-line primer/spacing
     margin-left: 6px;
     transform: translateY(50%);
   }
@@ -182,8 +190,9 @@
     top: 50%;
     right: -7px;
     bottom: 50%;
+    // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-right-color: $tooltip-background-color;
+    border-right-color: var(--color-neutral-emphasis-plus);
   }
 }
 

package/truncate/README.md

@@ -1,38 +1,25 @@
-# Primer Truncate
+---
+bundle: "truncate"
+generated: true
+---
 
-> .css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `truncate` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-truncate/index.scss";
+@import "@primer/css/truncate/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/truncate](https://primer.style/css/components/truncate).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/truncate.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.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

@@ -3,18 +3,22 @@
 // css-truncate will shorten text with an ellipsis.
 
 .css-truncate {
-  // Truncate double target
-  //
-  // css-truncate will shorten text with an ellipsis. The maximum width
-  // of the truncated text can be changed by overriding the max-width
-  // of the .css-truncate-target
+
+  // css-truncate-auto will shorten text with an ellipsis when overflowing
+  &.css-truncate-overflow,
+  .css-truncate-overflow,
   &.css-truncate-target,
   .css-truncate-target {
-    display: inline-block;
-    max-width: 125px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+
+  // css-truncate-target will shorten text with an ellipsis and a max width
+  &.css-truncate-target,
+  .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
     vertical-align: top;
   }
 
@@ -25,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

@@ -1,37 +1,25 @@
-# Primer Utilities
+---
+bundle: "utilities"
+generated: true
+---
 
-> There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `utilities` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-utilities/index.scss";
+@import "@primer/css/utilities/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/utilities](https://primer.style/css/utilities).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/utilities/animations.scss

@@ -1,5 +1,4 @@
 // This file contains reusable animations for github.
-// stylelint-disable primer/selector-no-utility
 
 /* Fade in an element */
 .anim-fade-in {
@@ -26,6 +25,7 @@
 .anim-fade-out {
   animation-name: fade-out;
   animation-duration: 1s;
+  animation-fill-mode: forwards;
   animation-timing-function: ease-out;
 
   &.fast {
@@ -174,7 +174,8 @@
 }
 
 /* Increase scale of an element on hover */
-.hover-grow {
+.hover-grow,
+.anim-hover-grow {
   transition: transform 0.3s;
   backface-visibility: hidden;
 
@@ -182,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,56 +1,41 @@
 // Core border utilities
-// stylelint-disable primer/selector-no-utility
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
-
-/* Add a gray border on all sides */
-.border { border: $border !important; }
+// stylelint-disable block-opening-brace-space-before
 
 /* Add a gray border to the left and right */
+.border-x {
+  border-right: $border !important;
+  border-left: $border !important;
+}
+
+/* Add a gray border to the top and bottom */
 .border-y {
   border-top: $border !important;
   border-bottom: $border !important;
 }
 
-/* Remove borders from all sides */
-.border-0 { border: 0 !important; }
-
-.border-dashed { border-style: dashed !important; }
-
-$edges: (
-  top: (top-left, top-right),
-  right: (top-right, bottom-right),
-  bottom: (bottom-right, bottom-left),
-  left: (bottom-left, top-left)
-);
-
+/* Responsive gray borders */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Add a gray border */
-    /* Add a gray border to the top */
+    /* Add a gray border on all sides at/above this breakpoint */
+    .border#{$variant}        { border: $border !important; }
+    .border#{$variant}-0      { border: 0 !important; }
+
     .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
-    /* Remove the border-radius */
+    .rounded#{$variant}   { border-radius: $border-radius !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    /* Add a border-radius to all corners */
-    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
-    /* Add a 2x border-radius to all corners */
-    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !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 {
@@ -61,13 +46,19 @@ $edges: (
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius !important;
+          border-#{$corner}-radius: $border-radius-1 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius * 2 !important;
+          border-#{$corner}-radius: $border-radius-2 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-3 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius-3 !important;
         }
       }
     }
@@ -77,35 +68,8 @@ $edges: (
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !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: $white-fade-15 !important; }
-.border-white-fade-30 { border-color: $white-fade-30 !important; }
-.border-white-fade-50 { border-color: $white-fade-50 !important; }
-.border-white-fade-70 { border-color: $white-fade-70 !important; }
-.border-white-fade-85 { border-color: $white-fade-85 !important; }
+/* Change the border style to dashed, in conjunction with another utility */
+.border-dashed {
+  // stylelint-disable-next-line primer/borders
+  border-style: dashed !important;
+}

package/utilities/box-shadow.scss

@@ -1,22 +1,21 @@
 // Box shadow utilities
-// stylelint-disable primer/selector-no-utility
 
 // 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