Beam SCSS to CSS Styling Updated - Beam

beam/dev/Dev.vue

@@ -4,7 +4,7 @@
 			<ConfirmDialog @closemodal="closeModal" @confirmmodal="confirmModal" />
 		</BeamModal>
 		<Navbar @click="handlePrimaryAction">
-			<template v-slot:title><h1>ITEMS TO RECEIVE</h1></template>
+			<template v-slot:title><h1 class="nav-title">Items to Receive</h1></template>
 			<template v-slot:navbaraction>DONE</template>
 		</Navbar>
 		<ListView :items="items" @scrollbottom="loadMoreItems" />
@@ -222,14 +222,5 @@ export default {
 }
 </script>
 <style>
-body {
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	flex: 1 0 auto;
-	height: 100%;
-}
-
-@import './theme.scss';
+@import './theme.css';
 </style>

beam/dev/theme.css

@@ -0,0 +1 @@
+@import url('./../themes/beam.css');

beam/dev/vite.config.js

@@ -1,24 +1,15 @@
-import { defineConfig } from 'vite'
-import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
 
-const resolveSCSSPath = () => {
-	if (__dirname.endsWith('dev')) {
-		return resolve(__dirname, 'variables.scss')
-	} else if (__dirname.endsWith('src')) {
-		return resolve(__dirname, './../dev/variables.scss')
-	}
-}
+const projectRootDir = resolve(__dirname)
 
-module.exports = {
-	css: {
-		preprocessorOptions: {
-			scss: { additionalData: `@import "${resolveSCSSPath()}";` },
-		},
-	},
+export default defineConfig({
+	plugins: [vue()],
 	build: {
+		sourcemap: true,
 		lib: {
-			entry: resolve(__dirname, '../src/index.js'),
+			entry: resolve(projectRootDir, '../src/index.js'),
 			name: '@stonecrop/beam',
 		},
 		rollupOptions: {
@@ -29,7 +20,5 @@ module.exports = {
 				},
 			},
 		},
-		outDir: '../dist/',
 	},
-	plugins: [vue()],
-}
+})

beam/package.json

@@ -33,13 +33,12 @@
 		"serve": "vite preview"
 	},
 	"dependencies": {
-		"portal-vue": "~3.0.0-beta.0",
+		"portal-vue": "^3.0.0",
 		"vue": "^3.4.23"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-vue": "^4.0.0",
-		"cypress": "^12.2.0",
-		"portal-vue": "^3.0.0",
+		"@vitejs/plugin-vue": "^5.0.4",
+		"cypress": "^12.11.0",
 		"vite": "^5.2.9",
 		"vue-router": "^4"
 	},

beam/src/ActionFooter.vue

@@ -1,7 +1,7 @@
 <template>
 	<footer class="beam__actionfooter">
 		<span class="footer-action-wrapper">
-			<button class="footer-action" @click="handleFooterAction">
+			<button class="footer-action btn" @click="handleFooterAction">
 				<slot />
 			</button>
 		</span>

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" @click="confirmModal">Yes</button>
+		<button class="btn" @click="closeModal">No</button>
 	</div>
 </template>
 <script>
@@ -19,4 +18,3 @@ export default {
 	},
 }
 </script>
-<style scoped></style>

beam/src/ItemCheck.vue

@@ -1,7 +1,7 @@
 <template>
 	<label class="container">
 		<input type="checkbox" :checked="value" @input="handleInput" tabindex="-1" />
-		<span class="checkmark" tabindex="0"></span>
+		<div class="checkmark" tabindex="0"></div>
 	</label>
 </template>
 <script>
@@ -33,6 +33,7 @@ export default {
 	display: block;
 	position: relative;
 	padding-left: 2.5ch;
+	margin: 0;
 	margin-top: 0.5rem;
 	cursor: pointer;
 	font-size: 2rem;
@@ -59,18 +60,15 @@ export default {
 	width: 2rem;
 	background-color: #eee;
 	outline: 2px solid transparent;
-}
-
-.checkmark:focus {
-	outline: 2px solid $brand-primary;
+	border: 1px solid var(--highlight);
 }
 
 .container:hover input ~ .checkmark {
-	background-color: #ccc;
+	background-color: white;
 }
 
 .container input:checked ~ .checkmark {
-	background-color: $brand-dark;
+	background-color: var(--brand-secondary);
 }
 
 .checkmark:after {
@@ -84,14 +82,14 @@ export default {
 }
 
 .container .checkmark:after {
-	left: 0.75rem;
-	top: 0.25rem;
+	left: 25%;
+	top: 50%;
 	width: 0.5rem;
 	height: 1rem;
-	border: solid $brand-primary;
+	border: solid var(--text-color);
 	border-width: 0 3px 3px 0;
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	transform: rotate(45deg) translate(-50%, -50%);
 }
 </style>

beam/src/ItemCount.vue

@@ -2,7 +2,7 @@
 	<div class="beam__itemcount">
 		<span
 			:contenteditable="editable"
-			:style="{ color: countColor === true ? '#3c5014' : '#e63c28' }"
+			:class="{ alert: countColor === false }"
 			@input="handleInput($event)"
 			@click="handleInput($event)"
 			>{{ count }}</span

beam/src/ListAnchor.vue

@@ -15,4 +15,3 @@ export default {
 	},
 }
 </script>
-<style scoped lang="scss"></style>

beam/src/ListItem.vue

@@ -1,9 +1,10 @@
 <template>
 	<li tabindex="0" class="beam__listitem">
-		<span>
+		<div class="beam__listtext">
 			<label>{{ item.label }}</label>
 			<p>{{ item.description }}</p>
-		</span>
+		</div>
+
 		<ItemCount
 			v-if="item.count"
 			v-model="item.count.count"

beam/src/Navbar.vue

@@ -7,7 +7,7 @@
 			<h1 class="nav-title">TITLE</h1>
 		</slot>
 		<div class="navbar-action-wrapper">
-			<button class="navbar-action" @click="handlePrimaryAction">
+			<button class="navbar-action btn" @click="handlePrimaryAction">
 				<slot name="navbaraction">Action</slot>
 			</button>
 		</div>

beam/src/ScanInput.vue

@@ -33,4 +33,3 @@ export default {
 	},
 }
 </script>
-<style scoped></style>

beam/src/index.js

@@ -36,20 +36,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 	install(window.Vue)
 }
 
-export {
-	Navbar,
-	ListView,
-	ListItem,
-	ListAnchor,
-	ItemCount,
-	ItemCheck,
-	ScanInput,
-	ActionFooter,
-	BeamModal,
-	ConfirmDialog,
-	BeamModalOutlet,
-}
-
 export default {
 	version: '0.1.0',
 	install,