From 21c7a54d0f9ac05ec06861e811e5743ed6870e07 Mon Sep 17 00:00:00 2001 From: Yiran Mao Date: Wed, 2 Aug 2017 17:52:46 -0400 Subject: [PATCH] feat(typography): Add button style to typography (#1064) --- packages/mdc-typography/README.md | 3 ++ packages/mdc-typography/_mixins.scss | 2 + packages/mdc-typography/_variables.scss | 53 ++++++++++++++++++++----- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md index fc85e8a708f..e7091a766f3 100644 --- a/packages/mdc-typography/README.md +++ b/packages/mdc-typography/README.md @@ -24,6 +24,7 @@ MDC Typography is a foundational module that applies these styles to MDC Web com * Body 2 * Body 1 * Caption +* Button ### Usage @@ -88,6 +89,7 @@ CSS Class | Description `mdc-typography--body2` | Sets font properties as Body 2 `mdc-typography--body1` | Sets font properties as Body 1 `mdc-typography--caption` | Sets font properties as Caption +`mdc-typography--button` | Sets font properties as Button `mdc-typography--adjust-margin` | Positions text, used in conjunction with font classes above > **A note about `mdc-typography--adjust-margin`**, `mdc-typography--adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography--adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly. @@ -120,3 +122,4 @@ These styles can be used as the `$style` argument for `mdc-typography` and `mdc- * `body2` * `body1` * `caption` +* `button` diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss index d2ff57f267c..cd8fa9dfb02 100644 --- a/packages/mdc-typography/_mixins.scss +++ b/packages/mdc-typography/_mixins.scss @@ -35,6 +35,8 @@ font-weight: #{map-get($style-props, font-weight)}; letter-spacing: map-get($style-props, letter-spacing); line-height: map-get($style-props, line-height); + text-decoration: map-get($style-props, text-decoration); + text-transform: map-get($style-props, text-transform); } @mixin mdc-typography-adjust-margin($style) { diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss index 91f86b02494..b4aa8a23160 100644 --- a/packages/mdc-typography/_variables.scss +++ b/packages/mdc-typography/_variables.scss @@ -35,76 +35,107 @@ $mdc-typography-styles: ( line-height: 7rem, /* 112sp */ font-weight: map-get($mdc-typography-font-weight-values, light), letter-spacing: -.04em, - margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */ + margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */, + text-decoration: inherit, + text-transform: inherit ), display3: ( font-size: 3.5rem, /* 56px */ line-height: 3.5rem, /* 56px */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: -.02em, - margin: -8px 0 64px -.07em + margin: -8px 0 64px -.07em, + text-decoration: inherit, + text-transform: inherit ), display2: ( font-size: 2.813rem, /* 45px */ line-height: 3rem, /* 48px */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */ + margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */, + text-decoration: inherit, + text-transform: inherit ), display1: ( font-size: 2.125rem, /* 34sp */ line-height: 2.5rem, /* 40sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */ + margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */, + text-decoration: inherit, + text-transform: inherit ), headline: ( font-size: 1.5rem, /* 24sp */ line-height: 2rem, /* 32sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */ + margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */, + text-decoration: inherit, + text-transform: inherit ), title: ( font-size: 1.25rem, /* 20sp */ line-height: 2rem, /* 32sp */ font-weight: map-get($mdc-typography-font-weight-values, medium), letter-spacing: .02em, - margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */ + margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */, + text-decoration: inherit, + text-transform: inherit ), subheading2: ( font-size: 1rem, /* 16sp */ line-height: 1.75rem, /* 28sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */ + margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */, + text-decoration: inherit, + text-transform: inherit ), subheading1: ( font-size: .938rem, /* 15sp */ line-height: 1.5rem, /* 24sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */ + margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */, + text-decoration: inherit, + text-transform: inherit ), body2: ( font-size: .875rem, /* 14sp */ line-height: 1.5rem, /* 24sp */ font-weight: map-get($mdc-typography-font-weight-values, medium), letter-spacing: .04em, - margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */ + margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */, + text-decoration: inherit, + text-transform: inherit ), body1: ( font-size: .875rem, /* 14sp */ line-height: 1.25rem, /* 20sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */ + margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */, + text-decoration: inherit, + text-transform: inherit ), caption: ( font-size: .75rem, /* 12sp */ line-height: 1.25rem, /* 20sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .08em, - margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */ + margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */, + text-decoration: inherit, + text-transform: inherit + ), + button: ( + font-size: .875rem, /* 14sp */ + line-height: 2.25rem, /* 36sp */ + font-weight: map-get($mdc-typography-font-weight-values, medium), + letter-spacing: .04em, + margin: inherit /* We do not have adjust margin for button */, + text-decoration: none, + text-transform: uppercase ) ) !default;