feat(prose): update code element styling; cleanup

.changeset/quick-ghosts-yell.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": minor
+---
+
+Update prose component to SHINE styles

MIGRATION_GUIDE.md

@@ -157,6 +157,9 @@ The Post Summary component has changed dramatically. Please refer to the docs fo
 #### Popover
 - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `<div class="s-popover--arrow"></div>`) should be deleted from the codebases as part of the migration.
 
+#### Prose
+- `xs` and `md` sizes removed
+
 #### Select
 - `md` and `xl` sizes removed
 

packages/stacks-classic/lib/components/prose/prose.a11y.test.ts

@@ -0,0 +1,16 @@
+import { runA11yTests } from "../../test/a11y-test-utils";
+import "../../index";
+import proseTestHTML from "./prose.test.setup";
+
+describe("prose", () => {
+    runA11yTests({
+        baseClass: "s-prose",
+        modifiers: {
+            primary: ["sm"],
+        },
+        children: {
+            default: proseTestHTML,
+        },
+        tag: "article",
+    });
+});

packages/stacks-classic/lib/components/prose/prose.less

@@ -46,29 +46,15 @@
     });
 
     // MODIFIERS
-    &&__xs,
-    &&__sm,
-    &&__md {
+    &&__sm {
         --_pr-h1-fs: 1.75em;
         --_pr-h2-fs: 1.375em;
         --_pr-h3-fs: 1.25em;
         --_pr-h4-fs: 1.125em;
         --_pr-h5-fs: 1em;
-    }
-
-    &&__xs {
         --_pr-fs: var(--fs-caption);
-        --_pr-lh: var(--lh-sm);
-    }
-
-    &&__sm {
-        --_pr-fs: var(--fs-body1);
         --_pr-lh: var(--lh-md);
-    }
-
-    &&__md {
-        --_pr-fs: var(--fs-body3);
-        --_pr-lh: var(--lh-xl);
+        --_pr-code-fs: var(--fs-caption);
     }
 
     // CHILD ELEMENTS
@@ -77,11 +63,13 @@
             color: var(--theme-link-color, var(--theme-secondary-400)); // When contained within a link, we want the code to be link-colored
         }
 
+        // Code blocks use ems to maintain sizes relative to the surrounding text
         > code {
-            padding: var(--su2) var(--su4);
-            color: var(--black-600);
             background-color: var(--black-200);
-            border-radius: var(--br-md);
+            color: var(--black-600);
+            // TODO verify this font size is appropriate with a Windows font stack
+            font-size: .875em;
+            padding: 0.1875em 0.375em;
         }
     }
 
@@ -254,7 +242,7 @@
             margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment
         }
 
-        margin-bottom:@pr-spacing;
+        margin-bottom: @pr-spacing;
         margin-top: 0;
     }
 
@@ -364,7 +352,7 @@
     p {
         --_pr-img-mb: 0;
 
-        a {
+        a:not([class]) {
             text-decoration: underline;
         }
 
@@ -429,7 +417,7 @@
 
         > * {
             opacity: var(--_pr-soiler-child-o);
-            transition: @pr-spoiler-transition;
+            transition: var(--_pr-spoiler-transition);
             visibility: var(--_pr-soiler-child-visibility); // hidden elements don't respond to mouse events, but still retain their space
         }
 

packages/stacks-classic/lib/components/prose/prose.test.setup.ts

@@ -0,0 +1,112 @@
+// Sample HTML for the prose component
+const sampleHTMLFragment = `<strong>Markdown</strong> is <em>intended</em> to be as <code>easy-to-read</code> and <code>easy-to-write</code> as is <a href="#">feasible</a>. Readability, however, is emphasized above all else.`;
+const sampleListItems = `
+<li>${sampleHTMLFragment}</li>
+<li>Item 2</li>
+  <li>
+  <ol>
+    <li>${sampleHTMLFragment}</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ol>
+</li>
+<li>Item 4</li>
+<li>
+    <ul>
+    <li>${sampleHTMLFragment}</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</li>
+`;
+
+export default `
+<h4>Code block</h4>
+<pre class="language-html s-code-block" tabindex="0"><code class="language-html s-code-block"><span class="hljs-tag">&lt;<span class="hljs-name">article</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-prose"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Garlic bread with cheese: What the science tells us<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+    For years parents have espoused the health benefits of eating garlic bread with cheese to their
+    children, with the food earning such an iconic status in our culture that kids will often dress
+    up as warm, cheesy loaf for Halloween.
+  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+    springing up around the country.
+  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- ... --&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span></code></pre>
+
+<h4>Headings</h4>
+<h1>Heading 1: ${sampleHTMLFragment}</h1>
+<h2>Heading 2: ${sampleHTMLFragment}</h2>
+<h3>Heading 3: ${sampleHTMLFragment}</h3>
+<h4>Heading 4: ${sampleHTMLFragment}</h4>
+<h5>Heading 5: ${sampleHTMLFragment}</h5>
+<h6>Heading 6: ${sampleHTMLFragment}</h6>
+
+<h4>Paragraphs</h4>
+<p>Paragraph 1: ${sampleHTMLFragment}</p>
+<p>Paragraph 2: ${sampleHTMLFragment}</p>
+
+<h4>Unordered list w/ nested ordered list</h4>
+<ul>
+  ${sampleListItems}
+</ul>
+
+<h4>Ordered list w/ nested unordered list</h4>
+<ol>
+  ${sampleListItems}
+</ol>
+
+<h4>Blockquote</h4>
+<blockquote>
+    <p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
+    <p>${sampleHTMLFragment}</p>
+</blockquote>
+
+<h4>Image</h4>
+<p><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI5MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImNoZWNrZXIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjxyZWN0IHg9IjEwMCIgeT0iMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjxyZWN0IHg9IjEwMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2MiLz48cmVjdCB4PSIwIiB5PSIxMDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjY2NjIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2NoZWNrZXIpIi8+PC9zdmc+" alt="Sample checkerboard image"></p>
+
+<h4>Table</h4>
+<div class="s-table-container">
+  <table class="s-table">
+    <thead>
+      <tr>
+        <th>Wrestler</th>
+        <th>Origin</th>
+        <th>Finisher</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Bret "The Hitman" Hart</td>
+        <td>Calgary, AB</td>
+        <td>Sharpshooter</td>
+      </tr>
+      <tr>
+        <td>Stone Cold Steve Austin</td>
+        <td>Austin, TX</td>
+        <td>Stone Cold Stunner</td>
+      </tr>
+      <tr>
+        <td>Randy Savage</td>
+        <td>Sarasota, FL</td>
+        <td>Elbow Drop</td>
+      </tr>
+      <tr>
+        <td>Vader</td>
+        <td>Boulder, CO</td>
+        <td>Vader Bomb</td>
+      </tr>
+      <tr>
+        <td>Razor Ramon</td>
+        <td>Chuluota, FL</td>
+        <td>Razor’s Edge</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h4>Odd text</h4>
+<p>☺🐉 ᵃᵉⁱᵒᵘ ₐₑᵢₒᵤ s̶t̶r̶i̶k̶e̶o̶u̶t̶ Z̸̧̦̥͔̻̞̟͔͒̓̄̓͐͆͋̃̅͆̓͘̚͝͝à̷̛̜͇̺̖̯̭͓̱̱̣̺̲̪̰l̷̢̳̤̮͈͎̩̱̳̱̱̞͆͂̽̀̃͒̿̄̅͊͘͘̚͠͝ͅg̷͙͋o̶̧̩̓̓͌̄͊͐̓̇̏͝ ̶̛͚͖͍̦͕̞͈͆̋̓̈̏̈̓̊̅͆͘͜t̸̬̮̖̖͙͔̮͊̔͊͌́̈́͒̇͒̽̑̎̚̕͠ė̶̖̰̬͙͙̇̈͌͘͜͜x̴͔̎t̶̖́̒̏͒͌̈́̏͊̒̉ͅ ̵̨͍̬͔̼̣̘̖͍͖̘͍͋̑͛̂̾̋ḧ̸̡̘̬̲̣̺́́̿̀̈ͅé̷̦̰̻̤̲̺̠̏͒̉͛̍͌̍ͅr̶̩̯̱̜͆̌̾͌̑̇̊͒̃̀̽̍̚é̴̜̉̇̿̈́͌̕.̸̢̱͔̲̫̇͌̽̌͂͊͊̈́̇</p>
+`;

packages/stacks-classic/lib/components/prose/prose.visual.test.ts

@@ -0,0 +1,23 @@
+import "../../index";
+import { html } from "@open-wc/testing";
+import { runVisualTests } from "../../test/visual-test-utils";
+import proseTestHTML from "./prose.test.setup";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid, className }: any) => html`
+    <article class="${className} p16" data-testid="${testid}">
+        ${component}
+    </article>
+`;
+describe("prose", () => {
+    runVisualTests({
+        baseClass: "s-prose",
+        modifiers: {
+            primary: ["sm"],
+        },
+        children: {
+            default: proseTestHTML,
+        },
+        template,
+    });
+});

packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -376,7 +376,7 @@ body .themed {
     --highlight-attribute: hsl(206, 98.5%, 29%);
     --highlight-bg: hsl(0, 0%, 96.5%);
     --highlight-color: var(--black-600);
-    --highlight-comment: hsl(210, 8%, 43.5%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: hsl(206, 98.5%, 29%);
     --highlight-literal: hsl(27, 99%, 36%);

packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -164,7 +164,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --highlight-attribute: hsl(206, 98.5%, 29%);
     --highlight-bg: hsl(0, 0%, 96.5%);
     --highlight-color: var(--black-600);
-    --highlight-comment: hsl(210, 8%, 43.5%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: hsl(206, 98.5%, 29%);
     --highlight-literal: hsl(27, 99%, 36%);
@@ -305,7 +305,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --highlight-attribute: var(--blue-400);
     --highlight-bg: hsl(0, 2%, 11%);
     --highlight-color: var(--black);
-    --highlight-comment: hsl(0, 0%, 60%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: var(--blue-400);
     --highlight-literal: hsl(27, 95%, 65%);
@@ -444,7 +444,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --highlight-attribute: var(--blue-400);
         --highlight-bg: hsl(0, 2%, 11%);
         --highlight-color: var(--black);
-        --highlight-comment: hsl(0, 0%, 60%);
+        --highlight-comment: var(--black-400);
         --highlight-deletion: var(--red-500);
         --highlight-keyword: var(--blue-400);
         --highlight-literal: hsl(27, 95%, 65%);
@@ -583,7 +583,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --highlight-attribute: hsl(215, 100%, 35%);
     --highlight-bg: hsl(0, 0%, 96.5%);
     --highlight-color: var(--black-600);
-    --highlight-comment: hsl(213, 7%, 33%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-400);
     --highlight-keyword: hsl(215, 100%, 35%);
     --highlight-literal: hsl(16, 94%, 31%);
@@ -704,7 +704,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --highlight-attribute: hsl(200, 57%, 85%);
     --highlight-bg: hsl(0, 0%, 10%);
     --highlight-color: hsl(0, 0%, 100%);
-    --highlight-comment: hsl(0, 0%, 99%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: hsl(200, 57%, 85%);
     --highlight-literal: hsl(36, 96%, 71%);
@@ -825,7 +825,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --highlight-attribute: hsl(200, 57%, 85%);
         --highlight-bg: hsl(0, 0%, 10%);
         --highlight-color: hsl(0, 0%, 100%);
-        --highlight-comment: hsl(0, 0%, 99%);
+        --highlight-comment: var(--black-400);
         --highlight-deletion: var(--red-500);
         --highlight-keyword: hsl(200, 57%, 85%);
         --highlight-literal: hsl(36, 96%, 71%);

packages/stacks-classic/lib/exports/color-sets.less

@@ -526,7 +526,7 @@
     attribute: hsl(206, 98.5%, 29%);
     bg: hsl(0, 0%, 96.5%);
     color: var(--black-600);
-    comment: hsl(210, 8%, 43.5%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword: hsl(206, 98.5%, 29%);
     literal: hsl(27, 99%, 36%);
@@ -540,7 +540,7 @@
     attribute: var(--blue-400);
     bg: hsl(0, 2%, 11%);
     color: var(--black);
-    comment: hsl(0, 0%, 60%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword:var(--blue-400);
     literal: hsl(27, 95%, 65%);
@@ -554,7 +554,7 @@
     attribute: hsl(215, 100%, 35%);
     bg: hsl(0, 0%, 96.5%);
     color: var(--black-600);
-    comment: hsl(213, 7%, 33%);
+    comment: var(--black-400);
     deletion: var(--red-400);
     keyword: hsl(215, 100%, 35%);
     literal: hsl(16, 94%, 31%);
@@ -568,7 +568,7 @@
     attribute: hsl(200, 57%, 85%);
     bg: hsl(0, 0%, 10%);
     color: hsl(0, 0%, 100%);
-    comment: hsl(0, 0%, 99%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword: hsl(200, 57%, 85%);
     literal: hsl(36, 96%, 71%);