fix(UI): Use default background color for selected text and misc fixes (

#1059) Removed pure blue background on editable text (view selector) And various color fixes on dark/light switch. Fixes #890 & #1011.
probabl-ai · Jan 9, 2025 · 5708996 · 5708996
1 parent be1aec3
commit 5708996
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 32 deletions.
diff --git a/skore-ui/src/assets/styles/_variables.css b/skore-ui/src/assets/styles/_variables.css
@@ -75,6 +75,11 @@ body[data-vscode-theme-kind="vscode-dark"],
 
   /* shadow */
   --color-shadow: rgb(0 0 0/58%);
+
+  /* images */
+  --image-not-found: url("../images/not-found-dark.png");
+  --image-editor-placeholder: url("../images/editor-placeholder-dark.svg");
+  --image-activity-feed-placeholder: url("../images/activity-feed-placeholder-dark.svg");
 }
 
 body[data-jp-theme-light="true"],
@@ -108,4 +113,9 @@ body[data-vscode-theme-kind="vscode-light"],
 
   /* shadow */
   --color-shadow: rgb(0 0 0/19%);
+
+  /* images */
+  --image-not-found: url("../images/not-found-light.png");
+  --image-editor-placeholder: url("../images/editor-placeholder-light.svg");
+  --image-activity-feed-placeholder: url("../images/activity-feed-placeholder-light.svg");
 }
diff --git a/skore-ui/src/assets/styles/main.css b/skore-ui/src/assets/styles/main.css
@@ -15,3 +15,11 @@
     background-color: var(--color-background-branding);
   }
 }
+
+.simplebar-inverted {
+  .simplebar-scrollbar {
+    &::before {
+      background-color: var(--color-text-tertiary);
+    }
+  }
+}
diff --git a/skore-ui/src/components/DropdownButtonItem.vue b/skore-ui/src/components/DropdownButtonItem.vue
@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<DropdownItemProps>(), { iconPosition: "le
   border: 0;
   border-bottom: 1px solid var(--color-stroke-background-primary);
   background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
   cursor: pointer;
   text-align: left;
   white-space: nowrap;

diff --git a/skore-ui/src/components/EditableListItem.vue b/skore-ui/src/components/EditableListItem.vue
@@ -128,9 +128,8 @@ onMounted(() => {
       transition: font-weight var(--animation-duration) var(--animation-easing);
 
       &[contenteditable="true"] {
-        background-color: var(--color-background-branding);
-        caret-color: var(--color-text-button-primary);
-        color: var(--color-text-button-primary);
+        caret-color: var(--color-text-branding);
+        color: var(--color-text-primary);
         cursor: text;
       }
     }

diff --git a/skore-ui/src/components/ProjectViewCard.vue b/skore-ui/src/components/ProjectViewCard.vue
@@ -116,6 +116,7 @@ onBeforeUnmount(() => {
     & .titles {
       position: relative;
       padding-left: calc(var(--spacing-8) + 4px);
+      color: var(--color-text-primary);
 
       & .title {
         font-size: var(--font-size-sm);

diff --git a/skore-ui/src/components/TreeAccordionItem.vue b/skore-ui/src/components/TreeAccordionItem.vue
@@ -169,6 +169,7 @@ onMounted(() => {
 
       & .text {
         border-radius: var(--radius-xs);
+        color: var(--color-text-primary);
       }
 
       &.has-children {
@@ -191,12 +192,13 @@ onMounted(() => {
         border: none;
         margin: 0;
         background-color: transparent;
+        color: var(--color-text-secondary);
         cursor: pointer;
         font-size: var(--font-size-md);
         transition: color var(--animation-duration) var(--animation-easing);
 
         &:hover {
-          color: var(--color-primary);
+          color: var(--color-text-primary);
         }
       }
     }

diff --git a/skore-ui/src/views/activity/ActivityFeedView.vue b/skore-ui/src/views/activity/ActivityFeedView.vue
@@ -129,6 +129,7 @@ onBeforeUnmount(() => {
 
     & .inner {
       padding-top: 189px;
+      background-image: var(--image-activity-feed-placeholder);
       background-position: center;
       background-repeat: no-repeat;
       background-size: 189px 180px;
@@ -140,16 +141,4 @@ onBeforeUnmount(() => {
     }
   }
 }
-
-@media (prefers-color-scheme: light) {
-  .activity-feed .placeholder .inner {
-    background-image: url("../../assets/images/activity-feed-placeholder-light.svg");
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .activity-feed .placeholder .inner {
-    background-image: url("../../assets/images/activity-feed-placeholder-dark.svg");
-  }
-}
 </style>
diff --git a/skore-ui/src/views/project/ProjectView.vue b/skore-ui/src/views/project/ProjectView.vue
@@ -122,20 +122,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-@media (prefers-color-scheme: dark) {
-  main {
-    --not-found-image: url("../../assets/images/not-found-dark.png");
-    --editor-placeholder-image: url("../../assets/images/editor-placeholder-dark.svg");
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  main {
-    --not-found-image: url("../../assets/images/not-found-light.png");
-    --editor-placeholder-image: url("../../assets/images/editor-placeholder-light.svg");
-  }
-}
-
 main {
   display: flex;
   overflow: hidden;
@@ -204,11 +190,12 @@ main {
         flex-direction: column;
         justify-content: center;
         background-color: var(--color-background-primary);
+        color: var(--color-text-secondary);
 
         & .wrapper {
           padding-top: 225px;
           margin: var(--spacing-24);
-          background-image: var(--editor-placeholder-image);
+          background-image: var(--image-editor-placeholder);
           background-position: 50% 0;
           background-repeat: no-repeat;
           background-size: 265px 192px;

diff --git a/skore-ui/src/views/project/ProjectViewNavigator.vue b/skore-ui/src/views/project/ProjectViewNavigator.vue
@@ -139,7 +139,7 @@ onBeforeUnmount(() => {
           <span>Add a new view</span>
           <i class="icon-plus-circle" />
         </div>
-        <Simplebar class="view-list" v-if="views.length > 0">
+        <Simplebar class="view-list simplebar-inverted" v-if="views.length > 0">
           <EditableList
             v-model:items="views"
             :actions="[