medusa-store/www/apps/docs/src/css/_variables.css

/* You can override the default Infima variables here. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
  /* Base Styles */
  --ifm-hr-margin-vertical: theme(margin.2);
  --ifm-leading: theme(lineHeight.DEFAULT);
  --ifm-list-left-padding: theme(spacing.1);
  --font-inter: "Inter";
  --font-roboto-mono: "Roboto Mono";
  
  /* Colors */
  --ifm-color-primary: theme(colors.medusa.fg.base);
  --ifm-background-color: theme(colors.medusa.bg.base.DEFAULT);
  --ifm-background-surface-color: theme(colors.medusa.bg.subtle.DEFAULT);
  --ifm-color-content: theme(colors.medusa.fg.subtle) !important;
  --ifm-color-content-secondary: var(--ifm-color-content);
  --ifm-base-border-color: theme(colors.medusa.border.base);
  --ifm-strong-border-color: theme(colors.medusa.border.strong);
  --ifm-hr-background-color: theme(colors.medusa.border.base);

  /* Fonts */
  --ifm-code-font-size: theme(fontSize.code-label);
  --ifm-font-family-base: theme(fontFamily.base);
  --ifm-font-family-monospace: theme(fontFamily.monospace);
  --ifm-font-size-base: theme(fontSize.medium[0]);
  --ifm-line-height-base: theme(fontSize.medium[1].lineHeight);
  --ifm-font-weight-base: theme(fontSize.medium[1].fontWeight);

  /* Headings */
  /** Due to how docusaurus styles headings, the styles are applied on h1, h2, and h3 again in _docusaurus **/
  --ifm-color-headers: var(--ifm-color-primary);
  --ifm-h1-font-size: theme(fontSize.h1[0]);
  --ifm-h1-line-height: theme(fontSize.h1[1].lineHeight);
  --ifm-h1-weight: theme(fontSize.h1[1].fontWeight);
  --ifm-h2-font-size: theme(fontSize.h2[0]);
  --ifm-h2-line-height: theme(fontSize.h2[1].lineHeight);
  --ifm-h2-weight: theme(fontSize.h2[1].fontWeight);
  --ifm-h3-font-size: theme(fontSize.h3[0]);
  --ifm-h3-line-height: theme(fontSize.h3[1].lineHeight);
  --ifm-h3-weight: theme(fontSize.h3[1].fontWeight);
  --ifm-h4-font-size: var(--ifm-font-size-base);

  /* Links */
  --ifm-link-color: theme(colors.medusa.fg.interactive.DEFAULT);
  --ifm-link-hover-color: theme(colors.medusa.fg.interactive.hover);
  --ifm-link-decoration: none;
  --ifm-link-hover-decoration: none;

  /* Sidebar */
  --ifm-menu-link-padding-vertical: 6px;
  --ifm-menu-link-padding-horizontal: theme(margin.1);
  --ifm-menu-color: theme(colors.medusa.fg.subtle);
  --ifm-menu-color-active: theme(colors.medusa.fg.base);
  --ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover);
  --ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed);

  /* Toc */
  --ifm-toc-border-color: theme(colors.medusa.border.base);
  --ifm-toc-link-color: theme(colors.medusa.fg.subtle);
  --ifm-toc-padding-horizontal: theme(padding.1);

  /* Navbar */
  --ifm-navbar-background-color: var(--ifm-background-color);
  --ifm-navbar-shadow: none;
  --ifm-navbar-padding-vertical: 12px;
  --ifm-navbar-padding-horizontal: theme(padding[1.5]);
  --ifm-navbar-item-padding-vertical: 6px;
  --ifm-navbar-item-padding-horizontal: theme(padding[1]);
  --ifm-navbar-height: theme(height.navbar);
  --ifm-navbar-link-hover-color: theme(colors.medusa.fg.base);
  --ifm-navbar-link-color: theme(colors.medusa.fg.subtle);

  /* Inline Code */
  --ifm-code-border-radius: theme(borderRadius.DEFAULT);
  --ifm-code-padding-horizontal: theme(padding[0.5]);
  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;

  /* Code Blocks */
  --ifm-pre-background: theme(colors.medusa.code.bg.base.DEFAULT);
  --ifm-pre-padding: theme(padding.1);

  /* Tabs */
  --ifm-tabs-color-active: var(--ifm-color-primary);

  /* Tooltip */
  --rt-opacity: theme(opacity.100) !important;
  --rt-color-dark: theme(colors.medusa.bg.base.DEFAULT) !important;
  --rt-color-white: var(--ifm-color-content) !important;

  /* Footer */
  --ifm-footer-color: theme(colors.medusa.fg.muted);
  --ifm-footer-background-color: transparent;
  --ifm-footer-padding-horizontal: 0;
  --ifm-footer-link-color: var(--ifm-color-content);

  /* Announcement Bar */
  --docusaurus-announcement-bar-height: auto !important;

  /* Tables */
  --ifm-table-border-color: theme(colors.medusa.border.base);
  --ifm-table-head-background: var(--ifm-background-surface-color);
  --ifm-table-head-color: var(--ifm-color-primary);
  --ifm-table-head-font-weight: theme(fontSize.medium-plus[1].fontWeight);
  --ifm-table-stripe-background: var(--ifm-background-surface-color) !important;
}

html[data-theme="dark"] {
  /* Colors */
  --ifm-background-color: theme(colors.medusa.bg.subtle.DEFAULT);
  --ifm-background-surface-color: theme(colors.medusa.bg.base.DEFAULT);

  /* Sidebar */
  --ifm-menu-color-background-hover: theme(colors.medusa.bg.subtle.hover);
  --ifm-menu-color-background-active: theme(colors.medusa.bg.subtle.pressed);

  /* Navbar */
  --ifm-navbar-shadow: none;
}

@media screen and (min-width: 1441px) {
  :root {
    /** Table of Content **/
    --ifm-toc-width: calc(2 / 12 * 100%);
  }
}

@media screen and (max-width: 1440px) {
  :root {
    /** Table of Content **/
    --ifm-toc-width: calc(3 / 12 * 100%);
  }
}

@media (min-width: 997px) {
  :root {
    --docusaurus-announcement-bar-height: 30px;
  }
}

.alert {
  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
}