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

feat: new dark mode theme & light theme tweaks (#7104)

Browse Source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Barnabás Molnár 2023-10-12 14:58:33 +02:00 committed by GitHub
parent 26ff3993bb
commit b552166924
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 197 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Actions.scss
View File

@ -2,13 +2,13 @@
.undo-redo-buttons { .undo-redo-buttons {
background-color: var(--island-bg-color); background-color: var(--island-bg-color);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
box-shadow: 0 0 0 1px var(--color-surface-lowest);
} }
.zoom-button, .zoom-button,
.undo-redo-buttons button { .undo-redo-buttons button {
border: 1px solid var(--default-border-color) !important;
border-radius: 0 !important; border-radius: 0 !important;
background-color: transparent !important; background-color: var(--color-surface-low) !important;
font-size: 0.875rem !important; font-size: 0.875rem !important;
width: var(--lg-button-size); width: var(--lg-button-size);
height: var(--lg-button-size); height: var(--lg-button-size);

18
src/components/FilledButton.scss
View File

@ -12,32 +12,32 @@
&--color-primary { &--color-primary {
&.ExcButton--variant-filled { &.ExcButton--variant-filled {
--text-color: var(--input-bg-color); --text-color: var(--color-surface-lowest);
--back-color: var(--color-primary); --back-color: var(--color-primary);
&:hover { &:hover {
--back-color: var(--color-primary-darker); --back-color: var(--color-brand-hover);
} }
&:active { &:active {
--back-color: var(--color-primary-darkest); --back-color: var(--color-brand-active);
} }
} }
&.ExcButton--variant-outlined, &.ExcButton--variant-outlined,
&.ExcButton--variant-icon { &.ExcButton--variant-icon {
--text-color: var(--color-primary); --text-color: var(--color-primary);
--border-color: var(--color-primary); --border-color: var(--color-border-outline);
--back-color: var(--input-bg-color); --back-color: transparent;
&:hover { &:hover {
--text-color: var(--color-primary-darker); --text-color: var(--color-brand-hover);
--border-color: var(--color-primary-darker); --border-color: var(--color-brand-hover);
} }
&:active { &:active {
--text-color: var(--color-primary-darkest); --text-color: var(--color-brand-active);
--border-color: var(--color-primary-darkest); --border-color: var(--color-brand-active);
} }
} }
} }

17
src/components/HelpDialog.scss
View File

@ -19,20 +19,35 @@
} }
&__btn { &__btn {
--background: var(--color-surface-mid);
display: flex; display: flex;
column-gap: 0.5rem; column-gap: 0.5rem;
align-items: center; align-items: center;
border: 1px solid var(--default-border-color); background-color: var(--background);
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border: 1px solid var(--background);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
color: var(--text-primary-color); color: var(--text-primary-color);
font-weight: 600; font-weight: 600;
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.4px; letter-spacing: 0.4px;
@at-root .excalidraw.theme--dark#{&} {
--background: var(--color-surface-high);
&:hover {
--background: #363541;
}
}
&:hover { &:hover {
--background: var(--color-surface-high);
text-decoration: none; text-decoration: none;
} }
&:active {
border-color: var(--color-primary);
}
} }
&__link-icon { &__link-icon {

4
src/components/LibraryMenu.scss
View File

@ -99,10 +99,10 @@
font-size: 0.75rem; font-size: 0.75rem;
&:hover { &:hover {
background-color: var(--color-primary-darker); background-color: var(--color-brand-hover);
} }
&:active { &:active {
background-color: var(--color-primary-darkest); background-color: var(--color-brand-active);
} }
} }

25
src/components/RadioGroup.scss
View File

@ -1,27 +1,18 @@
@import "../css/variables.module"; @import "../css/variables.module";
.excalidraw { .excalidraw {
--RadioGroup-background: #ffffff; --RadioGroup-background: var(--island-bg-color);
--RadioGroup-border: var(--color-gray-30); --RadioGroup-border: var(--color-surface-high);
--RadioGroup-choice-color-off: var(--color-primary); --RadioGroup-choice-color-off: var(--color-primary);
--RadioGroup-choice-color-off-hover: var(--color-primary-darkest); --RadioGroup-choice-color-off-hover: var(--color-brand-hover);
--RadioGroup-choice-background-off: white; --RadioGroup-choice-background-off: var(--island-bg-color);
--RadioGroup-choice-background-off-active: var(--color-gray-20); --RadioGroup-choice-background-off-active: var(--color-surface-high);
--RadioGroup-choice-color-on: white; --RadioGroup-choice-color-on: var(--color-surface-lowest);
--RadioGroup-choice-background-on: var(--color-primary); --RadioGroup-choice-background-on: var(--color-primary);
--RadioGroup-choice-background-on-hover: var(--color-primary-darker); --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
--RadioGroup-choice-background-on-active: var(--color-primary-darkest); --RadioGroup-choice-background-on-active: var(--color-brand-active);
&.theme--dark {
--RadioGroup-background: var(--color-gray-85);
--RadioGroup-border: var(--color-gray-70);
--RadioGroup-choice-background-off: var(--color-gray-85);
--RadioGroup-choice-background-off-active: var(--color-gray-70);
--RadioGroup-choice-color-on: var(--color-gray-85);
}
.RadioGroup { .RadioGroup {
box-sizing: border-box; box-sizing: border-box;

3
src/components/Sidebar/SidebarTrigger.scss
View File

@ -3,8 +3,7 @@
.excalidraw { .excalidraw {
.sidebar-trigger { .sidebar-trigger {
@include outlineButtonStyles; @include outlineButtonStyles;
@include filledButtonOnCanvas;
background-color: var(--island-bg-color);
width: auto; width: auto;
height: var(--lg-button-size); height: var(--lg-button-size);

30
src/components/Switch.scss
View File

@ -1,15 +1,13 @@
@import "../css/variables.module"; @import "../css/variables.module";
.excalidraw { .excalidraw {
--Switch-disabled-color: #d6d6d6; --Switch-disabled-color: var(--color-border-outline);
--Switch-track-background: white; --Switch-disabled-toggled-background: var(--color-border-outline-variant);
--Switch-thumb-background: #3d3d3d; --Switch-disabled-border: var(--color-border-outline-variant);
--Switch-track-background: var(--island-bg-color);
&.theme--dark { --Switch-thumb-background: var(--color-on-surface);
--Switch-disabled-color: #5c5c5c; --Switch-hover-background: var(--color-brand-hover);
--Switch-track-background: #242424; --Switch-active-background: var(--color-brand-active);
--Switch-thumb-background: #b8b8b8;
}
.Switch { .Switch {
position: relative; position: relative;
@ -28,7 +26,11 @@
&:hover { &:hover {
background: var(--Switch-track-background); background: var(--Switch-track-background);
border: 1px solid #999999; border: 1px solid var(--Switch-hover-background);
}
&:active {
border: 1px solid var(--Switch-active-background);
} }
&.toggled { &.toggled {
@ -43,11 +45,11 @@
&.disabled { &.disabled {
background: var(--Switch-track-background); background: var(--Switch-track-background);
border: 1px solid var(--Switch-disabled-color); border: 1px solid var(--Switch-disabled-border);
&.toggled { &.toggled {
background: var(--Switch-disabled-color); background: var(--Switch-disabled-toggled-background);
border: 1px solid var(--Switch-disabled-color); border: 1px solid var(--Switch-disabled-toggled-background);
} }
} }
@ -92,7 +94,7 @@
} }
&.disabled.toggled:before { &.disabled.toggled:before {
background: var(--color-gray-50); background: var(--Switch-disabled-color);
} }
& input { & input {

33
src/components/TextField.scss
View File

@ -1,25 +1,16 @@
@import "../css/variables.module"; @import "../css/variables.module";
.excalidraw { .excalidraw {
--ExcTextField--color: var(--color-gray-80); --ExcTextField--color: var(--color-on-surface);
--ExcTextField--label-color: var(--color-gray-80); --ExcTextField--label-color: var(--color-on-surface);
--ExcTextField--background: white; --ExcTextField--background: transparent;
--ExcTextField--readonly--background: var(--color-gray-10); --ExcTextField--readonly--background: var(--color-surface-high);
--ExcTextField--readonly--color: var(--color-gray-80); --ExcTextField--readonly--color: var(--color-on-surface);
--ExcTextField--border: var(--color-gray-40); --ExcTextField--border: var(--color-border-outline);
--ExcTextField--border-hover: var(--color-gray-50); --ExcTextField--readonly--border: var(--color-border-outline-variant);
--ExcTextField--placeholder: var(--color-gray-40); --ExcTextField--border-hover: var(--color-brand-hover);
--ExcTextField--border-active: var(--color-brand-active);
&.theme--dark { --ExcTextField--placeholder: var(--color-border-outline-variant);
--ExcTextField--color: var(--color-gray-10);
--ExcTextField--label-color: var(--color-gray-20);
--ExcTextField--background: var(--color-gray-85);
--ExcTextField--readonly--background: var(--color-gray-80);
--ExcTextField--readonly--color: var(--color-gray-40);
--ExcTextField--border: var(--color-gray-70);
--ExcTextField--border-hover: var(--color-gray-60);
--ExcTextField--placeholder: var(--color-gray-80);
}
.ExcTextField { .ExcTextField {
&--fullWidth { &--fullWidth {
@ -61,7 +52,7 @@
&:active, &:active,
&:focus-within { &:focus-within {
border-color: var(--color-primary); border-color: var(--ExcTextField--border-active);
} }
} }
@ -107,7 +98,7 @@
&--readonly { &--readonly {
background: var(--ExcTextField--readonly--background); background: var(--ExcTextField--readonly--background);
border-color: transparent; border-color: var(--ExcTextField--readonly--border);
& input { & input {
color: var(--ExcTextField--readonly--color); color: var(--ExcTextField--readonly--color);

5
src/components/ToolIcon.scss
View File

@ -97,10 +97,6 @@
} }
} }
// &:hover {
// background-color: var(--button-gray-2);
// }
&:active { &:active {
background-color: var(--button-gray-3); background-color: var(--button-gray-3);
} }
@ -110,7 +106,6 @@
} }
&--hide { &--hide {
// visibility: hidden;
display: none !important; display: none !important;
} }
} }

1
src/components/Toolbar.scss
View File

@ -22,6 +22,7 @@
.App-toolbar__extra-tools-trigger { .App-toolbar__extra-tools-trigger {
box-shadow: none; box-shadow: none;
border: 0; border: 0;
background-color: transparent;
&:active { &:active {
background-color: var(--button-hover-bg); background-color: var(--button-hover-bg);

44
src/components/dropdownMenu/DropdownMenu.scss
View File

@ -16,7 +16,7 @@
.dropdown-menu-container { .dropdown-menu-container {
padding: 8px 8px; padding: 8px 8px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--island-bg-color); // background-color: var(--island-bg-color);
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
position: relative; position: relative;
@ -29,7 +29,7 @@
} }
.dropdown-menu-container { .dropdown-menu-container {
background-color: #fff !important; background-color: var(--island-bg-color);
max-height: calc(100vh - 150px); max-height: calc(100vh - 150px);
overflow-y: auto; overflow-y: auto;
--gap: 2; --gap: 2;
@ -40,7 +40,7 @@
padding: 0 0.625rem; padding: 0 0.625rem;
column-gap: 0.625rem; column-gap: 0.625rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-gray-100); color: var(--color-on-surface);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-weight: normal; font-weight: normal;
@ -49,7 +49,7 @@
.dropdown-menu-item { .dropdown-menu-item {
background-color: transparent; background-color: transparent;
border: 0; border: 1px solid transparent;
align-items: center; align-items: center;
height: 2rem; height: 2rem;
cursor: pointer; cursor: pointer;
@ -80,6 +80,11 @@
text-decoration: none; text-decoration: none;
} }
&:active {
background-color: var(--button-hover-bg);
border-color: var(--color-brand-active);
}
svg { svg {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -98,22 +103,33 @@
font-weight: 500; font-weight: 500;
} }
} }
&.theme--dark {
.dropdown-menu-item {
color: var(--color-gray-40);
}
.dropdown-menu-container {
background-color: var(--color-gray-90) !important;
}
}
.dropdown-menu-button { .dropdown-menu-button {
@include outlineButtonStyles; @include outlineButtonStyles;
background-color: var(--island-bg-color);
width: var(--lg-button-size); width: var(--lg-button-size);
height: var(--lg-button-size); height: var(--lg-button-size);
--background: var(--color-surface-mid);
background-color: var(--background);
@at-root .excalidraw.theme--dark#{&} {
--background: var(--color-surface-high);
&:hover {
--background: #363541;
}
}
&:hover {
--background: var(--color-surface-high);
background-color: var(--background);
text-decoration: none;
}
&:active {
border-color: var(--color-primary);
}
svg { svg {
width: var(--lg-icon-size); width: var(--lg-icon-size);
height: var(--lg-icon-size); height: var(--lg-icon-size);

2
src/components/live-collaboration/LiveCollaborationTrigger.scss
View File

@ -14,6 +14,8 @@
--button-active-bg: var(--color-primary-darker); --button-active-bg: var(--color-primary-darker);
box-shadow: 0 0 0 1px var(--color-surface-lowest);
flex-shrink: 0; flex-shrink: 0;
// double .active to force specificity // double .active to force specificity

1
src/components/main-menu/MainMenu.tsx
View File

@ -43,6 +43,7 @@ const MainMenu = Object.assign(
}); });
}} }}
data-testid="main-menu-trigger" data-testid="main-menu-trigger"
className="main-menu-trigger"
> >
{HamburgerMenuIcon} {HamburgerMenuIcon}
</DropdownMenu.Trigger> </DropdownMenu.Trigger>

11
src/components/welcome-screen/WelcomeScreen.scss
View File

@ -174,7 +174,7 @@
justify-content: space-between; justify-content: space-between;
background: none; background: none;
border: none; border: 1px solid transparent;
padding: 0.75rem; padding: 0.75rem;
@ -204,7 +204,7 @@
.welcome-screen-menu-item:hover { .welcome-screen-menu-item:hover {
text-decoration: none; text-decoration: none;
background: var(--color-gray-10); background: var(--button-hover-bg);
.welcome-screen-menu-item__shortcut { .welcome-screen-menu-item__shortcut {
color: var(--color-gray-50); color: var(--color-gray-50);
@ -216,7 +216,8 @@
} }
.welcome-screen-menu-item:active { .welcome-screen-menu-item:active {
background: var(--color-gray-20); background: var(--button-hover-bg);
border-color: var(--color-brand-active);
.welcome-screen-menu-item__shortcut { .welcome-screen-menu-item__shortcut {
color: var(--color-gray-50); color: var(--color-gray-50);
@ -247,8 +248,7 @@
} }
.welcome-screen-menu-item:hover { .welcome-screen-menu-item:hover {
background: var(--color-gray-85); background-color: var(--color-surface-low);
.welcome-screen-menu-item__shortcut { .welcome-screen-menu-item__shortcut {
color: var(--color-gray-50); color: var(--color-gray-50);
} }
@ -259,7 +259,6 @@
} }
.welcome-screen-menu-item:active { .welcome-screen-menu-item:active {
background-color: var(--color-gray-90);
.welcome-screen-menu-item__text { .welcome-screen-menu-item__text {
color: var(--color-gray-10); color: var(--color-gray-10);
} }

19
src/css/styles.scss
View File

@ -444,13 +444,14 @@
} }
&:active { &:active {
border: 1px solid var(--color-primary-darkest); border: 1px solid var(--button-active-border);
} }
} }
.help-icon { .help-icon {
@include outlineButtonStyles; @include outlineButtonStyles;
background-color: var(--island-bg-color); @include filledButtonOnCanvas;
width: var(--lg-button-size); width: var(--lg-button-size);
height: var(--lg-button-size); height: var(--lg-button-size);
@ -621,6 +622,20 @@
padding: 0; padding: 0;
} }
} }
.main-menu-trigger {
@include filledButtonOnCanvas;
}
.App-menu__left {
--button-border: transparent;
--button-bg: var(--color-surface-mid);
@at-root .excalidraw.theme--dark#{&} {
--button-hover-bg: #363541;
--button-bg: var(--color-surface-high);
}
}
} }
.ErrorSplash.excalidraw { .ErrorSplash.excalidraw {

68
src/css/theme.scss
View File

@ -12,27 +12,30 @@
--dialog-border-color: var(--color-gray-20); --dialog-border-color: var(--color-gray-20);
--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>'); --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}; --focus-highlight-color: #{$oc-blue-2};
--icon-fill-color: var(--color-gray-80); --icon-fill-color: var(--color-on-surface);
--icon-green-fill-color: #{$oc-green-9}; --icon-green-fill-color: #{$oc-green-9};
--default-bg-color: #{$oc-white}; --default-bg-color: #{$oc-white};
--input-bg-color: #{$oc-white}; --input-bg-color: #{$oc-white};
--input-border-color: #{$oc-gray-4}; --input-border-color: #{$oc-gray-4};
--input-hover-bg-color: #{$oc-gray-1}; --input-hover-bg-color: #{$oc-gray-1};
--input-label-color: #{$oc-gray-7}; --input-label-color: #{$oc-gray-7};
--island-bg-color: rgba(255, 255, 255, 0.96); --island-bg-color: #ffffff;
--keybinding-color: var(--color-gray-40); --keybinding-color: var(--color-gray-40);
--link-color: #{$oc-blue-7}; --link-color: #{$oc-blue-7};
--overlay-bg-color: #{transparentize($oc-white, 0.12)}; --overlay-bg-color: #{transparentize($oc-white, 0.12)};
--popup-bg-color: #{$oc-white}; --popup-bg-color: var(--island-bg-color);
--popup-secondary-bg-color: #{$oc-gray-1}; --popup-secondary-bg-color: #{$oc-gray-1};
--popup-text-color: #{$oc-black}; --popup-text-color: #{$oc-black};
--popup-text-inverted-color: #{$oc-white}; --popup-text-inverted-color: #{$oc-white};
--select-highlight-color: #{$oc-blue-5}; --select-highlight-color: #{$oc-blue-5};
--shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05), --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
0px 0px 0.931014px rgba(0, 0, 0, 0.1702); 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
--button-hover-bg: var(--color-gray-10);
--default-border-color: var(--color-gray-30); --button-hover-bg: var(--color-surface-high);
--button-active-bg: var(--color-surface-high);
--button-active-border: var(--color-brand-active);
--default-border-color: var(--color-surface-high);
--default-button-size: 2rem; --default-button-size: 2rem;
--default-icon-size: 1rem; --default-icon-size: 1rem;
@ -63,14 +66,14 @@
0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802); 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
--sidebar-border-color: var(--color-gray-20); --sidebar-border-color: var(--color-surface-high);
--sidebar-bg-color: #fff; --sidebar-bg-color: var(--island-bg-color);
--library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01), --library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01),
0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09), 0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09),
0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
--space-factor: 0.25rem; --space-factor: 0.25rem;
--text-primary-color: var(--color-gray-80); --text-primary-color: var(--color-on-surface);
--color-selection: #6965db; --color-selection: #6965db;
@ -132,6 +135,19 @@
--border-radius-md: 0.375rem; --border-radius-md: 0.375rem;
--border-radius-lg: 0.5rem; --border-radius-lg: 0.5rem;
--color-surface-high: hsl(244, 100%, 97%);
--color-surface-mid: hsl(240 25% 96%);
--color-surface-low: hsl(240 25% 94%);
--color-surface-lowest: #ffffff;
--color-on-surface: #1b1b1f;
--color-brand-hover: #5753d0;
--color-on-primary-container: #030064;
--color-surface-primary-container: #e0dfff;
--color-brand-active: #4440bf;
--color-border-outline: #767680;
--color-border-outline-variant: #c5c5d0;
--color-surface-primary-container: #e0dfff;
&.theme--dark { &.theme--dark {
&.theme--dark-background-none { &.theme--dark-background-none {
background: none; background: none;
@ -150,29 +166,24 @@
--dialog-border-color: var(--color-gray-80); --dialog-border-color: var(--color-gray-80);
--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};
--icon-fill-color: var(--color-gray-40);
--icon-green-fill-color: #{$oc-green-4}; --icon-green-fill-color: #{$oc-green-4};
--default-bg-color: #121212; --default-bg-color: #121212;
--input-bg-color: #121212; --input-bg-color: #121212;
--input-border-color: #2e2e2e; --input-border-color: #2e2e2e;
--input-hover-bg-color: #181818; --input-hover-bg-color: #181818;
--input-label-color: #{$oc-gray-2}; --input-label-color: #{$oc-gray-2};
--island-bg-color: #262627; --island-bg-color: #232329;
--keybinding-color: var(--color-gray-60); --keybinding-color: var(--color-gray-60);
--link-color: #{$oc-blue-4}; --link-color: #{$oc-blue-4};
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)}; --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
--popup-bg-color: #2c2c2c;
--popup-secondary-bg-color: #222; --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;
--select-highlight-color: #{$oc-blue-4}; --select-highlight-color: #{$oc-blue-4};
--text-primary-color: var(--color-gray-40); --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
--button-hover-bg: var(--color-gray-80); 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
--default-border-color: var(--color-gray-80); 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
--shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),
0px 1.13px 4.13211px rgba(0, 0, 0, 0.035),
0px 0.769896px 1.4945px rgba(0, 0, 0, 0.0243888);
--modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@ -180,8 +191,6 @@
0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802); 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
--avatar-border-color: var(--color-gray-85); --avatar-border-color: var(--color-gray-85);
--sidebar-border-color: var(--color-gray-85);
--sidebar-bg-color: #191919;
--scrollbar-thumb: #{$oc-gray-8}; --scrollbar-thumb: #{$oc-gray-8};
--scrollbar-thumb-hover: #{$oc-gray-7}; --scrollbar-thumb-hover: #{$oc-gray-7};
@ -224,5 +233,18 @@
--color-promo: #d297ff; --color-promo: #d297ff;
--color-logo-text: #e2dfff; --color-logo-text: #e2dfff;
--color-surface-high: hsl(245, 10%, 21%);
--color-surface-low: hsl(240, 8%, 15%);
--color-surface-mid: hsl(240 6% 10%);
--color-surface-lowest: hsl(0, 0%, 7%);
--color-on-surface: #e3e3e8;
--color-brand-hover: #bbb8ff;
--color-on-primary-container: #e0dfff;
--color-surface-primary-container: #403e6a;
--color-brand-active: #d0ccff;
--color-border-outline: #8e8d9c;
--color-border-outline-variant: #46464f;
--color-surface-primary-container: #403e6a;
} }
} }

40
src/css/variables.module.scss
View File

@ -11,7 +11,7 @@
.ToolIcon_type_radio, .ToolIcon_type_radio,
.ToolIcon_type_checkbox { .ToolIcon_type_checkbox {
&:checked + .ToolIcon__icon { &:checked + .ToolIcon__icon {
--icon-fill-color: var(--color-primary-darker); --icon-fill-color: var(--color-on-primary-container);
svg { svg {
fill: var(--icon-fill-color); fill: var(--icon-fill-color);
@ -23,11 +23,11 @@
.ToolIcon_type_radio, .ToolIcon_type_radio,
.ToolIcon_type_checkbox { .ToolIcon_type_checkbox {
&:checked + .ToolIcon__icon { &:checked + .ToolIcon__icon {
background: var(--color-primary-light); background: var(--color-surface-primary-container);
--keybinding-color: var(--color-gray-60); --keybinding-color: var(--color-on-primary-container);
svg { svg {
color: var(--color-primary-darker); color: var(--color-on-primary-container);
} }
} }
} }
@ -44,7 +44,11 @@
&:active { &:active {
background: var(--button-hover-bg); background: var(--button-hover-bg);
border: 1px solid var(--color-primary-darkest); border: 1px solid var(--button-active-border);
svg {
color: var(--color-on-primary-container);
}
} }
} }
} }
@ -63,7 +67,7 @@
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
cursor: pointer; cursor: pointer;
background-color: var(--button-bg, var(--island-bg-color)); background-color: var(--button-bg, var(--island-bg-color));
color: var(--button-color, var(--text-primary-color)); color: var(--button-color, var(--color-on-surface));
svg { svg {
width: var(--button-width, var(--lg-icon-size)); width: var(--button-width, var(--lg-icon-size));
@ -88,22 +92,38 @@
} }
&.active { &.active {
background-color: var(--button-selected-bg, var(--color-primary-light)); background-color: var(
border-color: var(--button-selected-border, var(--color-primary-light)); --button-selected-bg,
var(--color-surface-primary-container)
);
border-color: var(
--button-selected-border,
var(--color-surface-primary-container)
);
&:hover { &:hover {
background-color: var( background-color: var(
--button-selected-hover-bg, --button-selected-hover-bg,
var(--color-primary-light) var(--color-surface-primary-container)
); );
} }
svg { svg {
color: var(--button-color, var(--color-primary-darker)); color: var(--button-color, var(--color-on-primary-container));
} }
} }
} }
@mixin filledButtonOnCanvas {
border: none;
box-shadow: 0 0 0 1px var(--color-surface-lowest);
background-color: var(--color-surface-low);
&:active {
box-shadow: 0 0 0 1px var(--color-brand-active);
}
}
$theme-filter: "invert(93%) hue-rotate(180deg)"; $theme-filter: "invert(93%) hue-rotate(180deg)";
$right-sidebar-width: "302px"; $right-sidebar-width: "302px";