surface color and button styles

DHBern · May 16, 2024 · e5ddcce · e5ddcce
1 parent 28867d3
commit e5ddcce
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/src/beach.ts b/src/beach.ts
@@ -28,10 +28,10 @@ export const beach: QuarternaryConfig = {
 		'--theme-rounded-container': '8px',
 		'--theme-border-base': '1px',
 		// =~= Theme On-X Colors =~=
-		'--on-primary': 'var(--color-surface-500)',
-		'--on-secondary': 'var(--color-surface-500)',
-		'--on-tertiary': 'var(--color-surface-700)',
-		'--on-quarternary': 'var(--color-surface-700)',
+		'--on-primary': 'var(--color-surface-900)',
+		'--on-secondary': 'var(--color-surface-900)',
+		'--on-tertiary': 'var(--color-surface-900)',
+		'--on-quarternary': 'var(--color-surface-900)',
 		'--on-success': '0 0 0',
 		'--on-warning': '0 0 0',
 		'--on-error': '255 255 255',
@@ -115,15 +115,15 @@ export const beach: QuarternaryConfig = {
 		'--color-error-800': '127 15 71', // #7f0f47
 		'--color-error-900': '104 12 58', // #680c3a
 		// surface | #043854
-		'--color-surface-50': '217 225 229', // #d9e1e5
-		'--color-surface-100': '205 215 221', // #cdd7dd
-		'--color-surface-200': '192 205 212', // #c0cdd4
-		'--color-surface-300': '155 175 187', // #9bafbb
-		'--color-surface-400': '79 116 135', // #4f7487
-		'--color-surface-500': '4 56 84', // #043854
-		'--color-surface-600': '4 50 76', // #04324c
-		'--color-surface-700': '3 42 63', // #032a3f
-		'--color-surface-800': '2 34 50', // #022232
-		'--color-surface-900': '2 27 41' // #021b29
+		'--color-surface-50': '245 251 255', // #F5FBFF
+		'--color-surface-100': '226 244 254', // #E2F4FE
+		'--color-surface-200': '201 235 252', // #C9EBFC
+		'--color-surface-300': '172 223 251', // #ACDFFB
+		'--color-surface-400': '133 209 249', // #85D1F9
+		'--color-surface-500': '85 190 247', // #55BEF7
+		'--color-surface-600': '31 170 244', // #1FAAF4
+		'--color-surface-700': '10 143 214', // #0A8FD6
+		'--color-surface-800': '8 110 166', // #086EA6
+		'--color-surface-900': '4 56 84' // #043854
 	}
 };
diff --git a/src/lib/SidebarLayout.svelte b/src/lib/SidebarLayout.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="max-w-full lg:grid lg:grid-cols-[320px_1fr]">
-	<aside class="mx-4 @container h-screen">
+	<aside class="px-4 @container h-screen shadow-[0_.5rem_1rem_rgba(0,0,0,.5)]">
 		<h1 class="h1"><a href="{base}/">The Beach Atlas</a></h1>
 		<div class="flex @[320px]:grid flex-col @[320px]:grid-cols-2 h-full">
 			<slot name="sidebar"></slot>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -36,7 +36,8 @@
 		title: 'Black Atlantic',
 		meta: {
 			region: 'black-atlantic',
-			btnClasses: 'btn variant-filled-secondary',
+			btnClasses:
+				'btn border bg-secondary-500 text-surface-900 hover:bg-surface-900 hover:text-secondary-500 hover:filter-none',
 			color: 'secondary-500',
 			tabs: [
 				{
@@ -107,7 +108,8 @@ and morbid.</p>`
 		title: 'Mediterranean',
 		meta: {
 			region: 'mediterranean',
-			btnClasses: 'btn variant-filled-tertiary',
+			btnClasses:
+				'btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none',
 			color: 'tertiary-500',
 			tabs: [
 				{
@@ -144,18 +146,24 @@ and morbid.</p>`
 			<h2 class="h2 my-4">explore by region</h2>
 			<ul>
 				<li class="my-2">
-					<a href="{base}/region/black-atlantic" class="btn variant-filled-secondary">
+					<a
+						href="{base}/region/black-atlantic"
+						class="btn border bg-secondary-500 text-surface-900 hover:bg-surface-900 hover:text-secondary-500 hover:filter-none"
+					>
 						Black Atlantic
 					</a>
 				</li>
 				<li class="my-2">
-					<a href="{base}/region/mediterranean" class="btn variant-filled-tertiary">Mediterranean</a
+					<a
+						href="{base}/region/mediterranean"
+						class="btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none"
+						>Mediterranean</a
 					>
 				</li>
 				<li class="my-2">
 					<a
 						href="{base}/region/northern-sea"
-						class="btn bg-quarternary-500 text-surface-700 hover:bg-surface-700 hover:text-quarternary-500"
+						class="btn border bg-quarternary-500 text-surface-900 hover:bg-surface-900 hover:text-quarternary-500 hover:filter-none"
 					>
 						Northern Sea
 					</a>
@@ -230,10 +238,10 @@ and morbid.</p>`
 					points="962,1957 1096,2075 1356,2173 1596,2248 2399,2465 2482,2343,2415,2197,2332,2110,2151,2099,2100,2004,2155,1886,2163,1819,2139,1772,2147,1713,2171,1669,2226,1650,2234,1595,2210,1579,1545,1654,1340,1642,1269,1646,1194,1756,1037,1788,989,1862"
 				></polygon>
 			</a>
-			<foreignObject x="1600" y="1900" width="800" height="500">
+			<foreignObject x="1600" y="1900" width="450" height="300">
 				{#if svg?.clientWidth}<button
 						on:click={() => modalStore.trigger(atlanticInfo)}
-						class="btn variant-filled-secondary origin-top-left"
+						class="btn border bg-secondary-500 text-surface-900 hover:bg-surface-900 hover:text-secondary-500 hover:filter-none origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Black Atlantic
@@ -245,10 +253,10 @@ and morbid.</p>`
 					points="2159,1819,2277,1807,2442,1874,2549,1874,2734,1819,2734,1717,2647,1669,2568,1610,2521,1614,2482,1539,2332,1536,2230,1591,2230,1646,2171,1669,2143,1713,2135,1768"
 				></polygon>
 			</a>
-			<foreignObject x="2300" y="1650" width="800" height="500">
+			<foreignObject x="2300" y="1650" width="450" height="300">
 				{#if svg?.clientWidth}<button
 						on:click={() => modalStore.trigger(mediterraneanInfo)}
-						class="btn variant-filled-tertiary origin-top-left"
+						class="btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Mediterranean
@@ -260,10 +268,10 @@ and morbid.</p>`
 					points="1269,1646,1541,1658,2206,1579,2332,1536,2403,1484,2553,1433,2639,1307,2631,1252,2702,1260,2927,1075,2895,984,2655,425,2356,461,1911,528,1860,843,1828,980,1694,1110,1659,1181,1615,1063,1548,1075,1450,1410,1320,1469"
 				></polygon>
 			</a>
-			<foreignObject x="1800" y="1400" width="800" height="500">
+			<foreignObject x="1800" y="1400" width="450" height="300">
 				{#if svg?.clientWidth}<button
 						on:click={() => modalStore.trigger(northernInfo)}
-						class="btn bg-quarternary-500 text-surface-700 hover:bg-surface-700 hover:text-quarternary-500 origin-top-left"
+						class="btn border bg-quarternary-500 text-surface-900 hover:bg-surface-900 hover:text-quarternary-500 hover:filter-none origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Northern Sea

diff --git a/src/routes/region/black-atlantic/+page.svelte b/src/routes/region/black-atlantic/+page.svelte
@@ -12,7 +12,10 @@
 			<h3 class="h3">explore more regions</h3>
 			<ul>
 				<li>
-					<a href="{base}/region/mediterranean" class="btn variant-filled-tertiary">Mediterranean</a
+					<a
+						href="{base}/region/mediterranean"
+						class="btn border bg-tertiary-500 text-surface-900 hover:bg-surface-900 hover:text-tertiary-500 hover:filter-none"
+						>Mediterranean</a
 					>
 				</li>
 				<li>