wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-14 12:25:17 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update white theme (#1419)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-04-16 06:03:31 +03:00 committed by GitHub
parent caa5d9708d
commit 5dee8d9072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 72 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
packages/theme/styles/_colors.scss
View File

@ -86,15 +86,24 @@
--button-border-color: #3c3f44;
--button-border-hover: #45484e;
--button-shadow: rgb(0 0 0 / 25%) 0px 1px 1px;
--button-disabled-color: #313236;
--noborder-bg-color: #313236;
--noborder-bg-hover: #37383b;
--primary-bg-color: #5e6ad2;
--primary-bg-hover: #717ce1;
--primary-toggle-hover: #828fff;
--primary-edit-border-color: #6499ff;
--primary-shadow: rgb(0 0 0 / 25%) 0px 1px 2px;
--dangerous-bg-color: #eb5757;
--dangerous-bg-hover: #ff6464;
--dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;
--toggle-sw-color: #27282b;
--toggle-on-sw-color: #fff;
--toggle-bg-color: #3c3f44;
--toggle-bg-hover: #45484e;
--toggle-on-bg-color: #5e6ad2;
--toggle-on-bg-hover: #828fff;
--theme-bg-color: #18181e;
--theme-bg-selection: #282830;
--theme-menu-color: #111117;
@ -176,112 +185,60 @@
--theme-text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.25);
}
/* Grey Theme */
.theme-grey {
--theme-bg-color: #393844;
--theme-bg-selection: #454351;
--theme-menu-color: #2C2B35;
--theme-menu-selection: #37363F;
--theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #494852;
// --theme-dialog-bg: rgba(31, 31, 37, .8);
--theme-dialog-accent: rgba(255, 255, 255, .03);
--theme-dialog-divider: rgba(255, 255, 255, .1);
--theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
--theme-border-modal: rgba(0, 0, 0, .2);
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
--theme-chat-divider: rgb(66, 65, 76);
--theme-incoming-msg: rgba(67, 67, 72, .3);
--theme-outcoming-msg: rgba(67, 67, 72, .6);
--theme-card-bg: #282830;
--theme-card-bg-dark: rgba(222, 222, 240, .1);
--theme-card-divider: rgba(255, 255, 255, .1);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .8);
--theme-avatar-border: rgba(255, 255, 255, .1);
--theme-msgbox-bg: #45444F;
--theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
--theme-zone-bg: rgba(255, 255, 255, .05);
--theme-zone-border: rgba(255, 255, 255, .2);
--theme-zone-border-lite: rgba(255, 255, 255, .16);
--theme-bg-accent-color: rgba(255, 255, 255, .03);
--theme-bg-accent-hover: rgba(255, 255, 255, .06);
--theme-bg-accent-press: rgba(255, 255, 255, .07);
--theme-bg-focused-color: rgba(255, 255, 255, .1);
--theme-bg-focused-border: rgba(255, 255, 255, .4);
--theme-bg-accent-error: rgba(251, 158, 158, .06);
--theme-on-color: #4474F6;
--theme-off-color: #494853;
--theme-bg-check: #F2F2F2;
--theme-tooltip-color: #4D4C58;
--theme-showmore-color: #484850;
--theme-button-bg-enabled: #3F3E4A;
--theme-button-bg-hovered: #45444F;
--theme-button-bg-pressed: #494853;
--theme-button-bg-disabled: #41404B;
--theme-button-bg-focused: #4D4C57;
--theme-button-bg-error: #453E49;
--theme-button-border-enabled: rgba(255, 255, 255, .06);
--theme-button-border-hovered: rgba(255, 255, 255, .08);
--theme-button-border-pressed: rgba(255, 255, 255, .12);
--theme-button-border-disabled: rgba(255, 255, 255, .06);
--theme-button-border-focused: rgba(255, 255, 255, .4);
--theme-button-border-error: rgba(205, 104, 104, .1);
--theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
--theme-circle-select: #3F3E4A;
--theme-circle-trans: rgba(31, 31, 37, .3);
--theme-circle-border: rgba(255, 255, 255, .2);
--theme-table-bg-color: rgba(255, 255, 255, .02);
--theme-table-bg-hover: rgba(255, 255, 255, .04);
--theme-popup-bg: rgba(222, 222, 240, .2);
--theme-popup-bg-hover: rgba(37, 37, 42, .4);
--theme-popup-border: transparent;
--theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
--theme-caption-color: #fff;
--theme-content-accent-color: rgba(255, 255, 255, 0.8);
--theme-content-color: rgba(255, 255, 255, 0.6);
--theme-content-dark-color: rgba(255, 255, 255, 0.4);
--theme-content-trans-color: rgba(255, 255, 255, 0.3);
--theme-userlink-color: #b92d52;
--theme-userlink-hover: #b92d52;
--theme-doclink-color: #2d6ab9;
--theme-doclink-hover: #2d6ab9;
--theme-status-online: #6cd871;
--theme-shadow: 0px 4px 8px rgba(15, 15, 15, 0.5);
}
/* Light Theme */
.theme-light {
--body-color: #fff;
--body-accent: #eee; // HZ
--content-color: #6b6f76;
--accent-color: #3c4149;
--board-bg-color: #f4f5f8;
--board-card-bg-color: #fff;
--board-card-bg-hover: rgb(252, 252, 252);
--board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px;
--accent-bg-color: #f8f9fb; // HZ
--accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px; // Dark
--dark-color: #90959d;
--content-color: #3c4149;
--accent-color: #282a30;
--caption-color: #282a30;
--white-color: #fff;
--caret-color: #6e5ed2;
--warning-color: #f2994a; // Dark
--error-color: #eb5757; // Dark
--divider-color: #00000010;
--menu-bg-select: #f0f3f9;
--menu-icon-hover: #282a30;
--divider-color: #00000010;
--popup-bg-color: linear-gradient(136.61deg, rgb(255, 255, 255) 13.72%, rgb(255, 255, 255) 74.3%);
--popup-bg-hover: #f8f9fb;
--popup-divider: #eff1f4;
--popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px; // Dark
--card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
--card-overlay-color: rgba(144, 149, 157, .4);
--avatar-bg-color: #e0e0e0; // HZ
--button-bg-color: #fff;
--button-bg-hover: #f4f5f8;
--button-border-color: #dfe1e4;
--button-border-hover: #c9cbcd;
--button-shadow: rgb(0 0 0 / 7%) 0px 1px 1px;
--button-disabled-color: #eff1f4;
--noborder-bg-color: #eff1f4;
--noborder-bg-hover: #f4f5f8;
--primary-bg-color: #6e79d6;
--primary-bg-hover: #5c67c7;
--primary-edit-border-color: #2161dc;
--primary-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
--dangerous-bg-color: #eb5757;
--dangerous-bg-hover: #d44e4e;
--dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;
--toggle-sw-color: #fff;
--toggle-on-sw-color: #fff;
--toggle-bg-color: #dfe1e4;
--toggle-bg-hover: #c9cbcd;
--toggle-on-bg-color: #6e79d6;
--toggle-on-bg-hover: #535db3;
--theme-bg-color: #FFFFFF;
--theme-bg-selection: #F1F1F4;
--theme-menu-color: #E7E7E7;

14
packages/ui/src/components/Button.svelte
View File

@ -126,7 +126,7 @@
.btn-icon { color: var(--caption-color); }
}
&:disabled {
color: rgb(var(--accent-color) / 40%);
color: rgb(var(--caption-color) / 40%);
cursor: not-allowed;
}
@ -144,25 +144,25 @@
border-color: var(--button-border-hover);
}
&:disabled {
background-color: #30323655;
border-color: #3c3f4455;
background-color: var(--button-disabled-color);
border-color: transparent;
}
}
&.no-border {
font-weight: 400;
color: var(--accent-color);
background-color: var(--button-bg-color);
background-color: var(--noborder-bg-color);
box-shadow: var(--button-shadow);
&:hover {
color: var(--caption-color);
background-color: var(--button-bg-hover);
background-color: var(--noborder-bg-hover);
.btn-icon { color: var(--caption-color); }
}
&:disabled {
color: var(--content-color);
background-color: #30323655;
background-color: var(--button-disabled-color);
cursor: default;
&:hover {
color: var(--content-color);
@ -197,7 +197,7 @@
border-color: var(--primary-bg-color);
box-shadow: var(--primary-shadow);
.btn-icon { color: var(--caption-color); }
.btn-icon { color: var(--white-color); }
&:hover { background-color: var(--primary-bg-hover); }
&:disabled {
background-color: #5e6ad255;

2
packages/ui/src/components/DropdownLabelsPopup.svelte
View File

@ -41,7 +41,7 @@
<button class="menu-item flex-between" on:click={() => { dispatch('close', item.id) }}>
<div class="flex-grow caption-color lines-limit-2">{item.label}</div>
{#if item.id === selected}
<div class="check"><CheckBox checked primary /></div>
<div class="check-right"><CheckBox checked primary /></div>
{/if}
</button>
{/each}

11
packages/ui/src/components/MiniToggle.svelte
View File

@ -50,11 +50,11 @@
overflow: hidden;
&:checked + .toggle-switch {
background-color: var(--primary-bg-color);
&:hover { background-color: var(--primary-toggle-hover); }
background-color: var(--toggle-on-bg-color);
&:hover { background-color: var(--toggle-on-bg-hover); }
&:before {
left: 9px;
background: var(--white-color);
background: var(--toggle-on-sw-color);
}
}
&:not(:disabled) + .toggle-switch { cursor: pointer; }
@ -71,7 +71,7 @@
width: 22px;
height: 14px;
border-radius: 4.5rem;
background-color: var(--button-border-color);
background-color: var(--toggle-bg-color);
transition: left .2s, background-color .2s;
&:before {
content: '';
@ -82,10 +82,11 @@
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-bg-color);
background: var(--toggle-sw-color);
// box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
transition: all .1s ease-out;
}
&:hover { background-color: var(--toggle-bg-hover); }
}
&-label {

11
packages/ui/src/components/Toggle.svelte
View File

@ -43,11 +43,11 @@
overflow: hidden;
&:checked + .toggle-switch {
background-color: var(--primary-bg-color);
&:hover { background-color: var(--primary-toggle-hover); }
background-color: var(--toggle-on-bg-color);
&:hover { background-color: var(--toggle-on-bg-hover); }
&:before {
left: .75rem;
background: var(--white-color);
background: var(--toggle-on-sw-color);
}
}
&:not(:disabled) + .toggle-switch { cursor: pointer; }
@ -64,7 +64,7 @@
width: 2rem;
height: 1.5rem;
border-radius: 4.5rem;
background-color: var(--button-border-color);
background-color: var(--toggle-bg-color);
transition: left .2s, background-color .2s;
&:before {
content: '';
@ -75,10 +75,11 @@
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--body-color);
background: var(--toggle-sw-color);
box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
transition: .15s;
}
&:hover { background-color: var(--toggle-bg-hover); }
}
}
</style>

6
packages/ui/src/components/calendar/DatePresenter.svelte
View File

@ -113,7 +113,7 @@
white-space: nowrap;
line-height: 1.5rem;
color: var(--accent-color);
background-color: var(--button-bg-color);
background-color: var(--noborder-bg-color);
border: 1px solid transparent;
border-radius: 0.25rem;
box-shadow: var(--button-shadow);
@ -157,7 +157,7 @@
cursor: pointer;
&:hover {
background-color: var(--button-bg-hover);
background-color: var(--noborder-bg-hover);
.btn-icon {
&.normal {
color: var(--caption-color);
@ -184,7 +184,7 @@
}
}
&:disabled {
background-color: #30323655;
background-color: var(--button-disabled-color);
cursor: default;
&:hover {

6
packages/ui/src/components/calendar/DateRangePresenter.svelte
View File

@ -364,7 +364,7 @@
white-space: nowrap;
line-height: 1.5rem;
color: var(--accent-color);
background-color: var(--button-bg-color);
background-color: var(--noborder-bg-color);
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: var(--button-shadow);
@ -392,7 +392,7 @@
cursor: pointer;
&:hover {
background-color: var(--button-bg-hover);
background-color: var(--noborder-bg-hover);
.btn-icon {
&.normal { color: var(--caption-color); }
&.warning { color: var(--warning-color); }
@ -407,7 +407,7 @@
}
}
&:disabled {
background-color: #30323655;
background-color: var(--button-disabled-color);
cursor: default;
&:hover {

2
packages/ui/src/components/internal/ThemeSelector.svelte
View File

@ -4,7 +4,7 @@
const { currentTheme, setTheme } = getContext('theme')
const themes = ['theme-light', 'theme-grey', 'theme-dark']
const themes = ['theme-light', 'theme-dark']
let current = themes.indexOf(currentTheme)

2
plugins/contact-resources/src/components/Contacts.svelte
View File

@ -39,7 +39,7 @@
}
</script>
<div class="antiPanel-component filled">
<div class="antiPanel-component">
<div class="ac-header full">
<div class="ac-header__wrap-title">
<div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'}/></div>

4
plugins/recruit-resources/src/components/YesNo.svelte
View File

@ -57,7 +57,7 @@
line-height: 1.5rem;
white-space: nowrap;
color: var(--accent-color);
background-color: var(--button-bg-color);
background-color: var(--noborder-bg-color);
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: var(--button-shadow);
@ -71,7 +71,7 @@
}
&:hover {
color: var(--caption-color);
background-color: var(--button-bg-hover);
background-color: var(--noborder-bg-hover);
transition-duration: 0;
.btn-icon { color: var(--caption-color); }