hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-22 19:11:33 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Clean theme (#2723)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-03-13 07:19:09 +03:00 committed by GitHub
parent da6c2eda0a
commit 78aa090ef5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 31 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/presentation/src/components/AssigneePopup.svelte
View File

@ -198,7 +198,7 @@
<EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
</div>
{#if cHeight === 1}
<div class="background-theme-content-accent" style:height={'1px'} />
<div class="background-content-accent-color" style:height={'1px'} />
{/if}
<div
class="scroll"
@ -233,7 +233,7 @@
{@const obj = contacts[item]}
<button
class="menu-item w-full"
class:background-bg-focused={obj._id === selected}
class:background-button-bg-color={obj._id === selected}
class:border-radius-1={obj._id === selected}
on:click={() => {
handleSelection(undefined, item)
@ -274,7 +274,7 @@
</div>
</div>
{#if cHeight === -1}
<div class="background-theme-content-accent" style:height={'3px'} />
<div class="background-content-accent-color" style:height={'3px'} />
{/if}
</div>

6
packages/presentation/src/components/ObjectPopup.svelte
View File

@ -228,7 +228,7 @@
{/if}
</div>
{#if cHeight === 1}
<div class="background-theme-content-accent" style:height={'2px'} />
<div class="background-content-accent-color" style:height={'2px'} />
{/if}
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
<div class="box">
@ -248,7 +248,7 @@
{@const obj = objects[item]}
<button
class="menu-item w-full flex-row-center"
class:background-bg-focused={!allowDeselect && obj._id === selected}
class:background-button-bg-color={!allowDeselect && obj._id === selected}
class:border-radius-1={!allowDeselect && obj._id === selected}
disabled={readonly}
on:click={() => {
@ -291,7 +291,7 @@
</div>
</div>
{#if cHeight === -1}
<div class="background-theme-content-accent" style:height={'2px'} />
<div class="background-content-accent-color" style:height={'2px'} />
{/if}
</div>

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

@ -127,84 +127,6 @@
--trans-content-05: rgba(138, 143, 152, .05);
--trans-content-10: rgba(138, 143, 152, .1);
--trans-content-20: rgba(138, 143, 152, .2);
--theme-bg-color: #18181e;
--theme-bg-selection: #282830;
--theme-bg-checked: #262b39;
--theme-bg-checked-hover: #2d3344;
--theme-menu-color: #111117;
--theme-menu-selection: #1D1D23;
--theme-menu-divider: rgba(255, 255, 255, .05);
// --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(36, 36, 41);
--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-msgbox-bg: #26262B;
--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-normal: #1f1f25;
--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: #2A2A30;
--theme-bg-check: #F2F2F2;
--theme-tooltip-color: #2F2F34;
--theme-showmore-color: #484850;
--theme-button-bg-enabled: #1F1F25;
--theme-button-bg-hovered: #26262B;
--theme-button-bg-pressed: #2A2A30;
--theme-button-bg-disabled: #212127;
--theme-button-bg-focused: #2F2F34;
--theme-button-bg-error: #262026;
--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: #1F1F25;
--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);
--theme-text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.25);
}
/* Light Theme */
@ -284,78 +206,4 @@
--trans-content-05: rgba(60, 65, 73, .05);
--trans-content-10: rgba(60, 65, 73, .1);
--trans-content-20: rgba(60, 65, 73, .2);
--theme-bg-color: #FFFFFF;
--theme-bg-selection: #F1F1F4;
--theme-menu-color: #E7E7E7;
--theme-menu-selection: #DBDBDB;
--theme-menu-divider: rgba(0, 0, 0, .08);
// --theme-dialog-bg: rgba(255, 255, 255, .4);
--theme-dialog-accent: rgba(31, 33, 43, .03);
--theme-dialog-divider: rgba(31, 33, 43, .06);
--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(233, 233, 233);
--theme-card-bg: #FFF;
--theme-card-bg-dark: rgba(255, 255, 255, .3);
--theme-card-divider: rgba(0, 0, 0, .1);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
--theme-msgbox-bg: #F2F2F2;
--theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .2);
--theme-zone-bg: rgba(0, 0, 0, .05);
--theme-zone-border: rgba(0, 0, 0, .2);
--theme-zone-border-lite: rgba(0, 0, 0, .16);
--theme-bg-accent-color: rgba(0, 0, 0, .03);
--theme-bg-accent-hover: rgba(0, 0, 0, .05);
--theme-bg-accent-press: rgba(0, 0, 0, .07);
--theme-bg-focused-color: rgba(0, 0, 0, .03);
--theme-bg-focused-border: rgba(0, 0, 0, .4);
--theme-bg-accent-error: rgba(251, 158, 158, .06);
--theme-on-color: #4474F6;
--theme-off-color: #DBDBDB;
--theme-bg-check: #45444F;
--theme-tooltip-color: #F1F1F4;
--theme-showmore-color: #484850;
--theme-button-bg-enabled: #F7F7F7;
--theme-button-bg-hovered: #F2F2F2;
--theme-button-bg-pressed: #EDEDED;
--theme-button-bg-disabled: #F7F7F7;
--theme-button-bg-focused: #F7F7F7;
--theme-button-bg-error: #FEF2F2;
--theme-button-border-enabled: rgba(0, 0, 0, .06);
--theme-button-border-hovered: rgba(0, 0, 0, .06);
--theme-button-border-pressed: rgba(255, 255, 255, .06);
--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: #E7E7E7;
--theme-circle-select: #F7F7F7;
--theme-circle-trans: #F7F7F7;
--theme-circle-border: rgba(31, 33, 43, .2);
--theme-table-bg-color: rgba(0, 0, 0, .02);
--theme-table-bg-hover: rgba(0, 0, 0, .04);
--theme-popup-bg: #fff;
--theme-popup-bg-hover: #F2F2F2;
--theme-popup-border: 1px solid rgba(0, 0, 0, .06);
--theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
--theme-caption-color: #1F212B;
--theme-content-accent-color: rgba(31, 33, 43, .8);
--theme-content-color: rgba(31, 33, 43, .6);
--theme-content-dark-color: rgba(31, 33, 43, .4);
--theme-content-trans-color: rgba(31, 33, 43, 0.3);
--theme-userlink-color: #b92d52;
--theme-userlink-hover: #b92d52;
--theme-doclink-color: #2d6ab9;
--theme-doclink-hover: #2d6ab9;
--theme-status-online: #4ebc53;
--theme-shadow: 0px 4px 8px rgba(155, 155, 155, 0.5);
}

18
packages/theme/styles/_layouts.scss
View File

@ -769,25 +769,16 @@ a.no-line {
.background-body-color { background-color: var(--body-color); }
.background-accent-bg-color { background-color: var(--accent-bg-color); }
.background-highlight-select { background-color: var(--highlight-select); }
.background-theme-content-accent { background-color: var(--theme-content-accent-color); }
.background-theme-bg-color { background-color: var(--theme-bg-color); }
.background-highlight-red { background-color: var(--highlight-red); }
.background-button-bg-color { background-color: var(--button-bg-color); }
.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
.background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
.background-menu-divider { background-color: var(--theme-menu-divider); }
.background-card-divider { background-color: var(--theme-card-divider); }
.background-primary-color { background-color: var(--primary-button-enabled); }
.background-bg-accent { background-color: var(--theme-bg-accent-color); }
.background-bg-focused {background-color: var(--theme-bg-focused-color); }
.background-bg-accent-normal { background-color: var(--theme-bg-accent-normal); }
.background-content-accent-color { background-color: var(--accent-color); }
.dark-color { color: var(--dark-color); }
.dark-color,
.content-dark-color { color: var(--dark-color); }
.content-color { color: var(--content-color); }
.content-trans-color { color: var(--theme-content-trans-color); }
.content-accent-color { color: var(--accent-color); }
.content-dark-color { color: var(--theme-content-dark-color); }
.caption-color { color: var(--caption-color); }
.red-color { color: var(--highlight-red); }
@ -800,9 +791,8 @@ a.no-line {
.border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
.border-bg-accent {border: 1px solid var(--theme-bg-accent-color);}
.border-divider-color {border: 1px solid var(--divider-color);}
.border-primary-button { border-color: var(--primary-button-border); }
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
.top-divider { border-top: 1px solid var(--divider-color); }
.bottom-divider { border-bottom: 1px solid var(--divider-color); }

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

@ -140,7 +140,7 @@
{/if}
<div class="{kind} flex-row-center clear-mins" class:focusable>
{#if icon}
<div class="content-trans-color mr-1">
<div class="dark-color mr-1">
<Icon {icon} size={'small'} />
</div>
{/if}

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

@ -159,7 +159,7 @@
{/each}
</ol>
{#if stepsDescription}
<span class="content-trans-color"><Label label={stepsDescription} /></span>
<span class="dark-color"><Label label={stepsDescription} /></span>
{/if}
</div>
</Scroller>

3
packages/ui/src/components/TextAreaEditor.svelte
View File

@ -51,7 +51,7 @@
<svelte:window on:click={onClickOutside} />
<div bind:this={openedContainerRef}>
<div
class="flex-col background-bg-accent border-bg-accent border-radius-1 pt-1 pb-1 pr-2 pl-2"
class="flex-col background-accent-bg-color border-divider-color border-radius-1 pt-1 pb-1 pr-2 pl-2"
style:user-select="none"
>
<TextArea
@ -68,6 +68,7 @@
{#if !disabled}
<div class="flex-row-center mt-3">
<Button label={submitLabel} kind="no-border" size="medium" on:click={submit} />
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="ml-2" on:click={cancel}>
<ActionIcon icon={IconClose} size="medium" action={cancel} />
</div>

2
plugins/board-resources/src/components/EditCard.svelte
View File

@ -140,7 +140,7 @@
/>
</svelte:fragment>
<EditBox bind:value={object.title} kind={'large-style'} focus on:change={() => change('title', object?.title)} />
<div class="background-bg-accent border-bg-accent border-radius-3 p-4 mt-4 w-full">
<div class="background-accent-bg-color border-divider-color border-radius-3 p-4 mt-4 w-full">
<StyledTextBox
alwaysEdit={true}
showButtons={false}

4
plugins/board-resources/src/components/KanbanCard.svelte
View File

@ -91,7 +91,7 @@
<div
style:opacity="0.3"
style:pointer-events="none"
class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title"
class="abs-full-content background-content-accent-color h-full w-full flex-center fs-title"
/>
{/if}
{#if !isEditMode}
@ -140,7 +140,7 @@
<div
style:opacity="0.3"
style:pointer-events="none"
class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title"
class="abs-full-content background-content-accent-color h-full w-full flex-center fs-title"
/>
{/if}
{#if !isEditMode && !object.cover}

2
plugins/board-resources/src/components/popups/AddChecklist.svelte
View File

@ -117,7 +117,7 @@
>
<div class="flex-col flex-gap-1">
<Label label={board.string.Title} />
<div class="p-2 mt-1 mb-1 border-bg-accent border-radius-1">
<div class="p-2 mt-1 mb-1 border-divider-color border-radius-1">
<EditBox bind:value={name} focus={true} />
</div>
</div>

4
plugins/chunter-resources/src/components/CommentPresenter.svelte
View File

@ -48,7 +48,7 @@
</div>
<span class="label nowrap">Message</span>
</a>
&nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
&nbsp;<span class="dark-color">#{cutId(value._id.toString())}</span>
{:else}
<div class="flex-row-top">
{#await getEmployee(value) then employee}
@ -60,7 +60,7 @@
<div class="fs-title">
{#if employee}{getName(employee)}{/if}
</div>
<div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
<div class="dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
</div>
<ShowMore limit={126} fixed>
<MessageViewer message={value.message} />

2
plugins/tags-resources/src/components/TagsFilter.svelte
View File

@ -186,7 +186,7 @@
<div class="tag" style="background-color: {getPlatformColor(element.color)};" />
{element.title}
</div>
<div class="content-trans-color ml-2">
<div class="dark-color ml-2">
{element.refCount ?? 0}
</div>
</div>

2
plugins/templates-resources/src/components/Templates.svelte
View File

@ -187,7 +187,7 @@
</div>
</div>
<div class="ac-column max background-bg-accent template-container">
<div class="ac-column max background-accent-bg-color template-container">
{#if newTemplate}
<div class="flex-between mr-4">
<span class="trans-title mb-3">

2
plugins/tracker-resources/src/components/issues/IssuePreview.svelte
View File

@ -110,7 +110,7 @@
<MessageViewer message={issue.description} />
</div>
{:else}
<div class="ml-2 content-trans-color">
<div class="ml-2 dark-color">
<Label label={tracker.string.NoDescription} />
</div>
{/if}

12
plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
View File

@ -192,13 +192,13 @@
.issue-title {
color: var(--accent-color);
transition: color 0.15s;
}
&:hover {
color: var(--caption-color);
}
&:active {
color: var(--accent-color);
}
&:hover .issue-title {
color: var(--caption-color);
}
&:active .issue-title {
color: var(--accent-color);
}
}

2
plugins/view-resources/src/components/filter/ObjectFilter.svelte
View File

@ -175,7 +175,7 @@
<Label label={ui.string.NotSelected} />
{/if}
</div>
<div class="content-trans-color ml-2">
<div class="dark-color ml-2">
{#if isState}{statesCount[i]}{:else}{targets.get(value?._id)}{/if}
</div>
</div>

2
plugins/view-resources/src/components/filter/ValueFilter.svelte
View File

@ -161,7 +161,7 @@
<Label label={ui.string.NotSelected} />
{/if}
</div>
<div class="content-trans-color ml-2">
<div class="dark-color ml-2">
{values.get(value)}
</div>
</div>