Refactor: Prefixed Passnado specific scss variables (#6)

* Initial branch commit

* Chore: Upgrade `webpack` and `babel-loader`

Co-authored-by: Tor Bratsberg <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "passnado",
-	"version": "2.2.1",
+	"version": "2.3.1",
 	"description": "",
 	"main": "index.js",
 	"scripts": {
@@ -18,15 +18,15 @@
 		"@babel/preset-env": "^7.14.5",
 		"@babel/preset-react": "^7.14.5",
 		"babel-core": "^6.26.3",
-		"babel-loader": "^8.2.2",
+		"babel-loader": "^8.2.5",
 		"cross-env": "^5.1.5",
 		"css-loader": "^0.28.11",
 		"css-minimizer-webpack-plugin": "^3.0.1",
 		"mini-css-extract-plugin": "^1.6.0",
 		"node-sass": "^4.8.3",
 		"sass-loader": "^6.0.7",
 		"style-loader": "^0.20.3",
-		"webpack": "^5.39.1",
+		"webpack": "^5.72.1",
 		"webpack-cli": "^4.7.2",
 		"webpack-dev-server": "^3.1.1",
 		"pre-commit": "^1.2.2",

passnado.php

@@ -8,7 +8,7 @@
  * Plugin Name: Passnado
  * Plugin URI:  https://designcontainer.no
  * Description: Password protect site
- * Version:     2.3.0
+ * Version:     2.3.1
  * Author:      Design Container AS
  * Author URI:  https://designcontainer.no
  * License:     GNU General Public License version 3.0
@@ -26,7 +26,7 @@
  * Rename this when releasing new versions.
  */
 if (!defined('PASSNADO_VERSION')) {
-	define('PASSNADO_VERSION', '2.3.0');
+	define('PASSNADO_VERSION', '2.3.1');
 }
 
 /**

src/scss/_admin.scss

@@ -12,7 +12,7 @@
 
 	&__part {
 		padding: rem-calc(20 30);
-		background-color: $white;
+		background-color: $passnado-white;
 		&:nth-child(1) {
 			grid-area: checklist;
 		}

src/scss/_public.scss

@@ -44,7 +44,7 @@
 			justify-content: center;
 			align-items: center;
 			height: inherit;
-			background-color: $white;
+			background-color: $passnado-white;
 			header {
 				margin-bottom: rem-calc(40);
 			}
@@ -65,7 +65,7 @@
 			box-sizing: border-box;
 			width: 100%;
 			text-align: center;
-			background-color: $white;
+			background-color: $passnado-white;
 			h1 {
 				margin-top: 0;
 				font-size: rem-calc(26);
@@ -80,15 +80,15 @@
 				padding: rem-calc(16);
 				border: 0;
 				border-radius: rem-calc(6);
-				color: $white;
+				color: $passnado-white;
 				text-align: center;
 				text-decoration: none;
 				background-color: var(--passnado-message-color);
 				transition: background-color 0.2s ease-in-out;
 
 				// &:hover,
 				// &:focus {
-				// 	background-color: darken($blue, 10%);
+				// 	background-color: darken($passnado-blue, 10%);
 				// }
 			}
 		}

src/scss/_utils.scss

@@ -1,23 +1,23 @@
-$rem-base: 16px;
+$passnado-rem-base: 16px;
 
 @function strip-unit($num) {
 	@return $num / ($num * 0 + 1);
 }
 
-@function convert-to-rem($value, $base-value: $rem-base) {
+@function convert-to-rem($value, $base-value: $passnado-rem-base) {
 	$value: strip-unit($value) / strip-unit($base-value) * 1rem;
 	@if ($value == 0rem) {
 		$value: 0;
 	} // Turn 0rem into 0
 	@return $value;
 }
 
-@function rem-calc($values, $base-value: $rem-base) {
+@function rem-calc($values, $base-value: $passnado-rem-base) {
 	$max: length($values);
+	$remValues: ();
 	@if $max == 1 {
 		@return convert-to-rem(nth($values, 1), $base-value);
 	}
-	$remValues: ();
 	@for $i from 1 through $max {
 		$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
 	}

src/scss/_var.scss

@@ -1,7 +1,7 @@
-$white: #ffffff;
-$blue: #247cf9;
-$light-blue: #f2f6ff;
-$warning: #ffba00;
-$success: #5ed569;
-$gray: #1e1e1e;
-$light-gray: #e0e0e0;
+$passnado-white: #ffffff;
+$passnado-blue: #247cf9;
+$passnado-light-blue: #f2f6ff;
+$passnado-warning: #ffba00;
+$passnado-success: #5ed569;
+$passnado-gray: #1e1e1e;
+$passnado-light-gray: #e0e0e0;

src/scss/components/_color-picker-modal.scss

@@ -16,7 +16,7 @@
 		max-width: rem-calc(400);
 		padding: rem-calc(16);
 		border-radius: rem-calc(4);
-		background-color: $white;
+		background-color: $passnado-white;
 		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 	}
 }

src/scss/components/_form.scss

@@ -7,8 +7,8 @@
 		width: 100%;
 		height: rem-calc(40);
 		padding: rem-calc(12);
-		border: rem-calc(1) solid $gray;
+		border: rem-calc(1) solid $passnado-gray;
 		border-radius: rem-calc(2);
-		background-color: $white;
+		background-color: $passnado-white;
 	}
 }

src/scss/components/_transparent-input.scss

@@ -8,6 +8,6 @@ input.transparent-input {
 	text-align: center;
 	background: transparent;
 	&--white {
-		color: $white;
+		color: $passnado-white;
 	}
 }

src/scss/parts/_header.scss

@@ -5,7 +5,7 @@
 	padding: rem-calc(20 40);
 	column-gap: rem-calc(28);
 	text-align: center;
-	background-color: $white;
+	background-color: $passnado-white;
 
 	.icon-wrap {
 		display: inline-flex;
@@ -16,10 +16,10 @@
 		margin-left: rem-calc(-68); // Just for centering the text visually
 		border-radius: rem-calc(420);
 		&--locked {
-			background-color: $success;
+			background-color: $passnado-success;
 		}
 		&--unlocked {
-			background-color: $warning;
+			background-color: $passnado-warning;
 		}
 	}
 }

src/scss/parts/_public-layout.scss

@@ -2,7 +2,7 @@
 	.passnado-message {
 		position: relative;
 		height: auto;
-		border: rem-calc(1) solid $light-gray;
+		border: rem-calc(1) solid $passnado-light-gray;
 		border-top: 0;
 		&__layout-nav {
 			display: flex;
@@ -22,15 +22,15 @@
 					}
 				}
 				label {
-					border-bottom: rem-calc(3) solid $white;
+					border-bottom: rem-calc(3) solid $passnado-white;
 					display: block;
 					padding: rem-calc(12 30);
 					font-weight: bold;
 				}
 			}
 		}
 		.color-picker-modal {
-			background-color: $white;
+			background-color: $passnado-white;
 			position: absolute;
 			right: rem-calc(12);
 			bottom: rem-calc(12);