Merge pull request #1493 from mito-ds/fix-streamlit-styles

Fix colors on streamlit and dash
mito-ds · Jan 29, 2025 · 6062e57 · 6062e57
2 parents c433625 + 40bd61f
commit 6062e57
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/mitosheet/setup.py b/mitosheet/setup.py
@@ -84,7 +84,7 @@ def get_data_files_from_data_files_spec(
         'pandas>=0.24.2',
         'analytics-python',
         # Graphing libraries
-        'plotly>=4.14.3',
+        'plotly>=4.14.3,<6.0.0',
         'chardet>=3.0.4',
         # For XLSX, reading - we don't fix so works on all python versions
         'openpyxl',

diff --git a/mitosheet/src/mito/utils/colors.tsx b/mitosheet/src/mito/utils/colors.tsx
@@ -1,4 +1,5 @@
 import { MitoTheme } from "../types"
+import { isInJupyterLabOrNotebook } from "./location";
 
 type HSLColor = {
     h: number;
@@ -12,35 +13,63 @@ type RGBColor = {
     b: number;
 };
 
+/* 
+
+CSS Variable Names
+
+*/
+
+// Highlight colors
 const HIGHLIGHT_VARIABLE_NAME = '--mito-highlight';
 const HIGHLIGHT_MEDIUM_VARIABLE_NAME = '--mito-highlight-medium';
 const HIGHLIGHT_LIGHT_VARIABLE_NAME = '--mito-highlight-light';
 const HIGHLIGHT_VERY_LIGHT_VARIABLE_NAME = '--mito-highlight-very-light';
 
-const DEFAULT_HIGHLIGHT = 'var(--mito-purple)';
-const DEFAULT_HIGHLIGHT_MEDIUM = 'var(--mito-medium-purple)';
-const DEFAULT_HIGHLIGHT_LIGHT = 'var(--mito-light-purple)';
-const DEFAULT_HIGHLIGHT_VERY_LIGHT = 'var(--mito-very-light-purple)';
-
+// Text colors 
 const TEXT_VARIABLE_NAME = '--mito-text';
 const TEXT_MEDIUM_VARIABLE_NAME = '--mito-text-medium';
 const TEXT_LIGHT_VARIABLE_NAME = '--mito-text-light';
-const DEFAULT_TEXT = 'var(--jp-content-font-color1)';
-const DEFAULT_TEXT_MEDIUM = 'var(--mito-medium-gray)';
-const DEFAULT_TEXT_LIGHT = 'var(--mito-light-gray)';
 
+// Background colors
 const BACKGROUND_VARIABLE_NAME = '--mito-background';
 const BACKGROUND_OFF_VARIABLE_NAME = '--mito-background-off';
 const BACKGROUND_HIGHLIGHT_VARIABLE_NAME = '--mito-background-highlight';
 const BACKGROUND_DEFAULT_VARIABLE_NAME = '--mito-background-default';
 const BACKGROUND_DEFAULT_HOVER_VARIABLE_NAME = '--mito-background-default-hover';
+
 const TOOLBAR_HOVER_VARIABLE_NAME = '--mito-toolbar-hover';
-const DEFAULT_BACKGROUND = 'var(--jp-layout-color1)';
-const DEFAULT_BACKGROUND_OFF = 'var(--jp-layout-color2)';
-const DEFAULT_BACKGROUND_HIGHLIGHT = 'var(--jp-input-background)';
-const TOOLBAR_HOVER_BACKGROUND = 'var(--jp-layout-color3)';
-const DEFAULT_BACKGROUND_DEFAULT = 'var(--jp-layout-color3)';
-const DEFAULT_BACKGROUND_DEFAULT_HOVER = 'var(--jp-layout-color4)';
+
+/* 
+
+CSS Variable Values
+
+*/
+const DEFAULT_HIGHLIGHT = 'var(--mito-purple)';
+const DEFAULT_HIGHLIGHT_MEDIUM = 'var(--mito-medium-purple)';
+const DEFAULT_HIGHLIGHT_LIGHT = 'var(--mito-light-purple)';
+const DEFAULT_HIGHLIGHT_VERY_LIGHT = 'var(--mito-very-light-purple)';
+
+const DEFAULT_TEXT_MEDIUM = 'var(--mito-medium-gray)';
+const DEFAULT_TEXT_LIGHT = 'var(--mito-light-gray)';
+
+let DEFAULT_TEXT = 'var(--mito-gray)';
+let DEFAULT_BACKGROUND = 'var(--mito-white)';
+let DEFAULT_BACKGROUND_OFF = 'var(--mito-very-light-gray)';
+let DEFAULT_BACKGROUND_HIGHLIGHT = 'var(--mito-light-blue)';
+let TOOLBAR_HOVER_BACKGROUND = 'var(--mito-pretty-light-gray)';
+let DEFAULT_BACKGROUND_DEFAULT = 'var(--mito-light-purple)';
+let DEFAULT_BACKGROUND_DEFAULT_HOVER = 'var(--mito-medium-purple)';
+
+if (isInJupyterLabOrNotebook()) {
+
+    DEFAULT_TEXT = 'var(--jp-content-font-color1)';
+    DEFAULT_BACKGROUND = 'var(--jp-layout-color1)';
+    DEFAULT_BACKGROUND_OFF = 'var(--jp-layout-color2)';
+    DEFAULT_BACKGROUND_HIGHLIGHT = 'var(--jp-input-background)';
+    TOOLBAR_HOVER_BACKGROUND = 'var(--jp-layout-color3)';
+    DEFAULT_BACKGROUND_DEFAULT = 'var(--jp-layout-color3)';
+    DEFAULT_BACKGROUND_DEFAULT_HOVER = 'var(--jp-layout-color4)';
+}
 
 
 const getHighlightTheme = (primaryColor: string | undefined): React.CSSProperties => {