Merge branch 'enhancement/more-color-variables' into enhancement/more…

…-css-vars-and-remove-lerna

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .rts2_cache/
+.yarn/
 .idea/
 packages/*/dist/
 packages/facets-docs/pages/

.yarnrc.yml

@@ -0,0 +1,5 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"

README.md

@@ -34,16 +34,11 @@ $ npm install @uncharted.software/facets-plugins
 The documentation is not hosted anywhere at the moment but can be accessed by building the project and running the
 `facets-docs` package.
 
-It is recommended to install `lerna` globally:
-```shell script
-$ yarn global add lerna
-```
 
 Check out or download this repo, then, from the repo's root folder run the following commands:
 ```shell script
 $ yarn install
-$ lerna bootstrap
-$ lerna run build
+$ yarn build
 ```
 
 You can now run the documentation:
@@ -60,8 +55,7 @@ On your browser navigate to http://localhost:8090/
 Check out or download this repo, then, from the repo's root folder run the following commands:
 ```shell script
 $ yarn install
-$ lerna bootstrap
-$ lerna run build
+$ yarn build
 ```
 
 Start the `watch` script for the packages that you will be working on (usually `factes-core` and `facets-plugins`):

package.json

@@ -2,12 +2,11 @@
     "name": "root",
     "private": true,
     "scripts": {
-        "lint": "lerna run --stream lint",
-        "test": "lerna run --stream test",
-        "prePush": "npm-run-all prePush:**",
-        "prePush:lint": "yarn lint",
-        "prePush:test": "yarn test",
-        "bump": "lerna version --no-changelog --no-commit-hooks --no-git-tag-version --no-push"
+        "build": "yarn workspaces foreach run build",
+        "lint": "yarn workspaces foreach run lint",
+        "test": "yarn workspaces foreach run test",
+        "prePush": "yarn run lint && yarn run test",
+        "bump": "yarn version check --interactive && yarn version apply"
     },
     "devDependencies": {
         "@babel/core": "^7.11.1",
@@ -28,7 +27,6 @@
         "eslint": "^7.6.0",
         "globby": "^11.0.1",
         "husky": "^4.2.5",
-        "lerna": "^3.22.1",
         "live-server": "^1.2.1",
         "npm-run-all": "^4.1.5",
         "regenerator-runtime": "^0.13.7",

packages/facets-core/src/facet-bars-value/FacetBarsValue.css

@@ -94,15 +94,15 @@
 
 @keyframes facet-bars-value-loading-background {
     0% {
-        background-color: #F7F7F7;
+        background-color: var(--facet-bars-value-loading-background-stop-1, #F7F7F7);
     }
 
     50% {
-        background-color: #F3F3F3;
+        background-color: var(--facet-bars-value-loading-background-stop-2, #F3F3F3);
     }
 
     100% {
-        background-color: #F7F7F7;
+        background-color: var(--facet-bars-value-loading-background-stop-3, #F7F7F7);
     }
 }
 

packages/facets-core/src/facet-bars-value/FacetBarsValue.default.css

@@ -27,73 +27,73 @@
 :host(:not([theme])[facet-value-state="normal"]) .facet-bars-value-background,
 :host([theme="default"][facet-value-state="normal"]) .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background, #EAEBEC);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="normal"]) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="normal"]) .facet-bars-value-background
 {
-    background-color: #F7F7F7;
+    background-color: var(--facet-bars-value-background-contrast, #F7F7F7);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="normal"]):hover .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="normal"]):hover .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background, #EAEBEC);
 }
 
 :host(:not([theme])[facet-value-state="selected"]) .facet-bars-value-background,
 :host([theme="default"][facet-value-state="selected"]) .facet-bars-value-background
 {
-    background-color: #EBF1FC;
+    background-color: var(--facet-bars-value-background-selected, #EBF1FC);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="selected"]) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="selected"]) .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background-contrast-selected, #EAEBEC);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="selected"]:hover) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="selected"]:hover) .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background-contrast-selected-hover, #EAEBEC);
 }
 
 :host(:not([theme])[facet-value-state="unselected"]) .facet-bars-value-background,
 :host([theme="default"][facet-value-state="unselected"]) .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background-unselected, #EAEBEC);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="unselected"]) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="unselected"]) .facet-bars-value-background
 {
-    background-color: #F7F7F7;
+    background-color: var(--facet-bars-value-background-contrast-unselected, #F7F7F7);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="unselected"]:hover) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="unselected"]:hover) .facet-bars-value-background
 {
-    background-color: #EBF1FC;
+    background-color: var(--facet-bars-value-background-contrast-unselected-hover, #EBF1FC);
 }
 
 :host(:not([theme])[facet-value-state="muted"]) .facet-bars-value-background,
 :host([theme="default"][facet-value-state="muted"]) .facet-bars-value-background
 {
-    background-color: #EAEBEC;
+    background-color: var(--facet-bars-value-background-muted, #EAEBEC);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="muted"]) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="muted"]) .facet-bars-value-background
 {
-    background-color: #F7F7F7;
+    background-color: var(--facet-bars-value-background-contrast-muted, #F7F7F7);
 }
 
 :host(:not([theme])[contrast=true][facet-value-state="muted"]:hover) .facet-bars-value-background,
 :host([theme="default"][contrast=true][facet-value-state="muted"]:hover) .facet-bars-value-background
 {
-    background-color: #EBF1FC;
+    background-color: var(--facet-bars-value-background-contrast-muted-hover, #EBF1FC);
 }
 
 
@@ -258,13 +258,13 @@
 :host(:not([theme])[facet-value-state="loading"]) .facet-bars-value-background,
 :host([theme="default"][facet-value-state="loading"]) .facet-bars-value-background
 {
-    background-color: #F7F7F7;
+    background-color: var(--facet-bars-value-background-loading, #F7F7F7);
 }
 
 :host(:not([theme])[facet-value-state="loading"]) .facet-bars-value-bar-1,
 :host(:not([theme])[facet-value-state="loading"]) .facet-bars-value-bar-0,
 :host([theme="default"][facet-value-state="loading"]) .facet-bars-value-bar-1,
 :host([theme="default"][facet-value-state="loading"]) .facet-bars-value-bar-0
 {
-    background-color: #ECECEC;
+    background-color: var(--facet-bars-value-bar-1-background-loading, #ECECEC);
 }

packages/facets-core/src/facet-bars-value/FacetBarsValue.timeline.css

@@ -110,11 +110,11 @@
 
 :host([theme="timeline"][facet-value-state="loading"]) .facet-bars-value-background
 {
-    background-color: #F0F1F2;
+    background-color: var(--facet-bars-value-background-loading, #F0F1F2);
 }
 
 :host([theme="timeline"][facet-value-state="loading"]) .facet-bars-value-bar-1,
 :host([theme="timeline"][facet-value-state="loading"]) .facet-bars-value-bar-0
 {
-    background-color: #ECECEC;
+    background-color: var(--facet-bars-value-bar-background-loading, #ECECEC);
 }

packages/facets-core/src/facet-bars/FacetBars.css

@@ -35,5 +35,5 @@
 }
 
 :host(:hover) .facet-blueprint-left {
-    border-left: 4px solid var(--facet-bars-tick-color, #255DCC);
+    border-left: 4px solid var(--facet-bars-blueprint-border, #255DCC);
 }

packages/facets-core/src/facet-container/FacetContainer.css

@@ -23,13 +23,13 @@
  */
 
 .facet-blueprint {
-    border-top: 1px solid #D9DADB;
-    background-color: #FFFFFF;
+    border-top: 1px solid var(--facet-blueprint-border, #D9DADB);
+    background-color: var(--facet-blueprint-background, #FFFFFF);
 }
 
 .facet-container-header {
     height: 20px;
-    color: #1A1B1C;
+    color: var(--facet-container-surface-foreground, #1A1B1C);
     font-family: "IBM Plex Sans", sans-serif;
     font-size: 14px;
     font-style: normal;
@@ -44,7 +44,7 @@
 
 .facet-container-footer {
     height: 20px;
-    color: #1A1B1C;
+    color: var(--facet-container-surface-foreground, #1A1B1C);
     font-family: "IBM Plex Sans", sans-serif;
     font-size: 10px;
     font-style: normal;

packages/facets-core/src/facet-hoverable/FacetHoverable.css

@@ -23,7 +23,7 @@
  */
 
 .facet-blueprint {
-    background-color: #FFFFFF;
+    background-color: var(--facet-blueprint-background, #FFFFFF);
     transition: background-color 256ms;
     position: relative;
 }

packages/facets-core/src/facet-plugin/default/facet-bars-labels/FacetBarsLabels.css

@@ -45,14 +45,14 @@
     top: 0;
     bottom: 3px;
     width: 1px;
-    background-color: #B2B3B4;
+    background-color: var(--facet-bars-labels-tick-background, #B2B3B4);
 }
 
 .facet-bars-labels-marker {
     position: absolute;
     top: 3px;
     bottom: 0;
-    border-top: 1px solid #D9DADB;
+    border-top: 1px solid var(--facet-bars-labels-marker-border, #D9DADB);
 }
 
 .facet-bars-labels-marker:after {
@@ -61,15 +61,15 @@
     top: 0;
     bottom: 0;
     width: 1px;
-    background-color: #D9DADB;
+    background-color: var(--facet-bars-labels-marker-border, #D9DADB);
     left: 50%;
 }
 
 .facet-bars-labels-text {
     position: relative;
     height: 10px;
     margin-top: 2px;
-    color: #B2B3B4;
+    color: var(--facet-bars-labels-foreground, #B2B3B4);
     font-family: "IBM Plex Sans", sans-serif;
     font-size: 10px;
     line-height: 10px;

packages/facets-core/src/facet-plugin/default/facet-bars-selection/FacetBarsSelection.css

@@ -24,16 +24,16 @@
 
 .facet-bars-selection-user {
     position: absolute;
-    border: 1px dashed black;
+    border: 1px dashed var(--facet-bars-selection-user-border, black);
     pointer-events: none;
     user-select: none;
     -ms-user-select: none;
 }
 
 .facet-bars-selection-computed {
     position: absolute;
-    background-color: rgba(37,93,204, 0.15);
-    border: 1px solid #255DCC;
+    background-color: var(--facet-bars-selection-computed-background, rgba(37,93,204, 0.15));
+    border: 1px solid var(--facet-bars-selection-computed-border, #255DCC);
     pointer-events: none;
     user-select: none;
     -ms-user-select: none;
@@ -68,12 +68,12 @@
     top: 2px;
     bottom: 2px;
     width: 1px;
-    background-color: #EBF1FC;
+    background-color: var(--facet-bars-selection-handle-background, #EBF1FC);
 }
 
 .facet-bars-selection-handle-left {
     left: -7px;
-    border-right: 5px solid #255DCC;
+    border-right: 5px solid var(--facet-bars-selection-handle-border, #255DCC);
 }
 
 .facet-bars-selection-handle-left:after {
@@ -86,7 +86,7 @@
 
 .facet-bars-selection-handle-right {
     right: -7px;
-    border-left: 5px solid #255DCC;
+    border-left: 5px solid var(--facet-bars-selection-handle-border, #255DCC);
 }
 
 .facet-bars-selection-handle-right:after {
@@ -103,7 +103,7 @@
     top: -1px;
     width: 9px;
     height: 9px;
-    background-color: #255DCC;
+    background-color: var(--facet-bars-selection-clear-button-background, #255DCC);
     border-radius: 2px;
     cursor: pointer;
     pointer-events: all;
@@ -116,7 +116,7 @@
     top: 1px;
     height: 7px;
     width: 1px;
-    background-color: white;
+    background-color: var(--facet-bars-selection-clear-button-foreground, white);
     transform: rotate(45deg);
 }
 
@@ -127,6 +127,6 @@
     top: 1px;
     height: 7px;
     width: 1px;
-    background-color: white;
+    background-color: var(--facet-bars-selection-clear-button-foreground, white);
     transform: rotate(-45deg);
 }

packages/facets-core/src/facet-plugin/default/facet-timeline-labels/FacetTimelineLabels.css

@@ -29,7 +29,7 @@
 .facet-timeline-labels-container {
     width: 100%;
     height: 25px;
-    border-top: 1px solid #A7A7A8;
+    border-top: 1px solid var(--facet-timeline-labels-container-border, #A7A7A8);
     position: relative;
     z-index: 1;
 }
@@ -38,7 +38,7 @@
     position: absolute;
     width: 1px;
     top: 0;
-    background-color: #A7A7A8;
+    background-color: var(--facet-timeline-labels-tick-background, #A7A7A8);
 }
 
 .facet-timeline-labels-label {