Prose list style image fix

.changeset/purple-books-sneeze.md

@@ -0,0 +1,6 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+---
+
+Fixed issue with prose un-ordered lists in dark mode

packages/design-tokens/scripts/build-tokens.js

@@ -206,6 +206,7 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
     `tokens/functional/components/grid/colors.json`,
     `tokens/functional/components/logosuite/colors.json`,
     `tokens/functional/components/timeline/colors.json`,
+    `tokens/functional/components/prose/colors.js`,
   ]
 
   for (const path of filesForColorModes) {

packages/design-tokens/src/tokens/functional/components/prose/colors.js

@@ -0,0 +1,12 @@
+module.exports = {
+  brand: {
+    Prose: {
+      listStyleImageUrl: {
+        default: {
+          value: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='black' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
+          dark: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='white' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
+        },
+      },
+    },
+  },
+}

packages/react/src/Prose/Prose.module.css

@@ -140,7 +140,7 @@
 
 .Prose ul {
   list-style-type: image;
-  list-style-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='currentColor' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ");
+  list-style-image: var(--brand-Prose-listStyleImageUrl-default);
 }
 
 .Prose li {

packages/react/src/Prose/Prose.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {ComponentMeta, ComponentStory} from '@storybook/react'
+import {StoryFn, Meta} from '@storybook/react'
 import {Prose} from './Prose'
 import placeholderImage from '../fixtures/images/placeholder-600x400.png'
+import {ThemeProvider} from '../ThemeProvider'
 
 export default {
   title: 'Components/Prose',
@@ -17,7 +18,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Prose>
+} as Meta
 
 const ExampleHtmlMarkup = `
 <h2>Heading level 2</h2>
@@ -63,7 +64,42 @@ const ExampleHtmlMarkup = `
     <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
 `
 
-export const Playground: ComponentStory<typeof Prose> = args => <Prose {...args} html={ExampleHtmlMarkup} />
+const UnorderedListHtmlMarkup = `
+<ul>
+  <li>
+    Vivamus eu risus nec lectus consequat rutrum at vel lacus.
+  </li>
+  <li>
+    Donec at dolor ut metus imperdiet congue vel porta nunc.
+  </li>
+  <li>
+    Quisque eu tortor suscipit, congue quam in, bibendum tellus.
+  </li>
+</ul>
+`
+
+export const Playground: StoryFn = args => <Prose {...args} html={ExampleHtmlMarkup} />
+const UnorderedListStory: StoryFn = args => <Prose {...args} html={UnorderedListHtmlMarkup} />
 
 export const Default = Playground.bind({})
+export const UnorderedList = UnorderedListStory.bind({})
+UnorderedList.args = {
+  darkMode: true,
+}
+UnorderedList.argTypes = {
+  colorMode: {
+    darkMode: 'boolean',
+  },
+}
+UnorderedList.decorators = [
+  (Story, {args: {darkMode}}) => (
+    <>
+      <div style={{backgroundColor: darkMode ? 'black' : 'white'}}>
+        <ThemeProvider colorMode={darkMode ? 'dark' : 'light'}>
+          <Story />
+        </ThemeProvider>
+      </div>
+    </>
+  ),
+]
 Default.args = {}

packages/react/src/Prose/Prose.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import type {BaseProps} from '../component-helpers'
 import styles from './Prose.module.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/base.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'
 
 export type ProseProps = {

packages/react/src/Prose/Prose.visual.spec.ts

@@ -52,4 +52,11 @@ test.describe('Visual Comparison: Prose', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
+
+  test('Prose / Unordered List', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-prose--unordered-list&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
 })