docs,api-ref: fix kbd styling (medusajs#4995)

* docs: fix kbd styling * additional fixes
SGFGOV · Sep 8, 2023 · 7a12aa0 · 7a12aa0
1 parent 1a1fc6c
commit 7a12aa0
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 15 deletions.
diff --git a/www/api-reference/components/MDXComponents/Kbd/index.tsx b/www/api-reference/components/MDXComponents/Kbd/index.tsx
@@ -6,12 +6,12 @@ const Kbd = ({ children, className, ...props }: KbdProps) => {
   return (
     <kbd
       className={clsx(
-        "h-[22px] w-[22px] rounded-sm p-0",
+        "rounded-sm border-solid py-0 px-[6px]",
         "inline-flex items-center justify-center",
         "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
         "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
         "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
-        "text-compact-x-small-plus",
+        "text-compact-x-small-plus font-monospace shadow-none",
         className
       )}
       {...props}

diff --git a/www/docs/content/create-medusa-app.mdx b/www/docs/content/create-medusa-app.mdx
@@ -133,7 +133,7 @@ You'll then be prompted to enter an admin email for your admin user. You'll be u
 
 If you didn't pass the `--with-nextjs-starter` option, you'll be asked if you want to install the [Next.js starter storefront](./starters/nextjs-medusa-starter.mdx) along with the Medusa backend. This will install the storefront under the `<PROJECT_NAME>-storefront` directory, where `<PROJECT_NAME>` is the name of the project you specified in step 2.
 
-If you want to install the storefront, type `y` and press `enter`. If not, you can use the default value `N` and just press `enter`.
+If you want to install the storefront, type `y` and press <kbd>enter</kbd>. If not, you can use the default value `N` and just press <kbd>enter</kbd>.
 
 :::note
 

diff --git a/www/docs/src/css/_docusaurus.css b/www/docs/src/css/_docusaurus.css
@@ -181,11 +181,6 @@ details summary {
   @apply hidden;
 }
 
-.markdown kbd {
-  @apply !font-monospace !bg-medusa-bg-component dark:!bg-medusa-bg-component-dark !text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark;
-  @apply !rounded-md !border-medusa-border-strong dark:!border-medusa-border-strong-dark !shadow-none;
-}
-
 .theme-doc-footer {
   @apply !mt-0 border-0 !border-t border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
   @apply pt-2;

diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css
@@ -75,7 +75,7 @@
   /* Inline Code */
   --ifm-code-border-radius: theme(borderRadius.DEFAULT);
   --ifm-code-padding-horizontal: theme(padding[0.5]);
-  --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
 
   /* Code Blocks */
   --ifm-pre-background: theme(colors.medusa.code.bg.base.DEFAULT);
@@ -154,7 +154,7 @@ html[data-theme="dark"] {
   --ifm-navbar-link-color: theme(colors.medusa.fg.subtle.dark);
 
   /* Inline Code */
-  --ifm-code-background: theme(colors.medusa.bg.base.dark) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
 
   /* Code Blocks */
   --ifm-pre-background: theme(colors.medusa.code.bg.base.dark);
@@ -200,9 +200,9 @@ html[data-theme="dark"] {
 }
 
 .alert {
-  --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
 }
 
 html[data-theme="dark"] .alert {
-  --ifm-code-background: theme(colors.medusa.bg.subtle.dark) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
 }
diff --git a/www/docs/src/theme/MDXComponents/Kbd.tsx b/www/docs/src/theme/MDXComponents/Kbd.tsx
@@ -9,12 +9,12 @@ const Kbd: React.FC<KbdProps> = ({ children, className, ...props }) => {
   return (
     <kbd
       className={clsx(
-        "h-[22px] w-[22px] rounded-sm p-0 border-solid",
+        "rounded-sm py-0 px-[6px] border-solid",
         "inline-flex items-center justify-center",
-        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
+        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border border-solid",
         "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
         "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
-        "text-compact-x-small-plus shadow-none",
+        "text-compact-x-small-plus shadow-none !font-monospace",
         className
       )}
       {...props}