prototype

Author: Joseph Lozano

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,27 @@ 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} />
+export const Playground: StoryFn = args => <Prose {...args} html={ExampleHtmlMarkup} />
 
 export const Default = Playground.bind({})
+export const DarkTheme = Playground.bind({})
+DarkTheme.args = {
+  darkMode: true,
+}
+DarkTheme.argTypes = {
+  colorMode: {
+    darkMode: 'boolean',
+  },
+}
+DarkTheme.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 = {