Create `inline code block` styling

[bmuenzenmeyer]

Create a inline code <code/> styling using the new figma design (pagelink).

This isn't a new React component, just a globally styled HTML element we want to illustrate. The primary use case for this styling is `code` tags within rendered markdown/MDX files.

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide

• Add these code block styles to the existing storybook story file components/__design__/text.stories.tsxwhich will excercise each of the component's states.
• Use the new tailwind color and typography system to assign properties. For example, Light background uses Neutral/100 per the figma.

There are 2 states to capture within styles and stories:

• Light
• Dark

Open Questions

Could we make this an InlineCodeblock component and then add it to an MDX provider? That might isolate markdown-driven use cases more, but at the cost of increased complexity. For now, let's show what an <code/> tag renders like. Perhaps what it looks like within <p> tag only?

[akhilender-bongirwar]

@bmuenzenmeyer, I would like to try working on this issue. Please assign me : ).

[bmuenzenmeyer]

go ahead, thanks!

[ovflowd]

I think you forgot to mention the file were those styles should be done? Which I think probably is styles/new/base.css...