Port GTip styling to CSS custom properties

Drops the @import of @/style/scss/theme/blue.scss and switches to the
--color-* tokens from custom_theme_variables.scss (PR galaxyproject#19946, Laila
Los): --color-blue-600 for info, --color-orange-600/200 for warning,
--color-green-600/200 for success, --color-red-600/200 for danger, and
--color-grey-100 for neutral background.

GTip was the only G-component with an explicit theme SCSS import, so
removing it cleans up the last bit of mandatory theme coupling in
BaseComponents. The SCSS scale-color() calls for warning/success/danger
backgrounds map to the 200-shade of each hue, which is the closest
pre-defined match and avoids the partial-transparency pattern the color
system intentionally moved away from.

Prep work for the @galaxyproject/galaxy-ui workspace package: the
package can't depend on Galaxy's SCSS theme, so it consumes CSS custom
properties injected by the app at :root.

Author: dannon

client/src/components/BaseComponents/GTip.vue

@@ -86,33 +86,31 @@ onUnmounted(() => {
 </template>
 
 <style scoped lang="scss">
-@import "@/style/scss/theme/blue.scss";
-
 .g-tip {
     position: relative;
     padding: 0.5rem 0.75rem;
-    background-color: $gray-100;
-    border-radius: $border-radius-base;
-    border-left: 3px solid $brand-primary;
+    background-color: var(--color-grey-100);
+    border-radius: 0.25rem;
+    border-left: 3px solid var(--color-blue-600);
 
     &.tip-info {
-        background-color: $gray-100;
-        border-left-color: $brand-primary;
+        background-color: var(--color-grey-100);
+        border-left-color: var(--color-blue-600);
     }
 
     &.tip-warning {
-        background-color: scale-color($brand-warning, $lightness: +75%);
-        border-left-color: $brand-warning;
+        background-color: var(--color-orange-200);
+        border-left-color: var(--color-orange-600);
     }
 
     &.tip-success {
-        background-color: scale-color($brand-success, $lightness: +75%);
-        border-left-color: $brand-success;
+        background-color: var(--color-green-200);
+        border-left-color: var(--color-green-600);
     }
 
     &.tip-danger {
-        background-color: scale-color($brand-danger, $lightness: +75%);
-        border-left-color: $brand-danger;
+        background-color: var(--color-red-200);
+        border-left-color: var(--color-red-600);
     }
 }