Merge pull request #567 from appwrite/feat-rebrand

Rebrand
appwrite · Sep 28, 2023 · c57a776 · c57a776 · vercel · Sep 28, 2023
2 parents 9ac7952 + 1499daf
commit c57a776
Show file tree

Hide file tree

Showing 57 changed files with 1,685 additions and 3,394 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="description" content="" />
-        <link rel="icon" href="/favicon.png" />
+        <link rel="icon" type="image/svg+xml" href="/logos/appwrite-icon.svg" />
         <link
             rel="preload"
             href="/fonts/inter/inter-v8-latin-600.woff2"
@@ -40,6 +40,90 @@
             as="font"
             type="font/woff2"
             crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Air.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-AirItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Thin.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-ThinItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Light.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-LightItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-RegularItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Medium.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-MediumItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-BoldItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-Black.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="https://fonts.appwrite.io/aeonik-pro/AeonikPro-BlackItalic.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
         <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
         <link rel="stylesheet" href="/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
@@ -381,17 +381,21 @@
     }
 
     :global(.theme-dark) .card {
-        --cmd-center-bg: rgba(27, 27, 40, 0.8);
+        --cmd-center-bg: hsl(var(--color-neutral-100-new));
         --cmd-center-border: hsl(var(--color-neutral-150));
-        --cmd-center-shadow: 0px 16px 32px 0px #14141f;
+        --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110-new));
 
         --kbd-bg: hsl(var(--color-neutral-150));
 
         --crumb-bg: hsl(var(--color-neutral-150));
         --crumb-color: hsl(var(--color-neutral-30));
 
         --result-bg: hsl(var(--color-neutral-200));
-        --footer-bg: linear-gradient(180deg, #1b1b28 0%, #282a3b 100%);
+        --footer-bg: linear-gradient(
+            180deg,
+            hsl(var(--color-neutral-100-new)) 0%,
+            hsl(var(--color-neutral-85-new)) 100%
+        );
 
         --icon-color: hsl(var(--color-neutral-70));
         --label-color: hsl(var(--color-neutral-30));

diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
@@ -2,13 +2,14 @@
     export let size: number;
     export let src: string;
     export let name: string;
+    export let color = 'transparent';
 </script>
 
 <img
     width={size}
     height={size}
     class="avatar"
-    style="--size: {size / 16}rem"
+    style="--size: {size / 16}rem; background-color: {color};"
     {src}
     title={name}
     alt={name} />
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
@@ -5,8 +5,9 @@
     export let name: string;
     export let size: number;
     export let background: string | undefined = undefined;
+    export let color = 'black';
 
     $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
 </script>
 
-<Avatar {name} {size} {src} />
+<Avatar {name} {size} {src} {color} />
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
@@ -29,14 +29,9 @@
                 on:click={track}
                 aria-label={`create {target}`}>
                 {#if $app.themeInUse === 'dark'}
-                    <img src={EmptyDark} alt="create" aria-hidden="true" height="124" width="215" />
+                    <img src={EmptyDark} alt="create" aria-hidden="true" width="376" />
                 {:else}
-                    <img
-                        src={EmptyLight}
-                        alt="create"
-                        aria-hidden="true"
-                        height="124"
-                        width="215" />
+                    <img src={EmptyLight} alt="create" aria-hidden="true" width="376" />
                 {/if}
             </button>
             <slot>

diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
@@ -77,17 +77,3 @@
         <slot />
     </button>
 {/if}
-
-<style lang="scss">
-    .is-github {
-        background-color: #373b4d;
-
-        &:hover {
-            background-color: lighten($color: #373b4d, $amount: 2.5);
-        }
-
-        &:active {
-            background-color: darken($color: #373b4d, $amount: 5);
-        }
-    }
-</style>
diff --git a/src/lib/images/appwrite-gray-light.svg b/src/lib/images/appwrite-gray-light.svg
diff --git a/src/lib/images/appwrite-logo-dark.svg b/src/lib/images/appwrite-logo-dark.svg