Fix #135

assets/css/editor-rtl.css

@@ -2,6 +2,10 @@
 /**
  * Global
  */
+html {
+ font-size: 16px;
+}
+
 body {
  --color-palette-1: #222222;
  --color-palette-2: #444444;

assets/css/editor.css

@@ -2,6 +2,10 @@
 /**
  * Global
  */
+html {
+ font-size: 16px;
+}
+
 body {
  --color-palette-1: #222222;
  --color-palette-2: #444444;

assets/css/main-rtl.css

@@ -2,6 +2,10 @@
 /**
  * Global
  */
+html {
+ font-size: 16px;
+}
+
 body {
  --color-palette-1: #222222;
  --color-palette-2: #444444;

assets/css/main.css

@@ -2,6 +2,10 @@
 /**
  * Global
  */
+html {
+ font-size: 16px;
+}
+
 body {
  --color-palette-1: #222222;
  --color-palette-2: #444444;

includes/admin/class-suki-admin.php

@@ -171,10 +171,10 @@ public function add_block_editor_dynamic_css__controls() {
 
  $css_array = array();
 
- // Add color palette CSS.
- for ( $i = 1; $i <= 8; $i++ ) {
-  $css_array['global']['.block-editor'][ '--color-palette-' . $i ] = suki_get_theme_mod( 'color_palette_' . $i );
- }
+ // TODO: add rem responsive value and responsive sidebar visual preview.
+
+ // Add rem value CSS.
+ $css_array['global']['html']['font-size'] = suki_get_theme_mod( 'body_font_size', '16px' );
 
  // Add sidebar CSS.
  $css_array['global']['.editor-styles-wrapper']['--sidebar-width'] = suki_get_theme_mod( 'sidebar_width', '25%' );

includes/customizer/outputs.php

@@ -75,6 +75,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'body_' . $prop . '__tablet' ] = array(
  array(
@@ -84,6 +86,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'body_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -95,6 +98,29 @@
  }
 }
 
+// Change `rem` value.
+$add['body_font_size'][] = array(
+ 'type' => 'css',
+ 'element' => 'html',
+ 'property' => 'font-size',
+);
+
+// Change `rem` value in tablet.
+$add['body_font_size__tablet'][] = array(
+ 'type' => 'css',
+ 'element' => 'html',
+ 'property' => 'font-size',
+ 'media' => '@media screen and (max-width: 1023px)',
+);
+
+// Change `rem` value in mobile.
+$add['body_font_size__mobile'][] = array(
+ 'type' => 'css',
+ 'element' => 'html',
+ 'property' => 'font-size',
+ 'media' => '@media screen and (max-width: 499px)',
+);
+
 $add['body_text_color'] = array(
  array(
  'type' => 'css',
@@ -166,6 +192,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'h' . $i . '_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -211,6 +238,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'blockquote_' . $prop . '__tablet' ] = array(
  array(
@@ -220,6 +249,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'blockquote_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -364,6 +394,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'title_' . $prop . '__tablet' ] = array(
  array(
@@ -373,6 +405,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'title_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -417,6 +450,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'small_title_' . $prop . '__tablet' ] = array(
  array(
@@ -426,6 +461,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'small_title_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -470,6 +506,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'meta_' . $prop . '__tablet' ] = array(
  array(
@@ -479,6 +517,7 @@
  'media' => '@media screen and (max-width: 1023px)',
  ),
  );
+
  $add[ 'meta_' . $prop . '__mobile' ] = array(
  array(
  'type' => 'css',
@@ -735,6 +774,7 @@
  ),
  );
 
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'sidebar_' . $prop . '__tablet' ] = array(
  array(
@@ -865,6 +905,8 @@
  'property' => $property,
  ),
  );
+
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'hero_title_' . $prop . '__tablet' ] = array(
  array(
@@ -897,6 +939,7 @@
  ),
  );
 
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'hero_' . $prop . '__tablet' ] = array(
  array(
@@ -930,6 +973,7 @@
  ),
  );
 
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'hero_breadcrumb_' . $prop . '__tablet' ] = array(
  array(
@@ -1705,6 +1749,7 @@
  ),
  );
 
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'footer_widgets_bar_' . $prop . '__tablet' ] = array(
  array(
@@ -1831,6 +1876,7 @@
  ),
  );
 
+ // Responsive.
  if ( in_array( $prop, array( 'font_size', 'line_height', 'letter_spacing' ), true ) ) {
  $add[ 'footer_bottom_bar_' . $prop . '__tablet' ] = array(
  array(

src/sass/base/_global.scss

@@ -2,6 +2,10 @@
  * Global
  */
 
+html {
+ font-size: 16px; // Default rem value.
+}
+
 body { // Use body not :root, because this CSS will be used on block editor as well (converted to .editor-styles-wrapper)
  // Color palette (default)
  --color-palette-1: #222222;