refactor(material/toolbar): switch to tokens API

Reworks the toolbar to use the new tokens theming API.
angular · Jul 19, 2023 · 9d0ccf3 · 9d0ccf3
1 parent ffffc82
commit 9d0ccf3
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 71 deletions.
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
@@ -40,6 +40,7 @@ $placeholder-typography-config: (
   button: $_placeholder-typography-level-config,
   overline: $_placeholder-typography-level-config,
   subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token

diff --git a/src/material/core/tokens/m2/mat/_toolbar.scss b/src/material/core/tokens/m2/mat/_toolbar.scss
@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, toolbar);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return private-get-color-palette-color-tokens(
+    $background-color: theming.get-color-from-palette($background, app-bar),
+    $text-color: theming.get-color-from-palette($foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    title-text-font: typography-utils.font-family($config, title) or
+      typography-utils.font-family($config),
+    title-text-line-height: typography-utils.line-height($config, title),
+    title-text-size: typography-utils.font-size($config, title),
+    title-text-tracking: typography-utils.letter-spacing($config, title),
+    title-text-weight: typography-utils.font-weight($config, title),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $density-scale: theming.clamp-density($config, -3);
+  $standard-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 52px,
+  );
+
+  $mobile-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+  );
+
+  @return (
+    standard-height: map.get($standard-scale, $density-scale),
+    mobile-height: map.get($mobile-scale, $density-scale),
+  );
+}
+
+// Generates the tokens used to theme the toolbar based on a palette.
+@function private-get-color-palette-color-tokens($background-color, $text-color) {
+  @return (
+    container-background-color: $background-color,
+    container-text-color: $text-color,
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/toolbar/BUILD.bazel b/src/material/toolbar/BUILD.bazel
@@ -39,6 +39,7 @@ sass_binary(
     src = "toolbar.scss",
     deps = [
         "//src/cdk:sass_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
@@ -1,105 +1,59 @@
 @use 'sass:map';
-@use '../core/density/private/compatibility';
-@use '../core/style/variables';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-@use './toolbar-variables';
-
-@mixin _height($height) {
-  .mat-toolbar-multiple-rows {
-    min-height: $height;
-  }
-  .mat-toolbar-row, .mat-toolbar-single-row {
-    height: $height;
-  }
-}
+@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
 
 @mixin _palette-styles($palette) {
-  background: theming.get-color-from-palette($palette);
-  color: theming.get-color-from-palette($palette, default-contrast);
-}
-
-@mixin _form-field-overrides {
-  .mat-form-field-underline,
-  .mat-form-field-ripple,
-  .mat-focused .mat-form-field-ripple {
-    background-color: currentColor;
-  }
-
-  .mat-form-field-label,
-  .mat-focused .mat-form-field-label,
-  .mat-select-value,
-  .mat-select-arrow,
-  .mat-form-field.mat-focused .mat-select-arrow {
-    color: inherit;
-  }
-
-  .mat-input-element {
-    caret-color: currentColor;
-  }
+  @include token-utils.create-token-values(
+    tokens-mat-toolbar.$prefix,
+    tokens-mat-toolbar.private-get-color-palette-color-tokens(
+      $background-color: theming.get-color-from-palette($palette),
+      $text-color: theming.get-color-from-palette($palette, default-contrast)
+    )
+  );
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mat-toolbar {
-    background: theming.get-color-from-palette($background, app-bar);
-    color: theming.get-color-from-palette($foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
+      tokens-mat-toolbar.get-color-tokens($config));
+  }
 
+  .mat-toolbar {
     &.mat-primary {
-      @include _palette-styles($primary);
+      @include _palette-styles(map.get($config, primary));
     }
 
     &.mat-accent {
-      @include _palette-styles($accent);
+      @include _palette-styles(map.get($config, accent));
     }
 
     &.mat-warn {
-      @include _palette-styles($warn);
+      @include _palette-styles(map.get($config, warn));
     }
-
-    @include _form-field-overrides;
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-toolbar,
-  .mat-toolbar h1,
-  .mat-toolbar h2,
-  .mat-toolbar h3,
-  .mat-toolbar h4,
-  .mat-toolbar h5,
-  .mat-toolbar h6 {
-    @include typography-utils.typography-level($config, title);
-    margin: 0;
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
+      tokens-mat-toolbar.get-typography-tokens($config));
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $height-desktop: compatibility.private-density-prop-value(
-      toolbar-variables.$desktop-density-config, $density-scale, height);
-  $height-mobile: compatibility.private-density-prop-value(
-      toolbar-variables.$mobile-density-config, $density-scale, height);
 
-  @include compatibility.private-density-legacy-compatibility() {
-    // Set the default height for the toolbar.
-    @include _height($height-desktop);
-
-    // As per specs, toolbars should have a different height in mobile devices. This has been
-    // specified in the old guidelines and is still observable in the new specifications by
-    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
-    @media (variables.$xsmall) {
-      @include _height($height-mobile);
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
+      tokens-mat-toolbar.get-density-tokens($density-scale));
   }
 }
 

diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss
@@ -1,4 +1,7 @@
 @use '@angular/cdk';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
+@use '../core/style/variables';
 
 $row-padding: 16px !default;
 
@@ -7,10 +10,44 @@ $row-padding: 16px !default;
 $height-mobile-portrait: 56px !default;
 
 .mat-toolbar {
+  @include token-utils.use-tokens(
+    tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
+    @include token-utils.create-token-slot(background, container-background-color);
+    @include token-utils.create-token-slot(color, container-text-color);
+
+    &, h1, h2, h3, h4, h5, h6 {
+      @include token-utils.create-token-slot(font-family, title-text-font);
+      @include token-utils.create-token-slot(font-size, title-text-size);
+      @include token-utils.create-token-slot(line-height, title-text-line-height);
+      @include token-utils.create-token-slot(font-weight, title-text-weight);
+      @include token-utils.create-token-slot(letter-spacing, title-text-tracking);
+      margin: 0;
+    }
+  }
+
   @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 
+  // Overrides so that components projected into the toolbar are visible.
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .mat-select-value,
+  .mat-select-arrow,
+  .mat-form-field.mat-focused .mat-select-arrow {
+    color: inherit;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+
   .mat-mdc-button-base.mat-unthemed {
     --mdc-text-button-label-text-color: inherit;
     --mdc-outlined-button-label-text-color: inherit;
@@ -31,11 +68,32 @@ $height-mobile-portrait: 56px !default;
   // Per Material specs a toolbar cannot have multiple lines inside of a single row.
   // Disable text wrapping inside of the toolbar. Developers are still able to overwrite it.
   white-space: nowrap;
+
+  @include token-utils.use-tokens(
+    tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
+    @include token-utils.create-token-slot(height, standard-height);
+
+    @media (variables.$xsmall) {
+      @include token-utils.create-token-slot(height, mobile-height);
+    }
+  }
 }
 
 .mat-toolbar-multiple-rows {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
   width: 100%;
+
+  @include token-utils.use-tokens(
+    tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
+    @include token-utils.create-token-slot(min-height, standard-height);
+
+    // As per specs, toolbars should have a different height in mobile devices. This has been
+    // specified in the old guidelines and is still observable in the new specifications by
+    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
+    @media (variables.$xsmall) {
+      @include token-utils.create-token-slot(min-height, mobile-height);
+    }
+  }
 }