hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 11:42:30 +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: { kind: {
control: 'select', 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', description: 'kind description',
table: { table: {
type: { summary: 'ButtonKind' }, type: { summary: 'ButtonKind' },
@ -109,7 +109,7 @@ type Story = StoryObj<typeof meta>;
export const Ok: Story = { export const Ok: Story = {
args: { args: {
label: uiPlugin.string.Ok, label: uiPlugin.string.Ok,
kind: 'accented', kind: 'primary',
size: 'medium', size: 'medium',
shape: undefined, shape: undefined,
justify: 'left', justify: 'left',
@ -125,7 +125,7 @@ export const Ok: Story = {
export const Cancel: Story = { export const Cancel: Story = {
args: { args: {
label: uiPlugin.string.Cancel, label: uiPlugin.string.Cancel,
kind: 'accented', kind: 'primary',
size: 'medium', size: 'medium',
shape: undefined, shape: undefined,
justify: 'left', justify: 'left',

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

@ -148,7 +148,7 @@
} }
&.selection, &.selection,
&.checked.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; animation: anim-border 1s ease-in-out;
&:hover { &:hover {

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

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

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

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

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

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

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

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

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

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

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

@ -51,7 +51,7 @@
} }
&:focus { &:focus {
color: var(--theme-caption-color); 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 { &.selected {
background-color: var(--theme-button-pressed); background-color: var(--theme-button-pressed);

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

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

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

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

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

@ -151,6 +151,7 @@
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
&:not(.title) { font-size: .8125rem; }
&.bold { &.bold {
font-weight: 600; font-weight: 600;
color: var(--theme-caption-color); color: var(--theme-caption-color);
@ -257,7 +258,7 @@
.antiNav-footer { .antiNav-footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: .5rem 0 .75rem; padding: .5rem 0 1.25rem;
} }
/* Basic */ /* Basic */
@ -642,8 +643,8 @@
&:hover, &:hover,
&:focus-within { background-color: var(--theme-bg-color); } &:focus-within { background-color: var(--theme-bg-color); }
// &:focus-within .caption { box-shadow: 0 0 2px 1px var(--accented-button-outline); } // &:focus-within .caption { box-shadow: 0 0 2px 1px var(--primary-button-outline); }
&:focus-within .caption { border-color: var(--accented-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; left: .25rem;
width: .5rem; width: .5rem;
height: .5rem; height: .5rem;
background-color: var(--accented-button-color); background-color: var(--primary-button-color);
border-radius: 50%; border-radius: 50%;
opacity: .8; opacity: .8;
z-index: 1; z-index: 1;
@ -352,7 +352,7 @@
left: -.1875rem; left: -.1875rem;
width: 1.375rem; width: 1.375rem;
height: 1.375rem; height: 1.375rem;
border: 1px solid var(--theme-primary-default); border: 1px solid var(--primary-button-default);
} }
&::after { &::after {
content: ''; content: '';
@ -368,7 +368,7 @@
label { color: var(--theme-caption-color); } label { color: var(--theme-caption-color); }
} }
&.checked:not(.disabled):hover { &.checked:not(.disabled):hover {
&::after { background-color: var(--theme-primary-hovered); } &::after { background-color: var(--primary-button-hovered); }
label { label {
color: var(--theme-caption-color); color: var(--theme-caption-color);
&::after { opacity: 1; } &::after { opacity: 1; }
@ -379,18 +379,18 @@
label { color: var(--theme-caption-color); } label { color: var(--theme-caption-color); }
&.checked { &.checked {
label::after { opacity: 1; } label::after { opacity: 1; }
&:active::after { background-color: var(--theme-primary-pressed); } &:active::after { background-color: var(--primary-button-pressed); }
} }
} }
&.checked:not(.disabled) { &.checked:not(.disabled) {
&::after { background-color: var(--theme-primary-default); } &::after { background-color: var(--primary-button-default); }
label::after { content: ''; } label::after { content: ''; }
} }
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
&::after { &::after {
background-color: var(--theme-primary-disabled); background-color: var(--primary-button-disabled);
border-color: transparent; border-color: transparent;
} }
label { label {
@ -405,7 +405,7 @@
&:not(.disabled), &:not(.disabled),
&:not(.disabled) label { cursor: pointer; } &:not(.disabled) label { cursor: pointer; }
&:not(.disabled):active { &:not(.disabled):active {
&::after { background-color: var(--theme-primary-pressed); } &::after { background-color: var(--primary-button-pressed); }
label::after { label::after {
content: ''; content: '';
opacity: 1; opacity: 1;
@ -509,8 +509,8 @@
.logo { .logo {
width: 4.5rem; width: 4.5rem;
height: 4.5rem; height: 4.5rem;
color: var(--accented-button-color); color: var(--primary-button-color);
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
border-radius: 50%; border-radius: 50%;
} }
.label { .label {
@ -801,7 +801,7 @@
border-color: transparent; border-color: transparent;
} }
&:focus { &: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); } & > .icon { color: var(--caption-color); }
} }
} }
@ -855,7 +855,7 @@
bottom: -.125rem; bottom: -.125rem;
left: -.125rem; left: -.125rem;
right: -.125rem; right: -.125rem;
border: 1px solid var(--theme-primary-default); border: 1px solid var(--primary-button-default);
border-radius: .5rem; border-radius: .5rem;
z-index: -1; z-index: -1;
} }
@ -880,7 +880,7 @@
position: absolute; position: absolute;
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
} }
&::before { &::before {
top: -2px; top: -2px;

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

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

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

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

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

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

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

@ -19,7 +19,7 @@
export let symbol: 'check' | 'minus' = 'check' export let symbol: 'check' | 'minus' = 'check'
export let size: 'small' | 'medium' | 'large' = 'small' export let size: 'small' | 'medium' | 'large' = 'small'
export let circle: boolean = false export let circle: boolean = false
export let kind: 'default' | 'accented' | 'positive' = 'default' export let kind: 'default' | 'primary' | 'positive' = 'default'
export let readonly = false export let readonly = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -38,7 +38,7 @@
<label <label
class="checkbox {size}" class="checkbox {size}"
class:circle class:circle
class:accented={kind === 'accented'} class:primary={kind === 'primary'}
class:positive={kind === 'positive'} class:positive={kind === 'positive'}
class:readonly class:readonly
class:checked class:checked
@ -50,7 +50,7 @@
{#if symbol === 'minus'} {#if symbol === 'minus'}
<rect <rect
class="check" class="check"
class:accented={kind === 'accented'} class:primary={kind === 'primary'}
class:positive={kind === 'positive'} class:positive={kind === 'positive'}
x="4" x="4"
y="7.4" y="7.4"
@ -60,7 +60,7 @@
{:else} {:else}
<polygon <polygon
class="check" class="check"
class:accented={kind === 'accented'} class:primary={kind === 'primary'}
class:positive={kind === 'positive'} 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 " 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 { &.checked {
background-color: var(--theme-checkbox-bg-color); background-color: var(--theme-checkbox-bg-color);
} }
&.accented.checked { &.primary.checked {
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
border-color: transparent; border-color: transparent;
} }
&.positive.checked { &.positive.checked {
@ -125,11 +125,11 @@
& .check { & .check {
visibility: visible; visibility: visible;
fill: var(--theme-checkbox-color); fill: var(--theme-checkbox-color);
&.accented { &.primary {
fill: var(--accented-button-color); fill: var(--primary-button-color);
} }
&.positive { &.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; overflow-wrap: break-word;
&:focus { &:focus {
border-color: var(--accented-button-default); border-color: var(--primary-button-default);
} }
&::-webkit-contacts-auto-fill-button, &::-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 size: ButtonSize = 'large'
export let ghost: boolean = false export let ghost: boolean = false
export let selected: boolean = false export let selected: boolean = false
export let accented: boolean = false export let primary: boolean = false
export let disabled: boolean = false export let disabled: boolean = false
export let id: string | undefined = undefined export let id: string | undefined = undefined
@ -43,7 +43,7 @@
class="flex-center icon-button icon-{size}" class="flex-center icon-button icon-{size}"
class:selected class:selected
class:ghost class:ghost
class:accented class:primary
class:disabled class:disabled
tabindex="0" tabindex="0"
on:keydown={onKeydown} on:keydown={onKeydown}
@ -76,7 +76,7 @@
bottom: -0.25rem; bottom: -0.25rem;
left: -0.25rem; left: -0.25rem;
right: -0.25rem; right: -0.25rem;
border: 1px solid var(--theme-primary-default); border: 1px solid var(--primary-button-default);
border-radius: 50%; border-radius: 50%;
} }
&:hover { &:hover {
@ -108,19 +108,19 @@
background-color: var(--menu-bg-select); background-color: var(--menu-bg-select);
} }
} }
&.accented { &.primary {
background-color: var(--theme-primary-accented-default); background-color: var(--secondary-button-default);
&:hover { &:hover {
background-color: var(--theme-primary-accented-hovered); background-color: var(--secondary-button-hovered);
} }
&:active { &:active {
background-color: var(--theme-primary-accented-pressed); background-color: var(--secondary-button-pressed);
} }
&:focus { &:focus {
background-color: var(--theme-primary-accented-focused); background-color: var(--secondary-button-focused);
} }
&.disabled { &.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"> <svelte:fragment slot="iconRight">
<DropdownIcon <DropdownIcon
size={'small'} 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> </svelte:fragment>
</Button> </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> <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
{#if item[0] === selected} {#if item[0] === selected}
<div class="check"><CheckBox checked kind={'accented'} /></div> <div class="check"><CheckBox checked kind={'primary'} /></div>
{/if} {/if}
</button> </button>
</svelte:fragment> </svelte:fragment>

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

@ -58,13 +58,13 @@
&.voted { &.voted {
.icon { .icon {
color: var(--accented-button-default); color: var(--primary-button-default);
&:hover { &:hover {
color: var(--accented-button-hovered); color: var(--primary-button-hovered);
} }
&:active { &: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; 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 { .toggle-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;

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

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

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

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

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

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

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

@ -114,7 +114,7 @@
/> />
{/if} {/if}
<Button <Button
kind="accented" kind="primary"
label={isDone ? doneLabel : ui.string.Next} label={isDone ? doneLabel : ui.string.Next}
disabled={!isStepValid} disabled={!isStepValid}
loading={isSaving} loading={isSaving}
@ -231,7 +231,7 @@
background-color: var(--accent-bg-color); background-color: var(--accent-bg-color);
&::before { &::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; resize: none;
&:focus { &:focus {
border-color: var(--accented-button-default); border-color: var(--primary-button-default);
} }
&::placeholder { &::placeholder {
color: var(--dark-color); color: var(--dark-color);

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

@ -73,9 +73,9 @@
background: #eee; 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 { .toggle-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;

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

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

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

@ -169,7 +169,7 @@
{/if} {/if}
</div> </div>
<div class="footer"> <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>
</div> </div>
<Shifts <Shifts

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

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

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

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

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

@ -264,13 +264,13 @@
border-color: var(--theme-button-border); border-color: var(--theme-button-border);
} }
&.selected:not(.wrongMonth) { &.selected:not(.wrongMonth) {
color: var(--accented-button-color); color: var(--primary-button-color);
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
} }
&:not(.wrongMonth):hover { &:not(.wrongMonth):hover {
color: var(--theme-caption-color); 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> </div>
<div class="footer"> <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>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -190,7 +190,7 @@
</div> </div>
<div class="flex-between p-5 flex-no-shrink"> <div class="flex-between p-5 flex-no-shrink">
<div /> <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>
</div> </div>

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

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

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

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

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

@ -191,7 +191,7 @@
<div class="divider" /> <div class="divider" />
<div class="flex-between p-5 flex-no-shrink"> <div class="flex-between p-5 flex-no-shrink">
<div /> <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>
</div> </div>

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

@ -46,7 +46,7 @@
</div> </div>
{:else} {:else}
<div class="flex-row-center gap-1-5 mt-1"> <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 <Button
label={calendar.string.AllDay} label={calendar.string.AllDay}
kind={'ghost'} 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"> <div class="ac-header-full medium-gap mb-1">
<ViewletSelector bind:viewlet bind:loading bind:preference bind:viewlets viewletQuery={{ attachTo: _class }} /> <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> </div>
<div class="flex-col w-full h-full background-comp-header-color"> <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} /> <Label label={calendar.string.RedirectGoogle} />
<img class="image" src={getMetadata(calendar.image.Permissions)} alt="" /> <img class="image" src={getMetadata(calendar.image.Permissions)} alt="" />
<div class="footer"> <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> </div>
</div> </div>

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

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

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

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

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

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

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

@ -60,7 +60,7 @@
<div class="mb-1 clear-mins"> <div class="mb-1 clear-mins">
<Button <Button
label={contact.string.ContactCreateLabel} label={contact.string.ContactCreateLabel}
kind={'accented'} kind={'primary'}
size={'medium'} size={'medium'}
on:click={(ev) => showCreateDialog(ev)} 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} /> <Cropper bind:this={cropper} image={file} />
</div> </div>
<div class="footer"> <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"> <div class="mx-3 clear-mins">
<Button label={presentation.string.Change} size={'large'} on:click={selectAnother} /> <Button label={presentation.string.Change} size={'large'} on:click={selectAnother} />
</div> </div>

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

@ -76,8 +76,8 @@
.logo { .logo {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
color: var(--accented-button-color); color: var(--primary-button-color);
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
border-radius: 50%; border-radius: 50%;
} }
.name { .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> <span class="pl-2"><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
<div class="flex-row-center gap-3"> <div class="flex-row-center gap-3">
<Button label={gmail.string.Cancel} on:click={clear} /> <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> </div>
{:else} {:else}
{#if enabled} {#if enabled}
<Button <Button
label={gmail.string.CreateMessage} label={gmail.string.CreateMessage}
kind={'accented'} kind={'primary'}
on:click={() => { on:click={() => {
newMessage = true newMessage = true
}} }}

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

@ -63,7 +63,7 @@
<div class="content"> <div class="content">
<Label label={gmail.string.RedirectGoogle} /> <Label label={gmail.string.RedirectGoogle} />
<div class="footer"> <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> </div>
</div> </div>

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

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

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

@ -69,7 +69,7 @@
{/if} {/if}
</div> </div>
{#if selectable} {#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} {/if}
</div> </div>
@ -88,7 +88,7 @@
flex-grow: 1; flex-grow: 1;
&.selected { &.selected {
background-color: var(--accented-button-default); background-color: var(--primary-button-default);
} }
} }
</style> </style>

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

@ -198,7 +198,7 @@
inputFile.click() 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>
</div> </div>
{#if attachments.length} {#if attachments.length}

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

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

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

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

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

@ -85,7 +85,7 @@
</div> </div>
<div class="mb-1 clear-mins"> <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> </div>
<div class="ac-header full divide search-start"> <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; border: none;
color: var(--caption-color); color: var(--caption-color);
&.today { &.today {
background-color: var(--accented-button-disabled); background-color: var(--primary-button-disabled);
} }
&.summary { &.summary {
font-weight: 600; font-weight: 600;

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

@ -42,7 +42,7 @@
</div> </div>
<div class="mb-1 clear-mins"> <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> </div>
<div class="ac-header full divide search-start"> <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} label={lead.string.CreateCustomerLabel}
justify={'left'} justify={'left'}
width={'100%'} width={'100%'}
kind={'accented'} kind={'primary'}
gap={'large'} gap={'large'}
on:click={newIssue} on:click={newIssue}
/> />

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

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

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

@ -131,7 +131,7 @@
{/each} {/each}
{#if !workspaces.length && account?.confirmed === true} {#if !workspaces.length && account?.confirmed === true}
<div class="form-row send"> <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> </div>
{/if} {/if}
</div> </div>

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

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

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

@ -154,7 +154,7 @@
<svelte:fragment slot="rightButtons"> <svelte:fragment slot="rightButtons">
<div class="flex flex-gap-2"> <div class="flex flex-gap-2">
{#if selectedTab > 0} {#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} {/if}
<Filter bind:filter /> <Filter bind:filter />
</div> </div>

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

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

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

@ -38,7 +38,7 @@
icon={IconAdd} icon={IconAdd}
label={draftExists ? recruit.string.ResumeDraft : recruit.string.CreateTalent} label={draftExists ? recruit.string.ResumeDraft : recruit.string.CreateTalent}
justify={'left'} justify={'left'}
kind={'accented'} kind={'primary'}
width={'100%'} width={'100%'}
gap={'large'} gap={'large'}
on:click={newCandidate} 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] } 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> </div>
<div class="ac-header full divide search-start"> <div class="ac-header full divide search-start">

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

@ -150,7 +150,7 @@
}} }}
/> />
{/if} {/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> </div>
<div class="ac-header full divide search-start"> <div class="ac-header full divide search-start">

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

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

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

@ -71,7 +71,7 @@
</div> </div>
{/if} {/if}
<div class="mt-2"> <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>
</div> </div>

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

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

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

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

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

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

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

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

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

@ -95,7 +95,7 @@
</div> </div>
<div class="clear-mins mb-1"> <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> </div>
<div class="ac-header full divide search-start"> <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} {#if integration === undefined}
<Button <Button
label={telegram.string.Connect} label={telegram.string.Connect}
kind={'accented'} kind={'primary'}
on:click={(e) => { on:click={(e) => {
showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose) showPopup(Connect, {}, eventToHTMLElement(e), onConnectClose)
}} }}
@ -250,7 +250,7 @@
{:else if integration.disabled} {:else if integration.disabled}
<Button <Button
label={setting.string.Reconnect} label={setting.string.Reconnect}
kind={'accented'} kind={'primary'}
on:click={(e) => { on:click={(e) => {
showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect) showPopup(Reconnect, {}, eventToHTMLElement(e), onReconnect)
}} }}
@ -285,7 +285,7 @@
<Button <Button
label={telegram.string.PublishSelected} label={telegram.string.PublishSelected}
size={'medium'} size={'medium'}
kind={'accented'} kind={'primary'}
disabled={!selected.size} disabled={!selected.size}
on:click={share} 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} /> <EditBox label={telegram.string.Phone} placeholder={telegram.string.PhonePlaceholder} bind:value={phone} />
{/if} {/if}
<div class="footer"> <div class="footer">
<Button {label} kind={'accented'} {disabled} on:click={click} /> <Button {label} kind={'primary'} {disabled} on:click={click} />
{#if requested || secondFactor} {#if requested || secondFactor}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div> <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"> <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>
<div class="message-container" class:out={!message.incoming}> <div class="message-container" class:out={!message.incoming}>
<div class="message" class:outcoming={!message.incoming} class:selected> <div class="message" class:outcoming={!message.incoming} class:selected>

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

@ -116,7 +116,7 @@
} }
&:focus { &: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} {/await}
{/if} {/if}
<div class="footer"> <div class="footer">
<Button {label} kind={'accented'} {disabled} on:click={click} /> <Button {label} kind={'primary'} {disabled} on:click={click} />
{#if requested || secondFactor} {#if requested || secondFactor}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div> <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"> <div class="ml-2">
<Button <Button
disabled={newTemplate.title.trim().length === 0} disabled={newTemplate.title.trim().length === 0}
kind={'accented'} kind={'primary'}
label={templatesPlugin.string.SaveTemplate} label={templatesPlugin.string.SaveTemplate}
on:click={saveNewTemplate} on:click={saveNewTemplate}
/> />
@ -245,7 +245,7 @@
</div> </div>
<div class="flex flex-reverse"> <div class="flex flex-reverse">
<Button <Button
kind={'accented'} kind={'primary'}
label={templatesPlugin.string.EditTemplate} label={templatesPlugin.string.EditTemplate}
on:click={() => { on:click={() => {
mode = Mode.Edit mode = Mode.Edit

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

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

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

@ -54,7 +54,7 @@
icon={IconAdd} icon={IconAdd}
{label} {label}
justify={'left'} justify={'left'}
kind={'accented'} kind={'primary'}
width={'100%'} width={'100%'}
gap={'large'} gap={'large'}
on:click={newIssue} 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"> <div class="ac-header-full medium-gap mb-1">
<ViewletSelector bind:viewlet bind:viewlets viewletQuery={{ attachTo: tracker.class.Component }} /> <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> </div>
<div class="ac-header full divide search-start"> <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"> <div class="flex-row-center content-color text-sm pointer-events-none">
{#if !compactMode} {#if !compactMode}
<div class="mr-1-5"> <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> </div>
{/if} {/if}
{countComplete}/{subIssues.length} {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"> <div class="flex-row-center content-color text-sm pointer-events-none">
{#if !compactMode} {#if !compactMode}
<div class="mr-1-5"> <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> </div>
{/if} {/if}
{countComplete}/{subIssues.length} {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 min: number = 0
export let max: number = 100 export let max: number = 100
export let size: IconSize = 'small' 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 color: string = 'var(--theme-progress-color)'
export let greenColor: string = FernColor export let greenColor: string = FernColor
@ -50,7 +50,7 @@
cy={8} cy={8}
r={7} r={7}
class="progress-circle" 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:opacity={dashOffset === 0 ? 0 : 1}
style:transform={'rotate(-82deg)'} style:transform={'rotate(-82deg)'}
style:stroke-dasharray={lenghtC} style:stroke-dasharray={lenghtC}

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

@ -88,7 +88,7 @@
</div> </div>
<div class="ac-header-full medium-gap mb-1"> <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> </div>
<div class="ac-header full divide search-start"> <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 value: Milestone
export let field = 'targetDate' 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' export let size: ButtonSize | 'x-small' = 'small'
const client = getClient() const client = getClient()

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

@ -65,7 +65,7 @@
<slot name="label_selector" /> <slot name="label_selector" />
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="header-tools"> <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>
<svelte:fragment slot="extra"> <svelte:fragment slot="extra">
{#if asideFloat && $$slots.aside} {#if asideFloat && $$slots.aside}

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

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

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

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

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

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

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