fix: rename --color-primary-chubb to --color-primary-contrast-offset and fallback to primary color if not present (#4803)

* fix: fallback to primary color if --color-primary-chubb not present

* rename to --color-primary-contrast-offset

* use contarst-offset

Co-authored-by: David Luzar <luzar.david@gmail.com>

* Update src/packages/excalidraw/README_NEXT.md

* remove

* Update src/packages/excalidraw/README_NEXT.md

Co-authored-by: David Luzar <luzar.david@gmail.com>

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/Toolbar.scss

@@ -87,8 +87,14 @@
 
     .ToolIcon {
       &:hover {
-        --icon-fill-color: var(--color-primary-chubb);
-        --keybinding-color: var(--color-primary-chubb);
+        --icon-fill-color: var(
+          --color-primary-contrast-offset,
+          var(--color-primary)
+        );
+        --keybinding-color: var(
+          --color-primary-contrast-offset,
+          var(--color-primary)
+        );
       }
       &:active {
         --icon-fill-color: #{$oc-gray-9};

src/css/theme.scss

@@ -38,7 +38,6 @@
   --text-primary-color: #{$oc-gray-8};
 
   --color-primary: #6965db;
-  --color-primary-chubb: #625ee0; // to offset Chubb illusion
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
   --color-primary-light: #e2e1fc;
@@ -85,7 +84,6 @@
     --text-primary-color: #{$oc-gray-4};
 
     --color-primary: #5650f0;
-    --color-primary-chubb: #726dff; // to offset Chubb illusion
     --color-primary-darker: #4b46d8;
     --color-primary-darkest: #3e39be;
     --color-primary-light: #3f3d64;

src/excalidraw-app/index.scss

@@ -1,4 +1,9 @@
 .excalidraw {
+  --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
+
+  &.theme--dark {
+    --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
+  }
   .layer-ui__wrapper__footer-center {
     display: flex;
     justify-content: space-between;

src/packages/excalidraw/README_NEXT.md

@@ -374,7 +374,7 @@ Most notably, you can customize the primary colors, by overriding these variable
 - `--color-primary-darker`
 - `--color-primary-darkest`
 - `--color-primary-light`
-- `--color-primary-chubb` — a slightly darker (in light mode), or lighter (in dark mode) `--color-primary` color to account for [Chubb illusion](https://en.wikipedia.org/wiki/Chubb_illusion).
+- `--color-primary-contrast-offset` — a slightly darker (in light mode), or lighter (in dark mode) `--color-primary` color to fix contrast issues (see [Chubb illusion](https://en.wikipedia.org/wiki/Chubb_illusion)). It will fall back to `--color-primary` if not present.
 
 For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/src/css/theme.scss), though most of them will not make sense to override.
 

src/packages/excalidraw/example/App.scss

@@ -40,3 +40,10 @@
     display: flex;
   }
 }
+
+.excalidraw {
+  --color-primary: #faa2c1;
+  --color-primary-darker: #f783ac;
+  --color-primary-darkest: #e64980;
+  --color-primary-light: #fcc2d7;
+}