@primer/css 0.0.0-20219633235 → 0.0.0-2021986475

package/utilities/colors.scss

@@ -18,43 +18,32 @@
 
 // Background
 
-.color-bg-default { background-color: var(--color-canvas-default) !important; }
-.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
-.color-bg-inset   { background-color: var(--color-canvas-inset) !important; }
-.color-bg-subtle  { background-color: var(--color-canvas-subtle) !important; }
-
-.color-bg-neutral-emphasis-plus { background-color: var(--color-neutral-emphasis-plus) !important; }
-.color-bg-neutral-emphasis      { background-color: var(--color-neutral-emphasis) !important; }
-.color-bg-neutral-muted         { background-color: var(--color-neutral-muted) !important; }
-.color-bg-neutral-subtle        { background-color: var(--color-neutral-subtle) !important; }
+.color-bg-default  { background-color: var(--color-canvas-default) !important; }
+.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
 
+.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
 .color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
-.color-bg-accent-muted    { background-color: var(--color-accent-muted) !important; }
-.color-bg-accent-subtle   { background-color: var(--color-accent-subtle) !important; }
 
+.color-bg-success          { background-color: var(--color-success-subtle) !important; }
 .color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
-.color-bg-success-muted    { background-color: var(--color-success-muted) !important; }
-.color-bg-success-subtle   { background-color: var(--color-success-subtle) !important; }
 
+.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
 .color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
-.color-bg-attention-muted    { background-color: var(--color-attention-muted) !important; }
-.color-bg-attention-subtle   { background-color: var(--color-attention-subtle) !important; }
 
+.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
 .color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
-.color-bg-severe-muted    { background-color: var(--color-severe-muted) !important; }
-.color-bg-severe-subtle   { background-color: var(--color-severe-subtle) !important; }
 
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
 .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
-.color-bg-danger-muted    { background-color: var(--color-danger-muted) !important; }
-.color-bg-danger-subtle   { background-color: var(--color-danger-subtle) !important; }
 
+.color-bg-done          { background-color: var(--color-done-subtle) !important; }
 .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
-.color-bg-done-muted    { background-color: var(--color-done-muted) !important; }
-.color-bg-done-subtle   { background-color: var(--color-done-subtle) !important; }
 
+.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
 .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
-.color-bg-sponsors-muted    { background-color: var(--color-sponsors-muted) !important; }
-.color-bg-sponsors-subtle   { background-color: var(--color-sponsors-subtle) !important; }
 
 // Border
 
@@ -62,13 +51,26 @@
 .color-border-muted   { border-color: var(--color-border-muted) !important; }
 .color-border-subtle  { border-color: var(--color-border-subtle) !important; }
 
-.color-border-accent    { border-color: var(--color-accent-emphasis) !important; }
-.color-border-success   { border-color: var(--color-success-emphasis) !important; }
-.color-border-attention { border-color: var(--color-attention-emphasis) !important; }
-.color-border-severe    { border-color: var(--color-severe-emphasis) !important; }
-.color-border-danger    { border-color: var(--color-danger-emphasis) !important; }
-.color-border-done      { border-color: var(--color-done-emphasis) !important; }
-.color-border-sponsors  { border-color: var(--color-sponsors-emphasis) !important; }
+.color-border-accent          { border-color: var(--color-accent-muted) !important; }
+.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+
+.color-border-success          { border-color: var(--color-success-muted) !important; }
+.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+
+.color-border-attention          { border-color: var(--color-attention-muted) !important; }
+.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+
+.color-border-severe          { border-color: var(--color-severe-muted) !important; }
+.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+
+.color-border-danger          { border-color: var(--color-danger-muted) !important; }
+.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+
+.color-border-done          { border-color: var(--color-done-muted) !important; }
+.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+
+.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
+.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
 
 // Misc
 

package/actionlist/actionlist-edits.scss

@@ -1,553 +0,0 @@
-// Most of this file should be provided by primer/src/support already
-
-$actionList-item-hover-bg: #f0f3f5;
-$actionList-item-active-bg: #e8ebed;
-$actionList-item-selected-bg: #f0f3f5;
-$actionList-item-focus-bg: #e0e4e7;
-$actionList-item-divider: #e9e9ed;
-
-$actionList-item-danger-hover-bg: #fff0f2;
-$actionList-item-danger-active-bg: #ffebed;
-$actionList-item-danger-focus-bg: #ffdbe0;
-
-// expanded from src/support/variables/misc.scss
-
-$border-radius-1: 4px !default;
-$border-radius-2: 6px !default;
-$border-radius-3: 8px !default;
-$border-radius-4: 12px !default;
-
-$box-shadow-medium: 0 3px 6px rgba(#000, 0.12) !default;
-$box-shadow-large: 0 6px 18px rgba(#000, 0.16) !default;
-$box-shadow-extra-large: 0 12px 48px rgba(#000, 0.2) !default;
-
-$overlay-shadow-popover: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 8px 24px rgba(149, 157, 165, 0.2);
-
-// expanded from src/support/variables/layout.scss
-// adds 12px to the scale as of https://github.com/github/design-systems/issues/992
-//
-// https://github.com/github/design-systems/issues/1272
-
-$s-0: 0;
-$s-4: 4px;
-$s-8: 8px;
-$s-12: 12px;
-$s-16: 16px;
-$s-20: 20px;
-$s-24: 24px;
-$s-28: 28px;
-$s-32: 32px;
-$s-40: 40px;
-$s-48: 48px;
-
-// pulled from src/support/variables/color-system.scss
-
-// -------- Grays --------
-$gray-000: #fafbfc !default;
-$gray-100: #f6f8fa !default;
-$gray-200: #e1e4e8 !default;
-$gray-300: #d1d5da !default;
-$gray-400: #959da5 !default;
-$gray-500: #6a737d !default;
-$gray-600: #586069 !default;
-$gray-700: #444d56 !default;
-$gray-800: #2f363d !default;
-$gray-900: #24292e !default; // body font color
-
-// -------- Accent -------
-$blue-500: #0366d6;
-
-// Typographic colors, from some color mode file
-
-$text-primary: $gray-900;
-$text-secondary: $gray-500;
-$text-danger: #cb2431;
-
-// CSS Easing
-
-$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-$ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
-$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-
-.actionList {
-  padding: $s-8;
-  list-style: none;
-
-  ul,
-  li {
-    list-style: none;
-  }
-}
-
-.actionList-item {
-  // :before pseudo-element is used for the inline divider
-  // :after pseudo-element is used for selected accent line on the left
-
-  // single select
-
-  // maintain space on grid while check is hidden
-  .actionList-item-content-singleSelect {
-    .actionList-item-check {
-      visibility: hidden;
-    }
-  }
-
-  &[aria-checked='true'] {
-    .actionList-item-content-singleSelect {
-      .actionList-item-check {
-        visibility: visible;
-      }
-    }
-  }
-
-  position: relative;
-
-  // katie edit
-  // we could also use [aria-current] selector, and/or just conditionally add this class
-  &.actionList-item--active {
-    &:before,
-    + .actionList-item:before {
-      visibility: hidden;
-    }
-
-    .actionList-item-content {
-      background: $actionList-item-selected-bg;
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: $actionList-item-active-bg;
-        }
-      }
-    }
-
-    // Blue accent for selected item.
-
-    &:after {
-      content: '';
-      width: $s-4;
-      height: $s-24;
-      border-radius: 4px;
-      position: absolute;
-      left: -8px;
-      top: calc(50% - (24px / 2));
-      background: var(--color-accent-fg);
-    }
-  }
-
-  // Hides sibling's divider if item is :hover or :active
-
-  &:hover:before,
-  &:hover + .actionList-item:before {
-    visibility: hidden;
-  }
-
-  &:active:before,
-  &:active + .actionList-item:before {
-    visibility: hidden;
-  }
-}
-
-.actionList-item-content {
-  display: grid;
-  // 32px total height considering 20px line-height
-  // allow height to expand
-  padding: (($s-32 - $s-20) / 2) $s-8;
-  grid-template-rows: minmax(20px, max-content);
-  // default one column
-  grid-template-columns: minmax(min-content, 100%);
-  column-gap: $s-8;
-  align-items: center;
-  position: relative;
-  border-radius: $border-radius-2;
-  font-weight: normal;
-  color: inherit;
-  text-decoration: none;
-  border: none;
-  background: none;
-  //   text-align: start;
-  margin: 0;
-  //   width: 100%;
-
-  // helper for grid alignment with multi-line content
-  .actionList-item-visual {
-    min-height: 20px;
-    display: flex;
-    align-items: center;
-    fill: var(--color-fg-muted);
-  }
-
-  // do we want this?
-  user-select: none;
-
-  // since we're already using an :active bg
-  -webkit-tap-highlight-color: transparent;
-
-  // 2 frames on a 60hz monitor
-  transition: background 33.333ms linear;
-
-  // reset grid for children
-
-  // has leading visual
-  &.actionList-item--leadingVisual {
-    grid-template-columns: min-content minmax(min-content, auto);
-  }
-
-  // has trailing visual
-  &.actionList-item--trailingVisual {
-    grid-template-columns: minmax(min-content, auto) min-content;
-  }
-
-  // has leading + trailing visuals
-  &.actionList-item--leadingVisual.actionList-item--trailingVisual {
-    grid-template-columns: min-content minmax(min-content, auto) min-content;
-  }
-
-  &.actionList-item-content-singleSelect {
-    grid-template-columns: min-content minmax(min-content, auto);
-
-    &.actionList-item--leadingVisual {
-      grid-template-columns: min-content min-content minmax(min-content, auto);
-    }
-
-    &.actionList-item--trailingVisual {
-      grid-template-columns: min-content minmax(min-content, auto) min-content;
-    }
-
-    &.actionList-item--leadingVisual.actionList-item--trailingVisual {
-      grid-template-columns: min-content min-content minmax(min-content, auto) min-content;
-    }
-  }
-
-  &.actionList-item-content-multiSelect {
-    grid-template-columns: min-content minmax(min-content, auto);
-
-    &.actionList-item--leadingVisual {
-      grid-template-columns: min-content min-content minmax(min-content, auto);
-    }
-
-    &.actionList-item--trailingVisual {
-      grid-template-columns: min-content minmax(min-content, auto) min-content;
-    }
-
-    &.actionList-item--leadingVisual.actionList-item--trailingVisual {
-      grid-template-columns: min-content min-content minmax(min-content, auto) min-content;
-    }
-  }
-
-  // handle font color and size here
-  .actionList-item-label {
-    font-weight: normal;
-    color: inherit;
-  }
-
-  .actionList-item-label-primary {
-    font-weight: bold;
-  }
-
-  .actionList-item-label--blockDescription {
-    display: flex;
-    flex-direction: column;
-
-    .actionList-item-label-description {
-      margin-top: $s-4;
-    }
-  }
-
-  .actionList-item-label--inlineDescription {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .actionList-item-label-description {
-      margin-left: $s-8;
-    }
-  }
-
-  .actionList-item-label-description {
-    font-size: 12px;
-    line-height: 18px;
-    color: var(--color-fg-muted);
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-accent-fg); // var(--color-btn-focus-shadow)
-    position: relative;
-    z-index: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background: $actionList-item-hover-bg;
-      cursor: pointer;
-    }
-  }
-
-  &:active {
-    background: $actionList-item-active-bg;
-
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: actionList-item-active-bg 4s forwards $ease-out-cubic;
-    }
-
-    @keyframes actionList-item-active-bg {
-      0% {
-      }
-      50% {
-        transform: scale(1);
-        box-shadow: inset 0 0 0 rgba(#000, 0.04);
-      }
-      100% {
-        transform: scale(0.97);
-        box-shadow: inset 0 3px 9px rgba(#000, 0.04);
-      }
-    }
-  }
-}
-
-// size (default: small)
-// small | medium | large
-
-// Medium-sized items
-.actionList-item--sizeMedium {
-  // 40px total height considering 20px line-height
-  grid-template-rows: minmax(28px, max-content);
-}
-
-// Large-sized items
-.actionList-item--sizeLarge {
-  // 48px total height considering 20px line-height
-  grid-template-rows: minmax(36px, max-content);
-}
-
-// On pointer:coarse (mobile), all list items are large
-@media (pointer: coarse) {
-  .actionList-item {
-    // 48px total height considering 20px line-height
-    grid-template-rows: minmax(36px, max-content);
-  }
-}
-
-.actionList-item-content-blockDescription {
-  // if leading/trailing visual, align with first line of content
-  .actionList-item-visual {
-    place-self: start;
-  }
-}
-
-// Danger listItem
-
-// TODO: conflict with selected state
-.actionList-item--danger {
-  .actionList-item-content {
-    color: var(--color-danger-fg);
-
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: $actionList-item-danger-hover-bg;
-      }
-    }
-
-    &:active {
-      background: $actionList-item-danger-active-bg;
-    }
-  }
-}
-
-// listItem elements
-// TODO: safegaurd against incorrect SVG sizes
-// .actionList-item-leadingVisual,
-// .actionList-item-leadingVisual-16,
-// .actionList-item-leadingVisual-20 {
-//   width: $s-16;
-//   height: $s-20;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-
-//   svg {
-//     fill: $text-secondary;
-//   }
-// }
-
-// .actionList-item-leadingVisual-20 {
-//   width: $s-20;
-// }
-
-.actionList-item-inlineDescription {
-  align-self: baseline;
-  // text-small
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--color-fg-muted);
-}
-
-// TODO: should label always be bold above a block description?
-.actionList-item-blockDescription {
-  display: block;
-  // text-small
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--color-fg-muted);
-  margin-top: $s-4;
-}
-
-// child of .actionList-item-label, placed above everything
-// .actionList-item-trailingText {
-//   margin-left: $s-16;
-//   float: right;
-//   color: var(--color-fg-muted);
-// }
-
-// sibling of .actionList-item-label
-// .actionList-item-trailingVisual {
-//   height: $s-20;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-
-//   svg {
-//     fill: var(--color-fg-muted);
-//   }
-// }
-
-// Single-selection & Multi selection
-// TODO: can this be simplified?
-.actionList--single-selection .actionList-item > .actionList-item-content,
-.actionList--multi-selection .actionList-item > .actionList-item-content,
-.actionList-item--single-selection > .actionList-item-content,
-.actionList-item--multi-selection > .actionList-item-content {
-  padding-left: ($s-16 + $s-16);
-}
-
-// .actionList-item .actionList-item-check {
-//   width: $s-16;
-//   height: $s-20;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   margin-left: ($s-24 * -1);
-//   align-items: center;
-
-//   svg {
-//     fill: var(--color-fg-muted);
-//   }
-//   input {
-//     cursor: pointer;
-//   }
-// }
-
-// Dividers
-
-.actionList--divided .actionList-item:before,
-.actionList-item--divided:before {
-  content: '';
-  display: block;
-  position: absolute;
-  width: calc(100% - #{$s-16});
-  height: 1px;
-  background: $actionList-item-divider;
-  top: 0;
-  left: $s-8;
-}
-
-.actionList-item:first-child:before,
-.actionList-sectionDivider + .actionList-item:before,
-.actionList-sectionHeader + .actionList-item:before {
-  visibility: hidden;
-}
-
-.actionList--divided-indent-16 .actionList-item:before,
-.actionList-item--divided-indent-16:before {
-  left: $s-16 + $s-16;
-  width: calc(100% - 40px) !important;
-}
-
-.actionList--divided-indent-20 .actionList-item:before,
-.actionList-item--divided-indent-20:before {
-  left: $s-20 + $s-16;
-  width: calc(100% - 44px) !important;
-}
-
-.actionList--divided-indent-24 .actionList-item:before,
-.actionList-item--divided-indent-24:before {
-  left: $s-24 + $s-16;
-  width: calc(100% - 48px) !important;
-}
-
-.actionList--divided-indent-32 .actionList-item:before,
-.actionList-item--divided-indent-32:before {
-  left: $s-32 + $s-16;
-  width: calc(100% - 56px) !important;
-}
-
-.actionList--single-selection.actionList--divided .actionList-item:before,
-.actionList--multi-selection.actionList--divided .actionList-item:before,
-.actionList-item--single-selection.actionList-item--divided:before,
-.actionList-item--multi-selection.actionList-item--divided:before {
-  left: $s-16 + $s-16;
-  width: calc(100% - 40px) !important;
-}
-
-.actionList--single-selection.actionList--divided-indent-20 .actionList-item:before,
-.actionList--multi-selection.actionList--divided-indent-20 .actionList-item:before,
-.actionList--single-selection .actionList-item--divided-indent-20:before,
-.actionList--multi-selection .actionList-item--divided-indent-20:before {
-  left: $s-20 + $s-16;
-  width: calc(100% - 44px) !important;
-}
-
-// Section divider
-
-.actionList-sectionDivider {
-  height: 1px;
-  background: $actionList-item-divider;
-  border: 0;
-  margin: ($s-8 - 1px) ($s-8 * -1) $s-8;
-  padding: 0;
-}
-
-.actionList-sectionDivider--filled {
-  height: $s-8;
-  border-top: 1px solid $gray-200;
-  border-bottom: 1px solid $gray-200;
-  background: $gray-100;
-  box-sizing: border-box;
-  margin: $s-8 ($s-8 * -1);
-}
-
-// Section header
-
-.actionList-sectionHeader {
-  // 32px total height considering 20px line-height
-  padding: (($s-32 - $s-20) / 2) $s-8;
-  font-size: 12px; // text-small
-
-  // is this a variable in primer css?
-  font-weight: 600;
-
-  color: var(--color-fg-muted);
-}
-
-.actionList-sectionHeader--filled {
-  background: $gray-100;
-  margin: $s-8 ($s-8 * -1);
-  border-top: 1px solid $gray-200;
-  border-bottom: 1px solid $gray-200;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-// Nested content
-// Doesn't work with dividers
-
-.actionList-item-nestedContent {
-  padding-left: $s-16;
-  padding-bottom: $s-8;
-}