scss: more options and some fixes

3 files changed, 61 insertions, 13 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 8d91702a3..576c4d8e9 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1224,32 +1224,32 @@ img.mail-conv-sender-photo {
 
 .section-content-success-wrapper {
 	padding: 21px 10px;
-	color: #155724;
-	background-color: #d4edda;
+	color: var(--bs-success-text-emphasis);
+	background-color: var(--bs-success-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-info-wrapper {
 	padding: 21px 10px;
-	color: #0c5460;
-	background-color: #d1ecf1;
+	color: var(--bs-info-text-emphasis);
+	background-color: var(--bs-info-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-warning-wrapper {
 	padding: 21px 10px;
-	color: #856404;
-	background-color: #fff3cd;
+	color: var(--bs-warning-text-emphasis);
+	background-color: var(--bs-warning-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-danger-wrapper {
 	padding: 21px 10px;
-	color: #721c24;
-	background-color: #f8d7da;
+	color: var(--bs-danger-text-emphasis);
+	background-color: var(--bs-danger-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 213e441eb..a9a766ad5 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -39,8 +39,11 @@ class RedbasicConfig {
 			return;
 		}
 
-		$arr = array();
 		$arr['primary_color'] = get_pconfig(local_channel(),'redbasic', 'primary_color');
+		$arr['success_color'] = get_pconfig(local_channel(),'redbasic', 'success_color');
+		$arr['info_color'] = get_pconfig(local_channel(),'redbasic', 'info_color');
+		$arr['warning_color'] = get_pconfig(local_channel(),'redbasic', 'warning_color');
+		$arr['danger_color'] = get_pconfig(local_channel(),'redbasic', 'danger_color');
 		$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
 		$arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode');
 		$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
@@ -68,22 +71,39 @@ class RedbasicConfig {
 			if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) {
 
 				$primary_color = '';
+				$success_color = '';
+				$info_color = '';
+				$warning_color = '';
+				$danger_color = '';
 				$radius = floatval($_POST['redbasic_radius']);
 
 				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) {
 					$primary_color = $_POST['redbasic_primary_color'];
 				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_success_color'])) {
+					$success_color = $_POST['redbasic_success_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_info_color'])) {
+					$info_color = $_POST['redbasic_info_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_warning_color'])) {
+					$warning_color = $_POST['redbasic_warning_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_danger_color'])) {
+					$danger_color = $_POST['redbasic_danger_color'];
+				}
 
-				if ($primary_color || $radius) {
+				if ($primary_color || $success_color || $info_color || $warning_color || $danger_color || $radius) {
 
 					try {
-						$cache_dir = 'store/[data]/[scss]';
+						$cache_dir = 'store/[data]/[scss]/';
 						if(!is_dir($cache_dir)) {
 							os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true);
 						}
 
 						$options = [
 							'cacheDir' => $cache_dir,
+							'prefix' => 'redbasic_',
 							'forceRefresh' => false
 						];
 
@@ -95,9 +115,24 @@ class RedbasicConfig {
 						if ($primary_color) {
 							$variables['$primary'] = $primary_color;
 						}
-
+						if ($success_color) {
+							$variables['$success'] = $success_color;
+						}
+						if ($info_color) {
+							$variables['$info'] = $info_color;
+						}
+						if ($warning_color) {
+							$variables['$warning'] = $warning_color;
+						}
+						if ($danger_color) {
+							$variables['$danger'] = $danger_color;
+						}
 						if ($radius) {
 							$variables['$border-radius'] = $radius . 'rem';
+							$variables['$border-radius-sm'] = $radius/1.5 . 'rem';
+							$variables['$border-radius-lg'] = $radius*1.333 . 'rem';
+							$variables['$border-radius-xl'] = $radius*2.666 . 'rem';
+							$variables['$border-radius-xxl'] = $radius*5.333 . 'rem';
 						}
 
 						// Replace Bootstrap Variables with Customizer Variables
@@ -116,6 +151,11 @@ class RedbasicConfig {
 			}
 
 			set_pconfig(local_channel(), 'redbasic', 'primary_color', $_POST['redbasic_primary_color']);
+			set_pconfig(local_channel(), 'redbasic', 'success_color', $_POST['redbasic_success_color']);
+			set_pconfig(local_channel(), 'redbasic', 'info_color', $_POST['redbasic_info_color']);
+			set_pconfig(local_channel(), 'redbasic', 'warning_color', $_POST['redbasic_warning_color']);
+			set_pconfig(local_channel(), 'redbasic', 'danger_color', $_POST['redbasic_danger_color']);
+
 			set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
 			set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']);
 			set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
@@ -154,6 +194,10 @@ class RedbasicConfig {
 			'$light' => t('Light style'),
 			'$common' => t('Common settings'),
 			'$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color']),
+			'$success_color' => array('redbasic_success_color', t('Success theme color'), $arr['success_color']),
+			'$info_color' => array('redbasic_info_color', t('Info theme color'), $arr['info_color']),
+			'$warning_color' => array('redbasic_warning_color', t('Warning theme color'), $arr['warning_color']),
+			'$danger_color' => array('redbasic_danger_color', t('Danger theme color'), $arr['danger_color']),
 			'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
 			'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))),
 			'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index 4ba418afc..61baeb58e 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -8,6 +8,10 @@
 	<hr>
 	<h3>{{$common}}</h3>
 	{{include file="field_colorinput.tpl" field=$primary_color}}
+	{{include file="field_colorinput.tpl" field=$success_color}}
+	{{include file="field_colorinput.tpl" field=$info_color}}
+	{{include file="field_colorinput.tpl" field=$warning_color}}
+	{{include file="field_colorinput.tpl" field=$danger_color}}
 	{{include file="field_input.tpl" field=$radius}}
 	{{include file="field_input.tpl" field=$top_photo}}
 	{{include file="field_input.tpl" field=$reply_photo}}
@@ -28,7 +32,7 @@
 		$('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
 	});
 	$(function(){
-		$('#id_redbasic_primary_color').colorpicker({format: 'hex'});
+		$('#id_redbasic_primary_color, #id_redbasic_success_color, #id_redbasic_info_color, #id_redbasic_warning_color, #id_redbasic_danger_color').colorpicker({format: 'hex'});
 	});
 </script>
 {{/if}}