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-1106,-1108: update navigator and button layout (#3870)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-10-24 06:00:10 +03:00 committed by GitHub
parent 87b29578ea
commit b3a4335554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
110 changed files with 237 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -149,7 +149,7 @@
focusIndex={10001}
disabled={!canSave}
label={okLabel}
kind={'accented'}
kind={'primary'}
size={'large'}
on:click={() => {
if (okProcessing) {

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

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

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

@ -93,8 +93,8 @@
height: 2rem;
font-weight: 500;
font-size: 0.625rem;
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-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

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

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

@ -106,17 +106,17 @@
}}
>
<div class="check pointer-events-none">
<CheckBox checked={isSelected(space)} kind={'accented'} />
<CheckBox checked={isSelected(space)} kind={'primary'} />
</div>
<SpaceInfo size={'medium'} value={space} {iconWithEmoji} {defaultIcon} />
{#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 kind={'accented'} />
<CheckBox checked circle kind={'primary'} />
</div>
{:else}
<CheckBox checked circle kind={'accented'} />
<CheckBox checked circle kind={'primary'} />
{/if}
</div>
{/if}

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

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

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

@ -15,20 +15,20 @@
/* Common Colors */
* {
--accented-button-color: #fff;
--accented-button-content-color: rgba(255, 255, 255, .8);
--accented-button-border: rgba(255, 255, 255, .09);
--accented-button-outline: #5190EC;
--accented-button-transparent: rgba(43, 81, 144, 0.2);
--primary-button-color: #fff;
--primary-button-content-color: rgba(255, 255, 255, .8);
--primary-button-border: rgba(255, 255, 255, .09);
--primary-button-outline: #5190EC;
--primary-button-transparent: rgba(43, 81, 144, 0.2);
--accented-button-default: #2B5190;
--accented-button-hovered: #325FA9;
--accented-button-pressed: #284B86;
--accented-button-focused: #2B5190;
--brand-button-default: #4169E1;
--brand-button-hovered: #587BE5;
--brand-button-pressed: #2C58DE;
--brand-button-focused: #4169E1;
--primary-button-default: #205DC2;
--primary-button-hovered: #3575DE;
--primary-button-pressed: #1C52AB;
--primary-button-focused: #205DC2;
--secondary-button-default: #D3E1F8;
--secondary-button-hovered: #BDD2F5;
--secondary-button-pressed: #A7C3F1;
--secondary-button-focused: #BDD2F5;
--positive-button-default: #26A869;
--positive-button-hovered: #2BBB75;
--positive-button-pressed: #21915B;
@ -38,15 +38,6 @@
--negative-button-pressed: #BF3636;
--negative-button-focused: #CA4242;
--theme-primary-default: #205DC2;
--theme-primary-hovered: #3575DE;
--theme-primary-pressed: #1C52AB;
--theme-primary-disabled: #0000001F;
--theme-primary-accented-default: #D3E1F8;
--theme-primary-accented-hovered: #BDD2F5;
--theme-primary-accented-pressed: #A7C3F1;
--theme-primary-accented-focused: #BDD2F5;
--white-color: #fff;
--duotone-color: rgba(126, 134, 158, .25);
@ -92,10 +83,10 @@
--theme-text-primary-color: rgba(255, 255, 255, .8);
--theme-text-placeholder-color: rgba(255, 255, 255, .4);
--accented-button-disabled: rgba(255, 255, 255, .12);
--accented-button-disabled-color: rgba(255, 255, 255, .4);
--brand-button-disabled: rgba(255, 255, 255, .12);
--brand-button-disabled-color: rgba(255, 255, 255, .4);
--primary-button-disabled: rgba(255, 255, 255, .12);
--primary-button-disabled-color: rgba(255, 255, 255, .4);
--secondary-button-disabled: rgba(255, 255, 255, .12);
--secondary-button-disabled-color: rgba(255, 255, 255, .4);
--positive-button-disabled: rgba(38, 168, 105, .2);
--positive-button-disabled-color: rgba(38, 168, 105, .6);
--negative-button-disabled: rgba(202, 66, 66, .2);
@ -298,10 +289,10 @@
--theme-text-primary-color: rgba(0, 0, 0, .8);
--theme-text-placeholder-color: rgba(0, 0, 0, .4);
--accented-button-disabled: rgba(0, 0, 0, .12);
--accented-button-disabled-color: rgba(0, 0, 0, .4);
--brand-button-disabled: rgba(0, 0, 0, .12);
--brand-button-disabled-color: rgba(0, 0, 0, .4);
--primary-button-disabled: rgba(0, 0, 0, .12);
--primary-button-disabled-color: rgba(0, 0, 0, .4);
--secondary-button-disabled: rgba(0, 0, 0, .12);
--secondary-button-disabled-color: rgba(0, 0, 0, .4);
--positive-button-disabled: rgba(38, 168, 105, .2);
--positive-button-disabled-color: rgba(33, 145, 91, .6);
--negative-button-disabled: rgba(202, 66, 66, .2);

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

@ -897,7 +897,7 @@ a.no-line {
}
&:focus {
border: 1px solid var(--theme-button-border);
box-shadow: 0 0 0 2px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--primary-button-outline);
& > .icon { color: var(--theme-caption-color); }
}
@ -939,7 +939,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(--accented-button-default); }
.background-primary-color { background-color: var(--primary-button-default); }
.background-content-accent-color { background-color: var(--accent-color); }
.background-comp-header-color { background-color: var(--theme-comp-header-color); }
@ -950,7 +950,7 @@ a.no-line {
.content-color { color: var(--theme-content-color); }
.caption-color { color: var(--theme-caption-color); }
.content-accented-color { color: var(--accented-button-color); }
.content-primary-color { color: var(--primary-button-color); }
.red-color { color: var(--highlight-red); }
.error-color { color: var(--theme-error-color); }
@ -962,7 +962,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(--theme-divider-color);}
.border-primary-button { border-color: var(--accented-button-border); }
.border-primary-button { border-color: var(--primary-button-border); }
.border-top-none { border-top: none !important; }
.border-bottom-popup-divider { border-bottom: 1px solid var(--theme-popup-divider); }

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

@ -24,7 +24,6 @@
}
&.small {
height: 1.75rem;
font-size: .8125rem;
&.only-icon { width: 1.75rem; }
}
&.medium:not(.stepper) {
@ -75,14 +74,14 @@
&.sh-filter { border-radius: 0 0 .5rem .5rem; }
&.highlight {
box-shadow: inset 0 0 1px 1px var(--accented-button-outline);
&:hover { box-shadow: inset 0 0 1px 2px var(--accented-button-outline); }
box-shadow: inset 0 0 1px 1px var(--primary-button-outline);
&:hover { box-shadow: inset 0 0 1px 2px var(--primary-button-outline); }
}
&:hover .btn-icon { color: var(--theme-caption-color); }
&:not(.no-focus):focus {
&:not(.sh-filter) { box-shadow: 0 0 0 2px var(--accented-button-outline); }
&.sh-filter { border-color: var(--accented-button-outline); }
&:not(.sh-filter) { box-shadow: 0 0 0 2px var(--primary-button-outline); }
&.sh-filter { border-color: var(--primary-button-outline); }
}
&.bs-solid { border-style: solid; }
@ -192,46 +191,48 @@
}
&:not(.no-focus):focus { box-shadow: none; }
}
&.accented, &.brand, &.positive, &.negative {
&.primary, &.secondary, &.positive, &.negative {
&:hover, &:active, &:focus {
color: var(--accented-button-color);
color: var(--primary-button-color);
.btn-icon,
.btn-right-icon { color: var(--accented-button-color); }
.btn-right-icon { color: var(--primary-button-color); }
}
}
&.regular, &.ghost {
&:hover, &:active, &:focus { color: var(--theme-caption-color); }
}
&.accented,
&.brand,
&.primary,
&.secondary,
&.positive,
&.negative {
padding: 0 1.5rem;
color: var(--accented-button-content-color);
border-color: var(--accented-button-border);
color: var(--primary-button-content-color);
border-color: var(--primary-button-border);
.btn-icon,
.btn-right-icon { color: var(--accented-button-content-color); }
.btn-right-icon { color: var(--primary-button-content-color); }
}
&.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); }
&.primary {
color: var(--primary-button-color);
background-color: var(--primary-button-default);
&:hover { background-color: var(--primary-button-hovered); }
&:active { background-color: var(--primary-button-pressed); }
&:focus { background-color: var(--primary-button-focused); }
&:disabled {
color: var(--accented-button-disabled-color);
background-color: var(--accented-button-disabled);
color: var(--primary-button-disabled-color);
background-color: var(--primary-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); }
&.secondary {
background-color: var(--secondary-button-default);
&:hover { background-color: var(--secondary-button-hovered); }
&:active { background-color: var(--secondary-button-pressed); }
&:focus { background-color: var(--secondary-button-focused); }
&:disabled {
color: var(--brand-button-disabled-color);
background-color: var(--brand-button-disabled);
color: var(--secondary-button-disabled-color);
background-color: var(--secondary-button-disabled);
}
}
&.positive {
@ -278,7 +279,7 @@
height: .8125rem;
min-width: 1rem;
&:focus { box-shadow: 0 0 0 1px var(--accented-button-outline); }
&:focus { box-shadow: 0 0 0 1px var(--primary-button-outline); }
}
&.notSelected {

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

@ -151,6 +151,7 @@
letter-spacing: 1px;
text-transform: uppercase;
}
&:not(.title) { font-size: .8125rem; }
&.bold {
font-weight: 600;
color: var(--theme-caption-color);
@ -257,7 +258,7 @@
.antiNav-footer {
display: flex;
flex-direction: column;
padding: .5rem 0 .75rem;
padding: .5rem 0 1.25rem;
}
/* Basic */
@ -642,8 +643,8 @@
&:hover,
&:focus-within { background-color: var(--theme-bg-color); }
// &:focus-within .caption { box-shadow: 0 0 2px 1px var(--accented-button-outline); }
&:focus-within .caption { border-color: var(--accented-button-outline); }
// &:focus-within .caption { box-shadow: 0 0 2px 1px var(--primary-button-outline); }
&:focus-within .caption { border-color: var(--primary-button-outline); }
}
}

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

@ -335,7 +335,7 @@
left: .25rem;
width: .5rem;
height: .5rem;
background-color: var(--accented-button-color);
background-color: var(--primary-button-color);
border-radius: 50%;
opacity: .8;
z-index: 1;
@ -352,7 +352,7 @@
left: -.1875rem;
width: 1.375rem;
height: 1.375rem;
border: 1px solid var(--theme-primary-default);
border: 1px solid var(--primary-button-default);
}
&::after {
content: '';
@ -368,7 +368,7 @@
label { color: var(--theme-caption-color); }
}
&.checked:not(.disabled):hover {
&::after { background-color: var(--theme-primary-hovered); }
&::after { background-color: var(--primary-button-hovered); }
label {
color: var(--theme-caption-color);
&::after { opacity: 1; }
@ -379,18 +379,18 @@
label { color: var(--theme-caption-color); }
&.checked {
label::after { opacity: 1; }
&:active::after { background-color: var(--theme-primary-pressed); }
&:active::after { background-color: var(--primary-button-pressed); }
}
}
&.checked:not(.disabled) {
&::after { background-color: var(--theme-primary-default); }
&::after { background-color: var(--primary-button-default); }
label::after { content: ''; }
}
&.disabled {
cursor: not-allowed;
&::after {
background-color: var(--theme-primary-disabled);
background-color: var(--primary-button-disabled);
border-color: transparent;
}
label {
@ -405,7 +405,7 @@
&:not(.disabled),
&:not(.disabled) label { cursor: pointer; }
&:not(.disabled):active {
&::after { background-color: var(--theme-primary-pressed); }
&::after { background-color: var(--primary-button-pressed); }
label::after {
content: '';
opacity: 1;
@ -509,8 +509,8 @@
.logo {
width: 4.5rem;
height: 4.5rem;
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
border-radius: 50%;
}
.label {
@ -801,7 +801,7 @@
border-color: transparent;
}
&:focus {
box-shadow: 0 0 0 3px var(--accented-button-outline);
box-shadow: 0 0 0 3px var(--primary-button-outline);
& > .icon { color: var(--caption-color); }
}
}
@ -855,7 +855,7 @@
bottom: -.125rem;
left: -.125rem;
right: -.125rem;
border: 1px solid var(--theme-primary-default);
border: 1px solid var(--primary-button-default);
border-radius: .5rem;
z-index: -1;
}
@ -880,7 +880,7 @@
position: absolute;
width: 6px;
height: 6px;
background-color: var(--accented-button-default);
background-color: var(--primary-button-default);
}
&::before {
top: -2px;

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

@ -85,7 +85,7 @@
&:hover { background-color: var(--theme-button-hovered); }
&.focusable:focus-within {
background-color: var(--theme-button-focused);
border-color: var(--theme-primary-default);
border-color: var(--primary-button-default);
}
&.disabled {
color: var(--theme-dark-color);

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

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

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

@ -72,7 +72,7 @@
label === undefined &&
$$slots.content === undefined &&
(icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
$: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
$: primary = ['primary', 'secondary', 'positive', 'negative'].some((p) => p === kind)
$: devSize = $deviceInfo.size
$: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
@ -132,7 +132,7 @@
style:flex-shrink={shrink}
style:padding
{title}
type={kind === 'accented' ? 'submit' : 'button'}
type={kind === 'primary' ? 'submit' : 'button'}
on:click|stopPropagation|preventDefault
on:focus
on:blur
@ -149,7 +149,7 @@
<div
class="btn-icon pointer-events-none spinner"
class:resetIconSize
style:color={primary ? 'var(--accented-button-color)' : 'var(--theme-caption-color)'}
style:color={primary ? 'var(--primary-button-color)' : 'var(--theme-caption-color)'}
>
<Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
</div>

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

@ -19,7 +19,7 @@
export let symbol: 'check' | 'minus' = 'check'
export let size: 'small' | 'medium' | 'large' = 'small'
export let circle: boolean = false
export let kind: 'default' | 'accented' | 'positive' = 'default'
export let kind: 'default' | 'primary' | 'positive' = 'default'
export let readonly = false
const dispatch = createEventDispatcher()
@ -38,7 +38,7 @@
<label
class="checkbox {size}"
class:circle
class:accented={kind === 'accented'}
class:primary={kind === 'primary'}
class:positive={kind === 'positive'}
class:readonly
class:checked
@ -50,7 +50,7 @@
{#if symbol === 'minus'}
<rect
class="check"
class:accented={kind === 'accented'}
class:primary={kind === 'primary'}
class:positive={kind === 'positive'}
x="4"
y="7.4"
@ -60,7 +60,7 @@
{:else}
<polygon
class="check"
class:accented={kind === 'accented'}
class:primary={kind === 'primary'}
class:positive={kind === 'positive'}
points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 "
/>
@ -99,8 +99,8 @@
&.checked {
background-color: var(--theme-checkbox-bg-color);
}
&.accented.checked {
background-color: var(--accented-button-default);
&.primary.checked {
background-color: var(--primary-button-default);
border-color: transparent;
}
&.positive.checked {
@ -125,11 +125,11 @@
& .check {
visibility: visible;
fill: var(--theme-checkbox-color);
&.accented {
fill: var(--accented-button-color);
&.primary {
fill: var(--primary-button-color);
}
&.positive {
fill: var(--accented-button-color);
fill: var(--primary-button-color);
}
}
}

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

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

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

@ -22,7 +22,7 @@
export let size: ButtonSize = 'large'
export let ghost: boolean = false
export let selected: boolean = false
export let accented: boolean = false
export let primary: boolean = false
export let disabled: boolean = false
export let id: string | undefined = undefined
@ -43,7 +43,7 @@
class="flex-center icon-button icon-{size}"
class:selected
class:ghost
class:accented
class:primary
class:disabled
tabindex="0"
on:keydown={onKeydown}
@ -76,7 +76,7 @@
bottom: -0.25rem;
left: -0.25rem;
right: -0.25rem;
border: 1px solid var(--theme-primary-default);
border: 1px solid var(--primary-button-default);
border-radius: 50%;
}
&:hover {
@ -108,19 +108,19 @@
background-color: var(--menu-bg-select);
}
}
&.accented {
background-color: var(--theme-primary-accented-default);
&.primary {
background-color: var(--secondary-button-default);
&:hover {
background-color: var(--theme-primary-accented-hovered);
background-color: var(--secondary-button-hovered);
}
&:active {
background-color: var(--theme-primary-accented-pressed);
background-color: var(--secondary-button-pressed);
}
&:focus {
background-color: var(--theme-primary-accented-focused);
background-color: var(--secondary-button-focused);
}
&.disabled {
background-color: var(--theme-primary-disabled);
background-color: var(--primary-button-disabled);
}
}
}

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

@ -95,7 +95,7 @@
<svelte:fragment slot="iconRight">
<DropdownIcon
size={'small'}
fill={kind === 'accented' && !disabled ? 'var(--accented-button-content-color)' : 'var(--theme-dark-color)'}
fill={kind === 'primary' && !disabled ? 'var(--primary-button-content-color)' : 'var(--theme-dark-color)'}
/>
</svelte:fragment>
</Button>

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 kind={'accented'} /></div>
<div class="check"><CheckBox checked kind={'primary'} /></div>
{/if}
</button>
</svelte:fragment>

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

@ -58,13 +58,13 @@
&.voted {
.icon {
color: var(--accented-button-default);
color: var(--primary-button-default);
&:hover {
color: var(--accented-button-hovered);
color: var(--primary-button-hovered);
}
&:active {
color: var(--accented-button-pressed);
color: var(--primary-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(--accented-button-outline); }
// &:focus-within + .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); }
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
.toggle-switch {
position: relative;
display: inline-block;

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 accented: boolean = false
export let primary: 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={accented ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
style:stroke={primary ? '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

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

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

@ -424,7 +424,7 @@
z-index: 402;
}
&::after {
background-color: var(--theme-primary-default);
background-color: var(--primary-button-default);
transform-origin: center;
transition-property: transform;
transition-timing-function: ease-in-out;

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

@ -114,7 +114,7 @@
/>
{/if}
<Button
kind="accented"
kind="primary"
label={isDone ? doneLabel : ui.string.Next}
disabled={!isStepValid}
loading={isSaving}
@ -231,7 +231,7 @@
background-color: var(--accent-bg-color);
&::before {
background-color: var(--accented-button-outline);
background-color: var(--primary-button-outline);
}
}

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

@ -88,7 +88,7 @@
resize: none;
&:focus {
border-color: var(--accented-button-default);
border-color: var(--primary-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(--accented-button-outline); }
// &:focus-within + .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); }
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
.toggle-switch {
position: relative;
display: inline-block;

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

@ -339,8 +339,8 @@
border-radius: 0.125rem;
&:focus {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
}
&::after {
position: absolute;

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

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

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

@ -148,7 +148,7 @@
height: 2.25rem;
}
&.accented {
&.primary {
padding: 0 0.5rem;
min-width: 1.5rem;
background-color: var(--noborder-bg-color);

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(--accented-button-outline);
box-shadow: 0 0 0 3px var(--primary-button-outline);
}
&.selected {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
}
&:hover {
color: var(--caption-color);
background-color: var(--accented-button-transparent);
background-color: var(--primary-button-transparent);
}
&:before {

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

@ -264,13 +264,13 @@
border-color: var(--theme-button-border);
}
&.selected:not(.wrongMonth) {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
}
&:not(.wrongMonth):hover {
color: var(--theme-caption-color);
background-color: var(--accented-button-transparent);
background-color: var(--primary-button-transparent);
}
}

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

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

4
packages/ui/src/components/calendar/TimeInputBox.svelte
View File

@ -274,8 +274,8 @@
}
}
&:not(.disabled) .digit:focus {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
}
.time-divider {
flex-shrink: 0;

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

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

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

@ -133,8 +133,8 @@ export interface RadioItem {
}
export type ButtonKind =
| 'accented'
| 'brand'
| 'primary'
| 'secondary'
| 'positive'
| 'negative'
| 'regular'

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

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

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

@ -174,8 +174,8 @@
cursor: pointer;
&:not(.image) {
color: var(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
}
&.svg {
background-color: #fff;

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 !== '' ? 'accented' : 'regular'}
kind={m.sourceName !== '' ? 'primary' : 'regular'}
bind:selected={m.sourceName}
/> =>
<DropdownLabels
width={'10rem'}
kind={m.targetName !== '' ? 'accented' : 'regular'}
kind={m.targetName !== '' ? 'primary' : '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 !== '' ? 'accented' : 'regular'}
kind={m.doneState !== '' ? 'primary' : 'regular'}
label={getEmbeddedLabel('Done state')}
items={doneStateTitles}
bind:selected={m.doneState}

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

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

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

@ -190,7 +190,7 @@
</div>
<div class="flex-between p-5 flex-no-shrink">
<div />
<Button kind="accented" label={presentation.string.Create} on:click={saveEvent} disabled={title === ''} />
<Button kind="primary" label={presentation.string.Create} on:click={saveEvent} disabled={title === ''} />
</div>
</div>

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

@ -111,13 +111,13 @@
border: 1px solid transparent;
}
.today {
color: var(--accented-button-color);
color: var(--primary-button-color);
background-color: #3871e0;
}
.selected:not(.today, .wrongMonth) {
color: var(--theme-caption-color);
background-color: var(--accented-button-disabled);
border-color: var(--accented-button-outline);
background-color: var(--primary-button-disabled);
border-color: var(--primary-button-outline);
}
.marker {
position: absolute;

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

@ -936,7 +936,7 @@
left: -1.25rem;
font-weight: 500;
font-size: 0.75rem;
color: var(--accented-button-color);
color: var(--primary-button-color);
transform: translateX(-50%);
}
&.upperLabel::before,
@ -1065,7 +1065,7 @@
align-items: center;
min-width: 2.25rem;
padding: 0.375rem;
color: var(--accented-button-color);
color: var(--primary-button-color);
background-color: #3871e0;
border-radius: 0.375rem;
}

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

@ -191,7 +191,7 @@
<div class="divider" />
<div class="flex-between p-5 flex-no-shrink">
<div />
<Button kind="accented" label={presentation.string.Save} disabled={readOnly} on:click={saveEvent} />
<Button kind="primary" label={presentation.string.Save} disabled={readOnly} on:click={saveEvent} />
</div>
</div>

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

@ -46,7 +46,7 @@
</div>
{:else}
<div class="flex-row-center gap-1-5 mt-1">
<CheckBox bind:checked={allDay} kind={'accented'} on:value={() => dispatch('allday')} />
<CheckBox bind:checked={allDay} kind={'primary'} on:value={() => dispatch('allday')} />
<Button
label={calendar.string.AllDay}
kind={'ghost'}

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

@ -65,7 +65,7 @@
<div class="ac-header-full medium-gap mb-1">
<ViewletSelector bind:viewlet bind:loading bind:preference bind:viewlets viewletQuery={{ attachTo: _class }} />
<Button icon={IconAdd} label={createLabel} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="flex-col w-full h-full background-comp-header-color">

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

@ -64,7 +64,7 @@
<Label label={calendar.string.RedirectGoogle} />
<img class="image" src={getMetadata(calendar.image.Permissions)} alt="" />
<div class="footer">
<Button label={calendar.string.Connect} kind={'accented'} disabled={connecting} on:click={sendRequest} />
<Button label={calendar.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
</div>
</div>
</div>

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

@ -125,7 +125,7 @@
{#each weekdays as day}
<CircleButton
size={'medium'}
accented={isActive(day.id, selectedWeekdays)}
primary={isActive(day.id, selectedWeekdays)}
on:click={() => weekdayClick(day.id)}
on:selected={() => weekdayClick(day.id)}
>
@ -188,7 +188,7 @@
<Button
label={ui.string.Save}
on:click={save}
kind="accented"
kind="primary"
disabled={periodType === 'MONTHLY' && selectedWeekdays.length === 0}
/>
<Button label={ui.string.Cancel} on:click={() => dispatch('close')} />

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

@ -68,7 +68,7 @@
focusIndex={1}
label={presentation.string.Ok}
size={'large'}
kind={'accented'}
kind={'primary'}
on:click={() => {
dispatch('close', { mode: selected })
}}

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

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

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

@ -107,7 +107,7 @@
{:else if name && displayName && displayName !== ''}
<div
class="ava-text"
style:color={color ? color.iconText : 'var(--accented-button-color)'}
style:color={color ? color.iconText : 'var(--primary-button-color)'}
data-name={displayName.toLocaleUpperCase()}
/>
{:else}
@ -127,7 +127,7 @@
pointer-events: none;
&.no-img {
color: var(--accented-button-color);
color: var(--primary-button-color);
border-color: transparent;
}
&.bordered {

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

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

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={'accented'} size={'large'} on:click={onCrop} />
<Button label={presentation.string.Save} kind={'primary'} 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(--accented-button-color);
background-color: var(--accented-button-default);
color: var(--primary-button-color);
background-color: var(--primary-button-default);
border-radius: 50%;
}
.name {

4
plugins/gmail-resources/src/components/Chats.svelte
View File

@ -99,13 +99,13 @@
<span class="pl-2"><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
<div class="flex-row-center gap-3">
<Button label={gmail.string.Cancel} on:click={clear} />
<Button label={gmail.string.PublishSelected} kind={'accented'} disabled={!selected.size} on:click={share} />
<Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
</div>
{:else}
{#if enabled}
<Button
label={gmail.string.CreateMessage}
kind={'accented'}
kind={'primary'}
on:click={() => {
newMessage = true
}}

2
plugins/gmail-resources/src/components/Connect.svelte
View File

@ -63,7 +63,7 @@
<div class="content">
<Label label={gmail.string.RedirectGoogle} />
<div class="footer">
<Button label={gmail.string.Connect} kind={'accented'} disabled={connecting} on:click={sendRequest} />
<Button label={gmail.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
</div>
</div>
</div>

2
plugins/gmail-resources/src/components/Main.svelte
View File

@ -118,7 +118,7 @@
{#if integrations.length === 0}
<Button
label={gmail.string.Connect}
kind={'accented'}
kind={'primary'}
size={'medium'}
on:click={(e) => {
showPopup(Connect, {}, eventToHTMLElement(e))

4
plugins/gmail-resources/src/components/Message.svelte
View File

@ -69,7 +69,7 @@
{/if}
</div>
{#if selectable}
<div class="ml-4"><CheckBox circle kind={'accented'} bind:checked={selected} /></div>
<div class="ml-4"><CheckBox circle kind={'primary'} bind:checked={selected} /></div>
{/if}
</div>
@ -88,7 +88,7 @@
flex-grow: 1;
&.selected {
background-color: var(--accented-button-default);
background-color: var(--primary-button-default);
}
}
</style>

2
plugins/gmail-resources/src/components/NewMessage.svelte
View File

@ -198,7 +198,7 @@
inputFile.click()
}}
/>
<Button label={plugin.string.Send} kind={'accented'} disabled={progress} on:click={sendMsg} />
<Button label={plugin.string.Send} kind={'primary'} disabled={progress} on:click={sendMsg} />
</div>
</div>
{#if attachments.length}

4
plugins/gmail-resources/src/components/NewMessages.svelte
View File

@ -248,7 +248,7 @@
{#if integrations.length === 0}
<Button
label={plugin.string.Connect}
kind={'accented'}
kind={'primary'}
on:click={(e) => {
showPopup(Connect, {}, eventToHTMLElement(e))
}}
@ -297,7 +297,7 @@
<Button
label={plugin.string.Send}
size={'small'}
kind={'accented'}
kind={'primary'}
disabled={channels.length === 0}
on:click={sendMsg}
/>

2
plugins/hr-resources/src/components/DepartmentCard.svelte
View File

@ -169,7 +169,7 @@
cursor: pointer;
}
&.dragging {
border-color: var(--accented-button-outline);
border-color: var(--primary-button-outline);
}
}
</style>

2
plugins/hr-resources/src/components/Structure.svelte
View File

@ -85,7 +85,7 @@
</div>
<div class="mb-1 clear-mins">
<Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

2
plugins/hr-resources/src/components/schedule/YearView.svelte
View File

@ -205,7 +205,7 @@
border: none;
color: var(--caption-color);
&.today {
background-color: var(--accented-button-disabled);
background-color: var(--primary-button-disabled);
}
&.summary {
font-weight: 600;

2
plugins/inventory-resources/src/components/Categories.svelte
View File

@ -42,7 +42,7 @@
</div>
<div class="mb-1 clear-mins">
<Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

2
plugins/lead-resources/src/components/NewItemsHeader.svelte
View File

@ -28,7 +28,7 @@
label={lead.string.CreateCustomerLabel}
justify={'left'}
width={'100%'}
kind={'accented'}
kind={'primary'}
gap={'large'}
on:click={newIssue}
/>

4
plugins/login-resources/src/components/InviteLink.svelte
View File

@ -167,7 +167,7 @@
<Button
label={login.string.Close}
size={'medium'}
kind={'accented'}
kind={'primary'}
on:click={() => {
dispatch('close')
}}
@ -179,7 +179,7 @@
<Button
label={login.string.GetLink}
size={'medium'}
kind={'accented'}
kind={'primary'}
on:click={() => {
;((limit !== undefined && limit > 0) || noLimit) && getLink(expHours, emailMask, limit)
}}

2
plugins/login-resources/src/components/SelectWorkspace.svelte
View File

@ -131,7 +131,7 @@
{/each}
{#if !workspaces.length && account?.confirmed === true}
<div class="form-row send">
<Button label={login.string.CreateWorkspace} kind={'accented'} width="100%" on:click={createWorkspace} />
<Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
</div>
{/if}
</div>

2
plugins/notification-resources/src/components/EmployeeInbox.svelte
View File

@ -194,7 +194,7 @@
{/if}
</div>
{#if me !== accountId}
<Button label={chunter.string.Message} kind="accented" on:click={openDM} />
<Button label={chunter.string.Message} kind="primary" on:click={openDM} />
{/if}
</div>
<div class="inbox-activity">

2
plugins/notification-resources/src/components/Inbox.svelte
View File

@ -154,7 +154,7 @@
<svelte:fragment slot="rightButtons">
<div class="flex flex-gap-2">
{#if selectedTab > 0}
<Button label={chunter.string.Message} icon={IconAdd} kind="accented" on:click={openUsersPopup} />
<Button label={chunter.string.Message} icon={IconAdd} kind="primary" on:click={openUsersPopup} />
{/if}
<Filter bind:filter />
</div>

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

@ -722,12 +722,12 @@
<style lang="scss">
.resume {
box-shadow: 0 0 0 0 var(--accented-button-outline);
box-shadow: 0 0 0 0 var(--primary-button-outline);
border-radius: 0.25rem;
transition: box-shadow 0.15s ease-in-out;
&.solid {
box-shadow: 0 0 0 2px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--primary-button-outline);
}
}
.skills-box {

2
plugins/recruit-resources/src/components/NewCandidateHeader.svelte
View File

@ -38,7 +38,7 @@
icon={IconAdd}
label={draftExists ? recruit.string.ResumeDraft : recruit.string.CreateTalent}
justify={'left'}
kind={'accented'}
kind={'primary'}
width={'100%'}
gap={'large'}
on:click={newCandidate}

2
plugins/recruit-resources/src/components/Organizations.svelte
View File

@ -209,7 +209,7 @@
descriptor: { $in: [view.viewlet.Table, view.viewlet.List] }
}}
/>
<Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

2
plugins/recruit-resources/src/components/Vacancies.svelte
View File

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

7
plugins/request-resources/src/components/RequestLabel.svelte
View File

@ -51,12 +51,7 @@
{:else}
<div class="flex-row-center content-color text-sm pointer-events-none">
<div class="mr-1">
<ProgressCircle
max={value.requiredApprovesCount}
value={value.approved.length}
size={'inline'}
accented
/>
<ProgressCircle max={value.requiredApprovesCount} value={value.approved.length} size={'inline'} primary />
</div>
{value.approved.length}/{value.requiredApprovesCount}
</div>

2
plugins/setting-resources/src/components/InviteSetting.svelte
View File

@ -71,7 +71,7 @@
</div>
{/if}
<div class="mt-2">
<Button label={presentation.string.Save} size={'medium'} kind={'accented'} on:click={() => setInviteSettings()} />
<Button label={presentation.string.Save} size={'medium'} kind={'primary'} on:click={() => setInviteSettings()} />
</div>
</div>

2
plugins/setting-resources/src/components/Owners.svelte
View File

@ -76,7 +76,7 @@
<DropdownLabelsIntl
label={setting.string.Role}
disabled={account.role > currentRole || (account.role === AccountRole.Owner && owners.length === 1)}
kind={'accented'}
kind={'primary'}
size={'medium'}
{items}
selected={account.role.toString()}

2
plugins/setting-resources/src/components/Password.svelte
View File

@ -98,7 +98,7 @@
<Button
{label}
{disabled}
kind={'accented'}
kind={'primary'}
on:click={() => {
save()
}}

6
plugins/setting-resources/src/components/PluginCard.svelte
View File

@ -99,12 +99,12 @@
{#if integrationType.createComponent}
<Button
label={setting.string.Add}
kind={'accented'}
kind={'primary'}
on:click={(ev) => handleConfigure(integrationType.createComponent)}
/>
{/if}
{:else if (integration?.disabled ?? false) && integrationType.reconnectComponent}
<Button label={setting.string.Reconnect} kind={'accented'} on:click={handleReconnect} />
<Button label={setting.string.Reconnect} kind={'primary'} on:click={handleReconnect} />
{:else if integration?.value !== ''}
{#if integrationType.onDisconnect}
<Button label={setting.string.Disconnect} on:click={disconnect} />
@ -112,7 +112,7 @@
{#if integrationType.configureComponent !== undefined}
<Button
label={setting.string.Configure}
kind={'accented'}
kind={'primary'}
on:click={(ev) => handleConfigure(integrationType.configureComponent)}
/>
{/if}

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

@ -147,7 +147,7 @@
}}
>
<div class="check pointer-events-none">
<CheckBox checked={isSelected(element, selected)} kind={'accented'} />
<CheckBox checked={isSelected(element, selected)} kind={'primary'} />
</div>
<div class="tag" style="background-color: {color.background};" />
<span style:color={color.title}>

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

@ -95,7 +95,7 @@
</div>
<div class="clear-mins mb-1">
<Button icon={IconAdd} label={сreateItemLabel} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

6
plugins/telegram-resources/src/components/Chat.svelte
View File

@ -242,7 +242,7 @@
{#if integration === undefined}
<Button
label={telegram.string.Connect}
kind={'accented'}
kind={'primary'}
on:click={(e) => {
showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
}}
@ -250,7 +250,7 @@
{:else if integration.disabled}
<Button
label={setting.string.Reconnect}
kind={'accented'}
kind={'primary'}
on:click={(e) => {
showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
}}
@ -285,7 +285,7 @@
<Button
label={telegram.string.PublishSelected}
size={'medium'}
kind={'accented'}
kind={'primary'}
disabled={!selected.size}
on:click={share}
/>

2
plugins/telegram-resources/src/components/Connect.svelte
View File

@ -154,7 +154,7 @@
<EditBox label={telegram.string.Phone} placeholder={telegram.string.PhonePlaceholder} bind:value={phone} />
{/if}
<div class="footer">
<Button {label} kind={'accented'} {disabled} on:click={click} />
<Button {label} kind={'primary'} {disabled} on:click={click} />
{#if requested || secondFactor}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>

2
plugins/telegram-resources/src/components/Message.svelte
View File

@ -43,7 +43,7 @@
}}
>
<div class="check-box">
{#if selectable}<CheckBox circle kind={'accented'} bind:checked={selected} />{/if}
{#if selectable}<CheckBox circle kind={'primary'} bind:checked={selected} />{/if}
</div>
<div class="message-container" class:out={!message.incoming}>
<div class="message" class:outcoming={!message.incoming} class:selected>

2
plugins/telegram-resources/src/components/PinPad.svelte
View File

@ -116,7 +116,7 @@
}
&:focus {
box-shadow: 0 0 0 2px var(--accented-button-outline);
box-shadow: 0 0 0 2px var(--primary-button-outline);
}
}

2
plugins/telegram-resources/src/components/Reconnect.svelte
View File

@ -169,7 +169,7 @@
{/await}
{/if}
<div class="footer">
<Button {label} kind={'accented'} {disabled} on:click={click} />
<Button {label} kind={'primary'} {disabled} on:click={click} />
{#if requested || secondFactor}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>

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

@ -220,7 +220,7 @@
<div class="ml-2">
<Button
disabled={newTemplate.title.trim().length === 0}
kind={'accented'}
kind={'primary'}
label={templatesPlugin.string.SaveTemplate}
on:click={saveNewTemplate}
/>
@ -245,7 +245,7 @@
</div>
<div class="flex flex-reverse">
<Button
kind={'accented'}
kind={'primary'}
label={templatesPlugin.string.EditTemplate}
on:click={() => {
mode = Mode.Edit

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

@ -89,7 +89,7 @@
<div class="buttonContent">
{#if i !== 0 || (i === 0 && !onBack)}
<div class="flex check pointer-events-none">
<CheckBox checked={selectedElementsMap[i]} kind={'accented'} />
<CheckBox checked={selectedElementsMap[i]} kind={'primary'} />
</div>
{/if}
{#if action.icon}

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

@ -54,7 +54,7 @@
icon={IconAdd}
{label}
justify={'left'}
kind={'accented'}
kind={'primary'}
width={'100%'}
gap={'large'}
on:click={newIssue}

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

@ -87,7 +87,7 @@
<div class="ac-header-full medium-gap mb-1">
<ViewletSelector bind:viewlet bind:viewlets viewletQuery={{ attachTo: tracker.class.Component }} />
<Button icon={IconAdd} label={tracker.string.Component} kind="accented" on:click={showCreateDialog} />
<Button icon={IconAdd} label={tracker.string.Component} kind="primary" on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

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

@ -156,7 +156,7 @@
<div class="flex-row-center content-color text-sm pointer-events-none">
{#if !compactMode}
<div class="mr-1-5">
<ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
<ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
</div>
{/if}
{countComplete}/{subIssues.length}

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

@ -132,7 +132,7 @@
<div class="flex-row-center content-color text-sm pointer-events-none">
{#if !compactMode}
<div class="mr-1-5">
<ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
<ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
</div>
{/if}
{countComplete}/{subIssues.length}

4
plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
View File

@ -19,7 +19,7 @@
export let min: number = 0
export let max: number = 100
export let size: IconSize = 'small'
export let accented: boolean = false
export let primary: boolean = false
export let color: string = 'var(--theme-progress-color)'
export let greenColor: string = FernColor
@ -50,7 +50,7 @@
cy={8}
r={7}
class="progress-circle"
style:stroke={accented ? 'var(--primary-bg-color)' : color}
style:stroke={primary ? 'var(--primary-bg-color)' : color}
style:opacity={dashOffset === 0 ? 0 : 1}
style:transform={'rotate(-82deg)'}
style:stroke-dasharray={lenghtC}

2
plugins/tracker-resources/src/components/milestones/MilestoneBrowser.svelte
View File

@ -88,7 +88,7 @@
</div>
<div class="ac-header-full medium-gap mb-1">
<Button icon={IconAdd} label={tracker.string.Milestone} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={tracker.string.Milestone} kind={'primary'} on:click={showCreateDialog} />
</div>
</div>
<div class="ac-header full divide search-start">

2
plugins/tracker-resources/src/components/milestones/MilestoneDatePresenter.svelte
View File

@ -21,7 +21,7 @@
export let value: Milestone
export let field = 'targetDate'
export let kind: 'ghost' | 'accented' | 'link' | 'list' = 'accented'
export let kind: 'ghost' | 'primary' | 'link' | 'list' = 'primary'
export let size: ButtonSize | 'x-small' = 'small'
const client = getClient()

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

@ -65,7 +65,7 @@
<slot name="label_selector" />
</svelte:fragment>
<svelte:fragment slot="header-tools">
<Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'accented'} on:click={showCreateDialog} />
<Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'primary'} on:click={showCreateDialog} />
</svelte:fragment>
<svelte:fragment slot="extra">
{#if asideFloat && $$slots.aside}

2
plugins/tracker-resources/src/components/workflow/RemoveStatus.svelte
View File

@ -93,7 +93,7 @@
focus
label={presentation.string.Ok}
size={'small'}
kind={'accented'}
kind={'primary'}
loading={processing}
on:click={remove}
/>

2
plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
View File

@ -72,7 +72,7 @@
<Button
label={presentation.string.Save}
size={'small'}
kind={'accented'}
kind={'primary'}
disabled={!canSave}
on:click={() => dispatch('save')}
/>

6
plugins/view-resources/src/components/BooleanEditorPopup.svelte
View File

@ -29,7 +29,7 @@
<BooleanPresenter value={true} />
{#if value === true}
<div class="check">
<CheckBox checked={value === true} kind={'accented'} />
<CheckBox checked={value === true} kind={'primary'} />
</div>
{/if}
</div>
@ -37,7 +37,7 @@
<BooleanPresenter value={false} />
{#if value === false}
<div class="check">
<CheckBox checked={value === false} kind={'accented'} />
<CheckBox checked={value === false} kind={'primary'} />
</div>
{/if}
</div>
@ -46,7 +46,7 @@
<BooleanPresenter value={undefined} />
{#if value === undefined}
<div class="check">
<CheckBox checked={value === undefined} kind={'accented'} />
<CheckBox checked={value === undefined} kind={'primary'} />
</div>
{/if}
</div>

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