Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add initial sass typography API #4162

Merged
merged 3 commits into from
Apr 21, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/lib/core/style/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
@import '../typography/typography';


// Typography
$mat-body-font-size-base: rem(1.4) !default;
$mat-body-font-size-base: 14px !default;
$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;

// Media queries
Expand Down
37 changes: 37 additions & 0 deletions src/lib/core/typography/_typography-utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Utility for fetching a nested value from a typography config.
@function _mat-get-type-value($config, $level, $name) {
@return map-get(map-get($config, $level), $name);
}

// Gets the font size for a level inside a typography config.
@function mat-font-size($config, $level) {
@return _mat-get-type-value($config, $level, font-size);
}

// Gets the line height for a level inside a typography config.
@function mat-line-height($config, $level) {
@return _mat-get-type-value($config, $level, line-height);
}

// Gets the font weight for a level inside a typography config.
@function mat-font-weight($config, $level) {
@return _mat-get-type-value($config, $level, font-weight);
}

// Gets the font-family from a typography config and removes the quotes around it.
@function mat-font-family($config) {
@return unquote(map-get($config, font-family));
}

// Converts a typography level into CSS styles.
@mixin mat-typography-level-to-styles($config, $level) {
$font-size: mat-font-size($config, $level);
$font-weight: mat-font-weight($config, $level);
$line-height: mat-line-height($config, $level);
$font-family: mat-font-family($config);

// Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that
// we need to use interpolation for `font-size/line-height` in order to prevent SASS from diving
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🏊 "dividing"

// the two values.
font: $font-weight #{$font-size}/#{$line-height} $font-family;
}
89 changes: 84 additions & 5 deletions src/lib/core/typography/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,85 @@
// Implement the rem unit with SCSS so we don't have to actually set a font-size on
// the user's body element.
@function rem($multiplier) {
$font-size: 10px;
@return $multiplier * $font-size;
@import 'typography-utils';

// Represents a typography level from the Material design spec.
@function mat-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
@return (
font-size: $font-size,
line-height: $line-height,
font-weight: $font-weight
);
}

// Represents a collection of typography levels.
// Defaults come from https://material.io/guidelines/style/typography.html
@function mat-typography-config(
$font-family: 'Roboto, sans-serif',
$display-4: mat-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 20px, 500),
$subheading: mat-typography-level(16px, 28px, 400),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 12px, 400),
$button: mat-typography-level(14px, 14px, 500)
) {
@return (
font-family: $font-family,
display-4: $display-4,
display-3: $display-3,
display-2: $display-2,
display-1: $display-1,
headline: $headline,
title: $title,
subheading: $subheading,
body-2: $body-2,
body-1: $body-1,
caption: $caption,
button: $button
);
}

// Adds the base typography styles, based on a config.
@mixin mat-typography($config: mat-typography-config(), $selector: '.mat-typography') {
.mat-h0, .mat-hero-header {
@include mat-typography-level-to-styles($config, display-4);
}

.mat-h1, #{$selector} h1 {
@include mat-typography-level-to-styles($config, display-3);
}

.mat-h2, #{$selector} h2 {
@include mat-typography-level-to-styles($config, display-2);
}

.mat-h3, #{$selector} h3 {
@include mat-typography-level-to-styles($config, display-1);
}

.mat-h4, #{$selector} h4 {
@include mat-typography-level-to-styles($config, headline);
}

.mat-h5, #{$selector} h5 {
@include mat-typography-level-to-styles($config, title);
}

.mat-h6, #{$selector} h6 {
@include mat-typography-level-to-styles($config, subheading);
}

.mat-body-strong {
@include mat-typography-level-to-styles($config, body-2);
}

.mat-body, #{$selector} {
@include mat-typography-level-to-styles($config, body-1);
}

.mat-small {
@include mat-typography-level-to-styles($config, caption);
}
}