jekyll-v4-theme-primer 0.9.0

data/_sass/@primer/css/toasts/toasts.scss

@@ -0,0 +1,127 @@
+// 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;
+
+  &:hover {
+    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);
+  }
+}

data/_sass/@primer/css/toggle-switch/index.scss

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

data/_sass/@primer/css/toggle-switch/toggle-switch.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/toggle_switch';

data/_sass/@primer/css/tooltips/index.scss

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

data/_sass/@primer/css/tooltips/tooltips.scss

@@ -0,0 +1,281 @@
+.tooltipped {
+  position: relative;
+}
+
+// This is the tooltip bubble
+.tooltipped::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: $em-spacer-5 $em-spacer-6;
+  font: normal normal 11px/1.5 $body-font;
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: 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(--color-neutral-emphasis-plus);
+  border-radius: $border-radius;
+  opacity: 0;
+}
+
+// This is the tooltip arrow
+.tooltipped::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: var(--color-neutral-emphasis-plus);
+  pointer-events: none;
+  content: '';
+  // stylelint-disable-next-line primer/borders
+  border: 6px $border-style transparent;
+  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;
+    animation-delay: $tooltip-delay;
+  }
+}
+
+.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%;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: 6px;
+  }
+
+  &::before {
+    top: auto;
+    right: 50%;
+    bottom: -7px;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: -6px;
+    border-bottom-color: var(--color-neutral-emphasis-plus);
+  }
+}
+
+.tooltipped-se {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -$spacer-3;
+  }
+}
+
+.tooltipped-sw::after {
+  margin-right: -$spacer-3;
+}
+
+// Tooltips above the object
+.tooltipped-n,
+.tooltipped-ne,
+.tooltipped-nw {
+  &::after {
+    right: 50%;
+    bottom: 100%;
+    // stylelint-disable-next-line primer/spacing
+    margin-bottom: 6px;
+  }
+
+  &::before {
+    top: -7px;
+    right: 50%;
+    bottom: auto;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: -6px;
+    border-top-color: var(--color-neutral-emphasis-plus);
+  }
+}
+
+.tooltipped-ne {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -$spacer-3;
+  }
+}
+
+.tooltipped-nw::after {
+  margin-right: -$spacer-3;
+}
+
+// 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%;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 6px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    bottom: 50%;
+    left: -7px;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -6px;
+    border-left-color: var(--color-neutral-emphasis-plus);
+  }
+}
+
+// tooltipped to the right
+.tooltipped-e {
+  &::after {
+    bottom: 50%;
+    left: 100%;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 6px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    right: -7px;
+    bottom: 50%;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -6px;
+    border-right-color: var(--color-neutral-emphasis-plus);
+  }
+}
+
+// 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: $tooltip-max-width;
+    word-wrap: break-word;
+    white-space: pre-line;
+    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;
+    }
+  }
+}

data/_sass/@primer/css/truncate/index.scss

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

data/_sass/@primer/css/truncate/truncate.scss

@@ -0,0 +1,2 @@
+@import '@primer/view-components/app/components/primer/truncate';
+@import '@primer/view-components/app/components/primer/beta/truncate';

data/_sass/@primer/css/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);
+  }
+}

data/_sass/@primer/css/utilities/borders.scss

@@ -0,0 +1,74 @@
+// Core border utilities
+// stylelint-disable block-opening-brace-space-before, primer/borders
+
+/* Add a gray border to the left and right */
+.border-x {
+  border-right: $border-rem !important;
+  border-left: $border-rem !important;
+}
+
+/* Add a gray border to the top and bottom */
+.border-y {
+  border-top: $border-rem !important;
+  border-bottom: $border-rem !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-rem !important; }
+    .border#{$variant}-0      { border: 0 !important; }
+
+    .border#{$variant}-top    { border-top: $border-rem !important; }
+    .border#{$variant}-right  { border-right: $border-rem !important; }
+    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    .border#{$variant}-left   { border-left: $border-rem !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: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-0 { border-radius: 0 !important; }
+    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $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: var(--primer-borderRadius-small, $border-radius-1) !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-3 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+        }
+      }
+    }
+  }
+}
+
+/* Add a 50% border-radius to make something into a circle */
+.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+
+/* Change the border style to dashed, in conjunction with another utility */
+.border-dashed {
+  border-style: dashed !important;
+}

data/_sass/@primer/css/utilities/box-shadow.scss

@@ -0,0 +1,25 @@
+// 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;
+}