@papillonbits/css 1.3.0 → 1.5.0

package/build/primer/toasts/toasts.scss

@@ -0,0 +1,129 @@
+// Toast
+
+.Toast {
+  display: flex;
+  margin: var(--base-size-8);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  @include breakpoint(sm) {
+    width: max-content;
+    max-width: 450px;
+    margin: var(--base-size-16);
+  }
+}
+
+.Toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--base-size-16) * 3);
+  flex-shrink: 0;
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style transparent;
+  border-right: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.Toast-content {
+  padding: var(--base-size-16);
+}
+
+.Toast-dismissButton {
+  max-height: 54px; // keeps button aligned to the top
+  padding: var(--base-size-16);
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
+// Modifier
+
+.Toast--loading {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
+  }
+}
+
+.Toast--error {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
+  }
+}
+
+.Toast--warning {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
+  }
+}
+
+.Toast--success {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-success-emphasis, 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/build/primer/tooltips/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "tooltips"
+generated: true
+---
+
+# Primer CSS: `tooltips` bundle
+
+## Usage
+
+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/css/tooltips/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/tooltips.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/tooltips/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './tooltips.scss';

package/build/primer/tooltips/tooltips.scss

@@ -0,0 +1,228 @@
+/* stylelint-disable primer/spacing */
+
+.tooltipped {
+  position: relative;
+}
+
+// This is the tooltip bubble
+.tooltipped::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
+  font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+  border-radius: var(--borderRadius-medium);
+  opacity: 0;
+}
+
+// delay animation for tooltip
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus {
+  &::before,
+  &::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: $tooltip-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }
+}
+
+.tooltipped-no-delay:hover,
+.tooltipped-no-delay:active,
+.tooltipped-no-delay:focus {
+  &::before,
+  &::after {
+    animation-delay: 0s;
+  }
+}
+
+.tooltipped-multiline:hover,
+.tooltipped-multiline:active,
+.tooltipped-multiline:focus {
+  &::after {
+    display: table-cell;
+  }
+}
+
+// Tooltipped south
+.tooltipped-s,
+.tooltipped-se,
+.tooltipped-sw {
+  &::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 6px;
+  }
+}
+
+.tooltipped-se {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: calc(var(--base-size-16) * -1);
+  }
+}
+
+.tooltipped-sw::after {
+  margin-right: calc(var(--base-size-16) * -1);
+}
+
+// Tooltips above the object
+.tooltipped-n,
+.tooltipped-ne,
+.tooltipped-nw {
+  &::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 6px;
+  }
+}
+
+.tooltipped-ne {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: calc(var(--base-size-16) * -1);
+  }
+}
+
+.tooltipped-nw::after {
+  margin-right: calc(var(--base-size-16) * -1);
+}
+
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after,
+.tooltipped-n::after {
+  transform: translateX(50%);
+}
+
+// Tooltipped to the left
+.tooltipped-w {
+  &::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 6px;
+    transform: translateY(50%);
+  }
+}
+
+// tooltipped to the right
+.tooltipped-e {
+  &::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 6px;
+    transform: translateY(50%);
+  }
+}
+
+// Tooltip align right and left
+.tooltipped-align-right-1,
+.tooltipped-align-right-2 {
+  &::after {
+    right: 0;
+    margin-right: 0;
+  }
+}
+
+.tooltipped-align-right-1 {
+  &::before {
+    right: 10px;
+  }
+}
+
+.tooltipped-align-right-2 {
+  &::before {
+    right: 15px;
+  }
+}
+
+.tooltipped-align-left-1,
+.tooltipped-align-left-2 {
+  &::after {
+    left: 0;
+    margin-left: 0;
+  }
+}
+
+.tooltipped-align-left-1 {
+  &::before {
+    left: 5px;
+  }
+}
+
+.tooltipped-align-left-2 {
+  &::before {
+    left: 10px;
+  }
+}
+
+// Multiline tooltips
+//
+// `.tooltipped-multiline` Add this class when you have long content.
+// The downside is you cannot preformat the text with newlines and `[w,e]`
+// are always `$tooltip-max-width` wide.
+.tooltipped-multiline {
+  &::after {
+    width: max-content;
+    max-width: var(--overlay-width-small, 20rem);
+    word-wrap: break-word;
+    white-space: pre-line;
+    // stylelint-disable-next-line primer/borders
+    border-collapse: separate;
+  }
+
+  &.tooltipped-s::after,
+  &.tooltipped-n::after {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.tooltipped-w::after,
+  &.tooltipped-e::after {
+    right: 100%;
+  }
+}
+
+// Sticky tooltips
+//
+// Always show the tooltip.
+.tooltipped-sticky {
+  &::before,
+  &::after {
+    display: inline-block;
+  }
+
+  &.tooltipped-multiline {
+    &::after {
+      display: table-cell;
+    }
+  }
+}

package/build/primer/utilities/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "utilities"
+generated: true
+---
+
+# Primer CSS: `utilities` bundle
+
+## Usage
+
+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/css/utilities/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/utilities/borders.scss

@@ -1,19 +1,23 @@
-@import "../support/variables/misc.scss";
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
+@import '../support/variables/misc.scss';
 
 // Core border utilities
 // stylelint-disable primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {
+  // stylelint-disable-next-line primer/colors
   border-right: $border-rem !important;
+  // stylelint-disable-next-line primer/colors
   border-left: $border-rem !important;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
+  // stylelint-disable-next-line primer/colors
   border-top: $border-rem !important;
+  // stylelint-disable-next-line primer/colors
   border-bottom: $border-rem !important;
 }
 
@@ -21,12 +25,17 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     /* Add a gray border on all sides at/above this breakpoint */
+    // stylelint-disable-next-line primer/colors
     .border#{$variant}        { border: $border-rem !important; }
     .border#{$variant}-0      { border: 0 !important; }
 
+    // stylelint-disable-next-line primer/colors
     .border#{$variant}-top    { border-top: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
     .border#{$variant}-right  { border-right: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
     .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
     .border#{$variant}-left   { border-left: $border-rem !important; }
 
     .border#{$variant}-top-0    { border-top: 0 !important; }

package/build/primer/utilities/box-shadow.scss

@@ -1,5 +1,3 @@
-@import "../support/variables/misc.scss";
-
 // Box shadow utilities
 
 // Box shadows

package/build/primer/utilities/colors.scss

@@ -1,4 +1,3 @@
-// stylelint-disable block-opening-brace-space-before
 
 // Foreground
 

package/build/primer/utilities/details.scss

@@ -1,4 +1,4 @@
-@import "../support/mixins/misc.scss";
+@import '../support/mixins/misc.scss';
 
 // stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 

package/build/primer/utilities/flexbox.scss

@@ -1,4 +1,5 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Flex utility classes
 @each $breakpoint, $variant in $responsive-variants {

package/build/primer/utilities/layout.scss

@@ -1,7 +1,7 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Layout
-// stylelint-disable comment-empty-line-before
 
 /* Position */
 @each $breakpoint, $variant in $responsive-variants {

package/build/primer/utilities/margin.scss

@@ -1,8 +1,7 @@
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Margin spacer utilities
-// stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 
 // Loop through the breakpoint values

package/build/primer/utilities/padding.scss

@@ -1,8 +1,7 @@
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Padding spacer utilities
-// stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 
 // Responsive padding spacer utilities

package/build/primer/utilities/typography.scss

@@ -1,7 +1,7 @@
-@import "../support/variables/typography.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/typography.scss';
 
-// stylelint-disable comment-empty-line-before, primer/typography
+// stylelint-disable primer/typography
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -290,6 +290,7 @@
 
 /* Force long "words" to wrap if they exceed the width of the container */
 .wb-break-word {
+    // stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
   word-break: break-word !important;
   // this is for backwards compatibility with browsers that don't respect overflow-wrap
   word-wrap: break-word !important;

package/build/primer/utilities/visibility-display.scss

@@ -1,4 +1,5 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Visibility and display utilities
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/css",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Papillon Bits CSS",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/css",
   "repository": {
@@ -23,5 +23,5 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "b311be8dc109fd3b709526949dfeb0e43ad1c564"
+  "gitHead": "37d2e11cddea38bf89dd90d8167f3fe5ee8bdcfa"
 }