From c921141ccbd11db25af99ee491950e262cf77e54 Mon Sep 17 00:00:00 2001
From: Akhilender Bongirwar
 <112749383+akhilender-bongirwar@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:16:02 +0530
Subject: [PATCH] Style: Added inline code styling  (#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 <akhilenderb9@gmail.com>

* 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 <akhilenderb9@gmail.com>

* 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 <akhilenderb9@gmail.com>

* 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 <akhilenderb9@gmail.com>

* fix: rebase fix

---------

Signed-off-by: Akhilender <akhilenderb9@gmail.com>
Co-authored-by: Claudio Wunder <cwunder@hubspot.com>
---
 .storybook/constants.ts                | 11 ++++++++++-
 .storybook/preview.tsx                 | 11 +++++++++--
 components/__design__/text.stories.tsx |  8 ++++++++
 styles/new/base.css                    | 12 ++++++++++++
 tailwind.config.ts                     |  1 +
 5 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/.storybook/constants.ts b/.storybook/constants.ts
index ac927d54ce123..71dc10f42560a 100644
--- a/.storybook/constants.ts
+++ b/.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',
+});
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 204a1046eb0cc..8d889a5c87fd4 100644
--- a/.storybook/preview.tsx
+++ b/.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>
diff --git a/components/__design__/text.stories.tsx b/components/__design__/text.stories.tsx
index 8c5765eb917a0..7d531dc45ba7d 100644
--- a/components/__design__/text.stories.tsx
+++ b/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;
diff --git a/styles/new/base.css b/styles/new/base.css
index 09a724cc36378..ab647aba0f71f 100644
--- a/styles/new/base.css
+++ b/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;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cd9de43d93864..0807fd5231d11 100644
--- a/tailwind.config.ts
+++ b/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: {