diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index 595523fb73..da74abdcb4 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -8,6 +8,7 @@ :root { --MAIN-TEXT-color: #323232; /* Color of text by default */ --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-HOVER-color: #167ad0; /* Color of hovered links */ --MAIN-BG-color: #ffffff; /* color of text by default */ diff --git a/static/css/theme-green.css b/static/css/theme-green.css index eacee1e513..6eb43db03d 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -8,6 +8,7 @@ :root { --MAIN-TEXT-color: #323232; /* Color of text by default */ --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-HOVER-color: #3f6d2c; /* Color of hovered links */ --MAIN-BG-color: #ffffff; /* color of text by default */ diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css index 75a1afdf3f..ed63dacd86 100644 --- a/static/css/theme-learn.css +++ b/static/css/theme-learn.css @@ -8,6 +8,7 @@ :root { --MAIN-TEXT-color: #323232; /* Color of text by default */ --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-HOVER-color: #0082a7; /* Color of hovered links */ --MAIN-BG-color: #ffffff; /* color of text by default */ diff --git a/static/css/theme-red.css b/static/css/theme-red.css index 79abc73e1f..d824725a7e 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -8,6 +8,7 @@ :root { --MAIN-TEXT-color: #323232; /* Color of text by default */ --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-HOVER-color: #d01616; /* Color of hovered links */ --MAIN-BG-color: #ffffff; /* color of text by default */ diff --git a/static/css/variant.css b/static/css/variant.css index 8f859439b4..18a018a3e7 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -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-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-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color)); --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-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)); @@ -64,7 +65,7 @@ --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-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-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 )); diff --git a/static/js/variant.js b/static/js/variant.js index 19a9deafac..59e343e665 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -441,6 +441,7 @@ var variants = { }.bind( this ) ); this.styleGraphGroup( '#maincontent', '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( '#blockcode', 'CODE-BLOCK-BG-color' ); this.styleGraphGroup( '#thirdparty', 'MAIN-BG-color' ); @@ -499,13 +500,17 @@ var variants = { ' direction LR\n' + g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + ' end\n' + - ' subgraph inlinecode["inline code"]\n' + - ' direction LR\n' + - g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' subgraph blockcode["code blocks"]\n' + - ' direction LR\n' + - g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + + ' 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' + + ' direction LR\n' + + g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + + ' end\n' + + ' subgraph blockcode["code blocks"]\n' + + ' direction LR\n' + + g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + + ' end\n' + ' end\n' + ' subgraph thirdparty["3rd party"]\n' + ' direction LR\n' + @@ -527,13 +532,14 @@ var variants = { { 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: '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-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: '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-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', }, @@ -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-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: '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-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-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color', tooltip: 'background color of info boxes', },