Use hard-coded values for IE11 / browsers that don't support variable…

…s - use the varible by default otherwise

src/core/environment/index.ts

@@ -6,14 +6,14 @@ import { Edge } from 'dash-table/derived/edges/type';
 const DASH_DEBUG = 'dash_debug';
 const DASH_LOG = 'dash_log';
 
-const DEFAULT_EDGE: Edge = '1px solid #d3d3d3';
-const ACTIVE_EDGE: Edge = '1px solid hotpink';
-
 interface ISearchParams {
     get: (key: string) => string | null;
 }
 
 export default class Environment {
+    private static readonly _supportsCssVariables = Boolean(window.CSS?.supports?.('.some-selector', 'var(--some-var)'));
+    private static readonly _activeEdge: Edge = Environment._supportsCssVariables ? '1px solid var(--accent)' : '1px solid hotpink';
+
     public static get searchParams(): ISearchParams {
         return (
             typeof URL !== 'undefined' &&
@@ -40,10 +40,14 @@ export default class Environment {
     }
 
     public static get defaultEdge(): Edge {
-        return DEFAULT_EDGE;
+        return '1px solid #d3d3d3';
     }
 
     public static get activeEdge(): Edge {
-        return ACTIVE_EDGE;
+        return Environment._activeEdge;
+    }
+
+    public static get supportsCssVariables(): boolean {
+        return Environment._supportsCssVariables;
     }
 }

src/dash-table/components/Table/Table.less

@@ -521,6 +521,7 @@
             --background-color-ellipses: rgb(253, 253, 253);
             --faded-text: rgb(250, 250, 250);
             --faded-text-header: rgb(180, 180, 180);
+            --selected-background: rgba(255, 65, 54, 0.2)
             --faded-dropdown: rgb(240, 240, 240);
             --muted: rgb(200, 200, 200);
 	    }

src/dash-table/derived/cell/wrapperStyles.ts

@@ -7,8 +7,11 @@ import { IConvertedStyle, getDataCellStyle, getDataOpCellStyle } from '../style'
 import { traverseMap2, shallowClone } from 'core/math/matrixZipMap';
 
 import isActiveCell from 'dash-table/derived/cell/isActive';
+import Environment from 'core/environment';
 
-const SELECTED_CELL_STYLE = { backgroundColor: 'rgba(255, 65, 54, 0.2)' };
+const SELECTED_CELL_STYLE = {
+    backgroundColor: Environment.supportsCssVariables ? 'var(--selected-background)' : 'rgba(255, 65, 54, 0.2)'
+};
 
 const partialGetter = (
     columns: Columns,