@papillonarts/css 0.6.0 → 0.8.0

package/build/primer/support/mixins/misc.scss

@@ -1,11 +1,12 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
   &::after,
   &::before {
     position: absolute;
+    // stylelint-disable-next-line primer/spacing
     top: 11px;
     right: 100%;
-    left: -8px;
+    left: calc(var(--base-size-8) * -1);
     display: block;
     width: 8px;
     height: 16px;
@@ -17,11 +18,12 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
     background-image: linear-gradient($background, $background);
   }
 
   &::before {
+    // stylelint-disable-next-line primer/colors
     background-color: $border;
   }
 }
@@ -29,31 +31,35 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+  // stylelint-disable-next-line primer/colors
+  border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
 
 // box-shadow for :target styles (no inset)
 // !important to override PCSS utilities
-@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
 }
 
 // outline with fg box-shadow for buttons
-@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }
 
 // if min-width is undefined, return only min-height

package/build/primer/support/mixins/typography.scss

@@ -1,5 +1,3 @@
-@import "../variables/typography.scss";
-
 // Text hiding for image based text replacement.
 // Higher performance than -9999px because it only renders
 // the size of the actual text, not a full 9999px box.
@@ -12,32 +10,44 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size, $h1-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size, $h2-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size, $h3-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h4-size, $h4-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h5-size, $h5-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h6-size, $h6-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
@@ -45,28 +55,34 @@
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h1-size, $h1-size);
   }
 }
 
 @mixin f2-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h2-size, $h2-size);
   }
 }
 
 @mixin f3-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h3-size, $h3-size);
   }
 }
@@ -77,17 +93,20 @@
 @mixin h1-responsive {
   @include f1-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }

package/build/primer/support/variables/misc.scss

@@ -3,8 +3,8 @@
 // Border
 $border-width: 1px !default;
 $border-style: solid !default;
-$border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

package/build/primer/support/variables/typography.scss

@@ -32,11 +32,11 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 
 // Font stacks
-$body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
+$body-font: var(--fontStack-sansSerif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji') !default;
 
 // Monospace font stack
 // 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;
+$mono-font: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace) !default;
 
 // The base body size
 $body-font-size: 14px !default;

package/build/primer/table-object/index.scss

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

package/build/primer/table-object/table-object.scss

@@ -0,0 +1,23 @@
+// Deprecated
+// TODO: Replace TableObject with flexbox or a new Table component
+
+// TableObject is a module for creating dynamically resizable elements that
+// always sit on the same horizontal line (e.g., they never wrap). Using
+// tables means it's cross browser friendly.
+
+.TableObject {
+  display: table;
+}
+
+// Place this on every "cell"
+.TableObject-item {
+  display: table-cell;
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+// Place this on the largest or most important "cell"
+.TableObject-item--primary {
+  width: 99%;
+}

package/build/primer/toasts/README.md

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

package/build/primer/toasts/index.scss

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

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;
+    }
+  }
+}