Bump Vitepress. Styling changes.

mtgjson · Aug 27, 2023 · 3bbe5a1 · 3bbe5a1
1 parent 31117b5
commit 3bbe5a1
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 81 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -2,10 +2,7 @@ import generateSidebar from './generateSidebar';
 import generatePages from './generatePages';
 
 // Sidebar link generation
-const [
-  abstractModels,
-  dataModels
-] = generateSidebar(['/abstract-models/', '/data-models/']);
+const [abstractModels, dataModels] = generateSidebar(['/abstract-models/', '/data-models/']);
 
 // Page metadata generation
 export const pages = generatePages({
@@ -61,11 +58,11 @@ export default {
   ],
   markdown: {
     toc: {
-      level: [ 3 ],
+      level: [3],
       shouldAllowNested: true,
-      format: (str) => str.split('<')[0]
+      format: (str) => str.split('<')[0],
     },
-    theme: 'material-theme-darker'
+    theme: 'material-theme-darker',
   },
   // VitePress themeing
   themeConfig: {
@@ -89,7 +86,7 @@ export default {
       },
       {
         icon: {
-          svg: '<svg alt="Patreon icon" fill="#f96753" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" class="st0"/></svg>'
+          svg: '<svg alt="Patreon icon" fill="#f96753" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" class="st0"/></svg>',
         },
         link: 'https://www.patreon.com/MTGJSON',
       },
@@ -111,7 +108,7 @@ export default {
             text: 'F.A.Q.',
             link: '/faq/',
           },
-        ]
+        ],
       },
       {
         text: 'GraphQL API',
@@ -120,8 +117,8 @@ export default {
           {
             text: 'MTGGraphQL',
             link: '/mtggraphql/',
-          }
-        ]
+          },
+        ],
       },
       {
         text: 'Downloads',

diff --git a/docs/.vitepress/theme/components/DownloadSorter.vue b/docs/.vitepress/theme/components/DownloadSorter.vue
@@ -230,6 +230,7 @@ defineExpose({
 
       input {
         border-radius: var(--common-radius);
+        border-color: var(--input-border-color);
 
         &::placeholder {
           color: var(--vp-c-text-1);

diff --git a/docs/.vitepress/theme/styles/theme.scss b/docs/.vitepress/theme/styles/theme.scss
@@ -146,6 +146,15 @@ code {
     margin-top: 1rem;
   }
 
+  // Fix links
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   // Fix edit link colors
   .edit-link-button {
     color: var(--vp-c-text-2);
@@ -198,14 +207,15 @@ code {
   blockquote {
     border-radius: var(--common-radius);
     border: 1px solid var(--vp-c-divider);
-    background-color: var(--vp-custom-block-info-bg);
+    background-color: var(--vp-sidebar-bg-color);
     margin-bottom: 1.5rem;
     padding: 1rem;
 
     .VPBadge {
-      text-transform: capitalize;
       margin-left: 0.5rem;
-      margin-top: 0.4rem;
+      border-width: 2px !important;
+      font-weight: bold !important;
+      float: right;
     }
 
     h3 {
@@ -232,6 +242,7 @@ code {
     margin-bottom: 1.5rem;
     border-radius: var(--common-radius);
     border-color: var(--vp-c-divider);
+    background-color: var(--vp-sidebar-bg-color);
 
     .custom-block-title {
       color: var(--vp-c-text-1);

diff --git a/docs/.vitepress/theme/styles/vars.scss b/docs/.vitepress/theme/styles/vars.scss
@@ -24,11 +24,14 @@
   --search-results-max-height: 400px;
   --search-height: 34px;
 
-  // Select Component
+  // Selects
   --select-bg-color: var(--white-color);
   --select-border-color: var(--vp-c-divider);
   --select-text-color: var(--dark-color);
 
+  // Inputs
+  --input-border-color: var(--vp-c-divider);
+
   // Data Presentation
   --code-bg-color: var(--gray-4-color);
   --code-text-color: var(--yellow-color);
@@ -47,14 +50,18 @@
 
   // VitePress overrides
   --vp-c-brand: var(--accent-color);
+  --vp-c-brand-1: var(--accent-color);
+  --vp-c-brand-2: var(--accent-color);
   --vp-c-brand-light: var(--accent-color);
   --vp-c-brand-lighter: var(--accent-color);
   --vp-c-brand-dark: var(--accent-color);
   --vp-c-brand-darker: var(--accent-color);
   --vp-c-text-code: var(--yellow-color);
   --vp-input-switch-bg-color: var(--vp-c-bg-alt);
-  --vp-badge-danger-bg: transparent;
-  --vp-badge-warning-bg: transparent;
+  --vp-badge-danger-bg: var(--white-color);
+  --vp-badge-danger-border: var(--vp-badge-danger-text);
+  --vp-badge-warning-bg: var(--white-color);
+  --vp-badge-warning-border: var(--vp-badge-warning-text);
   --vp-badge-info-bg: transparent;
   --vp-badge-tip-bg: transparent;
   --vp-code-font-size: 12px;
@@ -70,12 +77,18 @@ html.dark {
   --vp-custom-block-warning-bg: var(--dark-2-color);
   --vp-backdrop-bg-color: var(--dark-2-alpha-color);
   --vp-badge-warning-border: var(--yellow-color);
+  --vp-badge-warning-bg: var(--dark-color);
   --vp-badge-warning-text: var(--yellow-color);
+  --vp-badge-danger-bg: var(--dark-color);
 
-  // Select Component
+  // Selects
   --select-bg-color: var(--dark-color);
+  --select-border-color: var(--black-color);
   --select-text-color: var(--white-color);
 
+  // Inputs
+  --input-border-color: var(--black-color);
+
   // Version
   --version-color: var(--gray-3-color);
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "ts-jest": "^28.0.7",
     "ts-node": "^10.9.1",
     "uuid": "^8.3.2",
-    "vitepress": "^1.0.0-rc.4",
+    "vitepress": "^1.0.0-rc.7",
     "vue": "^3.2.37",
     "vue-eslint-parser": "^9.0.0"
   }