Add Fluent 9 theme (#1282)

Author: flanakin

src/power-bi/FinOpsToolkitLight.json

@@ -1 +1,64 @@
-{"name":"Microsoft FinOps light theme","dataColors":["#6F4BB2","#0078D4","#EF6950","#3449AA","#00A2AD","#733569","#E3008C","#335C50","#3599B8","#DFBFBF","#4AC5BB","#5F6B6D","#FB8281","#F4D25A","#7F898A","#A4DDEE","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],"visualStyles":{"*":{"*":{"visualTooltip":[{"titleFontColor":{"solid":{"color":"#FFFFFF"}},"valueFontColor":{"solid":{"color":"#FFFFFF"}}}],"outspacePane":[{"checkboxAndApplyColor":{"solid":{"color":"#6F4BB2"}}}]}}},"bad":"#E00B1C","neutral":"#DB7500","good":"#57A300","minimum":"#EFEDF8","center":"#FFCA8A","maximum":"#8970C3","textClasses":{"callout":{"fontFace":"'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"},"title":{"fontFace":"'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"}}}
+{
+  "name": "Microsoft FinOps light theme",
+  "dataColors": [
+    "#6f4bb2",
+    "#0078d4",
+    "#ef6950",
+    "#3449aa",
+    "#00a2ad",
+    "#733569",
+    "#e3008c",
+    "#335c50",
+    "#3599b8",
+    "#dfbfbf",
+    "#4ac5bb",
+    "#5f6b6d",
+    "#fb8281",
+    "#f4d25a",
+    "#7f898a",
+    "#a4ddee",
+    "#fdab89",
+    "#b687ac",
+    "#28738a",
+    "#a78f8f",
+    "#168980",
+    "#293537",
+    "#bb4a4a",
+    "#b59525",
+    "#475052",
+    "#6a9fb0",
+    "#bd7150",
+    "#7b4f71",
+    "#1b4d5c",
+    "#706060",
+    "#0f5c55",
+    "#1c2325"
+  ],
+  "visualStyles": {
+    "*": {
+      "*": {
+        "visualTooltip": [
+          {
+            "titleFontColor": { "solid": { "color": "#ffffff" } },
+            "valueFontColor": { "solid": { "color": "#ffffff" } }
+          }
+        ],
+        "outspacePane": [
+          {
+            "checkboxAndApplyColor": { "solid": { "color": "#6f4bb2" } }
+          }
+        ]
+      }
+    }
+  },
+  "bad": "#e00b1c",
+  "neutral": "#db7500",
+  "good": "#57a300",
+  "minimum": "#efedf8",
+  "center": "#ffca8a",
+  "maximum": "#8970c3",
+  "textClasses": {
+    "callout": { "fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif" },
+    "title": { "fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif" }
+  }
+}

src/web/FinOpsToolkitTheme.ts

@@ -0,0 +1,29 @@
+const ftk: BrandVariants = {
+  10: '#030205',
+  20: '#1A1423',
+  30: '#2A1E3E',
+  40: '#382755',
+  50: '#46316D',
+  60: '#553A86',
+  70: '#6444A0',
+  80: '#734FB4',
+  90: '#815FBC',
+  100: '#8F6FC3',
+  110: '#9C7ECA',
+  120: '#A98FD1',
+  130: '#B69FD8',
+  140: '#C3AFDF',
+  150: '#D0C0E6',
+  160: '#DDD1ED',
+};
+
+const lightTheme: Theme = {
+  ...createLightTheme(ftk),
+};
+
+const darkTheme: Theme = {
+  ...createDarkTheme(ftk),
+};
+
+darkTheme.colorBrandForeground1 = ftk[110];
+darkTheme.colorBrandForeground2 = ftk[120];