@primer/css 20.8.0-rc.eb9eea82 → 20.8.0-rc.efb05241

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/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/menu_component';

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';

package/navigation/underline-nav.scss

@@ -1,136 +1 @@
-$nav-height: $spacer-3 * 3 !default; // 48px
-
-.UnderlineNav {
-  display: flex;
-  min-height: $nav-height;
-  overflow-x: auto;
-  overflow-y: 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';