Skip to content

Commit

Permalink
Update default values
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatelUtkarsh
PatelUtkarsh committed Apr 28, 2022
1 parent 810d593 commit 3567a3a
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 46 deletions.
9 changes: 6 additions & 3 deletions plugin/assets/css/src/typography.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,24 @@
*/
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;
@mixin fontvars headline-small, 2.125, 2.5, 400, .25;
@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;
Expand Down
89 changes: 49 additions & 40 deletions plugin/php/customizer/class-controls.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' => [
Expand All @@ -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,
],
Expand All @@ -1791,7 +1800,7 @@ public function get_typography_extra_controls( $token ) {
'small' => 500,
],
'label' => [
'large' => 500,
'large' => 400,
'medium' => 500,
'small' => 500,
],
Expand All @@ -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,
],
];

Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion plugin/tests/phpunit/php/customizer/class-test-controls.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() );
}

/**
Expand Down
5 changes: 3 additions & 2 deletions theme/assets/css/src/base/typography.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 3567a3a

Please sign in to comment.