@primer/css 20.7.1 → 20.8.0-rc.1211808

package/labels/counters.scss

@@ -1,36 +1 @@
-// Counters are rounded-corner badges for numbers
-.Counter {
-  display: inline-block;
-  min-width: $size-2; // makes sure it's a circle with just one digit
-  // stylelint-disable-next-line primer/spacing
-  padding: 0 6px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-semibold;
-  // stylelint-disable-next-line primer/typography
-  line-height: $size-2 - 2px; // remove borders
-  color: var(--color-fg-default);
-  text-align: center;
-  background-color: var(--color-neutral-muted);
-  border: $border-width $border-style var(--color-counter-border);
-  // stylelint-disable-next-line primer/borders
-  border-radius: 2em;
-
-  &:empty {
-    display: none;
-  }
-
-  .octicon {
-    vertical-align: text-top;
-    opacity: 0.8;
-  }
-}
-
-.Counter--primary {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-neutral-emphasis);
-}
-
-.Counter--secondary {
-  color: var(--color-fg-muted);
-  background-color: var(--color-neutral-subtle);
-}
+@import '@primer/view-components/app/components/primer/beta/counter';

package/labels/labels.scss

@@ -1,92 +1 @@
-// 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/labels/states.scss

@@ -1,56 +1 @@
-// 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/state_component';

package/layout/index.scss

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

package/layout/layout.scss

@@ -1,182 +1 @@
-// Layout component
-
-.Layout {
-  display: grid;
-
-  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
-  --Layout-gutter: 16px;
-
-  @media (max-width: calc(#{$width-sm} - 0.02px)) {
-    @include flow-as-row;
-  }
-
-  &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 0.02px)) {
-      @include flow-as-row;
-    }
-  }
-
-  &.Layout--flowRow-until-lg {
-    @media (max-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';

package/layout/page-layout.scss

@@ -22,6 +22,32 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   // stylelint-enable length-zero-no-unit
 }
 
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  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(#{$spacer-2} * -1); // -8px
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: #{$spacer-2}; // 8px
+  content: '';
+  background-color: var(--color-canvas-inset);
+  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
+}
+
 .PageLayout {
   display: block;
   // stylelint-disable-next-line primer/spacing

package/markdown/code.scss

@@ -8,6 +8,7 @@
     margin: 0;
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
+    white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
     background-color: var(--color-neutral-muted);
     border-radius: $border-radius;
 

package/navigation/menu.scss

@@ -1,119 +1 @@
-// 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/navigation/tabnav.scss

@@ -1,104 +1 @@
-// Outer wrapper
-// 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;
-}
+@import '@primer/view-components/app/components/primer/alpha/tab_nav';