Repo sync

package.json

@@ -239,7 +239,7 @@
  "@octokit/plugin-retry": "6.0.1",
  "@octokit/request-error": "5.0.1",
  "@primer/behaviors": "^1.3.5",
- "@primer/css": "^21.0.7",
+ "@primer/css": "^21.2.2",
  "@primer/octicons": "^19.5.0",
  "@primer/octicons-react": "^19.5.0",
  "@primer/react": "36.2.0",

src/frame/components/ui/MarkdownContent/stylesheets/lists.scss

@@ -1,94 +1,30 @@
-.markdownBody {
- ol:not(:global(.no-styling)) {
- counter-reset: li;
- list-style: none;
- position: relative;
- padding-bottom: 0.5rem;
- padding-left: 0;
-
- > li {
- padding: 0.5rem 0 0.5rem 2.5rem;
- border: 0;
- position: relative;
- margin-bottom: 0.25rem;
-
- &:before {
- width: calc(1.5rem - 2px);
- height: calc(1.5rem - 2px);
- font-size: calc(1rem - 2px);
- margin: 1px 0 0 0.5rem;
- content: counter(li);
- counter-increment: li;
- position: absolute;
- left: 0;
- color: var(--color-canvas-default);
- font-weight: 500;
- text-align: center;
- border-radius: 50%;
- background-color: var(--color-fg-default);
- }
-
- &:after {
- content: ".";
- display: block;
- clear: both;
- visibility: hidden;
- line-height: 0;
- height: 0;
- }
-
- p {
- margin: 0;
- }
-
- p:first-child {
- margin-top: 0;
- }
-
- p:not(:first-child) {
- margin-top: 1rem;
- }
+@import "@primer/css/support/variables/typography.scss";
 
- [class~="ghd-tool"] {
- margin-top: 1rem;
- }
+$ol-circled-reduce-diameter: 2px;
+// line-height is 24 pixels (16 * 1.5), and we want a 22px diameter but respect the line-height.
 
- // for one level deep of nested ordered lists we switch bullet points
- // from the custom numbers to letters
- ol {
- padding-left: 2em;
- counter-reset: revert;
-
- > li {
- list-style-type: lower-alpha;
- padding-left: 0.5rem;
-
- &:before {
- all: unset;
- }
+.markdownBody {
+ > :global(.ghd-tool) > ol:not(:global(.no-styling)),
+ > ol:not(:global(.no-styling)) {
+ list-style: none;
 
- &:after {
- all: unset;
- }
- }
- }
+ > li::before {
+ content: counter(list-item);
+ float: left;
+ width: calc(1.5rem - $ol-circled-reduce-diameter);
+ margin-left: -2rem;
+ margin-top: $ol-circled-reduce-diameter / 2;
+ font-size: $h5-size;
+ line-height: calc(1.5rem - $ol-circled-reduce-diameter);
+ font-weight: 500;
+ text-align: center;
+ background-color: var(--color-fg-default);
+ color: var(--color-canvas-default);
+ border-radius: 50%;
  }
 
- ol li:before:global(.no-styling) {
- display: none;
+ ol {
+ list-style-type: lower-alpha;
  }
  }
-
- ul ul,
- ul ol,
- ol ol,
- ol ul {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-}
-
-/* Override primer style */
-.markdownBody div > ol:not([type]) {
- list-style-type: none;
 }