Refactor SCSS variables for code styling

core/scss/_variables.scss

@@ -321,10 +321,10 @@ $border-values: (
 $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: var(--#{$prefix}primary) !default;
+$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
+$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
 $code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
-$code-bg: var(--#{$prefix}primary-lt) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;

core/scss/layout/_dark.scss

@@ -61,9 +61,6 @@
 
     --#{$prefix}btn-color: #{$darken-dark};
 
-    --#{$prefix}code-color: var(--#{$prefix}body-color);
-    --#{$prefix}code-bg: #{$border-dark-color-dark};
-
     .navbar-brand-autodark {
       .navbar-brand-image {
         @include autodark-image;

core/scss/ui/_pagination.scss

@@ -2,6 +2,7 @@
   --#{$prefix}pagination-gap: .25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
+  line-height: var(--#{$prefix}body-line-height);
 }
 
 .page-link {
@@ -55,4 +56,4 @@
   .page-item.disabled & {
     color: $pagination-disabled-color;
   }
-}
+}

shared/includes/docs/menu.html

@@ -10,7 +10,7 @@
 		<nav class="nav nav-vertical">
 			{% for level2 in level1.children %}
 			<div>
-				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}</a>
+				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
 
 				{% if level2.children %}
 				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}" id="collapse-{{ level2.url | slug }}">

shared/layouts/docs/default.html

@@ -123,7 +123,7 @@
 											{% if next-prev.prev %}
 											<li class="page-item page-prev">
 												<a class="page-link" href="{{ next-prev.prev.url }}">
-													<div class="row">
+													<div class="row align-items-center">
 														<div class="col-auto">
 															{% include "ui/icon.html" icon="chevron-left" %}
 														</div>
@@ -138,7 +138,7 @@
 											{% if next-prev.next %}
 											<li class="page-item page-next">
 												<a class="page-link" href="{{ next-prev.next.url }}">
-													<div class="row">
+													<div class="row align-items-center">
 														<div class="col">
 															<div class="page-item-subtitle">next</div>
 															<div class="page-item-title">{{ next-prev.next.data.title }}</div>