github-forks
/
success
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
cleanipp
Panayiotis Lipiridis 4 years ago
parent 3aab81bc35
commit 2712a06ab8
14 changed files with 58 additions and 63 deletions
Show Stats Download Patch File Download Diff File

2
src/components/CollabButton.scss
Unescape Escape View File

@ -2,7 +2,7 @@
.excalidraw { .excalidraw {
.CollabButton.is-collaborating { .CollabButton.is-collaborating {
background-color: var(--button-special-active-background-color); background-color: var(--button-special-active-bg-color);
.ToolIcon__icon svg { .ToolIcon__icon svg {
color: var(--icon-green-fill-color); color: var(--icon-green-fill-color);

8
src/components/ColorPicker.scss
Unescape Escape View File

@ -2,7 +2,7 @@
.excalidraw { .excalidraw {
.color-picker { .color-picker {
background: var(--popup-background-color); background: var(--popup-bg-color);
border: 0px solid transparentize($oc-white, 0.75); border: 0px solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
border-radius: 4px; border-radius: 4px;
@ -28,7 +28,7 @@
height: 0px; height: 0px;
border-style: solid; border-style: solid;
border-width: 0px 9px 10px; border-width: 0px 9px 10px;
border-color: transparent transparent var(--popup-background-color); border-color: transparent transparent var(--popup-bg-color);
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -144,7 +144,7 @@
} }
.color-input-container:focus-within .color-picker-hash::after { .color-input-container:focus-within .color-picker-hash::after {
background: var(--input-background-color); background: var(--input-bg-color);
:root[dir="ltr"] & { :root[dir="ltr"] & {
right: -2px; right: -2px;
@ -163,7 +163,7 @@
width: 12ch; /* length of `transparent` + 1 */ width: 12ch; /* length of `transparent` + 1 */
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
background-color: var(--input-background-color); background-color: var(--input-bg-color);
color: var(--text-color-primary); color: var(--text-color-primary);
border: 0px; border: 0px;
outline: none; outline: none;

6
src/components/ContextMenu.scss
Unescape Escape View File

@ -10,7 +10,7 @@
user-select: none; user-select: none;
margin: -0.25rem 0 0 0.125rem; margin: -0.25rem 0 0 0.125rem;
padding: 0.25rem 0; 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); border: 1px solid var(--button-gray-3);
} }
@ -59,12 +59,12 @@
} }
.context-menu-option:hover { .context-menu-option:hover {
color: var(--popup-background-color); color: var(--popup-bg-color);
background-color: var(--select-highlight-color); background-color: var(--select-highlight-color);
&.dangerous { &.dangerous {
.context-menu-option__label { .context-menu-option__label {
color: var(--popup-background-color); color: var(--popup-bg-color);
} }
background-color: $oc-red-6; background-color: $oc-red-6;
} }

2
src/components/Dialog.scss
Unescape Escape View File

@ -37,7 +37,7 @@
padding: calc(var(--space-factor) * 2); padding: calc(var(--space-factor) * 2);
padding-left: var(--inset-left); padding-left: var(--inset-left);
padding-right: var(--inset-right); padding-right: var(--inset-right);
background: var(--bg-color-island); background: var(--island-bg-color);
font-size: 1.25em; font-size: 1.25em;
box-sizing: border-box; box-sizing: border-box;

2
src/components/HintViewer.scss
Unescape Escape View File

@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;
> span { > span {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
background-color: var(--overlay-background-color); background-color: var(--overlay-bg-color);
border-radius: 4px; border-radius: 4px;
} }
} }

4
src/components/IconPicker.scss
Unescape Escape View File

@ -8,7 +8,7 @@
} }
.picker { .picker {
background: var(--popup-background-color); background: var(--popup-bg-color);
border: 0px solid transparentize($oc-white, 0.75); border: 0px solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
border-radius: 4px; border-radius: 4px;
@ -83,7 +83,7 @@
position: absolute; position: absolute;
border-style: solid; border-style: solid;
border-width: 0px 9px 10px; 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
Unescape Escape View File

@ -1,7 +1,7 @@
.excalidraw { .excalidraw {
.Island { .Island {
--padding: 0; --padding: 0;
background-color: var(--bg-color-island); background-color: var(--island-bg-color);
backdrop-filter: saturate(100%) blur(10px); backdrop-filter: saturate(100%) blur(10px);
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);

2
src/components/Modal.scss
Unescape Escape View File

@ -37,7 +37,7 @@
position: relative; position: relative;
// for modals, reset blurry bg // for modals, reset blurry bg
background: var(--bg-color-island); background: var(--island-bg-color);
backdrop-filter: none; backdrop-filter: none;
@media #{$is-mobile-query} { @media #{$is-mobile-query} {

4
src/components/TextInput.scss
Unescape Escape View File

@ -9,11 +9,11 @@
padding: 0.75rem; padding: 0.75rem;
white-space: nowrap; white-space: nowrap;
border-radius: var(--space-factor); border-radius: var(--space-factor);
background-color: var(--input-background-color); background-color: var(--input-bg-color);
&:not(:focus) { &:not(:focus) {
&:hover { &:hover {
background-color: var(--input-hover-background-color); background-color: var(--input-hover-bg-color);
} }
} }

2
src/constants.ts
Unescape Escape View File

@ -84,7 +84,7 @@ export const STORAGE_KEYS = {
LOCAL_STORAGE_LIBRARY: "excalidraw-library", LOCAL_STORAGE_LIBRARY: "excalidraw-library",
}; };
// time in milliseconds // Time in milliseconds
export const TAP_TWICE_TIMEOUT = 300; export const TAP_TWICE_TIMEOUT = 300;
export const TOUCH_CTX_MENU_TIMEOUT = 500; export const TOUCH_CTX_MENU_TIMEOUT = 500;
export const TITLE_TIMEOUT = 10000; export const TITLE_TIMEOUT = 10000;

2
src/css/_variables.scss
Unescape Escape View File

@ -1,4 +1,4 @@
@import "open-color/open-color.scss"; @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)"; $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";

79
src/css/theme.scss
Unescape Escape View File

@ -1,45 +1,42 @@
@import "open-color/open-color.scss"; @import "open-color/open-color.scss";
:root { :root {
--bg-color-island: rgba(255, 255, 255, 0.9); --appearance-filter: none;
--popup-background-color: #{$oc-white};
--border-radius-m: 4px; --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-1: #{$oc-gray-2};
--button-gray-2: #{$oc-gray-4}; --button-gray-2: #{$oc-gray-4};
--button-gray-3: #{$oc-gray-5}; --button-gray-3: #{$oc-gray-5};
--input-border-color: #{$oc-gray-3}; --button-special-active-bg-color: #{$oc-green-0};
--input-background-color: #{$oc-white}; --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>');
--input-hover-background-color: #{$oc-gray-1}; --focus-highlight-color: #{$oc-blue-2};
--input-label-color: #{$oc-gray-7};
--icon-fill-color: #{$oc-black}; --icon-fill-color: #{$oc-black};
--icon-green-fill-color: #{$oc-green-9}; --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}; --keybinding-color: #{$oc-gray-5};
--color-overlay-text-color: #ccc; --overlay-bg-color: #{transparentize($oc-white, 0.12)};
--sat: env(safe-area-inset-top); --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); --sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left); --sal: env(safe-area-inset-left);
--sar: env(safe-area-inset-right); --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)}; --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; --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>'); --text-color-primary: #{$oc-gray-8};
--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};
} }
.excalidraw { .excalidraw {
&.Appearance_dark { &.Appearance_dark {
background: #000; background: $oc-black;
&.Appearance_dark-background-none { &.Appearance_dark-background-none {
background: none; background: none;
@ -47,32 +44,30 @@
} }
&.Appearance_dark { &.Appearance_dark {
--text-color-primary: #{$oc-gray-4}; --appearance-filter: invert(93%) hue-rotate(180deg);
--bg-color-island: #1e1e1e; --button-destructive-bg-color: #5a0000;
--popup-background-color: #2c2c2c; --button-destructive-color: #{$oc-red-3};
--button-gray-1: #363636; --button-gray-1: #363636;
--button-gray-2: #272727; --button-gray-2: #272727;
--button-gray-3: #222; --button-gray-3: #222;
--input-border-color: #2e2e2e; --button-special-active-bg-color: #204624;
--input-background-color: #121212; --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>');
--input-hover-background-color: #181818; --focus-highlight-color: #{$oc-blue-6};
--input-label-color: #{$oc-gray-2};
--icon-fill-color: #{$oc-gray-4}; --icon-fill-color: #{$oc-gray-4};
--icon-green-fill-color: #{$oc-green-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}; --keybinding-color: #{$oc-gray-6};
--color-overlay-text-color: #bbb; --overlay-bg-color: rgba(30, 30, 30, 0.88);
--shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)}; --popup-bg-color: #2c2c2c;
--overlay-background-color: rgba(30, 30, 30, 0.88); --popup-secondary-bg-color: #222;
// #{$oc-gray-4}; inlined
--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;
--popup-text-color: #{$oc-gray-4}; --popup-text-color: #{$oc-gray-4};
--popup-text-inverted-color: #2c2c2c; --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
Unescape Escape View File

@ -35,7 +35,7 @@
} }
.RoomDialog-username { .RoomDialog-username {
background-color: var(--input-background-color); background-color: var(--input-bg-color);
border-color: var(--input-border-color); border-color: var(--input-border-color);
appearance: none; appearance: none;
min-width: 0; min-width: 0;
@ -53,7 +53,7 @@
} }
.Modal .RoomDialog-stopSession { .Modal .RoomDialog-stopSession {
background-color: var(--button-destructive-background-color); background-color: var(--button-destructive-bg-color);
.ToolIcon__label, .ToolIcon__label,
.ToolIcon__icon svg { .ToolIcon__icon svg {

2
src/is-mobile.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ export const IsMobileProvider = ({
if (!query.current) { if (!query.current) {
query.current = window.matchMedia query.current = window.matchMedia
? 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)", "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
) )
: (({ : (({

Write Preview
Loading…
Cancel
Save