A few CSS fixes for regular-table in shadow DOM

packages/perspective-viewer-datagrid/src/less/mitered-headers.less

@@ -37,10 +37,11 @@
         0px 10px 0 -9px var(--inactive--border-color, #8b868045);
 }
 
-perspective-viewer[settings]
-    tr.rt-autosize
-    .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
-    box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
+perspective-viewer[settings],
+:host-context(perspective-viewer[settings]) {
+    tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+        box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
+    }
 }
 
 .psp-header-leaf.psp-header-border {

packages/perspective-viewer-datagrid/src/less/regular_table.less

@@ -81,9 +81,12 @@ perspective-viewer[settings],
     }
 }
 
-perspective-viewer regular-table table thead tr:last-child th {
-    border-bottom-width: 1px;
-    border-bottom-color: var(--inactive--border-color, #8b868045);
+perspective-viewer,
+:host-context(perspective-viewer) {
+    regular-table table thead tr:last-child th {
+        border-bottom-width: 1px;
+        border-bottom-color: var(--inactive--border-color, #8b868045);
+    }
 }
 
 .psp-sort-enabled:hover {
@@ -120,8 +123,11 @@ td:focus {
     outline-width: 1px;
 }
 
-perspective-viewer.dragging regular-table {
-    pointer-events: none;
+perspective-viewer.dragging,
+:host-context(perspective-viewer.dragging) {
+    regular-table {
+        pointer-events: none;
+    }
 }
 
 .psp-header-border:last-child {
@@ -283,7 +289,7 @@ regular-table table {
 // _first_ frame as if its in the wrong state, as it detects sidepanel state
 // via HTML attribute checking.
 perspective-viewer:not([settings]),
-:host-context(:not([settings])) {
+:host-context(perspective-viewer:not([settings])) {
     regular-table #psp-column-edit-buttons:after {
         content: none;
     }

rust/perspective-viewer/src/themes/dracula.less

@@ -67,10 +67,8 @@ perspective-dropdown[theme="Dracula"] {
 }
 
 @mixin perspective-viewer-dracula--datagrid {
-    regular-table {
-        --rt-pos-cell--color: var(--theme-blue);
-        --rt-neg-cell--color: var(--theme-red); 
-    }
+    --rt-pos-cell--color: var(--theme-blue);
+    --rt-neg-cell--color: var(--theme-red);
 }
 
 @mixin perspective-viewer-dracula--d3fc {
@@ -100,4 +98,4 @@ perspective-dropdown[theme="Dracula"] {
         var(--theme-bg0),
         var(--theme-blue)
     ) !important;
-}
+}

rust/perspective-viewer/src/themes/gruvbox-dark.less

@@ -75,10 +75,8 @@ perspective-dropdown[theme="Gruvbox Dark"] {
 }
 
 @mixin perspective-viewer-gruvbox-dark--datagrid {
-    regular-table {
-        --rt-pos-cell--color: var(--theme-alt-blue);
-        --rt-neg-cell--color: var(--theme-alt-red); 
-    }
+    --rt-pos-cell--color: var(--theme-alt-blue);
+    --rt-neg-cell--color: var(--theme-alt-red);
 }
 
 @mixin perspective-viewer-gruvbox-dark--d3fc {
@@ -115,4 +113,4 @@ perspective-dropdown[theme="Gruvbox Dark"] {
         var(--theme-blue),
         var(--theme-alt-blue)
     ) !important;
-}
+}

rust/perspective-viewer/src/themes/gruvbox.less

@@ -56,8 +56,6 @@ perspective-viewer[theme="Gruvbox Light"] {
     // --gruvbox-light-aqua: #8ec07c;
     // --gruvbox-light-orange: #fe8019;
 
-
-
     @include perspective-viewer-pro;
     @include perspective-viewer-gruvbox-light--colors;
     @include perspective-viewer-gruvbox-light--animation;
@@ -100,7 +98,7 @@ perspective-dropdown[theme="Gruvbox Light"] {
     --theme-alt-purple: #8f3f71;
     --theme-alt-aqua: #427b58;
     --theme-alt-orange: #af3a03;
-    
+
     color: var(--theme-fg1);
     background-color: var(--theme-bg1);
     --icon--color: var(--theme-fg0);
@@ -113,10 +111,8 @@ perspective-dropdown[theme="Gruvbox Light"] {
 }
 
 @mixin perspective-viewer-gruvbox-light--datagrid {
-    regular-table {
-        --rt-pos-cell--color: var(--theme-blue);
-        --rt-neg-cell--color: var(--theme-red); 
-    }
+    --rt-pos-cell--color: var(--theme-blue);
+    --rt-neg-cell--color: var(--theme-red);
 }
 
 @mixin perspective-viewer-gruvbox-light--d3fc {
@@ -153,4 +149,4 @@ perspective-dropdown[theme="Gruvbox Light"] {
         var(--theme-blue),
         var(--theme-alt-blue)
     ) !important;
-}
+}

rust/perspective-viewer/src/themes/monokai.less

@@ -60,17 +60,19 @@ perspective-string-column-style[theme="Monokai"] {
 }
 
 @mixin perspective-viewer-monokai--datagrid {
-    regular-table {
-        --rt-pos-cell--color: #78dce8 !important;
-        --rt-neg-cell--color: #ff6188 !important;
-        --rt--border-color: #444444;
-    }
+    --rt-pos-cell--color: #78dce8 !important;
+    --rt-neg-cell--color: #ff6188 !important;
+    --rt--border-color: #444444;
 
+    // FIXME: broken in shadow DOM.  Can be fixed with a new custom property allowing empty header cell backgrounds
+    // to be styled
     regular-table table tbody th:empty {
-        background: linear-gradient(to right,
-                transparent 9px,
-                #444444 10px,
-                transparent 11px);
+        background: linear-gradient(
+            to right,
+            transparent 9px,
+            #444444 10px,
+            transparent 11px
+        );
     }
 }
 
@@ -97,7 +99,9 @@ perspective-string-column-style[theme="Monokai"] {
 
     --d3fc-negative--gradient: linear-gradient(#272822 0%, #ff6188 100%);
     --d3fc-positive--gradient: linear-gradient(#272822 0%, #78dce8 100%);
-    --d3fc-full--gradient: linear-gradient(#ff6188 0%,
-            #272822 50%,
-            #78dce8 100%);
-}
+    --d3fc-full--gradient: linear-gradient(
+        #ff6188 0%,
+        #272822 50%,
+        #78dce8 100%
+    );
+}

rust/perspective-viewer/src/themes/pro-dark.less

@@ -95,16 +95,12 @@ perspective-string-column-style[theme="Pro Dark"] {
     --map-category-8: rgb(221, 99, 103);
     --map-category-9: rgb(120, 104, 206);
     --map-category-10: rgb(23, 166, 123);
-    --map-gradient: linear-gradient(#dd6367 0%,
-            #242526 50%,
-            #3289c8 100%);
+    --map-gradient: linear-gradient(#dd6367 0%, #242526 50%, #3289c8 100%);
 }
 
 @mixin perspective-viewer-pro-dark--datagrid {
-    regular-table {
-        --rt-pos-cell--color: #7dc3f0;
-        --rt-neg-cell--color: #ff9485;
-    }
+    --rt-pos-cell--color: #7dc3f0;
+    --rt-neg-cell--color: #ff9485;
 }
 
 @mixin perspective-viewer-pro-dark--d3fc {
@@ -131,10 +127,12 @@ perspective-string-column-style[theme="Pro Dark"] {
     --d3fc-series-9: rgb(120, 104, 206);
     --d3fc-series-10: rgb(23, 166, 123);
 
-    --d3fc-full--gradient: linear-gradient(#dd6367 0%,
-            #242526 50%,
-            #3289c8 100%);
+    --d3fc-full--gradient: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
 
     --d3fc-positive--gradient: linear-gradient(#242526 0%, #3289c8 100%);
     --d3fc-negative--gradient: linear-gradient(#dd6367 0%, #242526 100%);
-}
+}

rust/perspective-viewer/src/themes/pro.less

@@ -42,9 +42,9 @@ perspective-string-column-style[theme="Pro Light"] {
     @include perspective-viewer-pro--openlayers;
 }
 
-
 @mixin perspective-modal-pro {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
     background-color: white;
     border: 1px solid var(--inactive--color);
     border-radius: 0 0 2px 2px;
@@ -80,8 +80,8 @@ perspective-string-column-style[theme="Pro Light"] {
     color: #161616;
     background-color: transparent;
     --icon--color: #161616;
-    --inactive--color: #ABABAB;
-    --inactive--border-color: #DADADA;
+    --inactive--color: #ababab;
+    --inactive--border-color: #dadada;
 
     --root--background: #ffffff;
     --active--color: #2670a9;
@@ -91,15 +91,17 @@ perspective-string-column-style[theme="Pro Light"] {
     --select--background-color: none;
     --column-drop-container--background: none;
     --warning--background: #042121;
-    --warning--color: #FDFFFD;
+    --warning--color: #fdfffd;
 
     // TODO deprecate me
-    --overflow-hint-icon--color: #FDFFFD;
+    --overflow-hint-icon--color: #fdfffd;
 }
 
 @mixin perspective-viewer-pro--fonts {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
-    --interface-monospace--font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
+    --interface-monospace--font-family: "ui-monospace", "SFMono-Regular",
+        "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
 }
 
 @mixin perspective-viewer-pro--d3fc {
@@ -125,21 +127,27 @@ perspective-string-column-style[theme="Pro Light"] {
     --d3fc-series-8: #7f7f7f;
     --d3fc-series-9: #bcbd22;
     --d3fc-series-10: #17becf;
-    --d3fc-full--gradient: linear-gradient(#4d342f 0%,
-            #e4521b 22.5%,
-            #feeb65 42.5%,
-            #f0f0f0 50%,
-            #dcedc8 57.5%,
-            #42b3d5 67.5%,
-            #1a237e 100%);
-    --d3fc-positive--gradient: linear-gradient(#f0f0f0 0%,
-            #dcedc8 10%,
-            #42b3d5 50%,
-            #1a237e 100%);
-    --d3fc-negative--gradient: linear-gradient(#4d342f 0%,
-            #e4521b 50%,
-            #feeb65 90%,
-            #f0f0f0 100%);
+    --d3fc-full--gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
+    --d3fc-positive--gradient: linear-gradient(
+        #f0f0f0 0%,
+        #dcedc8 10%,
+        #42b3d5 50%,
+        #1a237e 100%
+    );
+    --d3fc-negative--gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 50%,
+        #feeb65 90%,
+        #f0f0f0 100%
+    );
 }
 
 @mixin perspective-viewer-pro--openlayers {
@@ -155,17 +163,18 @@ perspective-string-column-style[theme="Pro Light"] {
     --map-category-8: #7f7f7f;
     --map-category-9: #bcbd22;
     --map-category-10: #17becf;
-    --map-gradient: linear-gradient(#4d342f 0%,
-            #e4521b 22.5%,
-            #feeb65 42.5%,
-            #f0f0f0 50%,
-            #dcedc8 57.5%,
-            #42b3d5 67.5%,
-            #1a237e 100%);
+    --map-gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
 }
 
 @mixin perspective-viewer-pro--datagrid {
     --rt-pos-cell--color: #338dcd;
     --rt-neg-cell--color: #ff471e;
 }
-

rust/perspective-viewer/src/themes/solarized.less

@@ -65,12 +65,10 @@ perspective-string-column-style[theme="Solarized"] {
 }
 
 @mixin perspective-viewer-solarized--datagrid {
-    regular-table {
-        --rt-pos-cell--color: #268bd2 !important;
-        --rt-neg-cell--color: #cb4b16 !important;
-        --rt-hover--border-color: #CCC;
-        --rt--border-color: #93a1a1;
-    }
+    --rt-pos-cell--color: #268bd2 !important;
+    --rt-neg-cell--color: #cb4b16 !important;
+    --rt-hover--border-color: #ccc;
+    --rt--border-color: #93a1a1;
 }
 x {
     color: #cb4b16;
@@ -92,11 +90,13 @@ x {
     --d3fc-series-6: #6c71c4;
     --d3fc-series-7: #d33682;
 
-    --d3fc-positive--gradient: linear-gradient(#268bd2 0%,
-            #2aa198,
-            #859900,
-            #b58900,
-            #cb4b16,
-            #dc322f,
-            #d33682 100%);
-}
+    --d3fc-positive--gradient: linear-gradient(
+        #268bd2 0%,
+        #2aa198,
+        #859900,
+        #b58900,
+        #cb4b16,
+        #dc322f,
+        #d33682 100%
+    );
+}