Skip to content

Commit

Permalink
Merge c2ee1cb into 367caaf
Browse files Browse the repository at this point in the history
  • Loading branch information
PatelUtkarsh committed Apr 27, 2022
2 parents 367caaf + c2ee1cb commit e553f31
Show file tree
Hide file tree
Showing 114 changed files with 1,688 additions and 1,219 deletions.
40 changes: 9 additions & 31 deletions plugin/assets/css/src/components/material.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,31 +36,9 @@
}
}

/* Typography */
.mdc-typography--headline1 {
font-style: var(--mdc-typography-headline1-font-style, normal);
}

.mdc-typography--headline2 {
font-style: var(--mdc-typography-headline2-font-style, normal);
}

.mdc-typography--headline3 {
font-style: var(--mdc-typography-headline3-font-style, normal);
}

.mdc-typography--headline4 {
font-style: var(--mdc-typography-headline4-font-style, normal);
}

.mdc-typography--headline5 {
font-style: var(--mdc-typography-headline5-font-style, normal);
}

.mdc-typography--headline6,
.mdc-drawer__title,
.mdc-top-app-bar__title {
font-style: var(--mdc-typography-headline6-font-style, normal);
font-style: var(--md-sys-typescale-title-medium-style, normal);
}

.mdc-typography--subtitle1,
Expand All @@ -71,18 +49,18 @@
.mdc-select__selected-text,
.mdc-text-field__input,
.mdc-text-field__affix {
font-style: var(--mdc-typography-subtitle1-font-style, normal);
font-style: var(--md-sys-typescale-label-large-style, normal);
}

.mdc-typography--subtitle2,
.label-medium,
.mdc-data-table__header-cell,
.mdc-drawer .mdc-list-item,
.mdc-slider .mdc-slider__value-indicator-text {
font-style: var(--mdc-typography-subtitle2-font-style, normal);
font-style: var(--md-sys-typescale-label-medium-style, normal);
}

.mdc-typography--body1 {
font-style: var(--mdc-typography-body1-font-style, normal);
font-style: var(--md-sys-typescale-body-large-style, normal);
}

.mdc-typography--body2,
Expand All @@ -95,7 +73,7 @@
.mdc-drawer__subtitle,
.mdc-form-field,
.mdc-list-item__secondary-text {
font-style: var(--mdc-typography-body2-font-style, normal);
font-style: var(--md-sys-typescale-body-medium-style, normal);
}

.mdc-typography--caption,
Expand All @@ -104,17 +82,17 @@
.mdc-text-field-helper-text,
.mdc-text-field-character-counter,
.mdc-tooltip__surface {
font-style: var(--mdc-typography-caption-font-style, normal);
font-style: var(--md-sys-typescale-body-small-style, normal);
}

.mdc-typography--button,
.mdc-button,
.mdc-tab {
font-style: var(--mdc-typography-button-font-style, normal);
font-style: var(--md-sys-typescale-label-large-style, normal);
}

.mdc-typography--overline {
font-style: var(--mdc-typography-overline-font-style, normal);
font-style: var(--md-sys-typescale-label-medium-style, normal);
}

/* Image List */
Expand Down
2 changes: 2 additions & 0 deletions plugin/assets/css/src/front-end.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@
*/
@import "./base/variables.css";
@import "./conf/index.css";
@import "typography.css";
@import "./material-components.css";
@import "./components/contact-form.css";
@import "./components/masonry-grid.css";
@import "./components/core.css";
@import "../../src/block-editor/blocks/common-posts-list/style.css";
@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
@import "../../src/block-editor/blocks/card/style.css";
@import "overrides.css";
2 changes: 1 addition & 1 deletion plugin/assets/css/src/getting-started.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

@import "@material/typography/dist/mdc.typography.css";
@import "typography.css";
@import "@material/layout-grid/dist/mdc.layout-grid.css";
@import "@material/button/dist/mdc.button.css";
@import "@material/ripple/dist/mdc.ripple.css";
Expand Down
20 changes: 6 additions & 14 deletions plugin/assets/css/src/gsm/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,6 @@
*/

.material-gsm {
--mdc-typography-headline1-font-family: "Roboto", sans-serif;
--mdc-typography-headline2-font-family: "Roboto", sans-serif;
--mdc-typography-headline3-font-family: "Roboto", sans-serif;
--mdc-typography-headline4-font-family: "Roboto", sans-serif;
--mdc-typography-headline5-font-family: "Roboto", sans-serif;
--mdc-typography-headline6-font-family: "Roboto", sans-serif;
--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
--mdc-typography-font-family: "Roboto", sans-serif;
--mdc-typography-body1-font-family: "Roboto", sans-serif;
--mdc-typography-body2-font-family: "Roboto", sans-serif;
--mdc-typography-caption-font-family: "Roboto", sans-serif;
--mdc-typography-button-font-family: "Roboto", sans-serif;
--mdc-typography-overline-font-family: "Roboto", sans-serif;
--material-design-gsm-primary-color: #212121;
--material-design-gsm-primary-text: #fff;
--material-design-gsm-background-color: #fff;
Expand All @@ -49,9 +35,15 @@
}

& h1,
& h2,
& h3,
& h4 {
margin-top: 0;
margin-bottom: 0;
}

.material-gsm__content-actions + h2 {
margin-top: 2rem;
}

& p {
Expand Down
1 change: 0 additions & 1 deletion plugin/assets/css/src/material-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,5 @@
@import "@material/tab-indicator/dist/mdc.tab-indicator.css";
@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
@import "@material/textfield/dist/mdc.textfield.css";
@import "@material/typography/dist/mdc.typography.css";
@import "@material/tooltip/dist/mdc.tooltip.css";
@import "./components/material.css";
38 changes: 19 additions & 19 deletions plugin/assets/css/src/mixins.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,31 @@
/* stylelint-disable */

@define-mixin fontvars $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $tracking: 0.25, $font-style: normal {
--mdc-typography-$(type)-font-size: calc($font-size * 16)px;
--mdc-typography-$(type)-line-height: calc($line-height * 16)px;
--mdc-typography-$(type)-font-style: $font-style;
--mdc-typography-$(type)-font-weight: $font-weight;
--mdc-typography-$(type)-letter-spacing: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
--md-sys-typescale-$(type)-size: calc($font-size * 16)px;
--md-sys-typescale-$(type)-line-height: $line-height;
--md-sys-typescale-$(type)-style: $font-style;
--md-sys-typescale-$(type)-weight: $font-weight;
--md-sys-typescale-$(type)-tracking: calc(($tracking / ($font-size * 16)) * $font-size * 16)px;
}

@define-mixin typography $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
.mdc-typography--$type $child {
font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
}
.$(type) $child {
font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
font-style: var(--md-sys-typescale-$(type)-style, $font-style);
font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
letter-spacing: var(--md-sys-typescale-$(type)-tracking);
}
}

@define-mixin selector-typography $selector, $type, $font-size: 1, $line-height: 1.5, $font-weight: 400, $child, $font-style: normal {
$selector $child {
font-family: var(--mdc-typography-$(type)-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
font-size: var(--mdc-typography-$(type)-font-size, $(font-size)em) !important;
line-height: var(--mdc-typography-$(type)-line-height, $(line-height)em) !important;
font-style: var(--mdc-typography-$(type)-font-style, $font-style) !important;
font-weight: var(--mdc-typography-$(type)-font-weight, $font-weight) !important;
letter-spacing: var(--mdc-typography-$(type)-letter-spacing) !important;
font-family: var(--md-sys-typescale-$(type)-font, var(--md-ref-typeface-plain, Roboto, sans-serif));
font-size: var(--md-sys-typescale-$(type)-size, $(font-size)em);
line-height: var(--md-sys-typescale-$(type)-line-height, $(line-height));
font-style: var(--md-sys-typescale-$(type)-style, $font-style);
font-weight: var(--md-sys-typescale-$(type)-weight, $font-weight);
letter-spacing: var(--md-sys-typescale-$(type)-tracking);
}
}
54 changes: 0 additions & 54 deletions plugin/assets/css/src/overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,60 +14,6 @@
* limitations under the License.
*/

/*
* Frontend CSS to override other theme styles
* which impact the material components.
*/

@import "./mixins.css";

/*
* Set the typography vars by calculating with base font-size of 16px (browser default)
* to override any theme font rem declaration on html element.
* Material typography vars can be found at
* https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
*/
html {

@mixin fontvars headline1, 6, 6, 300, -1.5;
@mixin fontvars headline2, 3.75, 3.75, 300, -.5;
@mixin fontvars headline3, 3, 3.125, 400, 0;
@mixin fontvars headline4, 2.125, 2.5, 400, .25;
@mixin fontvars headline5, 1.5, 2, 400, 0;
@mixin fontvars headline6, 1.25, 2, 500, 0.15;
@mixin fontvars subtitle1, 1, 1.75, 400, .15;
@mixin fontvars subtitle2, 0.875, 1.375, 500, .1;
@mixin fontvars body1, 1, 1.5, 400, .5;
@mixin fontvars body2, 0.875, 1.25, 400, .25;
@mixin fontvars caption, 0.75, 1.25, 400, .4;
@mixin fontvars button, 0.875, 2.25, 500, 1.25;
@mixin fontvars overline, 0.75, 2, 500, 1.5;
}

@mixin typography headline1, 6, 6, 300;
@mixin typography headline2, 3.75, 3.75, 300;
@mixin typography headline3, 3, 3.125, 400;
@mixin typography headline4, 2.125, 2.5, 400;
@mixin typography headline5, 1.5, 2, 400;
@mixin typography headline6, 1.25, 2, 500;
@mixin typography subtitle1, 1, 1.75, 400;
@mixin typography subtitle2, 0.875, 1.375, 500;
@mixin typography body1, 1, 1.5, 400;
@mixin typography body2, 0.875, 1.25, 400;
@mixin typography caption, 0.75, 1.25, 400;
@mixin typography button, 0.875, 2.25, 500;
@mixin typography overline, 0.75, 2, 500;

/* For `body` types typography should be applied to child elements as well */
@mixin typography body1, 1, 1.5, 400, *;
@mixin typography body2, 0.875, 1.25, 400, *;

/* Additional selectors requiring typography styles */
@mixin selector-typography .mdc-button, button, 0.875, 2.25, 500;
@mixin selector-typography .mdc-button .mdc-button__label, button, 0.875, 2.25, 500;
@mixin selector-typography .mdc-list-item__primary-text, body1, 1, 1.5, 400;
@mixin selector-typography .mdc-list-item__secondary-text, body2, 0.875, 1.25, 400;

/* Material Design Icons */
.material-icons {
font-family: var(--mdc-icons-font-family) !important;
Expand Down
2 changes: 1 addition & 1 deletion plugin/assets/css/src/settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

@import "@material/typography/dist/mdc.typography.css";
@import "typography.css";
@import "@material/layout-grid/dist/mdc.layout-grid.css";
@import "@material/ripple/dist/mdc.ripple.css";
@import "@material/switch/dist/mdc.switch.css";
Expand Down
18 changes: 4 additions & 14 deletions plugin/assets/css/src/settings/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,10 @@
*/

.material-settings {
--mdc-typography-headline1-font-family: "Roboto", sans-serif;
--mdc-typography-headline2-font-family: "Roboto", sans-serif;
--mdc-typography-headline3-font-family: "Roboto", sans-serif;
--mdc-typography-headline4-font-family: "Roboto", sans-serif;
--mdc-typography-headline5-font-family: "Roboto", sans-serif;
--mdc-typography-headline6-font-family: "Roboto", sans-serif;
--mdc-typography-subtitle1-font-family: "Roboto", sans-serif;
--mdc-typography-subtitle2-font-family: "Roboto", sans-serif;
--mdc-typography-font-family: "Roboto", sans-serif;
--mdc-typography-body1-font-family: "Roboto", sans-serif;
--mdc-typography-body2-font-family: "Roboto", sans-serif;
--mdc-typography-caption-font-family: "Roboto", sans-serif;
--mdc-typography-button-font-family: "Roboto", sans-serif;
--mdc-typography-overline-font-family: "Roboto", sans-serif;
--md-sys-typescale-headline-large-line-height: 2em;
--md-sys-typescale-headline-medium-line-height: 2em;
--md-sys-typescale-headline-small-line-height: 2em;

--material-design-settings-background-color: #fff;
--material-design-settings-primary-color: #212121;
--material-design-settings-primary-text: #fff;
Expand Down
91 changes: 91 additions & 0 deletions plugin/assets/css/src/typography.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/**
* Copyright 2020 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/*
* Frontend CSS to override other theme styles
* which impact the material components.
*/

@import "./mixins.css";

/*
* Set the typography vars by calculating with base font-size of 16px (browser default)
* to override any theme font rem declaration on html element.
* Material typography vars can be found at
* https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L60
*/
html {

@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 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-small, 6, 6, 300;
@mixin typography headline-large, 3.75, 3.75, 300;
@mixin typography headline-medium, 3, 3.125, 400;
@mixin typography headline-small, 2.125, 2.5, 400;
@mixin typography title-large, 1.5, 2, 400;
@mixin typography title-medium, 1.25, 2, 500;
@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 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;

/* For `body` types typography should be applied to child elements as well */
@mixin typography body-large, 1, 1.5, 400, *;
@mixin typography body-medium, 0.875, 1.25, 400, *;

/* Additional selectors requiring typography styles */
@mixin selector-typography .mdc-button, label-large, 0.875, 2.25, 500;
@mixin selector-typography .mdc-button .mdc-button__label, label-large, 0.875, 2.25, 500;
@mixin selector-typography .mdc-list-item__primary-text, body-large, 1, 1.5, 400;
@mixin selector-typography .mdc-list-item__secondary-text, body-medium, 0.875, 1.25, 400;

/* Backward compatibility for old typography classes. */
@mixin selector-typography .mdc-typography--headline1, display-small, 6, 6, 300;
@mixin selector-typography .mdc-typography--headline2, headline-large, 3.75, 3.75, 300;
@mixin selector-typography .mdc-typography--headline3, headline-medium, 3, 3.125, 400;
@mixin selector-typography .mdc-typography--headline4, headline-small, 2.125, 2.5, 400;
@mixin selector-typography .mdc-typography--headline5, title-large, 1.5, 2, 400;
@mixin selector-typography .mdc-typography--headline6, title-medium, 1.25, 2, 500;
@mixin selector-typography .mdc-typography--subhead1, title-medium, 1.25, 2, 500;
@mixin selector-typography .mdc-typography--subhead2, title-small, 0.875, 1.57, 500;
@mixin selector-typography .mdc-typography--body1, body-large, 1, 1.5, 400;
@mixin selector-typography .mdc-typography--body2, body-medium, 0.875, 1.25, 400;
@mixin selector-typography .mdc-typography--caption, body-small, 0.75, 1.25, 400;
@mixin selector-typography .mdc-typography--button, label-large, 1, 1.75, 400;
@mixin selector-typography .mdc-typography--overline, label-medium, 0.875, 1.375, 500;
@mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
@mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;

/* Backward compat: For `body` types typography should be applied to child elements as well */
@mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
@mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
2 changes: 1 addition & 1 deletion plugin/assets/css/src/wizard.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

@import "@material/typography/dist/mdc.typography.css";
@import "typography.css";
@import "@material/layout-grid/dist/mdc.layout-grid.css";
@import "@material/button/dist/mdc.button.css";
@import "@material/switch/dist/mdc.switch.css";
Expand Down
Loading

0 comments on commit e553f31

Please sign in to comment.