Added modal styling and pared down variables for easier theming

beam/dev/theme.css

@@ -1 +1,2 @@
+@import url('./../themes/_beam-variables.css');
 @import url('./../themes/_beam-primary.css');

beam/src/BeamModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<portal to="beam__modal_outlet">
 		<div class="beam__modal" v-show="showModal">
-			<button @click="$emit('closemodal')">Close Modal</button>
+			<button class="btn" @click="$emit('closemodal')">Close Modal</button>
 			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
 		</div>
 	</portal>
@@ -12,14 +12,4 @@ export default {
 	props: ['showModal'],
 }
 </script>
-<style scoped>
-.beam__modal {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background-color: white;
-	z-index: 1000;
-}
-</style>
+<style scoped></style>

beam/src/Confirm.vue

@@ -1,9 +1,8 @@
 <template>
-	<div>
-		Would you like to continue?<br />
-		<button @click="confirmModal">Yes</button>
-		<br />
-		<button @click="closeModal">No</button>
+	<div class="beam__modal-confirm">
+		<h2>Would you like to continue?</h2>
+		<button class="btn btn--dark" @click="confirmModal">Yes</button>
+		<button class="btn btn--dark" @click="closeModal">No</button>
 	</div>
 </template>
 <script>

beam/themes/_beam-primary.css

@@ -1,33 +1,19 @@
-/* Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
-
 /* General Sizing */
 html {
 	font-size: 62.5%; /*1 rem = 10px; 10px/16px = 62.5%*/
 }
 
-/* Variables */
-:root {
-	--brand-primary: #827553;
-	--brand-secondary: #c4b695;
-	--brand-danger: #e63c28;
-	--brand-success: #155724;
-	--brand-dark: #3a3c41;
-	--brand-light: #fff;
-	--text-color: #333;
-	--light-gray: #ddd;
-	--font-family: 'Arimo', 'sans-serif';
-}
 body {
 	font-family: var(--font-family);
+	background-color: var(--background-color);
 }
 
 /* Style */
 .home-icon {
 	font-size: 3rem;
 	border: 1px solid transparent;
 	text-align: left;
-	color: var(--brand-light);
+	color: var(--background-color);
 }
 
 .home-icon:hover {
@@ -41,21 +27,28 @@ body {
 }
 
 .beam__listitem {
-	padding: 1rem;
-	border-bottom: 1px solid var(--light-gray);
+	padding: 2rem;
+	border-bottom: 1px solid var(--highlight);
 	max-width: 100%;
 	box-sizing: border-box;
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: space-between;
 	gap: 2rem;
+	cursor: pointer;
+	transition: all 0.2s;
+
+	&:hover {
+		background-color: var(--highlight);
+	}
 }
 .beam__listtext {
 	width: 80%;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	flex-grow: 1;
+	color: var(--text-color);
 }
 .beam__listitem label {
 	font-size: 1.8rem;
@@ -74,11 +67,13 @@ body {
 
 .beam__listitem:focus {
 	border-bottom: 2px solid transparent;
+	background-color: var(--highlight);
 	outline: 2px solid var(--brand-primary);
 }
 
 .beam__itemcount {
 	font-size: 2.1rem;
+	color: var(--text-color);
 }
 .beam__itemcount span {
 	margin: 0;
@@ -89,28 +84,28 @@ body {
 .beam__listanchor {
 	text-decoration: none;
 	outline: none;
-	color: var(--brand-dark);
+	color: var(--text-color);
 }
 .btn {
 	font-size: 1.4rem;
 	text-align: center;
 	padding: 1rem 1.5rem;
 	border: none;
 	color: var(--brand-primary);
-	background-color: var(--brand-light);
+	background-color: white;
 	font-weight: bold;
 	cursor: pointer;
 	border-radius: 2px;
 	transition: all 0.2s;
 
 	&:hover,
 	&:active {
+		color: white;
 		background-color: var(--brand-secondary);
-		color: var(--brand-light);
 	}
 }
 .btn--dark {
-	color: var(--brand-light);
+	color: white;
 	background-color: var(--brand-primary);
 }
 .beam__navbar {
@@ -126,15 +121,14 @@ body {
 	justify-content: flex-start;
 	align-items: center;
 	position: relative;
-	border-bottom: 1px solid var(--brand-primary);
 
 	.nav-title {
 		display: inline-block;
 		border: 1px solid transparent;
 		margin-left: 1rem;
 		text-align: left;
 		font-size: 2.4rem;
-		color: var(--brand-light);
+		color: var(--background-color);
 	}
 	.navbar-action-wrapper {
 		position: absolute;
@@ -146,9 +140,9 @@ body {
 }
 .beam__actionfooter {
 	margin-left: 0;
-	background: rgb(255, 255, 255);
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
-	color: var(--brand-dark);
+	background: red;
+	background: linear-gradient(180deg, transparent 0%, var(--background-color) 100%);
+	color: var(--text-color);
 	position: fixed;
 	bottom: 0;
 	left: 0;
@@ -162,3 +156,34 @@ body {
 .alert {
 	color: var(--brand-danger);
 }
+.beam__modal {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(2px);
+	z-index: 1000;
+	text-align: center;
+	padding: 2rem;
+}
+.beam__modal-confirm {
+	background: var(--background-color);
+	padding: 2rem;
+	width: 80%;
+	max-width: 400px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	& button {
+		margin: 1rem;
+	}
+	& h2 {
+		border-bottom: 1px solid var(--highlight);
+		padding-bottom: 1rem;
+		color: var(--text-color);
+	}
+}

beam/themes/_beam-variables.css

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
+
+:root {
+	--brand-primary: #827553;
+	--brand-secondary: #c4b695;
+	--brand-danger: #e63c28;
+	--brand-success: #155724;
+	--text-color: #333;
+	--highlight: #ddd;
+	--background-color: #fff;
+	--font-family: 'Arimo', 'sans-serif';
+}