feat: adjust colors, update app icon

impierce · Sep 17, 2023 · 7e4deeb · 7e4deeb
1 parent bc883bb
commit 7e4deeb
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@impierce/ui-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/Impierce/ui-components.git"

diff --git a/src/app.css b/src/app.css
@@ -7,7 +7,18 @@
     --background: 0 0% 96%; /* neutral-100, #f5f5f5 */
     --foreground: 0 0% 100%; /* white, #ffffff */
 
-    --primary: 180 42% 66%; /* #83cccc */
+    /* accent */
+    --primary: 180 49% 57%; /* #5cc7c7 */
+    --teal: 178 41% 51%; /* #50b5b2 */
+
+    /* light */
+    --silver: 0 0% 98%; /* #f9f9f9 */
+    --grey: 0 0% 94%; /* #efefef */
+
+    /* dark */
+    --navy: 213 50% 23%; /* #1e3959 */
+    --blue: 212 55% 18%; /* #152d49 */
+    --dark: 216 53% 16%; /* #13243d */
 
     /**
      * DARK MODE
@@ -16,3 +27,9 @@
     --dark-foreground: 216 53% 16%; /* darker, #13243D */
   }
 }
+
+@layer utilities {
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/src/lib/atoms/AppIcon.svelte b/src/lib/atoms/AppIcon.svelte
diff --git a/src/lib/atoms/BottomNavigationItem.svelte b/src/lib/atoms/BottomNavigationItem.svelte
@@ -24,8 +24,8 @@
       <!-- Currently, there is no better way of applying conditional Tailwind classes to a named slot inside a component. -->
       <slot name="icon" />
       <div
-        class={`text-[12px]/[20px] pt-[6px] ${
-          active ? 'text-slate-800 dark:text-primary' : 'text-slate-300 dark:text-white'
+        class={`text-[12px]/[20px] pt-[6px] font-medium ${
+          active ? 'text-slate-800 dark:text-grey' : 'text-slate-300 dark:text-slate-500'
         }`}
       >
         {label}

diff --git a/src/lib/atoms/app-icon/AppIcon.svelte b/src/lib/atoms/app-icon/AppIcon.svelte
@@ -0,0 +1,36 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_1107_8807)">
+    <rect width="1024" height="1024" fill="url(#paint0_linear_1107_8807)" />
+    <g clip-path="url(#clip1_1107_8807)">
+      <path
+        d="M530.809 194.006C569.187 183.888 607.749 189.128 643.727 209.543C727.124 256.699 731.921 365.463 656.458 493.378C633.395 532.584 602.582 581.726 568.449 615.331C511.067 671.881 464.202 664.112 435.05 647.671C392.429 623.642 379.145 583.894 395.382 529.332C407.375 489.403 438.372 441.525 484.498 363.295L546.123 398.164C503.871 470.071 473.428 515.781 463.649 548.844C454.793 578.293 462.173 582.449 470.476 587.146C502.026 604.852 561.806 514.155 594.649 458.328C621.033 413.521 636.531 369.799 638.008 335.11C640.222 287.955 615.867 274.224 607.933 269.707C583.025 255.615 558.116 255.073 531.363 267.72C494.462 285.245 454.977 328.425 417.153 392.563C376.377 461.76 331.911 540.714 320.841 604.491C310.693 662.848 328.59 700.427 380.99 730.057C441.508 764.204 495.569 754.99 556.271 700.066C613.468 648.213 669.005 575.403 719.375 489.765L781 524.634C727.678 614.97 669.005 692.839 604.612 751.196C520.846 827.078 433.574 840.267 345.38 790.401C267.334 746.318 235.415 679.831 250.729 592.566C263.829 517.588 311.616 431.95 355.528 357.513C401.101 280.367 449.811 228.875 500.181 204.846C510.329 200.51 520.477 196.716 530.809 194.006Z"
+        fill="#152D49"
+      />
+    </g>
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_1107_8807"
+      x1="512"
+      y1="0"
+      x2="512"
+      y2="1024"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#5CC7C7" />
+      <stop offset="1" stop-color="#50B5B2" />
+    </linearGradient>
+    <clipPath id="clip0_1107_8807">
+      <rect width="1024" height="1024" fill="white" />
+    </clipPath>
+    <clipPath id="clip1_1107_8807">
+      <rect width="1024" height="1024" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/lib/atoms/app-icon/AppIconBeta.svelte b/src/lib/atoms/app-icon/AppIconBeta.svelte
@@ -0,0 +1,25 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_1107_10178)">
+    <rect width="1024" height="1024" fill="white" />
+    <g clip-path="url(#clip1_1107_10178)">
+      <path
+        d="M530.809 194.006C569.187 183.888 607.749 189.128 643.727 209.543C727.124 256.699 731.921 365.463 656.458 493.378C633.395 532.584 602.582 581.726 568.449 615.331C511.067 671.881 464.202 664.112 435.05 647.671C392.429 623.642 379.145 583.894 395.382 529.332C407.375 489.403 438.372 441.525 484.498 363.295L546.123 398.164C503.871 470.071 473.428 515.781 463.649 548.844C454.793 578.293 462.173 582.449 470.476 587.146C502.026 604.852 561.806 514.155 594.649 458.328C621.033 413.521 636.531 369.799 638.008 335.11C640.222 287.955 615.867 274.224 607.933 269.707C583.025 255.615 558.116 255.073 531.363 267.72C494.462 285.245 454.977 328.425 417.153 392.563C376.377 461.76 331.911 540.714 320.841 604.491C310.693 662.848 328.59 700.427 380.99 730.057C441.508 764.204 495.569 754.99 556.271 700.066C613.468 648.213 669.005 575.403 719.375 489.765L781 524.634C727.678 614.97 669.005 692.839 604.612 751.196C520.846 827.078 433.574 840.267 345.38 790.401C267.334 746.318 235.415 679.831 250.729 592.566C263.829 517.588 311.616 431.95 355.528 357.513C401.101 280.367 449.811 228.875 500.181 204.846C510.329 200.51 520.477 196.716 530.809 194.006Z"
+        fill="#5CC7C7"
+      />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_1107_10178">
+      <rect width="1024" height="1024" fill="white" />
+    </clipPath>
+    <clipPath id="clip1_1107_10178">
+      <rect width="1024" height="1024" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/lib/atoms/Logo.svelte → src/lib/atoms/app-icon/Logo.svelte b/src/lib/atoms/Logo.svelte → src/lib/atoms/app-icon/Logo.svelte
diff --git a/src/lib/melt-ui/tabs/ActivityTabs.svelte b/src/lib/melt-ui/tabs/ActivityTabs.svelte
@@ -28,7 +28,7 @@
     {#each triggers as triggerItem}
       <button
         use:melt={$trigger(triggerItem.id)}
-        class="trigger relative m-1 rounded-xl py-2 px-3 text-xs font-semibold text-slate-500 dark:text-white"
+        class="trigger relative m-1 rounded-xl py-2 px-3 text-xs font-semibold text-slate-500 dark:text-slate-400"
       >
         {triggerItem.title}
         <!-- Indicator: active navigation item -->
@@ -43,11 +43,11 @@
     {/each}
   </div>
 
-  <div use:melt={$content('connections')} class="grow">
+  <div use:melt={$content('connections')} class="hide-scrollbar grow overflow-y-scroll">
     <slot name="connections" />
   </div>
 
-  <div use:melt={$content('history')} class="grow">
+  <div use:melt={$content('history')} class="hide-scrollbar grow overflow-y-scroll">
     <slot name="history" />
   </div>
 </div>
@@ -73,7 +73,7 @@
 
     &[data-state='active'] {
       @apply focus:relative;
-      color: theme('colors.white');
+      color: theme('colors.slate.800');
       background-color: theme('colors.primary.DEFAULT');
     }
   }

diff --git a/src/lib/melt-ui/tabs/ConnectionTabs.svelte b/src/lib/melt-ui/tabs/ConnectionTabs.svelte
@@ -29,7 +29,7 @@
     {#each triggers as triggerItem}
       <button
         use:melt={$trigger(triggerItem.id)}
-        class="trigger relative m-1 rounded-xl py-2 px-3 text-xs font-semibold text-slate-500 dark:text-white"
+        class="trigger relative m-1 rounded-xl py-2 px-3 text-xs font-semibold text-slate-500 dark:text-slate-400"
       >
         {triggerItem.title}
         <!-- Indicator: active navigation item -->
@@ -44,15 +44,15 @@
     {/each}
   </div>
 
-  <div use:melt={$content('summary')} class="grow">
+  <div use:melt={$content('summary')} class="hide-scrollbar grow overflow-y-scroll">
     <slot name="summary" />
   </div>
 
-  <div use:melt={$content('data')} class="grow">
+  <div use:melt={$content('data')} class="hide-scrollbar grow overflow-y-scroll">
     <slot name="data" />
   </div>
 
-  <div use:melt={$content('history')} class="grow">
+  <div use:melt={$content('history')} class="hide-scrollbar grow overflow-y-scroll">
     <slot name="history" />
   </div>
 </div>

diff --git a/src/lib/molecules/TopNavigation.svelte b/src/lib/molecules/TopNavigation.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import ChevronLeft from '~icons/lucide/chevron-left';
 
   const dispatch = createEventDispatcher();
@@ -8,14 +9,17 @@
 </script>
 
 <div
-  class="relative flex h-[50px] items-center justify-between self-stretch bg-foreground py-[13px] px-6 dark:bg-foreground-dark"
+  class={twMerge(
+    'relative flex h-[50px] items-center justify-between self-stretch bg-foreground py-[13px] px-6 text-slate-800 dark:bg-foreground-dark dark:text-grey',
+    $$props.class
+  )}
 >
   <button class="z-10 -ml-2 rounded-full p-2" on:click={() => dispatch('back')}>
-    <ChevronLeft class="h-6 w-6 text-slate-800 dark:text-white" />
+    <ChevronLeft class="h-6 w-6" />
   </button>
   {#if title}
     <p
-      class="custom absolute top-0 left-0 flex h-[50px] w-full items-center justify-center font-medium text-slate-800 dark:text-white"
+      class="custom absolute top-0 left-0 flex h-[50px] w-full items-center justify-center font-medium"
     >
       {title}
     </p>

diff --git a/src/lib/molecules/navigation/BottomNavBar.svelte b/src/lib/molecules/navigation/BottomNavBar.svelte
@@ -31,7 +31,7 @@
     <Me
       slot="icon"
       clazz={`h-6 w-6 ${
-        active == 'me' ? 'text-black dark:text-primary' : 'text-slate-400 dark:text-white'
+        active == 'me' ? 'text-slate-800 dark:text-grey' : 'text-slate-300 dark:text-slate-500'
       }`}
     />
   </BottomNavigationItem>
@@ -41,7 +41,7 @@
     <Scan
       slot="icon"
       clazz={`h-6 w-6 ${
-        active == 'scan' ? 'text-black dark:text-primary' : 'text-slate-400 dark:text-white'
+        active == 'scan' ? 'text-slate-800 dark:text-grey' : 'text-slate-300 dark:text-slate-500'
       }`}
     />
   </BottomNavigationItem>
@@ -55,7 +55,9 @@
     <Activity
       slot="icon"
       clazz={`h-6 w-6 ${
-        active == 'activity' ? 'text-black dark:text-primary' : 'text-slate-400 dark:text-white'
+        active == 'activity'
+          ? 'text-slate-800 dark:text-grey'
+          : 'text-slate-300 dark:text-slate-500'
       }`}
     />
   </BottomNavigationItem>

diff --git a/src/stories/atoms/AppIcon.stories.ts b/src/stories/atoms/AppIcon.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import AppIcon from '$lib/atoms/AppIcon.svelte';
+import AppIcon from '$lib/atoms/app-icon/AppIcon.svelte';
 
 const meta = {
   title: 'Atoms/AppIcon',

diff --git a/src/stories/atoms/AppIconBeta.stories.ts b/src/stories/atoms/AppIconBeta.stories.ts
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import AppIconBeta from '$lib/atoms/app-icon/AppIconBeta.svelte';
+
+const meta = {
+  title: 'Atoms/AppIconBeta',
+  component: AppIconBeta
+} satisfies Meta<AppIconBeta>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/stories/atoms/Logo.stories.ts b/src/stories/atoms/Logo.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import Logo from '$lib/atoms/Logo.svelte';
+import Logo from '$lib/atoms/app-icon/Logo.svelte';
 
 const meta = {
   title: 'Atoms/Logo',

diff --git a/static/tailwind.css b/static/tailwind.css
@@ -424,8 +424,23 @@ video {
   /* neutral-100, #f5f5f5 */
   --foreground: 0 0% 100%;
   /* white, #ffffff */
-  --primary: 180 42% 66%;
-  /* #83cccc */
+  /* accent */
+  --primary: 180 49% 57%;
+  /* #5cc7c7 */
+  --teal: 178 41% 51%;
+  /* #50b5b2 */
+  /* light */
+  --silver: 0 0% 98%;
+  /* #f9f9f9 */
+  --grey: 0 0% 94%;
+  /* #efefef */
+  /* dark */
+  --navy: 213 50% 23%;
+  /* #1e3959 */
+  --blue: 212 55% 18%;
+  /* #152d49 */
+  --dark: 216 53% 16%;
+  /* #13243d */
   /**
      * DARK MODE
      */
@@ -1208,6 +1223,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2158,6 +2177,10 @@ video {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -2480,6 +2503,10 @@ video {
   background-color: rgb(109 40 217 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:text-grey {
+  color: hsl(var(--grey));
+}
+
 .dark .dark\:text-neutral-200 {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity));
@@ -2499,6 +2526,16 @@ video {
   color: hsl(var(--primary));
 }
 
+.dark .dark\:text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-slate-700 {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -2540,7 +2577,7 @@ video {
 }
 
 .dark .dark\:active\:bg-background-dark:active {
-  background-color: hsl(var(--dark-background));
+  background-color: hsl(var(--navy));
 }
 
 @media (min-width: 640px) {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -21,9 +21,10 @@ module.exports = {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
+        grey: 'hsl(var(--grey))',
         background: {
           DEFAULT: 'hsl(var(--background))',
-          dark: 'hsl(var(--dark-background))'
+          dark: 'hsl(var(--navy))'
         },
         foreground: {
           DEFAULT: 'hsl(var(--foreground))',