From 7fe225ee997d6c06237e4fc97c2666b7f54b766a Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 17 Feb 2022 18:22:19 +0530 Subject: [PATCH] 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 * Update src/packages/excalidraw/README_NEXT.md * remove * Update src/packages/excalidraw/README_NEXT.md Co-authored-by: David Luzar Co-authored-by: David Luzar --- src/components/Toolbar.scss | 10 ++++++++-- src/css/theme.scss | 2 -- src/excalidraw-app/index.scss | 5 +++++ src/packages/excalidraw/README_NEXT.md | 2 +- src/packages/excalidraw/example/App.scss | 7 +++++++ 5 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/Toolbar.scss b/src/components/Toolbar.scss index d5c4374f..fb2a32b1 100644 --- a/src/components/Toolbar.scss +++ b/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}; diff --git a/src/css/theme.scss b/src/css/theme.scss index 4282cfe4..1827a74b 100644 --- a/src/css/theme.scss +++ b/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; diff --git a/src/excalidraw-app/index.scss b/src/excalidraw-app/index.scss index 37bace0e..511afe7f 100644 --- a/src/excalidraw-app/index.scss +++ b/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; diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md index 91d3c808..63655d6e 100644 --- a/src/packages/excalidraw/README_NEXT.md +++ b/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. diff --git a/src/packages/excalidraw/example/App.scss b/src/packages/excalidraw/example/App.scss index 2d5999fc..6d797714 100644 --- a/src/packages/excalidraw/example/App.scss +++ b/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; +}