refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

core/src/components/virtual-scroll/virtual-scroll-interface.ts

@@ -0,0 +1,35 @@
+
+export const enum CellType {
+  Item,
+  Header,
+  Footer
+}
+
+export const enum NodeChange {
+  NoChange,
+  Position,
+  Cell,
+}
+
+export interface Cell {
+  i: number;
+  index: number;
+  value: any;
+  type: CellType;
+  height: number;
+  reads: number;
+  visible: boolean;
+}
+
+export interface VirtualNode {
+  cell: Cell;
+  top: number;
+  change: NodeChange;
+  d: boolean;
+  visible: boolean;
+}
+
+export type HeaderFn = (item: any, index: number, items: any[]) => string | null;
+export type ItemHeightFn = (item: any, index: number) => number;
+export type ItemRenderFn = (el: HTMLElement|null, cell: Cell, domIndex: number) => HTMLElement;
+export type DomRenderFn = (dom: VirtualNode[]) => void;