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

Author: rouk1

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");
 }

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;

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;
       }
     }

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);

skore-ui/src/components/TreeAccordionItem.vue

@@ -148,6 +148,7 @@ onMounted(() => {
     align-items: center;
     justify-content: space-between;
     background-color: var(--color-background-primary);
+    color: var(--color-text-primary);
 
     .label {
       display: flex;
@@ -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);
         }
       }
     }

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>

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;