variant: add primary and secondary color variables #239

static/css/theme-blue.css

@@ -8,9 +8,9 @@
 :root {
     --MAIN-TEXT-color: #323232; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #1C90F3; /* Color of links */
+    --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
     --MAIN-BG-color: #ffffff; /* color of text by default */
 
     /* adjusted to base16-snazzy chroma style */
@@ -25,7 +25,7 @@
     --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
     --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
 
-    --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */
+    --MENU-HEADER-BG-color: #1c90f3; /* Background color of menu header */
     --MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */
 
     --MENU-SEARCH-color: #ffffff; /* Color of search field text */
@@ -39,7 +39,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
 
-    --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
+    --MENU-VISITED-color: #1c90f3; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
 
     /* base styling for boxes */

static/css/theme-neon.css

@@ -15,7 +15,7 @@
 
     --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to neon chroma style */

static/css/theme-red.css

@@ -39,7 +39,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
 
-    --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
+    --MENU-VISITED-color: #f31c1c; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
 
     /* base styling for boxes */

static/css/theme-relearn-dark.css

@@ -8,9 +8,9 @@
 :root {
     --MAIN-TEXT-color: #e0e0e0; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #1c90f3; /* Color of links */
+    --MAIN-LINK-color: #6c8ce3; /* Color of links */
-    --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
+    --MAIN-LINK-HOVER-color: #93b0ff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #6c8ce3; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to relearn-dark chroma style */
@@ -42,7 +42,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-color: #82e550; /* Color of active category text */
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */
 
-    --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
+    --MENU-VISITED-color: #486ac9; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
 
     /* base styling for boxes */

static/css/theme-relearn-light.css

@@ -9,8 +9,8 @@
     --MAIN-TEXT-color: #101010; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #4a4a4a; /* Color of titles h2-h3-h4-h5-h6 */
     --MAIN-LINK-color: #486ac9; /* Color of links */
-    --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
+    --MAIN-LINK-HOVER-color: #202891; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #134fbf; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
     --MAIN-BG-color: #ffffff; /* color of text by default */
 
     /* adjusted to relearn-light chroma style */
@@ -39,7 +39,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
 
-    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
+    --MENU-VISITED-color: #486ac9; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
 
     /* base styling for boxes */

static/css/theme.css

@@ -331,7 +331,7 @@ th {
 }
 
 #sidebar ul li.visited > a .read-icon {
-    color: #506397; /* var(--MENU-VISITED-color) */
+    color: #486ac9; /* var(--MENU-VISITED-color) */
     display: inline;
 }
 
@@ -1399,7 +1399,7 @@ option {
 
 /* anchors */
 .anchor {
-    color: #134fbf; /* var(--MAIN-ANCHOR-color) */
+    color: #486ac9; /* var(--MAIN-ANCHOR-color) */
     cursor: pointer;
     font-size: .5em;
     margin-left: .66em;

static/css/variant.css

@@ -1,9 +1,14 @@
 :root {
+    /* initially use section background to avoid flickering on load when a non default variant is active;
+    this is only possible because every color variant defines this variable, otherwise we would have been lost */
+    --INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */
+    --INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, #486ac9)); /* not --INTERNAL-MAIN-LINK-color */
+
     --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
     --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #4a4a4a);
-    --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
+    --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */
     --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
-    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-HOVER-color));
+    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-color));
     --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
 
     --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
@@ -36,11 +41,9 @@
     --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default));
     --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light));
 
-    --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-MENU-HEADER-BG-color));
+    --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color));
 
-    /* initially use section background to avoid flickering on load when a non default variant is active;
+    --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */
-    this is only possible because every color variant defines this variable, otherwise we would have been lost */
-    --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ));
     --INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color));
 
     --INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, #323232);
@@ -57,7 +60,7 @@
     --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444);
     --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color));
 
-    --INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, #506397);
+    --INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color));
     --INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, #606060);
 
     --INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));

static/js/variant.js

@@ -243,7 +243,6 @@ var variants = {
 	},
 
 	download: function(data, mimetype, filename){
-		console.log( data );
 		var blob = new Blob([data], { type: mimetype });
 		var url = window.URL.createObjectURL(blob);
 		var a = document.createElement('a');
@@ -320,6 +319,12 @@ var variants = {
 		return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
 	},
 
+	getColorProperty: function( c, read_style ){
+		var e = this.findColor( c );
+		var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
+		return p;
+	},
+
 	findLoadedStylesheet: function( id ){
 		var style = null;
 		for( var n = 0; n < document.styleSheets.length; ++n ){
@@ -338,7 +343,8 @@ var variants = {
 	},
 
 	changeColor: function( c, without_prompt ){
-		without_prompt = without_prompt || false;
+		var with_prompt = !(without_prompt || false);
+
 		var read_style = this.findLoadedStylesheet( 'custom-variant-style' );
 		var write_style = this.findLoadedStylesheet( 'variant-style' );
 		if( !read_style ){
@@ -346,46 +352,40 @@ var variants = {
 		}
 
 		var e = this.findColor( c );
-		var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
+		var v = this.getColorProperty( c, read_style );
-		var f = this.getColorValue( e.fallback );
-
-		var v = this.getColorValue( e.name );
-		if( v == f || v == this.normalizeColor(e.default) ){
-			v = '';
-		}
-		if( p ){
-			v = p;
-		}
-
 		var n = '';
-		if( without_prompt ){
+		if( !with_prompt ){
 			n = v;
 		}
 		else{
 			var t = c + '\n\n' + e.tooltip + '\n';
 			if( e.fallback ){
-				t += '\nInherits value "' + f + '" from ' + e.fallback + ' if not set\n';
+				t += '\nInherits value "' + this.getColorValue(e.fallback) + '" from ' + e.fallback + ' if not set\n';
 			}
-			if( e.default ){
+			else if( e.default ){
 				t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
 			}
 			n = prompt( t, v );
+			if( n === null ){
+				// user canceld operation
+				return;
+			}
 		}
 
 		if( n ){
+			// value set to specific value
 			n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' );
-			if( without_prompt || n != v ){
+			if( !with_prompt || n != v ){
 				write_style.setProperty( '--'+c, n );
 			}
-			if( !without_prompt ){
-				this.saveCustomVariant();
-			}
 		}
-		else if( n !== null){
+		else{
+			// value emptied, so delete it
 			write_style.removeProperty( '--'+c );
-			if( !without_prompt ){
+		}
-				this.saveCustomVariant();
+
-			}
+		if( with_prompt ){
+			this.saveCustomVariant();
 		}
 	},
 
@@ -396,28 +396,28 @@ var variants = {
 		return f;
 	},
 
-	generateColorVariable: function( e ){
+	generateColorVariable: function( e, read_style ){
 		var v = '';
-		var gen = true;
+		var gen = this.getColorProperty( e.name, read_style );
-		if( e.fallback ){
-			f = this.findColor( e.fallback );
-			gen = this.getColorValue(f.name) != this.getColorValue(e.name);
-		}
-		else if( e.default ){
-			gen = this.normalizeColor(e.default) != this.getColorValue(e.name);
-		}
 		if( gen ){
-			v += '  --' + e.name + ': ' + this.getColorValue(e.name) + '; /* ' + e.tooltip + ' */\n';
+			v += '  --' + e.name + ': ' + gen + '; /* ' + e.tooltip + ' */\n';
 		}
 		return v;
 	},
 
 	generateStylesheet: function(){
+		var read_style = this.findLoadedStylesheet( 'custom-variant-style' );
+		var write_style = this.findLoadedStylesheet( 'variant-style' );
+		if( !read_style ){
+			read_style = write_style;
+		}
+
 		var style =
 			'/* ' + this.customvariantname + ' */\n' +
 			':root {\n' +
-			this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e ); }.bind( this ), '' ) +
+			this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e, read_style ); }.bind( this ), '' ) +
 			'}\n';
+		console.log( style );
 		return style;
 	},
 
@@ -517,12 +517,15 @@ var variants = {
 	},
 
 	variantvariables: [
+		{ name: 'PRIMARY-color',                         group: 'content',        default: '#7dc903',                     tooltip: 'brand primary color', },
+		{ name: 'SECONDARY-color',                       group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'brand secondary color', },
+
 		{ name: 'MAIN-TEXT-color',                       group: 'content',        default: '#101010',                     tooltip: 'text color of content and h1 titles', },
-		{ name: 'MAIN-LINK-color',                       group: 'content',        default: '#486ac9',                     tooltip: 'link color of content', },
+		{ name: 'MAIN-LINK-color',                       group: 'content',       fallback: 'SECONDARY-color',             tooltip: 'link color of content', },
 		{ name: 'MAIN-LINK-HOVER-color',                 group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'hoverd link color of content', },
-		{ name: 'MAIN-ANCHOR-color',                     group: 'content',       fallback: 'MAIN-LINK-HOVER-color',       tooltip: 'anchor color of titles', },
+		{ name: 'MAIN-ANCHOR-color',                     group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'anchor color of titles', },
 		{ name: 'MAIN-BG-color',                         group: 'content',        default: '#ffffff',                     tooltip: 'background color of content', },
-		{ name: 'TAG-BG-color',                          group: 'content',       fallback: 'MENU-HEADER-BG-color',        tooltip: 'tag color', },
+		{ name: 'TAG-BG-color',                          group: 'content',       fallback: 'PRIMARY-color',               tooltip: 'tag color', },
 
 		{ name: 'MAIN-TITLES-TEXT-color',                group: 'headings',       default: '#4a4a4a',                     tooltip: 'text color of h2-h6 titles and transparent box titles', },
 		{ name: 'MAIN-TITLES-H1-color',                  group: 'headings',      fallback: 'MAIN-TEXT-color',             tooltip: 'text color of h1 titles', },
@@ -555,7 +558,7 @@ var variants = {
 		{ name: 'MERMAID-theme',                         group: '3rd party',      default: 'default',                     tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', },
 		{ name: 'SWAGGER-theme',                         group: '3rd party',      default: 'light',                       tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },
 
-		{ name: 'MENU-HEADER-BG-color',                  group: 'header',         default: '#7dc903',                     tooltip: 'background color of menu header', },
+		{ name: 'MENU-HEADER-BG-color',                  group: 'header',        fallback: 'PRIMARY-color',               tooltip: 'background color of menu header', },
 		{ name: 'MENU-HEADER-BORDER-color',              group: 'header',        fallback: 'MENU-HEADER-BG-color',        tooltip: 'separator color of menu header', },
 		{ name: 'MENU-HOME-LINK-color',                  group: 'header',         default: '#323232',                     tooltip: 'home button color if configured', },
 		{ name: 'MENU-HOME-LINK-HOVER-color',            group: 'header',         default: '#808080',                     tooltip: 'hoverd home button color if configured', },
@@ -569,7 +572,7 @@ var variants = {
 		{ name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections',      fallback: 'MAIN-BG-color',               tooltip: 'background color of the displayed menu topic', },
 		{ name: 'MENU-SECTIONS-LINK-color',              group: 'sections',       default: '#bababa',                     tooltip: 'link color of menu topics', },
 		{ name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections',      fallback: 'MENU-SECTIONS-LINK-color',    tooltip: 'hoverd link color of menu topics', },
-		{ name: 'MENU-VISITED-color',                    group: 'sections',       default: '#506397',                     tooltip: 'icon color of visited menu topics if configured', },
+		{ name: 'MENU-VISITED-color',                    group: 'sections',      fallback: 'SECONDARY-color',             tooltip: 'icon color of visited menu topics if configured', },
 		{ name: 'MENU-SECTION-HR-color',                 group: 'sections',       default: '#606060',                     tooltip: 'separator color of menu footer', },
 
 		{ name: 'BOX-CAPTION-color',                     group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )',    tooltip: 'text color of colored box titles', },