sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Consistent CSS variable names and general housekeeping of styles (#2947)

Browse Source
This commit is contained in:
Lipis 2021-02-16 20:22:18 +02:00 committed by GitHub
parent 9c0f832a41
commit 9dd2257932
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 149 additions and 147 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 { .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,
.ToolIcon__label { .ToolIcon__label {

48
src/components/ColorPicker.scss
View File

@ -2,9 +2,9 @@
.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: 0 solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
@ -24,11 +24,11 @@
} }
.color-picker-triangle { .color-picker-triangle {
width: 0px; width: 0;
height: 0px; height: 0;
border-style: solid; border-style: solid;
border-width: 0px 9px 10px; border-width: 0 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;
@ -84,12 +84,12 @@
.color-picker-transparent { .color-picker-transparent {
border-radius: 4px; border-radius: 4px;
box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset; box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
left: 0px; left: 0;
} }
.color-picker-transparent, .color-picker-transparent,
@ -104,11 +104,11 @@
width: 1.875rem; width: 1.875rem;
:root[dir="ltr"] & { :root[dir="ltr"] & {
border-radius: 4px 0px 0px 4px; border-radius: 4px 0 0 4px;
} }
:root[dir="rtl"] & { :root[dir="rtl"] & {
border-radius: 0px 4px 4px 0px; border-radius: 0 4px 4px 0;
} }
color: var(--input-label-color); color: var(--input-label-color);
@ -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,19 +163,19 @@
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-primary-color);
border: 0px; border: 0;
outline: none; outline: none;
height: 1.75em; height: 1.75em;
box-shadow: var(--input-border-color) 0px 0px 0px 1px inset; box-shadow: var(--input-border-color) 0 0 0 1px inset;
:root[dir="ltr"] & { :root[dir="ltr"] & {
border-radius: 0px 4px 4px 0px; border-radius: 0 4px 4px 0;
} }
:root[dir="rtl"] & { :root[dir="rtl"] & {
border-radius: 4px 0px 0px 4px; border-radius: 4px 0 0 4px;
} }
float: left; float: left;
@ -228,7 +228,7 @@
} }
.color-picker-type-elementBackground .color-picker-keybinding { .color-picker-type-elementBackground .color-picker-keybinding {
color: #fff; color: $oc-white;
} }
.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding { .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
@ -241,10 +241,10 @@
&.Appearance_dark { &.Appearance_dark {
.color-picker-type-elementBackground .color-picker-keybinding { .color-picker-type-elementBackground .color-picker-keybinding {
color: #000; color: $oc-black;
} }
.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding { .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
color: #000; color: $oc-black;
} }
} }
} }

8
src/components/ContextMenu.scss
View File

@ -4,13 +4,13 @@
.context-menu { .context-menu {
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 10px transparentize($oc-black, 0.8); box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
padding: 0; padding: 0;
list-style: none; list-style: none;
user-select: none; user-select: none;
margin: -0.25rem 0 0 0.125rem; margin: -0.25rem 0 0 0.125rem;
padding: 0.5rem 0; padding: 0.5rem 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);
cursor: default; cursor: default;
} }
@ -61,12 +61,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
View File

@ -45,7 +45,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
padding: calc(var(--space-factor) * 2); padding: calc(var(--space-factor) * 2);
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
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;
} }
} }

22
src/components/IconPicker.scss
View File

@ -8,9 +8,9 @@
} }
.picker { .picker {
background: var(--popup-background-color); background: var(--popup-bg-color);
border: 0px solid transparentize($oc-white, 0.75); border: 0 solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px; box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
} }
@ -56,8 +56,8 @@
} }
.picker-triangle { .picker-triangle {
width: 0px; width: 0;
height: 0px; height: 0;
position: relative; position: relative;
top: -10px; top: -10px;
:root[dir="ltr"] & { :root[dir="ltr"] & {
@ -73,7 +73,7 @@
content: ""; content: "";
position: absolute; position: absolute;
border-style: solid; border-style: solid;
border-width: 0px 9px 10px; border-width: 0 9px 10px;
border-color: transparent transparent transparentize($oc-black, 0.9); border-color: transparent transparent transparentize($oc-black, 0.9);
top: -1px; top: -1px;
} }
@ -82,8 +82,8 @@
content: ""; content: "";
position: absolute; position: absolute;
border-style: solid; border-style: solid;
border-width: 0px 9px 10px; border-width: 0 9px 10px;
border-color: transparent transparent var(--popup-background-color); border-color: transparent transparent var(--popup-bg-color);
} }
} }
@ -121,7 +121,7 @@
} }
.picker-type-elementBackground .picker-keybinding { .picker-type-elementBackground .picker-keybinding {
color: #fff; color: $oc-white;
} }
.picker-swatch[aria-label="transparent"] .picker-keybinding { .picker-swatch[aria-label="transparent"] .picker-keybinding {
@ -134,10 +134,10 @@
&.Appearance_dark { &.Appearance_dark {
.picker-type-elementBackground .picker-keybinding { .picker-type-elementBackground .picker-keybinding {
color: #000; color: $oc-black;
} }
.picker-swatch[aria-label="transparent"] .picker-keybinding { .picker-swatch[aria-label="transparent"] .picker-keybinding {
color: #000; color: $oc-black;
} }
} }
} }

2
src/components/Island.scss
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: 4px; border-radius: 4px;

4
src/components/LayerUI.scss
View File

@ -73,7 +73,7 @@
&__footer { &__footer {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
bottom: 0px; bottom: 0;
:root[dir="ltr"] & { :root[dir="ltr"] & {
right: 0; right: 0;
@ -94,7 +94,7 @@
} }
:root[dir="ltr"] &.transition-right { :root[dir="ltr"] &.transition-right {
transform: translate(999px, 0px); transform: translate(999px, 0);
} }
:root[dir="rtl"] &.transition-left { :root[dir="rtl"] &.transition-left {

4
src/components/Modal.scss
View File

@ -44,10 +44,10 @@
overflow-y: auto; overflow-y: auto;
// 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;
border: 1px solid var(--dialog-border); border: 1px solid var(--dialog-border-color);
box-shadow: 0 2px 10px transparentize($oc-black, 0.75); box-shadow: 0 2px 10px transparentize($oc-black, 0.75);
border-radius: 6px; border-radius: 6px;

2
src/components/Stats.scss
View File

@ -1,5 +1,6 @@
@import "../css/variables.module"; @import "../css/variables.module";
.excalidraw {
.Stats { .Stats {
position: absolute; position: absolute;
top: 64px; top: 64px;
@ -49,3 +50,4 @@
} }
} }
} }
}

6
src/components/TextInput.scss
View File

@ -2,18 +2,18 @@
.excalidraw { .excalidraw {
.TextInput { .TextInput {
color: var(--text-color-primary); color: var(--text-primary-color);
display: inline-block; display: inline-block;
border: 1.5px solid var(--button-gray-1); border: 1.5px solid var(--button-gray-1);
line-height: 1; line-height: 1;
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);
} }
} }

24
src/css/styles.scss
View File

@ -8,7 +8,7 @@
} }
.excalidraw { .excalidraw {
color: var(--text-color-primary); color: var(--text-primary-color);
display: flex; display: flex;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -50,10 +50,10 @@
} }
.FixedSideContainer { .FixedSideContainer {
padding-top: var(--sat, 0px); padding-top: var(--sat, 0);
padding-right: var(--sar, 0px); padding-right: var(--sar, 0);
padding-bottom: var(--sab, 0px); padding-bottom: var(--sab, 0);
padding-left: var(--sal, 0px); padding-left: var(--sal, 0);
} }
.panelRow { .panelRow {
@ -71,7 +71,7 @@
margin-top: 0.333rem; margin-top: 0.333rem;
margin-bottom: 0.333rem; margin-bottom: 0.333rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--text-color-primary); color: var(--text-primary-color);
font-weight: bold; font-weight: bold;
display: block; display: block;
} }
@ -237,10 +237,10 @@
left: 0; left: 0;
right: 0; right: 0;
--bar-padding: calc(4 * var(--space-factor)); --bar-padding: calc(4 * var(--space-factor));
padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"}; padding-top: #{"max(var(--bar-padding), var(--sat,0))"};
padding-right: var(--sar, 0px); padding-right: var(--sar, 0);
padding-bottom: var(--sab, 0px); padding-bottom: var(--sab, 0);
padding-left: var(--sal, 0px); padding-left: var(--sal, 0);
z-index: 4; z-index: 4;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -257,7 +257,7 @@
pointer-events: initial; pointer-events: initial;
.panelColumn { .panelColumn {
padding: 8px 8px 0px 8px; padding: 8px 8px 0 8px;
} }
} }
} }
@ -460,7 +460,7 @@
display: none; display: none;
} }
.scroll-back-to-content { .scroll-back-to-content {
bottom: calc(80px + var(--sab, 0px)); bottom: calc(80px + var(--sab, 0));
z-index: -1; z-index: -1;
} }
} }

84
src/css/theme.scss
View File

@ -1,43 +1,43 @@
@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}; --button-destructive-bg-color: #{$oc-red-1};
--space-factor: 0.25rem; --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}; --dialog-border-color: #{$oc-gray-6};
--input-hover-background-color: #{$oc-gray-1}; --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-label-color: #{$oc-gray-7}; --focus-highlight-color: #{$oc-blue-2};
--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: rgba(255, 255, 255, 0.9);
--keybinding-color: #{$oc-gray-5}; --keybinding-color: #{$oc-gray-5};
--sat: env(safe-area-inset-top); --link-color: #{$oc-blue-7};
--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); --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);
--shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
--overlay-background-color: #{transparentize($oc-white, 0.12)};
--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};
--select-highlight-color: #{$oc-blue-5}; --select-highlight-color: #{$oc-blue-5};
--appearance-filter: none; --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
--button-special-active-background-color: #{$oc-green-0}; --space-factor: 0.25rem;
--button-destructive-color: #{$oc-red-9}; --text-primary-color: #{$oc-gray-8};
--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};
--dialog-border: #{$oc-gray-6};
--link-color: #{$oc-blue-7};
} }
.excalidraw { .excalidraw {
&.Appearance_dark { &.Appearance_dark {
background: #000; background: $oc-black;
&.Appearance_dark-background-none { &.Appearance_dark-background-none {
background: none; background: none;
@ -45,31 +45,31 @@
} }
&.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; --dialog-border-color: #{$oc-gray-9};
--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};
--shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
--overlay-background-color: rgba(30, 30, 30, 0.88);
--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>'); --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}; --focus-highlight-color: #{$oc-blue-6};
--select-highlight-color: #{$oc-blue-4}; --icon-fill-color: #{$oc-gray-4};
--appearance-filter: invert(93%) hue-rotate(180deg); --icon-green-fill-color: #{$oc-green-4};
--button-special-active-background-color: #204624; --input-bg-color: #121212;
--button-destructive-color: #{$oc-red-3}; --input-border-color: #2e2e2e;
--button-destructive-background-color: #5a0000; --input-hover-bg-color: #181818;
--popup-secondary-background-color: #222; --input-label-color: #{$oc-gray-2};
--island-bg-color: #1e1e1e;
--keybinding-color: #{$oc-gray-6};
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
--popup-bg-color: #2c2c2c;
--popup-secondary-bg-color: #222;
--popup-text-color: #{$oc-gray-4}; --popup-text-color: #{$oc-gray-4};
--popup-text-inverted-color: #2c2c2c; --popup-text-inverted-color: #2c2c2c;
--dialog-border: #{$oc-gray-9}; --select-highlight-color: #{$oc-blue-4};
--shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
--text-primary-color: #{$oc-gray-4};
} }
} }

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

@ -7,7 +7,7 @@
} }
.RoomDialog-link { .RoomDialog-link {
color: var(--text-color-primary); color: var(--text-primary-color);
min-width: 0; min-width: 0;
flex: 1 1 auto; flex: 1 1 auto;
margin-inline-start: 1em; margin-inline-start: 1em;
@ -45,7 +45,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;
@ -67,7 +67,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 {