From 3567a3a9af40917cd86ffdf17872d85ca005e165 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 28 Apr 2022 16:32:02 +0530 Subject: [PATCH] Update default values --- plugin/assets/css/src/typography.css | 9 +- plugin/php/customizer/class-controls.php | 89 ++++++++++--------- .../php/customizer/class-test-controls.php | 2 +- theme/assets/css/src/base/typography.css | 5 +- 4 files changed, 59 insertions(+), 46 deletions(-) diff --git a/plugin/assets/css/src/typography.css b/plugin/assets/css/src/typography.css index e50fa696..a5fdf7ef 100644 --- a/plugin/assets/css/src/typography.css +++ b/plugin/assets/css/src/typography.css @@ -29,6 +29,8 @@ */ html { + @mixin fontvars display-large, 7.5, 6, 300, -1.5; + @mixin fontvars display-medium, 6.875, 6, 300, -1.5; @mixin fontvars display-small, 6, 6, 300, -1.5; @mixin fontvars headline-large, 3.75, 3.75, 300, -.5; @mixin fontvars headline-medium, 3, 3.125, 400, 0; @@ -36,14 +38,15 @@ html { @mixin fontvars title-large, 1.5, 2, 400, 0; @mixin fontvars title-medium, 1.25, 2, 500, 0.15; @mixin fontvars label-large, 1, 1.75, 400, .15; - @mixin fontvars label-large, 0.875, 1.375, 500, .1; + @mixin fontvars label-medium, 0.875, 1.375, 500, .1; + @mixin fontvars label-small, 0.75, 2, 500, 1.5; @mixin fontvars body-large, 1, 1.5, 400, .5; @mixin fontvars body-medium, 0.875, 1.25, 400, .25; @mixin fontvars body-small, 0.75, 1.25, 400, .4; - @mixin fontvars label-large, 0.875, 2.25, 500, 1.25; - @mixin fontvars label-medium, 0.75, 2, 500, 1.5; } +@mixin typography display-large, 7.5, 6, 300; +@mixin typography display-medium, 6.875, 6, 300; @mixin typography display-small, 6, 6, 300; @mixin typography headline-large, 3.75, 3.75, 300; @mixin typography headline-medium, 3, 3.125, 400; diff --git a/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php index a6c92e1d..9a42fe7a 100644 --- a/plugin/php/customizer/class-controls.php +++ b/plugin/php/customizer/class-controls.php @@ -1731,23 +1731,23 @@ public function get_typography_extra_controls( $token ) { $default_fonts_size = [ 'display' => [ - 'large' => 57, - 'medium' => 45, - 'small' => 36, + 'large' => 120, + 'medium' => 110, + 'small' => 96, ], 'headline' => [ - 'large' => 32, - 'medium' => 28, - 'small' => 24, + 'large' => 60, + 'medium' => 48, + 'small' => 34, ], 'title' => [ - 'large' => 22, - 'medium' => 16, - 'small' => 14, + 'large' => 24, + 'medium' => 20, + 'small' => 16, ], 'label' => [ - 'large' => 14, - 'medium' => 12, + 'large' => 16, + 'medium' => 14, 'small' => 11, ], 'body' => [ @@ -1758,30 +1758,39 @@ public function get_typography_extra_controls( $token ) { ]; $default_tracking = [ - 'title' => [ + 'display' => [ + 'large' => -1.5, + 'medium' => -1.5, + 'small' => -1.5, + ], + 'headline' => [ + 'large' => -0.5, + 'small' => 0.25, + ], + 'title' => [ 'medium' => 0.15, 'small' => 0.1, ], - 'label' => [ - 'large' => 0.1, - 'medium' => 0.5, - 'small' => 0.5, - ], - 'body' => [ + 'label' => [ 'large' => 0.15, - 'medium' => 0.25, + 'medium' => 0.1, + 'small' => 0.1, + ], + 'body' => [ + 'large' => 0.25, + 'medium' => 0.4, 'small' => 0.4, ], ]; $default_weight = [ 'display' => [ - 'large' => 400, - 'medium' => 400, - 'small' => 400, + 'large' => 300, + 'medium' => 300, + 'small' => 300, ], 'headline' => [ - 'large' => 400, + 'large' => 300, 'medium' => 400, 'small' => 400, ], @@ -1791,7 +1800,7 @@ public function get_typography_extra_controls( $token ) { 'small' => 500, ], 'label' => [ - 'large' => 500, + 'large' => 400, 'medium' => 500, 'small' => 500, ], @@ -1804,29 +1813,29 @@ public function get_typography_extra_controls( $token ) { $default_line_height = [ 'display' => [ - 'large' => 64, - 'medium' => 52, - 'small' => 44, + 'large' => 6, + 'medium' => 6, + 'small' => 6, ], 'headline' => [ - 'large' => 40, - 'medium' => 36, - 'small' => 32, + 'large' => 3.75, + 'medium' => 3.125, + 'small' => 2.5, ], 'title' => [ - 'large' => 28, - 'medium' => 24, - 'small' => 20, + 'large' => 2, + 'medium' => 2, + 'small' => 1.75, ], 'label' => [ - 'large' => 20, - 'medium' => 16, - 'small' => 6, + 'large' => 1.75, + 'medium' => 1.375, + 'small' => 1.125, ], 'body' => [ - 'large' => 24, - 'medium' => 20, - 'small' => 16, + 'large' => 1.5, + 'medium' => 1.25, + 'small' => 1.25, ], ]; @@ -1853,7 +1862,7 @@ public function get_typography_extra_controls( $token ) { 'size' => $this->get_typography_size_controls( [ 'default' => $default_fonts_size[ $token ][ $sub_t ], - 'max' => 96, + 'max' => 140, ] ), 'weight' => $this->get_typography_weight_controls( diff --git a/plugin/tests/phpunit/php/customizer/class-test-controls.php b/plugin/tests/phpunit/php/customizer/class-test-controls.php index 21ef5063..6f7dd61a 100644 --- a/plugin/tests/phpunit/php/customizer/class-test-controls.php +++ b/plugin/tests/phpunit/php/customizer/class-test-controls.php @@ -589,7 +589,7 @@ function () { ); // Assert we get updated fonts. - $this->assertEquals( '//fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500|Raleway:400|Open+Sans:400', $controls->get_google_fonts_url() ); + $this->assertEquals( '//fonts.googleapis.com/css?family=Material+Icons|Roboto:300,400,500|Raleway:300,400|Open+Sans:400', $controls->get_google_fonts_url() ); } /** diff --git a/theme/assets/css/src/base/typography.css b/theme/assets/css/src/base/typography.css index 25e6f4b2..5e8f9a96 100644 --- a/theme/assets/css/src/base/typography.css +++ b/theme/assets/css/src/base/typography.css @@ -28,6 +28,8 @@ @mixin selector-typography figcaption, label-large, 1, 1.75, 400; /* Add typography m3 classes. */ +@mixin typography display-large, 7.5, 6, 300; +@mixin typography display-medium, 6.875, 6, 300; @mixin typography display-small, 6, 6, 300; @mixin typography headline-large, 3.75, 3.75, 300; @mixin typography headline-medium, 3, 3.125, 400; @@ -37,11 +39,10 @@ @mixin typography title-small, 0.875, 1.57, 500; @mixin typography label-large, 1, 1.75, 400; @mixin typography label-medium, 0.875, 1.375, 500; +@mixin typography label-small, 0.75, 2, 500; @mixin typography body-large, 1, 1.5, 400; @mixin typography body-medium, 0.875, 1.25, 400; @mixin typography body-small, 0.75, 1.25, 400; -@mixin typography label-large, 0.875, 2.25, 500; -@mixin typography label-medium, 0.75, 2, 500; /** Backward compatibility for old typography classes. */ @mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;