@papillonbits/css 0.1.0

package/build/primer/utilities/animations.scss

@@ -0,0 +1,196 @@
+// This file contains reusable animations for github.
+
+/* Fade in an element */
+.anim-fade-in {
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-timing-function: ease-in-out;
+
+  &.fast {
+    animation-duration: 300ms;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Fade out an element */
+.anim-fade-out {
+  animation-name: fade-out;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+
+  &.fast {
+    animation-duration: 0.3s;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Fade in and slide up an element */
+.anim-fade-up {
+  opacity: 0;
+  animation-name: fade-up;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+  animation-delay: 1s;
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0.8;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Fade an element out and slide down */
+.anim-fade-down {
+  animation-name: fade-down;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0.5;
+    transform: translateY(100%);
+  }
+}
+
+/* Grow an element width from 0 to 100% */
+.anim-grow-x {
+  width: 0%;
+  animation-name: grow-x;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+  animation-delay: 0.5s;
+}
+
+@keyframes grow-x {
+  to { width: 100%; }
+}
+
+/* Shrink an element from 100% to 0% */
+.anim-shrink-x {
+  animation-name: shrink-x;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.5s;
+}
+
+@keyframes shrink-x {
+  to { width: 0%; }
+}
+
+/* Fade in an element and scale it fast */
+.anim-scale-in {
+  animation-name: scale-in;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Pulse an element's opacity */
+.anim-pulse {
+  animation-name: pulse;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.3;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.3;
+  }
+}
+
+/* Pulse in an element */
+.anim-pulse-in {
+  animation-name: pulse-in;
+  animation-duration: 0.5s;
+}
+
+@keyframes pulse-in {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+/* Increase scale of an element on hover */
+.hover-grow,
+.anim-hover-grow {
+  transition: transform 0.3s;
+  backface-visibility: hidden;
+
+  &:hover {
+    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/build/primer/utilities/borders.scss

@@ -0,0 +1,79 @@
+@import "../support/variables/misc.scss";
+@import "../support/variables/layout.scss";
+@import "../support/mixins/layout.scss";
+
+// Core border utilities
+// 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;
+}
+
+/* Responsive gray borders */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* 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; }
+    .border#{$variant}-right  { border-right: $border !important; }
+    .border#{$variant}-bottom { border-bottom: $border !important; }
+    .border#{$variant}-left   { border-left: $border !important; }
+
+    .border#{$variant}-top-0    { border-top: 0 !important; }
+    .border#{$variant}-right-0  { border-right: 0 !important; }
+    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
+    .border#{$variant}-left-0   { border-left: 0 !important; }
+
+    // Rounded corners
+    .rounded#{$variant}   { border-radius: $border-radius !important; }
+    .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 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: 0 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-1 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius-1 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius-2 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-3 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius-3 !important;
+        }
+      }
+    }
+  }
+}
+
+/* Add a 50% border-radius to make something into a circle */
+.circle { border-radius: 50% !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/build/primer/utilities/box-shadow.scss

@@ -0,0 +1,27 @@
+@import "../support/variables/misc.scss";
+
+// Box shadow utilities
+
+// Box shadows
+
+.color-shadow-small {
+  box-shadow: var(--color-shadow-small) !important;
+}
+
+.color-shadow-medium {
+  box-shadow: var(--color-shadow-medium) !important;
+}
+
+.color-shadow-large {
+  box-shadow: var(--color-shadow-large) !important;
+}
+
+.color-shadow-extra-large {
+  box-shadow: var(--color-shadow-extra-large) !important;
+}
+
+// Turn off box shadow
+
+.box-shadow-none {
+  box-shadow: none !important;
+}

package/build/primer/utilities/colors.scss

@@ -0,0 +1,95 @@
+// stylelint-disable block-opening-brace-space-before
+
+// Foreground
+
+.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; }
+
+.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-open      { color: var(--color-open-fg) !important; }
+.color-fg-closed    { color: var(--color-closed-fg) !important; }
+.color-fg-done      { color: var(--color-done-fg) !important; }
+.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
+
+.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !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-open          { background-color: var(--color-open-subtle) !important; }
+.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+
+.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
+.color-bg-closed-emphasis { background-color: var(--color-closed-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; }
+
+.color-bg-transparent { background-color: transparent !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-open          { border-color: var(--color-open-muted) !important; }
+.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+
+.color-border-closed          { border-color: var(--color-closed-muted) !important; }
+.color-border-closed-emphasis { border-color: var(--color-closed-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; }
+
+// Misc
+
+.color-fg-inherit {
+  color: inherit !important;
+}

package/build/primer/utilities/details.scss

@@ -0,0 +1,28 @@
+// stylelint-disable selector-max-type
+
+.details-overlay[open] > summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: ' ';
+  background: transparent;
+}
+
+.details-overlay-dark[open] > summary::before {
+  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/build/primer/utilities/flexbox.scss

@@ -0,0 +1,54 @@
+@import "../support/mixins/layout.scss";
+
+// Flex utility classes
+// 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}-column-reverse { flex-direction: column-reverse !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; }
+    .flex#{$variant}-justify-center   { justify-content: center !important; }
+    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
+    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+
+    .flex#{$variant}-items-start      { align-items: flex-start !important; }
+    .flex#{$variant}-items-end        { align-items: flex-end !important; }
+    .flex#{$variant}-items-center     { align-items: center !important; }
+    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
+    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+
+    .flex#{$variant}-content-start    { align-content: flex-start !important; }
+    .flex#{$variant}-content-end      { align-content: flex-end !important; }
+    .flex#{$variant}-content-center   { align-content: center !important; }
+    .flex#{$variant}-content-between  { align-content: space-between !important; }
+    .flex#{$variant}-content-around   { align-content: space-around !important; }
+    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+
+    // Item
+    .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; }
+    .flex#{$variant}-self-start       { align-self: flex-start !important; }
+    .flex#{$variant}-self-end         { align-self: flex-end !important; }
+    .flex#{$variant}-self-center      { align-self: center !important; }
+    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
+    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+
+    .flex#{$variant}-order-1 { order: 1 !important; }
+    .flex#{$variant}-order-2 { order: 2 !important; }
+    .flex#{$variant}-order-none { order: inherit !important; }
+  }
+}

package/build/primer/utilities/index.scss

@@ -0,0 +1,14 @@
+@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';
+// Visibility and display should always come last in the imports so that they override other utilities with !important
+@import './visibility-display.scss';

package/build/primer/utilities/layout.scss

@@ -0,0 +1,98 @@
+@import "../support/mixins/layout.scss";
+
+// Layout
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+
+/* Position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $position in $responsive-positions {
+      .position#{$variant}-#{$position} {
+        position: $position !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; }
+/* Vertical align top */
+.v-align-top         { vertical-align: top !important; }
+/* Vertical align bottom */
+.v-align-bottom      { vertical-align: bottom !important; }
+/* Vertical align to the top of the text */
+.v-align-text-top    { vertical-align: text-top !important; }
+/* Vertical align to the bottom of the text */
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+/* Vertical align to the parent's baseline */
+.v-align-baseline    { vertical-align: baseline !important; }
+
+// Overflow utilities
+@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 */
+.clearfix {
+  @include clearfix;
+}
+
+// Floats
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Float to the left */
+    .float#{$variant}-left  { float: left !important; }
+    /* Float to the right */
+    .float#{$variant}-right  { float: right !important; }
+    /* No float */
+    .float#{$variant}-none { float: none !important; }
+  }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+/* Max width 100% */
+.width-fit   { max-width: 100% !important; }
+/* Set the width to 100% */
+.width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
+/* Set the height to 100% */
+.height-full { height: 100% !important; }
+
+/* Remove min-width from element */
+.min-width-0 { min-width: 0 !important; }
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+
+    // Auto variants
+    .width#{$variant}-auto { width: auto !important; }
+
+    /* Set the direction to rtl */
+    .direction#{$variant}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr */
+    .direction#{$variant}-ltr { direction: ltr !important; }
+  }
+}

package/build/primer/utilities/margin.scss

@@ -0,0 +1,74 @@
+@import "../support/variables/layout.scss";
+@import "../support/mixins/layout.scss";
+
+// Margin spacer utilities
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
+
+// 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-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 bottom at $breakpoint */
+      .mb#{$variant}-#{$scale} { margin-bottom: $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 bottom at $breakpoint */
+        .mb#{$variant}-n#{$scale} { margin-bottom: -$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; }
+        }
+      }
+
+      @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 */
+      .my#{$variant}-#{$scale} {
+        margin-top: $size !important;
+        margin-bottom: $size !important;
+      }
+    }
+
+    /* responsive horizontal auto margins */
+    .mx#{$variant}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
+  }
+}
+
+.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; }