Utility Functions

/**
 * Converts pixel values to rem units based on 16px base
 * @param $px - Pixel value to convert (number with px unit)
 * @returns Length value in rem units
 * @note Supports CSS custom properties as input
 */
@function px-to-rem($px): length;

@use "@material/typography";

.custom-text {
  font-size: typography.px-to-rem(18px);    // Result: 1.125rem
  margin-bottom: typography.px-to-rem(24px); // Result: 1.5rem
  line-height: typography.px-to-rem(28px);   // Result: 1.75rem
}

// Works with variables
$custom-size: 20px;
.larger-text {
  font-size: typography.px-to-rem($custom-size); // Result: 1.25rem
}

// Handles CSS custom properties
.themed-text {
  font-size: typography.px-to-rem(var(--custom-font-size, 16px));
}

/**
 * Checks if a given style name is a valid typography style
 * @param $style - Style name to validate (string)
 * @returns Boolean indicating if style exists
 */
@function is-typography-style($style): boolean;

/**
 * Returns a list of all available typography style names
 * @returns List of all typography style names
 */
@function get-typography-styles(): list;

@use "@material/typography";

// Validate style before using
@if typography.is-typography-style(headline1) {
  .valid-headline {
    @include typography.typography(headline1);
  }
}

// Check invalid style
@if not typography.is-typography-style(invalid-style) {
  @warn "invalid-style is not a valid typography style";
}

// Get all available styles
$all-styles: typography.get-typography-styles();
// Result: (headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2, body1, body2, caption, button, overline)

// Generate classes for all styles dynamically
@each $style in typography.get-typography-styles() {
  .custom-#{$style} {
    @include typography.typography($style);
    margin-bottom: 16px;
  }
}

/**
 * Gets the font-family for a typography style
 * @param $typography - Typography style name (string)
 * @returns Font family value for the style
 */
@function get-font($typography): string;

/**
 * Gets the line-height for a typography style  
 * @param $typography - Typography style name (string)
 * @returns Line height value for the style
 */
@function get-line-height($typography): length;

/**
 * Gets the font-size for a typography style
 * @param $typography - Typography style name (string)  
 * @returns Font size value for the style
 */
@function get-size($typography): length;

/**
 * Gets the font-weight for a typography style
 * @param $typography - Typography style name (string)
 * @returns Font weight value for the style  
 */
@function get-weight($typography): number;

/**
 * Gets the letter-spacing for a typography style
 * @param $typography - Typography style name (string)
 * @returns Letter spacing value for the style
 */
@function get-tracking($typography): length;

@use "@material/typography";

// Extract individual properties
.custom-heading {
  font-family: typography.get-font(headline2);        // "Roboto, sans-serif"
  font-size: typography.get-size(headline2);          // 3.75rem
  font-weight: typography.get-weight(headline2);      // 300
  line-height: typography.get-line-height(headline2); // 3.75rem
  letter-spacing: typography.get-tracking(headline2); // -0.0083333333em
  
  // Add custom properties
  color: #1976d2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

// Mix properties from different styles
.hybrid-style {
  font-size: typography.get-size(headline4);        // Large size
  line-height: typography.get-line-height(body1);   // Comfortable line height
  font-weight: typography.get-weight(subtitle1);    // Medium emphasis
  letter-spacing: typography.get-tracking(button);  // Spacious tracking
}

// Responsive typography using functions
.responsive-text {
  font-size: typography.get-size(body2);          // Mobile: smaller
  line-height: typography.get-line-height(body2);
  
  @media (min-width: 600px) {
    font-size: typography.get-size(body1);        // Tablet+: larger
    line-height: typography.get-line-height(body1);
  }
}

@use "@material/typography";
@use "sass:map";
@use "sass:list";

// Generate utility classes for each style
@each $style in typography.get-typography-styles() {
  .u-font-size-#{$style} {
    font-size: typography.get-size($style) !important;
  }
  
  .u-font-weight-#{$style} {
    font-weight: typography.get-weight($style) !important;
  }
  
  .u-line-height-#{$style} {
    line-height: typography.get-line-height($style) !important;
  }
}

@use "@material/typography";

// Create a mixin that validates and applies styles
@mixin safe-typography($style) {
  @if typography.is-typography-style($style) {
    @include typography.typography($style);
  } @else {
    @error "Invalid typography style: #{$style}. Available styles: #{typography.get-typography-styles()}";
  }
}

// Usage
.safe-heading {
  @include safe-typography(headline1); // Works
  // @include safe-typography(invalid);   // Throws error
}

@use "@material/typography";
@use "sass:math";

// Create a custom scale based on existing styles
@function create-custom-scale($base-style, $ratio: 1.25) {
  $base-size: typography.get-size($base-style);
  $base-weight: typography.get-weight($base-style);
  $base-line-height: typography.get-line-height($base-style);
  
  @return (
    small: (
      font-size: math.div($base-size, $ratio),
      font-weight: $base-weight,
      line-height: math.div($base-line-height, $ratio)
    ),
    base: (
      font-size: $base-size,
      font-weight: $base-weight, 
      line-height: $base-line-height
    ),
    large: (
      font-size: $base-size * $ratio,
      font-weight: $base-weight,
      line-height: $base-line-height * $ratio
    )
  );
}

$custom-scale: create-custom-scale(body1, 1.2);

.small-text {
  font-size: map.get($custom-scale, small, font-size);
  line-height: map.get($custom-scale, small, line-height);
}

@use "@material/typography";

// Debug mixin to show typography information
@mixin typography-debug($style) {
  @if typography.is-typography-style($style) {
    &::before {
      content: "Style: #{$style}, Size: #{typography.get-size($style)}, Weight: #{typography.get-weight($style)}, Line Height: #{typography.get-line-height($style)}";
      display: block;
      font-size: 12px;
      color: #666;
      background: #f0f0f0;
      padding: 4px 8px;
      margin-bottom: 8px;
      font-family: monospace;
    }
  }
  
  @include typography.typography($style);
}

// Usage during development
.debug-headline {
  @include typography-debug(headline1);
}

@use "@material/typography";

// Helper function for responsive typography
@function responsive-type-size($mobile-style, $desktop-style, $breakpoint: 600px) {
  @return clamp(
    #{typography.get-size($mobile-style)},
    4vw,
    #{typography.get-size($desktop-style)}
  );
}

.fluid-heading {
  font-size: responsive-type-size(headline6, headline2);
  font-weight: typography.get-weight(headline4);
  line-height: 1.2;
}