@revolist/revogrid 4.24.3 → 4.25.1

package/dist/collection/components/revoGrid/revo-grid-style.css

@@ -1,202 +1,293 @@
-revo-grid[theme=default],
+revo-grid:is([theme=default], [theme=dark]),
 revo-grid:not([theme]) {
-  border: 1px solid var(--revo-grid-header-border);
-  font-size: 12px;
-}
-revo-grid[theme=default] .rowHeaders revogr-header,
+  --rg-theme-font-family: var(
+    --revo-grid-font-family,
+    Helvetica,
+    Arial,
+    Sans-Serif,
+    serif
+  );
+  --rg-theme-font-size: var(--revo-grid-font-size, 12px);
+  --rg-theme-header-height: var(--revo-grid-header-height, 30px);
+  --rg-theme-header-font-size: var(--revo-grid-header-font-size, 12px);
+  --rg-theme-header-font-weight: var(--revo-grid-header-font-weight, normal);
+  --rg-theme-header-text-transform: var(
+    --revo-grid-header-text-transform,
+    uppercase
+  );
+  --rg-theme-header-text-align: var(--revo-grid-header-text-align, center);
+  --rg-theme-cell-text-align: var(--revo-grid-cell-text-align, center);
+  --rg-theme-header-padding: var(--revo-grid-header-padding, 0);
+  --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0);
+  border: 1px solid var(--rg-theme-header-border);
+  font-size: var(--rg-theme-font-size);
+}
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-header,
 revo-grid:not([theme]) .rowHeaders revogr-header {
-  box-shadow: -1px 0 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-header,
+revo-grid:is([theme=default], [theme=dark]) revogr-header,
 revo-grid:not([theme]) revogr-header {
-  text-align: center;
-  line-height: 30px;
-  background-color: var(--revo-grid-header-bg);
+  text-align: var(--rg-theme-header-text-align);
+  line-height: var(--rg-theme-header-height);
+  background-color: var(--rg-theme-header-bg);
 }
-revo-grid[theme=default] revogr-header .group-rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow,
 revo-grid:not([theme]) revogr-header .group-rgRow {
   box-shadow: none;
 }
-revo-grid[theme=default] revogr-header .group-rgRow .rgHeaderCell,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow .rgHeaderCell,
 revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell {
-  box-shadow: -1px 0 0 0 var(--revo-grid-header-border), -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: -1px 0 0 0 var(--rg-theme-header-border), -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-header .header-rgRow,
-revo-grid[theme=default] revogr-header .group-rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .header-rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .group-rgRow,
 revo-grid:not([theme]) revogr-header .header-rgRow,
 revo-grid:not([theme]) revogr-header .group-rgRow {
-  text-transform: uppercase;
-  font-size: 12px;
-  color: var(--revo-grid-header-color);
+  text-transform: var(--rg-theme-header-text-transform);
+  font-size: var(--rg-theme-header-font-size);
+  font-weight: var(--rg-theme-header-font-weight);
+  color: var(--rg-theme-header-color);
 }
-revo-grid[theme=default] revogr-header .header-rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .header-rgRow,
 revo-grid:not([theme]) revogr-header .header-rgRow {
-  height: 30px;
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  height: var(--rg-theme-header-height);
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-header .rgHeaderCell,
+revo-grid:is([theme=default], [theme=dark]) revogr-header .rgHeaderCell,
 revo-grid:not([theme]) revogr-header .rgHeaderCell {
-  box-shadow: -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] .rowHeaders,
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders,
 revo-grid:not([theme]) .rowHeaders {
-  background-color: var(--revo-grid-header-bg);
+  background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[theme=default] .rowHeaders revogr-data .rgCell,
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell,
 revo-grid:not([theme]) .rowHeaders revogr-data .rgCell {
-  color: var(--revo-grid-header-color);
+  color: var(--rg-theme-row-headers-color);
 }
-revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:first-child,
 revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),
 revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:last-child,
 revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
-  border-right: 1px solid var(--revo-grid-header-border);
+  border-right: 1px solid var(--rg-theme-header-border);
 }
-revo-grid[theme=default] .rowHeaders revogr-data revogr-header,
+revo-grid:is([theme=default], [theme=dark]) .rowHeaders revogr-data revogr-header,
 revo-grid:not([theme]) .rowHeaders revogr-data revogr-header {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,
 revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,
 revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell {
-  box-shadow: 0 1px 0 0 var(--revo-grid-header-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,
-revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinEnd,
+revo-grid:is([theme=default], [theme=dark]) revogr-viewport-scroll.colPinEnd revogr-header,
 revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,
 revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header {
-  box-shadow: 1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:is([theme=default], [theme=dark]) .footer-wrapper revogr-data .rgRow:first-child .rgCell,
 revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell {
-  box-shadow: 0 1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset, 0 -1px 0 0 var(--revo-grid-cell-border) inset;
+  box-shadow: 0 1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset, 0 -1px 0 0 var(--rg-theme-cell-border) inset;
 }
-revo-grid[theme=default] revogr-data,
+revo-grid:is([theme=default], [theme=dark]) revogr-data,
 revo-grid:not([theme]) revogr-data {
-  text-align: center;
+  text-align: var(--rg-theme-cell-text-align);
 }
-revo-grid[theme=default] revogr-data .revo-draggable,
+revo-grid:is([theme=default], [theme=dark]) revogr-data .revo-draggable,
 revo-grid:not([theme]) revogr-data .revo-draggable {
   float: left;
 }
-revo-grid[theme=default] revogr-data .rgRow,
+revo-grid:is([theme=default], [theme=dark]) revogr-data .rgRow,
 revo-grid:not([theme]) revogr-data .rgRow {
-  line-height: 27px;
+  line-height: var(--rg-theme-row-size, 27px);
 }
-revo-grid[theme=default] revogr-data .rgCell,
+revo-grid:is([theme=default], [theme=dark]) revogr-data .rgCell,
 revo-grid:not([theme]) revogr-data .rgCell {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset;
+  padding: var(--rg-theme-cell-padding);
+  box-shadow: 0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset;
 }
 
-revo-grid[theme=material] {
-  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-revo-grid[theme=material] revogr-header {
-  line-height: 50px;
-  font-weight: 600;
-  text-align: left;
-}
-revo-grid[theme=material] revogr-header .rgHeaderCell {
-  padding: 0 15px;
+/*
+ * Material built-ins and standalone custom themes share the common tokenized
+ * structure. A custom theme remains identified only by its own `theme` value.
+ */
+revo-grid:is([theme=material], [theme=darkMaterial]),
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) {
+  --rg-theme-font-family: var(
+    --revo-grid-font-family,
+    Nunito,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --rg-theme-header-height: var(--revo-grid-header-height, 50px);
+  --rg-theme-header-font-size: var(
+    --revo-grid-header-font-size,
+    var(--rg-theme-font-size)
+  );
+  --rg-theme-header-font-weight: var(--revo-grid-header-font-weight, 600);
+  --rg-theme-header-text-transform: var(
+    --revo-grid-header-text-transform,
+    none
+  );
+  --rg-theme-header-text-align: var(--revo-grid-header-text-align, left);
+  --rg-theme-cell-text-align: var(--revo-grid-cell-text-align, left);
+  --rg-theme-header-padding: var(--revo-grid-header-padding, 0 15px);
+  --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0 15px);
+  font-family: var(--rg-theme-font-family);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header {
+  color: var(--rg-theme-header-color);
+  background-color: var(--rg-theme-header-bg);
+  line-height: var(--rg-theme-header-height);
+  font-size: var(--rg-theme-header-font-size);
+  font-weight: var(--rg-theme-header-font-weight);
+  text-transform: var(--rg-theme-header-text-transform);
+  text-align: var(--rg-theme-header-text-align);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header .rgHeaderCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header .rgHeaderCell {
+  padding: var(--rg-theme-header-padding);
   text-overflow: ellipsis;
 }
-revo-grid[theme=material] revogr-header .header-rgRow {
-  height: 50px;
-}
-revo-grid[theme=material] revogr-data {
-  text-align: left;
-}
-revo-grid[theme=material] revogr-data .rgRow {
-  line-height: 42px;
-}
-revo-grid[theme=material] revogr-data .rgCell {
-  padding: 0 15px;
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-header .header-rgRow,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-header .header-rgRow {
+  height: var(--rg-theme-header-height);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) .rowHeaders,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) .rowHeaders {
+  color: var(--rg-theme-row-headers-color);
+  background-color: var(--rg-theme-row-headers-bg);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) .rowHeaders revogr-data .rgCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) .rowHeaders revogr-data .rgCell {
+  color: var(--rg-theme-row-headers-color);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data {
+  text-align: var(--rg-theme-cell-text-align);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data .rgRow,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data .rgRow {
+  line-height: var(--rg-theme-row-size, 42px);
+}
+revo-grid:is([theme=material], [theme=darkMaterial]) revogr-data .rgCell,
+revo-grid[theme]:not([theme=default],
+[theme=dark],
+[theme=compact],
+[theme=darkCompact]) revogr-data .rgCell {
+  padding: var(--rg-theme-cell-padding);
+  box-shadow: -1px 0 0 0 var(--rg-theme-cell-vertical-border) inset;
 }
 
-revo-grid[theme=darkMaterial] {
-  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-revo-grid[theme=darkMaterial] revogr-header {
-  line-height: 50px;
-  font-weight: 600;
-  text-align: left;
-}
-revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell {
-  padding: 0 15px;
+revo-grid:is([theme=compact], [theme=darkCompact]) {
+  --rg-theme-font-family: var(
+    --revo-grid-font-family,
+    Nunito,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --rg-theme-header-height: var(--revo-grid-header-height, 45px);
+  --rg-theme-header-font-size: var(
+    --revo-grid-header-font-size,
+    var(--rg-theme-font-size)
+  );
+  --rg-theme-header-font-weight: var(--revo-grid-header-font-weight, 600);
+  --rg-theme-header-text-transform: var(
+    --revo-grid-header-text-transform,
+    none
+  );
+  --rg-theme-header-text-align: var(--revo-grid-header-text-align, left);
+  --rg-theme-cell-text-align: var(--revo-grid-cell-text-align, left);
+  --rg-theme-header-padding: var(--revo-grid-header-padding, 0 15px);
+  --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0 15px);
+  font-family: var(--rg-theme-font-family);
+}
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header {
+  color: var(--rg-theme-header-color);
+  background-color: var(--rg-theme-header-bg);
+  line-height: var(--rg-theme-header-height);
+  font-size: var(--rg-theme-header-font-size);
+  font-weight: var(--rg-theme-header-font-weight);
+  text-transform: var(--rg-theme-header-text-transform);
+  text-align: var(--rg-theme-header-text-align);
+}
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header .rgHeaderCell {
+  padding: var(--rg-theme-header-padding);
   text-overflow: ellipsis;
 }
-revo-grid[theme=darkMaterial] revogr-header .header-rgRow {
-  height: 50px;
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header .header-rgRow {
+  height: var(--rg-theme-header-height);
 }
-revo-grid[theme=darkMaterial] revogr-data {
-  text-align: left;
+revo-grid:is([theme=compact], [theme=darkCompact]) .rowHeaders {
+  color: var(--rg-theme-row-headers-color);
+  background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[theme=darkMaterial] revogr-data .rgRow {
-  line-height: 42px;
+revo-grid:is([theme=compact], [theme=darkCompact]) .rowHeaders revogr-data .rgCell {
+  color: var(--rg-theme-row-headers-color);
 }
-revo-grid[theme=darkMaterial] revogr-data .rgCell {
-  padding: 0 15px;
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data {
+  text-align: var(--rg-theme-cell-text-align);
 }
-
-revo-grid[theme=darkCompact] {
-  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-revo-grid[theme=darkCompact] revogr-header {
-  line-height: 45px;
-  font-weight: 600;
-  text-align: left;
-}
-revo-grid[theme=darkCompact] revogr-header .rgHeaderCell {
-  padding: 0 15px;
-  text-overflow: ellipsis;
-}
-revo-grid[theme=darkCompact] revogr-header .header-rgRow {
-  height: 45px;
-}
-revo-grid[theme=darkCompact] revogr-data {
-  text-align: left;
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data .rgRow {
+  line-height: var(--rg-theme-row-size, 32px);
 }
-revo-grid[theme=darkCompact] revogr-data .rgRow {
-  line-height: 32px;
+revo-grid:is([theme=compact], [theme=darkCompact]) revogr-data .rgCell {
+  padding: var(--rg-theme-cell-padding);
+  box-shadow: -1px 0 0 0 var(--rg-theme-cell-vertical-border) inset;
 }
-revo-grid[theme=darkCompact] revogr-data .rgCell {
-  padding: 0 15px;
-}
-
-revo-grid[theme=compact] {
-  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-revo-grid[theme=compact] revogr-header {
-  line-height: 45px;
-  font-weight: 600;
-  text-align: left;
-}
-revo-grid[theme=compact] revogr-header .rgHeaderCell {
-  padding: 0 15px;
-  text-overflow: ellipsis;
-}
-revo-grid[theme=compact] revogr-header .header-rgRow {
-  height: 45px;
-}
-revo-grid[theme=compact] revogr-data {
-  text-align: left;
-}
-revo-grid[theme=compact] revogr-data .rgRow {
-  line-height: 32px;
-}
-revo-grid[theme=compact] revogr-data .rgCell {
-  padding: 0 15px;
-}
-revo-grid[theme=compact] revo-dropdown .rv-dr-root {
+revo-grid:is([theme=compact], [theme=darkCompact]) revo-dropdown .rv-dr-root {
   padding: 0px 9px;
 }
 
@@ -245,11 +336,11 @@ revo-grid[dir=rtl] .draggable .revo-alt-icon {
   left: auto;
 }
 revo-grid[dir=rtl] .focused-cell {
-  border-right: 2px solid var(--revo-grid-primary);
+  border-right: 2px solid var(--rg-theme-primary);
   border-left: none;
 }
 revo-grid[dir=rtl] .selection-range {
-  border-right: 2px solid var(--revo-grid-primary);
+  border-right: 2px solid var(--rg-theme-primary);
   border-left: none;
 }
 revo-grid[dir=rtl] .resize-handle {
@@ -281,41 +372,33 @@ revo-grid[dir=rtl] revogr-edit {
 revo-grid[dir=rtl] .rgHeaderCell {
   direction: rtl;
 }
-revo-grid[dir=rtl][theme=material] revogr-header, revo-grid[dir=rtl][theme=darkMaterial] revogr-header {
+revo-grid[dir=rtl] revogr-header,
+revo-grid[dir=rtl] revogr-data {
   text-align: right;
 }
-revo-grid[dir=rtl][theme=material] revogr-data, revo-grid[dir=rtl][theme=darkMaterial] revogr-data {
-  text-align: right;
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders, revo-grid[dir=rtl]:not([theme]) .rowHeaders {
+  background-color: var(--rg-theme-row-headers-bg);
 }
-revo-grid[dir=rtl][theme=default] .rowHeaders, revo-grid[dir=rtl]:not([theme]) .rowHeaders {
-  background-color: var(--revo-grid-header-bg);
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell {
+  color: var(--rg-theme-row-headers-color);
 }
-revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell {
-  color: var(--revo-grid-header-color);
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:first-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:first-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child), revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset, 1px 0 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:not(:first-child), revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset;
-}
-revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:last-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
-  border-left: 1px solid var(--revo-grid-header-border);
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data .rgCell:last-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
+  border-left: 1px solid var(--rg-theme-header-border);
   border-right: none;
 }
-revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data revogr-header, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
-}
-revo-grid[dir=rtl][theme=default] revogr-header, revo-grid[dir=rtl]:not([theme]) revogr-header {
-  text-align: right;
-}
-revo-grid[dir=rtl][theme=default] revogr-data, revo-grid[dir=rtl]:not([theme]) revogr-data {
-  text-align: right;
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) .rowHeaders revogr-data revogr-header, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header {
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
-revo-grid[dir=rtl][theme=compact] revogr-header, revo-grid[dir=rtl][theme=darkCompact] revogr-header {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) revogr-header, revo-grid[dir=rtl]:not([theme]) revogr-header {
   text-align: right;
 }
-revo-grid[dir=rtl][theme=compact] revogr-data, revo-grid[dir=rtl][theme=darkCompact] revogr-data {
+revo-grid[dir=rtl]:is([theme=default], [theme=dark]) revogr-data, revo-grid[dir=rtl]:not([theme]) revogr-data {
   text-align: right;
 }
 
@@ -355,115 +438,361 @@ revo-grid[dir=rtl][theme=compact] revogr-data, revo-grid[dir=rtl][theme=darkComp
   text-overflow: ellipsis;
 }
 
+/* Built-in Material and Compact themes historically inherited their surfaces. */
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) {
+  background-color: transparent;
+}
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) revogr-header,
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) .rowHeaders {
+  background-color: transparent;
+  color: inherit;
+}
+revo-grid[theme]:is([theme=compact],
+[theme=darkCompact],
+[theme=material],
+[theme=darkMaterial]) .rowHeaders revogr-data .rgCell {
+  color: inherit;
+}
+
 revo-grid {
-  /* Base theme variables */
-  --revo-grid-primary: #266ae8;
-  --revo-grid-primary-transparent: rgba(38, 106, 232, 0.9);
-  --revo-grid-background: #fff;
-  --revo-grid-foreground: black;
-  --revo-grid-divider: gray;
-  --revo-grid-shadow: rgba(0, 0, 0, 0.15);
-  --revo-grid-text: black;
-  --revo-grid-border: rgba(0, 0, 0, 0.2);
-  /* Filter panel variables */
-  --revo-grid-filter-panel-bg: #fff;
-  --revo-grid-filter-panel-border: #d9d9d9;
-  --revo-grid-filter-panel-shadow: rgba(0, 0, 0, 0.15);
-  --revo-grid-filter-panel-input-bg: #eaeaeb;
-  --revo-grid-filter-panel-divider: #d9d9d9;
-  --revo-grid-filter-panel-select-border: transparent;
-  --revo-grid-filter-panel-select-border-hover: transparent;
-  /* Grid specific variables */
-  --revo-grid-header-bg: #f8f9fa;
-  --revo-grid-header-color: #000;
-  --revo-grid-header-border: #cecece;
-  --revo-grid-cell-border: #e2e3e3;
-  --revo-grid-focused-bg: rgba(233, 234, 237, 0.5);
-  --revo-grid-row-hover: #f1f1f1;
-  --revo-grid-row-headers-bg: #f7faff;
-  --revo-grid-row-headers-color: #757a82;
-  --revo-grid-cell-disabled-bg: rgba(0, 0, 0, 0.07);
-  /* Dark theme overrides - applied when theme contains 'dark' */
-  direction: ltr !important;
-  /*
-  * Grid required to have a flex property to be able to stretch
-  */
-  display: flex !important;
-  height: 100%;
-  /**
-  * In some cases the min-height is not enough for safari
-  * so setting up the grid  height works
-  */
-  min-height: 300px;
-  font-family: Helvetica, Arial, Sans-Serif, serif;
-  font-size: 14px;
-  position: relative;
-  color: var(--revo-grid-text);
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-             supported by Chrome, Edge, Opera and Firefox */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  /* Internal defaults preserve inherited legacy public values. */
+  --rg-theme-primary: var(--revo-grid-primary, #266ae8);
+  --rg-theme-primary-transparent: var(
+    --revo-grid-primary-transparent,
+    rgba(38, 106, 232, 0.9)
+  );
+  --rg-theme-background: var(--revo-grid-background, #fff);
+  --rg-theme-foreground: var(--revo-grid-foreground, black);
+  --rg-theme-divider: var(--revo-grid-divider, gray);
+  --rg-theme-shadow: var(--revo-grid-shadow, rgba(0, 0, 0, 0.15));
+  --rg-theme-text: var(--revo-grid-text, black);
+  --rg-theme-border: var(--revo-grid-border, rgba(0, 0, 0, 0.2));
+  --rg-theme-header-bg: var(--revo-grid-header-bg, #f8f9fa);
+  --rg-theme-header-color: var(--revo-grid-header-color, #000);
+  --rg-theme-header-border: var(--revo-grid-header-border, #cecece);
+  --rg-theme-header-focused-bg: var(
+    --revo-grid-header-focused-bg,
+    var(--rg-theme-focused-bg)
+  );
+  --rg-theme-header-hover-bg: var(
+    --revo-grid-header-hover-bg,
+    var(--rg-theme-row-hover)
+  );
+  --rg-theme-cell-border: var(--revo-grid-cell-border, #e2e3e3);
+  --rg-theme-cell-vertical-border: var(
+    --revo-grid-cell-vertical-border,
+    transparent
+  );
+  --rg-theme-focused-bg: var(--revo-grid-focused-bg, rgba(233, 234, 237, 0.5));
+  --rg-theme-row-hover: var(--revo-grid-row-hover, #f1f1f1);
+  --rg-theme-row-headers-bg: var(
+    --revo-grid-row-headers-bg,
+    var(--rg-theme-header-bg)
+  );
+  --rg-theme-row-headers-color: var(
+    --revo-grid-row-headers-color,
+    var(--rg-theme-header-color)
+  );
+  --rg-theme-cell-disabled-bg: var(
+    --revo-grid-cell-disabled-bg,
+    rgba(0, 0, 0, 0.07)
+  );
+  --rg-theme-filter-panel-bg: var(--revo-grid-filter-panel-bg, #fff);
+  --rg-theme-filter-panel-border: var(--revo-grid-filter-panel-border, #d9d9d9);
+  --rg-theme-filter-panel-shadow: var(
+    --revo-grid-filter-panel-shadow,
+    rgba(0, 0, 0, 0.15)
+  );
+  --rg-theme-filter-panel-input-bg: var(
+    --revo-grid-filter-panel-input-bg,
+    #eaeaeb
+  );
+  --rg-theme-filter-panel-divider: var(
+    --revo-grid-filter-panel-divider,
+    #d9d9d9
+  );
+  --rg-theme-filter-panel-select-border: var(
+    --revo-grid-filter-panel-select-border,
+    transparent
+  );
+  --rg-theme-filter-panel-select-border-hover: var(
+    --revo-grid-filter-panel-select-border-hover,
+    transparent
+  );
+  --rg-theme-filter-panel-reorder-accent: var(
+    --revo-grid-filter-panel-reorder-accent,
+    #007cb2
+  );
+  --rg-theme-filter-panel-reorder-color: var(
+    --revo-grid-filter-panel-reorder-color,
+    #6b7280
+  );
+  --rg-theme-filter-panel-text: var(
+    --revo-grid-filter-panel-text,
+    var(--rg-theme-text)
+  );
+  --rg-theme-filter-panel-muted-text: var(
+    --revo-grid-filter-panel-muted-text,
+    gray
+  );
+  --rg-theme-filter-panel-focus-ring: var(
+    --revo-grid-filter-panel-focus-ring,
+    0 0 1px 3px rgba(59, 153, 252, 0.7)
+  );
+  --rg-theme-filter-panel-icon: var(--revo-grid-filter-panel-icon, gray);
+  --rg-theme-filter-panel-icon-active: var(
+    --revo-grid-filter-panel-icon-active,
+    #10224a
+  );
+  --rg-theme-font-family: var(
+    --revo-grid-font-family,
+    Helvetica,
+    Arial,
+    Sans-Serif,
+    serif
+  );
+  --rg-theme-font-size: var(--revo-grid-font-size, 14px);
+  --rg-theme-header-height: var(--revo-grid-header-height, 30px);
+  --rg-theme-header-font-size: var(--revo-grid-header-font-size, 12px);
+  --rg-theme-header-font-weight: var(--revo-grid-header-font-weight, normal);
+  --rg-theme-header-text-transform: var(
+    --revo-grid-header-text-transform,
+    uppercase
+  );
+  --rg-theme-header-text-align: var(--revo-grid-header-text-align, center);
+  --rg-theme-cell-text-align: var(--revo-grid-cell-text-align, center);
+  --rg-theme-header-padding: var(--revo-grid-header-padding, 0);
+  --rg-theme-cell-padding: var(--revo-grid-cell-padding, 0);
+  --rg-theme-selection-border: var(--revo-grid-selection-border, #0d63e8);
+  --rg-theme-selection-bg: var(--revo-grid-selection-bg, transparent);
+  --rg-theme-autofill-handle-bg: var(
+    --revo-grid-autofill-handle-bg,
+    var(--rg-theme-selection-border)
+  );
+  --rg-theme-autofill-handle-border: var(
+    --revo-grid-autofill-handle-border,
+    white
+  );
+  --rg-theme-range-handle-bg: var(
+    --revo-grid-range-handle-bg,
+    rgba(0, 0, 0, 0.2)
+  );
+  --rg-theme-temporary-range-border: var(
+    --revo-grid-temporary-range-border,
+    rgb(255, 94, 0)
+  );
+  --rg-theme-temporary-selection-border: var(
+    --revo-grid-temporary-selection-border,
+    gray
+  );
+  --rg-theme-header-resize-hover: var(
+    --revo-grid-header-resize-hover,
+    deepskyblue
+  );
+  --rg-theme-button-text: var(--revo-grid-button-text, #fff);
+  --rg-theme-button-bg: var(--revo-grid-button-bg, #4545ff);
+  --rg-theme-button-success-bg: var(--revo-grid-button-success-bg, #009037);
+  --rg-theme-button-danger-bg: var(--revo-grid-button-danger-bg, #e0662e);
+  --rg-theme-button-outline-border: var(
+    --revo-grid-button-outline-border,
+    #dbdbdb
+  );
+  --rg-theme-button-outline-text: var(--revo-grid-button-outline-text, #000);
+}
+revo-grid[data-rg-theme-scheme=dark] {
+  color-scheme: dark;
+  --rg-theme-background: var(--revo-grid-background, #212529);
+  --rg-theme-foreground: var(--revo-grid-foreground, #fff);
+  --rg-theme-text: var(--revo-grid-text, rgba(255, 255, 255, 0.9));
+  --rg-theme-divider: var(--revo-grid-divider, #505050);
+  --rg-theme-border: var(
+    --revo-grid-border,
+    rgba(255, 255, 255, 0.2)
+  );
+  --rg-theme-filter-panel-bg: var(--revo-grid-filter-panel-bg, #212529);
+  --rg-theme-filter-panel-border: var(
+    --revo-grid-filter-panel-border,
+    #505050
+  );
+  --rg-theme-filter-panel-input-bg: var(
+    --revo-grid-filter-panel-input-bg,
+    #343a40
+  );
+  --rg-theme-filter-panel-divider: var(
+    --revo-grid-filter-panel-divider,
+    #505050
+  );
+  --rg-theme-filter-panel-icon-active: var(
+    --revo-grid-filter-panel-icon-active,
+    #fff
+  );
+  --rg-theme-header-bg: var(--revo-grid-header-bg, #343a40);
+  --rg-theme-header-color: var(--revo-grid-header-color, #fff);
+  --rg-theme-header-border: var(--revo-grid-header-border, #505050);
+  --rg-theme-cell-border: var(--revo-grid-cell-border, #424242);
+  --rg-theme-focused-bg: var(
+    --revo-grid-focused-bg,
+    rgba(52, 58, 64, 0.5)
+  );
+  --rg-theme-row-hover: var(
+    --revo-grid-row-hover,
+    rgba(80, 80, 80, 0.5)
+  );
+  --rg-theme-row-headers-bg: var(
+    --revo-grid-row-headers-bg,
+    rgba(52, 58, 64, 0.8)
+  );
+  --rg-theme-row-headers-color: var(
+    --revo-grid-row-headers-color,
+    rgba(255, 255, 255, 0.8)
+  );
+  --rg-theme-cell-disabled-bg: var(
+    --revo-grid-cell-disabled-bg,
+    rgba(255, 255, 255, 0.07)
+  );
+  --rg-theme-button-outline-border: var(
+    --revo-grid-button-outline-border,
+    #404040
+  );
+  --rg-theme-button-outline-text: var(
+    --revo-grid-button-outline-text,
+    #d8d8d8
+  );
+}
+revo-grid[data-rg-theme-scheme=light] {
+  color-scheme: light;
 }
-revo-grid[theme*=dark] {
-  --revo-grid-background: #212529;
-  --revo-grid-foreground: #fff;
-  --revo-grid-text: rgba(255, 255, 255, 0.9);
-  --revo-grid-divider: #505050;
-  --revo-grid-border: rgba(255, 255, 255, 0.2);
-  /* Filter panel variables */
-  --revo-grid-filter-panel-bg: #212529;
-  --revo-grid-filter-panel-border: #505050;
-  --revo-grid-filter-panel-input-bg: #343a40;
-  --revo-grid-filter-panel-divider: #505050;
-  --revo-grid-header-bg: #343a40;
-  --revo-grid-header-color: #fff;
-  --revo-grid-header-border: #505050;
-  --revo-grid-cell-border: #424242;
-  --revo-grid-focused-bg: rgba(52, 58, 64, 0.5);
-  --revo-grid-row-hover: rgba(80, 80, 80, 0.5);
-  --revo-grid-row-headers-bg: rgba(52, 58, 64, 0.8);
-  --revo-grid-row-headers-color: rgba(255, 255, 255, 0.8);
-  --revo-grid-cell-disabled-bg: rgba(255, 255, 255, 0.07);
+revo-grid {
+  /* Keep existing descendant integrations on the legacy public contract. */
+}
+revo-grid > * {
+  --revo-grid-primary: var(--rg-theme-primary);
+  --revo-grid-primary-transparent: var(--rg-theme-primary-transparent);
+  --revo-grid-background: var(--rg-theme-background);
+  --revo-grid-foreground: var(--rg-theme-foreground);
+  --revo-grid-divider: var(--rg-theme-divider);
+  --revo-grid-shadow: var(--rg-theme-shadow);
+  --revo-grid-text: var(--rg-theme-text);
+  --revo-grid-border: var(--rg-theme-border);
+  --revo-grid-header-bg: var(--rg-theme-header-bg);
+  --revo-grid-header-color: var(--rg-theme-header-color);
+  --revo-grid-header-border: var(--rg-theme-header-border);
+  --revo-grid-header-focused-bg: var(--rg-theme-header-focused-bg);
+  --revo-grid-header-hover-bg: var(--rg-theme-header-hover-bg);
+  --revo-grid-cell-border: var(--rg-theme-cell-border);
+  --revo-grid-cell-vertical-border: var(--rg-theme-cell-vertical-border);
+  --revo-grid-focused-bg: var(--rg-theme-focused-bg);
+  --revo-grid-row-hover: var(--rg-theme-row-hover);
+  --revo-grid-row-headers-bg: var(--rg-theme-row-headers-bg);
+  --revo-grid-row-headers-color: var(--rg-theme-row-headers-color);
+  --revo-grid-cell-disabled-bg: var(--rg-theme-cell-disabled-bg);
+  --revo-grid-filter-panel-bg: var(--rg-theme-filter-panel-bg);
+  --revo-grid-filter-panel-border: var(--rg-theme-filter-panel-border);
+  --revo-grid-filter-panel-shadow: var(--rg-theme-filter-panel-shadow);
+  --revo-grid-filter-panel-input-bg: var(--rg-theme-filter-panel-input-bg);
+  --revo-grid-filter-panel-divider: var(--rg-theme-filter-panel-divider);
+  --revo-grid-filter-panel-select-border: var(--rg-theme-filter-panel-select-border);
+  --revo-grid-filter-panel-select-border-hover: var(--rg-theme-filter-panel-select-border-hover);
+  --revo-grid-filter-panel-reorder-accent: var(--rg-theme-filter-panel-reorder-accent);
+  --revo-grid-filter-panel-reorder-color: var(--rg-theme-filter-panel-reorder-color);
+  --revo-grid-filter-panel-text: var(--rg-theme-filter-panel-text);
+  --revo-grid-filter-panel-muted-text: var(--rg-theme-filter-panel-muted-text);
+  --revo-grid-filter-panel-focus-ring: var(--rg-theme-filter-panel-focus-ring);
+  --revo-grid-filter-panel-icon: var(--rg-theme-filter-panel-icon);
+  --revo-grid-filter-panel-icon-active: var(--rg-theme-filter-panel-icon-active);
+  --revo-grid-font-family: var(--rg-theme-font-family);
+  --revo-grid-font-size: var(--rg-theme-font-size);
+  --revo-grid-header-height: var(--rg-theme-header-height);
+  --revo-grid-header-font-size: var(--rg-theme-header-font-size);
+  --revo-grid-header-font-weight: var(--rg-theme-header-font-weight);
+  --revo-grid-header-text-transform: var(--rg-theme-header-text-transform);
+  --revo-grid-header-text-align: var(--rg-theme-header-text-align);
+  --revo-grid-cell-text-align: var(--rg-theme-cell-text-align);
+  --revo-grid-header-padding: var(--rg-theme-header-padding);
+  --revo-grid-cell-padding: var(--rg-theme-cell-padding);
+  --revo-grid-selection-border: var(--rg-theme-selection-border);
+  --revo-grid-selection-bg: var(--rg-theme-selection-bg);
+  --revo-grid-autofill-handle-bg: var(--rg-theme-autofill-handle-bg);
+  --revo-grid-autofill-handle-border: var(--rg-theme-autofill-handle-border);
+  --revo-grid-range-handle-bg: var(--rg-theme-range-handle-bg);
+  --revo-grid-temporary-range-border: var(--rg-theme-temporary-range-border);
+  --revo-grid-temporary-selection-border: var(--rg-theme-temporary-selection-border);
+  --revo-grid-header-resize-hover: var(--rg-theme-header-resize-hover);
+  --revo-grid-button-text: var(--rg-theme-button-text);
+  --revo-grid-button-bg: var(--rg-theme-button-bg);
+  --revo-grid-button-success-bg: var(--rg-theme-button-success-bg);
+  --revo-grid-button-danger-bg: var(--rg-theme-button-danger-bg);
+  --revo-grid-button-outline-border: var(--rg-theme-button-outline-border);
+  --revo-grid-button-outline-text: var(--rg-theme-button-outline-text);
+}
+revo-grid {
+  direction: ltr !important;
 }
 revo-grid revogr-header .header-rgRow.group {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
 revo-grid revogr-header .header-rgRow:not(.group) {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset;
 }
 revo-grid revogr-header .rgHeaderCell.sortable:hover {
-  background-color: var(--revo-grid-row-hover);
+  background-color: var(--rg-theme-header-hover-bg);
 }
 revo-grid revogr-header .rgHeaderCell.focused-cell {
-  background: var(--revo-grid-focused-bg);
+  background: var(--rg-theme-header-focused-bg);
 }
 revo-grid .footer-wrapper revogr-data {
-  box-shadow: 0 -1px 0 var(--revo-grid-cell-border);
+  box-shadow: 0 -1px 0 var(--rg-theme-cell-border);
 }
 revo-grid revogr-viewport-scroll.colPinStart {
-  box-shadow: -1px 0 0 var(--revo-grid-cell-border) inset;
+  box-shadow: -1px 0 0 var(--rg-theme-cell-border) inset;
 }
 revo-grid revogr-viewport-scroll.colPinEnd {
-  box-shadow: -1px 0 0 var(--revo-grid-cell-border);
+  box-shadow: -1px 0 0 var(--rg-theme-cell-border);
 }
 revo-grid revogr-data .rgRow {
-  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset;
+  box-shadow: 0 -1px 0 0 var(--rg-theme-cell-border) inset;
 }
 revo-grid revogr-data .rgRow.focused-rgRow {
-  background-color: var(--revo-grid-focused-bg);
+  background-color: var(--rg-theme-focused-bg);
 }
 revo-grid revogr-data .rgCell {
-  color: var(--revo-grid-text);
+  color: var(--rg-theme-text);
 }
 revo-grid revogr-data .rgCell.disabled {
-  background-color: var(--revo-grid-cell-disabled-bg);
+  background-color: var(--rg-theme-cell-disabled-bg);
+}
+revo-grid {
+  /*
+  * Grid required to have a flex property to be able to stretch
+  */
+  display: flex !important;
+  height: 100%;
+  /**
+  * In some cases the min-height is not enough for safari
+  * so setting up the grid  height works
+  */
+  min-height: 300px;
+  background-color: var(--rg-theme-background);
+  font-family: var(--rg-theme-font-family);
+  font-size: var(--rg-theme-font-size);
+  position: relative;
+  color: var(--rg-theme-text);
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+             supported by Chrome, Edge, Opera and Firefox */
 }
 revo-grid .attribution {
   position: absolute;
@@ -473,8 +802,8 @@ revo-grid .attribution {
   z-index: 1000;
   width: 0;
   height: 0;
-  border-left: 4px solid var(--revo-grid-primary-transparent);
-  border-bottom: 4px solid var(--revo-grid-primary-transparent);
+  border-left: 4px solid var(--rg-theme-primary-transparent);
+  border-bottom: 4px solid var(--rg-theme-primary-transparent);
   border-top: 4px solid transparent;
   border-right: 4px solid transparent;
   cursor: pointer;
@@ -483,13 +812,13 @@ revo-grid .attribution .value {
   position: absolute;
   bottom: 0;
   left: 0;
-  background-color: var(--revo-grid-background);
+  background-color: var(--rg-theme-background);
   padding: 4px;
   border-radius: 4px;
-  box-shadow: 0 1px 10px var(--revo-grid-border);
+  box-shadow: 0 1px 10px var(--rg-theme-border);
   white-space: nowrap;
   text-decoration: none;
-  color: var(--revo-grid-text);
+  color: var(--rg-theme-text);
   letter-spacing: 0.3px;
   font-size: 11px;
   opacity: 0;
@@ -501,7 +830,8 @@ revo-grid .attribution:hover .value {
   width: 63px;
   opacity: 1;
 }
-revo-grid.column-draggable.column-drag-start:hover, revo-grid.column-draggable.column-drag-start *:hover {
+revo-grid.column-draggable.column-drag-start:hover,
+revo-grid.column-draggable.column-drag-start *:hover {
   cursor: grabbing;
 }
 revo-grid .footer-wrapper,
@@ -528,6 +858,12 @@ revo-grid .viewports {
   align-items: flex-start;
   flex-grow: 1;
 }
+revo-grid {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
 revo-grid .main-viewport {
   flex-grow: 1;
   height: 0;
@@ -539,13 +875,13 @@ revo-grid .draggable {
   position: fixed;
   height: 30px;
   line-height: 30px;
-  background: var(--revo-grid-background);
+  background: var(--rg-theme-background);
   border-radius: 3px;
   display: block;
   z-index: 100;
   margin-top: 5px;
   margin-right: -20px;
-  box-shadow: 0 4px 20px 0 var(--revo-grid-shadow);
+  box-shadow: 0 4px 20px 0 var(--rg-theme-shadow);
   padding-left: 20px;
   padding-right: 5px;
 }
@@ -553,7 +889,7 @@ revo-grid .draggable.hidden {
   display: none;
 }
 revo-grid .draggable .revo-alt-icon {
-  background-color: var(--revo-grid-foreground);
+  background-color: var(--rg-theme-foreground);
   position: absolute;
   left: 5px;
   top: 10px;
@@ -567,7 +903,7 @@ revo-grid .drag-position {
   right: 0;
   height: 1px;
   z-index: 2;
-  background: var(--revo-grid-divider);
+  background: var(--rg-theme-divider);
   pointer-events: none;
 }
 revo-grid .drag-position-y {
@@ -577,7 +913,7 @@ revo-grid .drag-position-y {
   bottom: 0;
   width: 1px;
   z-index: 2;
-  background: var(--revo-grid-divider);
+  background: var(--rg-theme-divider);
   pointer-events: none;
 }
 revo-grid .drag-auto-scroll-y {