Fix cancel button contrast in both themes

Author: cccadet

apps/desktop/src/components/Toolbar.tsx

@@ -66,10 +66,11 @@ export function Toolbar({
       <div className="omni-toolbar-group omni-toolbar-group-primary">
             {running ? (
               <ToolbarButton
+                className="omni-cancel-run"
                 icon={<StopRegular fontSize={14} />}
                 onClick={onCancelRun}
                 appearance="primary"
-                style={{ backgroundColor: tokens.colorPaletteRedBackground1, fontWeight: 600 }}
+                style={{ fontWeight: 600 }}
                 title={t("cancel")}
               >
                 {t("cancel")}

apps/desktop/src/index.css

@@ -41,6 +41,19 @@ body {
   background-color: var(--colorBrandBackgroundPressed);
 }
 
+.fui-Button.fui-Button--appearance-primary.omni-cancel-run {
+  background-color: #b42318;
+  color: #ffffff;
+}
+
+.fui-Button.fui-Button--appearance-primary.omni-cancel-run:hover {
+  background-color: #921d16;
+}
+
+.fui-Button.fui-Button--appearance-primary.omni-cancel-run:active {
+  background-color: #7a1913;
+}
+
 .fui-Button.fui-Button--appearance-subtle:hover,
 .fui-Button.fui-Button--appearance-transparent:hover {
   color: var(--colorBrandForeground1);