From 2712a06ab80e1e41dd29dabf969a2416455bbfac Mon Sep 17 00:00:00 2001 From: Panayiotis Lipiridis Date: Mon, 28 Dec 2020 01:05:44 +0200 Subject: [PATCH] refactor: Consistent variable names, remove duplicates/unused in css --- src/components/CollabButton.scss | 2 +- src/components/ColorPicker.scss | 8 +-- src/components/ContextMenu.scss | 6 +- src/components/Dialog.scss | 2 +- src/components/HintViewer.scss | 2 +- src/components/IconPicker.scss | 4 +- src/components/Island.scss | 2 +- src/components/Modal.scss | 2 +- src/components/TextInput.scss | 4 +- src/constants.ts | 2 +- src/css/_variables.scss | 2 +- src/css/theme.scss | 79 +++++++++++------------ src/excalidraw-app/collab/RoomDialog.scss | 4 +- src/is-mobile.tsx | 2 +- 14 files changed, 58 insertions(+), 63 deletions(-) diff --git a/src/components/CollabButton.scss b/src/components/CollabButton.scss index fd51cc055d..bd537b2f29 100644 --- a/src/components/CollabButton.scss +++ b/src/components/CollabButton.scss @@ -2,7 +2,7 @@ .excalidraw { .CollabButton.is-collaborating { - background-color: var(--button-special-active-background-color); + background-color: var(--button-special-active-bg-color); .ToolIcon__icon svg { color: var(--icon-green-fill-color); diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss index 23a6aac82e..74e8334a5b 100644 --- a/src/components/ColorPicker.scss +++ b/src/components/ColorPicker.scss @@ -2,7 +2,7 @@ .excalidraw { .color-picker { - background: var(--popup-background-color); + background: var(--popup-bg-color); border: 0px solid transparentize($oc-white, 0.75); box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; border-radius: 4px; @@ -28,7 +28,7 @@ height: 0px; border-style: solid; border-width: 0px 9px 10px; - border-color: transparent transparent var(--popup-background-color); + border-color: transparent transparent var(--popup-bg-color); position: absolute; top: -10px; @@ -144,7 +144,7 @@ } .color-input-container:focus-within .color-picker-hash::after { - background: var(--input-background-color); + background: var(--input-bg-color); :root[dir="ltr"] & { right: -2px; @@ -163,7 +163,7 @@ width: 12ch; /* length of `transparent` + 1 */ margin: 0; font-size: 1rem; - background-color: var(--input-background-color); + background-color: var(--input-bg-color); color: var(--text-color-primary); border: 0px; outline: none; diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss index fe8059e09d..d920f7cdf4 100644 --- a/src/components/ContextMenu.scss +++ b/src/components/ContextMenu.scss @@ -10,7 +10,7 @@ user-select: none; margin: -0.25rem 0 0 0.125rem; padding: 0.25rem 0; - background-color: var(--popup-secondary-background-color); + background-color: var(--popup-secondary-bg-color); border: 1px solid var(--button-gray-3); } @@ -59,12 +59,12 @@ } .context-menu-option:hover { - color: var(--popup-background-color); + color: var(--popup-bg-color); background-color: var(--select-highlight-color); &.dangerous { .context-menu-option__label { - color: var(--popup-background-color); + color: var(--popup-bg-color); } background-color: $oc-red-6; } diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss index 3ca5d6258e..c54547c470 100644 --- a/src/components/Dialog.scss +++ b/src/components/Dialog.scss @@ -37,7 +37,7 @@ padding: calc(var(--space-factor) * 2); padding-left: var(--inset-left); padding-right: var(--inset-right); - background: var(--bg-color-island); + background: var(--island-bg-color); font-size: 1.25em; box-sizing: border-box; diff --git a/src/components/HintViewer.scss b/src/components/HintViewer.scss index 87b502b64f..b9fdb56eaa 100644 --- a/src/components/HintViewer.scss +++ b/src/components/HintViewer.scss @@ -26,7 +26,7 @@ $wide-viewport-width: 1000px; > span { padding: 0.2rem 0.4rem; - background-color: var(--overlay-background-color); + background-color: var(--overlay-bg-color); border-radius: 4px; } } diff --git a/src/components/IconPicker.scss b/src/components/IconPicker.scss index 62c2b5d495..78f507ec05 100644 --- a/src/components/IconPicker.scss +++ b/src/components/IconPicker.scss @@ -8,7 +8,7 @@ } .picker { - background: var(--popup-background-color); + background: var(--popup-bg-color); border: 0px solid transparentize($oc-white, 0.75); box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; border-radius: 4px; @@ -83,7 +83,7 @@ position: absolute; border-style: solid; border-width: 0px 9px 10px; - border-color: transparent transparent var(--popup-background-color); + border-color: transparent transparent var(--popup-bg-color); } } diff --git a/src/components/Island.scss b/src/components/Island.scss index 713910acaa..8086536f03 100644 --- a/src/components/Island.scss +++ b/src/components/Island.scss @@ -1,7 +1,7 @@ .excalidraw { .Island { --padding: 0; - background-color: var(--bg-color-island); + background-color: var(--island-bg-color); backdrop-filter: saturate(100%) blur(10px); box-shadow: var(--shadow-island); border-radius: var(--border-radius-m); diff --git a/src/components/Modal.scss b/src/components/Modal.scss index c009b4e498..57b068437c 100644 --- a/src/components/Modal.scss +++ b/src/components/Modal.scss @@ -37,7 +37,7 @@ position: relative; // for modals, reset blurry bg - background: var(--bg-color-island); + background: var(--island-bg-color); backdrop-filter: none; @media #{$is-mobile-query} { diff --git a/src/components/TextInput.scss b/src/components/TextInput.scss index 3ff96c87c5..5a78f55940 100644 --- a/src/components/TextInput.scss +++ b/src/components/TextInput.scss @@ -9,11 +9,11 @@ padding: 0.75rem; white-space: nowrap; border-radius: var(--space-factor); - background-color: var(--input-background-color); + background-color: var(--input-bg-color); &:not(:focus) { &:hover { - background-color: var(--input-hover-background-color); + background-color: var(--input-hover-bg-color); } } diff --git a/src/constants.ts b/src/constants.ts index 0a6a793cdb..5db9702c29 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -84,7 +84,7 @@ export const STORAGE_KEYS = { LOCAL_STORAGE_LIBRARY: "excalidraw-library", }; -// time in milliseconds +// Time in milliseconds export const TAP_TWICE_TIMEOUT = 300; export const TOUCH_CTX_MENU_TIMEOUT = 500; export const TITLE_TIMEOUT = 10000; diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 4e4ac861dd..96536dbbab 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -1,4 +1,4 @@ @import "open-color/open-color.scss"; -// keep up to date with is-mobile.tsx +// Keep up to date with is-mobile.tsx $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)"; diff --git a/src/css/theme.scss b/src/css/theme.scss index b28fca6370..03a23d723f 100644 --- a/src/css/theme.scss +++ b/src/css/theme.scss @@ -1,45 +1,42 @@ @import "open-color/open-color.scss"; :root { - --bg-color-island: rgba(255, 255, 255, 0.9); - --popup-background-color: #{$oc-white}; + --appearance-filter: none; --border-radius-m: 4px; - --space-factor: 0.25rem; + --button-destructive-bg-color: #{$oc-red-1}; + --button-destructive-color: #{$oc-red-9}; --button-gray-1: #{$oc-gray-2}; --button-gray-2: #{$oc-gray-4}; --button-gray-3: #{$oc-gray-5}; - --input-border-color: #{$oc-gray-3}; - --input-background-color: #{$oc-white}; - --input-hover-background-color: #{$oc-gray-1}; - --input-label-color: #{$oc-gray-7}; + --button-special-active-bg-color: #{$oc-green-0}; + --dropdown-icon: url('data:image/svg+xml,'); + --focus-highlight-color: #{$oc-blue-2}; --icon-fill-color: #{$oc-black}; --icon-green-fill-color: #{$oc-green-9}; + --input-bg-color: #{$oc-white}; + --input-border-color: #{$oc-gray-3}; + --input-hover-bg-color: #{$oc-gray-1}; + --input-label-color: #{$oc-gray-7}; + --island-bg-color: #{transparentize($oc-white, 0.9)}; --keybinding-color: #{$oc-gray-5}; - --color-overlay-text-color: #ccc; - --sat: env(safe-area-inset-top); + --overlay-bg-color: #{transparentize($oc-white, 0.12)}; + --popup-bg-color: #{$oc-white}; + --popup-secondary-bg-color: #{$oc-gray-1}; + --popup-text-color: #{$oc-black}; + --popup-text-inverted-color: #{$oc-white}; --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right); - --text-color-primary: #{$oc-gray-8}; + --sat: env(safe-area-inset-top); + --select-highlight-color: #{$oc-blue-5}; --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)}; - --overlay-background-color: #{transparentize($oc-white, 0.12)}; - --border-radius-m: 4px; --space-factor: 0.25rem; - --dropdown-icon: url('data:image/svg+xml,'); - --focus-highlight-color: #{$oc-blue-2}; - --select-highlight-color: #{$oc-blue-5}; - --appearance-filter: none; - --button-special-active-background-color: #{$oc-green-0}; - --button-destructive-color: #{$oc-red-9}; - --button-destructive-background-color: #{$oc-red-1}; - --popup-secondary-background-color: #{$oc-gray-1}; - --popup-text-color: #{$oc-black}; - --popup-text-inverted-color: #{$oc-white}; + --text-color-primary: #{$oc-gray-8}; } .excalidraw { &.Appearance_dark { - background: #000; + background: $oc-black; &.Appearance_dark-background-none { background: none; @@ -47,32 +44,30 @@ } &.Appearance_dark { - --text-color-primary: #{$oc-gray-4}; - --bg-color-island: #1e1e1e; - --popup-background-color: #2c2c2c; + --appearance-filter: invert(93%) hue-rotate(180deg); + --button-destructive-bg-color: #5a0000; + --button-destructive-color: #{$oc-red-3}; --button-gray-1: #363636; --button-gray-2: #272727; --button-gray-3: #222; - --input-border-color: #2e2e2e; - --input-background-color: #121212; - --input-hover-background-color: #181818; - --input-label-color: #{$oc-gray-2}; + --button-special-active-bg-color: #204624; + --dropdown-icon: url('data:image/svg+xml,'); + --focus-highlight-color: #{$oc-blue-6}; --icon-fill-color: #{$oc-gray-4}; --icon-green-fill-color: #{$oc-green-4}; + --input-bg-color: #121212; + --input-border-color: #2e2e2e; + --input-hover-bg-color: #181818; + --input-label-color: #{$oc-gray-2}; + --island-bg-color: #1e1e1e; --keybinding-color: #{$oc-gray-6}; - --color-overlay-text-color: #bbb; - --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)}; - --overlay-background-color: rgba(30, 30, 30, 0.88); - // #{$oc-gray-4}; inlined - --dropdown-icon: url('data:image/svg+xml,'); - --focus-highlight-color: #{$oc-blue-6}; - --select-highlight-color: #{$oc-blue-4}; - --appearance-filter: invert(93%) hue-rotate(180deg); - --button-special-active-background-color: #204624; - --button-destructive-color: #{$oc-red-3}; - --button-destructive-background-color: #5a0000; - --popup-secondary-background-color: #222; + --overlay-bg-color: rgba(30, 30, 30, 0.88); + --popup-bg-color: #2c2c2c; + --popup-secondary-bg-color: #222; --popup-text-color: #{$oc-gray-4}; --popup-text-inverted-color: #2c2c2c; + --select-highlight-color: #{$oc-blue-4}; + --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)}; + --text-color-primary: #{$oc-gray-4}; } } diff --git a/src/excalidraw-app/collab/RoomDialog.scss b/src/excalidraw-app/collab/RoomDialog.scss index de784d93d2..386f7d4773 100644 --- a/src/excalidraw-app/collab/RoomDialog.scss +++ b/src/excalidraw-app/collab/RoomDialog.scss @@ -35,7 +35,7 @@ } .RoomDialog-username { - background-color: var(--input-background-color); + background-color: var(--input-bg-color); border-color: var(--input-border-color); appearance: none; min-width: 0; @@ -53,7 +53,7 @@ } .Modal .RoomDialog-stopSession { - background-color: var(--button-destructive-background-color); + background-color: var(--button-destructive-bg-color); .ToolIcon__label, .ToolIcon__icon svg { diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx index c20bf89de1..30ccd01e89 100644 --- a/src/is-mobile.tsx +++ b/src/is-mobile.tsx @@ -11,7 +11,7 @@ export const IsMobileProvider = ({ if (!query.current) { query.current = window.matchMedia ? window.matchMedia( - // keep up to date with _variables.scss + // Keep up to date with _variables.scss "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)", ) : (({