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

package/popover/popover.scss

@@ -1,226 +1 @@
-.Popover {
-  position: absolute;
-  z-index: 100;
-}
-
-.Popover-message {
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  background-color: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
-  border-radius: $border-radius;
-
-  // Carets
-  &::before,
-  &::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    top: -$spacer-3;
-    // stylelint-disable-next-line primer/spacing
-    margin-left: -9px;
-    // stylelint-disable-next-line primer/borders
-    border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-default);
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -$spacer-2;
-    // stylelint-disable-next-line primer/borders
-    border: 7px $border-style transparent;
-    border-bottom-color: var(--color-canvas-overlay);
-  }
-}
-
-// No caret
-.Popover-message--no-caret {
-  &::before,
-  &::after {
-    display: none;
-  }
-}
-
-// Bottom-oriented carets
-.Popover-message--bottom,
-.Popover-message--bottom-right,
-.Popover-message--bottom-left {
-  &::before,
-  &::after {
-    top: auto;
-    border-bottom-color: transparent;
-  }
-
-  &::before {
-    bottom: -$spacer-3;
-    border-top-color: var(--color-border-default);
-  }
-
-  &::after {
-    bottom: -14px;
-    border-top-color: var(--color-canvas-overlay);
-  }
-}
-
-// Top & Bottom: Right-oriented carets
-.Popover-message--top-right,
-.Popover-message--bottom-right {
-  right: -9px;
-  margin-right: 0;
-
-  &::before,
-  &::after {
-    left: auto;
-    margin-left: 0;
-  }
-
-  &::before {
-    right: 20px;
-  }
-
-  &::after {
-    right: 21px;
-  }
-}
-
-// Top & Bottom: Left-oriented carets
-.Popover-message--top-left,
-.Popover-message--bottom-left {
-  left: -9px;
-  margin-left: 0;
-
-  &::before,
-  &::after {
-    left: $spacer-4;
-    margin-left: 0;
-  }
-
-  &::after {
-    left: $spacer-4 + 1;
-  }
-}
-
-// Right- & Left-oriented carets
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom,
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: 50%;
-    left: auto;
-    margin-left: 0;
-    border-bottom-color: transparent;
-  }
-
-  &::before {
-    margin-top: -($spacer-2 + 1);
-  }
-
-  &::after {
-    margin-top: -$spacer-2;
-  }
-}
-
-// Right-oriented carets
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom {
-  &::before {
-    right: -$spacer-3;
-    border-left-color: var(--color-border-default);
-  }
-
-  &::after {
-    right: -14px;
-    border-left-color: var(--color-canvas-overlay);
-  }
-}
-
-// Left-oriented carets
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before {
-    left: -$spacer-3;
-    border-right-color: var(--color-border-default);
-  }
-
-  &::after {
-    left: -14px;
-    border-right-color: var(--color-canvas-overlay);
-  }
-}
-
-// Right & Left: Top-oriented carets
-.Popover-message--right-top,
-.Popover-message--left-top {
-  &::before,
-  &::after {
-    top: $spacer-4;
-  }
-}
-
-// Right & Left: Bottom-oriented carets
-.Popover-message--right-bottom,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: auto;
-  }
-
-  &::before {
-    bottom: $spacer-3;
-  }
-
-  &::after {
-    bottom: $spacer-3 + 1;
-  }
-}
-
-.Popover-message--large {
-  @include breakpoint(sm) {
-    min-width: 320px;
-  }
-}
-
-// Responsive Popover
-// For < md it will show full-width anchored to the bottom
-
-@media (max-width: ($width-md - 0.02px)) {
-  .Popover {
-    position: fixed;
-    top: auto !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-  }
-
-  .Popover-message {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    width: auto !important;
-    margin: $spacer-2;
-  }
-
-  // Increase tap area for touch input
-  .Popover-message > .btn-octicon {
-    padding: $spacer-2 + $spacer-1 !important;
-  }
-
-  // Remove caret
-  .Popover-message::after,
-  .Popover-message::before {
-    display: none;
-  }
-}
+@import '@primer/view-components/app/components/primer/beta/popover';

package/primitives/index.scss

@@ -1,10 +1,10 @@
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
 @import './temp-typography-tokens.scss';

package/progress/progress.scss

@@ -1,27 +1 @@
-// Progress
-
-.Progress {
-  display: flex;
-  height: 8px;
-  overflow: hidden;
-  background-color: var(--color-neutral-muted);
-  border-radius: $border-radius;
-  outline: 1px solid transparent; // Support Firefox custom colors
-}
-
-.Progress--large {
-  height: 10px;
-}
-
-.Progress--small {
-  height: 5px;
-}
-
-.Progress-item {
-  outline: 2px solid transparent; // Support Firefox custom colors
-}
-
-.Progress-item + .Progress-item {
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 2px;
-}
+@import '@primer/view-components/app/components/primer/beta/progress_bar';

package/subhead/subhead.scss

@@ -1,48 +1 @@
-// Subhead styles
-.Subhead {
-  display: flex;
-  padding-bottom: $spacer-2;
-  margin-bottom: $spacer-3;
-  border-bottom: $border-width $border-style var(--color-border-muted);
-  flex-flow: row wrap;
-  justify-content: flex-end; // Keep actions right aligned.
-}
-
-// Modifier class to give a lot of breathing room between sections of content.
-.Subhead--spacious {
-  margin-top: $spacer-6;
-}
-
-// <h2> sized heading with normal font weight
-.Subhead-heading {
-  font-size: $h2-size;
-  font-weight: $font-weight-normal;
-  flex: 1 1 auto;
-  order: 0;
-}
-
-// Make the text bold and red for dangerous content
-.Subhead-heading--danger {
-  font-weight: $font-weight-bold;
-  color: var(--color-danger-fg);
-}
-
-// One-liner of supporting text
-.Subhead-description {
-  font-size: $body-font-size;
-  color: var(--color-fg-muted);
-  flex: 1 100%;
-  order: 2;
-}
-
-// Add 1 or 2 buttons to the right of the heading
-.Subhead-actions {
-  margin: $spacer-1 0 $spacer-1 $spacer-1;
-  align-self: center;
-  justify-content: flex-end;
-  order: 1;
-
-  + .Subhead-description {
-    margin-top: $spacer-1;
-  }
-}
+@import '@primer/view-components/app/components/primer/subhead_component';

package/timeline/timeline-item.scss

@@ -1,94 +1 @@
-.TimelineItem {
-  position: relative;
-  display: flex;
-  padding: $spacer-3 0;
-  margin-left: $spacer-3;
-
-  // The Timeline
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 2px;
-    content: '';
-    background-color: var(--color-border-muted);
-  }
-
-  &:target .TimelineItem-badge {
-    border-color: var(--color-accent-emphasis);
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0.2em var(--color-accent-muted);
-  }
-}
-
-.TimelineItem-badge {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: $spacer-5;
-  height: $spacer-5;
-  margin-right: $spacer-2;
-  margin-left: -$spacer-3 + 1;
-  color: var(--color-fg-muted);
-  align-items: center;
-  background-color: var(--color-timeline-badge-bg);
-  // stylelint-disable-next-line primer/borders
-  border: 2px $border-style var(--color-canvas-default);
-  border-radius: 50%;
-  justify-content: center;
-  flex-shrink: 0;
-
-  &--success {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-success-emphasis);
-    border: $border-width $border-style transparent;
-  }
-}
-
-.TimelineItem-body {
-  min-width: 0;
-  max-width: 100%;
-  margin-top: $spacer-1;
-  color: var(--color-fg-muted);
-  flex: auto;
-}
-
-.TimelineItem-avatar {
-  position: absolute;
-  left: -($spacer-6 + $spacer-5);
-  z-index: 1;
-}
-
-.TimelineItem-break {
-  position: relative;
-  z-index: 1;
-  height: $spacer-4;
-  margin: 0;
-  margin-bottom: -$spacer-3;
-  margin-left: -($spacer-6 + $spacer-3);
-  background-color: var(--color-canvas-default);
-  border: 0;
-  // stylelint-disable-next-line primer/borders
-  border-top: 4px $border-style var(--color-border-default);
-}
-
-.TimelineItem--condensed {
-  padding-top: $spacer-1;
-  padding-bottom: 0;
-
-  // TimelineItem--condensed is often grouped. (commits)
-  &:last-child {
-    padding-bottom: $spacer-3;
-  }
-
-  .TimelineItem-badge {
-    height: $spacer-3;
-    margin-top: $spacer-2;
-    margin-bottom: $spacer-2;
-    color: var(--color-fg-muted);
-    background-color: var(--color-canvas-default);
-    border: 0;
-  }
-}
+@import '@primer/view-components/app/components/primer/timeline_item_component';

package/toggle-switch/toggle-switch.scss

@@ -1,243 +1 @@
-// Catalyst in dotcom applies a display: block to all web component elements. This
-// rule overrides it so the status label and toggle switch are laid out correctly.
-.ToggleSwitch.ToggleSwitch {
-  display: inline-flex;
-}
-
-.ToggleSwitch {
-  align-items: center;
-  display: inline-flex;
-  gap: $spacer-2;
-
-  &:hover {
-    .ToggleSwitch-knob {
-      background-color: var(--color-btn-hover-bg);
-    }
-  }
-
-  &:active {
-    .ToggleSwitch-knob {
-      background-color: var(--color-btn-active-bg);
-    }
-  }
-}
-
-.ToggleSwitch--checked {
-  .ToggleSwitch-statusOn {
-    height: auto;
-    visibility: visible;
-  }
-
-  .ToggleSwitch-statusOff {
-    height: 0;
-    visibility: hidden;
-  }
-}
-
-.ToggleSwitch-track {
-  position: relative;
-  display: block;
-  width: $spacer-8;
-  height: $spacer-5;
-  padding: 0;
-  overflow: hidden;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  background-color: var(--color-switch-track-bg);
-  border: $border-width $border-style var(--color-switch-track-border);
-  border-radius: $border-radius;
-  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
-  transition-duration: 80ms;
-  transition-property: background-color, border-color;
-  appearance: none;
-
-  &:focus,
-  &:focus-visible {
-    outline-offset: 0;
-  }
-
-  @media (pointer: coarse) {
-    &::before {
-      @include minTouchTarget(calc($spacer-6 + $spacer-1));
-    }
-  }
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-
-    * {
-      transition: none;
-    }
-  }
-}
-
-.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-subtle);
-
-  &:hover,
-  &:active {
-    background-color: var(--color-canvas-subtle);
-
-    // This is the most straightforward way of setting the knob's styles when the
-    // switch is both checked and disabled.
-
-    // stylelint-disable-next-line selector-max-specificity
-    .ToggleSwitch-knob {
-      background-color: var(--color-switch-knob-checked-disabled-bg);
-    }
-  }
-
-  .ToggleSwitch-knob {
-    background-color: var(--color-switch-knob-checked-disabled-bg);
-  }
-}
-
-.ToggleSwitch-track[aria-checked='true'] {
-  background-color: var(--color-switch-track-checked-bg);
-  border-color: var(--color-switch-track-checked-border);
-
-  &:hover {
-    background-color: var(--color-switch-track-checked-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--color-switch-track-checked-active-bg);
-  }
-
-  .ToggleSwitch-knob {
-    background-color: var(--color-switch-knob-checked-bg);
-    border: 0;
-    transform: translateX(calc(100% + 1px));
-  }
-
-  .ToggleSwitch-lineIcon {
-    transform: translateX(0%);
-  }
-
-  .ToggleSwitch-circleIcon {
-    transform: translateX(100%);
-  }
-}
-
-.ToggleSwitch-track[aria-disabled='true'] {
-  cursor: not-allowed;
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-subtle);
-  transition-property: none;
-
-  &:hover,
-  &:active {
-    .ToggleSwitch-knob {
-      background-color: var(--color-btn-bg);
-    }
-  }
-
-  .ToggleSwitch-knob {
-    border-color: var(--color-border-default);
-    box-shadow: none;
-
-    &:hover,
-    &:active {
-      background-color: var(--color-btn-bg);
-    }
-  }
-
-  .ToggleSwitch-lineIcon {
-    color: var(--color-fg-subtle);
-  }
-
-  .ToggleSwitch-circleIcon {
-    color: var(--color-fg-subtle);
-  }
-}
-
-.ToggleSwitch-icons {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.ToggleSwitch-lineIcon {
-  line-height: 0;
-  color: var(--color-accent-fg);
-  transition-duration: 80ms;
-  transition-property: transform;
-  transform: translateX(-100%);
-  flex: 1 0 50%;
-}
-
-.ToggleSwitch-circleIcon {
-  line-height: 0;
-  color: var(--color-fg-default);
-  transition-duration: 80ms;
-  transition-property: transform;
-  transform: translateX(0);
-  flex: 1 0 50%;
-}
-
-.ToggleSwitch-knob {
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  z-index: 1;
-  width: 50%;
-  background-color: var(--color-btn-bg);
-  border: $border-width $border-style var(--color-switch-track-border);
-  border-radius: $border-radius;
-  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
-  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
-  transition-duration: 80ms;
-  transition-property: transform;
-  transform: translateX(-1px);
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.ToggleSwitch-status {
-  position: relative;
-  font-size: $body-font-size;
-  line-height: $body-line-height;
-  color: var(--color-fg-default);
-  text-align: right;
-}
-
-.ToggleSwitch--small {
-  .ToggleSwitch-status {
-    font-size: $font-size-small;
-  }
-
-  .ToggleSwitch-track {
-    width: $spacer-7;
-    height: $spacer-4;
-  }
-}
-
-.ToggleSwitch--disabled {
-  .ToggleSwitch-status {
-    color: var(--color-fg-muted);
-  }
-}
-
-.ToggleSwitch-statusOn {
-  height: 0;
-  visibility: hidden;
-}
-
-.ToggleSwitch-statusOff {
-  height: auto;
-  visibility: visible;
-}
-
-.ToggleSwitch--statusAtEnd {
-  flex-direction: row-reverse;
-
-  .ToggleSwitch-status {
-    text-align: left;
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/toggle_switch';