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

UBER-142: update buttons. Cleaning CSS. (#3482)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-07-06 10:01:27 +03:00 committed by GitHub
parent 81ed88fa1d
commit e7b6522e80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
243 changed files with 701 additions and 778 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dev/storybook/stories/Button.stories.ts
View File

@ -17,11 +17,11 @@ const meta = {
},
kind: {
control: 'select',
options: ['primary', 'secondary', 'no-border', 'transparent', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
options: ['accented', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
description: 'kind description',
table: {
type: { summary: 'ButtonKind' },
defaultValue: { summary: '"secondary"' },
defaultValue: { summary: '"regular"' },
}
},
size: {
@ -109,7 +109,7 @@ type Story = StoryObj<typeof meta>;
export const Ok: Story = {
args: {
label: uiPlugin.string.Ok,
kind: 'primary',
kind: 'accented',
size: 'medium',
shape: undefined,
justify: 'left',
@ -125,7 +125,7 @@ export const Ok: Story = {
export const Cancel: Story = {
args: {
label: uiPlugin.string.Cancel,
kind: 'primary',
kind: 'accented',
size: 'medium',
shape: undefined,
justify: 'left',

10
models/tracker/src/index.ts
View File

@ -496,12 +496,12 @@ export function createModel (builder: Builder): void {
props: {
kind: 'list',
size: 'small',
shape: 'round',
shouldShowPlaceholder: false
},
displayProps: {
key: 'milestone',
excludeByKey: 'milestone',
compression: true,
optional: true
}
},
@ -512,12 +512,12 @@ export function createModel (builder: Builder): void {
props: {
kind: 'list',
size: 'small',
shape: 'round',
shouldShowPlaceholder: false
},
displayProps: {
key: 'component',
excludeByKey: 'component',
compression: true,
optional: true
}
},
@ -629,11 +629,11 @@ export function createModel (builder: Builder): void {
props: {
kind: 'list',
size: 'small',
shape: 'round',
shouldShowPlaceholder: false
},
displayProps: {
excludeByKey: 'milestone',
compression: true,
optional: true
}
},
@ -703,7 +703,7 @@ export function createModel (builder: Builder): void {
size: 'small',
shouldShowPlaceholder: false
},
displayProps: { key: 'component', optional: true }
displayProps: { key: 'component', compression: true, optional: true }
},
{
key: '',
@ -714,7 +714,7 @@ export function createModel (builder: Builder): void {
size: 'small',
shouldShowPlaceholder: false
},
displayProps: { key: 'milestone', optional: true }
displayProps: { key: 'milestone', compression: true, optional: true }
},
{
key: '',

2
packages/kanban/src/components/KanbanRow.svelte
View File

@ -146,7 +146,7 @@
}
&.selection,
&.checked.selection {
box-shadow: 0 0 1px 1px var(--primary-button-enabled);
box-shadow: 0 0 1px 1px var(--accented-button-default);
animation: anim-border 1s ease-in-out;
&:hover {

7
packages/presentation/src/components/Card.svelte
View File

@ -68,9 +68,8 @@
id="card-close"
focusIndex={10002}
icon={IconClose}
iconSize={'medium'}
iconProps={{ fill: 'var(--theme-dark-color)' }}
kind={'transparent'}
iconProps={{ size: 'medium', fill: 'var(--theme-dark-color)' }}
kind={'ghost'}
size={'small'}
on:click={() => {
if (onCancel) {
@ -116,7 +115,7 @@
focusIndex={10001}
disabled={!canSave}
label={okLabel}
kind={'primary'}
kind={'accented'}
size={'large'}
on:click={() => {
if (okProcessing) {

2
packages/presentation/src/components/DocPopup.svelte
View File

@ -178,7 +178,7 @@
<div class="ml-2">
<Button
focusIndex={2}
kind={'transparent'}
kind={'ghost'}
{size}
icon={IconAdd}
showTooltip={{ label: create.label }}

2
packages/presentation/src/components/InlineAttributeBarEditor.svelte
View File

@ -61,7 +61,7 @@
readonly={isReadonly}
label={attribute?.label}
placeholder={attribute?.label}
kind={'secondary'}
kind={'regular'}
size={'large'}
width={'100%'}
justify={'left'}

2
packages/presentation/src/components/MessageBox.svelte
View File

@ -43,7 +43,7 @@
focusIndex={1}
label={okLabel ?? presentation.string.Ok}
size={'large'}
kind={'primary'}
kind={'accented'}
loading={processing}
on:click={() => {
processing = true

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

@ -66,7 +66,7 @@
<a class="no-line" href={getFileUrl(file, 'full', name)} download={name} bind:this={download}>
<Button
icon={Download}
kind={'transparent'}
kind={'ghost'}
on:click={() => {
download.click()
}}
@ -98,8 +98,8 @@
height: 2rem;
font-weight: 500;
font-size: 0.625rem;
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
cursor: pointer;

2
packages/presentation/src/components/SpaceCreateCard.svelte
View File

@ -41,7 +41,7 @@
<Button
disabled={!canSave}
label={presentation.string.Create}
kind={'primary'}
kind={'accented'}
on:click={() => {
okAction()
dispatch('close')

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

@ -95,17 +95,17 @@
}}
>
<div class="check pointer-events-none">
<CheckBox checked={isSelected(space)} primary />
<CheckBox checked={isSelected(space)} accented />
</div>
<SpaceInfo size={'medium'} value={space} />
{#if allowDeselect && space._id === selected}
<div class="check pointer-events-none">
{#if titleDeselect}
<div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
<CheckBox checked circle primary />
<CheckBox checked circle accented />
</div>
{:else}
<CheckBox checked circle primary />
<CheckBox checked circle accented />
{/if}
</div>
{/if}

2
packages/presentation/src/components/message/Nodes.svelte
View File

@ -173,7 +173,7 @@
padding: 0 0.25rem;
font-family: var(--mono-font);
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
}

20
packages/text-editor/src/components/ReferenceInput.svelte
View File

@ -255,7 +255,7 @@
<div class="formatPanelRef buttons-group xsmall-gap" class:withoutTopBorder>
<Button
icon={Bold}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('bold')}
showTooltip={{ label: textEditorPlugin.string.Bold }}
@ -263,7 +263,7 @@
/>
<Button
icon={Italic}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('italic')}
showTooltip={{ label: textEditorPlugin.string.Italic }}
@ -271,7 +271,7 @@
/>
<Button
icon={Strikethrough}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('strike')}
showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
@ -279,7 +279,7 @@
/>
<Button
icon={Link}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('link')}
disabled={isSelectionEmpty && !activeModes.has('link')}
@ -289,7 +289,7 @@
<div class="buttons-divider" />
<Button
icon={ListNumber}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('orderedList')}
showTooltip={{ label: textEditorPlugin.string.OrderedList }}
@ -297,7 +297,7 @@
/>
<Button
icon={ListBullet}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('bulletList')}
showTooltip={{ label: textEditorPlugin.string.BulletedList }}
@ -306,7 +306,7 @@
<div class="buttons-divider" />
<Button
icon={Quote}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('blockquote')}
showTooltip={{ label: textEditorPlugin.string.Blockquote }}
@ -315,7 +315,7 @@
<div class="buttons-divider" />
<Button
icon={Code}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('code')}
showTooltip={{ label: textEditorPlugin.string.Code }}
@ -323,7 +323,7 @@
/>
<Button
icon={CodeBlock}
kind={'transparent'}
kind={'ghost'}
size={'small'}
selected={activeModes.has('codeBlock')}
showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
@ -513,7 +513,7 @@
}
}
&:focus {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
& > .icon {
color: var(--theme-caption-color);

2
packages/text-editor/src/components/StyleButton.svelte
View File

@ -50,7 +50,7 @@
}
&:focus {
color: var(--theme-caption-color);
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-focused-border);
}
&.selected {
background-color: var(--theme-button-pressed);

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

@ -15,15 +15,28 @@
/* Common Colors */
* {
// --primary-button-color: #fff;
// --primary-button-enabled: #4474F6;
// --primary-button-hovered: #2A5FF6;
// --primary-button-pressed: #194CD7;
// --primary-button-focused: #194CD7;
// --primary-button-disabled: #5771B9;
// --primary-button-focused-border: #7393EB;
// --primary-button-outline: rgba(87, 132, 255, .3);
// --primary-button-border: rgba(255, 255, 255, .09);
--accented-button-color: #fff;
--accented-button-border: rgba(255, 255, 255, .09);
--accented-button-focused-border: #fff;
--accented-button-outline: #5190EC;
--accented-button-transparent: rgba(43, 81, 144, 0.2);
--accented-button-default: #2B5190;
--accented-button-hovered: #325FA9;
--accented-button-pressed: #284B86;
--accented-button-focused: #284B86;
--brand-button-default: #4169E1;
--brand-button-hovered: #587BE5;
--brand-button-pressed: #2C58DE;
--brand-button-focused: #2C58DE;
--positive-button-default: #26A869;
--positive-button-hovered: #2BBB75;
--positive-button-pressed: #21915B;
--positive-button-focused: #21915B;
--negative-button-default: #CA4242;
--negative-button-hovered: #D05858;
--negative-button-pressed: #BF3636;
--negative-button-focused: #BF3636;
--white-color: #fff;
--duotone-color: rgba(126, 134, 158, .25);
@ -53,24 +66,21 @@
/* Dark Theme */
.theme-dark {
--primary-button-color: #fff;
--primary-button-enabled: #2B5190;
--primary-button-transparent: rgba(43, 81, 144, 0.2);
--primary-button-hovered: #325FA9;
--primary-button-pressed: #284B86;
--primary-button-focused: #144CA8;
--primary-button-disabled: #484662;
--primary-button-disabled-color: rgba(255, 255, 255, .5);
--primary-button-focused-border: #6E9FED;
--primary-button-border: rgba(255, 255, 255, .09);
--primary-button-outline: rgba(87, 132, 255, .3); // OLD
--accented-button-disabled: #12213B;
--accented-button-disabled-color: #5E88CF;
--brand-button-disabled: #111F4B;
--brand-button-disabled-color: #6585E7;
--positive-button-disabled: #092518;
--positive-button-disabled-color: #25A265;
--negative-button-disabled: #330F0F;
--negative-button-disabled-color: #D06262;
--theme-button-enabled: rgba(255, 255, 255, .02);
--theme-button-default: rgba(255, 255, 255, .02);
--theme-button-hovered: rgba(255, 255, 255, .04);
--theme-button-pressed: rgba(255, 255, 255, .08);
--theme-button-focused: rgba(255, 255, 255, .04);
--theme-button-disabled: rgba(255, 255, 255, .02);
--theme-button-disabled-color: rgba(255, 255, 255, .5);
--theme-button-focused-border: rgba(255, 255, 255, .09);
--theme-button-disabled: rgba(255, 255, 255, .08);
--theme-button-border: rgba(255, 255, 255, .09);
--theme-button-contrast-color: #000;
@ -250,24 +260,21 @@
/* Light Theme */
.theme-light {
--primary-button-color: #fff;
--primary-button-enabled: #2B5190;
--primary-button-transparent: rgba(43, 81, 144, 0.2);
--primary-button-hovered: #325FA9;
--primary-button-pressed: #284B86;
--primary-button-focused: #144CA8;
--primary-button-disabled: #EBEBEB;
--primary-button-disabled-color: rgba(0, 0, 0, .5);
--primary-button-focused-border: #6E9FED; // DARK
--primary-button-border: rgba(255, 255, 255, .09);
--primary-button-outline: rgba(87, 132, 255, .3); // OLD
--theme-button-enabled: rgba(0, 0, 0, .02);
--accented-button-disabled: #E0E8F6;
--accented-button-disabled-color: #284B86;
--brand-button-disabled: #DCE3F9;
--brand-button-disabled-color: #2C58DE;
--positive-button-disabled: #DEF7EB;
--positive-button-disabled-color: #1A7046;
--negative-button-disabled: #F6E0E0;
--negative-button-disabled-color: #962C2C;
--theme-button-default: rgba(0, 0, 0, .02);
--theme-button-hovered: rgba(0, 0, 0, .04);
--theme-button-pressed: rgba(0, 0, 0, .08);
--theme-button-focused: rgba(0, 0, 0, .04);
--theme-button-disabled: rgba(0, 0, 0, .02);
--theme-button-disabled-color: rgba(0, 0, 0, .5);
--theme-button-focused: rgba(0, 0, 0, .08);
--theme-button-focused-border: #fff;
--theme-button-disabled: rgba(0, 0, 0, .08);
--theme-button-border: rgba(0, 0, 0, .09);
--theme-button-contrast-color: #fff;

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

@ -844,7 +844,7 @@ a.no-line {
}
.focused-button {
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid transparent;
& > .icon { color: var(--theme-content-color); }
@ -859,7 +859,7 @@ a.no-line {
}
&:focus {
border: 1px solid var(--theme-button-border);
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
& > .icon { color: var(--theme-caption-color); }
}
@ -900,7 +900,7 @@ a.no-line {
.background-highlight-red { background-color: var(--highlight-red); }
.background-button-bg-color { background-color: var(--button-bg-color); }
.background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
.background-primary-color { background-color: var(--primary-button-enabled); }
.background-primary-color { background-color: var(--accented-button-default); }
.background-content-accent-color { background-color: var(--accent-color); }
.content-trans-color { color: var(--theme-trans-color); }
@ -921,7 +921,7 @@ a.no-line {
.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-divider-color {border: 1px solid var(--divider-color);}
.border-primary-button { border-color: var(--primary-button-border); }
.border-primary-button { border-color: var(--accented-button-border); }
.top-divider { border-top: 1px solid var(--divider-color); }
.bottom-divider { border-bottom: 1px solid var(--divider-color); }

356
packages/theme/styles/button.scss
View File

@ -2,231 +2,138 @@
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 0.75rem;
padding: 0 .75rem;
min-width: 1.375rem;
white-space: nowrap;
color: var(--theme-caption-color);
font-size: .8125rem;
color: var(--theme-content-color);
background-color: transparent;
border: 1px solid transparent;
transition-property: border, background-color, color, box-shadow;
transition-duration: 0.15s;
transition-duration: .15s;
&.inline {
height: 1.375rem;
font-size: 0.75rem;
line-height: 0.75rem;
&.only-icon {
width: 1.375rem;
}
font-size: .75rem;
line-height: .75rem;
&.only-icon { width: 1.375rem; }
}
&.x-small {
height: 1.5rem;
font-size: 0.75rem;
&.only-icon {
width: 1.5rem;
}
font-size: .75rem;
&.only-icon { width: 1.5rem; }
}
&.small {
height: 1.75rem;
font-size: 0.8125rem;
&.only-icon {
width: 1.75rem;
}
font-size: .8125rem;
&.only-icon { width: 1.75rem; }
}
&.medium {
height: 2rem;
&.only-icon {
width: 2rem;
}
&.only-icon { width: 2rem; }
}
&.large {
height: 2.25rem;
&.only-icon {
width: 2.25rem;
}
&.only-icon { width: 2.25rem; }
}
&.x-large {
height: 2.75rem;
&.only-icon {
width: 2.75rem;
}
&.only-icon { width: 2.75rem; }
}
&.iconL:not(.iconR) {
padding: 0 1rem 0 0.75rem;
}
&.iconR:not(.iconL) {
padding: 0 0.75rem 0 1rem;
}
&.accent {
font-weight: 500;
}
&.iconL:not(.iconR) { padding: 0 1rem 0 .75rem; }
&.iconR:not(.iconL) { padding: 0 .75rem 0 1rem; }
.btn-icon {
color: var(--theme-content-color);
transition: color 0.15s;
transition: color .15s;
pointer-events: none;
}
.btn-right-icon {
margin-left: 0.5rem;
margin-left: .5rem;
color: var(--theme-halfcontent-color);
transition: color 0.15s;
transition: color .15s;
pointer-events: none;
}
&:not(.only-icon) .btn-icon:not(.spinner) {
margin-right: 0.375rem;
}
&:not(.only-icon) .btn-right-icon {
margin-left: 0.375rem;
}
&.no-border:not(.only-icon) .btn-icon,
&.link-bordered:not(.only-icon) .btn-icon,
&.list:not(.only-icon) .btn-icon,
&.sh-circle:not(.only-icon) .btn-icon {
margin-right: 0.25rem;
}
&:not(.only-icon) .btn-icon:not(.spinner) { margin-right: .375rem; }
&:not(.only-icon) .btn-right-icon { margin-left: .375rem; }
&.short {
max-width: 8.5rem;
}
&.sh-no-shape {
border-radius: 0.25rem;
}
&.sh-round {
border-radius: 0.5rem;
}
&.sh-round2 {
border-radius: 0.75rem;
}
&.sh-circle {
border-radius: 1rem;
&.link {
padding: 0 0.5rem 0 0.25rem;
}
}
&.short { max-width: 8.5rem; }
&.accent { font-weight: 500; }
&.sh-no-shape { border-radius: .25rem; }
&.sh-round { border-radius: .5rem; }
&.sh-round2 { border-radius: .75rem; }
&.sh-circle { border-radius: 1rem; }
&.sh-rectangle-right {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
&.sh-rectangle-left {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
&.sh-filter {
border-radius: 0 0 0.5rem 0.5rem;
}
&.bs-solid {
border-style: solid;
}
&.bs-dashed {
border-style: dashed;
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
&.sh-filter { border-radius: 0 0 .5rem .5rem; }
&.highlight {
box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
box-shadow: inset 0 0 1px 1px var(--accented-button-outline);
&:hover { box-shadow: inset 0 0 1px 2px var(--accented-button-outline); }
}
&:hover {
box-shadow: inset 0 0 1px 1px var(--primary-button-hovered);
}
}
&:hover {
.btn-icon {
color: var(--theme-caption-color);
}
}
&:hover .btn-icon { color: var(--theme-caption-color); }
&:not(.no-focus):focus {
&:not(.sh-filter) {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
}
&.sh-filter {
border-color: var(--primary-button-focused-border);
}
}
&:disabled {
color: var(--theme-dark-color);
cursor: not-allowed;
.btn-icon {
opacity: 0.5;
}
&:not(.sh-filter) { box-shadow: 0 0 0 2px var(--accented-button-outline); }
&.sh-filter { border-color: var(--accented-button-outline); }
}
&.jf-left {
justify-content: flex-start;
}
&.jf-center {
justify-content: center;
}
&.only-icon {
padding: 0;
}
&.bs-solid { border-style: solid; }
&.bs-dashed { border-style: dashed; }
&.jf-left { justify-content: flex-start; }
&.jf-center { justify-content: center; }
&.only-icon { padding: 0; }
&.secondary {
background-color: var(--theme-button-enabled);
&.regular {
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
// &.medium:not(.only-icon) {
// padding: 0 0.75rem;
// }
&:hover {
background-color: var(--theme-button-hovered);
}
&:active {
background-color: var(--theme-button-pressed);
}
&:hover { background-color: var(--theme-button-hovered); }
&:active { background-color: var(--theme-button-pressed); }
&:focus {
background-color: var(--theme-button-focused);
border-color: var(--theme-button-focused-border);
}
&:disabled {
color: var(--theme-button-disabled-color);
background-color: var(--theme-button-disabled);
}
&:disabled { background-color: var(--theme-button-disabled); }
&.selected {
background-color: var(--theme-button-hovered);
.btn-icon {
color: var(--theme-caption-color);
}
.btn-icon { color: var(--theme-caption-color); }
}
}
&.no-border {
font-weight: 400;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
box-shadow: var(--button-shadow);
&:hover {
color: var(--theme-caption-color);
background-color: var(--theme-button-hovered);
.btn-icon {
color: var(--theme-caption-color);
}
.btn-icon { color: var(--theme-caption-color); }
}
&:disabled {
color: var(--theme-trans-color);
background-color: var(--theme-list-button-color);
cursor: default;
.btn-icon {
color: var(--theme-trans-color);
}
.btn-icon { color: var(--theme-trans-color); }
&:hover {
color: var(--theme-trans-color);
.btn-icon {
color: var(--theme-trans-color);
}
.btn-icon { color: var(--theme-trans-color); }
}
}
}
&.transparent {
&:hover {
background-color: var(--theme-button-hovered);
}
&.selected {
background-color: var(--highlight-select);
}
&.selected:hover {
background-color: var(--highlight-select-hover);
}
&.ghost {
&:hover { background-color: var(--theme-button-hovered); }
&:active { background-color: var(--theme-button-pressed); }
&.selected { background-color: var(--highlight-select); }
&.selected:hover { background-color: var(--highlight-select-hover); }
}
&.link {
padding: 0 0.875rem;
@ -234,9 +141,8 @@
color: var(--theme-caption-color);
background-color: var(--theme-bg-color);
border-color: var(--theme-divider-color);
.btn-icon {
color: var(--theme-content-color);
}
.btn-icon { color: var(--theme-content-color); }
}
&:disabled {
color: var(--theme-dark-color);
@ -244,39 +150,31 @@
border-color: transparent;
cursor: auto;
.btn-icon {
color: var(--theme-content-color);
}
}
&.small {
padding: 0 0.25rem;
.btn-icon { color: var(--theme-content-color); }
}
&.small { padding: 0 .25rem; }
}
&.link-bordered {
padding: 0 0.5rem;
padding: 0 .5rem;
color: var(--theme-content-color);
background-color: var(--theme-link-button-color);
border-color: var(--theme-button-border);
&:hover {
color: var(--theme-caption-color);
background-color: var(--theme-link-button-hover);
border-color: var(--theme-list-divider-color);
.btn-icon {
color: var(--theme-caption-color);
}
}
&.small {
padding: 0 0.25rem;
.btn-icon { color: var(--theme-caption-color); }
}
// &.small { padding: 0 .25rem; }
}
&.list {
padding: 0 0.625em;
padding: 0 .625em;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
border-radius: 1.5rem;
// transition-property: border, color, background-color;
// transition-duration: 0.15s;
&:not(.inline, .x-small) { min-height: 1.75rem; }
.btn-icon { color: var(--theme-dark-color); }
@ -287,28 +185,55 @@
}
&:not(.no-focus):focus { box-shadow: none; }
}
&.primary {
padding: 0 0.75rem;
font-weight: 500;
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
border-color: var(--primary-button-border);
&.accented,
&.brand,
&.positive,
&.negative {
padding: 0 1.5rem;
color: var(--accented-button-color);
border-color: var(--accented-button-border);
.btn-icon {
color: var(--white-color);
}
&:hover {
background-color: var(--primary-button-hovered);
}
&:active {
background-color: var(--primary-button-pressed);
}
&:focus {
background-color: var(--primary-button-focused);
}
.btn-icon { color: var(--accented-button-color); }
&:focus { border-color: var(--accented-button-focused-border); }
}
&.accented {
background-color: var(--accented-button-default);
&:hover { background-color: var(--accented-button-hovered); }
&:active { background-color: var(--accented-button-pressed); }
&:focus { background-color: var(--accented-button-focused); }
&:disabled {
color: var(--primary-button-disabled-color);
background-color: var(--primary-button-disabled);
color: var(--accented-button-disabled-color);
background-color: var(--accented-button-disabled);
}
}
&.brand {
background-color: var(--brand-button-default);
&:hover { background-color: var(--brand-button-hovered); }
&:active { background-color: var(--brand-button-pressed); }
&:focus { background-color: var(--brand-button-focused); }
&:disabled {
color: var(--brand-button-disabled-color);
background-color: var(--brand-button-disabled);
}
}
&.positive {
background-color: var(--positive-button-default);
&:hover { background-color: var(--positive-button-hovered); }
&:active { background-color: var(--positive-button-pressed); }
&:focus { background-color: var(--positive-button-focused); }
&:disabled {
color: var(--positive-button-disabled-color);
background-color: var(--positive-button-disabled);
}
}
&.negative {
background-color: var(--negative-button-default);
&:hover { background-color: var(--negative-button-hovered); }
&:active { background-color: var(--negative-button-pressed); }
&:focus { background-color: var(--negative-button-focused); }
&:disabled {
color: var(--negative-button-disabled-color);
background-color: var(--negative-button-disabled);
}
}
&.contrast {
@ -318,18 +243,11 @@
background-color: var(--theme-button-contrast-enabled);
border-color: var(--theme-button-contrast-border);
.btn-icon {
color: var(--theme-button-contrast-color);
}
&:hover {
background-color: var(--theme-button-contrast-hovered);
}
&:active {
background-color: var(--theme-button-contrast-pressed);
}
&:focus {
background-color: var(--theme-button-contrast-hovered);
}
.btn-icon { color: var(--theme-button-contrast-color); }
&:hover { background-color: var(--theme-button-contrast-hovered); }
&:active { background-color: var(--theme-button-contrast-pressed); }
&:focus { background-color: var(--theme-button-contrast-hovered); }
&:disabled {
color: var(--theme-button-contrast-disabled-color);
background-color: var(--theme-button-contrast-disabled);
@ -339,13 +257,9 @@
&.notSelected {
color: var(--theme-dark-color);
.btn-icon {
color: var(--theme-darker-color);
}
.btn-icon { color: var(--theme-darker-color); }
&:hover,
&:hover .btn-icon {
color: var(--theme-content-color);
}
&:hover .btn-icon { color: var(--theme-content-color); }
}
&.dangerous {
@ -353,15 +267,17 @@
background-color: var(--dangerous-bg-color);
border-color: var(--dangerous-bg-color);
&:hover {
background-color: var(--dangerous-bg-hover);
}
&:not(.no-focus):focus {
box-shadow: var(--dangerous-shadow);
}
&:hover { background-color: var(--dangerous-bg-hover); }
&:not(.no-focus):focus { box-shadow: var(--dangerous-shadow); }
}
.resetIconSize {
font-size: 16px;
&:disabled {
color: var(--theme-trans-color);
border-color: transparent;
cursor: not-allowed;
.btn-icon { opacity: .5; }
}
.resetIconSize { font-size: 16px; }
}

2
packages/theme/styles/common.scss
View File

@ -436,7 +436,7 @@
padding: .3125rem .5rem;
min-width: 0;
font-size: .875rem;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
color: var(--theme-halfcontent-color);
border: 1px solid var(--theme-button-border);
border-radius: .25rem;

24
packages/theme/styles/components.scss
View File

@ -69,6 +69,13 @@
align-self: flex-end;
margin-top: .5rem;
}
&.header-with-mode-selector {
padding-top: 0;
padding-bottom: 0;
}
&.header-without-label {
padding-left: 0;
}
}
.ac-header__wrap-description,
@ -268,7 +275,7 @@
background-color: var(--theme-button-hovered);
}
&.selected {
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
cursor: auto;
}
@ -332,7 +339,7 @@
// height: 1.5rem;
}
&__element {
fill: var(--theme-button-enabled);
fill: var(--theme-button-default);
stroke: var(--theme-button-border);
stroke-linecap: round;
stroke-linejoin: round;
@ -371,7 +378,7 @@
display: flex;
flex-direction: column;
padding: 1rem 1.5rem 1.25rem;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.5rem;
transition-property: box-shadow, background-color, border-color;
@ -390,8 +397,8 @@
.logo {
width: 4.5rem;
height: 4.5rem;
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
border-radius: 50%;
}
.label {
@ -679,8 +686,8 @@
border-color: transparent;
}
&:focus {
border-color: var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
border-color: var(--accented-button-focused-border);
box-shadow: 0 0 0 3px var(--accented-button-outline);
& > .icon { color: var(--caption-color); }
}
}
@ -724,7 +731,7 @@
position: absolute;
width: 6px;
height: 6px;
background-color: var(--primary-button-enabled);
background-color: var(--accented-button-default);
}
&::before {
top: -2px;
@ -931,6 +938,7 @@
}
/* Kanban - global style */
.kanban-container .card-container .antiButton.link-bordered { padding: 0 .5rem; }
.kanban-container .card-container .card-labels > *:not(.labels-container),
.kanban-container .card-container .card-labels.labels .labels-container > * {
margin: .25rem .25rem 0 0;

2
packages/theme/styles/global.scss
View File

@ -16,13 +16,13 @@
@import "./_colors.scss";
@import "./_layouts.scss";
@import "./common.scss";
@import "./button.scss";
@import "./components.scss";
@import "./dialogs.scss";
@import "./popups.scss";
@import "./mixins.scss";
@import "./panel.scss";
@import "./prose.scss";
@import "./button.scss";
@import "./_text-editor.scss";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap');

2
packages/theme/styles/popups.scss
View File

@ -70,7 +70,7 @@
&.show {
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
cursor: pointer;
&:hover {
color: var(--theme-caption-color);

4
packages/theme/styles/prose.scss
View File

@ -50,7 +50,7 @@ table.proseTable {
padding: 0 .25rem;
font-family: var(--mono-font);
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: .25rem;
}
@ -58,7 +58,7 @@ table.proseTable {
.proseCodeBlock {
font-family: var(--mono-font);
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: .25rem;
padding: 0.5rem;

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

@ -60,7 +60,7 @@
opacity: 1;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
.icon {
color: var(--theme-caption-color);
opacity: 1;

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

@ -17,20 +17,20 @@
import { onMount, ComponentType } from 'svelte'
import { registerFocus } from '../focus'
import { tooltip } from '../tooltips'
import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconSize } from '../types'
import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconProps } from '../types'
import Icon from './Icon.svelte'
import Label from './Label.svelte'
import Spinner from './Spinner.svelte'
export let label: IntlString | undefined = undefined
export let labelParams: Record<string, any> = {}
export let kind: ButtonKind = 'secondary'
export let kind: ButtonKind = 'regular'
export let size: ButtonSize = 'medium'
export let shape: ButtonShape = undefined
export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
export let iconProps: any | undefined = undefined
export let iconProps: IconProps = {}
export let iconRight: Asset | AnySvelteComponent | ComponentType | undefined = undefined
export let iconRightProps: any | undefined = undefined
export let iconRightProps: IconProps = {}
export let justify: 'left' | 'center' = 'center'
export let disabled: boolean = false
export let loading: boolean = false
@ -47,14 +47,14 @@
export let id: string | undefined = undefined
export let input: HTMLButtonElement | undefined = undefined
export let showTooltip: LabelAndProps | undefined = undefined
export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
export let iconRightSize: IconSize = 'x-small'
export let short: boolean = false
export let shrink: number = 0
export let accent: boolean = false
export let noFocus: boolean = false
// $: iconSize = size === 'inline' ? 'inline' : 'small'
$: iconSize =
iconProps && iconProps.size !== undefined ? iconProps.size : size && size === 'inline' ? 'inline' : 'small'
$: iconRightSize = iconRightProps && iconRightProps.size !== undefined ? iconRightProps.size : 'x-small'
let iconOnly: boolean = false
$: iconOnly =
label === undefined &&
@ -115,7 +115,7 @@
style:height
style:flex-shrink={shrink}
{title}
type={kind === 'primary' ? 'submit' : 'button'}
type={kind === 'accented' ? 'submit' : 'button'}
on:click|stopPropagation|preventDefault
on:focus
on:blur

16
packages/ui/src/components/CheckBox.svelte
View File

@ -19,7 +19,7 @@
export let symbol: 'check' | 'minus' = 'check'
export let size: 'small' | 'medium' = 'small'
export let circle: boolean = false
export let primary: boolean = false
export let accented: boolean = false
export let readonly = false
const dispatch = createEventDispatcher()
@ -35,14 +35,14 @@
}
</script>
<label class="checkbox {size}" class:circle class:primary class:readonly class:checked>
<label class="checkbox {size}" class:circle class:accented class:readonly class:checked>
<input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
<svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
{#if checked}
{#if symbol === 'minus'}
<rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" />
<rect class="check" class:accented x="4" y="7.4" width="8" height="1.2" />
{:else}
<polygon class="check" class:primary points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
<polygon class="check" class:accented points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
{/if}
{/if}
</svg>
@ -74,8 +74,8 @@
&.checked {
background-color: var(--theme-checkbox-bg-color);
}
&.primary.checked {
background-color: var(--primary-button-enabled);
&.accented.checked {
background-color: var(--accented-button-default);
border-color: transparent;
}
&.readonly.checked {
@ -96,8 +96,8 @@
& .check {
visibility: visible;
fill: var(--theme-checkbox-color);
&.primary {
fill: var(--primary-button-color);
&.accented {
fill: var(--accented-button-color);
}
}
}

2
packages/ui/src/components/CheckBoxWithLabel.svelte.txt
View File

@ -119,7 +119,7 @@
overflow-wrap: break-word;
&:focus {
border-color: var(--primary-button-enabled);
border-color: var(--accented-button-default);
}
&::-webkit-contacts-auto-fill-button,

22
packages/ui/src/components/CircleButton.svelte
View File

@ -19,9 +19,9 @@
export let icon: Asset | AnySvelteComponent | undefined
export let size: ButtonSize = 'large'
export let transparent: boolean = false
export let ghost: boolean = false
export let selected: boolean = false
export let primary: boolean = false
export let accented: boolean = false
export let id: string | undefined = undefined
</script>
@ -30,8 +30,8 @@
{id}
class="flex-center icon-button icon-{size}"
class:selected
class:transparent
class:primary
class:ghost
class:accented
on:click|stopPropagation
on:mousemove
>
@ -61,22 +61,22 @@
&.selected {
background-color: var(--menu-bg-select);
}
&.transparent {
&.ghost {
background-color: var(--menu-bg-select-trans);
&:hover {
background-color: var(--menu-bg-select);
}
}
&.primary {
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
border-color: var(--primary-button-border);
&.accented {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
border-color: var(--accented-button-border);
&:hover {
background-color: var(--primary-button-hovered);
background-color: var(--accented-button-hovered);
}
&:active {
background-color: var(--primary-button-pressed);
background-color: var(--accented-button-pressed);
}
}
}

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

@ -55,7 +55,7 @@
<ScrollBox vertical stretch><slot /></ScrollBox>
</div>
<div class="footer">
<Button label={okLabel} kind={'primary'} />
<Button label={okLabel} kind={'accented'} />
<Button
label={ui.string.Cancel}
on:click={() => {

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

@ -70,7 +70,7 @@
>
<div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
{#if item[0] === selected}
<div class="check"><CheckBox checked primary /></div>
<div class="check"><CheckBox checked accented /></div>
{/if}
</button>
</svelte:fragment>

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

@ -56,7 +56,7 @@
<div class="ml-2">
<Button
icon={IconClose}
kind={'transparent'}
kind={'ghost'}
size={'small'}
noFocus
on:click={() => {

6
packages/ui/src/components/Like.svelte
View File

@ -58,13 +58,13 @@
&.voted {
.icon {
color: var(--primary-button-enabled);
color: var(--accented-button-default);
&:hover {
color: var(--primary-button-hovered);
color: var(--accented-button-hovered);
}
&:active {
color: var(--primary-button-pressed);
color: var(--accented-button-pressed);
}
}
}

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

@ -79,9 +79,9 @@
background: #eee;
}
}
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
}
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
.toggle-switch {
position: relative;
display: inline-block;

8
packages/ui/src/components/Panel.svelte
View File

@ -95,7 +95,7 @@
<Button
focusIndex={10000}
icon={IconClose}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
on:click={() => {
dispatch('close')
@ -115,7 +115,7 @@
<Button
focusIndex={10008}
icon={IconDetails}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
selected={asideShown}
on:click={() => {
@ -127,7 +127,7 @@
<Button
focusIndex={10009}
icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
selected={useMaxWidth}
on:click={() => {
@ -140,7 +140,7 @@
<Button
focusIndex={100010}
icon={fullSize ? IconScale : IconScaleFull}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
selected={fullSize}
on:click={() => {

1
packages/ui/src/components/PanelInstance.svelte
View File

@ -117,6 +117,7 @@
onMount(() => {
if (props) fitPopup(props, contentPanel)
})
$: console.log('[!!!] element: ', props?.element)
</script>
<svelte:window

4
packages/ui/src/components/ProgressCircle.svelte
View File

@ -22,7 +22,7 @@
export let max: number = 100
export let color: number = 5
export let size: IconSize = 'small'
export let primary: boolean = false
export let accented: boolean = false
if (value > max) value = max
if (value < min) value = min
@ -49,7 +49,7 @@
cy={8}
r={7}
class="progress-circle"
style:stroke={primary ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
style:stroke={accented ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
style:opacity={dashOffset === 0 ? 0 : 1}
style:transform={'rotate(-82deg)'}
style:stroke-dasharray={lenghtC}

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

@ -623,7 +623,7 @@
background-color: var(--theme-button-hovered);
}
&:focus {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
}
&.vertical {
width: 2rem;

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

@ -108,13 +108,13 @@
{#if currentStepIndex > 0}
<Button
kind="secondary"
kind="regular"
label={ui.string.Back}
on:click={async () => await handleStepSelect(currentStepIndex - 1)}
/>
{/if}
<Button
kind="primary"
kind="accented"
label={isDone ? doneLabel : ui.string.Next}
disabled={!isStepValid}
loading={isSaving}
@ -231,7 +231,7 @@
background-color: var(--accent-bg-color);
&::before {
background-color: var(--primary-button-outline);
background-color: var(--accented-button-outline);
}
}

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

@ -72,7 +72,7 @@
padding: 0;
min-width: 3rem;
height: 3.25rem;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.75rem;
caret-color: var(--theme-caret-color);

12
packages/ui/src/components/TabList.svelte
View File

@ -22,7 +22,7 @@
export let selected: string | string[] = ''
export let multiselect: boolean = false
export let items: TabItem[]
export let kind: 'normal' | 'secondary' | 'plain' | 'separated' | 'separated-free' = 'normal'
export let kind: 'normal' | 'regular' | 'plain' | 'separated' | 'separated-free' = 'normal'
export let onlyIcons: boolean = false
export let size: 'small' | 'medium' = 'medium'
@ -49,7 +49,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
bind:this={tabs[i]}
class={kind === 'normal' || kind === 'secondary' ? 'button' : 'plain'}
class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
class:separated={kind === 'separated' || kind === 'separated-free'}
class:free={kind === 'separated-free'}
class:onlyIcons
@ -139,7 +139,7 @@
&.normal .button {
height: 1.5rem;
}
&.secondary .button {
&.regular .button {
height: 1.375rem;
}
}
@ -162,7 +162,7 @@
&.selected {
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
&:hover {
@ -171,8 +171,8 @@
}
}
}
&.secondary {
background-color: var(--theme-button-enabled);
&.regular {
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;

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

@ -88,7 +88,7 @@
resize: none;
&:focus {
border-color: var(--primary-button-enabled);
border-color: var(--accented-button-default);
}
&::placeholder {
color: var(--dark-color);

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

@ -73,9 +73,9 @@
background: #eee;
}
}
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
}
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); }
.toggle-switch {
position: relative;
display: inline-block;

8
packages/ui/src/components/calendar/DateInputBox.svelte
View File

@ -304,7 +304,7 @@
transition: border-color 0.15s ease;
&:hover {
border-color: var(--theme-button-enabled);
border-color: var(--theme-button-default);
}
&:focus-within {
color: var(--theme-caption-color);
@ -319,7 +319,7 @@
width: 0.75rem;
height: 0.75rem;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
outline: none;
border-radius: 50%;
cursor: pointer;
@ -340,8 +340,8 @@
border-radius: 0.125rem;
&:focus {
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
}
&::after {
position: absolute;

2
packages/ui/src/components/calendar/DatePopup.svelte
View File

@ -128,7 +128,7 @@
</div>
<div class="footer">
<Button
kind={'primary'}
kind={'accented'}
label={ui.string.Save}
size={'x-large'}
width={'100%'}

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

@ -143,7 +143,7 @@
height: 2.25rem;
}
&.primary {
&.accented {
padding: 0 0.5rem;
min-width: 1.5rem;
background-color: var(--noborder-bg-color);
@ -297,9 +297,9 @@
margin-right: 0.25rem;
}
}
&.secondary {
&.regular {
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
border-radius: 0.25rem;
@ -323,7 +323,7 @@
// padding: 0 0.5rem;
// }
}
&.transparent {
&.ghost {
padding: 0 0.625rem;
border-radius: 0.25rem;
background-color: inherit;

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

@ -30,7 +30,7 @@
export let editable: boolean = false
export let iconModifier: 'normal' | 'warning' | 'overdue' = 'normal'
export let labelNull: IntlString = ui.string.NoDate
export let kind: 'default' | 'no-border' | 'link' | 'secondary' = 'default'
export let kind: 'default' | 'no-border' | 'link' | 'regular' = 'default'
export let size: 'small' | 'medium' | 'large' = 'small'
export let noShift: boolean = false
@ -482,7 +482,7 @@
&.no-border {
font-weight: 400;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
box-shadow: var(--button-shadow);
&:hover {
@ -565,10 +565,10 @@
}
}
&.secondary {
&.regular {
padding: 0 0.625rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border-color: var(--theme-button-border);
.btn-icon {
@ -594,7 +594,7 @@
width: 0.75rem;
height: 0.75rem;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
outline: none;
border-radius: 50%;
cursor: pointer;

8
packages/ui/src/components/calendar/Month.svelte
View File

@ -211,15 +211,15 @@
border-radius: 50%;
}
&.focused {
box-shadow: 0 0 0 3px var(--primary-button-outline);
box-shadow: 0 0 0 3px var(--accented-button-outline);
}
&.selected {
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
}
&:hover {
color: var(--caption-color);
background-color: var(--primary-button-transparent);
background-color: var(--accented-button-transparent);
}
&:before {

2
packages/ui/src/components/calendar/MonthCalendar.svelte
View File

@ -95,7 +95,7 @@
cursor: pointer;
}
.cell:hover {
color: var(--primary-button-color);
color: var(--accented-button-color);
background-color: var(--highlight-hover);
}
.weekend {

8
packages/ui/src/components/calendar/MonthSquare.svelte
View File

@ -237,7 +237,7 @@
&.range:not(.wrongMonth),
&.selected:not(.wrongMonth) {
color: var(--caption-color);
background-color: var(--primary-button-transparent);
background-color: var(--accented-button-transparent);
}
&.startRow:not(.wrongMonth) {
border-top-left-radius: 0.25rem;
@ -275,13 +275,13 @@
border-radius: 50%;
}
&.selected:not(.wrongMonth) {
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
}
&:not(.wrongMonth):hover {
color: var(--caption-color);
background-color: var(--primary-button-transparent);
background-color: var(--accented-button-transparent);
}
}

2
packages/ui/src/components/calendar/RangeDatePopup.svelte
View File

@ -163,7 +163,7 @@
</div>
</div>
<div class="footer">
<Button kind={'primary'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
<Button kind={'accented'} label={ui.string.Save} size={'x-large'} on:click={() => closeDP()} />
</div>
</div>

2
packages/ui/src/components/calendar/WeekCalendar.svelte
View File

@ -100,7 +100,7 @@
width: calc(calc(100% - 50px) / 7);
}
.cell:hover:not(.wrongMonth) {
color: var(--primary-button-color);
color: var(--accented-button-color);
background-color: var(--highlight-hover);
}
</style>

14
packages/ui/src/types.ts
View File

@ -116,10 +116,13 @@ export interface TabItem {
}
export type ButtonKind =
| 'primary'
| 'secondary'
| 'accented'
| 'brand'
| 'positive'
| 'negative'
| 'regular'
| 'ghost'
| 'no-border'
| 'transparent'
| 'link'
| 'link-bordered'
| 'dangerous'
@ -203,6 +206,11 @@ export type IconSize =
| 'x-large'
| '2x-large'
| 'full'
export interface IconProps {
icon?: number
size?: IconSize
fill?: string
}
export function getIconSize2x (size: IconSize): IconSize {
switch (size) {

2
plugins/attachment-resources/src/components/AccordionEditor.svelte
View File

@ -102,7 +102,7 @@
/>
{/if}
</div>
<Button size={'medium'} kind={'transparent'} on:click={(ev) => flip(i, ev)}>
<Button size={'medium'} kind={'ghost'} on:click={(ev) => flip(i, ev)}>
<svelte:fragment slot="icon">
<div class="rotated-icon {item.state}">
<IconDownOutline size={'medium'} />

2
plugins/attachment-resources/src/components/AddAttachment.svelte
View File

@ -60,7 +60,7 @@
{#if $$slots.control}
<slot name="control" click={openFile} />
{:else}
<Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={openFile} />
<Button icon={IconAdd} kind={'ghost'} on:click={openFile} />
{/if}
<input
bind:this={inputFile}

4
plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
View File

@ -180,8 +180,8 @@
height: 2rem;
font-weight: 500;
font-size: 0.625rem;
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
cursor: pointer;

6
plugins/attachment-resources/src/components/AttachmentPresenter.svelte
View File

@ -168,8 +168,8 @@
cursor: pointer;
&:not(.image) {
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
}
&.svg {
background-color: #fff;
@ -184,7 +184,7 @@
padding: 0.5rem 0.75rem;
width: 100%;
height: 100%;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;

2
plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
View File

@ -404,7 +404,7 @@
color: var(--theme-caption-color);
overflow-x: auto;
overflow-y: hidden;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;

2
plugins/attachment-resources/src/components/Attachments.svelte
View File

@ -90,7 +90,7 @@
{#if loading}
<Spinner />
{:else if !readonly}
<Button icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={openFile} />
<Button icon={IconAdd} kind={'ghost'} on:click={openFile} />
{/if}
</div>
</div>

8
plugins/attachment-resources/src/components/FileBrowserFilters.svelte
View File

@ -35,7 +35,7 @@
props={{
items: selectedParticipants,
label: attachment.string.FileBrowserFilterFrom,
kind: 'transparent',
kind: 'ghost',
size: 'medium'
}}
on:update={(evt) => {
@ -46,7 +46,7 @@
_classes={requestedSpaceClasses}
label={attachment.string.FileBrowserFilterIn}
selectedItems={spaceId ? [spaceId] : []}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
on:update={(evt) => {
selectedSpaces = evt.detail
@ -56,14 +56,14 @@
items={dateFileBrowserFilters}
label={attachment.string.FileBrowserFilterDate}
bind:selected={selectedDateId}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
/>
<DropdownLabelsIntl
items={fileTypeFileBrowserFilters}
label={attachment.string.FileBrowserFilterFileType}
bind:selected={selectedFileTypeId}
kind={'transparent'}
kind={'ghost'}
size={'medium'}
/>
</div>

3
plugins/attachment-resources/src/components/Photos.svelte
View File

@ -108,8 +108,7 @@
{:else}
<Button
icon={IconAdd}
kind={'transparent'}
shape={'circle'}
kind={'ghost'}
on:click={() => {
inputFile.click()
}}

2
plugins/automation-resources/src/components/AddActionTrigger.svelte
View File

@ -95,7 +95,7 @@
/>
</div>
</div>
<Button icon={IconAdd} kind="transparent" disabled={!name || !selectedActionMode} on:click={addActionTrigger} />
<Button icon={IconAdd} kind="ghost" disabled={!name || !selectedActionMode} on:click={addActionTrigger} />
</div>
{/if}
</div>

2
plugins/automation-resources/src/components/AddAutomation.svelte
View File

@ -55,7 +55,7 @@
<Button
label={presentation.string.Save}
disabled={!name || !trigger || !commands.length}
kind="primary"
kind="accented"
on:click={save}
/>
</div>

2
plugins/automation-resources/src/components/AutomationActions.svelte
View File

@ -71,7 +71,7 @@
<CommandPresenter value={command} />
<Button
icon={IconDelete}
kind="transparent"
kind="ghost"
on:click={() => {
removeCommand(command)
}}

2
plugins/automation-resources/src/components/AutomationSettingsElement.svelte
View File

@ -16,7 +16,7 @@
<Button
icon={isAdding ? IconBack : IconAdd}
label={isAdding ? ui.string.Cancel : automation.string.Automation}
kind={isAdding ? 'no-border' : 'primary'}
kind={isAdding ? 'no-border' : 'accented'}
on:click={() => {
isAdding = !isAdding
}}

2
plugins/automation-resources/src/components/AutomationTrigger.svelte
View File

@ -22,7 +22,7 @@
{#if trigger}
<div class="flex-between">
<TriggerPresenter value={trigger} />
<Button icon={IconDelete} kind="transparent" on:click={clearTrigger} />
<Button icon={IconDelete} kind="ghost" on:click={clearTrigger} />
</div>
{:else}
<AddActionTrigger on:trigger on:targetClass />

2
plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
View File

@ -52,6 +52,6 @@
{/if}
</div>
</div>
<Button icon={IconAdd} kind="transparent" on:click={add} />
<Button icon={IconAdd} kind="ghost" on:click={add} />
</div>
{/if}

2
plugins/automation-resources/src/components/selectors/IconChooser.svelte
View File

@ -47,7 +47,7 @@
<Button
icon={obj}
size="medium"
kind={obj === icon ? 'primary' : 'transparent'}
kind={obj === icon ? 'accented' : 'ghost'}
on:click={() => {
icon = obj
}}

6
plugins/bitrix-resources/src/components/mappings/CreateHRApplicationMapping.svelte
View File

@ -177,12 +177,12 @@
width={'10rem'}
label={getEmbeddedLabel('Source state')}
items={sourceStates}
kind={m.sourceName !== '' ? 'primary' : 'secondary'}
kind={m.sourceName !== '' ? 'accented' : 'regular'}
bind:selected={m.sourceName}
/> =>
<DropdownLabels
width={'10rem'}
kind={m.targetName !== '' ? 'primary' : 'secondary'}
kind={m.targetName !== '' ? 'accented' : 'regular'}
label={getEmbeddedLabel('Final state')}
items={stateTitles}
bind:selected={m.targetName}
@ -190,7 +190,7 @@
<span class="ml-4"> Done state: </span>
<DropdownLabels
width={'10rem'}
kind={m.doneState !== '' ? 'primary' : 'secondary'}
kind={m.doneState !== '' ? 'accented' : 'regular'}
label={getEmbeddedLabel('Done state')}
items={doneStateTitles}
bind:selected={m.doneState}

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

@ -32,7 +32,7 @@
icon={IconAdd}
label={board.string.NewList}
justify={'left'}
kind={'transparent'}
kind={'ghost'}
on:click={() => {
isOpened = true
}}

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

@ -48,7 +48,7 @@
items={viewslist}
multiselect={false}
selected={viewlet?._id}
kind={'secondary'}
kind={'regular'}
size={'small'}
on:select={(result) => {
if (result.detail !== undefined) {

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

@ -29,7 +29,7 @@
{#if page}
<div class="ac-header flex-between w-full divide">
{#if trace.length}
<Button icon={IconBack} kind="transparent" size="x-large" on:click={onBack} />
<Button icon={IconBack} kind="ghost" size="x-large" on:click={onBack} />
{:else}
<div class="ml-12" />
{/if}
@ -38,7 +38,7 @@
</div>
<Button
icon={IconClose}
kind="transparent"
kind="ghost"
size="x-large"
on:click={() => {
dispatch('close')

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

@ -135,7 +135,7 @@
<svelte:fragment slot="tools">
<Button
icon={IconMoreH}
kind="transparent"
kind="ghost"
size="medium"
on:click={(e) => {
showPopup(

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

@ -97,7 +97,7 @@
{/if}
{#if !isEditMode}
<div class="absolute mr-1 mt-1" style:top="0" style:right="0">
<Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
<Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
</div>
{/if}
<div
@ -129,7 +129,7 @@
{#if object.cover}
<div class="relative h-9 border-radius-top-1" style={coverBackground}>
<div class="absolute mr-1 mt-1" style:top="0" style:right="0">
<Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
<Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
</div>
</div>
{/if}
@ -146,7 +146,7 @@
{/if}
{#if !isEditMode && !object.cover}
<div class="absolute mr-1 mt-1" style:top="0" style:right="0">
<Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
<Button icon={IconMoreV} kind="ghost" on:click={enterEditMode} />
</div>
{/if}
<div

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

@ -29,7 +29,7 @@
<div class="flex-between h-full font-medium pr-2 pl-4">
<span class="lines-limit-2">{state.name}</span>
<div class="flex">
<Button icon={IconMoreV} kind="transparent" on:click={showMenu} />
<Button icon={IconMoreV} kind="ghost" on:click={showMenu} />
</div>
</div>
</div>

2
plugins/board-resources/src/components/add-card/AddCard.svelte
View File

@ -121,7 +121,7 @@
<Button
icon={IconAdd}
label={board.string.AddACard}
kind="transparent"
kind="ghost"
width={'100%'}
justify={'left'}
on:click={onOpen}

8
plugins/board-resources/src/components/editor/CardChecklist.svelte
View File

@ -193,15 +193,15 @@
<Button
label={hideDoneItems ? board.string.ShowDoneChecklistItems : board.string.HideDoneChecklistItems}
labelParams={{ done }}
kind="transparent"
kind="ghost"
size="small"
on:click={() => {
hideDoneItems = !hideDoneItems
}}
/>
{/if}
<Button icon={IconAdd} kind="transparent" size="small" on:click={startAddingItem} />
<Button icon={IconDelete} kind="transparent" size="small" on:click={deleteChecklist} />
<Button icon={IconAdd} kind="ghost" size="small" on:click={startAddingItem} />
<Button icon={IconDelete} kind="ghost" size="small" on:click={deleteChecklist} />
{/if}
</div>
<div class="flex-row-stretch mb-2 mt-1">
@ -282,7 +282,7 @@
updateItemAssignee(item, e.detail)
}}
/>
<Button icon={IconMoreH} kind="transparent" size="small" on:click={(e) => showItemMenu(item, e)} />
<Button icon={IconMoreH} kind="ghost" size="small" on:click={(e) => showItemMenu(item, e)} />
</div>
{/if}
</div>

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

@ -100,6 +100,6 @@
</div>
</div>
<svelte:fragment slot="buttons">
<Button label={board.string.RemoveCover} kind="transparent" on:click={removeCover} />
<Button label={board.string.RemoveCover} kind="ghost" on:click={removeCover} />
</svelte:fragment>
</Popup>

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

@ -76,7 +76,7 @@
<Button
label={board.string.Save}
size={'small'}
kind={'primary'}
kind={'accented'}
on:click={() => {
update()
dispatch('close')

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

@ -36,7 +36,7 @@
<Icon icon={board.icon.Card} {size} />
&nbsp;{done}/{total}
{#if item.dueTo !== null}
&nbsp;<DatePresenter value={item.dueTo} size="x-small" iconModifier={getDateIcon(item)} kind="transparent" />
&nbsp;<DatePresenter value={item.dueTo} size="x-small" iconModifier={getDateIcon(item)} kind="ghost" />
{/if}
</div>
{/if}

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

@ -15,7 +15,7 @@
<div class="flex-center h-full" on:click>
<div class="flex-row-center background-button-bg-color pr-1 pl-1 border-radius-1 w-full">
{#if value.startDate}
<DatePresenter bind:value={value.startDate} {size} kind="transparent" />
<DatePresenter bind:value={value.startDate} {size} kind="ghost" />
{/if}
{#if value.startDate && value.dueDate}-{/if}
{#if value.dueDate}
@ -24,7 +24,7 @@
mode={DateRangeMode.DATETIME}
iconModifier={isOverdue ? 'overdue' : undefined}
{size}
kind="transparent"
kind="ghost"
/>
{/if}
</div>

6
plugins/calendar-resources/src/components/CalendarView.svelte
View File

@ -174,21 +174,21 @@
<div class="flex-row-center gap-2">
<Button
icon={IconBack}
kind={'transparent'}
kind={'ghost'}
on:click={() => {
inc(-1)
}}
/>
<Button
label={calendar.string.Today}
kind={'transparent'}
kind={'ghost'}
on:click={() => {
inc(0)
}}
/>
<Button
icon={IconForward}
kind={'transparent'}
kind={'ghost'}
on:click={() => {
inc(1)
}}

6
plugins/calendar-resources/src/components/CreateEvent.svelte
View File

@ -104,7 +104,7 @@
labelNull={ui.string.SelectDate}
on:change={async (event) => await handleNewStartDate(event.detail)}
mode={DateRangeMode.DATETIME}
kind={'secondary'}
kind={'regular'}
size={'large'}
editable
/>
@ -114,10 +114,10 @@
labelNull={calendar.string.DueTo}
on:change={async (event) => await handleNewDueDate(event.detail)}
mode={DateRangeMode.DATETIME}
kind={'secondary'}
kind={'regular'}
size={'large'}
editable
/>
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'regular'} size={'large'} />
</svelte:fragment>
</Card>

4
plugins/calendar-resources/src/components/CreateReminder.svelte
View File

@ -78,9 +78,9 @@
mode={DateRangeMode.DATETIME}
editable={true}
labelNull={ui.string.SelectDate}
kind={'secondary'}
kind={'regular'}
size={'large'}
/>
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'regular'} size={'large'} />
</svelte:fragment>
</Card>

8
plugins/calendar-resources/src/components/Day.svelte
View File

@ -116,13 +116,13 @@
}
.today {
color: var(--caption-color);
background-color: var(--primary-button-enabled);
border-color: var(--primary-button-focused-border);
background-color: var(--accented-button-default);
border-color: var(--accented-button-outline);
}
.selected:not(.today, .wrongMonth) {
color: var(--caption-color);
background-color: var(--primary-button-disabled);
border-color: var(--primary-button-focused-border);
background-color: var(--accented-button-disabled);
border-color: var(--accented-button-outline);
}
.marker {
position: absolute;

2
plugins/calendar-resources/src/components/DocReminder.svelte
View File

@ -59,7 +59,7 @@
<Button
size={'medium'}
kind={'transparent'}
kind={'ghost'}
icon={calendar.icon.Reminder}
showTooltip={{ label: isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders }}
on:click={(e) => click(e)}

2
plugins/calendar-resources/src/components/DocRemindersPopup.svelte
View File

@ -35,7 +35,7 @@
<div class="notifyPopup" class:min-w-168={!isMobile}>
<div class="header flex-between">
<span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
<Button icon={IconAdd} size={'medium'} kind={'transparent'} on:click={(e) => click(e)} />
<Button icon={IconAdd} size={'medium'} kind={'ghost'} on:click={(e) => click(e)} />
</div>
<Scroller>
<div class="px-4 clear-mins">

2
plugins/calendar-resources/src/components/Events.svelte
View File

@ -127,7 +127,7 @@
}}
/>
{/if}
<Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={createLabel} kind={'accented'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

8
plugins/chunter-resources/src/components/ChunterBrowser.svelte
View File

@ -71,7 +71,7 @@
<Button
label={plugin.string.Messages}
selected={searchType === SearchType.Messages}
kind="transparent"
kind="ghost"
on:click={() => {
searchType = SearchType.Messages
}}
@ -80,7 +80,7 @@
<div class="ml-1 p-1 btn">
<Button
label={plugin.string.Channels}
kind="transparent"
kind="ghost"
selected={searchType === SearchType.Channels}
on:click={() => {
searchType = SearchType.Channels
@ -90,7 +90,7 @@
<div class="ml-1 p-1 btn">
<Button
label={attachment.string.Files}
kind="transparent"
kind="ghost"
selected={searchType === SearchType.Files}
on:click={() => {
searchType = SearchType.Files
@ -99,7 +99,7 @@
</div>
<div class="ml-1 p-1 btn">
<Button
kind="transparent"
kind="ghost"
label={contact.string.Contacts}
selected={searchType === SearchType.Contacts}
on:click={() => {

2
plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
View File

@ -113,6 +113,6 @@
<style lang="scss">
.editing {
border: 1px solid var(--primary-button-focused-border);
border: 1px solid var(--accented-button-outline);
}
</style>

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

@ -57,7 +57,7 @@
export let readonly = false
export let kind: ButtonKind = 'no-border'
export let size: ButtonSize = 'small'
export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
export let avatarSize: IconSize = kind === 'regular' ? 'small' : 'card'
export let justify: 'left' | 'center' = 'center'
export let width: string | undefined = undefined
export let focusIndex = -1

10
plugins/contact-resources/src/components/ChannelEditor.svelte
View File

@ -110,7 +110,7 @@
</div>
<Button
focusIndex={2}
kind={'transparent'}
kind={'ghost'}
size={'small'}
icon={IconClose}
disabled={value === ''}
@ -124,7 +124,7 @@
<Button
id="channel-ok"
focusIndex={3}
kind={'transparent'}
kind={'ghost'}
size={'small'}
icon={IconBlueCheck}
on:click={() => {
@ -134,7 +134,7 @@
{#if openable}
<Button
focusIndex={4}
kind={'transparent'}
kind={'ghost'}
size={'small'}
icon={IconArrowRight}
on:click={() => {
@ -161,7 +161,7 @@
>
<Button
focusIndex={3}
kind={'transparent'}
kind={'ghost'}
size={'small'}
icon={IconCopy}
on:mousemove={() => {
@ -183,7 +183,7 @@
{#if openable}
<Button
focusIndex={5}
kind={'transparent'}
kind={'ghost'}
size={'small'}
icon={IconArrowRight}
on:click={() => {

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

@ -91,7 +91,7 @@
<div class="mb-1 clear-mins">
<Button
label={contact.string.ContactCreateLabel}
kind={'primary'}
kind={'accented'}
size={'medium'}
on:click={(ev) => showCreateDialog(ev)}
/>

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

@ -168,7 +168,7 @@
<ChannelsDropdown
bind:value={channels}
focusIndex={10}
kind={'secondary'}
kind={'regular'}
size={'large'}
editable
restricted={[contact.channelProvider.Email]}

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

@ -59,7 +59,7 @@
>
<div class="flex-row-center clear-mins">
<!-- <div class="mr-3">
<Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} disabled />
<Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} />
</div> -->
</div>
<svelte:fragment slot="pool">

4
plugins/contact-resources/src/components/CreateOrganization.svelte
View File

@ -88,7 +88,7 @@
>
<div class="flex-row-center clear-mins">
<div class="mr-3">
<Button icon={Company} size={'medium'} kind={'link-bordered'} disabled />
<Button icon={Company} size={'medium'} kind={'link-bordered'} noFocus />
</div>
<EditBox
placeholder={contact.string.OrganizationNamePlaceholder}
@ -102,7 +102,7 @@
<ChannelsDropdown
bind:value={channels}
focusIndex={10}
kind={'secondary'}
kind={'regular'}
size={'large'}
editable
highlighted={matchedChannels.map((it) => it.provider)}

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

@ -119,6 +119,6 @@
</div>
</div>
<svelte:fragment slot="pool">
<ChannelsDropdown bind:value={channels} focusIndex={10} kind={'secondary'} size={'large'} editable />
<ChannelsDropdown bind:value={channels} focusIndex={10} kind={'regular'} size={'large'} editable />
</svelte:fragment>
</Card>

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

@ -66,7 +66,7 @@
<Cropper bind:this={cropper} image={file} />
</div>
<div class="footer">
<Button label={presentation.string.Save} kind={'primary'} size={'large'} on:click={onCrop} />
<Button label={presentation.string.Save} kind={'accented'} size={'large'} on:click={onCrop} />
<div class="mx-3 clear-mins">
<Button label={presentation.string.Change} size={'large'} on:click={selectAnother} />
</div>

4
plugins/contact-resources/src/components/EditOrganization.svelte
View File

@ -76,8 +76,8 @@
.logo {
width: 5rem;
height: 5rem;
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
color: var(--accented-button-color);
background-color: var(--accented-button-default);
border-radius: 50%;
}
.name {

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

@ -13,7 +13,7 @@
export let accent: boolean = false
export let inline: boolean = false
export let shouldShowName: boolean = true
export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
export let avatarSize: IconSize = kind === 'regular' ? 'small' : 'card'
</script>
{#if Array.isArray(value)}

4
plugins/contact-resources/src/components/Members.svelte
View File

@ -111,8 +111,8 @@
<Label label={contact.string.Members} />
</span>
<div class="buttons-group xsmall-gap">
<ViewletSettingButton bind:viewOptions viewlet={descr} />
<Button id={contact.string.AddMember} icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
<ViewletSettingButton bind:viewOptions viewlet={descr} kind={'ghost'} />
<Button id={contact.string.AddMember} icon={IconAdd} kind={'ghost'} on:click={createApp} />
</div>
</div>
{#if members > 0 && descr}

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

@ -166,7 +166,7 @@
padding: 0.125rem 0.25rem;
font-size: 0.75rem;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border-radius: 0.25rem;
}
</style>

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

@ -115,7 +115,7 @@
align-items: center;
margin: 0 0.5rem 0.5rem 0;
padding: 0.375rem 0.625rem 0.375rem 0.5rem;
background-color: var(--theme-button-enabled);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
}

Some files were not shown because too many files have changed in this diff Show More