mitosheet: handle unset colors in conditional formatting

mitosheet/src/mito/pro/taskpanes/ConditionalFormatting/ConditionalFormattingTaskpane.tsx

@@ -125,6 +125,19 @@ const ConditionalFormattingTaskpane = (props: ConditionalFormattingTaskpaneProps
     )
 
     const updateDataframeFormatParams = (newParams: RecursivePartial<DataframeFormat>): void => {
+        // If the user does not change the color or background color, we want to treat them as undefined
+        // so it doesn't change the data in the Mito Spreadsheet or the created Styler or Excel file
+        newParams.conditional_formats = newParams?.conditional_formats?.map(conditionalFormat => {
+            const newConditionalFormat = {...conditionalFormat};
+            if (newConditionalFormat.color === "var(--mito-text)") {
+                newConditionalFormat.color = undefined;
+            }
+            if (newConditionalFormat.backgroundColor === "var(--mito-background-off)") {
+                newConditionalFormat.backgroundColor = undefined;
+            }
+            return newConditionalFormat;
+        })
+
         setParams(prevParams => {
             return updateObjectWithPartialObject(prevParams, {df_format: newParams})
         })

mitosheet/src/mito/pro/taskpanes/SetDataframeFormat/SetDataframeFormatTaskpane.tsx

@@ -80,6 +80,7 @@ const SetDataframeFormatTaskpane = (props: SetDataframeFormatTaskpaneProps): JSX
     }
 
     const updateDataframeFormatParams = (newParams: RecursivePartial<DataframeFormat>): void => {
+        console.log(newParams)
         setParams(prevParams => {
             return updateObjectWithPartialObject(prevParams, {df_format: newParams})
         })

tests/streamlit_ui_tests/taskpanes/conditional_formatting.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+import { awaitResponse, getMitoFrameWithTestCSV } from '../utils';
+
+test.describe('Conditional Formatting', () => {
+    test('Leave conditional format color and backgroud_color unset', async ({ page }) => {
+        const mito = await getMitoFrameWithTestCSV(page);
+        await mito.getByRole('button', { name: 'Conditional Formatting', exact: true }).click();
+        awaitResponse(page)
+        await mito.getByRole('button', { name: 'Add Conditional Formatting Rule', exact: true }).click();
+        awaitResponse(page)
+        await mito.getByText('Is not empty').click();
+        awaitResponse(page)
+        await mito.getByText('Toggle All').click();
+        awaitResponse(page)
+
+        // Click on the Export
+        await mito.locator('.mito-toolbar-button', { hasText: 'Export'}).click();
+        await mito.locator('.mito-dropdown-item', { hasText: 'Download File when Executing Code'}).click();
+        await awaitResponse(page);
+        awaitResponse(page)
+        await mito.getByText('CSV').click();
+        awaitResponse(page)
+        await mito.getByText('Excel').click();
+        awaitResponse(page)
+
+        await mito.getByText('Generate Export Code').click();
+        awaitResponse(page)
+
+        // Make sure the code doesn't have mito css variables in it and there should be no styler since 
+        // no style is actually applied!
+        await expect(mito.getByText('var(--mito-text)')).not.toBeVisible();
+        await expect(mito.getByText('var(--mito-background-off')).not.toBeVisible();
+        await expect(mito.getByText('styler')).not.toBeVisible();
+    });
+})