From c65a8b801f069798e8094393301d85c4eb66688c Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 4 Feb 2026 18:43:29 -0500 Subject: [PATCH 01/14] feat(prose): update code element styling; cleanup --- .../lib/components/prose/prose.less | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index f788af762f..dbc20b1cd1 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -1,8 +1,8 @@ .s-prose { // CONSTANTS - @pr-spacing: 1.1em; - @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc. - @pr-spoiler-transition: opacity 0.1s ease-in-out; + --_pr-spacing: 1.1em; + --_pr-spacing-condensed: calc(var(--_pr-spacing) / 2); // Reduce the base spacing by half in the context of lists, etc. + --_pr-spoiler-transition: opacity 0.1s ease-in-out; // COMPONENT-SPECIFIC CUSTOM PROPERTIES --_pr-fs: unset; --_pr-lh: 1.5; @@ -17,7 +17,7 @@ --_pr-h5-fs: var(--fs-body2); --_pr-h6-fs: var(--fs-body1); --_pr-hr-bg: var(--black-225); // used for both background-color and color properties - --_pr-img-mb: @pr-spacing; + --_pr-img-mb: var(--_pr-spacing); --_pr-kbd-bc: var(--black-300); --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static); --_pr-spoiler-cursor: pointer; @@ -26,8 +26,8 @@ --_pr-soiler-child-o: 0; --_pr-soiler-child-visibility: hidden; // TEMP HOT FIX FOR .s-editor [1] - --s-prose-spacing: @pr-spacing; // TODO remove once addressed in StackExchange/Stacks-Editor - --s-prose-spacing-condensed: @pr-spacing-condensed; // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing: var(--_pr-spacing); // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing-condensed: var(--_pr-spacing-condensed); // TODO remove once addressed in StackExchange/Stacks-Editor // CONDITIONAL STYLES .dark-mode({ @@ -77,11 +77,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; } } @@ -187,7 +189,7 @@ dl, .s-table-container, .s-link-preview { - margin-bottom: @pr-spacing; // TODO: make sure this overrides margin set on dd + margin-bottom: var(--_pr-spacing); // TODO: make sure this overrides margin set on dd } ol, @@ -214,7 +216,7 @@ p, table, ul { - margin-bottom: @pr-spacing-condensed; // Within lists, we shouldn't have so much spacing in between block-level elements. + margin-bottom: var(--_pr-spacing-condensed); // Within lists, we shouldn't have so much spacing in between block-level elements. } li { @@ -224,15 +226,15 @@ ol, ul { - margin-top: @pr-spacing-condensed; + margin-top: var(--_pr-spacing-condensed); } } pre { - margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment + margin-bottom: calc(var(--_pr-spacing-condensed) + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment } - margin-bottom:@pr-spacing; + margin-bottom:var(--_pr-spacing); margin-top: 0; } @@ -266,7 +268,7 @@ } color: var(--black-500); - margin: var(--_pr-blockquote-mt) 1em @pr-spacing var(--_pr-blockquote-ml); + margin: var(--_pr-blockquote-mt) 1em var(--_pr-spacing) var(--_pr-blockquote-ml); padding: 0.8em 0.8em 0.8em 1em; position: relative; } @@ -300,7 +302,7 @@ border: 0; height: var(--su1); - margin-bottom: @pr-spacing; + margin-bottom: var(--_pr-spacing); } img { @@ -329,7 +331,7 @@ } li { - --_pr-blockquote-mt: @pr-spacing-condensed; + --_pr-blockquote-mt: var(--_pr-spacing-condensed); --_pr-img-mb: 0; pre { @@ -342,7 +344,7 @@ p { --_pr-img-mb: 0; - margin-bottom: @pr-spacing; + margin-bottom: var(--_pr-spacing); } pre { @@ -366,7 +368,7 @@ } margin-top: 0; - margin-bottom: calc(@pr-spacing + 0.4em); // Increase this spacing for better optical alignment + margin-bottom: calc(var(--_pr-spacing) + 0.4em); // Increase this spacing for better optical alignment overflow-wrap: normal; } @@ -380,7 +382,7 @@ &:after { opacity: var(--_pr-soiler-after-o); top: var(--_pr-spoiler-after-t); - transition: @pr-spoiler-transition; + transition: var(--_pr-spoiler-transition); background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E"); background-position: center right; @@ -403,7 +405,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 } From 648a52e80f0e7d5a6f891c81c47e6ad01095045f Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 4 Feb 2026 18:43:40 -0500 Subject: [PATCH 02/14] docs improvements --- .../stacks-docs/_data/components/prose.json | 24 +++ .../stacks-docs/product/components/prose.html | 145 ++++++++---------- 2 files changed, 85 insertions(+), 84 deletions(-) create mode 100644 packages/stacks-docs/_data/components/prose.json diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json new file mode 100644 index 0000000000..3ef012c373 --- /dev/null +++ b/packages/stacks-docs/_data/components/prose.json @@ -0,0 +1,24 @@ +{ + "classes": [ + { + "class": ".s-prose", + "applies": "N/A", + "description": "Adds proper styling for rendered Markdown." + }, + { + "class": ".s-prose__xs", + "applies": ".s-prose", + "description": "Our most compact version with the smallest font size and line height." + }, + { + "class": ".s-prose__sm", + "applies": ".s-prose", + "description": "Decreases the base font size and line height." + }, + { + "class": ".s-prose__md", + "applies": ".s-prose", + "description": "Increases the base font size and line height." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index 7ed7bcfdcb..1c634a787f 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -4,33 +4,26 @@ description: The prose component provides proper styling for rendered Markdown. tags: components --- + +{% assign expandBtnContainerClasses = "ps-sticky bg-white z-popover py16 t64 bb bc-black-200 sm:py8" %} +
{% header "h2", "Classes" %}
- + - - - - - - - - - - - - - - - - + {% for item in components.prose.classes %} + + + + + {% endfor %}
ClassClass Output
.s-proseAdds proper styling for rendered Markdown.
.s-prose__xsOur most compact version with the smallest font size and line height.
.s-prose__smDecreases the base font size and line height.
.s-prose__mdIncreases the base font size and line height.
{{ item.class }}{{ item.description }}
@@ -39,82 +32,44 @@ {% header "h2", "Examples" %} {% header "h3", "Minimal" %}

We modified this test document from the folks at Tailwind to demonstrate and explain our design choices.

-
-
- -
-
- {% header "h3", "Answer" %} -

The following is a real-world answer taken from Stack Overflow

-
-
- +
+
+
-
- - {% header "h3", "Link preview" %} -

Let’s see what a link preview looks like within the prose component.

-
-
-
-
-
-
- {% icon "GitHub" %} -
- -
-
-{% highlight js %} -linenums'use strict'; - -module.exports = function(grunt) { - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - version: '<%= pkg.version %>', - - // Shell commands for use in Grunt tasks - shell: { - eleventyBuild: { - command: 'npx @11ty/eleventy', - options: { - stderr: false, - execOptions: { - cwd: 'docs' - } - } +{% highlight html %} +
+ … +
{% endhighlight %} -
-
- https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
(truncated)
-
-
+
+
{% header "h3", "Full Markdown spec" %}

This example includes the full kitchen-sink collection of everything the Markdown spec includes.

-
-{% highlight html %} -
- … -
-{% endhighlight %} -
+
+
+ +
+
@@ -184,3 +139,25 @@
+ \ No newline at end of file From 02094363f8fe22f4d83e7b61fd13dbf44c64f4b4 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 4 Feb 2026 18:52:56 -0500 Subject: [PATCH 03/14] Exclude presentational headings from ToC --- packages/stacks-docs/.eleventy.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/stacks-docs/.eleventy.js b/packages/stacks-docs/.eleventy.js index 16ad2d080b..d803890aaf 100644 --- a/packages/stacks-docs/.eleventy.js +++ b/packages/stacks-docs/.eleventy.js @@ -59,15 +59,19 @@ module.exports = function(eleventyConfig) { eleventyConfig.addLiquidFilter("extractHeadings", function(content) { const $ = cheerio.load(content); const headings = []; - + $('h2, h3').each((i, el) => { + // Exclude headings inside presentational areas (e.g. examples, demos) + if ($(el).closest('[role="presentation"]').length > 0) { + return; + } headings.push({ level: parseInt(el.tagName[1]), text: $(el).text(), id: $(el).attr('id') }); }); - + return headings; }); From 61088af6914f014d5f21d2688bfc9f1c4cd4ec97 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 4 Feb 2026 18:53:17 -0500 Subject: [PATCH 04/14] Remove all but default, sm sizing --- .../lib/components/prose/prose.less | 18 +----- .../stacks-docs/_data/components/prose.json | 10 ---- .../stacks-docs/product/components/prose.html | 59 ++++--------------- 3 files changed, 15 insertions(+), 72 deletions(-) diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index dbc20b1cd1..e0069a53ec 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/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 diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json index 3ef012c373..27e31803cf 100644 --- a/packages/stacks-docs/_data/components/prose.json +++ b/packages/stacks-docs/_data/components/prose.json @@ -5,20 +5,10 @@ "applies": "N/A", "description": "Adds proper styling for rendered Markdown." }, - { - "class": ".s-prose__xs", - "applies": ".s-prose", - "description": "Our most compact version with the smallest font size and line height." - }, { "class": ".s-prose__sm", "applies": ".s-prose", "description": "Decreases the base font size and line height." - }, - { - "class": ".s-prose__md", - "applies": ".s-prose", - "description": "Increases the base font size and line height." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index 1c634a787f..56e50cb520 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -79,60 +79,27 @@
{% header "h2", "Sizing" %} - {% header "h3", "Extra Small" %} -
-{% highlight html %} -
- … -
-{% endhighlight %} -
- -
-
- {% header "h3", "Small" %}

In ancilliary content like comments or side-discussions, it may be appropriate to add the small variation.

-
+
+
+ +
{% highlight html %}
…
{% endhighlight %} -
+
-
-
- - {% header "h3", "Default" %} -
-{% highlight html %} -
- … -
-{% endhighlight %} -
- -
-
- - {% header "h3", "Medium" %} -

Depending on the context for displaying the prose component, it may be appropriate to size text up to maintain readability.

-
-{% highlight html %} -
- … -
-{% endhighlight %} -
-
From aa23339cd44e42bec284cf48bfc43986bd634d02 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 11:45:07 -0500 Subject: [PATCH 05/14] Revert conversion of prose constants from custom props --- .../lib/components/prose/prose.less | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index aeea27197c..c935664c91 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -1,8 +1,8 @@ .s-prose { // CONSTANTS - --_pr-spacing: 1.1em; - --_pr-spacing-condensed: calc(var(--_pr-spacing) / 2); // Reduce the base spacing by half in the context of lists, etc. - --_pr-spoiler-transition: opacity 0.1s ease-in-out; + @pr-spacing: 1.1em; + @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc. + @pr-spoiler-transition: opacity 0.1s ease-in-out; // COMPONENT-SPECIFIC CUSTOM PROPERTIES --_pr-fs: unset; --_pr-lh: 1.5; @@ -17,7 +17,7 @@ --_pr-h5-fs: var(--fs-body2); --_pr-h6-fs: var(--fs-body1); --_pr-hr-bg: var(--black-225); // used for both background-color and color properties - --_pr-img-mb: var(--_pr-spacing); + --_pr-img-mb: @pr-spacing; --_pr-kbd-bc: var(--black-300); --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static); --_pr-spoiler-cursor: pointer; @@ -26,8 +26,8 @@ --_pr-soiler-child-o: 0; --_pr-soiler-child-visibility: hidden; // TEMP HOT FIX FOR .s-editor [1] - --s-prose-spacing: var(--_pr-spacing); // TODO remove once addressed in StackExchange/Stacks-Editor - --s-prose-spacing-condensed: var(--_pr-spacing-condensed); // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing: var(@pr-spacing); // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing-condensed: var(@pr-spacing-condensed); // TODO remove once addressed in StackExchange/Stacks-Editor // CONDITIONAL STYLES .dark-mode({ @@ -197,7 +197,7 @@ dl, .s-table-container, .s-link-preview { - margin-bottom: var(--_pr-spacing); // TODO: make sure this overrides margin set on dd + margin-bottom: @pr-spacing; // TODO: make sure this overrides margin set on dd } ol, @@ -224,7 +224,7 @@ p, table, ul { - margin-bottom: var(--_pr-spacing-condensed); // Within lists, we shouldn't have so much spacing in between block-level elements. + margin-bottom: @pr-spacing-condensed; // Within lists, we shouldn't have so much spacing in between block-level elements. } li { @@ -234,15 +234,15 @@ ol, ul { - margin-top: var(--_pr-spacing-condensed); + margin-top: @pr-spacing-condensed; } } pre { - margin-bottom: calc(var(--_pr-spacing-condensed) + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment + margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment } - margin-bottom:var(--_pr-spacing); + margin-bottom: @pr-spacing; margin-top: 0; } @@ -276,7 +276,7 @@ } color: var(--black-500); - margin: var(--_pr-blockquote-mt) 1em var(--_pr-spacing) var(--_pr-blockquote-ml); + margin: var(--_pr-blockquote-mt) 1em @pr-spacing var(--_pr-blockquote-ml); padding: 0.8em 0.8em 0.8em 1em; position: relative; } @@ -310,7 +310,7 @@ border: 0; height: var(--su1); - margin-bottom: var(--_pr-spacing); + margin-bottom: @pr-spacing; } img { @@ -339,7 +339,7 @@ } li { - --_pr-blockquote-mt: var(--_pr-spacing-condensed); + --_pr-blockquote-mt: @pr-spacing-condensed; --_pr-img-mb: 0; pre { @@ -352,7 +352,7 @@ p { --_pr-img-mb: 0; - margin-bottom: var(--_pr-spacing); + margin-bottom: @pr-spacing; } pre { @@ -376,7 +376,7 @@ } margin-top: 0; - margin-bottom: calc(var(--_pr-spacing) + 0.4em); // Increase this spacing for better optical alignment + margin-bottom: calc(@pr-spacing + 0.4em); // Increase this spacing for better optical alignment overflow-wrap: normal; } @@ -390,7 +390,7 @@ &:after { opacity: var(--_pr-soiler-after-o); top: var(--_pr-spoiler-after-t); - transition: var(--_pr-spoiler-transition); + transition: @pr-spoiler-transition; background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E"); background-position: center right; From 2a6ec5a95fb676df8bbeffd0003c1423f3bfb1b3 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 11:56:14 -0500 Subject: [PATCH 06/14] We don't need `var` around less variables --- packages/stacks-classic/lib/components/prose/prose.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index c935664c91..9b144b0161 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -26,8 +26,8 @@ --_pr-soiler-child-o: 0; --_pr-soiler-child-visibility: hidden; // TEMP HOT FIX FOR .s-editor [1] - --s-prose-spacing: var(@pr-spacing); // TODO remove once addressed in StackExchange/Stacks-Editor - --s-prose-spacing-condensed: var(@pr-spacing-condensed); // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing: @pr-spacing; // TODO remove once addressed in StackExchange/Stacks-Editor + --s-prose-spacing-condensed: @pr-spacing-condensed; // TODO remove once addressed in StackExchange/Stacks-Editor // CONDITIONAL STYLES .dark-mode({ From 31189c6095fa71d6616e36ba6cd2407562032ce6 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 12:00:01 -0500 Subject: [PATCH 07/14] Add back p a underline --- packages/stacks-classic/lib/components/prose/prose.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index 9b144b0161..52391aef0d 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -352,6 +352,10 @@ p { --_pr-img-mb: 0; + a:not([class]) { + text-decoration: underline; + } + margin-bottom: @pr-spacing; } From 71f96003708813fef5075bd3d3907423f9bfec97 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 14:38:16 -0500 Subject: [PATCH 08/14] Add tests --- .../lib/components/prose/prose.a11y.test.ts | 16 +++ .../lib/components/prose/prose.test.setup.ts | 112 ++++++++++++++++++ .../lib/components/prose/prose.visual.test.ts | 23 ++++ .../Chromium/baseline/s-prose-dark-sm.ico | 3 + .../Chromium/baseline/s-prose-dark.ico | 3 + .../baseline/s-prose-highcontrast-dark-sm.ico | 3 + .../baseline/s-prose-highcontrast-dark.ico | 3 + .../s-prose-highcontrast-light-sm.ico | 3 + .../baseline/s-prose-highcontrast-light.ico | 3 + .../Chromium/baseline/s-prose-light-sm.ico | 3 + .../Chromium/baseline/s-prose-light.ico | 3 + .../Firefox/baseline/s-prose-dark-sm.ico | 3 + .../Firefox/baseline/s-prose-dark.ico | 3 + .../baseline/s-prose-highcontrast-dark-sm.ico | 3 + .../baseline/s-prose-highcontrast-dark.ico | 3 + .../s-prose-highcontrast-light-sm.ico | 3 + .../baseline/s-prose-highcontrast-light.ico | 3 + .../Firefox/baseline/s-prose-light-sm.ico | 3 + .../Firefox/baseline/s-prose-light.ico | 3 + .../Webkit/baseline/s-prose-dark-sm.ico | 3 + .../Webkit/baseline/s-prose-dark.ico | 3 + .../baseline/s-prose-highcontrast-dark-sm.ico | 3 + .../baseline/s-prose-highcontrast-dark.ico | 3 + .../s-prose-highcontrast-light-sm.ico | 3 + .../baseline/s-prose-highcontrast-light.ico | 3 + .../Webkit/baseline/s-prose-light-sm.ico | 3 + .../Webkit/baseline/s-prose-light.ico | 3 + .../stacks-docs/_data/components/prose.json | 2 +- 28 files changed, 224 insertions(+), 1 deletion(-) create mode 100644 packages/stacks-classic/lib/components/prose/prose.a11y.test.ts create mode 100644 packages/stacks-classic/lib/components/prose/prose.test.setup.ts create mode 100644 packages/stacks-classic/lib/components/prose/prose.visual.test.ts create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico diff --git a/packages/stacks-classic/lib/components/prose/prose.a11y.test.ts b/packages/stacks-classic/lib/components/prose/prose.a11y.test.ts new file mode 100644 index 0000000000..7cd258d0cd --- /dev/null +++ b/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", + }); +}); diff --git a/packages/stacks-classic/lib/components/prose/prose.test.setup.ts b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts new file mode 100644 index 0000000000..8e2f7bd02c --- /dev/null +++ b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts @@ -0,0 +1,112 @@ +// Sample HTML for the prose component +const sampleHTMLFragment = `Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else.`; +const sampleListItems = ` +
  • ${sampleHTMLFragment}
    • +
  • Item 2
    • +
  • +
      +
    1. ${sampleHTMLFragment}
      2. +
    2. Item 2
      3. +
    3. Item 3
      4. +
    +
    • +
  • Item 4
    • +
  • +
      +
    • ${sampleHTMLFragment}
      • +
    • Item 2
      • +
    • Item 3
      • +
    +
    • +`; + +export default ` +

    Code block

    +
    <article class="s-prose">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>
+    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.
+  </p>
+  <p>
+    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+    springing up around the country.
+  </p>
+  <!-- ... -->
+</article>
    + +

    Headings

    +

    Heading 1: ${sampleHTMLFragment}

    +

    Heading 2: ${sampleHTMLFragment}

    +

    Heading 3: ${sampleHTMLFragment}

    +

    Heading 4: ${sampleHTMLFragment}

    +
    Heading 5: ${sampleHTMLFragment}
    +
    Heading 6: ${sampleHTMLFragment}
    + +

    Paragraphs

    +

    Paragraph 1: ${sampleHTMLFragment}

    +

    Paragraph 2: ${sampleHTMLFragment}

    + +

    Unordered list w/ nested ordered list

    +
      + ${sampleListItems} +
    + +

    Ordered list w/ nested unordered list

    +
      + ${sampleListItems} +
    + +

    Blockquote

    +
    +

    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.

    +

    ${sampleHTMLFragment}

    +
    + +

    Image

    +

    Sample checkerboard image

    + +

    Table

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    WrestlerOriginFinisher
    Bret "The Hitman" HartCalgary, ABSharpshooter
    Stone Cold Steve AustinAustin, TXStone Cold Stunner
    Randy SavageSarasota, FLElbow Drop
    VaderBoulder, COVader Bomb
    Razor RamonChuluota, FLRazor’s Edge
    +
    + +

    Odd text

    +

    ☺🐉 ᵃᵉⁱᵒᵘ ₐₑᵢₒᵤ s̶t̶r̶i̶k̶e̶o̶u̶t̶ Z̸̧̦̥͔̻̞̟͔͒̓̄̓͐͆͋̃̅͆̓͘̚͝͝à̷̛̜͇̺̖̯̭͓̱̱̣̺̲̪̰l̷̢̳̤̮͈͎̩̱̳̱̱̞͆͂̽̀̃͒̿̄̅͊͘͘̚͠͝ͅg̷͙͋o̶̧̩̓̓͌̄͊͐̓̇̏͝ ̶̛͚͖͍̦͕̞͈͆̋̓̈̏̈̓̊̅͆͘͜t̸̬̮̖̖͙͔̮͊̔͊͌́̈́͒̇͒̽̑̎̚̕͠ė̶̖̰̬͙͙̇̈͌͘͜͜x̴͔̎t̶̖́̒̏͒͌̈́̏͊̒̉ͅ ̵̨͍̬͔̼̣̘̖͍͖̘͍͋̑͛̂̾̋ḧ̸̡̘̬̲̣̺́́̿̀̈ͅé̷̦̰̻̤̲̺̠̏͒̉͛̍͌̍ͅr̶̩̯̱̜͆̌̾͌̑̇̊͒̃̀̽̍̚é̴̜̉̇̿̈́͌̕.̸̢̱͔̲̫̇͌̽̌͂͊͊̈́̇

    +`; diff --git a/packages/stacks-classic/lib/components/prose/prose.visual.test.ts b/packages/stacks-classic/lib/components/prose/prose.visual.test.ts new file mode 100644 index 0000000000..71322b3ae9 --- /dev/null +++ b/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` +
    + ${component} +
    +`; +describe("prose", () => { + runVisualTests({ + baseClass: "s-prose", + modifiers: { + primary: ["sm"], + }, + children: { + default: proseTestHTML, + }, + template, + }); +}); diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..2da0dfc637 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:66dab01d54862fa9dc3712e99e15c07d3c32073e993184b71e0587357eff187e +size 231504 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..46362e049b --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0376d08ddf1e667727477c9cac8c5f870ac01aa8487f3d27f58bba935b55173b +size 273039 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..b230fb5ff2 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c3d2f2dadb5f9b3eaca7f6a34eaa25789d6ca27565b4e0113fc36ece8030d7b3 +size 228171 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..844fa21b43 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:48bb44495a1c503a2665522f3901b47ce55bab1848224e0aa4f1ce94a82decd6 +size 269482 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..ab325281ef --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a6716b086c860655f6fa4c15a06749b04eda1fd7afc4566486a46de1c01a6f87 +size 268264 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..398793dbf8 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2380253ff0de254b8195a4ad41751e03d13eba04ec3cff096b4cb24ae1ad18e2 +size 316554 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..0412090246 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:78f1abe7b1aa74c5eae8c65cb4c50fd7f6fa59907ccb211a8be2a463bd90c07a +size 268089 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico new file mode 100644 index 0000000000..1c06664249 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:512c66c819f3de47360bfc194b66e84c5c836c4b8b0ea496a238e09d58fb3692 +size 316221 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..f7d9d9b85a --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b14eb8b8810c7519f3e6dce61b87b34dfdb584ddbc265297f543fc21b20323db +size 315543 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..f97b225422 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:417be4ba436e7175b47d4cfdd13aa53d881cc7a2389930fb6fa919085c0f767e +size 373224 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..62a80561f5 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cbbb9211f40549a5ffd6ba1c660c8f1136dc13fd7b1de2c6c5a9276f033c50d5 +size 313898 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..e5b42c9ece --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:88e031bc3e6be92e0e0c05851f9dbd909321f326c1aabb4408ff8d82e859e00e +size 371544 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..8c38748d20 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ac92f586c4d365cfa9905c72c30d696f39b05a1898de6a6c9adce4a9d87d3ce3 +size 364061 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..c5fbe3d2c8 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:abc85e936673c7a117c6d523a66d62d8f52300e08d903e2980eca75a2e9877ff +size 431388 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..0b5b342176 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04be81ba026d23fc7df4ee66341bace03c850b3369093eb1d0f5293b9631a747 +size 363946 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico new file mode 100644 index 0000000000..e55bd16d70 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9094e92aaf9690b3ceef58b76e1fe29e9c21239585bce9858697e95a7543b9e3 +size 431069 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..6f69bf6e1c --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ee89a62f1272cf12f79646e6e1194faf940bfd41a86b83655909e19b24ebe68b +size 306786 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..e30d541bd2 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5b0cf5f328352dec90f2c5364e5bb3173873a4a999893cc7b82c52e532750c14 +size 365178 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..94617eff6a --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dc053e00d5cdd700982ae0e982a0cc4b4654c283156decabc734b1d5e1635306 +size 305279 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..d7b734a3b4 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cac71705dc75d7c18ef0f87233141c17a633b2e35e8d98dc164a7aa3eb2045bd +size 361934 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..092cfb489d --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b425a15eef6d6a6a3f0b5b59ccfe6c08ceaf400ca676112fd3ef9cb9505a03e0 +size 326608 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..b84cc3229b --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c8140b821b0b03a50b9f00b725ec7853710fa602390b5aad45f18e905bab5da4 +size 387965 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..4857fd7093 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:93c699578fcf44e6917f97f24a4c2f5f85f174fb10bf27d56d12e9caa9ba672f +size 326489 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico new file mode 100644 index 0000000000..61b5bc3016 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:08f02041b6fc3db3d97e27c5f22829e8019f194ff8cb7d55e7a66b8e0c13b6e7 +size 387909 diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json index 27e31803cf..faaaea6041 100644 --- a/packages/stacks-docs/_data/components/prose.json +++ b/packages/stacks-docs/_data/components/prose.json @@ -11,4 +11,4 @@ "description": "Decreases the base font size and line height." } ] -} \ No newline at end of file +} From 8152878fbe906980a60cf6f4d1cdca5a6d492702 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 14:39:32 -0500 Subject: [PATCH 09/14] Update migration guide --- MIGRATION_GUIDE.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 14008c9166..b65d639f33 100755 --- a/MIGRATION_GUIDE.md +++ b/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. `
    `) should be deleted from the codebases as part of the migration. +#### Prose +- `xs` and `md` sizes removed + #### Select - `md` and `xl` sizes removed From 2a649a7fe212ccecc8dbb4c2724a9720f07905e1 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 14:43:35 -0500 Subject: [PATCH 10/14] changeset --- .changeset/quick-ghosts-yell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quick-ghosts-yell.md diff --git a/.changeset/quick-ghosts-yell.md b/.changeset/quick-ghosts-yell.md new file mode 100644 index 0000000000..a80bd86396 --- /dev/null +++ b/.changeset/quick-ghosts-yell.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks": minor +--- + +Update prose component to SHINE styles From fdeb38e8c4140956b72a1d972f73b06c28463b69 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 6 Feb 2026 15:16:52 -0500 Subject: [PATCH 11/14] resolve a11y issues --- .../lib/components/prose/prose.test.setup.ts | 2 +- packages/stacks-classic/lib/exports/color-sets.less | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/stacks-classic/lib/components/prose/prose.test.setup.ts b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts index 8e2f7bd02c..a592870922 100644 --- a/packages/stacks-classic/lib/components/prose/prose.test.setup.ts +++ b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts @@ -22,7 +22,7 @@ const sampleListItems = ` export default `

    Code block

    -
    <article class="s-prose">
+
    <article class="s-prose">
   <h1>Garlic bread with cheese: What the science tells us</h1>
   <p>
     For years parents have espoused the health benefits of eating garlic bread with cheese to their
diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less
index ca699eec3f..0ea8da1c7a 100644
--- a/packages/stacks-classic/lib/exports/color-sets.less
+++ b/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%);

From 286cd53533767bb4b66c6db03d4a083bb3cc484c Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Fri, 6 Feb 2026 15:28:06 -0500
Subject: [PATCH 12/14] Update less snapshots

---
 .../__snapshots__/color-mixins.less.test.ts.snap     |  2 +-
 .../exports/__snapshots__/color.less.test.ts.snap    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap
index 3f735e0992..cae66ce29a 100644
--- a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap
+++ b/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%);
diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap
index 0d8197b5a2..229a822212 100644
--- a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap
+++ b/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%);

From f3d0b367b9cfc28830372636524e87e78647f38a Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Fri, 6 Feb 2026 15:42:23 -0500
Subject: [PATCH 13/14] Minor updates to code block docs

---
 .../_data/components/code-blocks.json         | 19 ++++++++++++++
 .../product/components/code-blocks.html       | 26 +++++++------------
 2 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 packages/stacks-docs/_data/components/code-blocks.json

diff --git a/packages/stacks-docs/_data/components/code-blocks.json b/packages/stacks-docs/_data/components/code-blocks.json
new file mode 100644
index 0000000000..ceda5424a9
--- /dev/null
+++ b/packages/stacks-docs/_data/components/code-blocks.json
@@ -0,0 +1,19 @@
+{
+  "classes": [
+    {
+      "class": ".s-code-block",
+      "applies": "N/A",
+      "description": "Adds proper styling to pre-formatted code."
+    },
+    {
+      "class": ".linenums",
+      "applies": ".s-code-block",
+      "description": "Adds a line numbers column to the code block."
+    },
+    {
+      "class": ".linenums:<n>",
+      "applies": ".s-code-block",
+      "description": "Adds a line numbers column to the code block starting at a number <n>."
+    }
+  ]
+}
diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html
index 7e026ca1eb..56018d9a3b 100644
--- a/packages/stacks-docs/product/components/code-blocks.html
+++ b/packages/stacks-docs/product/components/code-blocks.html
@@ -10,27 +10,19 @@
         
-                    
-                    
+                    
+                    
-                
-                    
-                    
-                    
-                
-                
-                    
-                    
-                    
-                
-                
-                    
-                    
-                    
-                
+                {% for item in code-blocks.classes %}
+                    
+                        
+                        
+                        
+                    
+                {% endfor %}
             
    
             
                 
    ClassApplies toClassApplies to
                     Output
                 
    
                 
             
    .s-code-blockpreAdds proper styling to pre-formatted code.
    .linenums.s-code-blockAdds a line numbers column to the code block.
    .linenums:<n>.s-code-blockAdds a line numbers column to the code block starting at a number <n>.
    {{ item.class }}{{ item.applies }}{{ item.description }}
    From 49bceb1d181fe364b25a230fd2dae417f8f56662 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 9 Feb 2026 12:51:00 -0500 Subject: [PATCH 14/14] =?UTF-8?q?new=20is=20true=20=F0=9F=9F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/stacks-docs/_data/site-navigation.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index bde5a98e19..f26014e237 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -339,7 +339,8 @@ }, { "title": "Prose", - "url": "/product/components/prose/" + "url": "/product/components/prose/", + "new": true }, { "title": "Sidebar widgets",