Add vspace & update color util

src/UITable/elements/VSpace.ts

@@ -0,0 +1,14 @@
+import { Omit_ } from '../../types/utilTypes';
+import Div, { DivStyle } from './Div';
+import P from './P';
+import { Percent } from './types';
+
+/** Add vertical space to a table */
+export default (
+  height: number | Percent,
+  style?: Omit_<DivStyle, 'height'>
+) => {
+  const el = Div([P('')], { height, ...style });
+  el.setDescription('VSPACE');
+  return el;
+};

src/UITable/elements/index.ts

@@ -6,6 +6,7 @@ export { default as H1 } from './H1';
 export { default as H2, H2Opts } from './H2';
 export { default as HR } from './HR';
 export { default as HSpace } from './HSpace';
+export { default as VSpace } from './VSpace';
 export { default as Icon, IconOrSFKey } from './Icon';
 export { default as Img } from './Img';
 export { default as P } from './P';

src/UITable/index.ts

@@ -38,6 +38,7 @@ export {
   H2,
   HR,
   HSpace,
+  VSpace,
   Icon,
   Img,
   NonCascadingDiv,

src/colors.ts

@@ -202,11 +202,16 @@ export const getDynamicColor = (
 export const getColors = () =>
   objectFromEntries(colorKeys.map(key => [key, getColor(key)]));
 
-export const getEnhancedColor = (key: ColorKey): EnhancedColor => {
-  const val = getKeyVal(key);
+export const getEnhancedColor = (
+  keyOrColor: ColorKey | Color
+): EnhancedColor => {
+  const val = isString(keyOrColor) ? getKeyVal(keyOrColor) : keyOrColor;
   return isEnhancedColor(val)
     ? val
-    : new EnhancedColor({ label: key, staticColor: val });
+    : new EnhancedColor({
+        label: isString(keyOrColor) ? keyOrColor : UUID.string(),
+        staticColor: val,
+      });
 };
 
 export const getDomainColor = (domain: Domain) =>