fix(material-experimental/mdc-tabs): update theming api

Author: andrewseguin

package.json

@@ -92,53 +92,53 @@
     "@bazel/terser": "4.3.0",
     "@bazel/typescript": "4.3.0",
     "@firebase/app-types": "^0.6.1",
-    "@material/animation": "14.0.0-canary.c78ff0429.0",
-    "@material/auto-init": "14.0.0-canary.c78ff0429.0",
-    "@material/banner": "14.0.0-canary.c78ff0429.0",
-    "@material/base": "14.0.0-canary.c78ff0429.0",
-    "@material/button": "14.0.0-canary.c78ff0429.0",
-    "@material/card": "14.0.0-canary.c78ff0429.0",
-    "@material/checkbox": "14.0.0-canary.c78ff0429.0",
-    "@material/chips": "14.0.0-canary.c78ff0429.0",
-    "@material/circular-progress": "14.0.0-canary.c78ff0429.0",
-    "@material/data-table": "14.0.0-canary.c78ff0429.0",
-    "@material/density": "14.0.0-canary.c78ff0429.0",
-    "@material/dialog": "14.0.0-canary.c78ff0429.0",
-    "@material/dom": "14.0.0-canary.c78ff0429.0",
-    "@material/drawer": "14.0.0-canary.c78ff0429.0",
-    "@material/elevation": "14.0.0-canary.c78ff0429.0",
-    "@material/fab": "14.0.0-canary.c78ff0429.0",
-    "@material/feature-targeting": "14.0.0-canary.c78ff0429.0",
-    "@material/floating-label": "14.0.0-canary.c78ff0429.0",
-    "@material/form-field": "14.0.0-canary.c78ff0429.0",
-    "@material/icon-button": "14.0.0-canary.c78ff0429.0",
-    "@material/image-list": "14.0.0-canary.c78ff0429.0",
-    "@material/layout-grid": "14.0.0-canary.c78ff0429.0",
-    "@material/line-ripple": "14.0.0-canary.c78ff0429.0",
-    "@material/linear-progress": "14.0.0-canary.c78ff0429.0",
-    "@material/list": "14.0.0-canary.c78ff0429.0",
-    "@material/menu": "14.0.0-canary.c78ff0429.0",
-    "@material/menu-surface": "14.0.0-canary.c78ff0429.0",
-    "@material/notched-outline": "14.0.0-canary.c78ff0429.0",
-    "@material/radio": "14.0.0-canary.c78ff0429.0",
-    "@material/ripple": "14.0.0-canary.c78ff0429.0",
-    "@material/rtl": "14.0.0-canary.c78ff0429.0",
-    "@material/segmented-button": "14.0.0-canary.c78ff0429.0",
-    "@material/select": "14.0.0-canary.c78ff0429.0",
-    "@material/shape": "14.0.0-canary.c78ff0429.0",
-    "@material/slider": "14.0.0-canary.c78ff0429.0",
-    "@material/snackbar": "14.0.0-canary.c78ff0429.0",
-    "@material/switch": "14.0.0-canary.c78ff0429.0",
-    "@material/tab": "14.0.0-canary.c78ff0429.0",
-    "@material/tab-bar": "14.0.0-canary.c78ff0429.0",
-    "@material/tab-indicator": "14.0.0-canary.c78ff0429.0",
-    "@material/tab-scroller": "14.0.0-canary.c78ff0429.0",
-    "@material/textfield": "14.0.0-canary.c78ff0429.0",
-    "@material/theme": "14.0.0-canary.c78ff0429.0",
-    "@material/tooltip": "14.0.0-canary.c78ff0429.0",
-    "@material/top-app-bar": "14.0.0-canary.c78ff0429.0",
-    "@material/touch-target": "14.0.0-canary.c78ff0429.0",
-    "@material/typography": "14.0.0-canary.c78ff0429.0",
+    "@material/animation": "14.0.0-canary.1af7c1c4a.0",
+    "@material/auto-init": "14.0.0-canary.1af7c1c4a.0",
+    "@material/banner": "14.0.0-canary.1af7c1c4a.0",
+    "@material/base": "14.0.0-canary.1af7c1c4a.0",
+    "@material/button": "14.0.0-canary.1af7c1c4a.0",
+    "@material/card": "14.0.0-canary.1af7c1c4a.0",
+    "@material/checkbox": "14.0.0-canary.1af7c1c4a.0",
+    "@material/chips": "14.0.0-canary.1af7c1c4a.0",
+    "@material/circular-progress": "14.0.0-canary.1af7c1c4a.0",
+    "@material/data-table": "14.0.0-canary.1af7c1c4a.0",
+    "@material/density": "14.0.0-canary.1af7c1c4a.0",
+    "@material/dialog": "14.0.0-canary.1af7c1c4a.0",
+    "@material/dom": "14.0.0-canary.1af7c1c4a.0",
+    "@material/drawer": "14.0.0-canary.1af7c1c4a.0",
+    "@material/elevation": "14.0.0-canary.1af7c1c4a.0",
+    "@material/fab": "14.0.0-canary.1af7c1c4a.0",
+    "@material/feature-targeting": "14.0.0-canary.1af7c1c4a.0",
+    "@material/floating-label": "14.0.0-canary.1af7c1c4a.0",
+    "@material/form-field": "14.0.0-canary.1af7c1c4a.0",
+    "@material/icon-button": "14.0.0-canary.1af7c1c4a.0",
+    "@material/image-list": "14.0.0-canary.1af7c1c4a.0",
+    "@material/layout-grid": "14.0.0-canary.1af7c1c4a.0",
+    "@material/line-ripple": "14.0.0-canary.1af7c1c4a.0",
+    "@material/linear-progress": "14.0.0-canary.1af7c1c4a.0",
+    "@material/list": "14.0.0-canary.1af7c1c4a.0",
+    "@material/menu": "14.0.0-canary.1af7c1c4a.0",
+    "@material/menu-surface": "14.0.0-canary.1af7c1c4a.0",
+    "@material/notched-outline": "14.0.0-canary.1af7c1c4a.0",
+    "@material/radio": "14.0.0-canary.1af7c1c4a.0",
+    "@material/ripple": "14.0.0-canary.1af7c1c4a.0",
+    "@material/rtl": "14.0.0-canary.1af7c1c4a.0",
+    "@material/segmented-button": "14.0.0-canary.1af7c1c4a.0",
+    "@material/select": "14.0.0-canary.1af7c1c4a.0",
+    "@material/shape": "14.0.0-canary.1af7c1c4a.0",
+    "@material/slider": "14.0.0-canary.1af7c1c4a.0",
+    "@material/snackbar": "14.0.0-canary.1af7c1c4a.0",
+    "@material/switch": "14.0.0-canary.1af7c1c4a.0",
+    "@material/tab": "14.0.0-canary.1af7c1c4a.0",
+    "@material/tab-bar": "14.0.0-canary.1af7c1c4a.0",
+    "@material/tab-indicator": "14.0.0-canary.1af7c1c4a.0",
+    "@material/tab-scroller": "14.0.0-canary.1af7c1c4a.0",
+    "@material/textfield": "14.0.0-canary.1af7c1c4a.0",
+    "@material/theme": "14.0.0-canary.1af7c1c4a.0",
+    "@material/tooltip": "14.0.0-canary.1af7c1c4a.0",
+    "@material/top-app-bar": "14.0.0-canary.1af7c1c4a.0",
+    "@material/touch-target": "14.0.0-canary.1af7c1c4a.0",
+    "@material/typography": "14.0.0-canary.1af7c1c4a.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^13.0.0-0 || ^14.0.0-0"
-MDC_PACKAGE_VERSION = "14.0.0-canary.c78ff0429.0"
+MDC_PACKAGE_VERSION = "14.0.0-canary.1af7c1c4a.0"
 TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.0.0"
 

src/material-experimental/mdc-tabs/_tabs-theme.scss

@@ -25,30 +25,32 @@
       // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
       // they are not, because `theme-styles` outputs the token values directly, rather than
       // generating CSS variables.
-      @include mdc-tab-theme.theme-styles(map.merge(mdc-tab-theme.$light-theme, (
-        container-color: $surface,
-        inactive-focus-state-layer-color: $on-surface,
-        inactive-hover-state-layer-color: $on-surface,
-        inactive-pressed-state-layer-color: $on-surface,
-        with-icon-inactive-focus-icon-color: $on-surface,
-        with-icon-inactive-hover-icon-color: $on-surface,
-        with-icon-inactive-icon-color: $on-surface,
-        with-icon-inactive-pressed-icon-color: $on-surface,
-        with-label-text-inactive-focus-label-text-color: $on-surface,
-        with-label-text-inactive-hover-label-text-color: $on-surface,
-        with-label-text-inactive-label-text-color: $on-surface,
-        with-label-text-inactive-pressed-label-text-color: $on-surface,
-
-        // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
-        // `font-size` at the root of the tab while the text size of the tab is set on
-        // `.mdc-tab__text-label` which overrides the one from the root. The problem is that the
-        // `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's code which
-        // in turn causes no text label styles to be emitted and for the icon size to be applied to
-        // the entire tab. Since we don't support icons inside the tab anyway, we can temporarily
-        // work around it by preventing MDC from emitting icon styles. The correct label typography
-        // will be applied by our theme instead.
-        with-icon-icon-size: null
-      )));
+      @include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
+          mdc-tab-theme.$primary-light-theme,
+          (
+            container-color: $surface,
+            inactive-focus-state-layer-color: $on-surface,
+            inactive-hover-state-layer-color: $on-surface,
+            inactive-pressed-state-layer-color: $on-surface,
+            with-icon-inactive-focus-icon-color: $on-surface,
+            with-icon-inactive-hover-icon-color: $on-surface,
+            with-icon-inactive-icon-color: $on-surface,
+            with-icon-inactive-pressed-icon-color: $on-surface,
+            with-label-text-inactive-focus-label-text-color: $on-surface,
+            with-label-text-inactive-hover-label-text-color: $on-surface,
+            with-label-text-inactive-label-text-color: $on-surface,
+            with-label-text-inactive-pressed-label-text-color: $on-surface,
+
+            // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
+            // `font-size` at the root of the tab while the text size of the tab is set on
+            // `.mdc-tab__text-label` which overrides the one from the root. The problem is that
+            // the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
+            // code which in turn causes no text label styles to be emitted and for the icon size
+            // to be applied to the entire tab. Since we don't support icons inside the tab
+            // anyway, we can temporarily work around it by preventing MDC from emitting icon
+            // styles. The correct label typography will be applied by our theme instead.
+            with-icon-icon-size: null
+          )));
 
       // MDC seems to include a background color on tabs which only stands out on dark themes.
       // Disable for now for backwards compatibility. These styles are inside the theme in order
@@ -127,7 +129,7 @@
     // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
     // they are not, because `theme-styles` outputs the token values directly, rather than
     // generating CSS variables.
-    @include mdc-tab-theme.theme-styles((
+    @include mdc-tab-theme.primary-navigation-tab-theme-styles((
       active-focus-state-layer-color: $color,
       active-hover-state-layer-color: $color,
       active-pressed-state-layer-color: $color,