$typography-condensed: em(640px); @mixin when-typography-not-condensed { @include breakpoint-after($typography-condensed) { @content; } } @mixin when-typography-condensed { @include breakpoint-before($typography-condensed) { @content; } } @mixin text-style-caption { font-size: font-size(caption); font-weight: 400; line-height: line-height(caption); @include when-typography-not-condensed { font-size: font-size(caption, large-screen); line-height: line-height(caption, large-screen); } } @mixin text-style-heading { font-size: font-size(heading); font-weight: 600; line-height: line-height(heading); @include when-typography-not-condensed { font-size: font-size(heading, large-screen); } } @mixin text-style-subheading { font-size: font-size(subheading); font-weight: 700; line-height: line-height(subheading); text-transform: uppercase; @include when-typography-not-condensed { font-size: font-size(subheading, large-screen); } } @mixin text-style-input { font-size: font-size(input); font-weight: 400; line-height: line-height(input); text-transform: initial; letter-spacing: initial; @include when-typography-not-condensed { font-size: font-size(input, large-screen); } } @mixin text-style-body { font-size: font-size(body); font-weight: 400; line-height: line-height(body); text-transform: initial; letter-spacing: initial; @include when-typography-not-condensed { font-size: font-size(body, large-screen); } } @mixin text-style-display-x-large { font-size: font-size(display-x-large); font-weight: 600; line-height: line-height(display-x-large); @include when-typography-not-condensed { font-size: font-size(display-x-large, large-screen); line-height: line-height(display-x-large, large-screen); } } @mixin text-style-display-large { font-size: font-size(display-large); font-weight: 600; line-height: line-height(display-large); @include when-typography-not-condensed { font-size: font-size(display-large, large-screen); line-height: line-height(display-large, large-screen); } } @mixin text-style-display-medium { font-size: font-size(display-medium); font-weight: 400; line-height: line-height(display-medium); @include when-typography-not-condensed { font-size: font-size(display-medium, large-screen); line-height: line-height(display-medium, large-screen); } } @mixin text-style-display-small { font-size: font-size(display-small); font-weight: 400; line-height: line-height(display-small); @include when-typography-not-condensed { font-size: font-size(display-small, large-screen); line-height: line-height(display-small, large-screen); } } @mixin text-emphasis-placeholder() { color: color(ink, lightest); } @mixin text-emphasis-subdued($for-background: null) { color: color(ink, lighter, $for-background: $for-background); } @mixin text-emphasis-strong { font-weight: 700; } @mixin text-emphasis-normal($for-background: null) { font-weight: 400; color: color(ink, $for-background: $for-background); }