Skip to content

Commit 4542288

Browse files
atharvadeosthaleatharvadeosthale
authored
Merge pull request #2843 from appwrite/feat-green-day
2 parents fdbba01 + 58ea130 commit 4542288

45 files changed

Lines changed: 1243 additions & 489 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app.css‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -451,9 +451,10 @@
451451
/* pink polyfills */
452452
--transition: 0.2s;
453453

454-
/* color hues */
454+
/* color hues (pink by default) */
455455
--color-pink-hue: 343;
456456
--color-secondary-hue: 351;
457+
--brand-accent-rgb: 253 54 110;
457458
--color-red-hue: 3;
458459
--color-orange-hue: 18;
459460
--color-mint-hue: 177;
@@ -478,6 +479,38 @@
478479
--color-subtle: var(--color-greyscale-850);
479480
}
480481

482+
body.brand-green {
483+
--color-pink-hue: 151;
484+
--color-secondary-hue: 165;
485+
--color-pink-500: hsl(151 72% 38%);
486+
--color-pink-600: hsl(151 66% 32%);
487+
--color-accent: var(--color-pink-500);
488+
--color-accent-darker: var(--color-pink-600);
489+
--brand-accent-rgb: 15 166 95;
490+
}
491+
492+
body.brand-green .light {
493+
--color-pink-hue: 151;
494+
--color-secondary-hue: 165;
495+
--color-pink-500: hsl(151 72% 38%);
496+
--color-pink-600: hsl(151 66% 32%);
497+
--color-accent: var(--color-pink-500);
498+
--color-accent-darker: var(--color-pink-600);
499+
--brand-accent-rgb: 15 166 95;
500+
}
501+
502+
body.brand-pink {
503+
--color-pink-hue: 343;
504+
--color-secondary-hue: 351;
505+
--brand-accent-rgb: 253 54 110;
506+
}
507+
508+
body.brand-pink .light {
509+
--color-pink-hue: 343;
510+
--color-secondary-hue: 351;
511+
--brand-accent-rgb: 253 54 110;
512+
}
513+
481514
.dark {
482515
--color-primary: var(--color-greyscale-100);
483516
--color-secondary: var(--color-greyscale-300);

‎src/app.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
/>
4343
%sveltekit.head%
4444
</head>
45-
<body class="dark group/body antialiased" data-sveltekit-preload-data="hover">
45+
<body class="dark brand-green group/body antialiased" data-sveltekit-preload-data="hover">
4646
<script>
4747
// Theme
4848
const isDocs = window.location.pathname.startsWith('/docs');
@@ -64,6 +64,13 @@
6464
}
6565
}
6666

67+
// Brand theme
68+
var brandTheme = localStorage.getItem('brand-theme');
69+
if (brandTheme === 'pink' || brandTheme === 'green') {
70+
document.body.classList.remove('brand-pink', 'brand-green');
71+
document.body.classList.add('brand-' + brandTheme);
72+
}
73+
6774
// Progressive enhancement
6875
document.body.dataset.jsEnabled = '';
6976

‎src/lib/components/BlogCta.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
z-index: -1;
4040
background-image: radial-gradient(
4141
ellipse at center,
42-
rgba(253, 54, 110, 0.09),
42+
hsl(var(--web-color-pink-500) / 0.09),
4343
transparent 85%
4444
);
4545
}

‎src/lib/components/FooterNav.svelte‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
22
import { slide } from 'svelte/transition';
3+
import { onMount } from 'svelte';
34
import { trackEvent } from '$lib/actions/analytics';
45
import { createAccordion, melt } from '@melt-ui/svelte';
56
67
export let noBorder = false;
8+
let logoSrc = '/images/logos/appwrite.svg';
79
810
const {
911
elements: { content, heading, item, root, trigger },
@@ -107,14 +109,31 @@
107109
{ label: 'Security', href: '/docs/advanced/security' }
108110
]
109111
};
112+
113+
const syncBrandLogo = () => {
114+
logoSrc = document.body.classList.contains('brand-pink')
115+
? '/images/logos/appwrite.svg'
116+
: '/images/logos/appwrite-green.svg';
117+
};
118+
119+
onMount(() => {
120+
syncBrandLogo();
121+
122+
const brandObserver = new MutationObserver(syncBrandLogo);
123+
brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
124+
125+
return () => {
126+
brandObserver.disconnect();
127+
};
128+
});
110129
</script>
111130

112131
<nav
113132
aria-label="Footer"
114133
class="web-footer-nav relative mt-24"
115134
class:web-u-sep-block-start={!noBorder}
116135
>
117-
<img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" />
136+
<img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
118137
<ul class="web-footer-nav-main-list" use:melt={$root}>
119138
{#each Object.entries(links) as [title, items]}
120139
<li class="web-footer-nav-main-item web-is-not-mobile">

‎src/lib/components/PreFooter.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,4 +162,8 @@
162162
max-block-size: unset;
163163
filter: blur(100px);
164164
}
165+
166+
:global(body.brand-green .web-pre-footer-bg) {
167+
filter: blur(100px) var(--web-color-image-background-filter);
168+
}
165169
</style>

‎src/lib/components/PromptBanner.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<div class="ai-banner">
8484
<div class="ai-banner_content">
8585
<div class="ai-banner_title">
86-
<AiPromptIcon class="text-primary" aria-hidden="true" />
86+
<AiPromptIcon class="ai-banner-prompt-icon text-primary" aria-hidden="true" />
8787
<span class="text-primary text-sub-body"
8888
>Use this pre-built prompt to get started faster</span
8989
>
@@ -313,4 +313,8 @@
313313
padding-right: 10px;
314314
gap: 4px;
315315
}
316+
317+
:global(body.brand-green .ai-banner .ai-banner-prompt-icon) {
318+
filter: var(--web-color-image-accent-filter);
319+
}
316320
</style>

‎src/lib/components/fancy/gradient-text.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,8 @@
1212
</script>
1313

1414
<span
15-
class={cn(
16-
'-mb-1 block bg-linear-145 from-[#f8a1ba] to-white to-50% bg-clip-text pb-1 text-transparent',
17-
className
18-
)}
15+
class={cn('-mb-1 block bg-clip-text pb-1 text-transparent', className)}
16+
style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0%, #fff 50%);"
1917
{...rest}
2018
>
2119
{@render children()}

‎src/lib/components/layout/site-footer.svelte‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script lang="ts">
22
import { createAccordion, melt } from '@melt-ui/svelte';
3+
import { onMount } from 'svelte';
34
import { slide } from 'svelte/transition';
45
56
export let noBorder = false;
7+
let logoSrc = '/images/logos/appwrite.svg';
68
79
const {
810
elements: { content, heading, item, root, trigger },
@@ -91,6 +93,23 @@
9193
{ label: 'Assets', href: '/assets' }
9294
]
9395
};
96+
97+
const syncBrandLogo = () => {
98+
logoSrc = document.body.classList.contains('brand-pink')
99+
? '/images/logos/appwrite.svg'
100+
: '/images/logos/appwrite-green.svg';
101+
};
102+
103+
onMount(() => {
104+
syncBrandLogo();
105+
106+
const brandObserver = new MutationObserver(syncBrandLogo);
107+
brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
108+
109+
return () => {
110+
brandObserver.disconnect();
111+
};
112+
});
94113
</script>
95114

96115
<nav
@@ -99,13 +118,7 @@
99118
class:web-u-sep-block-start={!noBorder}
100119
>
101120
<div class="web-footer-nav container">
102-
<img
103-
class="web-logo"
104-
src="/images/logos/appwrite.svg"
105-
alt="appwrite"
106-
height="24"
107-
width="130"
108-
/>
121+
<img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
109122
<ul class="web-footer-nav-main-list" use:melt={$root}>
110123
{#each Object.entries(links) as [title, items], i (i)}
111124
<li class="web-footer-nav-main-item web-is-not-mobile">

‎src/lib/components/marketing/open-source-alternative.svelte‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,21 @@
9595
<div
9696
class="border-smooth py-10 text-center font-medium last-of-type:border-0 md:border-r md:px-10 md:py-0"
9797
>
98-
<img src={item.icon} alt={item.title} class="mx-auto" />
98+
<img
99+
src={item.icon}
100+
alt={item.title}
101+
class="open-source-alternative-icon mx-auto"
102+
/>
99103
<h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
100104
<p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
101105
</div>
102106
{/each}
103107
</div>
104108
</div>
105109
</div>
110+
111+
<style>
112+
:global(body.brand-green .open-source-alternative-icon) {
113+
filter: var(--web-color-image-accent-filter);
114+
}
115+
</style>

‎src/lib/components/marketing/platforms.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
<img
123123
src={platform.icon}
124124
alt={platform.name}
125-
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
125+
class="no-brand-filter h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
126126
/>
127127

128128
<div

0 commit comments

Comments
 (0)