hcengineering · haiodo · Jul 6, 2023 · Jul 5, 2023 · Jul 6, 2023
diff --git 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<typeof meta>;
 export const Ok: Story = {
   args: {
     label: uiPlugin.string.Ok,
-    kind: 'primary',
+    kind: 'accented',
     size: 'medium',
     shape: undefined,
     justify: 'left',
@@ -125,7 +125,7 @@ export const Ok: Story = {
 export const Cancel: Story = {
   args: {
     label: uiPlugin.string.Cancel,
-    kind: 'primary',
+    kind: 'accented',
     size: 'medium',
     shape: undefined,
     justify: 'left',

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

diff --git a/packages/presentation/src/components/InlineAttributeBarEditor.svelte b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
@@ -61,7 +61,7 @@
           readonly={isReadonly}
           label={attribute?.label}
           placeholder={attribute?.label}
-          kind={'secondary'}
+          kind={'regular'}
           size={'large'}
           width={'100%'}
           justify={'left'}

diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
@@ -43,7 +43,7 @@
       focusIndex={1}
       label={okLabel ?? presentation.string.Ok}
       size={'large'}
-      kind={'primary'}
+      kind={'accented'}
       loading={processing}
       on:click={() => {
         processing = true

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

diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte
@@ -41,7 +41,7 @@
     <Button
       disabled={!canSave}
       label={presentation.string.Create}
-      kind={'primary'}
+      kind={'accented'}
       on:click={() => {
         okAction()
         dispatch('close')

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

diff --git a/packages/presentation/src/components/message/Nodes.svelte b/packages/presentation/src/components/message/Nodes.svelte
@@ -173,7 +173,7 @@
     padding: 0 0.25rem;
     font-family: var(--mono-font);
     color: var(--theme-content-color);
-    background-color: var(--theme-button-enabled);
+    background-color: var(--theme-button-default);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
   }

diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -255,31 +255,31 @@
     <div class="formatPanelRef buttons-group xsmall-gap" class:withoutTopBorder>
       <Button
         icon={Bold}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('bold')}
         showTooltip={{ label: textEditorPlugin.string.Bold }}
         on:click={getToggler(textEditor.toggleBold)}
       />
       <Button
         icon={Italic}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('italic')}
         showTooltip={{ label: textEditorPlugin.string.Italic }}
         on:click={getToggler(textEditor.toggleItalic)}
       />
       <Button
         icon={Strikethrough}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('strike')}
         showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
         on:click={getToggler(textEditor.toggleStrike)}
       />
       <Button
         icon={Link}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('link')}
         disabled={isSelectionEmpty && !activeModes.has('link')}
@@ -289,15 +289,15 @@
       <div class="buttons-divider" />
       <Button
         icon={ListNumber}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('orderedList')}
         showTooltip={{ label: textEditorPlugin.string.OrderedList }}
         on:click={getToggler(textEditor.toggleOrderedList)}
       />
       <Button
         icon={ListBullet}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('bulletList')}
         showTooltip={{ label: textEditorPlugin.string.BulletedList }}
@@ -306,7 +306,7 @@
       <div class="buttons-divider" />
       <Button
         icon={Quote}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('blockquote')}
         showTooltip={{ label: textEditorPlugin.string.Blockquote }}
@@ -315,15 +315,15 @@
       <div class="buttons-divider" />
       <Button
         icon={Code}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('code')}
         showTooltip={{ label: textEditorPlugin.string.Code }}
         on:click={getToggler(textEditor.toggleCode)}
       />
       <Button
         icon={CodeBlock}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'small'}
         selected={activeModes.has('codeBlock')}
         showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
@@ -513,7 +513,7 @@
           }
         }
         &:focus {
-          box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+          box-shadow: 0 0 0 2px var(--accented-button-outline);
 
           & > .icon {
             color: var(--theme-caption-color);

diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
@@ -50,7 +50,7 @@
     }
     &:focus {
       color: var(--theme-caption-color);
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-focused-border);
     }
     &.selected {
       background-color: var(--theme-button-pressed);