Theme updates (#1267)

* change deprecated characteristic, menu styling * switch and checkbox styling * styling for table, cell renderers * fix table cell navigation * remove tar theme * fix type issues * remove tar * fix failing test
finos · Mar 14, 2024 · 7b8787f · 7b8787f
1 parent 875c4be
commit 7b8787f
Show file tree

Hide file tree

Showing 99 changed files with 323 additions and 2,124 deletions.
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -26,7 +26,6 @@
     "build:table": "cd sample-apps/standalone-table && node scripts/build.mjs",
     "build:packages": "npm run build -- --cjs --license && npm run type-defs",
     "build:packages:debug": "npm run build -- --cjs --debug && npm run type-defs -- --debug",
-    "build:themes": "node ./scripts/build-themes.mjs",
     "launch:demo": "node ./scripts/launch-app.mjs",
     "launch:table": "node ./scripts/launch-table.mjs",
     "launch:demo:electron": "cd tools/electron && node ./node_modules/.bin/electron .",

diff --git a/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts b/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts
@@ -9,11 +9,17 @@ import {
   buildColumnMap,
   isLookupRenderer,
   isTypeDescriptor,
+  isValueListRenderer,
 } from "@finos/vuu-utils";
 import { useMemo, useState } from "react";
 
 const NO_VALUES: ListOption[] = [];
 
+const toListOption = (value: string): ListOption => ({
+  label: value,
+  value,
+});
+
 const lookupValueMap = new Map<string, Promise<ListOption[]>>();
 
 const loadLookupValues = ({
@@ -87,30 +93,44 @@ export const useLookupValues = (
   column: ColumnDescriptor,
   initialValueProp: number | string
 ) => {
-  const lookupDetails = getLookupDetails(column);
+  const { type: columnType } = column;
   const { getLookupValues } = useShellContext();
 
   const initialState = useMemo<LookupState>(() => {
-    const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
-    return {
-      initialValue: getSelectedOption(values, initialValueProp),
-      values,
-    };
-  }, [getLookupValues, initialValueProp, lookupDetails.table]);
+    if (
+      isTypeDescriptor(columnType) &&
+      isValueListRenderer(columnType?.renderer)
+    ) {
+      const values = columnType.renderer.values.map(toListOption);
+      return {
+        initialValue: getSelectedOption(values, initialValueProp),
+        values,
+      };
+    } else {
+      const lookupDetails = getLookupDetails(column);
+      const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
+
+      return {
+        initialValue: getSelectedOption(values, initialValueProp),
+        values,
+      };
+    }
+  }, [column, columnType, getLookupValues, initialValueProp]);
 
   const [{ initialValue, values }, setLookupState] =
     useState<LookupState>(initialState);
 
   useMemo(() => {
     if (values === NO_VALUES) {
+      const lookupDetails = getLookupDetails(column);
       loadLookupValues(lookupDetails).then((values) =>
         setLookupState({
           initialValue: getSelectedOption(values, initialValueProp),
           values,
         })
       );
     }
-  }, [values, lookupDetails, initialValueProp]);
+  }, [values, column, initialValueProp]);
 
   return {
     initialValue,

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css
@@ -50,7 +50,7 @@
 .vuuFilterClause .saltInput-focused,
 .vuuFilterClause .saltTokenizedInput-focused {
   outline: none;
-  color: var(--salt-text-primary-foreground);
+  color: var(--salt-content-primary-foreground);
 }
 
 .vuuFilterClause .saltInput-input::selection {

diff --git a/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css b/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css
@@ -11,10 +11,10 @@
 
 .vuuFilterInput {
     --vuuFilterEditor-background: var(--salt-container-primary-background);
-    --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+    --vuuFilterEditor-color: var(--salt-content-primary-foreground);
     --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
     --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
-    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
+    --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
     --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
     --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
     --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); 

diff --git a/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css b/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css
@@ -20,7 +20,7 @@
 .vuuFilterPill[aria-selected="true"]{
     --vuuPopupMenu-iconColor: white;
     --salt-text-background-selected: var(--vuu-color-blue-40);
-    --salt-text-color-selected: var(--salt-text-primary-foreground);
+    --salt-text-color-selected: var(--salt-content-primary-foreground);
     --saltInput-background-hover: var(--salt-taggable-background-active);
     --saltInput-color: var(--salt-taggable-foreground-active);
     background: var(--salt-taggable-background-active);

diff --git a/vuu-ui/packages/vuu-layout/src/palette/Palette.css b/vuu-ui/packages/vuu-layout/src/palette/Palette.css
@@ -8,7 +8,7 @@
 }
 
 .vuuPaletteItem {
-  --vuu-icon-color: var(--salt-text-primary-foreground);
+  --vuu-icon-color: var(--salt-content-primary-foreground);
   --vuu-icon-left: 0;
   --vuu-icon-size: 16px;
   --vuu-icon-top: 11px;

diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css
@@ -7,7 +7,6 @@
   --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
   --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
   --context-menu-highlight-bg: var(--salt-selectable-background-hover);
-  --context-menu-blur-focus-bg: #e0e4e9;
   --menu-item-icon-color: black;
   --menu-item-twisty-color: black;
   --menu-item-twisty-content: '';
@@ -33,11 +32,15 @@
 }
 
 .vuuMenuItem {
+  --menu-item-background: var(--salt-selectable-background);
+  --menu-item-text-color: var(--salt-content-primary-foreground);
+
   align-items: center;
+  background: var(--vuuMenuItem-background, var(--menu-item-background));
   border-width: 1px;
   border-color: var(--vuuMenuItem-borderColor, transparent);
   border-style: var(--vuuMenuItem-borderStyle, none);
-  color: var(--context-menu-color);
+  color: var(--vuuMenuItem-color, var(--menu-item-text-color));
   display: flex;
   gap: 6px;
   height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));
@@ -56,7 +59,9 @@
 }
 
 .vuuMenuItem[aria-expanded='true'] {
-  background-color: var(--context-menu-blur-focus-bg);
+  --menu-item-twisty-color: var(--salt-selectable-foreground-selected);
+  color: var(--salt-selectable-foreground-selected);
+  background-color: var(--salt-selectable-background-selected);
 }
 
 .vuuMenuItem-separator {
@@ -78,19 +83,15 @@
   width: 16px;
 }
 
-.vuuMenuItem[data-highlighted] {
-  background-color: var(--context-menu-highlight-bg);
+.vuuMenuItem.vuuHighlighted {
+  --menu-item-background: var(--tar-color-gray-15);
 }
 
 .vuuMenuItem:hover {
-  background-color: var(--context-menu-highlight-bg);
+  --menu-item-background: var(--salt-selectable-background-hover);
   cursor: default;
 }
 
-.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {
-  background-color: var(--context-menu-blur-focus-bg);
-}
-
 .vuuMenuItem.focusVisible:before {
   content: '';
   position: absolute;

diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx b/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx
@@ -245,9 +245,9 @@ const getMenuItemProps = (
   id: `menuitem-${itemId}`,
   key: key ?? idx,
   "data-index": idx,
-  "data-highlighted": idx === highlightedIdx || undefined,
   className: cx("vuuMenuItem", className, {
     "vuuMenuItem-separator": hasSeparator,
+    vuuHighlighted: idx === highlightedIdx,
     focusVisible: focusVisible === idx,
   }),
 });

diff --git a/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css b/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css
@@ -3,6 +3,5 @@
     --vuu-icon-left: 2px;
     --vuu-icon-size: var(--vuuPopupMenu-iconSize, 16px);
     --vuu-icon-width: 16px;
-    background: var(--vuuPopupMenu-background, transparent);
 }
 
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css
@@ -5,10 +5,14 @@
 
     --saltButton-borderRadius: 4px;
     font-weight: 500;
+
+    .vuuDropdownButton {
+        --saltButton-height: var(--vuu-table-embedded-control-height);
+    }
 }
 
 .vuuTableDropdownCell button:focus-visible {
-    --saltButton-borderColor: var(--vuu-color-purple-10);
+    --saltButton-borderColor: var(--salt-focused-outlineColor);
     --saltButton-borderWidth: 2px;
-    padding-left: 3px;
+    padding-left: 7px;
 }
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx
@@ -1,5 +1,5 @@
 import { getSelectedOption, useLookupValues } from "@finos/vuu-data-react";
-import { VuuColumnDataType } from "@finos/vuu-protocol-types";
+import type { VuuColumnDataType } from "@finos/vuu-protocol-types";
 import { ListOption, TableCellRendererProps } from "@finos/vuu-table-types";
 import {
   Dropdown,

diff --git a/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css b/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css
@@ -1,7 +1,7 @@
 
 .vuuColumnExpressionInput {
     --vuuFilterEditor-background: var(--salt-container-primary-background);
-    --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+    --vuuFilterEditor-color: var(--salt-content-primary-foreground);
     --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
     --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
     --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
@@ -10,7 +10,7 @@
     --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); 
     --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
     --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
-    --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);
+    --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);
     --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
     --vuuFilterEditor-suggestion-height: 24px;
     --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);

diff --git a/vuu-ui/packages/vuu-table/src/Row.css b/vuu-ui/packages/vuu-table/src/Row.css
@@ -1,13 +1,14 @@
 .vuuTableRow {
-  background: var(--row-background,#fff);
-    border-bottom: 1px solid var(--row-borderColor);
+    background: var(--row-background,var(--table-background));
+    color: var(--salt-content-secondary-foreground);
+    border-bottom: 1px solid var(--row-borderColor, var(--table-background));
     box-sizing: border-box;
     height: var(--row-height);
     line-height: calc(var(--row-height) - 1px);
     position: absolute;
     top:0;
     white-space: nowrap;
-    }
+}
 
 .vuuTableRow-proxy {
   visibility: hidden;
@@ -18,34 +19,26 @@
 }
 
 .vuuTableRow-highlighted {
-  background-color: var(--salt-selectable-background-hover);
+  background: var(--salt-selectable-background-hover);
 }
 
 
 .vuuTableRow-selected,
 .vuuTableRow-selectedEnd {
-  --row-borderColor: var(--salt-separable-secondary-borderColor);
+  /* --row-borderColor: var(--salt-separable-secondary-borderColor); */
   background-color: var(--salt-selectable-background-selected);
 }
 
 .vuuTableRow-selectedEnd {
   z-index: 1;
 }
 
-.vuuTable-zebra {
-  .vuuTableRow-even.vuuTableRow-selected,
-  .vuuTableRow-even.vuuTableRow-selectedEnd {
-    /** thisis really where we want a darken function */
-  background-color: var(--vuu-color-gray-07);
+.vuuTableRow-selectedStart {
+  --vuu-selection-decorator-left-radius: 5px 0 0 0;
+  --vuu-selection-decorator-right-radius: 0 5px 0 0;
 
-  }
+  border-radius: 5px 5px 0 0;
 }
-
-    .vuuTableRow-selectedStart {
-        --vuu-selection-decorator-left-radius: 5px 0 0 0;
-        --vuu-selection-decorator-right-radius: 0 5px 0 0;
-        border-radius: 5px 5px 0 0;
-      }
 
       .vuuTableRow-selectedEnd {
         --vuu-selection-decorator-left-radius: 0 0 0 5px;
@@ -63,20 +56,20 @@
     .vuuTableRow-selectedStart:after {
         content: '';
         position: absolute;
-        top:0;
+        top: -1px;
         left: 4px;
         height: 1px;
-        background-color: var(--vuu-color-purple-10);
+        background: var(--vuuTableRow-selectionBlock-borderColor);
         width: calc(var(--content-width) - 8px);
         z-index: 1;
       }
 
     .vuuTableRow-selectedEnd {
-        border-bottom-color: var(--vuu-color-purple-10);
+        border-bottom-color: var(--vuuTableRow-selectionBlock-borderColor, var(--row-borderColor));
       }
 
       .vuuTableRow-selectionDecorator {
-        background-color: var(--vuu-selection-decorator-bg, white);
+        background: var(--table-background);
         display: inline-block;
         position: relative;
         height: var(--row-height);
@@ -92,31 +85,16 @@
       .vuuTableRow-selectionDecorator.vuuStickyRight {
         right:0;
         position: sticky;
-      }
-
-      .vuuTableRow-selected {
-        --vuu-selection-decorator-bg: var(--vuu-color-purple-10);
-
-      }
-
-      .vuuTableRow-selectedStart {
-        --vuu-selection-decorator-bg: white;
-      }
-
-      .vuuTableRow-selectedEnd {
-        --vuu-selection-decorator-bg: white;
-      }
-
+      }              
 
       .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
       .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
         content: '';
-        inset: 0;
+        inset: -1px 0 0 0;
         position: absolute;
-        background-color: var(--vuu-color-purple-10);
+        background: var(--table-background);
       }
 
-
       .vuuTableRow-selectionDecorator.vuuStickyLeft:before {
         border-radius: var(--vuu-selection-decorator-left-radius, 0);
       }
@@ -129,9 +107,9 @@
         --toggle-icon-transform: rotate(90deg);
       }
 
-      .vuuDraggable .vuuTableRow {
-        --cell-borderColor: transparent;
-        --vuu-selection-decorator-bg: transparent;
-        transform: none!important;
-        z-index: 1;
-      }
+.vuuDraggable .vuuTableRow {
+  --cell-borderColor: transparent;
+  --vuu-selection-decorator-bg: transparent;
+  transform: none!important;
+  z-index: 1;
+}