From 529865094ea02ea67e77e07f1f0e8161e287f809 Mon Sep 17 00:00:00 2001
From: Marek Kaput <marek.kaput@swmansion.com>
Date: Mon, 28 Aug 2023 11:04:03 +0200
Subject: [PATCH] Fix styles according to Vitepress changes

---
 website/.vitepress/components/Footer.vue       |  4 ++--
 website/.vitepress/components/Snippet.vue      |  8 ++++++--
 .../.vitepress/components/home/Download.vue    |  8 ++------
 .../.vitepress/components/home/Features.vue    |  5 ++---
 .../.vitepress/components/home/Terminal.vue    |  6 +++---
 website/.vitepress/theme/style.css             | 18 ++++++++----------
 6 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/website/.vitepress/components/Footer.vue b/website/.vitepress/components/Footer.vue
index e2149f82e..8bd9a11cf 100644
--- a/website/.vitepress/components/Footer.vue
+++ b/website/.vitepress/components/Footer.vue
@@ -68,10 +68,10 @@ footer {
 }
 
 .copy {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .logo-path {
-  fill: var(--vp-c-brand);
+  fill: var(--vp-c-brand-1);
 }
 </style>
diff --git a/website/.vitepress/components/Snippet.vue b/website/.vitepress/components/Snippet.vue
index 4e70efac5..789607ead 100644
--- a/website/.vitepress/components/Snippet.vue
+++ b/website/.vitepress/components/Snippet.vue
@@ -12,8 +12,12 @@ defineProps({
     <!-- NOTE: Whitespace is important here. -->
     <pre
       class="shiki"
-    ><code v-for="line in $props.src.split('\n')"><span class="line">{{ line }}</span></code></pre>
+    ><code v-for="line in $props.src.split('\n')"><span :class="`line ${$style.text}`">{{ line }}</span></code></pre>
   </div>
 </template>
 
-<style module></style>
+<style module>
+.text {
+  color: var(--vp-c-text-1);
+}
+</style>
diff --git a/website/.vitepress/components/home/Download.vue b/website/.vitepress/components/home/Download.vue
index f857c0ddd..100ff46fa 100644
--- a/website/.vitepress/components/home/Download.vue
+++ b/website/.vitepress/components/home/Download.vue
@@ -35,7 +35,7 @@ asdf global scarb latest
       <div class="split">
         <div class="left">
           <h3>Install via quick installation script</h3>
-          <Snippet :src="QUICK" class="snippet" lang="shell" />
+          <Snippet :src="QUICK" lang="shell" />
         </div>
         <div class="right">
           <h3>
@@ -45,7 +45,7 @@ asdf global scarb latest
             >
             version manager
           </h3>
-          <Snippet :src="ASDF" class="snippet" lang="shell" />
+          <Snippet :src="ASDF" lang="shell" />
         </div>
       </div>
       <p class="notes">
@@ -108,8 +108,4 @@ h3 {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   }
 }
-
-.snippet {
-  box-shadow: var(--vp-shadow-2);
-}
 </style>
diff --git a/website/.vitepress/components/home/Features.vue b/website/.vitepress/components/home/Features.vue
index c7e84bcc6..fa86db9d9 100644
--- a/website/.vitepress/components/home/Features.vue
+++ b/website/.vitepress/components/home/Features.vue
@@ -108,11 +108,10 @@
 }
 
 .feature > .icon .fill {
-  fill: var(--vp-c-brand);
-  opacity: 20%;
+  fill: var(--vp-c-brand-soft);
 }
 
 .feature > .icon .stroke {
-  stroke: var(--vp-c-brand);
+  stroke: var(--vp-c-brand-1);
 }
 </style>
diff --git a/website/.vitepress/components/home/Terminal.vue b/website/.vitepress/components/home/Terminal.vue
index a95f1eca4..1e8c26a71 100644
--- a/website/.vitepress/components/home/Terminal.vue
+++ b/website/.vitepress/components/home/Terminal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="window">
+  <div class="dark window">
     <div class="traffic-lights">
       <div class="traffic-light red" />
       <div class="traffic-light yellow" />
@@ -22,10 +22,10 @@
 
 <style scoped>
 .window {
-  background-color: var(--vp-code-block-bg);
+  background-color: var(--vp-c-bg-alt);
   border-radius: 0.5rem;
   box-shadow: var(--vp-shadow-5);
-  color: var(--vp-code-block-color);
+  color: var(--vp-c-text-1);
   font-family: var(--vp-font-family-mono);
   font-size: var(--vp-code-font-size);
   -webkit-font-smoothing: auto;
diff --git a/website/.vitepress/theme/style.css b/website/.vitepress/theme/style.css
index f564adf8a..e5042dd66 100644
--- a/website/.vitepress/theme/style.css
+++ b/website/.vitepress/theme/style.css
@@ -81,19 +81,17 @@
 }
 
 :root {
-  --vp-c-brand: var(--swm-c-navy-80);
-  --vp-c-brand-dark: var(--swm-c-navy-100);
-  --vp-c-brand-darker: var(--swm-c-navy-120);
-  --vp-c-brand-light: var(--swm-c-navy-40);
-  --vp-c-brand-lighter: var(--swm-c-navy-20);
+  --vp-c-brand-1: var(--swm-c-navy-80);
+  --vp-c-brand-2: var(--swm-c-navy-60);
+  --vp-c-brand-3: var(--swm-c-navy-100);
+  --vp-c-brand-soft: var(--swm-c-navy-20);
 }
 
 .dark {
-  --vp-c-brand: var(--swm-c-navy-60);
-  --vp-c-brand-dark: var(--swm-c-navy-80);
-  --vp-c-brand-darker: var(--swm-c-navy-100);
-  --vp-c-brand-light: var(--swm-c-navy-40);
-  --vp-c-brand-lighter: var(--swm-c-navy-20);
+  --vp-c-brand-1: var(--swm-c-navy-60);
+  --vp-c-brand-2: var(--swm-c-navy-40);
+  --vp-c-brand-3: var(--swm-c-navy-80);
+  --vp-c-brand-soft: var(--swm-c-navy-120);
 }
 
 :root {