diff --git a/dev/storybook/stories/Button.stories.ts b/dev/storybook/stories/Button.stories.ts index 2556b0cb3e..bf97c1bc1c 100644 --- a/dev/storybook/stories/Button.stories.ts +++ b/dev/storybook/stories/Button.stories.ts @@ -17,11 +17,11 @@ const meta = { }, kind: { control: 'select', - options: ['primary', 'secondary', 'no-border', 'transparent', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'], + options: ['accented', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'], description: 'kind description', table: { type: { summary: 'ButtonKind' }, - defaultValue: { summary: '"secondary"' }, + defaultValue: { summary: '"regular"' }, } }, size: { @@ -109,7 +109,7 @@ type Story = StoryObj; export const Ok: Story = { args: { label: uiPlugin.string.Ok, - kind: 'primary', + kind: 'accented', size: 'medium', shape: undefined, justify: 'left', @@ -125,7 +125,7 @@ export const Ok: Story = { export const Cancel: Story = { args: { label: uiPlugin.string.Cancel, - kind: 'primary', + kind: 'accented', size: 'medium', shape: undefined, justify: 'left', diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 4ec8ff1547..5494a020bc 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -496,12 +496,12 @@ export function createModel (builder: Builder): void { props: { kind: 'list', size: 'small', - shape: 'round', shouldShowPlaceholder: false }, displayProps: { key: 'milestone', excludeByKey: 'milestone', + compression: true, optional: true } }, @@ -512,12 +512,12 @@ export function createModel (builder: Builder): void { props: { kind: 'list', size: 'small', - shape: 'round', shouldShowPlaceholder: false }, displayProps: { key: 'component', excludeByKey: 'component', + compression: true, optional: true } }, @@ -629,11 +629,11 @@ export function createModel (builder: Builder): void { props: { kind: 'list', size: 'small', - shape: 'round', shouldShowPlaceholder: false }, displayProps: { excludeByKey: 'milestone', + compression: true, optional: true } }, @@ -703,7 +703,7 @@ export function createModel (builder: Builder): void { size: 'small', shouldShowPlaceholder: false }, - displayProps: { key: 'component', optional: true } + displayProps: { key: 'component', compression: true, optional: true } }, { key: '', @@ -714,7 +714,7 @@ export function createModel (builder: Builder): void { size: 'small', shouldShowPlaceholder: false }, - displayProps: { key: 'milestone', optional: true } + displayProps: { key: 'milestone', compression: true, optional: true } }, { key: '', diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte index 201aac0758..c74a8c091c 100644 --- a/packages/kanban/src/components/KanbanRow.svelte +++ b/packages/kanban/src/components/KanbanRow.svelte @@ -146,7 +146,7 @@ } &.selection, &.checked.selection { - box-shadow: 0 0 1px 1px var(--primary-button-enabled); + box-shadow: 0 0 1px 1px var(--accented-button-default); animation: anim-border 1s ease-in-out; &:hover { diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index 3de22638c5..14a16f810d 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -68,9 +68,8 @@ id="card-close" focusIndex={10002} icon={IconClose} - iconSize={'medium'} - iconProps={{ fill: 'var(--theme-dark-color)' }} - kind={'transparent'} + iconProps={{ size: 'medium', fill: 'var(--theme-dark-color)' }} + kind={'ghost'} size={'small'} on:click={() => { if (onCancel) { @@ -116,7 +115,7 @@ focusIndex={10001} disabled={!canSave} label={okLabel} - kind={'primary'} + kind={'accented'} size={'large'} on:click={() => { if (okProcessing) { diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte index ccdea5009b..e8acabb46d 100644 --- a/packages/presentation/src/components/DocPopup.svelte +++ b/packages/presentation/src/components/DocPopup.svelte @@ -178,7 +178,7 @@
- diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte index ee9856244d..e225c637b8 100644 --- a/packages/ui/src/components/EditWithIcon.svelte +++ b/packages/ui/src/components/EditWithIcon.svelte @@ -56,7 +56,7 @@
-
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte index ceebfc699c..1eac6b34f6 100644 --- a/packages/ui/src/components/calendar/WeekCalendar.svelte +++ b/packages/ui/src/components/calendar/WeekCalendar.svelte @@ -100,7 +100,7 @@ width: calc(calc(100% - 50px) / 7); } .cell:hover:not(.wrongMonth) { - color: var(--primary-button-color); + color: var(--accented-button-color); background-color: var(--highlight-hover); } diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index fd5b20c2bc..ee8e4f6d2f 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -116,10 +116,13 @@ export interface TabItem { } export type ButtonKind = - | 'primary' - | 'secondary' + | 'accented' + | 'brand' + | 'positive' + | 'negative' + | 'regular' + | 'ghost' | 'no-border' - | 'transparent' | 'link' | 'link-bordered' | 'dangerous' @@ -203,6 +206,11 @@ export type IconSize = | 'x-large' | '2x-large' | 'full' +export interface IconProps { + icon?: number + size?: IconSize + fill?: string +} export function getIconSize2x (size: IconSize): IconSize { switch (size) { diff --git a/plugins/attachment-resources/src/components/AccordionEditor.svelte b/plugins/attachment-resources/src/components/AccordionEditor.svelte index 425d1231bd..56f3584d5f 100644 --- a/plugins/attachment-resources/src/components/AccordionEditor.svelte +++ b/plugins/attachment-resources/src/components/AccordionEditor.svelte @@ -102,7 +102,7 @@ /> {/if} -