feat: Navie now supports user themes

getappmap · Dec 17, 2024 · 7a80e63 · 7a80e63
1 parent dd4a939
commit 7a80e63
Show file tree

Hide file tree

Showing 21 changed files with 230 additions and 166 deletions.
diff --git a/packages/components/src/components/AddFileButton.vue b/packages/components/src/components/AddFileButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-button class="add-file__button" size="small" kind="ghost">
+  <v-button class="add-file__button" size="small" kind="native-ghost">
     <PlusIcon />Add content...
   </v-button>
 </template>
@@ -21,21 +21,19 @@ export default {
 <style lang="scss" scoped>
 .add-file__button {
   padding: 0.5rem 1rem;
-  transition-duration: 0.25s;
 
   &:hover {
-    background-color: rgba(white, 0.05);
-  }
-
-  &:active {
-    background-color: rgba(white, 0.2);
+    svg {
+      fill: $color-highlight;
+    }
   }
 
   svg {
     width: 1rem;
     height: 1rem;
     margin-right: 0.63em;
-    fill: $white;
+    fill: $color-input-fg;
+    transition: $transition;
   }
 }
 </style>
diff --git a/packages/components/src/components/Button.vue b/packages/components/src/components/Button.vue
@@ -24,7 +24,7 @@ export default {
       type: String,
       default: 'primary',
       validator(value) {
-        return ['primary', 'secondary', 'ghost'].indexOf(value) !== -1;
+        return ['primary', 'secondary', 'ghost', 'native', 'native-ghost'].indexOf(value) !== -1;
       },
     },
     size: {
@@ -133,6 +133,33 @@ export default {
     }
   }
 
+  &--native {
+    background-color: $color-button-bg;
+    color: $color-button-fg;
+    &:hover {
+      background-color: $color-button-bg-hover;
+    }
+    &:active {
+      background-color: $color-highlight-dark;
+    }
+  }
+
+  &--native-ghost {
+    background-color: transparent;
+    border: 1px solid $color-input-fg;
+    color: $color-input-fg;
+
+    &:hover {
+      border-color: $color-highlight;
+      color: $color-highlight;
+    }
+
+    &:active {
+      border-color: $color-highlight-dark;
+      color: $color-highlight-dark;
+    }
+  }
+
   &--primary {
     border: 2px solid $brightblue;
     color: white;

diff --git a/packages/components/src/components/CodeSnippet.vue b/packages/components/src/components/CodeSnippet.vue
@@ -102,7 +102,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~highlight.js/styles/base16/snazzy.css';
 .code-snippet {
   margin: 1rem 0;
   border-radius: $border-radius;

diff --git a/packages/components/src/components/chat-search/Context.vue b/packages/components/src/components/chat-search/Context.vue
@@ -91,7 +91,7 @@ export default {
 
 <style lang="scss" scoped>
 .context {
-  color: $gray4;
+  color: $color-foreground;
   width: 100%;
   min-height: 100%;
 
@@ -108,7 +108,7 @@ export default {
   &__count {
     font-size: 0.8rem;
     font-weight: 400;
-    color: lighten($gray4, 20%);
+    color: $color-foreground;
     margin-left: 0.5rem;
     background-color: rgb(168, 168, 255, 0.15);
     border-radius: 4rem;
@@ -121,7 +121,7 @@ export default {
 
   h3 {
     margin: 0.65rem;
-    color: $gray5;
+    color: $color-foreground;
   }
 
   &__body {
@@ -147,7 +147,7 @@ export default {
     margin: 0 2rem;
     min-width: 180px;
     border-radius: 0.5rem;
-    color: rgba(white, 0.66);
+    color: $color-foreground;
     line-height: 1.5;
   }
 }

diff --git a/packages/components/src/components/chat-search/ContextItem.vue b/packages/components/src/components/chat-search/ContextItem.vue
@@ -109,7 +109,6 @@ export default Vue.extend({
     gap: 0.5em;
     padding: 0.65rem;
     cursor: pointer;
-    color: lighten($gray4, 20%);
     height: 100%;
 
     .row-icon {

diff --git a/packages/components/src/components/chat-search/CopilotNotice.vue b/packages/components/src/components/chat-search/CopilotNotice.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  color: $white;
+  color: $color-foreground;
   gap: 0.5rem;
 
   &__notification {
@@ -47,8 +47,8 @@ export default Vue.extend({
     max-width: 20rem;
     gap: 1rem;
     border-radius: $border-radius;
-    background-color: #32354d;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: $color-background-dark;
+    border: 1px solid $color-border;
 
     &-icon {
       svg {
@@ -60,11 +60,11 @@ export default Vue.extend({
   &__sub-notification {
     a {
       text-decoration: none;
-      color: desaturate($brightblue, 30%);
+      color: $color-link;
 
       &:hover,
       &:active {
-        color: $brightblue;
+        color: $color-link-hover;
         text-decoration: underline;
       }
     }

diff --git a/packages/components/src/components/chat-search/LlmConfiguration.vue b/packages/components/src/components/chat-search/LlmConfiguration.vue
@@ -24,6 +24,7 @@
             <div class="action">
               <v-button
                 size="medium"
+                kind="native"
                 @click.native="selectOption('copilot')"
                 :disabled="selectedOption === 'copilot'"
                 data-cy="llm-select"
@@ -40,6 +41,7 @@
             <div class="action">
               <v-button
                 size="medium"
+                kind="native"
                 @click.native="selectOption('default')"
                 :disabled="selectedOption === 'default'"
                 data-cy="llm-select"
@@ -54,7 +56,12 @@
               <p>Input your own OpenAI API key to use it with Navie.</p>
             </div>
             <div class="action">
-              <v-button size="medium" @click.native="selectOption('own-key')" data-cy="llm-select">
+              <v-button
+                size="medium"
+                kind="native"
+                @click.native="selectOption('own-key')"
+                data-cy="llm-select"
+              >
                 Select
               </v-button>
             </div>
@@ -77,6 +84,7 @@
               >
                 <v-button
                   size="medium"
+                  kind="native"
                   @click.native="selectOption('own-model')"
                   data-cy="llm-select"
                 >
@@ -98,7 +106,7 @@
       <div class="llm-configuration__indicator">
         <v-button
           v-if="!vsCodeLMVendor"
-          kind="ghost"
+          kind="native-ghost"
           class="button"
           @click.native="showModal"
           data-cy="llm-config-button"
@@ -220,6 +228,7 @@ export default Vue.extend({
   display: flex;
   padding: 1rem;
   width: fit-content;
+  color: $color-foreground;
 
   .skeleton-loader {
     @keyframes skeleton {
@@ -251,8 +260,8 @@ export default Vue.extend({
     padding: 1rem;
     align-items: center;
     border-radius: $border-radius;
-    background-color: #32354d;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: $color-background-dark;
+    border: 1px solid $color-border;
   }
 
   &__content {
@@ -266,7 +275,7 @@ export default Vue.extend({
     padding: 0.5rem;
 
     &:hover {
-      background-color: #32354d;
+      background-color: $color-background-light;
     }
   }
   .config-header {
@@ -305,11 +314,10 @@ export default Vue.extend({
   }
 
   .config-options {
-    $bg: #32354d;
-    background-color: $bg;
+    background-color: $color-background;
     padding: 1em;
     border-radius: $border-radius;
-    border: 1px solid desaturate(lighten($bg, 15%), 10%);
+    border: 1px solid $color-background-light;
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -322,7 +330,7 @@ export default Vue.extend({
       display: flex;
       flex-direction: row;
       padding: 1em;
-      border-bottom: 1px solid desaturate(lighten($bg, 15%), 10%);
+      border-bottom: 1px solid $color-background-light;
       gap: 1em;
 
       &:last-child {
@@ -350,11 +358,11 @@ export default Vue.extend({
 
       a {
         text-decoration: none;
-        color: desaturate($brightblue, 30%);
+        color: $color-link;
 
         &:hover,
         &:active {
-          color: $brightblue;
+          color: $color-link-hover;
           text-decoration: underline;
         }
       }

diff --git a/packages/components/src/components/chat-search/PinnedItems.vue b/packages/components/src/components/chat-search/PinnedItems.vue
@@ -89,7 +89,6 @@ export default {
 
 <style lang="scss" scoped>
 .pinned-items {
-  color: $gray4;
   width: 100%;
   min-height: 100%;
 
@@ -106,7 +105,6 @@ export default {
   &__count {
     font-size: 0.8rem;
     font-weight: 400;
-    color: lighten($gray4, 20%);
     margin-left: 0.5rem;
     background-color: rgb(168, 168, 255, 0.15);
     border-radius: 4rem;
@@ -123,13 +121,8 @@ export default {
     color: $white;
   }
 
-  h3 {
-    color: $gray5;
-  }
-
   &__header {
     flex: none;
-    background-color: $gray3;
     padding: 1rem;
     position: sticky;
     top: 0;
@@ -157,22 +150,17 @@ export default {
   }
 
   &__notice {
-    $fg: rgb(255, 255, 255, 0.75);
-
     margin: 0 auto;
     width: 80%;
     min-width: 180px;
-    background-color: rgb(0, 0, 0, 0.25);
     border: 1px solid rgb(255, 255, 255, 0.1);
     border-radius: 0.5rem;
     padding: 1rem;
-    color: $fg;
     line-height: 1.5;
 
     h2 {
       margin-top: 0;
       margin-bottom: 0.5rem;
-      color: $fg;
     }
   }
 }

diff --git a/packages/components/src/components/chat-search/VSCodeNotice.vue b/packages/components/src/components/chat-search/VSCodeNotice.vue
@@ -34,14 +34,13 @@ export default {
     user-select: none;
     line-height: 1.5;
     font-size: 1em;
-    color: rgba(white, 0.66);
 
     svg {
       height: 16px;
       width: 16px;
 
       path {
-        fill: $gray4;
+        fill: $color-foreground;
       }
     }