diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
index 985b7f18cf..19861df871 100644
--- a/CHANGELOG-2.x.md
+++ b/CHANGELOG-2.x.md
@@ -1,5 +1,15 @@
# Docusaurus 2 Changelog
+## 2.0.0-alpha.51
+
+#### :boom: Breaking Change
+
+- `infima`
+ - The following infima variables have been renamed for consistency:
+ - `--ifm-font-base-color` → `--ifm-font-color-base`
+ - `--ifm-font-base-color-inverse` → `--ifm-font-color-base-inverse`
+ - `--ifm-font-color-secondary` → `--ifm-font-color-secondary`
+
## 2.0.0-alpha.50 (2020-04-02)
**HOTFIX for 2.0.0-alpha.49**.
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index b06c637d06..ec5578f9d3 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -12,7 +12,7 @@
"@mdx-js/react": "^1.5.8",
"classnames": "^2.2.6",
"clipboard": "^2.0.6",
- "infima": "0.2.0-alpha.6",
+ "infima": "0.2.0-alpha.9",
"parse-numeric-range": "^0.0.2",
"prism-react-renderer": "^1.1.0",
"prismjs": "^1.20.0",
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 5db5e854c6..7b06aefc6e 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -20,7 +20,15 @@ import useLogo from '@theme/hooks/useLogo';
import styles from './styles.module.css';
-function NavLink({activeBasePath, to, href, label, position, ...props}) {
+function NavLink({
+ activeBasePath,
+ to,
+ href,
+ label,
+ position,
+ activeClassName = 'navbar__link--active',
+ ...props
+}) {
const toUrl = useBaseUrl(to);
const activeBaseUrl = useBaseUrl(activeBasePath);
@@ -34,7 +42,7 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
}
: {
isNavLink: true,
- activeClassName: 'navbar__link--active',
+ activeClassName,
to: toUrl,
...(activeBasePath
? {
@@ -50,8 +58,11 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
}
function NavItem({items, position, className, ...props}) {
- const navLinkClassNames = (extraClassName) =>
- classnames('navbar__item', 'navbar__link', extraClassName);
+ const navLinkClassNames = (extraClassName, isDropdownItem) =>
+ classnames(extraClassName, {
+ 'navbar__item navbar__link': !isDropdownItem,
+ dropdown__link: isDropdownItem,
+ });
if (!items) {
return