diff --git a/packages/design-system/src/components/List/List.stories.tsx b/packages/design-system/src/components/List/List.stories.tsx
index 0666e2b224..3ebd90b248 100644
--- a/packages/design-system/src/components/List/List.stories.tsx
+++ b/packages/design-system/src/components/List/List.stories.tsx
@@ -15,30 +15,34 @@ export default meta;
type Story = StoryObj;
-const listMarkup = (type: string) => {
- const label = type.charAt(0).toUpperCase() + type.slice(1);
- let className = 'ds-c-list';
- let Tag = 'ul' as any;
-
- if (type === 'unstyled') className = 'ds-c-list ds-c-list--bare';
- if (type === 'ordered') Tag = 'ol' as any;
-
- return (
- <>
-
- {label} list item 1
- {label} list item 2
-
- >
- );
-};
+const ListItems = ({ label }) => (
+ <>
+
{label} list item 1
+ {label} list item 2
+ >
+);
+const UnorderedList = () => (
+
+);
+const OrderedList = () => (
+
+
+
+);
+const BareList = () => (
+
+);
export const AllLists: Story = {
render: () => (
<>
- {listMarkup('unordered')}
- {listMarkup('ordered')}
- {listMarkup('unstyled')}
+
+
+
>
),
};
@@ -50,13 +54,3 @@ export const AllListsOnDark: Story = {
layout: 'fullscreen',
},
};
-
-export const unorderedList: Story = {
- render: () => <>{listMarkup('unordered')}>,
-};
-export const orderedList: Story = {
- render: () => <>{listMarkup('ordered')}>,
-};
-export const unstyledList: Story = {
- render: () => <>{listMarkup('unstyled')}>,
-};
diff --git a/packages/design-system/src/styles/_mixins.scss b/packages/design-system/src/styles/_mixins.scss
index ab6771c0a1..b0072ba00c 100644
--- a/packages/design-system/src/styles/_mixins.scss
+++ b/packages/design-system/src/styles/_mixins.scss
@@ -31,7 +31,15 @@
* Lists
*/
-@mixin ds-unstyled-list {
+// Base properties for styling lists with flexbox, including a standard gap
+// between items
+@mixin flex-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+}
+
+@mixin unstyled-list {
list-style: none;
margin: 0;
padding: 0;
diff --git a/packages/design-system/src/styles/_reset.scss b/packages/design-system/src/styles/_reset.scss
index f4ad1a4321..908ecba9c8 100644
--- a/packages/design-system/src/styles/_reset.scss
+++ b/packages/design-system/src/styles/_reset.scss
@@ -130,14 +130,12 @@ hr {
// that create the exception to the default styling because there are other
// legitimate roles that could be applied like `role="listbox"`.
-ol:not([role]),
-ul:not([role]) {
+ol:not(:where([role])),
+ul:not(:where([role])) {
// Relying on `flex` to set `gap` spacing size on li elements
// `gap` ensures even spacing and doesn't interfere with layout
// if list given a `row` direction
- display: flex;
- flex-direction: column;
- gap: 0.5em;
+ @include mixins.flex-list;
margin-block: 1em 0;
padding-inline-start: 2em;
}
@@ -145,12 +143,12 @@ ul:not([role]) {
// Tie the application of unstyled-list styles to inclusion of a role attribute
// that will "fix" Safari behavior outlined in the guidance. See above comment.
[role='list']:where(ul, ol) {
- @include mixins.ds-unstyled-list;
+ @include mixins.unstyled-list;
}
li {
- > ul:not([role]),
- > ol:not([role]) {
+ > ul:not(:where([role])),
+ > ol:not(:where([role])) {
margin-block: 0.5em 0;
}
}
diff --git a/packages/design-system/src/styles/components/_Dropdown.scss b/packages/design-system/src/styles/components/_Dropdown.scss
index 13f4645ce2..a72e26d00f 100644
--- a/packages/design-system/src/styles/components/_Dropdown.scss
+++ b/packages/design-system/src/styles/components/_Dropdown.scss
@@ -71,7 +71,7 @@
}
.ds-c-dropdown__menu {
- @include mixins.ds-unstyled-list;
+ @include mixins.unstyled-list;
// Allows for keyboard navigation of dropdown options, i.e., scrolling through options via arrow keys
max-height: calc(var(--max-height) - var(--text-input__border-width));
overflow-y: auto;
@@ -89,7 +89,7 @@
}
.ds-c-dropdown__menu-item-group ul[role='presentation'] {
- @include mixins.ds-unstyled-list;
+ @include mixins.unstyled-list;
}
.ds-c-dropdown__menu-item-group .ds-c-dropdown__menu-item {
diff --git a/packages/design-system/src/styles/components/_List.scss b/packages/design-system/src/styles/components/_List.scss
index b3bb12eea5..a3c79fa511 100644
--- a/packages/design-system/src/styles/components/_List.scss
+++ b/packages/design-system/src/styles/components/_List.scss
@@ -7,5 +7,11 @@
}
.ds-c-list--bare {
- @include mixins.ds-unstyled-list;
+ // Bare lists should have `role="list"` applied to them, which makes them
+ // exempt from the regular list-normalization styles. Duplicate them here,
+ // because "Bare" lists should have the same spacing as our other lists but
+ // not have bullets or numbers; they're something different than completely
+ // unstyled lists.
+ @include mixins.flex-list;
+ @include mixins.unstyled-list;
}
diff --git a/packages/docs/content/foundation/typography/list.mdx b/packages/docs/content/foundation/typography/list.mdx
index da4c4bcd8f..2420465c3d 100644
--- a/packages/docs/content/foundation/typography/list.mdx
+++ b/packages/docs/content/foundation/typography/list.mdx
@@ -29,10 +29,10 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
-
- - List item 1
- - List item 2
-
+
+ - Unordered list item 1
+ - Unordered list item 2
+
@@ -40,20 +40,36 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
`.ds-c-list`
-
- - List item 1
- - List item 2
-
+
+
+ - Ordered list item 1
+ - Ordered list item 2
+
+
-### Unstyled list
+### Bare list
`.ds-c-list .ds-c-list--bare`
-
- - List item 1
- - List item 2
-
+
+
+ - Bare list item 1
+ - Bare list item 2
+
+
+
+
+### Unstyled list
+`role="list"`
+
+
+
+
+ - Unstyled list item 1
+ - Unstyled list item 2
+
+
## Guidance
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--Mobile-Chrome.png
index 4791217f91..99fae0b7b6 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium.png
index 61ec3f2ed2..3968cbf7f9 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--firefox.png
index 62f7792613..683ecb9f68 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--webkit.png
index f300db6051..077783486a 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-core--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-core--Mobile-Chrome.png
index 4791217f91..99fae0b7b6 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-core--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium.png
index 61ec3f2ed2..3968cbf7f9 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-core--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-core--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-core--firefox.png
index 62f7792613..683ecb9f68 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-core--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-core--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-core--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-core--webkit.png
index f300db6051..077783486a 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-core--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-core--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--Mobile-Chrome.png
index 4791217f91..99fae0b7b6 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium.png
index 61ec3f2ed2..3968cbf7f9 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--firefox.png
index 62f7792613..683ecb9f68 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--webkit.png
index f300db6051..077783486a 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--Mobile-Chrome.png
index 6b7293ee3d..3581c2c486 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium-forced-colors.png
index 69200e12e6..7a93852e3d 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium.png
index e2d497e541..79b1c3a8ac 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--firefox.png
index 105ffc93d2..54e66f178f 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--webkit.png
index 92d1316e59..56e3b2d0a5 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--Mobile-Chrome.png
index 27ab912f54..2df42e81ca 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium.png
index c9205ec060..a123daa83c 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--firefox.png
index c1da9118f1..16591ddff6 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--webkit.png
index f7d1ee8045..0e5df2ac75 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--Mobile-Chrome.png
index de50d7f6d3..42591b7d56 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium.png
index c87004719b..184ce8feea 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--firefox.png
index de62d6f3ee..76e7bd8ecc 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--webkit.png
index 999152cc39..ecca1d791d 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-core--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--Mobile-Chrome.png
index de50d7f6d3..42591b7d56 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium-forced-colors.png
index bb28475e3e..f7781d7a8e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium.png
index c87004719b..184ce8feea 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--firefox.png
index de62d6f3ee..76e7bd8ecc 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--webkit.png
index 999152cc39..ecca1d791d 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--Mobile-Chrome.png
index 6fc26673b5..b6a800988a 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--Mobile-Chrome.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium-forced-colors.png
index 69200e12e6..7a93852e3d 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium-forced-colors.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium.png
index c3e9a81252..572602201a 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--firefox.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--firefox.png
index ccf05d0ef7..b3b0df3e1e 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--firefox.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--webkit.png b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--webkit.png
index 781e79bcd0..4e8f8122e0 100644
Binary files a/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--webkit.png and b/tests/browser/snapshots/foundations-typography-list--all-lists-on-dark-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--Mobile-Chrome.png
deleted file mode 100644
index 05e7dc1e06..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium-forced-colors.png
deleted file mode 100644
index e580453a1b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium.png
deleted file mode 100644
index 15b85f47bb..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--firefox.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--firefox.png
deleted file mode 100644
index ba935a482b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--webkit.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--webkit.png
deleted file mode 100644
index 5684276b8b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-cmsgov--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-core--Mobile-Chrome.png
deleted file mode 100644
index 05e7dc1e06..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium-forced-colors.png
deleted file mode 100644
index e580453a1b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium.png
deleted file mode 100644
index 15b85f47bb..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--firefox.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-core--firefox.png
deleted file mode 100644
index ba935a482b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--webkit.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-core--webkit.png
deleted file mode 100644
index 5684276b8b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-core--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--Mobile-Chrome.png
deleted file mode 100644
index 05e7dc1e06..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium-forced-colors.png
deleted file mode 100644
index e580453a1b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium.png
deleted file mode 100644
index 15b85f47bb..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--firefox.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--firefox.png
deleted file mode 100644
index ba935a482b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--webkit.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--webkit.png
deleted file mode 100644
index 5684276b8b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-healthcare--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--Mobile-Chrome.png
deleted file mode 100644
index d03b431457..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium-forced-colors.png
deleted file mode 100644
index a60eed9f12..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium.png
deleted file mode 100644
index b391b089e5..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--firefox.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--firefox.png
deleted file mode 100644
index 8ec7be9385..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--webkit.png b/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--webkit.png
deleted file mode 100644
index fe7c5c5433..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--ordered-list-medicare--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--Mobile-Chrome.png
deleted file mode 100644
index d2e05a04e3..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium-forced-colors.png
deleted file mode 100644
index dbc474653c..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium.png
deleted file mode 100644
index 17d70843a2..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--firefox.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--firefox.png
deleted file mode 100644
index 300c1cea21..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--webkit.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--webkit.png
deleted file mode 100644
index c9e0a1cb68..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-cmsgov--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-core--Mobile-Chrome.png
deleted file mode 100644
index d2e05a04e3..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium-forced-colors.png
deleted file mode 100644
index dbc474653c..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium.png
deleted file mode 100644
index 17d70843a2..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--firefox.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-core--firefox.png
deleted file mode 100644
index 300c1cea21..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--webkit.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-core--webkit.png
deleted file mode 100644
index c9e0a1cb68..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-core--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--Mobile-Chrome.png
deleted file mode 100644
index d2e05a04e3..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium-forced-colors.png
deleted file mode 100644
index dbc474653c..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium.png
deleted file mode 100644
index 17d70843a2..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--firefox.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--firefox.png
deleted file mode 100644
index 300c1cea21..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--webkit.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--webkit.png
deleted file mode 100644
index c9e0a1cb68..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-healthcare--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--Mobile-Chrome.png
deleted file mode 100644
index 66e21f248e..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium-forced-colors.png
deleted file mode 100644
index 8a11254844..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium.png
deleted file mode 100644
index c3bd845e85..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--firefox.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--firefox.png
deleted file mode 100644
index 5ad1fa2d66..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--webkit.png b/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--webkit.png
deleted file mode 100644
index 5979802e5b..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unordered-list-medicare--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--Mobile-Chrome.png
deleted file mode 100644
index 09ccf78494..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium-forced-colors.png
deleted file mode 100644
index 160c9e6fcd..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium.png
deleted file mode 100644
index 586ea51fc7..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--firefox.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--firefox.png
deleted file mode 100644
index 1031419754..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--webkit.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--webkit.png
deleted file mode 100644
index e24b211d91..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-cmsgov--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--Mobile-Chrome.png
deleted file mode 100644
index 09ccf78494..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium-forced-colors.png
deleted file mode 100644
index 160c9e6fcd..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium.png
deleted file mode 100644
index 586ea51fc7..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--firefox.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--firefox.png
deleted file mode 100644
index 1031419754..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--webkit.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--webkit.png
deleted file mode 100644
index e24b211d91..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-core--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--Mobile-Chrome.png
deleted file mode 100644
index 09ccf78494..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium-forced-colors.png
deleted file mode 100644
index 160c9e6fcd..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium.png
deleted file mode 100644
index 586ea51fc7..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--firefox.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--firefox.png
deleted file mode 100644
index 1031419754..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--webkit.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--webkit.png
deleted file mode 100644
index e24b211d91..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-healthcare--webkit.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--Mobile-Chrome.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--Mobile-Chrome.png
deleted file mode 100644
index b579f18ac6..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--Mobile-Chrome.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium-forced-colors.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium-forced-colors.png
deleted file mode 100644
index d4d90fc299..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium-forced-colors.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium.png
deleted file mode 100644
index 30c9c601b7..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--chromium.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--firefox.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--firefox.png
deleted file mode 100644
index 2be156c77c..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--firefox.png and /dev/null differ
diff --git a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--webkit.png b/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--webkit.png
deleted file mode 100644
index 1a3622b617..0000000000
Binary files a/tests/browser/snapshots/foundations-typography-list--unstyled-list-medicare--webkit.png and /dev/null differ