Style: Added inline code styling (nodejs#5952)

* Style: Added inline code styling

In this commit, I've implemented inline code block styling according to the Figma design.

Changes Made:
- Created `styles/new/base.css` and added styling for code blocks in light mode.
- Created `styles/new/layout/dark-theme.css` and added styling for code blocks in dark mode.
- Created `variables.css` to declare variables.

For these changes, I followed the existing file structure in the `styles/old` folder.

Signed-off-by: Akhilender <[email protected]>

* Style: Altered the manual css to tailwind css

- Added Tailwind css classes and removed the manual css for both light
  mode as well as dark mode
- Added the font family into tailwind.config.js
- Updated the storybook with the new font-family in constants.ts as
  well as preview.tsx
- Deleted the variables.css as the variables are being imported directly
  from the tailwind config.js
- Followed the collaborator guidelines

Signed-off-by: Akhilender <[email protected]>

* style: Implemented inline code block design

- Added tailwind css for dark mode using correct syntax
- Added background color as well as border radius property
- Added the code block in the storybook in text.stories.tsx as mentioned
  in the issue description

Signed-off-by: Akhilender <[email protected]>

* style: Resolved Reviews Requested

- Resolved all the changes requested
- Changed name from Code to InlineCode
- Corrected the indentation for the dark
- Added the subsets: latin

Signed-off-by: Akhilender <[email protected]>

* fix: rebase fix

---------

Signed-off-by: Akhilender <[email protected]>
Co-authored-by: Claudio Wunder <[email protected]>

.storybook/constants.ts

@@ -1,4 +1,4 @@
-import { Open_Sans } from 'next/font/google';
+import { Open_Sans, IBM_Plex_Mono } from 'next/font/google';
 
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
@@ -38,3 +38,12 @@ export const OPEN_SANS_FONT = Open_Sans({
   subsets: ['latin'],
   variable: '--font-open-sans',
 });
+
+// This configures the Next.js Font for IBM Plex Mono
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const IBM_PLEX_MONO_FONT = IBM_Plex_Mono({
+  weight: ['600'],
+  subsets: ['latin'],
+  variable: '--font-ibm-plex-mono',
+});

.storybook/preview.tsx

@@ -2,7 +2,12 @@ import NextImage from 'next/image';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { SiteProvider } from '../providers/siteProvider';
 import { LocaleProvider } from '../providers/localeProvider';
-import { OPEN_SANS_FONT, STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
+import {
+  OPEN_SANS_FONT,
+  IBM_PLEX_MONO_FONT,
+  STORYBOOK_MODES,
+  STORYBOOK_SIZES,
+} from './constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
 import '../styles/new/index.css';
@@ -20,7 +25,9 @@ const preview: Preview = {
     Story => (
       <SiteProvider>
         <LocaleProvider>
-          <div className={`${OPEN_SANS_FONT.variable}`}>
+          <div
+            className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
+          >
             <Story />
           </div>
         </LocaleProvider>

components/__design__/text.stories.tsx

@@ -21,4 +21,12 @@ export const Anchor: StoryObj = {
   ),
 };
 
+export const InlineCode: StoryObj = {
+  render: () => (
+    <div>
+      This is an example of <code>inline code block</code>
+    </div>
+  ),
+};
+
 export default { title: 'Design System' } as MetaObj;

styles/new/base.css

@@ -4,3 +4,15 @@ a:visited {
   @apply text-green-600
    dark:text-green-400;
 }
+
+code {
+  @apply rounded-[4px]
+    bg-neutral-100
+    px-[4px]
+    font-ibm-plex-mono
+    text-base
+    font-semibold
+    text-neutral-900
+    dark:bg-neutral-900
+    dark:text-white;
+}

tailwind.config.ts

@@ -111,6 +111,7 @@ export default {
     },
     fontFamily: {
       'open-sans': ['var(--font-open-sans)'],
+      'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
       boxShadow: {