Use mixins for typography instead of placeholder selectors (#9072)

Using extend would not work inside of some css, namely inside of media queries. This made it a clear choice to use mixins for these styles.
4 years ago · 1582855e28
parent 4cc3fff96a
commit 1582855e28
15 changed files with 42 additions and 39 deletions
--- a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
@ -9,7 +9,7 @@
    border-bottom: 1px solid $Grey-100;

    &__header {
-      @extend %H3;
+      @include H3;
    }
  }

--- a/ui/app/components/app/modals/new-account-modal/index.scss
+++ b/ui/app/components/app/modals/new-account-modal/index.scss
@ -9,7 +9,7 @@
    border-bottom: 1px solid $Grey-100;

    &__header {
-      @extend %H4;
+      @include H4;

      font-weight: bold;
      display: flex;
--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@ -31,7 +31,7 @@
  }

  &__title {
-    @extend %H4;
+    @include H4;

    line-height: 25px;
    text-align: center;
@ -84,7 +84,7 @@
  }

  &__permissions-header {
-    @extend %H6;
+    @include H6;

    line-height: 20px;
    color: #6a737d;
--- a/ui/app/components/app/permissions-connect-footer/index.scss
+++ b/ui/app/components/app/permissions-connect-footer/index.scss
@ -5,7 +5,7 @@
  align-items: center;

  &__text {
-    @extend %H7;
+    @include H7;

    line-height: 17px;
    color: #6a737d;
--- a/ui/app/components/app/permissions-connect-header/index.scss
+++ b/ui/app/components/app/permissions-connect-header/index.scss
@ -26,7 +26,7 @@
  }

  &__title {
-    @extend %H3;
+    @include H3;

    text-align: center;
    color: $Black-100;
@ -35,7 +35,7 @@

  &__text,
  &__subtitle {
-    @extend %H6;
+    @include H6;

    text-align: center;
    color: $Grey-500;
--- a/ui/app/components/ui/button/buttons.scss
+++ b/ui/app/components/ui/button/buttons.scss
@ -11,7 +11,7 @@ $hover-orange: #ffd3b5;
 $warning-light-orange: #f8b588;

 %button {
-  @extend %H6;
+  @include H6;

  font-weight: 500;
  font-family: Roboto, Arial;
@ -34,7 +34,7 @@ $warning-light-orange: #f8b588;
 }

 %link {
-  @extend %H4;
+  @include H4;

  color: $Blue-500;
  line-height: 1.25rem;
@ -60,7 +60,8 @@ $warning-light-orange: #f8b588;

 %small-link {
  @extend %link;
-  @extend %H6;
+
+  @include H6;
 }

 .button {
--- a/ui/app/components/ui/list-item/index.scss
+++ b/ui/app/components/ui/list-item/index.scss
@ -5,7 +5,7 @@
  background: #fff;
  padding: 24px 16px;

-  @extend %Paragraph;
+  @include Paragraph;

  border-top: 1px solid $mercury;
  border-bottom: 1px solid $mercury;
--- a/ui/app/components/ui/popover/index.scss
+++ b/ui/app/components/ui/popover/index.scss
@ -33,7 +33,7 @@
      align-items: center;
      justify-content: space-between;

-      @extend %H4;
+      @include H4;

      font-weight: bold;
      line-height: 25px;
@ -51,7 +51,7 @@
    }

    &__subtitle {
-      @extend %H6;
+      @include H6;

      line-height: 20px;
    }
--- a/ui/app/css/design-system/typography.scss
+++ b/ui/app/css/design-system/typography.scss
@ -70,7 +70,7 @@ $fa-font-path: 'fonts/fontawesome';
 $font-family: Roboto, Helvetica, Arial, sans-serif;

 // Typography
-%H1 {
+@mixin H1 {
  font-style: normal;
  font-weight: normal;
  font-size: 2.5rem;
@ -78,7 +78,8 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H2 {
+
+@mixin H2 {
  font-style: normal;
  font-weight: normal;
  font-size: 2rem;
@ -86,7 +87,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H3 {
+@mixin H3 {
  font-style: normal;
  font-weight: normal;
  font-size: 1.5rem;
@ -94,7 +95,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H4 {
+@mixin H4 {
  font-style: normal;
  font-weight: normal;
  font-size: 1.125rem;
@ -102,7 +103,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H5 {
+@mixin H5 {
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
@ -110,14 +111,14 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H6 {
+@mixin H6 {
  font-style: normal;
  font-weight: normal;
-  font-size: 0.875rem;
-  font-family: $font-family;
+  font-size: 0.875rem; // 14px @default
+  line-height: 140%;
 }

-%Paragraph {
+@mixin Paragraph {
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
@ -125,7 +126,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H7 {
+@mixin H7 {
  font-style: normal;
  font-weight: normal;
  font-size: 0.75rem;
@ -133,7 +134,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H8 {
+@mixin H8 {
  font-style: normal;
  font-weight: normal;
  font-size: 0.625rem;
@ -141,7 +142,7 @@ $font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 140%;
 }

-%H9 {
+@mixin H9 {
  font-style: normal;
  font-weight: normal;
  font-size: 0.5rem;
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@ -287,7 +287,8 @@
  }

  &__button {
-    @extend %Paragraph;
+    @include Paragraph;
+
    @extend %button;

    width: 141px;
--- a/ui/app/pages/home/index.scss
+++ b/ui/app/pages/home/index.scss
@ -43,7 +43,7 @@
    display: flex;
    flex-direction: column;

-    @extend %H6;
+    @include H6;

    padding-left: 24px;
    padding-right: 24px;
--- a/ui/app/pages/permissions-connect/choose-account/index.scss
+++ b/ui/app/pages/permissions-connect/choose-account/index.scss
@ -24,13 +24,13 @@


  &__title {
-    @extend %H4;
+    @include H4;
  }

  &__text,
  &__text-blue,
  &__text-grey {
-    @extend %H6;
+    @include H6;
  }

  &__text-blue {
@ -120,7 +120,7 @@
    }

    &__label {
-      @extend %H6;
+      @include H6;

      color: $Black-100;
      text-overflow: ellipsis;
@ -129,13 +129,13 @@
    }

    &__balance {
-      @extend %H7;
+      @include H7;

      color: $Grey-500;
    }

    &__last-connected {
-      @extend %H8;
+      @include H8;

      display: flex;
      flex-direction: column;
--- a/ui/app/pages/permissions-connect/index.scss
+++ b/ui/app/pages/permissions-connect/index.scss
@ -24,7 +24,7 @@
  }

  &__back {
-    @extend %H6;
+    @include H6;

    color: $Grey-600;
    cursor: pointer;
@ -35,7 +35,7 @@
  }

  &__page-count {
-    @extend %H7;
+    @include H7;

    color: #6a737d;
    grid-column: 2;
--- a/ui/app/pages/permissions-connect/redirect/index.scss
+++ b/ui/app/pages/permissions-connect/redirect/index.scss
@ -4,7 +4,7 @@
  justify-content: center;

  &__result {
-    @extend %H3;
+    @include H3;

    position: absolute;
    top: 30%;
--- a/ui/app/pages/send/send.scss
+++ b/ui/app/pages/send/send.scss
@ -6,7 +6,7 @@
    padding: 14px 0 3px 0;

    .page-container__title {
-      @extend %H4;
+      @include H4;

      text-align: center;
    }
@ -91,7 +91,7 @@
    }

    &__group-label {
-      @extend %H8;
+      @include H8;

      background-color: $Grey-000;
      color: $Grey-600;
@ -136,7 +136,7 @@
      }

      &__subtitle {
-        @extend %H8;
+        @include H8;

        color: $Grey-500;
      }
@ -186,7 +186,7 @@
    }

    &__input {
-      @extend %H6;
+      @include H6;

      flex: 1 1 auto;
      width: 0;