From 8a3f37d4ef38c6ebb885fd353343650abaa95925 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 29 Nov 2023 16:13:01 -0500 Subject: [PATCH 1/2] refactor(material/button): switch typography to tokens --- src/material/button/_button-theme.scss | 22 +++++++++---------- src/material/button/button.scss | 4 ++++ .../core/tokens/m2/mdc/_filled-button.scss | 11 +++++----- .../core/tokens/m2/mdc/_outlined-button.scss | 14 ++++++------ .../core/tokens/m2/mdc/_protected-button.scss | 11 +++++----- .../core/tokens/m2/mdc/_text-button.scss | 15 ++++++------- 6 files changed, 41 insertions(+), 36 deletions(-) diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index c01c25a39509..7943e00fe3e6 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -1,4 +1,3 @@ -@use '@material/button/button' as mdc-button; @use '@material/button/button-text-theme' as mdc-button-text-theme; @use '@material/button/button-filled-theme' as mdc-button-filled-theme; @use '@material/button/button-protected-theme' as mdc-button-protected-theme; @@ -19,7 +18,7 @@ @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button; @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; - +@use '../core/style/sass-utils'; @mixin _text-button-variant($theme, $palette) { $mdc-tokens: if($palette, @@ -165,15 +164,16 @@ } @mixin typography($theme) { - @include mdc-helpers.using-mdc-typography($theme) { - @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query); - } - - .mat-mdc-button, - .mat-mdc-raised-button, - .mat-mdc-outlined-button, - .mat-mdc-unelevated-button { - line-height: inherit; + @include sass-utils.current-selector-or-root() { + $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); + $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); + $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); + $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); + + @include mdc-button-text-theme.theme($text-typography-tokens); + @include mdc-button-filled-theme.theme($filled-typography-tokens); + @include mdc-button-outlined-theme.theme($outlined-typography-tokens); + @include mdc-button-protected-theme.theme($protected-typography-tokens); } } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 0f159ce4860e..8dfdf9722e27 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -107,6 +107,10 @@ } } +.mat-mdc-button-base { + text-decoration: none; +} + .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss index 04318a9ce937..99b82f954e13 100644 --- a/src/material/core/tokens/m2/mdc/_filled-button.scss +++ b/src/material/core/tokens/m2/mdc/_filled-button.scss @@ -35,11 +35,7 @@ $prefix: (mdc, filled-button); container-shadow-color: null, focus-label-text-color: null, hover-label-text-color: null, - label-text-font: null, - label-text-size: null, - label-text-tracking: null, label-text-transform: null, - label-text-weight: null, pressed-label-text-color: null, with-icon-disabled-icon-color: null, with-icon-focus-icon-color: null, @@ -81,7 +77,12 @@ $prefix: (mdc, filled-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss index f837c3d817a3..01b2a19076c9 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-button.scss +++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss @@ -49,12 +49,7 @@ $prefix: (mdc, outlined-button); with-icon-focus-icon-color: null, with-icon-pressed-icon-color: null, with-icon-disabled-icon-color: null, - - label-text-size: null, - label-text-font: null, - label-text-weight: null, - label-text-tracking: null, - label-text-transform: null + label-text-transform: null, ); } @@ -87,7 +82,12 @@ $prefix: (mdc, outlined-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss index ba9b0f9b1ae1..a16154c396f1 100644 --- a/src/material/core/tokens/m2/mdc/_protected-button.scss +++ b/src/material/core/tokens/m2/mdc/_protected-button.scss @@ -33,11 +33,7 @@ $prefix: (mdc, protected-button); disabled-container-elevation: null, focus-container-elevation: null, pressed-container-elevation: null, - label-text-font: null, - label-text-size: null, - label-text-tracking: null, label-text-transform: null, - label-text-weight: null, with-icon-icon-size: null, focus-label-text-color: null, hover-label-text-color: null, @@ -80,7 +76,12 @@ $prefix: (mdc, protected-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss index adb58aba85b9..548cc31cc735 100644 --- a/src/material/core/tokens/m2/mdc/_text-button.scss +++ b/src/material/core/tokens/m2/mdc/_text-button.scss @@ -21,13 +21,6 @@ $prefix: (mdc, text-button); // prevent the buttons from collapsing if a density mixin isn't included. container-height: 36px, - // TODO: handle these through the typography styles eventually. - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, - // ============================================================================================= // = TOKENS NOT USED IN ANGULAR MATERIAL = // ============================================================================================= @@ -49,6 +42,7 @@ $prefix: (mdc, text-button); focus-ring-color: null, focus-ring-offset: null, keep-touch-target: false, + label-text-transform: null ); } @@ -74,7 +68,12 @@ $prefix: (mdc, text-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + ); } // Tokens that can be configured through Angular Material's density theming API. From 755583a3e736f497d01fe960106d5740ff290eda Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Nov 2023 11:51:15 -0500 Subject: [PATCH 2/2] fixup! refactor(material/button): switch typography to tokens --- src/material/core/tokens/m2/mdc/_filled-button.scss | 4 ++-- src/material/core/tokens/m2/mdc/_outlined-button.scss | 4 ++-- src/material/core/tokens/m2/mdc/_protected-button.scss | 4 ++-- src/material/core/tokens/m2/mdc/_text-button.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss index 99b82f954e13..45ae62b97863 100644 --- a/src/material/core/tokens/m2/mdc/_filled-button.scss +++ b/src/material/core/tokens/m2/mdc/_filled-button.scss @@ -35,7 +35,6 @@ $prefix: (mdc, filled-button); container-shadow-color: null, focus-label-text-color: null, hover-label-text-color: null, - label-text-transform: null, pressed-label-text-color: null, with-icon-disabled-icon-color: null, with-icon-focus-icon-color: null, @@ -81,7 +80,8 @@ $prefix: (mdc, filled-button); label-text-font: inspection.get-theme-typography($theme, button, font-family), label-text-size: inspection.get-theme-typography($theme, button, font-size), label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, ); } diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss index 01b2a19076c9..2795a94ac186 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-button.scss +++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss @@ -49,7 +49,6 @@ $prefix: (mdc, outlined-button); with-icon-focus-icon-color: null, with-icon-pressed-icon-color: null, with-icon-disabled-icon-color: null, - label-text-transform: null, ); } @@ -86,7 +85,8 @@ $prefix: (mdc, outlined-button); label-text-font: inspection.get-theme-typography($theme, button, font-family), label-text-size: inspection.get-theme-typography($theme, button, font-size), label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, ); } diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss index a16154c396f1..42d20c241403 100644 --- a/src/material/core/tokens/m2/mdc/_protected-button.scss +++ b/src/material/core/tokens/m2/mdc/_protected-button.scss @@ -33,7 +33,6 @@ $prefix: (mdc, protected-button); disabled-container-elevation: null, focus-container-elevation: null, pressed-container-elevation: null, - label-text-transform: null, with-icon-icon-size: null, focus-label-text-color: null, hover-label-text-color: null, @@ -80,7 +79,8 @@ $prefix: (mdc, protected-button); label-text-font: inspection.get-theme-typography($theme, button, font-family), label-text-size: inspection.get-theme-typography($theme, button, font-size), label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, ); } diff --git a/src/material/core/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss index 548cc31cc735..a2083c5fbc02 100644 --- a/src/material/core/tokens/m2/mdc/_text-button.scss +++ b/src/material/core/tokens/m2/mdc/_text-button.scss @@ -42,7 +42,6 @@ $prefix: (mdc, text-button); focus-ring-color: null, focus-ring-offset: null, keep-touch-target: false, - label-text-transform: null ); } @@ -72,7 +71,8 @@ $prefix: (mdc, text-button); label-text-font: inspection.get-theme-typography($theme, button, font-family), label-text-size: inspection.get-theme-typography($theme, button, font-size), label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight) + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, ); }