@primer/css 20.8.0-rc.2077007c → 20.8.0-rc.2cd820cb

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.8.0-rc.2077007c",
+  "version": "20.8.0-rc.2cd820cb",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@primer/primitives": "^7.9.0",
-    "@primer/view-components": "^0.0.111"
+    "@primer/view-components": "^0.0.112"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.6",
@@ -62,17 +62,17 @@
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
     "globby": "13.1.2",
-    "jest": "29.0.3",
+    "jest": "29.3.1",
     "js-yaml": "4.1.0",
     "postcss": "8.4.18",
     "postcss-calc": "8.2.4",
     "postcss-import": "15.0.0",
     "postcss-load-config": "4.0.1",
-    "postcss-scss": "4.0.4",
+    "postcss-scss": "4.0.5",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.7.1",
     "semver": "7.3.7",
-    "stylelint": "14.14.0",
+    "stylelint": "14.15.0",
     "table": "6.8.0"
   },
   "jest": {