Skip to content

Commit

Permalink
Add title size utility class (mozilla#297) (mozilla#555)
Browse files Browse the repository at this point in the history
- also change all instances of text-display to text-title
  • Loading branch information
stephaniehobson authored Apr 9, 2020
1 parent d71eae8 commit c6a7dfc
Show file tree
Hide file tree
Showing 22 changed files with 213 additions and 66 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@

## Features

* **utility:** Add title size utility classes (#297)
** rename `text-display-` to `text-title-`, keep `text-display-` as an alias
* **component:** Updates to emphasis box, with additional documentation and usage guidelines.
* **css:** Notification bar updates; use border-box (#549), fix image replacement bug, add focus styles, tweak spacing.

## Migration Tips
* Find and replace `text-display-` to `text-title-`

# 11.0.1

## Bug Fixes
Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/demos/hero.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

h2 {
@include text-display-md;
@include text-title-md;
}

.mzp-c-card-picto .mzp-c-card-picto-content::before{
Expand Down
14 changes: 7 additions & 7 deletions src/assets/sass/demos/type-scale.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ hr {
max-width: $content-max - (160px);
}

.scale-sample-display-xxl { @include text-display-xxl; }
.scale-sample-display-xl { @include text-display-xl; }
.scale-sample-display-lg { @include text-display-lg; }
.scale-sample-display-md { @include text-display-md; }
.scale-sample-display-sm { @include text-display-sm; }
.scale-sample-display-xs { @include text-display-xs; }
.scale-sample-display-xxs { @include text-display-xxs; }
.scale-sample-display-xxl { @include text-title-xxl; }
.scale-sample-display-xl { @include text-title-xl; }
.scale-sample-display-lg { @include text-title-lg; }
.scale-sample-display-md { @include text-title-md; }
.scale-sample-display-sm { @include text-title-sm; }
.scale-sample-display-xs { @include text-title-xs; }
.scale-sample-display-xxs { @include text-title-xxs; }
.scale-sample-body-lg { @include text-body-lg; }
.scale-sample-body-md { @include text-body-md; }
.scale-sample-body-sm { @include text-body-sm; }
Expand Down
10 changes: 5 additions & 5 deletions src/assets/sass/docs/site.scss
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
}

.protosite-nav-menu-title {
@include text-display-xs;
@include text-title-xs;
}

.protosite-nav-main-item {
Expand Down Expand Up @@ -124,7 +124,7 @@

.protosite-swatch-name {
@include font-base;
@include text-display-sm;
@include text-title-sm;
}

@media #{$mq-md} {
Expand Down Expand Up @@ -172,7 +172,7 @@
}

.protosite-specimen-font {
@include text-display-md;
@include text-title-md;
}

#specimen-zilla-slab {
Expand Down Expand Up @@ -245,11 +245,11 @@
}

.protosite-pattern-title {
@include text-display-md;
@include text-title-md;
}

.protosite-pattern-extra h3 {
@include text-display-sm;
@include text-title-sm;
}

.protosite-pattern-extra ul {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/protocol/base/elements/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ select:focus {
}

legend {
@include text-display-sm;
@include text-title-sm;

.mzp-u-inline & {
@include text-body-md;
Expand Down
4 changes: 2 additions & 2 deletions src/assets/sass/protocol/base/elements/_quotes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@

blockquote {
@include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),));
@include text-display-sm;
@include text-title-sm;
border-color: $color-marketing-gray-20;
border-style: solid;
margin: $spacing-lg auto;
padding: $spacing-sm $spacing-lg;
font-weight: bold;

cite {
@include text-display-xs;
@include text-title-xs;
color: $color-marketing-gray-70;

&:before {
Expand Down
16 changes: 10 additions & 6 deletions src/assets/sass/protocol/base/elements/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,29 @@ h1, h2, h3, h4, h5, h6, legend {

// Type scale defined in includes/mixins/_typography.scss
h1 {
@include text-display-xxl;
@include text-title-xxl;
margin-bottom: .25em;
}

h2 {
@include text-display-xl;
@include text-title-xl;
margin-bottom: .45em;
}

h3 {
@include text-display-lg;
@include text-title-lg;
}

h4 {
@include text-display-md;
@include text-title-md;
}

h5, h6 {
@include text-display-sm;
h5 {
@include text-title-sm;
}

h6 {
@include text-title-xs;
}

p,
Expand Down
118 changes: 118 additions & 0 deletions src/assets/sass/protocol/base/utilities/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import '../../includes/lib';

.mzp-u-title-xxl {
@include text-title-xxl;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-xl {
@include text-title-xl;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-lg {
@include text-title-lg;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-md {
@include text-title-md;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-sm {
@include text-title-sm;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-xs {
@include text-title-xs;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

.mzp-u-title-xxs {
@include text-title-xxs;

.mzp-t-mozilla {
& {
@include font-mozilla;
}
}

.mzp-t-firefox {
& {
@include font-firefox;
}
}
}

8 changes: 4 additions & 4 deletions src/assets/sass/protocol/components/_article.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@

// Step down the heading levels
h2 {
@include text-display-md;
@include text-title-md;
}

h3 {
@include text-display-sm;
@include text-title-sm;
}

h4 {
@include text-display-xs;
@include text-title-xs;
}

@media #{$mq-md} {
Expand All @@ -35,7 +35,7 @@
}

.mzp-c-article-title {
@include text-display-xl;
@include text-title-xl;
}

.mzp-c-article-intro {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/protocol/components/_billboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
}

.mzp-c-billboard-title {
@include text-display-md;
@include text-title-md;
}

.mzp-c-billboard-image-container {
Expand Down
4 changes: 2 additions & 2 deletions src/assets/sass/protocol/components/_call-out.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}

.mzp-c-call-out-title {
@include text-display-md;
@include text-title-md;
}

.mzp-c-call-out-desc {
Expand Down Expand Up @@ -87,7 +87,7 @@
}

.mzp-c-call-out-title {
@include text-display-sm;
@include text-title-sm;
}

.mzp-c-call-out-desc {
Expand Down
6 changes: 3 additions & 3 deletions src/assets/sass/protocol/components/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
}

.mzp-c-card-title {
@include text-display-xs;
@include text-title-xs;
display: inline;
}

Expand Down Expand Up @@ -149,7 +149,7 @@
.mzp-c-card.mzp-c-card-large {

.mzp-c-card-title {
@include text-display-md;
@include text-title-md;
}

.mzp-c-card-desc {
Expand All @@ -172,7 +172,7 @@
}

.mzp-c-card-title {
@include text-display-xxs;
@include text-title-xxs;
}

.mzp-c-card-desc {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/protocol/components/_feature-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}

.mzp-c-card-feature-title {
@include text-display-sm;
@include text-title-sm;
}

.mzp-c-card-feature-desc {
Expand Down
4 changes: 2 additions & 2 deletions src/assets/sass/protocol/components/_hero.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}

.mzp-c-hero-title {
@include text-display-lg;
@include text-title-lg;
margin-bottom: $spacing-md;

// Product logos
Expand All @@ -77,7 +77,7 @@
}

.mzp-c-hero-tagline {
@include text-display-sm;
@include text-title-sm;
}

.mzp-c-hero-image {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/protocol/components/_menu-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $icon-size: 24px;
}

.mzp-c-menu-item-title {
@include text-display-xxs;
@include text-title-xxs;
display: inline;
}

Expand Down
2 changes: 1 addition & 1 deletion src/assets/sass/protocol/components/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ html.mzp-is-noscroll {
@include bidi(((padding-right, $spacing-xl * 2, padding-left, 0),));

h2 {
@include text-display-xs;
@include text-title-xs;
@include font-base;
color: #fff;
}
Expand Down
Loading

0 comments on commit c6a7dfc

Please sign in to comment.