variant: minor color adjustments #402

This commit is contained in:
Sören Weber 2022-11-22 19:15:27 +01:00
parent cdbb1a8ee7
commit e5c52b992b
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
6 changed files with 25 additions and 14 deletions

View file

@ -8,6 +8,7 @@
:root { :root {
--MAIN-TEXT-color: #323232; /* Color of text by default */ --MAIN-TEXT-color: #323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-TITLES-H1-color: #222222; /* text color of h1 titles */
--MAIN-LINK-color: #1c90f3; /* Color of links */ --MAIN-LINK-color: #1c90f3; /* Color of links */
--MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
--MAIN-BG-color: #ffffff; /* color of text by default */ --MAIN-BG-color: #ffffff; /* color of text by default */

View file

@ -8,6 +8,7 @@
:root { :root {
--MAIN-TEXT-color: #323232; /* Color of text by default */ --MAIN-TEXT-color: #323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-TITLES-H1-color: #222222; /* text color of h1 titles */
--MAIN-LINK-color: #599a3e; /* Color of links */ --MAIN-LINK-color: #599a3e; /* Color of links */
--MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */
--MAIN-BG-color: #ffffff; /* color of text by default */ --MAIN-BG-color: #ffffff; /* color of text by default */

View file

@ -8,6 +8,7 @@
:root { :root {
--MAIN-TEXT-color: #323232; /* Color of text by default */ --MAIN-TEXT-color: #323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-TITLES-H1-color: #222222; /* text color of h1 titles */
--MAIN-LINK-color: #00bdf3; /* Color of links */ --MAIN-LINK-color: #00bdf3; /* Color of links */
--MAIN-LINK-HOVER-color: #0082a7; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #0082a7; /* Color of hovered links */
--MAIN-BG-color: #ffffff; /* color of text by default */ --MAIN-BG-color: #ffffff; /* color of text by default */

View file

@ -8,6 +8,7 @@
:root { :root {
--MAIN-TEXT-color: #323232; /* Color of text by default */ --MAIN-TEXT-color: #323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-TITLES-H1-color: #222222; /* text color of h1 titles */
--MAIN-LINK-color: #f31c1c; /* Color of links */ --MAIN-LINK-color: #f31c1c; /* Color of links */
--MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */
--MAIN-BG-color: #ffffff; /* color of text by default */ --MAIN-BG-color: #ffffff; /* color of text by default */

View file

@ -4,12 +4,13 @@
--INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */ --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-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, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */ --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-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
--INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff); --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
--INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
--INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, var(--INTERNAL-MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color)); --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color)); --INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color)); --INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color));
@ -64,7 +65,7 @@
--INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 )); --INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
--INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 )); --INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, rgba( 16, 16, 16, 1 )); --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, var(--INTERNAL-MAIN-TEXT-color));
--INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 )); --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
--INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 )); --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));

View file

@ -441,6 +441,7 @@ var variants = {
}.bind( this ) ); }.bind( this ) );
this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' ); this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' );
this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' ); this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' );
this.styleGraphGroup( '#code', 'CODE-BLOCK-BG-color' );
this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' ); this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' );
this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' ); this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' );
this.styleGraphGroup( '#thirdparty', 'MAIN-BG-color' ); this.styleGraphGroup( '#thirdparty', 'MAIN-BG-color' );
@ -499,6 +500,9 @@ var variants = {
' direction LR\n' + ' direction LR\n' +
g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
' end\n' + ' end\n' +
' subgraph code["code"]\n' +
' direction TB\n' +
g_groups[ 'code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
' subgraph inlinecode["inline code"]\n' + ' subgraph inlinecode["inline code"]\n' +
' direction LR\n' + ' direction LR\n' +
g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
@ -507,6 +511,7 @@ var variants = {
' direction LR\n' + ' direction LR\n' +
g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
' end\n' + ' end\n' +
' end\n' +
' subgraph thirdparty["3rd party"]\n' + ' subgraph thirdparty["3rd party"]\n' +
' direction LR\n' + ' direction LR\n' +
g_groups[ '3rd party' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + g_groups[ '3rd party' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
@ -527,13 +532,14 @@ var variants = {
{ name: 'PRIMARY-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'brand primary color', }, { name: 'PRIMARY-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'brand primary color', },
{ name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary 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', fallback: 'SECONDARY-color', 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-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content', },
{ name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', }, { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', },
{ name: 'TAG-BG-color', group: 'content', fallback: 'PRIMARY-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-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles', },
{ name: 'MAIN-TITLES-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', 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', }, { name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', },
{ name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', }, { name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', },
{ name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color', tooltip: 'text color of h3-h6 titles', }, { name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color', tooltip: 'text color of h3-h6 titles', },
@ -559,7 +565,7 @@ var variants = {
{ name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', }, { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', },
{ name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', }, { name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', },
{ name: 'CODE-font', group: 'content', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', }, { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', },
{ 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: '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: 'SWAGGER-theme', group: '3rd party', default: 'light', tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },
@ -583,7 +589,7 @@ var variants = {
{ name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles', }, { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles', },
{ name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes', }, { name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes', },
{ name: 'BOX-TEXT-color', group: 'colored boxes', default: 'rgba( 16, 16, 16, 1 )', tooltip: 'text color of colored box content', }, { name: 'BOX-TEXT-color', group: 'colored boxes', fallback: 'MAIN-TEXT-color', tooltip: 'text color of colored box content', },
{ name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )', tooltip: 'background color of blue boxes', }, { name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )', tooltip: 'background color of blue boxes', },
{ name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color', tooltip: 'background color of info boxes', }, { name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color', tooltip: 'background color of info boxes', },