refactor(snackbar): Separate static styles to separate mixin in MDC

PiperOrigin-RevId: 459537423

Author: EstebanG23

packages/mdc-snackbar/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2018 Google Inc.
+// Copyright 2022 Google Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -20,317 +20,6 @@
 // THE SOFTWARE.
 //
 
-@use '@material/feature-targeting/feature-targeting';
-@use '@material/animation/functions' as animation-functions;
-@use '@material/button/button-theme';
-@use '@material/icon-button/icon-button-theme';
-@use '@material/ripple/ripple-theme';
-@use '@material/rtl/rtl';
-@use '@material/dom/mixins' as dom-mixins;
-@use '@material/typography/typography';
-@use '@material/elevation/mixins' as elevation-mixins;
-@use '@material/shape/mixins' as shape-mixins;
-@use '@material/theme/theme';
-@use './variables';
-
-@mixin core-styles($query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-  $feat-animation: feature-targeting.create-target($query, animation);
-
-  // postcss-bem-linter: define snackbar
-  .mdc-snackbar {
-    @include z-index(variables.$z-index, $query: $query);
-    @include viewport-margin(variables.$viewport-margin-narrow, $query: $query);
-
-    @include feature-targeting.targets($feat-structure) {
-      display: none;
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-
-      // Ignore mouse events on the root layout element.
-      pointer-events: none;
-
-      // For some reason, iOS Safari displays a tap highlight on the entire snackbar element.
-      // Mobile Safari only supports `rgba` values for this property; named values like
-      // `transparent` are ignored. From Apple's docs:
-      // > This property obeys the alpha value, if specified.
-      // > If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color.
-      // > To disable tap highlighting, set the alpha value to 0 (invisible).
-      // > If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.
-      // See https://github.com/ben-eb/postcss-colormin/issues/1
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-  }
-
-  @include fill-color(variables.$fill-color, $query: $query);
-  @include label-ink-color(variables.$label-ink-color, $query: $query);
-  @include min-width(variables.$min-width, $query: $query);
-  @include max-width(variables.$max-width, $query: $query);
-  @include elevation(variables.$elevation, $query: $query);
-  @include shape-radius(variables.$shape-radius, $query: $query);
-
-  .mdc-snackbar--opening,
-  .mdc-snackbar--open,
-  .mdc-snackbar--closing {
-    @include feature-targeting.targets($feat-structure) {
-      display: flex;
-    }
-  }
-
-  .mdc-snackbar--open .mdc-snackbar__label,
-  .mdc-snackbar--open .mdc-snackbar__actions {
-    @include feature-targeting.targets($feat-structure) {
-      visibility: visible;
-    }
-  }
-
-  .mdc-snackbar--leading {
-    @include position-leading($query: $query);
-  }
-
-  .mdc-snackbar--stacked {
-    @include layout-stacked($query: $query);
-  }
-
-  .mdc-snackbar__surface {
-    // 1px border around the snackbar surface for high contrast mode.
-    &::before {
-      @include dom-mixins.transparent-border($query: $query);
-    }
-
-    @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-property(padding, 0, variables.$padding);
-
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      box-sizing: border-box;
-      transform: scale(0.8);
-      opacity: 0;
-    }
-
-    .mdc-snackbar--open & {
-      @include feature-targeting.targets($feat-structure) {
-        transform: scale(1);
-        opacity: 1;
-        pointer-events: auto; // Allow mouse events on surface element while snackbar is open
-      }
-
-      @include feature-targeting.targets($feat-animation) {
-        transition: animation-functions.enter(
-            opacity,
-            variables.$enter-duration
-          ),
-          animation-functions.enter(transform, variables.$enter-duration);
-      }
-    }
-
-    .mdc-snackbar--closing & {
-      @include feature-targeting.targets($feat-structure) {
-        transform: scale(1);
-      }
-
-      @include feature-targeting.targets($feat-animation) {
-        transition: animation-functions.exit-permanent(
-          opacity,
-          variables.$exit-duration
-        );
-      }
-    }
-  }
-
-  .mdc-snackbar__label {
-    @include typography.typography(variables.$label-type-scale, $query: $query);
-
-    @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-property(padding, 16px, variables.$padding);
-
-      width: 100%;
-      flex-grow: 1;
-      box-sizing: border-box;
-      margin: 0;
-      visibility: hidden;
-
-      // 14px top/bottom padding needed to make the height 48px.
-      padding-top: 14px;
-      padding-bottom: 14px;
-    }
-  }
-
-  // Used to prevent visual jank when announcing label text to screen readers.
-  // See the `announce()` function in util.js for details.
-  .mdc-snackbar__label::before {
-    @include feature-targeting.targets($feat-structure) {
-      display: inline;
-      content: attr(data-mdc-snackbar-label-text);
-    }
-  }
-
-  .mdc-snackbar__actions {
-    @include feature-targeting.targets($feat-structure) {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      box-sizing: border-box;
-      visibility: hidden;
-    }
-  }
-
-  .mdc-snackbar__action {
-    @include button-theme.ink-color(
-      variables.$action-ink-color,
-      $query: $query
-    );
-    @include ripple-theme.states(
-      variables.$action-ink-color,
-      $ripple-target: button-theme.$ripple-target,
-      $query: $query
-    );
-  }
-
-  .mdc-snackbar__dismiss {
-    @include icon-button-theme.ink-color(
-      variables.$dismiss-ink-color,
-      $query: $query
-    );
-  }
-
-  // Two selectors are needed to increase specificity above `.material-icons`.
-  // stylelint-disable-next-line selector-class-pattern
-  .mdc-snackbar__dismiss.mdc-snackbar__dismiss {
-    @include icon-button-theme.size(
-      variables.$dismiss-button-size,
-      $query: $query
-    );
-    @include feature-targeting.targets($feat-structure) {
-      font-size: variables.$dismiss-icon-size;
-    }
-  }
-
-  .mdc-snackbar__action + .mdc-snackbar__dismiss {
-    @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-property(margin, variables.$padding, 0);
-    }
-  }
-  // postcss-bem-linter: end
-}
-
-@mixin fill-color($color, $query: feature-targeting.all()) {
-  $feat-color: feature-targeting.create-target($query, color);
-
-  .mdc-snackbar__surface {
-    @include feature-targeting.targets($feat-color) {
-      @include theme.property(background-color, $color);
-    }
-  }
-}
-
-@mixin label-ink-color($color, $query: feature-targeting.all()) {
-  $feat-color: feature-targeting.create-target($query, color);
-
-  .mdc-snackbar__label {
-    @include feature-targeting.targets($feat-color) {
-      @include theme.property(color, $color);
-    }
-  }
-}
-
-@mixin shape-radius(
-  $radius,
-  $rtl-reflexive: false,
-  $query: feature-targeting.all()
-) {
-  .mdc-snackbar__surface {
-    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);
-  }
-}
-
-@mixin min-width(
-  $min-width,
-  $mobile-breakpoint: variables.$mobile-breakpoint,
-  $query: feature-targeting.all()
-) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  .mdc-snackbar__surface {
-    @include feature-targeting.targets($feat-structure) {
-      min-width: $min-width;
-
-      // The first media query ensures that snackbars are always 100% width on mobile devices, as required by the spec.
-      // The second media query prevents snackbars from being wider than the viewport for large min-width values.
-      @media (max-width: $mobile-breakpoint), (max-width: $min-width) {
-        min-width: 100%;
-      }
-    }
-  }
-}
-
-@mixin max-width($max-width, $query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  .mdc-snackbar__surface {
-    @include feature-targeting.targets($feat-structure) {
-      max-width: $max-width;
-    }
-  }
-}
-
-@mixin elevation($z-index, $query: feature-targeting.all()) {
-  .mdc-snackbar__surface {
-    @include elevation-mixins.elevation($z-index, $query: $query);
-  }
-}
-
-@mixin viewport-margin($margin, $query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  @include feature-targeting.targets($feat-structure) {
-    margin: $margin;
-  }
-}
-
-@mixin z-index($z-index, $query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  @include feature-targeting.targets($feat-structure) {
-    z-index: $z-index;
-  }
-}
-
-@mixin position-leading($query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  @include feature-targeting.targets($feat-structure) {
-    justify-content: flex-start;
-  }
-}
-
-@mixin layout-stacked($query: feature-targeting.all()) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  .mdc-snackbar__label {
-    @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-property(padding, 16px, 8px);
-      padding-bottom: 12px;
-    }
-  }
-
-  .mdc-snackbar__surface {
-    @include feature-targeting.targets($feat-structure) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .mdc-snackbar__actions {
-    @include feature-targeting.targets($feat-structure) {
-      align-self: flex-end;
-      margin-bottom: variables.$padding;
-    }
-  }
-}
+/// @deprecated Import './snackbar' or './snackbar-theme' instead.
+@forward './snackbar' show core-styles;
+@forward './snackbar-theme' show fill-color, label-ink-color, shape-radius, min-width, max-width, elevation, viewport-margin, z-index, position-leading, layout-stacked;