@papillonbits/components 1.1.0 → 1.2.0

package/build/primer/Pagination/PreviousNext/PreviousNext.scss

@@ -1,9 +1,10 @@
 @import '~@papillonbits/css/build/primer/support/mixins/layout.scss';
 @import '~@papillonbits/css/build/primer/support/variables/misc.scss';
 
+// stylelint-disable custom-property-pattern
+
 // Needs refactoring
 // stylelint-disable selector-max-type
-// stylelint-disable no-descending-specificity
 .pagination {
   a,
   span,
@@ -14,39 +15,41 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
+    // stylelint-disable-next-line primer/borders
     border: $border-width $border-style transparent;
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
     transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--color-border-default);
+      border-color: var(--borderColor-default, var(--color-border-default));
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
     border-color: transparent;
   }
 
@@ -56,7 +59,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled='true']:hover {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
     border-color: transparent;
   }
@@ -71,12 +74,12 @@
       vertical-align: text-bottom;
       content: '';
       // stylelint-disable-next-line primer/colors
-      background-color: currentcolor; // prettier-ignore
+      background-color: currentcolor;
     }
 
     // chevron-left
     .previous_page::before {
-      margin-right: $spacer-1;
+      margin-right: var(--base-size-4);
       clip-path: polygon(
         9.8px 12.8px,
         8.7px 12.8px,
@@ -92,7 +95,7 @@
 
     // chevron-right
     .next_page::after {
-      margin-left: $spacer-1;
+      margin-left: var(--base-size-4);
       clip-path: polygon(
         6.2px 3.2px,
         7.3px 3.2px,
@@ -148,21 +151,11 @@
 
 // Unified centered pagination across the site
 .paginate-container {
-  margin-top: $spacer-3;
-  margin-bottom: $spacer-3;
+  margin-top: var(--base-size-16);
+  margin-bottom: var(--base-size-16);
   text-align: center;
 
   .pagination {
     display: inline-block;
   }
 }
-
-// custom-style
-// .previousnext-inactive {
-//   @include inactive;
-
-//   span,
-//   a {
-//     color: $gray-400 !important;
-//   }
-// }

package/build/primer/Popover/Popover.scss

@@ -1,227 +1 @@
-// stylelint-disable media-query-no-invalid
-
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/mixins/layout.scss';
-
-.Popover {
-  position: absolute;
-  z-index: 100;
-}
-
-.Popover-message {
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  background-color: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
-  border-radius: $border-radius;
-
-  // Carets
-  &::before,
-  &::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    top: -$spacer-3;
-    // stylelint-disable-next-line primer/spacing
-    margin-left: -9px;
-    // stylelint-disable-next-line primer/borders
-    border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-default);
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -$spacer-2;
-    // stylelint-disable-next-line primer/borders
-    border: 7px $border-style transparent;
-    border-bottom-color: var(--color-canvas-overlay);
-  }
-}
-
-// No caret
-.Popover-message--no-caret {
-  &::before,
-  &::after {
-    display: none;
-  }
-}
-
-// Bottom-oriented carets
-.Popover-message--bottom,
-.Popover-message--bottom-right,
-.Popover-message--bottom-left {
-  &::before,
-  &::after {
-    top: auto;
-    border-bottom-color: transparent;
-  }
-
-  &::before {
-    bottom: -$spacer-3;
-    border-top-color: var(--color-border-default);
-  }
-
-  &::after {
-    bottom: -14px;
-    border-top-color: var(--color-canvas-overlay);
-  }
-}
-
-// Top & Bottom: Right-oriented carets
-.Popover-message--top-right,
-.Popover-message--bottom-right {
-  right: -9px;
-  margin-right: 0;
-
-  &::before,
-  &::after {
-    left: auto;
-    margin-left: 0;
-  }
-
-  &::before {
-    right: 20px;
-  }
-
-  &::after {
-    right: 21px;
-  }
-}
-
-// Top & Bottom: Left-oriented carets
-.Popover-message--top-left,
-.Popover-message--bottom-left {
-  left: -9px;
-  margin-left: 0;
-
-  &::before,
-  &::after {
-    left: $spacer-4;
-    margin-left: 0;
-  }
-
-  &::after {
-    left: $spacer-4 + 1;
-  }
-}
-
-// Right- & Left-oriented carets
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom,
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: 50%;
-    left: auto;
-    margin-left: 0;
-    border-bottom-color: transparent;
-  }
-
-  &::before {
-    // stylelint-disable-next-line function-no-unknown
-    margin-top: -($spacer-2 + 1);
-  }
-
-  &::after {
-    margin-top: -$spacer-2;
-  }
-}
-
-// Right-oriented carets
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom {
-  &::before {
-    right: -$spacer-3;
-    border-left-color: var(--color-border-default);
-  }
-
-  &::after {
-    right: -14px;
-    border-left-color: var(--color-canvas-overlay);
-  }
-}
-
-// Left-oriented carets
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before {
-    left: -$spacer-3;
-    border-right-color: var(--color-border-default);
-  }
-
-  &::after {
-    left: -14px;
-    border-right-color: var(--color-canvas-overlay);
-  }
-}
-
-// Right & Left: Top-oriented carets
-.Popover-message--right-top,
-.Popover-message--left-top {
-  &::before,
-  &::after {
-    top: $spacer-4;
-  }
-}
-
-// Right & Left: Bottom-oriented carets
-.Popover-message--right-bottom,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: auto;
-  }
-
-  &::before {
-    bottom: $spacer-3;
-  }
-
-  &::after {
-    bottom: $spacer-3 + 1;
-  }
-}
-
-.Popover-message--large {
-  @include breakpoint(sm) {
-    min-width: 320px;
-  }
-}
-
-// Responsive Popover
-// For < md it will show full-width anchored to the bottom
-
-@media (max-width: ($width-md - 0.02px)) {
-  .Popover {
-    position: fixed;
-    inset: auto 0 0 !important;
-  }
-
-  .Popover-message {
-    inset: auto;
-    width: auto !important;
-    margin: $spacer-2;
-  }
-
-  // Increase tap area for touch input
-  .Popover-message > .btn-octicon {
-    padding: $spacer-2 + $spacer-1 !important;
-  }
-
-  // Remove caret
-  .Popover-message::after,
-  .Popover-message::before {
-    display: none;
-  }
-}
+@import '@primer/view-components/app/components/primer/beta/popover';

package/build/primer/Progress/Progress.scss

@@ -1,29 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-
-// Progress
-
-.Progress {
-  display: flex;
-  height: 8px;
-  overflow: hidden;
-  background-color: var(--color-neutral-muted);
-  border-radius: $border-radius;
-  outline: 1px solid transparent; // Support Firefox custom colors
-}
-
-.Progress--large {
-  height: 10px;
-}
-
-.Progress--small {
-  height: 5px;
-}
-
-.Progress-item {
-  outline: 2px solid transparent; // Support Firefox custom colors
-}
-
-.Progress-item + .Progress-item {
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 2px;
-}
+@import '@primer/view-components/app/components/primer/beta/progress_bar';