Design maintenance (#289)

packages/core/src/lib/button.svelte

@@ -47,7 +47,8 @@ export let width: 'full' | 'default' = 'default';
   {title}
   class={cx('whitespace-nowrap', 'mx-auto', {
     'w-full': width === 'full',
-    'h-[30px] w-[30px]': variant === 'icon',
+    'h-[30px] w-[30px] text-gray-6 hover:text-gray-7 active:text-gray-8':
+      variant === 'icon',
     'px-3': !icon && variant !== 'icon',
     'pl-2 pr-3': icon && variant !== 'icon',
     'inline-flex items-center justify-center gap-1.5 border px-3 py-1.5 text-xs':
@@ -75,7 +76,8 @@ export let width: 'full' | 'default' = 'default';
     <Icon
       name={icon}
       class={cx({
-        'text-gray-400': variant === 'primary',
+        'text-gray-6': variant === 'primary',
+        'text-gray-4': isDisabled,
       })}
     />
   {/if}

packages/legacy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

packages/legacy/src/elements/button/button.svelte

@@ -63,7 +63,8 @@ const handleParentClick = (event: PointerEvent) => {
     {title}
     class={cx('whitespace-nowrap', {
       'w-full': width === 'full',
-      'h-[30px] w-[30px]': variant === 'icon',
+      'text-gray-6 hover:text-gray-7 active:text-gray-8 h-[30px] w-[30px]':
+        variant === 'icon',
       'px-3': !icon && variant !== 'icon',
       'pl-2 pr-3': icon && variant !== 'icon',
       'inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs border':
@@ -89,7 +90,8 @@ const handleParentClick = (event: PointerEvent) => {
     {#if icon}
       <v-icon
         class={cx({
-          'text-gray-400': variant === 'primary',
+          'text-gray-6': variant === 'primary',
+          'text-gray-4': isDisabled,
         })}
         name={icon}
       />

packages/legacy/src/elements/code-snippet.svelte

@@ -18,10 +18,13 @@ export let theme: Themes = 'vs';
 export let showbutton = 'true';
 
 $: label = 'Copy';
+$: icon = 'content-copy';
+$: isDisabled = false;
 
 const dispatch = dispatcher();
 
 let element: HTMLElement;
+const disabled = isDisabled;
 
 const version = pkg.devDependencies.prismjs.replace('^', '');
 
@@ -41,7 +44,8 @@ const script = (src: string) =>
 const copyToClipboard = async (event: Event) => {
   try {
     await navigator.clipboard.writeText(code);
-    label = 'Success!';
+    label = 'Copied';
+    icon = 'check';
     dispatch(event, 'copy', {
       value: 'Successfully copied snippet to the clipboard',
     });
@@ -54,6 +58,7 @@ const copyToClipboard = async (event: Event) => {
 
   window.setTimeout(() => {
     label = 'Copy';
+    icon = 'content-copy';
   }, 2000);
 };
 
@@ -120,12 +125,14 @@ $: {
     ></pre>
 
   {#if showbutton === 'true'}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <v-button
       class="!text-black !font-sans"
       on:click={copyToClipboard}
       on:keyup={copyToClipboard}
       {label}
-      icon="content-copy"
+      {icon}
+      {disabled}
     />
   {/if}
 </div>

packages/legacy/src/elements/context-menu/context-menu-item.svelte

@@ -31,7 +31,7 @@ const handleSelect = (event: Event) => {
 
   <p
     id={label}
-    class={cx('font-normal', {
+    class={cx('text-sm', {
       'text-default': variant === 'primary',
       'text-danger-dark': variant === 'danger',
     })}

packages/legacy/src/elements/icon/icons.ts

@@ -1,4 +1,5 @@
 import {
+  mdiAlert,
   mdiCameraOutline,
   mdiVideoOutline,
   mdiAlertCircleOutline,
@@ -8,6 +9,7 @@ import {
   mdiPlus,
   mdiClose,
   mdiContentCopy,
+  mdiInformation,
   mdiMinus,
   mdiSend,
   mdiUndo,
@@ -52,12 +54,14 @@ import {
 } from '@mdi/js';
 
 export const paths: Record<string, string> = {
+  alert: mdiAlert,
   broadcast: mdiBroadcast,
   cancel: mdiCancel,
   check: mdiCheck,
   close: mdiClose,
   cog: mdiCog,
   download: mdiDownload,
+  information: mdiInformation,
   instagram: mdiInstagram,
   linkedin: mdiLinkedin,
   logout: mdiLogout,

packages/legacy/src/elements/notify.svelte

@@ -56,15 +56,15 @@ const handleClose = (event: Event) => {
   <div class="flex justify-between w-full gap-2 p-3 relative">
     <div class="flex gap-3">
       {#if variant === 'danger'}
-        <v-icon class="text-danger-dark" name="alert-outline" />
+        <v-icon size="lg" class="text-danger-dark" name="alert-circle" />
       {:else if variant === 'info'}
-        <v-icon class="text-info-dark" name="information-outline" />
+        <v-icon size="lg" class="text-info-dark" name="information" />
       {:else if variant === 'success'}
-        <v-icon class="text-success-dark" name="check" />
+        <v-icon size="lg" class="text-success-dark" name="check-circle" />
       {/if}
 
       {#if variant === 'warning'}
-        <v-icon class="text-warning-bright" name="alert-outline" />
+        <v-icon size="lg" class="text-warning-bright" name="alert" />
       {/if}
 
       <figure class="flex flex-col">

packages/legacy/src/elements/select/multiselect.svelte

@@ -347,7 +347,7 @@ $: {
           >
             <v-icon
               class={cx({
-                'text-gray-600': !isDisabled && !isReadonly,
+                'text-gray-6': !isDisabled && !isReadonly,
               })}
               name="chevron-down"
             />

packages/legacy/src/elements/select/select.svelte

@@ -326,7 +326,7 @@ $: {
         >
           <v-icon
             class={cx({
-              'text-gray-600': !isDisabled && !isReadonly,
+              'text-gray-6': !isDisabled && !isReadonly,
             })}
             name="chevron-down"
           />

packages/legacy/src/elements/switch.svelte

@@ -34,7 +34,7 @@ const handleClick = (event: Event) => {
 </script>
 
 <label
-  class={cx('flex gap-1 w-fit flex-col justify-start', {
+  class={cx('flex gap-1 w-fit flex-col justify-start text-default', {
     'text-disabled-dark': isDisabled,
   })}
 >
@@ -45,7 +45,7 @@ const handleClick = (event: Event) => {
 
     {#if tooltip}
       <v-tooltip text={tooltip}>
-        <v-icon class="-mt-0.5" name="information-outline" />
+        <v-icon class="text-gray-6 -mt-0.5" name="information-outline" />
       </v-tooltip>
     {/if}
   </div>

packages/legacy/tests/notify.spec.ts

@@ -20,7 +20,7 @@ test('Renders notify with default style if no variant is specified', async ({
   ).toBeVisible();
   await expect(
     page.getByTestId('notify-default').locator('v-icon title')
-  ).toHaveId(/information-outline/u);
+  ).toHaveId(/information/u);
 });
 
 test('Renders notify with danger style if the variant is set to danger', async ({
@@ -32,7 +32,7 @@ test('Renders notify with danger style if the variant is set to danger', async (
   ).toBeVisible();
   await expect(
     page.getByTestId('notify-variant-danger').locator('v-icon title')
-  ).toHaveId(/alert-outline/u);
+  ).toHaveId(/alert-circle/u);
 });
 
 test('Renders notify with warning style if the variant is set to warning', async ({
@@ -53,7 +53,7 @@ test('Renders notify with success style if the variant is set to success', async
   ).toBeVisible();
   await expect(
     page.getByTestId('notify-variant-success').locator('v-icon title')
-  ).toHaveId(/check/u);
+  ).toHaveId(/check-circle/u);
 });
 
 test('Renders notify with info style if the variant is set to info', async ({
@@ -65,7 +65,7 @@ test('Renders notify with info style if the variant is set to info', async ({
   ).toBeVisible();
   await expect(
     page.getByTestId('notify-variant-info').locator('v-icon title')
-  ).toHaveId(/information-outline/u);
+  ).toHaveId(/information/u);
 });
 
 test('Renders notify slot text', async ({ page }) => {