@primer/css 0.0.0-20219151218 → 0.0.0-202191521542

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # @primer/css
 
-## 0.0.0-20219151218
+## 0.0.0-202191521542
+
+### Patch Changes
+
+- Fake entry to force publishing
+
+## 18.0.1
+
+### Patch Changes
+
+- [#1663](https://github.com/primer/css/pull/1663) [`87b0b1d4`](https://github.com/primer/css/commit/87b0b1d4c91959c284bd53a2009a182dc9ef9b6e) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the duplicate deprecation backgrounds
+
+## 18.0.0
 
 ### Major Changes
 
@@ -16,7 +28,9 @@
 
 * [#1617](https://github.com/primer/css/pull/1617) [`e47324fa`](https://github.com/primer/css/commit/e47324faa436e892b8621a6dac1fcb2cbad3cdf1) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing `<kbd>` import from markdown package. Going forward you'll need to include `@primer/css/base/kbd.scss` directly.
 
-- [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove break-word from utilities
+- [#1630](https://github.com/primer/css/pull/1630) [`5f7bb45c`](https://github.com/primer/css/commit/5f7bb45c2172393b2f014442067d95b3145c7136) Thanks [@simurai](https://github.com/simurai)! - Update utilities
+
+* [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove break-word from utilities
 
 ### Minor Changes
 
@@ -32,7 +46,17 @@
 
 ### Patch Changes
 
-- Fake entry to force publishing
+- [#1628](https://github.com/primer/css/pull/1628) [`ce197c9f`](https://github.com/primer/css/commit/ce197c9ff18cedd842893186953b68805eed637d) Thanks [@edokoa](https://github.com/edokoa)! - Update flash alert icons
+
+* [#1629](https://github.com/primer/css/pull/1629) [`54d3068b`](https://github.com/primer/css/commit/54d3068bd628f771aacae6b1ce269a5a2cc2d8a1) Thanks [@jdanyow](https://github.com/jdanyow)! - remove remaining color-border-primary refs
+
+- [#1631](https://github.com/primer/css/pull/1631) [`5f3689b9`](https://github.com/primer/css/commit/5f3689b907163f7be9e78abb9fc762978beda06d) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config and @primer/primitives to 5.0
+
+* [#1659](https://github.com/primer/css/pull/1659) [`d32e42f9`](https://github.com/primer/css/commit/d32e42f9ca0ca4eef546d190171cd9e5b4ec8f3d) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename protanopia themes to colorblind.
+
+- [#1658](https://github.com/primer/css/pull/1658) [`0ed0307b`](https://github.com/primer/css/commit/0ed0307b7b79ae59a898c3e8b5e1c9bd2dcd4a7d) Thanks [@koddsson](https://github.com/koddsson)! - Increase the z-index value for the details dialog overlay.
+
+* [#1661](https://github.com/primer/css/pull/1661) [`ebb573ff`](https://github.com/primer/css/commit/ebb573ff09a5ea4eef01e0ccbb7213defaa95321) Thanks [@simurai](https://github.com/simurai)! - Update bg deprecations
 
 ## 17.11.0
 

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

@@ -0,0 +1,314 @@
+// 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;
+
+// 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;
+
+@mixin pseudoBackground {
+  content: '';
+  position: absolute;
+  height: 32px;
+  position: absolute;
+  width: 100%;
+  border-radius: $border-radius-2;
+  z-index: -1;
+}
+
+// // span or a href
+// .ActionList-item-content {
+//   display: grid;
+//   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
+//   grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
+//   grid-template-columns: minmax(min-content, 100%); // default one column
+//   column-gap: $spacer-2;
+//   align-items: center;
+//   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;
+
+//   &:before {
+//     @include pseudoBackground;
+//   }
+
+//   &:hover {
+//     text-decoration: none;
+//   }
+
+//   &:focus-visible {
+//     outline: none;
+//     box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+//     position: relative;
+//     z-index: 1;
+//   }
+
+//   // desktop
+//   @media (hover: hover) and (pointer: fine) {
+//     &:hover {
+//       cursor: pointer;
+//       &:before {
+//         background-color: $actionList-item-hover-bg;
+//       }
+//     }
+//   }
+
+//   &: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);
+//       }
+//     }
+//   }
+
+//   // 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);
+//   }
+
+//   // variants
+
+//   &.ActionList-item-content--danger {
+//     .ActionList-item-label {
+//       color: var(--color-danger-fg);
+//     }
+
+//     @media (hover: hover) and (pointer: fine) {
+//       &:hover {
+//         background: var(--color-danger-subtle);
+//       }
+//     }
+
+//     &:active {
+//       background: var(--color-danger-subtle);
+//     }
+//   }
+
+//   // children grid definitions
+
+//   &.ActionList-item-content--blockDescription {
+//     // if leading/trailing visual, align with first line of content
+//     .ActionList-item-visual {
+//       place-self: start;
+//     }
+//   }
+
+//   // leading visual
+//   &.ActionList-item-content--leadingVisual {
+//     grid-template-columns: min-content minmax(min-content, auto);
+//   }
+
+//   // trailing visual
+//   &.ActionList-item-content--trailingVisual {
+//     grid-template-columns: minmax(min-content, auto) min-content;
+//   }
+
+//   // leading + trailing visuals
+//   &.ActionList-item-content--leadingVisual.ActionList-item-content--trailingVisual {
+//     grid-template-columns: min-content minmax(min-content, auto) min-content;
+//   }
+
+//   // checkmark
+//   &.ActionList-item-content--singleSelect,
+//   &.ActionList-item-content--multiSelect {
+//     grid-template-columns: min-content minmax(min-content, auto);
+
+//     // checkmark + leading visual
+//     &.ActionList-item-content--leadingVisual {
+//       grid-template-columns: min-content min-content minmax(min-content, auto);
+//     }
+
+//     // checkmark + trailing visual
+//     &.ActionList-item-content--trailingVisual {
+//       grid-template-columns: min-content minmax(min-content, auto) min-content;
+//     }
+
+//     // checkmark + leading * trailing visuals
+//     &.ActionList-item-content--leadingVisual.ActionList-item-content--trailingVisual {
+//       grid-template-columns: min-content min-content minmax(min-content, auto) min-content;
+//     }
+//   }
+
+//   // helper for grid alignment with multi-line content
+//   // span wrapping svg or text
+//   .ActionList-item-visual {
+//     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-label {
+//     font-weight: $font-weight-normal;
+//     color: var(--color-fg-default);
+//     position: relative; // for pseudo dividers
+//   }
+
+//   // wrapper span
+//   .ActionList-item-label--blockDescription,
+//   .ActionList-item-label--inlineDescription {
+//     display: flex;
+
+//     .ActionList-item-label {
+//       font-weight: $font-weight-bold;
+//     }
+//   }
+
+//   // block
+//   .ActionList-item-label--blockDescription {
+//     flex-direction: column;
+
+//     .ActionList-item-description {
+//       margin-top: $spacer-1;
+//     }
+//   }
+
+//   // inline
+//   .ActionList-item-label--inlineDescription {
+//     flex-direction: row;
+//     align-items: baseline;
+
+//     .ActionList-item-description {
+//       margin-left: $actionList-item-padding-horizontal;
+//     }
+//   }
+
+//   // description
+//   .ActionList-item-description {
+//     font-size: $font-size-small;
+//     line-height: $lh-default;
+//     color: var(--color-fg-muted);
+//   }
+// }
+
+// // .ActionList-item--sub-group .ActionList-item:last-of-type .ActionList-item--sub-group {
+// .ActionList-item-visual--16 + .ActionList-item--sub-group .ActionList-item:last-of-type .ActionList-item--sub-group {
+//   .ActionList-item--sub-item > .ActionList-item-content {
+//     &:before {
+//       width: calc(100% + 48px);
+//       transform: translateX(-48px);
+//     }
+
+//     &:after {
+//       transform: translateX(-48px);
+//     }
+//   }
+// }
+// // }
+
+// .ActionList-item--sub-group {
+//   padding-left: 24px;
+// }
+
+// .ActionList-item--sub-item > .ActionList-item-content {
+//   font-size: $font-size-small;
+
+//   //   .ActionList-item-label {
+//   //     grid-column: 2/3;
+//   //   }
+// }
+
+// .ActionList-item-visual--16 + .ActionList-item--sub-group .ActionList-item:last-of-type {
+//   > a:before {
+//     width: calc(100% + 24px);
+//     transform: translateX(-24px);
+//   }
+// }
+
+// .ActionList-item-visual--16 + .ActionList-item--sub-group {
+//   .ActionList-item--sub-item > .ActionList-item-content {
+//     // padding-left: 16px;
+
+//     &:before {
+//       width: calc(100% + 24px);
+//       transform: translateX(-24px);
+//     }
+
+//     &:after {
+//       transform: translateX(-24px);
+//     }
+//   }
+// }
+
+// .ActionList-item-visual--20 + .ActionList-item--sub-group {
+//   .ActionList-item--sub-item > .ActionList-item-content {
+//     padding-left: 20px;
+//   }
+// }
+
+// .ActionList-item-visual--24 + .ActionList-item--sub-group {
+//   .ActionList-item--sub-item > .ActionList-item-content {
+//     padding-left: 24px;
+//   }
+// }
+// // single select
+
+// // maintain space on grid while check is hidden
+// // .ActionList-item-content--singleSelect {
+// //   .ActionList-item-check {
+// //     visibility: hidden;
+// //     opacity: 0;
+// //     transition: visibility 0s linear $actionList-item-checkmark-transition-timing,
+// //       opacity $actionList-item-checkmark-transition-timing;
+// //   }
+// // }
+
+// // &[aria-checked='true'] {
+// //   .ActionList-item-content--singleSelect {
+// //     .ActionList-item-check {
+// //       visibility: visible;
+// //       opacity: 1;
+// //       transition: visibility 0s linear 0s, opacity $actionList-item-checkmark-transition-timing;
+// //     }
+// //   }
+// // }

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

@@ -0,0 +1,73 @@
+// 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;
+
+// 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
+
+// emtpy divider
+
+.ActionList-sectionDivider {
+  height: 1px;
+  background: $actionList-item-divider;
+  border: 0;
+  margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+  padding: 0;
+  list-style: none;
+}
+
+.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;
+  }
+}
+
+// section header
+
+.ActionList-sectionHeader {
+  // 32px total height considering 20px line-height
+  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;
+
+  .ActionList-sectionHeader--description {
+    font-size: $font-size-small;
+    font-weight: $font-weight-normal;
+  }
+}