@papillonbits/components 1.1.0 → 1.2.0

package/build/primer/Layout/page-layout.scss

@@ -4,7 +4,7 @@
 // stylelint-disable no-duplicate-selectors
 // stylelint-disable media-query-no-invalid
 
-$Layout-divider-color: var(--color-border-default) !default;
+$Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
 $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 :root {
@@ -12,16 +12,45 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   --Layout-content-width: 100%;
   --Layout-template-columns: 1fr var(--Layout-pane-width);
   --Layout-template-areas: 'content pane';
-  --Layout-column-gap: #{$spacer-3};
-  --Layout-row-gap: #{$spacer-3};
+  --Layout-column-gap: var(--base-size-16);
+  --Layout-row-gap: var(--base-size-16);
 
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-outer-spacing-x: 0px; // wrapper margin x
   --Layout-outer-spacing-y: 0px; // wrapper margin y
   --Layout-inner-spacing-min: 0px; // default region padding
   --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
-  // stylelint-enable length-zero-no-unit
+}
+
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  // stylelint-disable-next-line primer/spacing
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  content: '';
+  background-color: $Layout-divider-color;
+}
+
+@mixin Layout-filled-divider {
+  position: absolute;
+  bottom: calc(var(--base-size-8) * -1);
+  // stylelint-disable-next-line primer/spacing
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: var(--base-size-8);
+  content: '';
+  background-color: var(--bgColor-inset, var(--color-canvas-inset));
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow:
+    inset 0 1px $Layout-divider-color,
+    inset 0 -1px $Layout-divider-color;
 }
 
 .PageLayout {
@@ -231,6 +260,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
       &::before {
         @include Layout-line-divider;
 
+        // stylelint-disable-next-line primer/spacing
         top: calc(#{$border-width * -1} - var(--Layout-row-gap));
       }
     }
@@ -243,6 +273,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
       &::after {
         @include Layout-line-divider;
 
+        // stylelint-disable-next-line primer/spacing
         bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
       }
     }
@@ -250,24 +281,26 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
     .PageLayout-region--dividerNarrow-filled-before {
       position: relative;
       // stylelint-disable-next-line primer/spacing
-      margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
+      margin-top: calc(var(--base-size-8) + var(--Layout-row-gap));
 
       &::after {
         @include Layout-filled-divider;
 
-        top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+        // stylelint-disable-next-line primer/spacing
+        top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
       }
     }
 
     .PageLayout-region--dividerNarrow-filled-after {
       position: relative;
       // stylelint-disable-next-line primer/spacing
-      margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
+      margin-bottom: calc(var(--base-size-8) + var(--Layout-row-gap));
 
       &::before {
         @include Layout-filled-divider;
 
-        bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+        // stylelint-disable-next-line primer/spacing
+        bottom: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
       }
     }
   }
@@ -306,74 +339,72 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 // outer spacing
 
 .PageLayout--outerSpacing-normal {
-  --Layout-outer-spacing-x: #{$spacer-3};
-  --Layout-outer-spacing-y: #{$spacer-3};
+  --Layout-outer-spacing-x: var(--base-size-16);
+  --Layout-outer-spacing-y: var(--base-size-16);
 
   @include breakpoint(lg) {
-    --Layout-outer-spacing-x: #{$spacer-4};
-    --Layout-outer-spacing-y: #{$spacer-4};
+    --Layout-outer-spacing-x: var(--base-size-24);
+    --Layout-outer-spacing-y: var(--base-size-24);
   }
 }
 
 .PageLayout--outerSpacing-condensed {
-  --Layout-outer-spacing-x: #{$spacer-3};
-  --Layout-outer-spacing-y: #{$spacer-3};
+  --Layout-outer-spacing-x: var(--base-size-16);
+  --Layout-outer-spacing-y: var(--base-size-16);
 }
 
 // inner spacing
 
 .PageLayout--innerSpacing-normal {
-  --Layout-inner-spacing-min: #{$spacer-3};
-  --Layout-inner-spacing-max: #{$spacer-3};
+  --Layout-inner-spacing-min: var(--base-size-16);
+  --Layout-inner-spacing-max: var(--base-size-16);
 
   @include breakpoint(lg) {
-    --Layout-inner-spacing-max: #{$spacer-4};
+    --Layout-inner-spacing-max: var(--base-size-24);
   }
 }
 
 .PageLayout--innerSpacing-condensed {
-  --Layout-inner-spacing-min: #{$spacer-3};
-  --Layout-inner-spacing-max: #{$spacer-3};
+  --Layout-inner-spacing-min: var(--base-size-16);
+  --Layout-inner-spacing-max: var(--base-size-16);
 }
 
 // column gap
 
 .PageLayout--columnGap-normal {
-  --Layout-column-gap: #{$spacer-3};
+  --Layout-column-gap: var(--base-size-16);
 
   @include breakpoint(lg) {
-    --Layout-column-gap: #{$spacer-4};
+    --Layout-column-gap: var(--base-size-24);
   }
 }
 
 .PageLayout--columnGap-condensed {
-  --Layout-column-gap: #{$spacer-3};
+  --Layout-column-gap: var(--base-size-16);
 }
 
 .PageLayout--columnGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable-next-line length-zero-no-unit
   --Layout-column-gap: 0px;
 }
 
 // row gap
 
 .PageLayout--rowGap-normal {
-  --Layout-row-gap: #{$spacer-3};
+  --Layout-row-gap: var(--base-size-16);
 
   @include breakpoint(lg) {
-    --Layout-row-gap: #{$spacer-4};
+    --Layout-row-gap: var(--base-size-24);
   }
 }
 
 .PageLayout--rowGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-row-gap: 0px;
 }
 
 .PageLayout--rowGap-condensed {
-  --Layout-row-gap: #{$spacer-3};
+  --Layout-row-gap: var(--base-size-16);
 }
 
 // regions

package/build/primer/Layout/stack.scss

@@ -1,7 +1,8 @@
 // stylelint-disable custom-property-pattern
-// Stack layout helper component
 // stylelint-disable media-query-no-invalid
 
+// Stack layout helper component
+
 .Stack {
   // A Stack component lays elements horizontally or vertically on the page.
   //
@@ -26,12 +27,12 @@
   // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
   // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
 
-  $Stack-gap-default: var(--primer-stack-gap-normal, 16px);
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
 
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
   --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
-  --Stack-divider-color: var(--color-border-default);
+  --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
 
   display: flex;
   flex-flow: column;
@@ -66,18 +67,18 @@
   }
 
   .Stack--gap-condensed#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
   }
 
   .Stack--gap-normal#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
   }
 
   // There's no .Stack--gap-spacious-whenNarrow
   // Narrow viewports render `spacious` gap as `normal`
   @if $viewportRange != '-whenNarrow' {
     .Stack--gap-spacious#{$viewportRange} {
-      --Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
     }
   }
 
@@ -162,14 +163,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }

package/build/primer/Navigation/Menu/Menu.scss

@@ -1,123 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-
-// Side menu
-//
-// A menu on the side of a page, defaults to left side. e.g. github.com/about
-
-.menu {
-  margin-bottom: $spacer-3;
-  list-style: none;
-  background-color: var(--color-canvas-default);
-  border: $border-width $border-style var(--color-border-default);
-  border-radius: $border-radius;
-}
-
-.menu-item {
-  position: relative;
-  display: block;
-  padding: $spacer-2 $spacer-3;
-  color: var(--color-fg-default);
-  border-bottom: $border-width $border-style var(--color-border-muted);
-
-  &:first-child {
-    border-top: 0;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-
-    &::before {
-      border-top-left-radius: $border-radius;
-    }
-  }
-
-  &:last-child {
-    border-bottom: 0;
-    border-bottom-right-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-
-    &::before {
-      border-bottom-left-radius: $border-radius;
-    }
-  }
-
-  &:hover {
-    text-decoration: none;
-    background-color: var(--color-neutral-subtle);
-  }
-
-  &:active {
-    background-color: var(--color-canvas-subtle);
-  }
-
-  &.selected,
-  &[aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    cursor: default;
-    background-color: var(--color-menu-bg-active);
-
-    &::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 2px;
-      content: '';
-      background-color: var(--color-primer-border-active);
-    }
-  }
-
-  .octicon {
-    width: 16px;
-    margin-right: $spacer-2;
-    color: var(--color-fg-muted);
-    text-align: center;
-  }
-
-  .Counter {
-    float: right;
-    margin-left: $spacer-1;
-  }
-
-  .menu-warning {
-    float: right;
-    color: var(--color-attention-fg);
-  }
-
-  .avatar {
-    float: left;
-    margin-right: $spacer-1;
-  }
-
-  &.alert {
-    .Counter {
-      color: var(--color-danger-fg);
-    }
-  }
-}
-
-.menu-heading {
-  display: block;
-  padding: $spacer-2 $spacer-3;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: inherit;
-  font-weight: $font-weight-bold;
-  color: var(--color-fg-default);
-  border-bottom: $border-width $border-style var(--color-border-muted);
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:first-child {
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-  }
-
-  &:last-child {
-    border-bottom: 0;
-    border-bottom-right-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/menu';

package/build/primer/Navigation/TabNav/TabNav.scss

@@ -1,120 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-
-// Outer wrapper
-// stylelint-disable no-descending-specificity
-// stylelint-disable selector-max-type
-.tabnav {
-  margin-top: 0;
-  margin-bottom: $spacer-3;
-  border-bottom: $border-width $border-style var(--color-border-default);
-}
-
-.tabnav-tabs {
-  display: flex;
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: -1px;
-  overflow: auto;
-}
-
-.tabnav-tab {
-  display: inline-block;
-  flex-shrink: 0;
-  padding: $spacer-2 $spacer-3;
-  font-size: $h5-size;
-  // stylelint-disable-next-line primer/typography
-  line-height: 23px;
-  color: var(--color-fg-muted);
-  text-decoration: none;
-  background-color: transparent;
-  border: $border-width $border-style transparent;
-  border-bottom: 0;
-  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-
-  &.selected,
-  &[aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-default); // cover bottom border
-    border-color: var(--color-border-default);
-    border-radius: $border-radius $border-radius 0 0;
-
-    .octicon {
-      color: inherit;
-    }
-  }
-
-  &:hover {
-    color: var(--color-fg-default);
-    text-decoration: none;
-    transition-duration: 0.1s;
-  }
-
-  &:focus,
-  &:focus-visible {
-    border-radius: $border-radius $border-radius 0 0 !important;
-    outline-offset: -6px;
-  }
-
-  &:active {
-    color: var(--color-fg-muted);
-  }
-
-  .octicon {
-    margin-right: $spacer-1;
-    color: var(--color-fg-muted);
-  }
-
-  .Counter {
-    margin-left: $spacer-1;
-    color: inherit;
-  }
-}
-
-// Tabnav extras
-//
-// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
-// inline text or links.
-
-.tabnav-extra {
-  display: inline-block;
-  // stylelint-disable-next-line primer/spacing
-  padding-top: 10px;
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 10px;
-  font-size: $font-size-small;
-  color: var(--color-fg-muted);
-
-  > .octicon {
-    // stylelint-disable-next-line primer/spacing
-    margin-right: 2px;
-  }
-}
-
-// When tabnav-extra are anchors
-// stylelint-disable-next-line selector-no-qualifying-type
-a.tabnav-extra:hover {
-  color: var(--color-accent-fg);
-  text-decoration: none;
-}
-
-// Tabnav buttons
-//
-// For when there are multiple buttons, space them out appropriately. Requires
-// the buttons to be floated or inline-block.
-
-.tabnav-btn {
-  margin-left: $spacer-2;
-}
-
-// custom-style
-// .tabnav-inactive,
-// .tabnav-tab-inactive {
-//   @include inactive;
-// }
-
-// custom-style
-.tabnav-tab-hidden {
-  display: none;
-}
+@import '@primer/view-components/app/components/primer/alpha/tab_nav';

package/build/primer/Navigation/UnderlineNav/UnderlineNav.scss

@@ -1,141 +1 @@
-@import '~@papillonbits/css/build/primer/support/mixins/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-
-// stylelint-disable no-descending-specificity
-$nav-height: $spacer-3 * 3 !default; // 48px
-
-.UnderlineNav {
-  display: flex;
-  min-height: $nav-height;
-  overflow: auto hidden;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
-  -webkit-overflow-scrolling: auto;
-  justify-content: space-between;
-
-  .Counter {
-    margin-left: $spacer-2;
-    color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
-
-    &--primary {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-neutral-emphasis);
-    }
-  }
-}
-
-.UnderlineNav-body {
-  display: flex;
-  align-items: center;
-  gap: $spacer-2;
-  list-style: none;
-}
-
-.UnderlineNav-item {
-  position: relative;
-  display: flex;
-  padding: 0 $spacer-2;
-  font-size: $body-font-size;
-  // stylelint-disable-next-line primer/typography
-  line-height: 30px;
-  color: var(--color-fg-default);
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  border-radius: $border-radius;
-  align-items: center;
-
-  &:hover,
-  &:focus,
-  &:focus-visible {
-    color: var(--color-fg-default);
-    text-decoration: none;
-    border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -2px;
-    transition: border-bottom-color 0.12s ease-out;
-  }
-
-  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-  [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: $font-weight-bold;
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-  // increase touch target area
-  &::before {
-    @include minTouchTarget($min-height: $nav-height);
-  }
-
-  // hover state was "sticking" on mobile after click
-  @media (pointer: fine) {
-    &:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
-    }
-  }
-
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
-
-    // current/selected underline
-    &::after {
-      position: absolute;
-      right: 50%;
-      // 48px total height / 2 (24px) + 1px
-      bottom: calc(50% - 25px);
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-primer-border-active);
-      border-radius: $border-radius;
-      transform: translate(50%, -50%);
-    }
-  }
-}
-
-.UnderlineNav--right {
-  justify-content: flex-end;
-
-  .UnderlineNav-actions {
-    flex: 1 1 auto;
-  }
-}
-
-.UnderlineNav-actions {
-  align-self: center;
-}
-
-.UnderlineNav--full {
-  display: block;
-
-  // required for underline to align with additional wrapper element
-  .UnderlineNav-body {
-    min-height: $nav-height;
-  }
-}
-
-.UnderlineNav-octicon {
-  display: inline !important;
-  margin-right: $spacer-2;
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
-}
-
-.UnderlineNav-container {
-  display: flex;
-  justify-content: space-between;
-}
+@import '@primer/view-components/app/components/primer/alpha/underline_nav';