From 7eac02680780ad3725d82b898201b5c0f69b3501 Mon Sep 17 00:00:00 2001
From: Josh Braun <josh.braun.4@gmail.com>
Date: Sun, 26 Nov 2023 22:28:22 -0500
Subject: [PATCH] themed kind tags

---
 .../packages/ui-core/src/graph/OpTags.tsx     | 66 ++++++++-----------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
index 8c6e01946a4e8..3471f70695301 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
@@ -6,7 +6,11 @@ import {
   colorAccentReversed,
   colorAccentWhite,
   colorBackgroundDefault,
+  colorBackgroundGray,
   colorBackgroundLight,
+  colorBackgroundLighter,
+  colorBackgroundLighterHover,
+  colorLineageNodeBackground,
   colorTextDefault,
   colorTextLight,
 } from '@dagster-io/ui-components';
@@ -82,7 +86,7 @@ interface OpTagsProps {
 
 export const KNOWN_TAGS = {
   jupyter: {
-    color: '#4E4E4E',
+    color: '#929292',
     icon: jupyter,
     content: 'Jupyter',
   },
@@ -95,7 +99,6 @@ export const KNOWN_TAGS = {
     color: '#00D2D2',
     icon: noteable,
     content: 'Noteable',
-    reversed: true,
   },
   airbyte: {
     color: '#655CFC',
@@ -113,7 +116,7 @@ export const KNOWN_TAGS = {
     content: 'Snowflake',
   },
   python: {
-    color: '#35668F',
+    color: '#367EF0',
     icon: python,
     content: 'Python',
   },
@@ -128,7 +131,7 @@ export const KNOWN_TAGS = {
     content: 'dbt',
   },
   slack: {
-    color: '#4A144A',
+    color: '#803A80',
     icon: slack,
     content: 'Slack',
   },
@@ -151,18 +154,17 @@ export const KNOWN_TAGS = {
     color: '#FCBC41',
     icon: duckdb,
     content: 'DuckDB',
-    reversed: true,
   },
   tensorflow: {
     color: '#FE9413',
     icon: tensorflow,
     content: 'TensorFlow',
-    reversed: true,
   },
   pandas: {
-    color: '#130754',
+    color: '#E40385',
     icon: pandas,
     content: 'pandas',
+    reversed: true,
   },
   googlesheets: {
     color: '#23A566',
@@ -175,10 +177,9 @@ export const KNOWN_TAGS = {
     content: 'SQL',
   },
   wandb: {
-    color: '#FCB119',
+    color: '#FFBE00',
     icon: weights_and_biases,
     content: 'Weights & Biases',
-    reversed: true,
   },
   databricks: {
     color: '#FD3820',
@@ -191,12 +192,12 @@ export const KNOWN_TAGS = {
     content: 'Airflow',
   },
   datadog: {
-    color: '#632CA6',
+    color: '#7633C8',
     icon: datadog,
     content: 'Datadog',
   },
   postgres: {
-    color: '#336791',
+    color: '#136FBA',
     icon: postgres,
     content: 'Postgres',
   },
@@ -206,7 +207,7 @@ export const KNOWN_TAGS = {
     content: 'Stripe',
   },
   hightouch: {
-    color: '#07484D',
+    color: '#4EBB6C',
     icon: hightouch,
     content: 'Hightouch',
   },
@@ -216,7 +217,7 @@ export const KNOWN_TAGS = {
     content: 'Census',
   },
   hex: {
-    color: '#F5C0C0',
+    color: '#473982',
     icon: hex,
     content: 'Hex',
     reversed: true,
@@ -260,7 +261,6 @@ export const KNOWN_TAGS = {
     color: '#EDC947',
     icon: powerbi,
     content: 'Power BI',
-    reversed: true,
   },
   gcp: {
     color: '#4285F4',
@@ -273,12 +273,12 @@ export const KNOWN_TAGS = {
     content: 'Google Cloud',
   },
   looker: {
-    color: '#5F6368',
+    color: '#929292',
     icon: looker,
     content: 'Looker',
   },
   tableau: {
-    color: '#25447A',
+    color: '#2E5EB1',
     icon: tableau,
     content: 'Tableau',
   },
@@ -291,25 +291,21 @@ export const KNOWN_TAGS = {
     color: '#FF9900',
     icon: aws,
     content: 'Athena',
-    reversed: true,
   },
   s3: {
     color: '#FF9900',
     icon: aws,
     content: 'S3',
-    reversed: true,
   },
   aws: {
     color: '#FF9900',
     icon: aws,
     content: 'AWS',
-    reversed: true,
   },
   stitch: {
     color: '#FFD201',
     icon: stitch,
     content: 'Stitch',
-    reversed: true,
   },
   openai: {
     color: '#4AA081',
@@ -317,12 +313,13 @@ export const KNOWN_TAGS = {
     content: 'Open AI',
   },
   vercel: {
-    color: '#171615',
+    color: '#787878',
     icon: vercel,
     content: 'Vercel',
+    reversed: true,
   },
   github: {
-    color: '#171615',
+    color: '#A970C1',
     icon: github,
     content: 'Github',
   },
@@ -337,18 +334,18 @@ export const KNOWN_TAGS = {
     content: 'plotly',
   },
   modal: {
-    color: '#9AEE86',
+    color: '#4CDE29',
     icon: modal,
     content: 'Modal',
     reversed: true,
   },
   meltano: {
-    color: '#311772',
+    color: '#3537BE',
     icon: meltano,
     content: 'Meltano',
   },
   matplotlib: {
-    color: '#2B597C',
+    color: '#055998',
     icon: matplotlib,
     content: 'matplotlib',
   },
@@ -430,6 +427,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
         const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
         const text = known?.content || tag.label;
         const color = known?.color || colorTextLight();
+        const reversed = known && 'reversed' in known ? known.reversed : false;
         const textcolor =
           known && 'reversed' in known ? colorTextDefault() : colorAccentWhite();
         return (
@@ -439,13 +437,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
             data-tooltip={reduceText ? text : undefined}
             onClick={tag.onClick}
             style={{
-              background:
-                reduceColor && reduceText
-                  ? colorBackgroundDefault()
-                  : reduceColor
-                  ? colorBackgroundLight()
-                  : color,
-              color: reduceColor ? colorTextLight() : textcolor,
+              background: reduceColor ? colorBackgroundGray() : colorLineageNodeBackground(),
               fontWeight: reduceColor ? 500 : 700,
             }}
           >
@@ -454,14 +446,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
                 role="img"
                 $size={16}
                 $img={known.icon.src}
-                $color={
-                  reduceColor
-                    ? known && 'reversed' in known
-                      ? colorAccentPrimary()
-                      : color
-                    : textcolor
-                }
-                //$color={reduceColor ? color : textcolor}
+                $color={reversed ? colorAccentPrimary() : color}
+                // $color={reduceColor ? color : textcolor}
                 $rotation={null}
                 aria-label={tag.label}
               />