@primer/css 0.0.0-202192543524 → 0.0.0-20219260536

package/CHANGELOG.md

@@ -1,15 +1,29 @@
 # @primer/css
 
-## 0.0.0-202192543524
+## 0.0.0-20219260536
 
-### Patch Changes
+### Minor Changes
 
-- [#1680](https://github.com/primer/css/pull/1680) [`f013be66`](https://github.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://github.com/privatenumber)! - Fixing broken close span tag in the docs.
+- [#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
 
-* [#1690](https://github.com/primer/css/pull/1690) [`3c0a65c5`](https://github.com/primer/css/commit/3c0a65c5efdc63352ae88881f2fd6ea3b96ad77c) Thanks [@simurai](https://github.com/simurai)! - Update `Subhead` actions
+### Patch Changes
 
 - Fake entry to force publishing
 
+* [#1693](https://github.com/primer/css/pull/1693) [`c1ca19d4`](https://github.com/primer/css/commit/c1ca19d4f071a9b12172e4a13bdb96c52a200d47) Thanks [@jasonmacgowan](https://github.com/jasonmacgowan)! - Fix light-theme attr reference in theme docs
+
+- [#1689](https://github.com/primer/css/pull/1689) [`257f68f6`](https://github.com/primer/css/commit/257f68f6539539ab809fbdb4351aefa57173e044) Thanks [@adityatheoctocatdev](https://github.com/adityatheoctocatdev)! - Update all Toast variant icons to use `var(--color-fg-on-emphasis)`
+
+  The only visible change is in the `warning` variant, previously using `var(--color-fg-default)`
+
+## 18.0.2
+
+### Patch Changes
+
+- [#1680](https://github.com/primer/css/pull/1680) [`f013be66`](https://github.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://github.com/privatenumber)! - Fixing broken close span tag in the docs.
+
+* [#1677](https://github.com/primer/css/pull/1677) [`cdb0faa6`](https://github.com/primer/css/commit/cdb0faa606e6fb35ea4a85dd3866bbb33131b76c) Thanks [@simurai](https://github.com/simurai)! - Lower contrast for disabled text
+
 ## 18.0.1
 
 ### Patch Changes

package/actionlist/action-list-helpers-temporary.scss

@@ -0,0 +1,35 @@
+// 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-20: 20px;
+$s-28: 28px;
+
+// 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-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
+$actionList-item-padding-vertical: 6px;
+$actionList-item-padding-horizontal: $spacer-2;
+$actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
+$actionList-item-checkmark-transition-timing: 50ms;
+
+// waiting on https://github.com/primer/primitives/pull/256 for these primitives
+$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;
+
+// $actionList-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
+$actionList-item-padding-vertical: 6px;
+$actionList-item-padding-horizontal: $spacer-2;
+$actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
+
+$actionList-padding: $spacer-2;

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

@@ -0,0 +1,48 @@
+@import './action-list-helpers-temporary.scss';
+
+// emtpy divider
+
+.ActionList-sectionDivider {
+  // has children
+  &:not(:empty) {
+    padding: (($spacer-5 - $s-20) / 2) $spacer-2;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+    display: flex;
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    background: $actionList-item-divider;
+    border: 0;
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    padding: 0;
+    list-style: none;
+  }
+
+  // secondary description text
+  .ActionList-sectionDivider--description {
+    font-size: $font-size-small;
+    font-weight: $font-weight-normal;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  border-top: 1px solid var(--color-scale-gray-2);
+  border-bottom: 1px solid var(--color-scale-gray-2);
+
+  // 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,397 @@
+@import './action-list-helpers-temporary.scss';
+
+@mixin focusOutline {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+  position: relative;
+  z-index: 1;
+}
+
+// <li>
+.ActionList-item {
+  list-style: none;
+  position: relative;
+  border-radius: $border-radius-2;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+
+    // a href
+    .ActionList-item-content {
+      text-decoration: none;
+    }
+  }
+
+  // only hover li without list as children
+  &:not(.ActionList-item--has-sub-item) {
+    &:hover {
+      background-color: $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);
+        }
+      }
+    }
+
+    &:hover,
+    &:active {
+      // hide dividers
+      .ActionList-item-content--label:before,
+      + .ActionList-item .ActionList-item-content--label:before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  // target contents of li if sub-item (li wraps item label + nested ul)
+  // collapse styles here
+  &.ActionList-item--has-sub-item {
+    // first child
+    > .ActionList-item-content {
+      &:hover {
+        background-color: $actionList-item-hover-bg;
+      }
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--nav-active:not(.ActionList-item--danger) {
+    background: $actionList-item-selected-bg;
+    &:before,
+    + .ActionList-item:before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &:after {
+      content: '';
+      width: $spacer-1;
+      height: $spacer-4;
+      border-radius: $border-radius-1;
+      position: absolute;
+      left: -$actionList-item-padding-horizontal;
+      top: calc(50% - (24px / 2));
+      background: var(--color-accent-fg);
+    }
+  }
+
+  // collapsible item [aria-expanded]
+
+  &[aria-expanded='true'] {
+    .ActionList-item-content--collapseIcon {
+      transform: scaleY(-1);
+      transition: transform 120ms linear;
+    }
+
+    .ActionList--sub-group {
+      display: block;
+    }
+
+    &.ActionList-item--has-sub-item {
+      > .ActionList-item-content > .ActionList-item-content--label {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    .ActionList-item-content--collapseIcon {
+      transform: scaleY(1);
+      transition: transform 120ms linear;
+    }
+
+    .ActionList--sub-group {
+      display: none;
+    }
+  }
+
+  // checkbox item [aria-checked]
+  // listbox [aria-selected]
+
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    // multiselect checkmark
+    .ActionList-item-content--multiSelect-checkmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0s linear 0s, opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-content--singleSelect {
+      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-content--multiSelect {
+      .ActionList-item-content--multiSelect-rectangle {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: $border-width;
+      }
+
+      .ActionList-item-content--multiSelect-checkmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    // multiselect checkmark
+    .ActionList-item-content--multiSelect-checkmark {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0s linear $actionList-item-checkmark-transition-timing,
+        opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-content--singleSelect {
+      visibility: hidden;
+      clip-path: inset(16px 0 0 0);
+      transition: visibility 0s linear 200ms;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-content--multiSelect {
+      .ActionList-item-content--multiSelect-rectangle {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: $border-width;
+      }
+    }
+
+    .ActionList-item-content--multiSelect-rectangle {
+      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
+
+  &.ActionList-item--danger {
+    .ActionList-item-content--label {
+      color: var(--color-danger-fg);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--color-danger-subtle);
+      }
+    }
+
+    &:active {
+      background: var(--color-danger-subtle);
+    }
+  }
+
+  // if nested list exists, remove default padding
+  .ActionList {
+    padding: unset;
+  }
+}
+
+// span or a href
+.ActionList-item-content {
+  display: grid;
+  grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
+  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;
+  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
+  position: relative;
+  border-radius: $border-radius-2;
+  font-weight: $font-weight-normal;
+  color: var(--color-fg-default);
+  user-select: none;
+  transition: $actionList-item-bg-transition;
+
+  // 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-item-content--sizeMedium {
+    grid-template-rows: minmax(28px, max-content); // 28px + 12px padding [40]
+  }
+
+  &.ActionList-item-content--sizeLarge {
+    grid-template-rows: minmax(36px, max-content); // 36px + 12px padding [48]
+  }
+
+  // On pointer:coarse (mobile), all list items are large
+  @media (pointer: coarse) {
+    grid-template-rows: minmax(36px, max-content);
+  }
+
+  &.ActionList-item-content--blockDescription {
+    // if leading/trailing visual, align with first line of content
+    .ActionList-item-content--visual {
+      place-self: start;
+    }
+  }
+}
+
+// place children on grid
+
+.ActionList-item-content--action-leading {
+  grid-area: leadingAction;
+}
+
+.ActionList-item-content--visual-leading {
+  grid-area: leadingVisual;
+}
+
+.ActionList-item-content--label {
+  grid-area: label;
+}
+
+.ActionList-item-content--visual-trailing {
+  grid-area: trailingVisual;
+}
+
+.ActionList-item-content--action-trailing {
+  grid-area: trailingAction;
+}
+
+// wrapper span
+.ActionList-item-content--label-blockDescription,
+.ActionList-item-content--label-inlineDescription {
+  grid-area: label;
+  display: flex;
+
+  .ActionList-item-content--label {
+    font-weight: $font-weight-bold;
+  }
+}
+
+// block
+.ActionList-item-content--label-blockDescription {
+  flex-direction: column;
+
+  .ActionList-item-content--description {
+    margin-top: $spacer-1;
+  }
+}
+
+// inline
+.ActionList-item-content--label-inlineDescription {
+  flex-direction: row;
+  align-items: baseline;
+
+  .ActionList-item-content--description {
+    margin-left: $actionList-item-padding-horizontal;
+  }
+}
+
+// description
+.ActionList-item-content--description {
+  font-size: $font-size-small;
+  line-height: $lh-default;
+  color: var(--color-fg-muted);
+}
+
+// helper for grid alignment with multi-line content
+// span wrapping svg or text
+.ActionList-item-content--visual,
+.ActionList-item-content--action {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  fill: var(--color-fg-muted);
+  color: var(--color-fg-muted); // if visual is text
+}
+
+// text
+.ActionList-item-content--label {
+  font-weight: $font-weight-normal;
+  color: var(--color-fg-default);
+  position: relative; // for pseudo dividers
+}
+
+// nested lists (only supports 1 level currently)
+// target ActionList-item--sub-item for padding-left to maintain :active :after state
+
+.ActionList-item--sub-item > .ActionList-item-content {
+  font-size: $font-size-small;
+}
+
+// no leading visual
+.ActionList--sub-group {
+  .ActionList-item--sub-item {
+    padding-left: 16px;
+  }
+}
+
+// has 16px leading visual
+.ActionList-item-content--visual--16 + .ActionList--sub-group {
+  .ActionList-item--sub-item {
+    padding-left: 24px;
+  }
+}
+
+// has 20px leading visual
+.ActionList-item-content--visual--20 + .ActionList--sub-group {
+  .ActionList-item--sub-item {
+    padding-left: 28px;
+  }
+}
+
+// has 24px leading visual
+.ActionList-item-content--visual--24 + .ActionList--sub-group {
+  .ActionList-item--sub-item {
+    padding-left: 32px;
+  }
+}

package/actionlist/action-list.scss

@@ -0,0 +1,34 @@
+@import './action-list-helpers-temporary.scss';
+
+// <ul>
+.ActionList {
+  padding: $actionList-padding;
+}
+
+// dividers
+
+.ActionList--divided {
+  .ActionList-item-content--label:before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background: $actionList-item-divider;
+    top: -$actionList-item-padding-vertical;
+  }
+
+  // hide divider if item is active
+  .ActionList-item--nav-active {
+    .ActionList-item-content--label:before,
+    + .ActionList-item .ActionList-item-content--label:before {
+      visibility: hidden;
+    }
+  }
+}
+
+.ActionList-item:first-of-type .ActionList-item-content--label:before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-content--label:before,
+.ActionList-sectionHeader + .ActionList-item .ActionList-item-content--label:before {
+  visibility: hidden;
+}

package/actionlist/index.scss

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

package/alerts/flash.scss

@@ -57,6 +57,15 @@
   margin-top: -3px;
   margin-left: $spacer-4;
   background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary .octicon {
+    color: inherit;
+  }
 }
 
 //

package/autocomplete/suggester.scss

@@ -46,6 +46,10 @@
       small {
         color: var(--color-fg-on-emphasis);
       }
+
+      .octicon {
+        color: inherit !important;
+      }
     }
 
     &[aria-selected="true"],
@@ -57,6 +61,10 @@
       small {
         color: var(--color-fg-on-emphasis);
       }
+
+      .octicon {
+        color: inherit !important;
+      }
     }
   }
 }

package/buttons/button.scss

@@ -26,10 +26,6 @@
   &.disabled,
   &[aria-disabled=true] {
     cursor: default;
-
-    .octicon {
-      color: var(--color-fg-muted);
-    }
   }
 
   i {
@@ -96,9 +92,13 @@
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
+
+    .octicon {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 
   // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons

package/buttons/misc.scss

@@ -24,7 +24,7 @@
   &[aria-disabled=true] {
     &,
     &:hover {
-      color: var(--color-fg-muted);
+      color: var(--color-primer-fg-disabled);
       cursor: default;
     }
   }
@@ -63,6 +63,7 @@
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
+    color: var(--color-primer-fg-disabled);
     background-color: transparent;
   }
 }
@@ -89,10 +90,10 @@
 
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    &:hover { color: var(--color-fg-muted); }
+    &:hover { color: var(--color-primer-fg-disabled); }
   }
 }
 

package/core/index.scss

@@ -6,23 +6,24 @@
  */
 
 // Global requirements
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Color modes
 
 // Core modules
-@import "../base/index.scss";
-@import "../box/index.scss";
-@import "../breadcrumb/index.scss";
-@import "../buttons/index.scss";
-@import "../table-object/index.scss";
-@import "../forms/index.scss";
-@import "../layout/index.scss";
-@import "../links/index.scss";
-@import "../navigation/index.scss";
-@import "../pagination/index.scss";
-@import "../tooltips/index.scss";
-@import "../truncate/index.scss";
+@import '../actionlist/index.scss';
+@import '../base/index.scss';
+@import '../box/index.scss';
+@import '../breadcrumb/index.scss';
+@import '../buttons/index.scss';
+@import '../table-object/index.scss';
+@import '../forms/index.scss';
+@import '../layout/index.scss';
+@import '../links/index.scss';
+@import '../navigation/index.scss';
+@import '../pagination/index.scss';
+@import '../tooltips/index.scss';
+@import '../truncate/index.scss';
 
 // Utilities always go last so that they can override components
-@import "../utilities/index.scss";
+@import '../utilities/index.scss';