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

Switch to drop shadow with active card frame

Browse Source
This commit is contained in:
Tetrakern 2024-03-04 15:43:51 +01:00
parent 5996830042
commit 2d898b9798
3 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,7 +153,7 @@ function fictioneer_add_light_mode_customizer_settings( $manager ) {
array(
'title' => __( 'Light Mode Colors', 'fictioneer' ),
'description' => __( 'Color scheme for the light mode. If you want to add custom CSS, this needs to be under <code>:root[data-mode="light"]</code>.', 'fictioneer' ),
'priority' => '84'
'priority' => '83'
)
);
@ -362,7 +362,7 @@ function fictioneer_add_light_mode_customizer_settings( $manager ) {
),
'light_bg_300' => array(
'label' => __( 'Light Background 300', 'fictioneer' ),
'description' => __( 'Used for tabs, pagination numbers, navigation item hovers, navigation submenus, overlays, secondary button hovers, &ltkbd> elements, and barber pole animations.', 'fictioneer' )
'description' => __( 'Used for tabs, pagination numbers, navigation item hovers, navigation submenus, overlays, secondary button hovers, &ltkbd> elements, card frame borders, and barber pole animations.', 'fictioneer' )
),
'light_bg_400' => array(
'label' => __( 'Light Background 400', 'fictioneer' ),
@ -440,6 +440,10 @@ function fictioneer_add_light_mode_customizer_settings( $manager ) {
'label' => __( 'Light Foreground Inverted', 'fictioneer' ),
'description' => __( 'Light text color for dark backgrounds. Default contrast ~17.3:1 on BG-900.', 'fictioneer' )
),
'light_card_frame' => array(
'label' => __( 'Light Card Frame', 'fictioneer' ),
'description' => __( 'Color for some card frame borders and divider lines. Based on BG-300 by default.', 'fictioneer' )
),
'light_theme_color_base' => array(
'label' => __( 'Light Theme Color Meta', 'fictioneer' ),
'description' => __( 'Used by some browsers for the interface background color. Based on BG-300 by default.', 'fictioneer' )
@ -569,7 +573,7 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
array(
'title' => __( 'Dark Mode Colors', 'fictioneer' ),
'description' => __( 'Color scheme for the dark mode. <b>Warning:</b> Looking at light text on dark background for a prolonged period of time causes immense eye strain! Try to keep the main text contrast between 5:1 and 7:1 to alleviate the issue.', 'fictioneer' ),
'priority' => '83'
'priority' => '84'
)
);
@ -799,7 +803,7 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
),
'dark_bg_800' => array(
'label' => __( 'Dark Background 800', 'fictioneer' ),
'description' => __( 'Used for the site, &ltkbd> elements, card footers and overlays, and info boxes.', 'fictioneer' )
'description' => __( 'Used for the site, &ltkbd> elements, card footers and overlays, info boxes, and card frame borders.', 'fictioneer' )
),
'dark_bg_900' => array(
'label' => __( 'Dark Background 900', 'fictioneer' ),
@ -861,6 +865,10 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
'label' => __( 'Dark Foreground Inverted', 'fictioneer' ),
'description' => __( 'Dark text color for bright backgrounds. Default contrast ~4.5:1 on BG-200.', 'fictioneer' )
),
'dark_card_frame' => array(
'label' => __( 'Dark Card Frame', 'fictioneer' ),
'description' => __( 'Color for some card frame borders and divider lines. Based on BG-800 by default.', 'fictioneer' )
),
'dark_theme_color_base' => array(
'label' => __( 'Dark Theme Color Meta', 'fictioneer' ),
'description' => __( 'Used by some browsers for the interface background color. Based on BG-800 by default.', 'fictioneer' )
@ -1614,7 +1622,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'priority' => 10,
'section' => 'layout',
'label' => __( 'Card Frame', 'fictioneer' ),
'description' => __( 'Choose the frame for your cards.', 'fictioneer' ),
'description' => __( 'Choose the frame for your cards. Turn off the card shadow if borders get blurry.', 'fictioneer' ),
'choices' => apply_filters( 'fictioneer_filter_customizer_card_frame', $card_frames )
)
);

6
includes/functions/_customizer.php
View File

@ -828,6 +828,7 @@ function fictioneer_build_customize_css( $context = null ) {
}, ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] ) )
.
"
--card-frame-border-color: " . fictioneer_hsl_code( fictioneer_get_theme_color( 'dark_card_frame' ) ) . ";
--dark-shade-rgb:" . implode( ' ', $dark_shade ) . ";
--primary-400: " . fictioneer_get_theme_color( 'dark_primary_400' ) . ";
--primary-500: " . fictioneer_get_theme_color( 'dark_primary_500' ) . ";
@ -877,6 +878,7 @@ function fictioneer_build_customize_css( $context = null ) {
}, ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] ) )
.
"
--card-frame-border-color: " . fictioneer_hsl_code( fictioneer_get_theme_color( 'light_card_frame' ) ) . ";
--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' ) . ";
@ -972,6 +974,10 @@ function fictioneer_build_customize_css( $context = null ) {
// --- Card frames -----------------------------------------------------------
if ( $card_frame !== 'default' ) {
$css .= '.card{filter:var(--card-drop-shadow);}';
}
if ( in_array( $card_frame, ['stacked_right', 'stacked_left', 'stacked_random'] ) ) {
$css .= fictioneer_get_customizer_css_snippet( 'card-frame-stacked' );

8
includes/functions/colors.json
View File

@ -99,6 +99,10 @@
"hex": "#fcfcfd",
"hsl": [210, 20, 99]
},
"light_card_frame": {
"hex": "#e5e8eb",
"hsl": [210, 13, 91]
},
"light_primary_400": {
"hex": "#6ea2f7",
"hsl": [217, 90, 70]
@ -299,6 +303,10 @@
"hex": "#0a0c0f",
"hsl": [222, 20, 5]
},
"dark_card_frame": {
"hex": "#252932",
"hsl": [219, 15, 17]
},
"dark_primary_400": {
"hex": "#f7dd88",
"hsl": [46, 87, 75]