Refactor StudioChip and StudioDetailsRow styles; update ChannelDetailsModal imports

Author: vtushar06

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

@@ -3,6 +3,7 @@
   <span
     class="studio-chip"
     :class="{ notranslate }"
+    :style="chipStyle"
   >
     <slot></slot>
   </span>
@@ -31,6 +32,14 @@
         default: false,
       },
     },
+    computed: {
+      chipStyle() {
+        return {
+          color: this.$themeTokens.text,
+          backgroundColor: this.$themePalette.grey.v_200,
+        };
+      },
+    },
   };
 
 </script>
@@ -45,8 +54,6 @@
     font-size: 12px;
     font-weight: bold;
     line-height: 16px;
-    color: var(--v-text-base, #000000);
-    background-color: var(--v-grey-lighten3, #e0e0e0);
     border-radius: 10px;
   }
 

contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue

@@ -612,6 +612,7 @@
   .printing {
     font-family: 'Noto Sans', helvetica !important;
 
+    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
     :global(.material-icons) {
       font-family: 'Material Icons' !important;
     }
@@ -627,7 +628,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    background-color: var(--v-greyBackground-base, #f5f5f5);
+    background-color: var(--v-grey-lighten4);
   }
 
   .resource-list {
@@ -719,7 +720,7 @@
     font-size: 14px;
     font-weight: bold;
     line-height: 20px;
-    color: var(--v-darkGrey-base, #424242);
+    color: var(--v-grey-darken3);
   }
 
   .sample-nodes {

contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsRow.vue

@@ -98,7 +98,7 @@
     font-size: 14px;
     font-weight: bold;
     line-height: 20px;
-    color: var(--v-darkGrey-base, #424242);
+    color: var(--v-grey-darken3);
     vertical-align: middle;
   }