diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index bad8efb6..bc7a4b8d 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -665,3 +665,49 @@ svg.mdc-button__icon { background-color: var(--md-sys-color-surface); } } + +.mdc-button.is-large { + background-color: var(--md-sys-color-primary-container); + border-radius: var(--md-sys-shape-medium); + box-shadow: var(--md-sys-elevation-1); + color: var(--md-sys-color-on-primary-container); + font-size: 16px; + gap: 0.25em; + height: 56px; + padding: 16px; + width: unset; +} + +.mdc-button.is-large > i { + font-size: 24px; + height: auto; + margin-left: auto; + margin-right: 8px; + width: auto; +} + +.mdc-button.is-large:hover, +.mdc-button.is-large .hover { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-4); + color: var(--md-sys-color-on-primary-container); +} + +.mdc-button.is-large:focus, +.mdc-button.is-large .focus { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); + color: var(--md-sys-color-on-primary-container); +} + +.mdc-button.is-large:active, +.mdc-button.is-large .active { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); +} + +.mdc-button.is-large[disabled] { + background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12); + box-shadow: var(--md-sys-elevation-0); + color: rgba(var(--md-sys-color-on-surface-rgb), 0.38); +} diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css index 8d2651d4..5ca781d2 100644 --- a/plugin/assets/css/src/components/material.css +++ b/plugin/assets/css/src/components/material.css @@ -331,16 +331,6 @@ } } -.wp-block-material-buttons, -.wp-block-material-button { - - & .mdc-button.is-large { - height: 50px; - padding: 16px 32px; - } -} - - /* Icon */ .wp-block-material-icon { diff --git a/plugin/assets/css/src/tokens/elevation.css b/plugin/assets/css/src/tokens/elevation.css new file mode 100644 index 00000000..4064c31d --- /dev/null +++ b/plugin/assets/css/src/tokens/elevation.css @@ -0,0 +1,42 @@ +/** + * Copyright 2022 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. + */ + +:root { + --md-sys-elevation-level5-value: 12px; + --md-sys-elevation-level5-unit: 1px; + --md-sys-elevation-level5: 12px; + --md-sys-elevation-level4-value: 8px; + --md-sys-elevation-level4-unit: 1px; + --md-sys-elevation-level4: 8px; + --md-sys-elevation-level3-value: 6px; + --md-sys-elevation-level3-unit: 1px; + --md-sys-elevation-level3: 6px; + --md-sys-elevation-level2-value: 3px; + --md-sys-elevation-level2-unit: 1px; + --md-sys-elevation-level2: 3px; + --md-sys-elevation-level1-value: 1px; + --md-sys-elevation-level1-unit: 1px; + --md-sys-elevation-level1: 1px; + --md-sys-elevation-level0-value: 0; + --md-sys-elevation-level0-unit: 1px; + --md-sys-elevation-level0: 0; + --md-sys-elevation-0: 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .2), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-1: 0 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0 2px 2px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 5px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-2: 0 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0 4px 5px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 10px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-3: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-4: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-5: 0 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), 0 .12); +} diff --git a/plugin/assets/css/src/tokens/index.css b/plugin/assets/css/src/tokens/index.css index f6cfe500..5899cd6c 100644 --- a/plugin/assets/css/src/tokens/index.css +++ b/plugin/assets/css/src/tokens/index.css @@ -16,3 +16,6 @@ @import "./palette.css"; @import "./colors.css"; +@import "./shape.css"; +@import "./opacity.css"; +@import "./elevation.css"; diff --git a/plugin/assets/css/src/tokens/opacity.css b/plugin/assets/css/src/tokens/opacity.css new file mode 100644 index 00000000..b81487bc --- /dev/null +++ b/plugin/assets/css/src/tokens/opacity.css @@ -0,0 +1,22 @@ +/** + * Copyright 2022 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. + */ + +:root { + --md-sys-state-dragged-state-layer-opacity: 0.16; + --md-sys-state-pressed-state-layer-opacity: 0.12; + --md-sys-state-focus-state-layer-opacity: 0.12; + --md-sys-state-hover-state-layer-opacity: 0.08; +} diff --git a/plugin/assets/css/src/tokens/shape.css b/plugin/assets/css/src/tokens/shape.css new file mode 100644 index 00000000..08349bb1 --- /dev/null +++ b/plugin/assets/css/src/tokens/shape.css @@ -0,0 +1,66 @@ +/** + * Copyright 2022 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. + */ + +:root { + --md-sys-shape-corner-full-family: 3px; + --md-sys-shape-corner-extra-large-top-family: 1px; + --md-sys-shape-corner-extra-large-top: 0; + --md-sys-shape-corner-extra-large-top-top-left: 28px; + --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-large-top-top-right: 28px; + --md-sys-shape-corner-extra-large-family: 1px; + --md-sys-shape-corner-extra-large-unit: 1px; + --md-sys-shape-corner-extra-large: 28px; + --md-sys-shape-corner-large-top-family: 1px; + --md-sys-shape-corner-large-top-unit: 1px; + --md-sys-shape-corner-large-top: 0; + --md-sys-shape-corner-large-top-top-left-unit: 1px; + --md-sys-shape-corner-large-top-top-left: 16px; + --md-sys-shape-corner-large-top-top-right-unit: 1px; + --md-sys-shape-corner-large-top-top-right: 16px; + --md-sys-shape-corner-large-end-family: 1px; + --md-sys-shape-corner-large-end-unit: 1px; + --md-sys-shape-corner-large-end: 0; + --md-sys-shape-corner-large-end-top-right-unit: 1px; + --md-sys-shape-corner-large-end-top-right: 16px; + --md-sys-shape-corner-large-end-bottom-right-unit: 1px; + --md-sys-shape-corner-large-end-bottom-right: 16px; + --md-sys-shape-corner-large-family: 1px; + --md-sys-shape-corner-large-unit: 1px; + --md-sys-shape-corner-large: 16px; + --md-sys-shape-corner-medium-family: 1px; + --md-sys-shape-corner-medium-unit: 1px; + --md-sys-shape-corner-medium: 12px; + --md-sys-shape-corner-small-family: 1px; + --md-sys-shape-corner-small-unit: 1px; + --md-sys-shape-corner-small: 8px; + --md-sys-shape-corner-extra-small-top-family: 1px; + --md-sys-shape-corner-extra-small-top-unit: 1px; + --md-sys-shape-corner-extra-small-top: 0; + --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-left: 4px; + --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-right: 4px; + --md-sys-shape-corner-extra-small-family: 1px; + --md-sys-shape-corner-extra-small-unit: 1px; + --md-sys-shape-corner-extra-small: 4px; + --md-sys-shape-corner-none-family: 1px; + --md-sys-shape-corner-none-unit: 1px; + --md-sys-shape-corner-none: 0; + --md-sys-shape-small: var(--md-sys-shape-corner-small); + --md-sys-shape-medium: var(--md-sys-shape-corner-medium); + --md-sys-shape-large: var(--md-sys-shape-corner-large); +} diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index c8ae12b3..40466505 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -201,6 +201,12 @@ const ButtonEdit = ( { } }, [ isSubmitButton ] ); // eslint-disable-line + useEffect( () => { + if ( 'large' === size ) { + setAttributes( { elevationStyle: 'filled' } ); + } + }, [ size ] ); //eslint-disable-line react-hooks/exhaustive-deps + const colorSettings = { text: { label: __( 'Text Color', 'material-design' ), @@ -306,7 +312,7 @@ const ButtonEdit = ( { ) } - { type === 'text' && ( + { type === 'text' && size !== 'large' && ( <> { __( 'Variations', 'material-design' ) } @@ -359,7 +365,7 @@ const ButtonEdit = ( { title={ __( 'Corner Styles', 'material-design' ) } initialOpen={ true } > - { elevationStyle !== 'text' ? ( + { elevationStyle !== 'text' && size !== 'large' && ( <>
{ __( @@ -391,7 +397,9 @@ const ButtonEdit = ( { blockName={ ButtonBlockName } /> - ) : ( + ) } + + { ( elevationStyle === 'text' || size === 'large' ) && (

{ __( 'Current button style does not support rounded corners.', diff --git a/plugin/assets/src/block-editor/components/global-color/color-panel.js b/plugin/assets/src/block-editor/components/global-color/color-panel.js index ffe4472e..6b702cca 100644 --- a/plugin/assets/src/block-editor/components/global-color/color-panel.js +++ b/plugin/assets/src/block-editor/components/global-color/color-panel.js @@ -35,11 +35,12 @@ import { __ } from '@wordpress/i18n'; * @return {string} variable name example: '--md-sys-color-on-primary'. */ const getColorFromVarString = color => { - if ( color.includes( 'var(' ) ) { + if ( color && color.includes( 'var(' ) ) { const colorVar = color.split( '(' )[ 1 ].split( ')' )[ 0 ]; const style = getComputedStyle( document.body ); return style.getPropertyValue( colorVar ); } + return color; };