From 7e4deebfd420c780de2c842cf9f9cddaef782822 Mon Sep 17 00:00:00 2001 From: Daniel Mader Date: Sun, 17 Sep 2023 21:13:07 +0200 Subject: [PATCH] feat: adjust colors, update app icon --- package.json | 2 +- src/app.css | 19 +++++++- src/lib/atoms/AppIcon.svelte | 26 ----------- src/lib/atoms/BottomNavigationItem.svelte | 4 +- src/lib/atoms/app-icon/AppIcon.svelte | 36 ++++++++++++++++ src/lib/atoms/app-icon/AppIconBeta.svelte | 25 +++++++++++ src/lib/atoms/{ => app-icon}/Logo.svelte | 0 src/lib/melt-ui/tabs/ActivityTabs.svelte | 8 ++-- src/lib/melt-ui/tabs/ConnectionTabs.svelte | 8 ++-- src/lib/molecules/TopNavigation.svelte | 10 +++-- .../molecules/navigation/BottomNavBar.svelte | 8 ++-- src/stories/atoms/AppIcon.stories.ts | 2 +- src/stories/atoms/AppIconBeta.stories.ts | 14 ++++++ src/stories/atoms/Logo.stories.ts | 2 +- static/tailwind.css | 43 +++++++++++++++++-- tailwind.config.cjs | 3 +- 16 files changed, 160 insertions(+), 50 deletions(-) delete mode 100644 src/lib/atoms/AppIcon.svelte create mode 100644 src/lib/atoms/app-icon/AppIcon.svelte create mode 100644 src/lib/atoms/app-icon/AppIconBeta.svelte rename src/lib/atoms/{ => app-icon}/Logo.svelte (100%) create mode 100644 src/stories/atoms/AppIconBeta.stories.ts diff --git a/package.json b/package.json index be9e676..834fe14 100644 --- 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 index 875c8aa..bc894bf 100644 --- 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 deleted file mode 100644 index c9b4c71..0000000 --- a/src/lib/atoms/AppIcon.svelte +++ /dev/null @@ -1,26 +0,0 @@ - -
-
- BETA -
-
- - - -
-
diff --git a/src/lib/atoms/BottomNavigationItem.svelte b/src/lib/atoms/BottomNavigationItem.svelte index 3ebca52..5017a00 100644 --- a/src/lib/atoms/BottomNavigationItem.svelte +++ b/src/lib/atoms/BottomNavigationItem.svelte @@ -24,8 +24,8 @@
{label} diff --git a/src/lib/atoms/app-icon/AppIcon.svelte b/src/lib/atoms/app-icon/AppIcon.svelte new file mode 100644 index 0000000..fff09cb --- /dev/null +++ b/src/lib/atoms/app-icon/AppIcon.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/atoms/app-icon/AppIconBeta.svelte b/src/lib/atoms/app-icon/AppIconBeta.svelte new file mode 100644 index 0000000..41473aa --- /dev/null +++ b/src/lib/atoms/app-icon/AppIconBeta.svelte @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + diff --git a/src/lib/atoms/Logo.svelte b/src/lib/atoms/app-icon/Logo.svelte similarity index 100% rename from src/lib/atoms/Logo.svelte rename to 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 index 335f9cc..6bbd89b 100644 --- a/src/lib/melt-ui/tabs/ActivityTabs.svelte +++ b/src/lib/melt-ui/tabs/ActivityTabs.svelte @@ -28,7 +28,7 @@ {#each triggers as triggerItem}
-
+
-
+
@@ -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 index 9ef48a8..be13fb2 100644 --- a/src/lib/melt-ui/tabs/ConnectionTabs.svelte +++ b/src/lib/melt-ui/tabs/ConnectionTabs.svelte @@ -29,7 +29,7 @@ {#each triggers as triggerItem}
-
+
-
+
-
+
diff --git a/src/lib/molecules/TopNavigation.svelte b/src/lib/molecules/TopNavigation.svelte index e087bd0..ef9b075 100644 --- a/src/lib/molecules/TopNavigation.svelte +++ b/src/lib/molecules/TopNavigation.svelte @@ -1,5 +1,6 @@
{#if title}

{title}

diff --git a/src/lib/molecules/navigation/BottomNavBar.svelte b/src/lib/molecules/navigation/BottomNavBar.svelte index b4ee5d6..b8b21ea 100644 --- a/src/lib/molecules/navigation/BottomNavBar.svelte +++ b/src/lib/molecules/navigation/BottomNavBar.svelte @@ -31,7 +31,7 @@ @@ -41,7 +41,7 @@ @@ -55,7 +55,9 @@ diff --git a/src/stories/atoms/AppIcon.stories.ts b/src/stories/atoms/AppIcon.stories.ts index 192bc25..c63dae0 100644 --- 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 new file mode 100644 index 0000000..23c8c82 --- /dev/null +++ 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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/stories/atoms/Logo.stories.ts b/src/stories/atoms/Logo.stories.ts index be3231a..53d09fa 100644 --- 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 index b287683..be8f16c 100644 --- 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 index 8665ae8..318c9f1 100644 --- 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))',