style: generalize colors (up-csi#52)

This PR generalizes the site colors and recolors the website according to the Figma design. Note: - Color `#004420` will correspond to CSS variable `--primary`; for now though, since we're looking at the Figma design, the colors in `app.postcss` are gray and white. - I'll be completing the navbar coloring in a future PR soon.
ClarisseCoconut · Jan 15, 2025 · b0d18d2 · b0d18d2
2 parents 87b4cf0 + 2108cb6
commit b0d18d2
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 87 deletions.
diff --git a/website-frontend/src/app.postcss b/website-frontend/src/app.postcss
@@ -5,10 +5,10 @@
 @layer base {
 	:root {
 		--background: 0 0% 100%;
-		--foreground: 222.2 84% 4.9%;
+		--foreground: 220 23% 23%;
 
-		--muted: 210 40% 96.1%;
-		--muted-foreground: 215.4 16.3% 46.9%;
+		--muted: 222 38% 95%;
+		--muted-foreground: 221 15% 52%;
 
 		--popover: 0 0% 100%;
 		--popover-foreground: 222.2 84% 4.9%;
@@ -19,52 +19,23 @@
 		--border: 214.3 31.8% 91.4%;
 		--input: 214.3 31.8% 91.4%;
 
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
+		--primary: 220 23% 23%;
+		--primary-foreground: 0 0% 100%;
 
-		--secondary: 210 40% 96.1%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
+		--secondary: 219 20% 69%;
+		--secondary-foreground: 0 0% 100%;
 
 		--accent: 210 40% 96.1%;
 		--accent-foreground: 222.2 47.4% 11.2%;
 
 		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 210 40% 98%;
+		--destructive-foreground: 0 0% 100%;
 
 		--ring: 222.2 84% 4.9%;
 
 		--radius: 0.5rem;
-	}
-
-	.dark {
-		--background: 222.2 84% 4.9%;
-		--foreground: 210 40% 98%;
-
-		--muted: 217.2 32.6% 17.5%;
-		--muted-foreground: 215 20.2% 65.1%;
-
-		--popover: 222.2 84% 4.9%;
-		--popover-foreground: 210 40% 98%;
-
-		--card: 222.2 84% 4.9%;
-		--card-foreground: 210 40% 98%;
-
-		--border: 217.2 32.6% 17.5%;
-		--input: 217.2 32.6% 17.5%;
 
-		--primary: 210 40% 98%;
-		--primary-foreground: 222.2 47.4% 11.2%;
-
-		--secondary: 217.2 32.6% 17.5%;
-		--secondary-foreground: 210 40% 98%;
-
-		--accent: 217.2 32.6% 17.5%;
-		--accent-foreground: 210 40% 98%;
-
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 210 40% 98%;
-
-		--ring: 212.7 26.8% 83.9%;
+		--header: 222 38% 95%;
 	}
 }
 
@@ -75,6 +46,9 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+	header {
+		@apply bg-header;
+	}
 }
 
 @layer base {

diff --git a/website-frontend/src/lib/components/filter/FilterBar.svelte b/website-frontend/src/lib/components/filter/FilterBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FilterControls } from './filter_controls';
+	import type { FilterControls } from '$lib/types/filter_controls';
 	import { ListFilter } from 'lucide-svelte';
 	import FilterButton from './FilterButton.svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -15,7 +15,7 @@
 		p-6 shadow-lg md:flex md:max-w-[82vw]"
 >
 	<div class="flex items-center">
-		<div class="mr-4 text-xs font-semibold uppercase text-gray-500">
+		<div class="mr-4 text-xs font-semibold uppercase text-muted-foreground">
 			<p>FILTER BY</p>
 		</div>
 		{#if controls}
@@ -28,9 +28,11 @@
 	</div>
 	{#if timed}
 		<Tabs.Root value="upcoming">
-			<Tabs.List class="rounded-3xl [&>*]:w-36 [&>*]:rounded-3xl">
-				<Tabs.Trigger value="upcoming">Upcoming</Tabs.Trigger>
-				<Tabs.Trigger value="past">Past</Tabs.Trigger>
+			<Tabs.List class="rounded-3xl bg-muted *:w-36 *:rounded-3xl">
+				<Tabs.Trigger value="upcoming"
+					><span class="text-muted-foreground">Upcoming</span></Tabs.Trigger
+				>
+				<Tabs.Trigger value="past"><span class="text-muted-foreground">Past</span></Tabs.Trigger>
 			</Tabs.List>
 		</Tabs.Root>
 	{/if}

diff --git a/website-frontend/src/lib/components/filter/FilterButton.svelte b/website-frontend/src/lib/components/filter/FilterButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FilterControl } from './filter_controls';
+	import type { FilterControl } from '$lib/types/filter_controls';
 	import { ChevronUp, ChevronDown } from 'lucide-svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 

diff --git a/website-frontend/src/lib/components/flexible_content/FlexibleContent.svelte b/website-frontend/src/lib/components/flexible_content/FlexibleContent.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { enhanceWysiwygContent } from '.';
-    export let content: string = '';
+	import { onMount } from 'svelte';
+	import { enhanceWysiwygContent } from '.';
+	export let content: string = '';
 
-    let enhancedContent = content;
-    
-    onMount(() => {
-        enhancedContent = content ? enhanceWysiwygContent(content) : '';
-    });
+	let enhancedContent = content;
 
-    $: if (typeof window !== 'undefined') {
-        enhancedContent = content ? enhanceWysiwygContent(content) : '';
-    }
+	onMount(() => {
+		enhancedContent = content ? enhanceWysiwygContent(content) : '';
+	});
+
+	$: if (typeof window !== 'undefined') {
+		enhancedContent = content ? enhanceWysiwygContent(content) : '';
+	}
 </script>
 
 {#if content}
-    {@html enhancedContent}
+	{@html enhancedContent}
 {/if}
diff --git a/website-frontend/src/lib/components/landing/Hero.svelte b/website-frontend/src/lib/components/landing/Hero.svelte
@@ -34,10 +34,10 @@
 					<img
 						src="source/to/image"
 						alt="Carousel Item"
-						class="relative h-[90vh] w-full bg-slate-400"
+						class="relative h-[90vh] w-full bg-secondary"
 					/>
 					<div class="hidden">{_}</div>
-					<div class="absolute bottom-28 text-white md:px-20">
+					<div class="absolute bottom-28 text-secondary-foreground md:px-20">
 						<h1 class="mb-5 text-4xl font-bold">Some Big Bold Description Text</h1>
 						<p class="text-md mb-5 font-semibold">Some extra description</p>
 						<Button href="/">Button</Button>
@@ -46,7 +46,7 @@
 			{/each}
 		</Carousel.Content>
 	</Carousel.Root>
-	<div class="absolute -mt-20 text-sm font-semibold text-white md:px-20">
+	<div class="absolute -mt-20 text-sm font-semibold text-secondary-foreground md:px-20">
 		Item {current} of {count}
 	</div>
 </div>
diff --git a/website-frontend/src/lib/components/nav/Header.svelte b/website-frontend/src/lib/components/nav/Header.svelte
@@ -4,20 +4,20 @@
 	export let favicon;
 </script>
 
-<div class="h-14 items-center bg-slate-50 py-2 md:h-16">
+<div class="h-14 items-center py-2 md:h-16">
 	<div class="flex justify-between px-2 md:px-9">
 		<div class="my-auto flex items-center">
 			<img
 				src={favicon}
 				alt="UP"
-				class="mr-1 hidden h-12 w-12 max-w-xs rounded-full bg-gray-400 md:block"
+				class="mr-1 hidden h-12 w-12 max-w-xs rounded-full bg-secondary md:block"
 			/>
 			<img
 				src={favicon}
 				alt="DCS"
-				class="mr-2 h-10 w-10 max-w-xs rounded-full bg-gray-400 md:mr-3 md:h-12 md:w-12"
+				class="mr-2 h-10 w-10 max-w-xs rounded-full bg-secondary md:mr-3 md:h-12 md:w-12"
 			/>
-			<div class="font-semibold text-[#004420]">
+			<div class="font-semibold text-primary">
 				<h1 class="text-xs md:text-sm">University of the Philippines Diliman</h1>
 				<h1 class="text-md -mt-1 md:-mt-2 md:text-lg">Department of Computer Science</h1>
 			</div>
@@ -27,15 +27,15 @@
 				href="https://web.facebook.com/upddcs?_rdc=1&_rdr"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="mr-3 hidden h-7 pb-[2px] text-gray-400 transition-colors duration-300 hover:text-[#004420] md:block"
+				class="mr-3 hidden h-7 pb-[2px] text-secondary transition-colors duration-300 hover:text-primary md:block"
 			>
 				<FacebookIcon />
 			</a>
 			<a
 				href="https://x.com/upcs"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="hidden h-5 text-gray-400 transition-colors duration-300 hover:text-[#004420] md:block"
+				class="hidden h-5 text-secondary transition-colors duration-300 hover:text-primary md:block"
 			>
 				<XIcon />
 			</a>

diff --git a/website-frontend/src/lib/components/nav/NavBar.svelte b/website-frontend/src/lib/components/nav/NavBar.svelte
@@ -4,14 +4,14 @@
 
 <div
 	class="
-    hidden w-full md:my-2 md:flex md:h-full
+    hidden w-full md:absolute md:mt-2 md:flex md:h-fit
 	md:justify-center
 "
 >
 	<nav
 		class="
-        fixed flex h-screen w-full justify-end bg-background md:sticky md:z-50 md:h-fit
-        md:w-fit md:justify-between md:rounded-3xl md:border md:p-1 md:px-5
+        fixed flex h-screen w-full justify-end bg-background/10 md:sticky md:z-50 md:h-fit
+        md:w-fit md:justify-between md:rounded-3xl md:border md:border-header md:px-5 md:py-1
     "
 	>
 		<ul
@@ -67,7 +67,10 @@
 			<NavItem href="/students" to="Students" dropdown={true}>
 				<NavItem href="/students" to="Overview" />
 				<NavItem href="/students/batch-representatives" to="Batch Representatives" />
-				<NavItem href="/students/student-ethics-health-and-wellbeing" to="Student Ethics, Health, and Wellbeing" />
+				<NavItem
+					href="/students/student-ethics-health-and-wellbeing"
+					to="Student Ethics, Health, and Wellbeing"
+				/>
 				<NavItem href="/students/student-opportunities" to="Student Opportunities" />
 				<NavItem href="/students/organizations" to="Organizations" />
 			</NavItem>

diff --git a/website-frontend/src/lib/components/people/Banner.svelte b/website-frontend/src/lib/components/people/Banner.svelte
@@ -12,12 +12,12 @@
 <div class="relative z-0">
 	<div
 		class="h-[45vh] bg-cover bg-center md:h-[60vh]"
-		style="background-image: linear-gradient(to top, #004420, transparent), url('{PUBLIC_APIURL}/assets/{background_image}')"
+		style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent), url('{PUBLIC_APIURL}/assets/{background_image}')"
 	></div>
 
 	<div
 		class="absolute bottom-24 left-1/2
-        -translate-x-1/2 transform text-center text-white
+        -translate-x-1/2 transform text-center text-primary-foreground
         md:left-0 md:max-w-[60vw] md:translate-x-0 md:px-32 md:text-start"
 	>
 		<h1 class="text-3xl font-bold md:mb-4 md:text-4xl">{deslugify_title}</h1>

diff --git a/.../lib/components/filter/filter_controls.ts → ...frontend/src/lib/types/filter_controls.ts b/.../lib/components/filter/filter_controls.ts → ...frontend/src/lib/types/filter_controls.ts
diff --git a/website-frontend/src/routes/about/+page.svelte b/website-frontend/src/routes/about/+page.svelte
@@ -11,10 +11,14 @@
 		<div class="relative">
 			<div
 				class="h-[40vh] bg-cover bg-center md:h-[50vh]"
-				style="background-image: linear-gradient(to top, #004420, transparent)"
+				style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
 			></div>
 			<div class="absolute bottom-9">
-				<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">About</h1>
+				<h1
+					class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
+				>
+					About
+				</h1>
 			</div>
 		</div>
 

diff --git a/website-frontend/src/routes/about/[slug]/+page.svelte b/website-frontend/src/routes/about/[slug]/+page.svelte
@@ -11,10 +11,12 @@
 		<div class="relative">
 			<div
 				class="h-[40vh] bg-cover bg-center md:h-[50vh]"
-				style="background-image: linear-gradient(to top, #004420, transparent)"
+				style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
 			></div>
 			<div class="absolute bottom-9">
-				<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
+				<h1
+					class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
+				>
 					{page.title}
 				</h1>
 			</div>

diff --git a/website-frontend/src/routes/academics/[slug]/+page.svelte b/website-frontend/src/routes/academics/[slug]/+page.svelte
@@ -8,12 +8,14 @@
 		<div class="relative">
 			<div
 				class="h-[40vh] bg-cover bg-center md:h-[50vh]"
-				style="background-image: linear-gradient(to top, #004420, transparent), url('{data.program
-					.image}')"
+				style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent), url('{data
+					.program.image}')"
 			></div>
 
 			<div class="absolute bottom-9">
-				<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
+				<h1
+					class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
+				>
 					{data.program.title}
 				</h1>
 			</div>

diff --git a/website-frontend/src/routes/events/+page.svelte b/website-frontend/src/routes/events/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
-	import type { FilterControls } from '$lib/components/filter/filter_controls';
+	import type { FilterControls } from '$lib/types/filter_controls';
 	import FeaturedEventCard from '$lib/components/events/FeaturedEventCard.svelte';
 	import FilterBar from '$lib/components/filter/FilterBar.svelte';
 	import LoadMore from '$lib/components/load_more/LoadMore.svelte';

diff --git a/website-frontend/src/routes/people/+page.svelte b/website-frontend/src/routes/people/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
-	import type { FilterControls } from '$lib/components/filter/filter_controls';
+	import type { FilterControls } from '$lib/types/filter_controls';
 	import Banner from '$lib/components/people/Banner.svelte';
 	import FilterBar from '$lib/components/filter/FilterBar.svelte';
 	import LoadMore from '$lib/components/load_more/LoadMore.svelte';

diff --git a/website-frontend/src/routes/people/[slug]/+page.svelte b/website-frontend/src/routes/people/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
-	import type { FilterControls } from '$lib/components/filter/filter_controls';
+	import type { FilterControls } from '$lib/types/filter_controls';
 	import Banner from '$lib/components/people/Banner.svelte';
 	import FilterBar from '$lib/components/filter/FilterBar.svelte';
 	import LoadMore from '$lib/components/load_more/LoadMore.svelte';

diff --git a/website-frontend/src/routes/students/[slug]/+page.svelte b/website-frontend/src/routes/students/[slug]/+page.svelte
@@ -11,10 +11,12 @@
 		<div class="relative">
 			<div
 				class="h-[40vh] bg-cover bg-center md:h-[50vh]"
-				style="background-image: linear-gradient(to top, #004420, transparent)"
+				style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
 			></div>
 			<div class="absolute bottom-9">
-				<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
+				<h1
+					class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
+				>
 					{page.title}
 				</h1>
 			</div>

diff --git a/website-frontend/src/routes/students/organizations/+page.server.ts b/website-frontend/src/routes/students/organizations/+page.server.ts
@@ -5,7 +5,7 @@ import getDirectusInstance from '$lib/directus';
 export async function load({ fetch }) {
 	const directus = await getDirectusInstance(fetch);
 	const page = await directus.request(readItem('students_pages', 4));
-	
+
 	return {
 		page
 	};

diff --git a/website-frontend/src/routes/students/organizations/+page.svelte b/website-frontend/src/routes/students/organizations/+page.svelte
@@ -11,10 +11,12 @@
 		<div class="relative">
 			<div
 				class="h-[40vh] bg-cover bg-center md:h-[50vh]"
-				style="background-image: linear-gradient(to top, #004420, transparent)"
+				style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
 			></div>
 			<div class="absolute bottom-9">
-				<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
+				<h1
+					class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
+				>
 					{page.title}
 				</h1>
 			</div>

diff --git a/website-frontend/tailwind.config.ts b/website-frontend/tailwind.config.ts
@@ -47,7 +47,8 @@ const config: Config = {
 				card: {
 					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
 					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
-				}
+				},
+				header: 'hsl(var(--header) / <alpha-value>)'
 			},
 			borderRadius: {
 				lg: 'var(--radius)',