Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Consistent variable names, remove duplicates/unused in css

Browse Source
This commit is contained in:
Panayiotis Lipiridis 2020-12-28 01:05:44 +02:00
parent 3aab81bc35
commit 2712a06ab8
14 changed files with 60 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CollabButton.scss
View File

@ -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);

8
src/components/ColorPicker.scss
View File

@ -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;

6
src/components/ContextMenu.scss
View File

@ -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;
}

2
src/components/Dialog.scss
View File

@ -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;

2
src/components/HintViewer.scss
View File

@ -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;
}
}

4
src/components/IconPicker.scss
View File

@ -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);
}
}

2
src/components/Island.scss
View File

@ -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);

2
src/components/Modal.scss
View File

@ -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} {

4
src/components/TextInput.scss
View File

@ -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);
}
}

2
src/constants.ts
View File

@ -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;

2
src/css/_variables.scss
View File

@ -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)";

83
src/css/theme.scss
View File

@ -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,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
--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};
--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,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
--focus-highlight-color: #{$oc-blue-2};
--sat: env(safe-area-inset-top);
--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};
--shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
--space-factor: 0.25rem;
--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};
--icon-fill-color: #{$oc-gray-4};
--icon-green-fill-color: #{$oc-green-4};
--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
--button-special-active-bg-color: #204624;
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
--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;
--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};
--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};
}
}

4
src/excalidraw-app/collab/RoomDialog.scss
View File

@ -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 {

2
src/is-mobile.tsx
View File

@ -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)",
)
: (({