@primer/css 0.0.0-20219281745 → 0.0.0-2021928181639

package/CHANGELOG.md

@@ -1,15 +1,21 @@
 # @primer/css
 
-## 0.0.0-20219281745
+## 0.0.0-2021928181639
 
 ### Minor Changes
 
 - [#1694](https://github.com/primer/css/pull/1694) [`b0e1687a`](https://github.com/primer/css/commit/b0e1687a562a194ed178fd2dd35588ff5da40847) Thanks [@simurai](https://github.com/simurai)! - Add more Octicon icon support to components
 
+* [#1711](https://github.com/primer/css/pull/1711) [`bc3b94d2`](https://github.com/primer/css/commit/bc3b94d26f08f65d3a4938bafa1b988585f35764) Thanks [@simurai](https://github.com/simurai)! - Add new color `Label`s
+
 ### Patch Changes
 
 - [#1710](https://github.com/primer/css/pull/1710) [`6a058ecb`](https://github.com/primer/css/commit/6a058ecbaf7edac6fce4a0d56b4aca46ac6cd4fa) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating [@primer/primitives@6.0.0](https://github.com/primer/primitives/releases/tag/v6.0.0)
 
+* [#1712](https://github.com/primer/css/pull/1712) [`bc502033`](https://github.com/primer/css/commit/bc50203324ba03d4ece7ec6182c185a695626ffb) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config to 12.1.0
+
+- [#1708](https://github.com/primer/css/pull/1708) [`f7c44c35`](https://github.com/primer/css/commit/f7c44c35f8085f2b793581a901ecb22c5174ef6a) Thanks [@langermank](https://github.com/langermank)! - Storybook: add Label stories
+
 * [#1690](https://github.com/primer/css/pull/1690) [`af5a3ae8`](https://github.com/primer/css/commit/af5a3ae82668d6d04af8c3465302980dcf062cc4) Thanks [@simurai](https://github.com/simurai)! - Update `Subhead` actions
 
 - Fake entry to force publishing

package/actionlist/action-list-item-divider.scss

@@ -0,0 +1,42 @@
+// stylelint-disable primer/spacing
+
+// emtpy divider
+
+.ActionList-sectionDivider {
+  // has children
+  &:not(:empty) {
+    display: flex;
+    padding: ($spacer-1 * 1.5) $spacer-2;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    padding: 0;
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
+  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
+
+  // if no children, treat as divider
+  &:empty {
+    height: $spacer-2;
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}

package/actionlist/action-list-item.scss

@@ -0,0 +1,426 @@
+// stylelint-disable selector-max-specificity, max-nesting-depth, primer/spacing, no-duplicate-selectors
+@import './action-list-variables.scss';
+
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+}
+
+// <li>
+.ActionList-item {
+  position: relative;
+  list-style: none;
+  border-radius: $border-radius;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+
+    // a href
+    .ActionList-content {
+      text-decoration: none;
+    }
+  }
+
+  // only hover li without list as children
+  &:not(.ActionList-item--hasSubItem) {
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-action-list-item-default-hover-bg);
+    }
+
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
+      }
+
+      // stylelint-disable primer/box-shadow
+      @keyframes ActionList-item-active-bg {
+        50% {
+          box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          transform: scale(1);
+        }
+
+        100% {
+          box-shadow: inset 0 3px 9px rgba(#000, 0.04);
+          transform: scale(0.97);
+        }
+      }
+      // stylelint-enable primer/box-shadow
+    }
+
+    &:hover,
+    &:active {
+      // hide dividers
+      .ActionList-item-label::before,
+      + .ActionList-item .ActionList-item-label::before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  // target contents of li if sub-item (li wraps item label + nested ul)
+  // collapse styles here
+  &.ActionList-item--hasSubItem {
+    // first child
+    > .ActionList-content {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--navActive:not(.ActionList-item--danger) {
+    background: var(--color-action-list-item-default-selected-bg);
+
+    &::before,
+    + .ActionList-item::before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &::after {
+      position: absolute;
+      top: calc(50% - ($spacer-4 * 0.5));
+      left: -$actionList-item-padding-horizontal;
+      width: $spacer-1;
+      height: $spacer-4;
+      content: '';
+      background: var(--color-accent-fg);
+      border-radius: $border-radius;
+    }
+  }
+
+  // collapsible item [aria-expanded]
+
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    .ActionList--subGroup {
+      display: block;
+    }
+
+    &.ActionList-item--hasSubItem {
+      > .ActionList-content > .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+
+    .ActionList--subGroup {
+      display: none;
+    }
+  }
+
+  // checkbox item [aria-checked]
+  // listbox [aria-selected]
+
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: visible;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: $border-width;
+      }
+
+      .ActionList-item-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+        opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+      clip-path: inset(16px 0 0 0);
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: $border-width;
+      }
+    }
+
+    .ActionList-item-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: $border-width $border-style var(--color-border-default);
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+
+  // variants
+
+  // danger
+  &.ActionList-item--danger {
+    .ActionList-item-label {
+      color: var(--color-danger-fg);
+    }
+
+    .ActionList-item-visual {
+      color: var(--color-danger-fg);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--color-action-list-item-danger-hover-bg);
+
+        .ActionList-item-label {
+          color: var(--color-action-list-item-danger-hover-text);
+        }
+      }
+    }
+
+    &:active {
+      background: var(--color-action-list-item-danger-active-bg);
+    }
+  }
+
+  // disabled
+  &.ActionList-item--disabled {
+    .ActionList-item-label {
+      color: pink;
+    }
+
+    .ActionList-item-visual {
+      fill: pink;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: unset;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  // if nested list exists, remove default padding
+  .ActionList {
+    padding: unset;
+  }
+}
+
+// span or a href
+.ActionList-content {
+  position: relative;
+  display: grid;
+  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
+  font-weight: $font-weight-normal;
+  color: var(--color-fg-default);
+  user-select: none;
+  border-radius: $border-radius;
+  transition: $actionList-item-bg-transition;
+  grid-template-rows: minmax($actionList-item-height-sm, max-content); // 20px with 12px padding = [32px total]
+  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
+  grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
+  align-items: center;
+
+  // column-gap persists with empty grid-areas, margin applies only when children exist
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  // sizes
+
+  &.ActionList-content--sizeMedium {
+    grid-template-rows: minmax($actionList-item-height-md, max-content); // 28px with 12px padding = [40px total]
+  }
+
+  &.ActionList-content--sizeLarge {
+    grid-template-rows: minmax($actionList-item-height-lg, max-content); // 36px with 12px padding = [48px total]
+  }
+
+  // On pointer:coarse (mobile), all list items are large
+  @media (pointer: coarse) {
+    grid-template-rows: minmax($actionList-item-height-lg, max-content);
+  }
+
+  &.ActionList-content--blockDescription {
+    // if leading/trailing visual, align with first line of content
+    .ActionList-item-visual {
+      place-self: start;
+    }
+  }
+}
+
+// place children on grid
+
+.ActionList-item-action--leading {
+  grid-area: leadingAction;
+}
+
+.ActionList-item-visual--leading {
+  grid-area: leadingVisual;
+}
+
+.ActionList-item-label {
+  grid-area: label;
+}
+
+.ActionList-item-visual--trailing {
+  grid-area: trailingVisual;
+}
+
+.ActionList-item-action--trailing {
+  grid-area: trailingAction;
+}
+
+// wrapper span
+// default block
+.ActionList-item-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+
+  .ActionList-item-description {
+    margin-top: $spacer-1;
+  }
+
+  .ActionList-item-label {
+    font-weight: $font-weight-bold;
+  }
+}
+
+// inline
+.ActionList-item-descriptionWrap--inline {
+  flex-direction: row;
+  align-items: baseline;
+
+  .ActionList-item-description {
+    margin-left: $actionList-item-padding-horizontal;
+  }
+}
+
+// description
+.ActionList-item-description {
+  font-size: $font-size-small;
+  font-weight: $font-weight-normal;
+  line-height: $lh-default;
+  color: var(--color-fg-muted);
+}
+
+// helper for grid alignment with multi-line content
+// span wrapping svg or text
+.ActionList-item-visual,
+.ActionList-item-action {
+  display: flex;
+  min-height: $actionList-item-height-sm;
+  color: var(--color-fg-muted); // if visual is text
+  fill: var(--color-fg-muted);
+  align-items: center;
+}
+
+// text
+.ActionList-item-label {
+  position: relative; // for pseudo dividers
+  font-weight: $font-weight-normal;
+  color: var(--color-fg-default);
+}
+
+// nested lists (only supports 1 level currently)
+// target ActionList-item--subItem for padding-left to maintain :active :after state
+
+.ActionList-item--subItem > .ActionList-content {
+  font-size: $font-size-small;
+}
+
+// no leading visual
+.ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-3;
+  }
+}
+
+// has 16px leading visual
+.ActionList-content--visual16 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-4;
+  }
+}
+
+// has 20px leading visual
+.ActionList-content--visual20 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-3 * 1.75;
+  }
+}
+
+// has 24px leading visual
+.ActionList-content--visual24 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-5;
+  }
+}

package/actionlist/action-list-variables.scss

@@ -0,0 +1,7 @@
+$actionList-item-height-sm: 20px !default;
+$actionList-item-height-md: 28px !default;
+$actionList-item-height-lg: 36px !default;
+$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
+$actionList-item-padding-horizontal: $spacer-2 !default;
+$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
+$actionList-item-checkmark-transition-timing: 50ms !default;

package/actionlist/action-list.scss

@@ -0,0 +1,35 @@
+// stylelint-disable selector-max-specificity, selector-max-compound-selectors
+@import './action-list-variables.scss';
+
+// <ul>
+.ActionList {
+  padding: $spacer-2;
+}
+
+// dividers
+
+.ActionList--divided {
+  .ActionList-item-label::before {
+    position: absolute;
+    top: -$actionList-item-padding-vertical;
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background: var(--color-action-list-item-inline-divider);
+  }
+
+  // hide divider if item is active
+  .ActionList-item--navActive {
+    .ActionList-item-label::before,
+    + .ActionList-item .ActionList-item-label::before {
+      visibility: hidden;
+    }
+  }
+}
+
+.ActionList-item:first-of-type .ActionList-item-label::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before,
+.ActionList-sectionHeader + .ActionList-item .ActionList-item-label::before {
+  visibility: hidden;
+}

package/actionlist/index.scss

@@ -0,0 +1,5 @@
+@import '../support/index.scss';
+@import './action-list-variables.scss';
+@import './action-list.scss';
+@import './action-list-item.scss';
+@import './action-list-item-divider.scss';

package/alerts/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./flash.scss";
+@import '../support/index.scss';
+@import './flash.scss';

package/autocomplete/index.scss

@@ -1,4 +1,4 @@
 // support files
-@import "../support/index.scss";
-@import "./autocomplete.scss";
-@import "./suggester.scss";
+@import '../support/index.scss';
+@import './autocomplete.scss';
+@import './suggester.scss';

package/autocomplete/suggester.scss

@@ -52,7 +52,7 @@
       }
     }
 
-    &[aria-selected="true"],
+    &[aria-selected='true'],
     &.navigation-focus {
       color: var(--color-fg-on-emphasis);
       text-decoration: none;

package/avatars/avatar-stack.scss

@@ -89,7 +89,7 @@
     position: absolute;
     display: block;
     height: 20px;
-    content: "";
+    content: '';
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
     outline: $border-width $border-style var(--color-canvas-default);

package/avatars/circle-badge.scss

@@ -44,7 +44,7 @@
     top: 50%;
     left: 0;
     width: 100%;
-    content: "";
+    content: '';
     // stylelint-disable-next-line primer/borders
     border-bottom: 2px dashed var(--color-border-default);
   }

package/avatars/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Avatars
-@import "./avatar.scss";
-@import "./avatar-parent-child.scss";
-@import "./avatar-stack.scss";
-@import "./circle-badge.scss";
+@import './avatar.scss';
+@import './avatar-parent-child.scss';
+@import './avatar-stack.scss';
+@import './circle-badge.scss';

package/base/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
-@import "./normalize.scss";
-@import "./base.scss";
-@import "./kbd.scss";
-@import "./typography-base.scss";
-@import "./octicons.scss";
+@import './normalize.scss';
+@import './base.scss';
+@import './kbd.scss';
+@import './typography-base.scss';
+@import './octicons.scss';

package/blankslate/index.scss

@@ -1,3 +1,3 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
-@import "./blankslate.scss";
+@import './blankslate.scss';

package/box/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./box.scss";
+@import '../support/index.scss';
+@import './box.scss';

package/branch-name/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./branch-name.scss";
+@import '../support/index.scss';
+@import './branch-name.scss';

package/breadcrumb/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./breadcrumb.scss";
+@import '../support/index.scss';
+@import './breadcrumb.scss';

package/buttons/index.scss

@@ -1,4 +1,4 @@
-@import "../support/index.scss";
-@import "./button.scss";
-@import "./button-group.scss";
-@import "./misc.scss";
+@import '../support/index.scss';
+@import './button.scss';
+@import './button-group.scss';
+@import './misc.scss';

package/color-modes/index.scss

@@ -1,9 +1,9 @@
 // All themes
 
-@import "./themes/light.scss";
-@import "./themes/light_colorblind.scss";
-@import "./themes/dark.scss";
-@import "./themes/dark_dimmed.scss";
-@import "./themes/dark_high_contrast.scss";
-@import "./themes/dark_colorblind.scss";
-@import "./native.scss";
+@import './themes/light.scss';
+@import './themes/light_colorblind.scss';
+@import './themes/dark.scss';
+@import './themes/dark_dimmed.scss';
+@import './themes/dark_high_contrast.scss';
+@import './themes/dark_colorblind.scss';
+@import './native.scss';