@papillonbits/components 1.1.0 → 1.2.0

package/build/primer/Label/issue-labels.scss

@@ -9,9 +9,12 @@
 
   .g-emoji {
     position: relative;
+    // stylelint-disable-next-line primer/spacing
     top: -0.05em;
     display: inline-block;
+    // stylelint-disable-next-line primer/typography
     font-size: 1em;
+    // stylelint-disable-next-line primer/typography
     line-height: $lh-condensed-ultra;
   }
 

package/build/primer/Label/labels.scss

@@ -1,94 +1 @@
-@import './mixins.scss';
-
-// Labels
-
-// Provide a wrapper to ensure labels stick together
-.labels {
-  position: relative;
-}
-
-// Default label
-
-.label, // TODO: Deprecate
-.Label {
-  @include labels-base;
-
-  border-color: var(--color-border-default);
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-// Large
-
-.Label--large {
-  @include labels-large;
-}
-
-// Inline
-
-.Label--inline {
-  @include labels--inline;
-}
-
-// Contrast
-
-.Label--primary {
-  color: var(--color-fg-default);
-  border-color: var(--color-neutral-emphasis);
-}
-
-.Label--secondary {
-  color: var(--color-fg-muted);
-  border-color: var(--color-border-default);
-}
-
-// Colors
-
-.Label--info, // TODO: deprecate
-.Label--accent {
-  color: var(--color-accent-fg);
-  border-color: var(--color-accent-emphasis);
-}
-
-.Label--success {
-  color: var(--color-success-fg);
-  border-color: var(--color-success-emphasis);
-}
-
-.Label--warning, // TODO: deprecate
-.Label--attention {
-  color: var(--color-attention-fg);
-  border-color: var(--color-attention-emphasis);
-}
-
-.Label--severe {
-  color: var(--color-severe-fg);
-  border-color: var(--color-severe-emphasis);
-}
-
-.Label--danger {
-  color: var(--color-danger-fg);
-  border-color: var(--color-danger-emphasis);
-}
-
-.Label--open {
-  color: var(--color-open-fg);
-  border-color: var(--color-open-emphasis);
-}
-
-.Label--closed {
-  color: var(--color-closed-fg);
-  border-color: var(--color-closed-emphasis);
-}
-
-.Label--done {
-  color: var(--color-done-fg);
-  border-color: var(--color-done-emphasis);
-}
-
-.Label--sponsors {
-  color: var(--color-sponsors-fg);
-  border-color: var(--color-sponsors-emphasis);
-}
+@import '@primer/view-components/app/components/primer/beta/label';

package/build/primer/Label/mixins.scss

@@ -12,11 +12,16 @@
   display: inline-block;
   // stylelint-disable-next-line primer/spacing
   padding: 0 7px;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
   line-height: 18px;
   white-space: nowrap;
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style transparent;
+  // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 }
 
@@ -25,6 +30,7 @@
   padding-right: 10px;
   // stylelint-disable-next-line primer/spacing
   padding-left: 10px;
+  // stylelint-disable-next-line primer/typography
   line-height: 22px;
 }
 
@@ -37,5 +43,6 @@
   display: inline;
   // stylelint-disable-next-line primer/spacing
   padding: 0.12em $em-spacer-5;
+  // stylelint-disable-next-line primer/typography
   font-size: 85%;
 }

package/build/primer/Label/states.scss

@@ -1,60 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-
-// A rounded corner box containing a label "open" or "closed"
-
-// Default 32px
-// Small 24px
-
-.state, // TODO: Deprecate
-.State {
-  display: inline-block;
-  // stylelint-disable-next-line primer/spacing
-  padding: 5px 12px;
-  font-size: $body-font-size;
-  font-weight: $font-weight-semibold;
-  // stylelint-disable-next-line primer/typography
-  line-height: 20px;
-  text-align: center;
-  white-space: nowrap;
-  // stylelint-disable-next-line primer/borders
-  border-radius: 2em;
-}
-
-.state, // TODO: Deprecate
-.State,
-.State--draft {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-neutral-emphasis);
-  border: $border-width $border-style transparent;
-}
-
-.State--open {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-open-emphasis);
-}
-
-.State--merged {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-done-emphasis);
-}
-
-.State--closed {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-closed-emphasis);
-}
-
-// Small
-
-.State--small {
-  // stylelint-disable-next-line primer/spacing
-  padding: 0 10px;
-  font-size: $font-size-small;
-  // stylelint-disable-next-line primer/typography
-  line-height: $size-3;
-
-  .octicon {
-    width: 1em; // Ensures different icons don't change State indicator width
-  }
-}
+@import '@primer/view-components/app/components/primer/beta/state';

package/build/primer/Layout/app-frame.scss

@@ -31,8 +31,8 @@
     display: flex;
     width: 100%;
     padding: var(--base-size-16, 16px);
-    background: var(--color-canvas-inset);
-    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    background: var(--bgColor-inset, var(--color-canvas-inset));
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;
     gap: var(--base-size-8, 8px);
@@ -68,8 +68,8 @@
       overflow: hidden;
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
-      background: var(--color-border-default);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      background: var(--borderColor-default, var(--color-border-default));
+      border-radius: var(--borderRadius-full, 100vh);
     }
 
     &:focus {
@@ -77,17 +77,17 @@
       display: grid;
       width: auto;
       height: auto;
-      min-height: var(--primer-control-medium-size, 32px);
-      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      min-height: var(--control-medium-size, 32px);
+      padding: 0 var(--control-medium-paddingInline-spacious, 16px);
       overflow: auto;
-      color: var(--color-fg-on-emphasis);
-      background: var(--color-accent-emphasis);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
       @media (pointer: coarse) {
         &::after {
-          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+          @include minTouchTarget(var(--control-minTarget-coarse, 44px));
         }
       }
 
@@ -97,17 +97,17 @@
 
       @keyframes AppFrame-a11yLink-focus {
         0% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(0.3, 0.25);
         }
 
         50% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(1, 1);
         }
 
         55% {
-          color: var(--color-fg-on-emphasis);
+          color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
         }
 
         100% {

package/build/primer/Layout/grid-offset.scss

@@ -1,11 +1,11 @@
+// stylelint-disable number-max-precision
+
 @import '~@papillonbits/css/build/primer/support/variables/layout.scss';
 
 // Optional offset options to work with grid.scss
 
 // Offset Columns
 
-// stylelint-disable number-max-precision
-// stylelint-disable primer/spacing
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     .offset#{$variant}-1 {

package/build/primer/Layout/grid.scss

@@ -87,9 +87,9 @@
 // Gutters
 // Apply padding and a negative margin to the outside of the container
 // stylelint-disable primer/spacing
-@mixin gutters($gutter-width: $spacer-3) {
-  margin-right: -$gutter-width;
-  margin-left: -$gutter-width;
+@mixin gutters($gutter-width: var(--base-size-16)) {
+  margin-right: calc($gutter-width * -1);
+  margin-left: calc($gutter-width * -1);
 
   > [class*='col-'] {
     padding-right: $gutter-width !important;
@@ -98,27 +98,27 @@
 }
 
 .gutter {
-  @include gutters($spacer-3);
+  @include gutters(var(--base-size-16));
 }
 
 .gutter-condensed {
-  @include gutters($spacer-2);
+  @include gutters(var(--base-size-8));
 }
 
 .gutter-spacious {
-  @include gutters($spacer-4);
+  @include gutters(var(--base-size-24));
 }
 
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
     .gutter-#{$breakpoint} {
-      @include gutters($spacer-3);
+      @include gutters(var(--base-size-16));
     }
     .gutter-#{$breakpoint}-condensed {
-      @include gutters($spacer-2);
+      @include gutters(var(--base-size-8));
     }
     .gutter-#{$breakpoint}-spacious {
-      @include gutters($spacer-4);
+      @include gutters(var(--base-size-24));
     }
   }
 }

package/build/primer/Layout/index.scss

@@ -1,5 +1,4 @@
 @import './app-frame.scss';
-@import './mixins.scss';
 @import './container.scss';
 @import './grid.scss';
 @import './grid-offset.scss';

package/build/primer/Layout/layout.scss

@@ -1,183 +1 @@
-// stylelint-disable custom-property-pattern, no-descending-specificity
-// Layout component
-
-.Layout {
-  display: grid;
-
-  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
-  --Layout-gutter: 16px;
-
-  @media (width <= calc(#{$width-sm} - 0.02px)) {
-    @include flow-as-row;
-  }
-
-  &.Layout--flowRow-until-md {
-    @media (width <= calc(#{$width-md} - 0.02px)) {
-      @include flow-as-row;
-    }
-  }
-
-  &.Layout--flowRow-until-lg {
-    @media (width <= calc(#{$width-lg} - 0.02px)) {
-      @include flow-as-row;
-    }
-  }
-
-  // Flow as column
-
-  grid-auto-flow: column;
-  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
-  grid-gap: var(--Layout-gutter);
-
-  .Layout-sidebar {
-    grid-column: 1;
-  }
-
-  .Layout-divider {
-    display: none;
-  }
-
-  .Layout-main {
-    grid-column: 2 / span 2;
-  }
-
-  // Gutter spacing
-
-  @include breakpoint(lg) {
-    --Layout-gutter: 24px;
-  }
-
-  &.Layout--gutter-none {
-    // stylelint-disable-next-line length-zero-no-unit
-    --Layout-gutter: 0px;
-  }
-
-  &.Layout--gutter-condensed {
-    --Layout-gutter: 16px;
-  }
-
-  &.Layout--gutter-spacious {
-    @include breakpoint(lg) {
-      --Layout-gutter: 32px;
-    }
-
-    @include breakpoint(xl) {
-      --Layout-gutter: 40px;
-    }
-  }
-
-  // Sidebar width
-
-  @each $breakpoint in map-keys($sidebar-width) {
-    @include breakpoint($breakpoint) {
-      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
-    }
-  }
-
-  &.Layout--sidebar-narrow {
-    @each $breakpoint in map-keys($sidebar-narrow-width) {
-      @include breakpoint($breakpoint) {
-        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
-      }
-    }
-  }
-
-  &.Layout--sidebar-wide {
-    @each $breakpoint in map-keys($sidebar-wide-width) {
-      @include breakpoint($breakpoint) {
-        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
-      }
-    }
-  }
-
-  // Sidebar position
-
-  &.Layout--sidebarPosition-start {
-    .Layout-sidebar {
-      grid-column: 1;
-    }
-
-    .Layout-main {
-      grid-column: 2 / span 2;
-    }
-  }
-
-  &.Layout--sidebarPosition-end {
-    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
-
-    .Layout-main {
-      grid-column: 1;
-    }
-
-    .Layout-sidebar {
-      grid-column: 2 / span 2;
-    }
-  }
-
-  // Sidebar divider
-
-  &.Layout--divided {
-    .Layout-divider {
-      display: block;
-      grid-column: 2;
-      width: 1px;
-      // stylelint-disable-next-line primer/spacing
-      margin-right: -1px;
-      background: var(--color-border-default);
-    }
-
-    .Layout-main {
-      grid-column: 3 / span 1;
-    }
-
-    &.Layout--sidebarPosition-end {
-      .Layout-sidebar {
-        grid-column: 3 / span 1;
-      }
-
-      .Layout-main {
-        grid-column: 1;
-      }
-    }
-  }
-}
-
-.Layout-divider {
-  display: none;
-  width: 1px;
-}
-
-.Layout-sidebar {
-  width: var(--Layout-sidebar-width);
-}
-
-.Layout-main {
-  min-width: 0;
-
-  // Centered main column
-  // FIXME: right-aligned sidebar
-  .Layout-main-centered-md,
-  .Layout-main-centered-lg,
-  .Layout-main-centered-xl {
-    margin-right: auto;
-    margin-left: auto;
-
-    > .container-md,
-    > .container-lg,
-    > .container-xl {
-      margin-left: 0;
-    }
-  }
-
-  .Layout-main-centered-md {
-    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-  .Layout-main-centered-lg {
-    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-  .Layout-main-centered-xl {
-    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/layout';