Move bootstrap @less variables to CSS var()

dev/Styles/@Main.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/alerts.less";
 @import "../../vendors/bootstrap/less/code.less";
 @import "../../vendors/bootstrap/less/dropdowns.less";
-@import "../../vendors/bootstrap/less/navs.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 
 @import "_FontasticToBoot.less";

dev/Styles/Main.less

@@ -11,7 +11,7 @@ html, body {
 
 #rl-app {
 	-webkit-touch-callout: none;
-	font-size: @baseFontSize;
+	font-size: var(--main-font-size, 14px);
 	line-height: 1.15; /* 1 */
 	position: fixed;
 	top: 0;
@@ -58,7 +58,7 @@ dialog::backdrop {
 
 dialog {
 	border: 0;
-	background-color: @white;
+	background-color: var(--dialog-bg-clr, #fff);
 	border: 1px solid rgba(0,0,0,.3);
 	border-radius: 6px;
 	box-shadow: 0 5px 80px rgba(0,0,0,0.3);

dev/Styles/Ui.less

@@ -115,18 +115,17 @@ tr:hover .drag-handle {
 	border-radius: 4px 4px 0 0;
 	cursor: pointer;
 	grid-row-start: 1;
-	line-height: @baseLineHeight;
 	opacity: 0.6;
 	margin: 0 2px -1px 0;
 	padding: 5px;
 	text-align: center;
 	&:hover {
-		border-color: @grayLighter;
+		border-color: var(--tab-hover-border-clr, #eee);
 		opacity: 0.8;
 	}
 }
 .tabs > [id^="tab"]:checked + label {
-	background-color: @white;
+	background-color: var(--tab-active-bg-clr, #fff);
 	border-color: rgba(128,128,128,.5) rgba(128,128,128,.5) transparent rgba(128,128,128,.5);
 	opacity: 1;
 	z-index: 1;

dev/Styles/User/EmailAddresses.less

@@ -1,9 +1,10 @@
 .emailaddresses {
-	background-color: #fff;
-	border: 1px solid #ccc;
-	border-radius: 3px;
+	background-color: var(--input-bg-clr, #fff);
+	border: 1px solid var(--input-border-clr, #ccc);
+	border-radius: var(--input-border-radius, 3px);
 	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 	box-sizing: border-box;
+	color: var(--input-clr, #555);
 	cursor: text;
 	font-size: 90%;
 	list-style: none;
@@ -15,7 +16,7 @@
 }
 
 .emailaddresses.emailaddresses-focused {
-	border: 1px solid darken(@inputBorder, 20%);
+	border-color: var(--input-focus-border-clr, #999);
 	box-shadow: none;
 }
 

dev/Styles/User/FolderList.less

@@ -147,9 +147,9 @@
 	.b-folders-user a[data-unread]:not(.system)::after
 	{
 		content: attr(data-unread);
-		background-color: @grayLight;
+		background-color: var(--unread-count-bg-color, #999);
 		border-radius: 9px;
-		color: @white;
+		color: var(--unread-count-color, #fff);
 		font-size: 11px;
 		line-height: 19px;
 		margin-top: 5px;

dev/Styles/User/Layout.less

@@ -155,7 +155,7 @@ html.rl-side-preview-pane {
 }
 
 .dropdown.show {
-	box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
+	box-shadow: 0 0 1px var(--main-color, #333);
 }
 
 .btn.btn-transparent {

dev/Styles/_BootstrapFix.less

@@ -1,17 +1,11 @@
 
 .legend {
-	display: block;
-	width: 100%;
-	padding: 0;
-	margin-bottom: @baseLineHeight;
-	font-size: @baseFontSize * 1.5;
-	line-height: @baseLineHeight * 1.5;
-	color: @grayDark;
-	border: 0;
 	border-bottom: 1px solid var(--border-color, #ddd);
+	font-size: 150%;
+	line-height: 2.1;
+	margin-bottom: 1.43em;
 }
 summary.legend {
-	display: list-item;
 	cursor: pointer;
 }
 
@@ -21,15 +15,14 @@ summary.legend {
 
 .alert a:not(.close) {
 	text-decoration: underline;
-	color: @warningText;
 }
 
 .alert.alert-info a:not(.close) {
-	color: @infoText;
+	color: var(--info-clr, #3a87ad);
 }
 
 .alert.alert-error a:not(.close) {
-	color: @errorText;
+	color: var(--error-clr, #b94a48);
 }
 
 /* mobile and tablet */

snappymail/v/0.0.0/themes/example.css

@@ -6,8 +6,22 @@
 	--main-bg-image: none; /* url("images/background.png"); */
 	--main-bg-size: auto;
 	--main-bg-repeat: repeat;
+	--main-font-size: 14px;
 	--link-color: #369;
 	--border-color: #ddd;
+	--hr-color: #eee;
+
+	--warning-clr: #c09853;
+	--warning-bg-clr: #fcf8e3;
+	--warning-border-clr: #fbeed5;
+
+	--error-clr: #b94a48;
+	--error-bg-clr: #f2dede;
+	--error-border-clr: #eed3d7;
+
+	--info-clr: #3a87ad;
+	--info-bg-clr: #d9edf7;
+	--info-border-clr: #bce8f1;
 
 /* LOADING */
 	--loading-color: #000;
@@ -42,6 +56,8 @@
 	--folders-hover-bg-color: false;
 	--folders-drop-color: #eee;
 	--folders-drop-bg-color: #333;
+	--unread-count-color: #fff;
+	--unread-count-bg-color: #333;
 
 /* SETTINGS */
 	--settings-menu-color: #333;
@@ -52,9 +68,32 @@
 
 /* MESSAGE LIST */
 	--message-list-toolbar-bg-color: #eee;
-	--message-list-toolbar-gradient-start: none; /* #f4f4f4 */
-	--message-list-toolbar-gradient-end: none;   /* #dfdfdf */
 
 /* MESSAGE */
 	--message-bg-color: #fff;
+
+/* DIALOGS */
+	--dialog-bg-clr: #fff;
+
+/* FORMS */
+	--btn-clr: #333;
+	--btn-bg-clr: #fff;
+	--btn-border-clr: #fff;
+	--btn-success-bg-clr: #84AB04;
+	--btn-danger-bg-clr: #ee5f5b;
+
+	--input-clr: #555;
+	--input-bg-clr: #fff;
+	--input-border-clr: #ccc;
+	--input-border-radius: 3px;
+	--input-focus-border-clr: #999;
+
+/* TABLES */
+	--tr-hover-bg-clr: #f5f5f5;
+	--tr-odd-bg-clr: #f9f9f9; /* when striped */
+
+/* TABS */
+	--tab-active-bg-clr: #fff;
+	--tab-hover-border-clr: #eee;
+
 }

vendors/bootstrap/less/alerts.less

@@ -8,35 +8,35 @@
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: 1.43em;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: @warningBackground;
-  border: 1px solid @warningBorder;
+  background-color: var(--warning-bg-clr, #fcf8e3);
+  border: 1px solid var(--warning-border-clr, #fbeed5);
   border-radius: 4px;
-  color: @warningText;
+  color: var(--warning-clr, #c09853);
   max-width: 800px;
-  min-height: @baseLineHeight;
+  min-height: 1.43em;
 }
 
 // Adjust close link position
 .alert .close {
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
 }
 
 
 // Alternate styles
 // -------------------------
 
 .alert-error {
-  background-color: @errorBackground;
-  border-color: @errorBorder;
-  color: @errorText;
+  background-color: var(--error-bg-clr, #f2dede);
+  border-color: var(--error-border-clr, #eed3d7);
+  color: var(--error-clr, #b94a48);
 }
 .alert-info {
-  background-color: @infoBackground;
-  border-color: @infoBorder;
-  color: @infoText;
+  background-color: var(--info-bg-clr, #d9edf7);
+  border-color: var(--info-border-clr, #bce8f1);
+  color: var(--info-clr, #3a87ad);
 }

vendors/bootstrap/less/buttons.less

@@ -12,16 +12,16 @@
 
   display: inline-block;
   padding: 4px 12px;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid @btnBorder;
+  border: 1px solid var(--btn-border-clr, #bbb);
   border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  color: @grayDark;
+  color: var(--btn-clr, #333);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @btnBackground;
+  background-color: var(--btn-bg-clr, #fff);
   text-decoration: none;
 
   // Hover state
@@ -94,16 +94,16 @@
 // Warning appears are orange
 .btn-warning {
   color: #fff;
-  background-color: @btnWarningBackground;
+  background-color: #fbb450;
 }
 // Danger and error appear as red
 .btn-danger {
   color: #fff;
-  background-color: @btnDangerBackground;
+  background-color: var(--btn-danger-bg-clr, #ee5f5b);
 }
 // Success appears as green
 .btn-success {
-  background-color: @btnSuccessBackground;
+  background-color: var(--btn-success-bg-clr, #84AB04);
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }

vendors/bootstrap/less/close.less

@@ -7,7 +7,7 @@
   float: right;
   font-size: 143%;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   color: inherit;
   cursor: pointer;
   text-decoration: none;

vendors/bootstrap/less/code.less

@@ -22,8 +22,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight / 2);
-  margin: 0 0 (@baseLineHeight / 2);
+  padding: 0.715em;
+  margin: 0 0 0.715em;
   white-space: pre-wrap;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 4px;

vendors/bootstrap/less/dropdowns.less

@@ -17,15 +17,15 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: @zindexDropdown;
+  z-index: 1000;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
   color: var(--dropdown-menu-color, inherit);
-  background-color: var(--dropdown-menu-bg-color, @dropdownBackground);
-  border: 1px solid @dropdownBorder;
+  background-color: var(--dropdown-menu-bg-color, #fff);
+  border: 1px solid rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   background-clip: padding-box;
 
@@ -38,7 +38,7 @@
   // Links within the dropdown menu
   a {
     background-color: var(--dropdown-menu-bg-color, #fff);
-    color: var(--dropdown-menu-color, @dropdownLinkColor);
+    color: var(--dropdown-menu-color, #333);
     display: block;
     padding: 3px 10px;
     text-decoration: none;
@@ -60,7 +60,7 @@
 // Gray out text and ensure the hover state remains gray
 .dropdown-menu .disabled > a,
 .dropdown-menu .disabled > a:hover {
-  color: @grayLight;
+  color: #999;
   cursor: not-allowed;
   opacity: 0.5;
 }