malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Improve light mode color procedures

Browse Source
This commit is contained in:
Tetrakern 2024-03-01 02:42:46 +01:00
parent 8aa8988276
commit 255e833c71
8 changed files with 455 additions and 1091 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

1242
includes/functions/_customizer-settings.php
View File

File diff suppressed because it is too large Load Diff

96
includes/functions/_customizer.php
View File

@ -584,7 +584,7 @@ function fictioneer_get_customizer_css_snippet( $snippet, $filter = null ) {
* @param string $mod The requested theme color.
* @param string|null $default Optional. Default color code.
*
* @return string The requested color code or 'tomato' if not found.
* @return string The requested color code or '#ff6347' (tomato) if not found.
*/
function fictioneer_get_theme_color( $mod, $default = null ) {
@ -592,14 +592,14 @@ function fictioneer_get_theme_color( $mod, $default = null ) {
if ( empty( $fictioneer_colors ) && ! is_array( $fictioneer_colors ) ) {
$json_path = get_template_directory() . '/includes/functions/colors.json';
$fictioneer_colors = @json_decode( file_get_contents( $json_path ), true );
$fictioneer_colors = json_decode( file_get_contents( $json_path ), true );
if ( ! is_array( $fictioneer_colors ) ) {
$fictioneer_colors = [];
}
}
$default = $default ?? $fictioneer_colors[ $mod ]['hex'] ?? 'tomato';
$default = $default ?? $fictioneer_colors[ $mod ]['hex'] ?? '#ff6347'; // Tomato
return get_theme_mod( $mod, $default );
}
@ -887,58 +887,44 @@ function fictioneer_build_customize_css( $content = null ) {
}
if ( get_theme_mod( 'use_custom_light_mode', false ) ) {
$css .= ":root[data-mode=light] {
--bg-200-free: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_200', '#e5e7eb' ), 'free' ) . ";
--bg-1000-free: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_1000', '#111827' ), 'free' ) . ";
--bg-10: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_10', '#fcfcfd' ) ) . ";
--bg-50: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_50', '#f9fafb' ) ) . ";
--bg-100: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_100', '#f3f4f6' ) ) . ";
--bg-300: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_300', '#d1d5db' ) ) . ";
--bg-400: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_400', '#9ca3b0' ) ) . ";
--bg-500: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_500', '#6b7280' ) ) . ";
--bg-600: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_600', '#4b5563' ) ) . ";
--bg-700: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_700', '#384252' ) ) . ";
--bg-800: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_800', '#1f2937' ) ) . ";
--bg-900: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_900', '#111827' ) ) . ";
--theme-color-base: " . fictioneer_hsl_code( get_theme_mod( 'light_theme_color_base', '#f3f4f6' ), 'values' ) . ";
--navigation-background: " . fictioneer_hsl_code( get_theme_mod( 'light_navigation_background_sticky', '#fcfcfd' ) ) . ";
--primary-400: " . get_theme_mod( 'light_primary_400', '#75a4f0' ) . ";
--primary-500: " . get_theme_mod( 'light_primary_500', '#3c83f6' ) . ";
--primary-600: " . get_theme_mod( 'light_primary_600', '#1e3fae' ) . ";
--red-400: " . get_theme_mod( 'light_red_400', '#f98686' ) . ";
--red-500: " . get_theme_mod( 'light_red_500', '#f15b5b' ) . ";
--red-600: " . get_theme_mod( 'light_red_600', '#dd3c3c' ) . ";
--green-400: " . get_theme_mod( 'light_green_400', '#a4db8a' ) . ";
--green-500: " . get_theme_mod( 'light_green_500', '#72bd51' ) . ";
--green-600: " . get_theme_mod( 'light_green_600', '#5cac39' ) . ";
--bookmark-color-alpha: " . get_theme_mod( 'light_bookmark_color_alpha', '#9ca3b0' ) . ";
--bookmark-color-beta: " . get_theme_mod( 'light_bookmark_color_beta', '#f59e0b' ) . ";
--bookmark-color-gamma: " . get_theme_mod( 'light_bookmark_color_gamma', '#77bfa3' ) . ";
--bookmark-color-delta: " . get_theme_mod( 'light_bookmark_color_delta', '#dd5960' ) . ";
--bookmark-line: " . get_theme_mod( 'light_bookmark_line_color', '#3c83f6' ) . ";
--ins-background: " . get_theme_mod( 'light_ins_background', '#7ec945' ) . ";
--del-background: " . get_theme_mod( 'light_del_background', '#e96c63' ) . ";
--badge-generic-background: " . get_theme_mod( 'light_badge_generic_background', '#9ca3b0' ) . ";
--badge-moderator-background: " . get_theme_mod( 'light_badge_moderator_background', '#5369ac' ) . ";
--badge-admin-background: " . get_theme_mod( 'light_badge_admin_background', '#384252' ) . ";
--badge-author-background: " . get_theme_mod( 'light_badge_author_background', '#384252' ) . ";
--badge-supporter-background: " . get_theme_mod( 'light_badge_supporter_background', '#ed5e76' ) . ";
--badge-override-background: " . get_theme_mod( 'light_badge_override_background', '#9ca3b0' ) . ";
}
:root[data-mode=light],
:root[data-mode=light] .chapter-formatting {
--fg-100: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_100', '#010204' ) ) . ";
--fg-200: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_200', '#04060b' ) ) . ";
--fg-300: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_300', '#0a0f1a' ) ) . ";
--fg-400: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_400', '#111827' ) ) . ";
--fg-500: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_500', '#1f2937' ) ) . ";
--fg-600: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_600', '#384252' ) ) . ";
--fg-700: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_700', '#4b5563' ) ) . ";
--fg-800: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_800', '#6b7280' ) ) . ";
--fg-900: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_900', '#9ca3b0' ) ) . ";
--fg-950: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_950', '#f3f5f7' ) ) . ";
--fg-tinted: " . fictioneer_hsl_font_code( get_theme_mod( 'light_fg_tinted', '#2b3546' ) ) . ";
}";
$css .= ":root[data-mode=light] {"
.
implode( '', array_map( function( $prop ) {
return "--bg-{$prop}-free: " . fictioneer_hsl_code( fictioneer_get_theme_color( "light_bg_{$prop}" ), 'free' ) . ';';
}, ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] ) )
.
"
--primary-400: " . fictioneer_get_theme_color( 'light_primary_400' ) . ";
--primary-500: " . fictioneer_get_theme_color( 'light_primary_500' ) . ";
--primary-600: " . fictioneer_get_theme_color( 'light_primary_600' ) . ";
--red-400: " . fictioneer_get_theme_color( 'light_red_400' ) . ";
--red-500: " . fictioneer_get_theme_color( 'light_red_500' ) . ";
--red-600: " . fictioneer_get_theme_color( 'light_red_600' ) . ";
--green-400: " . fictioneer_get_theme_color( 'light_green_400' ) . ";
--green-500: " . fictioneer_get_theme_color( 'light_green_500' ) . ";
--green-600: " . fictioneer_get_theme_color( 'light_green_600' ) . ";
--theme-color-base: " . fictioneer_hsl_code( fictioneer_get_theme_color( 'light_theme_color_base' ), 'values' ) . ";
--navigation-background: " . fictioneer_hsl_code( fictioneer_get_theme_color( 'light_navigation_background_sticky' ) ) . ";
--bookmark-color-alpha: " . fictioneer_get_theme_color( 'light_bookmark_color_alpha' ) . ";
--bookmark-color-beta: " . fictioneer_get_theme_color( 'light_bookmark_color_beta' ) . ";
--bookmark-color-gamma: " . fictioneer_get_theme_color( 'light_bookmark_color_gamma' ) . ";
--bookmark-color-delta: " . fictioneer_get_theme_color( 'light_bookmark_color_delta' ) . ";
--bookmark-line: " . fictioneer_get_theme_color( 'light_bookmark_line_color' ) . ";
--ins-background: " . fictioneer_get_theme_color( 'light_ins_background' ) . ";
--del-background: " . fictioneer_get_theme_color( 'light_del_background' ) . ";"
.
implode( '', array_map( function( $prop ) {
return "--badge-{$prop}-background: " . fictioneer_get_theme_color( "light_badge_{$prop}_background" ) . ';';
}, ['generic', 'moderator', 'admin', 'author', 'supporter', 'override'] ) )
.
"}
:root[data-mode=light], :root[data-mode=light] .chapter-formatting {"
.
implode( '', array_map( function( $prop ) {
return "--fg-{$prop}: " . fictioneer_hsl_font_code( fictioneer_get_theme_color( "light_fg_{$prop}" ) ) . ';';
}, ['100', '200', '300', '400', '500', '600', '700', '800', '900', '950', 'tinted', 'inverted'] ) )
.
"}";
}
// --- Header styles ---------------------------------------------------------

196
includes/functions/colors.json
View File

@ -1,4 +1,200 @@
{
"light_header_title_color": {
"hex": "#111827",
"hsl": [221, 39, 11]
},
"light_header_tagline_color": {
"hex": "#111827",
"hsl": [221, 39, 11]
},
"light_bg_50": {
"hex": "#fcfcfd",
"hsl": [240, 20, 99]
},
"light_bg_100": {
"hex": "#f9fafb",
"hsl": [210, 20, 98]
},
"light_bg_200": {
"hex": "#f4f5f6",
"hsl": [210, 10, 96]
},
"light_bg_300": {
"hex": "#e5e8eb",
"hsl": [210, 13, 91]
},
"light_bg_400": {
"hex": "#d2d5db",
"hsl": [220, 11, 84]
},
"light_bg_500": {
"hex": "#9ca3b0",
"hsl": [219, 11, 65]
},
"light_bg_600": {
"hex": "#6b7280",
"hsl": [220, 9, 46]
},
"light_bg_700": {
"hex": "#4b5563",
"hsl": [215, 14, 34]
},
"light_bg_800": {
"hex": "#374151",
"hsl": [217, 19, 27]
},
"light_bg_900": {
"hex": "#1f2937",
"hsl": [215, 28, 17]
},
"light_bg_950": {
"hex": "#111827",
"hsl": [221, 39, 11]
},
"light_fg_100": {
"hex": "#010309",
"hsl": [225, 80, 2]
},
"light_fg_200": {
"hex": "#030712",
"hsl": [224, 71, 4]
},
"light_fg_300": {
"hex": "#080f1c",
"hsl": [220, 55, 7]
},
"light_fg_400": {
"hex": "#111827",
"hsl": [221, 39, 11]
},
"light_fg_500": {
"hex": "#1e2333",
"hsl": [225, 26, 16]
},
"light_fg_600": {
"hex": "#374151",
"hsl": [217, 19, 27]
},
"light_fg_700": {
"hex": "#595f6e",
"hsl": [223, 11, 39]
},
"light_fg_800": {
"hex": "#6b7280",
"hsl": [220, 9, 46]
},
"light_fg_900": {
"hex": "#8891a0",
"hsl": [218, 11, 58]
},
"light_fg_950": {
"hex": "#9ca3af",
"hsl": [218, 11, 65]
},
"light_fg_tinted": {
"hex": "#1e293b",
"hsl": [217, 33, 17]
},
"light_fg_inverted": {
"hex": "#fcfcfd",
"hsl": [210, 20, 99]
},
"light_primary_400": {
"hex": "#6ea2f7",
"hsl": [217, 90, 70]
},
"light_primary_500": {
"hex": "#3c83f6",
"hsl": [217, 91, 60]
},
"light_primary_600": {
"hex": "#1e3fae",
"hsl": [226, 71, 40]
},
"light_green_400": {
"hex": "#a4db8a",
"hsl": [101, 53, 70]
},
"light_green_500": {
"hex": "#72bd51",
"hsl": [102, 45, 53]
},
"light_green_600": {
"hex": "#5cac39",
"hsl": [102, 50, 45]
},
"light_red_400": {
"hex": "#f98686",
"hsl": [0, 91, 75]
},
"light_red_500": {
"hex": "#f15b5b",
"hsl": [0, 84, 65]
},
"light_red_600": {
"hex": "#dd3c3c",
"hsl": [0, 70, 55]
},
"light_theme_color_base": {
"hex": "#e5e8eb",
"hsl": [210, 13, 91]
},
"light_navigation_background_sticky": {
"hex": "#fcfcfd",
"hsl": [240, 20, 99]
},
"light_bookmark_color_alpha": {
"hex": "#9ca3b0",
"hsl": [219, 11, 65]
},
"light_bookmark_color_beta": {
"hex": "#f59e0b",
"hsl": [38, 92, 50]
},
"light_bookmark_color_gamma": {
"hex": "#77BFA3",
"hsl": [157, 36, 61]
},
"light_bookmark_color_delta": {
"hex": "#dd5960",
"hsl": [357, 66, 61]
},
"light_bookmark_line_color": {
"hex": "#3c83f6",
"hsl": [217, 91, 60]
},
"light_ins_background": {
"hex": "#a4db8a",
"hsl": [101, 53, 70]
},
"light_del_background": {
"hex": "#f98686",
"hsl": [0, 91, 75]
},
"light_badge_generic_background": {
"hex": "#71717a",
"hsl": [240, 4, 46]
},
"light_badge_admin_background": {
"hex": "#7c3aed",
"hsl": [262, 83, 58]
},
"light_badge_moderator_background": {
"hex": "#576eb2",
"hsl": [225, 37, 52]
},
"light_badge_author_background": {
"hex": "#f59e0b",
"hsl": [38, 92, 50]
},
"light_badge_supporter_background": {
"hex": "#ed5e76",
"hsl": [350, 80, 65]
},
"light_badge_override_background": {
"hex": "#64748b",
"hsl": [215, 16, 47]
},
"dark_header_title_color": {
"hex": "#c4cad6",
"hsl": [220, 18, 80]

4
src/scss/common/_lightmode.scss
View File

@ -1,7 +1,7 @@
:root[data-mode=light] {
// === UNSORTED ==============================================================
--theme-color-base: 220 13 91;
--theme-color-base: 210 13 91; // #e5e8eb
--body-bg-color: var(--bg-400);
--site-bg-color: var(--bg-200);
@ -54,7 +54,7 @@
// === COLORS ================================================================
--primary-400: hsl(217deg 90% 61%); // #75a4f0
--primary-400: hsl(217deg 90% 70%); // #6ea2f7
--primary-500: hsl(217deg 91% 60%); // #3c83f6
--primary-600: hsl(226deg 71% 40%); // #1e3fae

2
src/scss/common/_properties.scss
View File

@ -430,7 +430,7 @@
--button-secondary-background: transparent;
--button-secondary-background-hover: var(--bg-500);
--button-secondary-background-disabled: repeating-linear-gradient(-45deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 6%) 2px, transparent 2px, transparent 4px);
--button-secondary-color: var(--fg-500);
--button-secondary-color: var(--fg-600);
--button-secondary-color-hover: var(--fg-400);
--button-secondary-color-disabled: var(--fg-800);
--button-secondary-border: 1px solid var(--bg-300);