Sass Mixins

/**
 * Outputs all typography CSS classes (.mdc-typography, .mdc-typography--*)
 * @param $query - Feature targeting query for conditional compilation
 */
@mixin core-styles($query: feature-targeting.all());

@use "@material/typography";

// Generate all typography classes
@include typography.core-styles;

// Or with feature targeting (advanced)
@include typography.core-styles($query: feature-targeting.create-target($query, typography));

/**
 * Applies base typography styles (font-family, font smoothing)
 * @param $query - Feature targeting query for conditional compilation
 */
@mixin base($query: feature-targeting.all());

@use "@material/typography";

.my-component {
  @include typography.base;
}

// Outputs:
// .my-component {
//   font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
//   -moz-osx-font-smoothing: grayscale;
//   -webkit-font-smoothing: antialiased;
// }

/**
 * Applies a specific typography style with optional property exclusion
 * @param $style - Typography style name (headline1, body1, etc.)
 * @param $query - Feature targeting query for conditional compilation
 * @param $exclude-props - List of properties to exclude from the style
 */
@mixin typography(
  $style,
  $query: feature-targeting.all(),
  $exclude-props: ()
);

@use "@material/typography";

// Apply complete headline1 style
.page-title {
  @include typography.typography(headline1);
}

// Apply body1 but exclude line-height
.custom-text {
  @include typography.typography(body1, $exclude-props: (line-height));
  line-height: 1.8; // Custom line height
}

// Multiple styles for different breakpoints
.responsive-heading {
  @include typography.typography(headline6);
  
  @media (min-width: 768px) {
    @include typography.typography(headline4);
  }
  
  @media (min-width: 1024px) {
    @include typography.typography(headline2);
  }
}

/**
 * Applies font antialiasing via font-smoothing to text
 * @param $query - Feature targeting query for conditional compilation
 */
@mixin smooth-font($query: feature-targeting.all());

@use "@material/typography";

.custom-text {
  font-family: "Custom Font", sans-serif;
  @include typography.smooth-font;
}

// Outputs:
// .custom-text {
//   font-family: "Custom Font", sans-serif;
//   -moz-osx-font-smoothing: grayscale;
//   -webkit-font-smoothing: antialiased;
// }

/**
 * Truncates overflow text to one line with an ellipsis
 * @param $query - Feature targeting query for conditional compilation
 * @note Element must be display: block or display: inline-block
 */
@mixin overflow-ellipsis($query: feature-targeting.all());

@use "@material/typography";

.truncated-title {
  @include typography.typography(headline6);
  @include typography.overflow-ellipsis;
  width: 200px; // Fixed width required
}

.card-title {
  display: block;
  @include typography.overflow-ellipsis;
  max-width: 300px;
}

// Outputs:
// .card-title {
//   display: block;
//   text-overflow: ellipsis;
//   white-space: nowrap;
//   overflow: hidden;
//   max-width: 300px;
// }

/**
 * Sets a container's baseline that text content will align to
 * @param $top - Distance from top of container to text baseline
 * @param $bottom - Distance from text baseline to bottom of container
 * @param $display - Display type: flex, inline-flex, block, or inline-block
 * @param $query - Feature targeting query for conditional compilation
 * @note For flexbox displays, only $top baseline may be set
 */
@mixin baseline(
  $top: 0,
  $bottom: 0,
  $display: block,
  $query: feature-targeting.all()
);

@use "@material/typography";

// Block element with top and bottom baseline
.text-container {
  @include typography.baseline($top: 28px, $bottom: 16px, $display: block);
}

// Flexbox container with top baseline only  
.flex-container {
  @include typography.baseline($top: 32px, $display: flex);
}

// Inline-block with custom spacing
.inline-text {
  @include typography.baseline($top: 20px, $bottom: 8px, $display: inline-block);
}

/**
 * Sets the baseline of flow text content
 * @param $top - Distance from top of container to text baseline
 * @param $bottom - Distance from text baseline to bottom of container  
 * @param $display - Display type: block or inline-block
 * @param $lineHeight - Line height for the text (distance between baselines)
 * @param $query - Feature targeting query for conditional compilation
 * @note Intended for text flow content only (h1, p, span, div with text)
 */
@mixin text-baseline(
  $top: 0,
  $bottom: 0,
  $display: block,
  $lineHeight: normal,
  $query: feature-targeting.all()
);

@use "@material/typography";

.article-text {
  @include typography.typography(body1);
  @include typography.text-baseline(
    $top: 20px,
    $bottom: 16px,
    $lineHeight: 1.6
  );
}

/**
 * Creates a baseline strut from the top of a container
 * @param $distance - Distance from top of container to text baseline
 * @param $query - Feature targeting query for conditional compilation
 */
@mixin baseline-top($distance, $query: feature-targeting.all());

/**
 * Creates a baseline strut from baseline to bottom of container
 * @param $distance - Distance from text baseline to bottom of container
 * @param $query - Feature targeting query for conditional compilation
 */
@mixin baseline-bottom($distance, $query: feature-targeting.all());

/**
 * Adds invisible, zero-width prefix to ensure consistent baseline
 * @param $query - Feature targeting query for conditional compilation
 * @note Do not use with baseline mixin (they conflict)
 */
@mixin zero-width-prefix($query: feature-targeting.all());

@use "@material/typography";

// Manual baseline control
.custom-baseline {
  @include typography.baseline-top(24px);
  @include typography.baseline-bottom(12px);
}

// Ensure baseline consistency when text might be empty
.dynamic-content {
  @include typography.zero-width-prefix;
}

/**
 * Applies theme-based typography properties
 * @param $theme - Theme map with typography properties
 */
@mixin theme-styles($theme);

// Theme map structure:
$typography-theme: (
  font: null,
  line-height: null,
  size: null,
  weight: null,
  tracking: null,
);

@use "@material/typography";

$custom-theme: (
  font: "Arial, sans-serif",
  size: 18px,
  weight: 600,
  line-height: 1.4,
  tracking: 0.5px
);

.themed-text {
  @include typography.theme-styles($custom-theme);
}

@use "@material/typography";

.article {
  @include typography.base;
  
  h1 {
    @include typography.typography(headline2);
    @include typography.overflow-ellipsis;
    max-width: 100%;
  }
  
  p {
    @include typography.typography(body1);
    @include typography.text-baseline($top: 16px, $bottom: 16px);
  }
  
  .caption {
    @include typography.typography(caption);
  }
}

@use "@material/typography";

.responsive-heading {
  // Mobile first
  @include typography.typography(headline6);
  
  @media (min-width: 600px) {
    @include typography.typography(headline4);
  }
  
  @media (min-width: 960px) {
    @include typography.typography(headline2);
  }
}

@use "@material/typography";

.custom-card {
  @include typography.base;
  
  &__title {
    @include typography.typography(headline6);
    @include typography.overflow-ellipsis;
  }
  
  &__subtitle {
    @include typography.typography(subtitle2);
    margin-bottom: 16px;
  }
  
  &__content {
    @include typography.typography(body2);
    @include typography.text-baseline($top: 20px, $bottom: 20px);
  }
  
  &__action {
    @include typography.typography(button);
  }
}