Change table viz colors (#11839)

Change the background color of the visualisations to be not pink. Darken some of the text/icons to improve contrast ![image](https://github.com/user-attachments/assets/f78ed75b-c1a0-40ba-a0ed-db03a8682496)
enso-org · Dec 11, 2024 · 8c8a2f8 · 8c8a2f8
1 parent bf7fe67
commit 8c8a2f8
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/app/gui/src/project-view/assets/base.css b/app/gui/src/project-view/assets/base.css
@@ -8,14 +8,15 @@
  *** semantic color variables for this project ***
  *************************************************/
 :root {
-  --color-text: rgb(118 118 118);
+  --color-ag-header-text: rgb(0 0 0);
+  --color-text: rgb(82 82 82);
   --color-primary: rgb(0 0 0 / 0.6);
   --color-text-light: rgb(255 255 255 / 0.7);
   --color-text-inversed: rgb(255 255 255);
   --color-app-bg: rgb(255 255 255 / 0.8);
   --color-menu-entry-hover-bg: rgb(0 0 0 / 0.1);
   --color-menu-entry-selected-bg: rgb(0 0 0 / 0.05);
-  --color-visualization-bg: rgb(255 242 242);
+  --color-visualization-bg: rgb(242 242 242);
   --color-dim: rgb(0 0 0 / 0.25);
   --color-frame-bg: rgb(255 255 255 / 0.3);
   --color-frame-selected-bg: rgb(255 255 255 / 0.7);

diff --git a/app/gui/src/project-view/components/shared/AgGridTableView.vue b/app/gui/src/project-view/components/shared/AgGridTableView.vue
@@ -360,6 +360,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
   --ag-grid-size: 3px;
   --ag-list-item-height: 20px;
   --ag-background-color: var(--color-visualization-bg);
+  --ag-header-foreground-color: var(--color-ag-header-text);
   --ag-odd-row-background-color: color-mix(in srgb, var(--color-visualization-bg) 98%, black);
   --ag-header-background-color: var(--color-visualization-bg);
   font-family: var(--font-mono);

diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue
@@ -808,6 +808,7 @@ config.setToolbar(
 .table-visualization-status-bar {
   height: 20px;
   font-size: 14px;
+  color: var(--color-ag-header-text);
   white-space: nowrap;
   padding: 0 5px;
   overflow: hidden;

diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizToolbar.ts b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizToolbar.ts
@@ -184,8 +184,8 @@ function createFormatMenu({ textFormatterSelected }: FormatMenuOptions): Toolbar
       partial: {
         icon: 'paragraph',
         iconStyle: {
-          stroke: 'grey',
-          color: 'grey',
+          stroke: '#525252',
+          color: '#525252',
         },
         title: 'Text displayed in monospace font, only multiple spaces displayed with "\xB7"',
         label: 'Partial whitespace rendering',