feat(components/styles)!: remove @include set-font-face() inside co…

…mponents (#1181) Resolves #1122
adeo · Sep 26, 2022 · 21a5c1a · 21a5c1a
1 parent 0faa0d2
commit 21a5c1a
Show file tree

Hide file tree

Showing 298 changed files with 960 additions and 411 deletions.
diff --git a/packages/styles/components/_c.accordion.scss b/packages/styles/components/_c.accordion.scss
@@ -6,7 +6,6 @@
   background-color: $color-grey-000;
   border-bottom: get-border(s) solid $color-font-light;
 
-  @include set-font-face();
   @include set-accordion-size($accordion-default-size, $parent);
 
   // TODO:

diff --git a/packages/styles/components/_c.badge.scss b/packages/styles/components/_c.badge.scss
@@ -1,12 +1,12 @@
 /* mqp:start */
 .mc-badge {
   @include set-badge-base();
-  @include set-font-face('semi-bold');
-  @include set-font-scale('04', 's');
-  @include set-badge-theme(get-token(color, badge, 'info'));
+  @include set-font-weight("semi-bold");
+  @include set-font-scale("04", "s");
+  @include set-badge-theme(get-token(color, badge, "info"));
 
   @each $name, $props in $badges {
-    @if ($name != 'info') {
+    @if ($name != "info") {
       &--#{$name} {
         @include set-badge-theme($props);
       }

diff --git a/packages/styles/components/_c.button.scss b/packages/styles/components/_c.button.scss
@@ -2,7 +2,7 @@
 .mc-button {
   @include unstyle-button();
   @include set-button-theme(get-token(color, button, "solid"), true);
-  @include set-font-face("semi-bold");
+  @include set-font-weight("semi-bold");
   @include set-button-size($button-medium);
   @include set-button-layout();
 

diff --git a/packages/styles/components/_c.dropdown.scss b/packages/styles/components/_c.dropdown.scss
@@ -6,7 +6,6 @@
   &__trigger {
     @include unstyle-button();
     @include set-select-size($select-default-size);
-    @include set-font-face();
 
     display: flex;
     width: 18rem;
@@ -16,7 +15,7 @@
     padding-left: $mu075;
 
     &.is-open {
-      background-image: url(inline-icons('arrow-top-16', $color-grey-999));
+      background-image: url(inline-icons("arrow-top-16", $color-grey-999));
     }
 
     &:disabled {

diff --git a/packages/styles/components/_c.file-uploader.scss b/packages/styles/components/_c.file-uploader.scss
@@ -8,7 +8,7 @@
   }
 
   &__label {
-    @include set-font-face("semi-bold");
+    @include set-font-weight("semi-bold");
     @include set-button-layout();
     @include set-button-size(map-get($button-sizes, "m"));
     @include set-button-theme(get-token(color, button, "bordered"));
@@ -25,8 +25,7 @@
       height: $mu150;
       display: flex;
       align-items: center;
-      background:
-        transparent
+      background: transparent
         url(inline-icons("upload-24", $color-button-bordered-border)) no-repeat;
       background-size: $mu150;
       margin-right: $mu050;
@@ -57,8 +56,7 @@
         cursor: not-allowed;
 
         &::before {
-          background:
-            transparent
+          background: transparent
             url(inline-icons("upload-24", $color-button-bordered-disabled-font))
             no-repeat;
         }
@@ -73,8 +71,6 @@
   }
 
   &__file {
-    @include set-font-face("regular");
-
     align-items: center;
     background: $color-fileuploader-files-list;
     color: $color-fileuploader-font;
@@ -110,21 +106,17 @@
     }
 
     &--is-valid &-icon {
-      background-image:
-        url(
-          inline-icons(
-            "valid-24",
-            $color-fileuploader-valid
-          ));
+      background-image: url(inline-icons(
+        "valid-24",
+        $color-fileuploader-valid
+      ));
     }
 
     &--is-invalid &-icon {
-      background-image:
-        url(
-          inline-icons(
-            "alert-24",
-            $color-fileuploader-alert
-          ));
+      background-image: url(inline-icons(
+        "alert-24",
+        $color-fileuploader-alert
+      ));
     }
 
     &--is-invalid &-message {
@@ -155,8 +147,7 @@
       content: "";
       width: $mu150;
       height: $mu150;
-      background:
-        transparent
+      background: transparent
         url(inline-icons("delete-24", $color-fileuploader-font)) no-repeat;
       display: block;
     }

diff --git a/packages/styles/components/_c.flag.scss b/packages/styles/components/_c.flag.scss
@@ -3,7 +3,7 @@
   $parent: get-parent-selector(&);
 
   @include set-flag-base($parent);
-  @include set-font-face("semi-bold");
+  @include set-font-weight("semi-bold");
   @include set-flag-theme($parent, get-token(color, flag, "solid"));
 
   @each $name, $props in $flags {

diff --git a/packages/styles/components/_c.layer.scss b/packages/styles/components/_c.layer.scss
@@ -3,7 +3,6 @@
 .mc-layer {
   $parent: get-parent-selector(&);
 
-  @include set-font-face();
   @include set-dialog-base();
 
   display: flex;

diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
@@ -3,7 +3,6 @@
 .mc-modal {
   $parent: get-parent-selector(&);
 
-  @include set-font-face();
   @include set-dialog-base();
 
   align-items: flex-end;

diff --git a/packages/styles/components/_c.notification.scss b/packages/styles/components/_c.notification.scss
@@ -2,19 +2,18 @@
 .mc-notification {
   $parent: get-parent-selector(&);
 
-  @include set-font-face();
   @include set-border-radius();
   @include set-flexy();
   @include set-notification-size($notification-default-size);
-  @include set-notification-type('information');
+  @include set-notification-type("information");
 
   box-sizing: border-box;
   color: $color-font-darkest;
 
   &::before {
     background-color: transparent;
     background-repeat: no-repeat;
-    content: '';
+    content: "";
     display: block;
   }
 
@@ -29,12 +28,12 @@
   }
 
   &__title {
-    @include set-font-face('semi-bold');
-    @include set-font-scale('05');
+    @include set-font-weight("semi-bold");
+    @include set-font-scale("05");
   }
 
   &__message {
-    @include set-font-scale('04');
+    @include set-font-scale("04");
   }
 
   &__footer {
@@ -43,14 +42,14 @@
     flex-direction: column;
     margin-top: $mu100;
 
-    @include set-from-screen('l') {
+    @include set-from-screen("l") {
       flex-direction: row;
     }
   }
 
   // TODO: to be removed later
   &__link {
-    @include set-font-scale('04', 'm');
+    @include set-font-scale("04", "m");
 
     margin-top: $mu050;
   }
@@ -59,7 +58,7 @@
     &:not(:first-child) {
       margin-top: $mu100;
 
-      @include set-from-screen('l') {
+      @include set-from-screen("l") {
         margin: {
           top: 0;
           left: $mu100;
@@ -78,16 +77,16 @@
   // Notification size
   @each $size, $props in $notification-sizes {
     &--#{$size} {
-      @if ($size != 'm') {
+      @if ($size != "m") {
         @include set-notification-size($props);
 
         @each $type, $props in $notification-types {
-          @if ($type != 'information') {
+          @if ($type != "information") {
             &#{$parent}--#{$type} {
               @include set-notification-type($type, $size);
             }
           } @else {
-            @include set-notification-type('information', $size);
+            @include set-notification-type("information", $size);
           }
         }
       }
@@ -102,7 +101,7 @@
       @include set-focus-floating-base;
 
       background: transparent
-        url(inline-icons('cross-16', $notification-close-icon-color)) no-repeat;
+        url(inline-icons("cross-16", $notification-close-icon-color)) no-repeat;
       border: 0;
       cursor: pointer;
       display: block;

diff --git a/packages/styles/components/_c.option-button.scss b/packages/styles/components/_c.option-button.scss
@@ -31,7 +31,7 @@
   }
 
   &__label {
-    @include set-font-face("semi-bold");
+    @include set-font-weight("semi-bold");
 
     position: relative;
     padding: magic-unit-rem(1.5625, true) $mu200; // 25px 32px

diff --git a/packages/styles/components/_c.password-input.scss b/packages/styles/components/_c.password-input.scss
@@ -11,7 +11,7 @@
 
   &__button {
     @include unstyle-button();
-    @include set-font-face("semi-bold");
+    @include set-font-weight("semi-bold");
 
     background-color: $color-input-background;
     border: get-border("s") solid $color-input-border;

diff --git a/packages/styles/components/_c.tabs.scss b/packages/styles/components/_c.tabs.scss
@@ -66,7 +66,6 @@
   }
 
   &__link {
-    @include set-font-face();
     @include set-font-scale("05", "s");
 
     @include set-focus-floating-base {

diff --git a/packages/styles/settings-tools/_s.tag.scss b/packages/styles/settings-tools/_s.tag.scss
@@ -40,7 +40,6 @@ $tag-sizes: (
 }
 
 @mixin set-tag-base-style($size) {
-  @include set-font-face("regular");
   @include set-tag-size($size);
 
   display: inline-flex;

diff --git a/packages/styles/settings-tools/_t.reset-forms.scss b/packages/styles/settings-tools/_t.reset-forms.scss
@@ -1,6 +1,5 @@
 @mixin reset-input {
-  @include set-font-face("regular");
-
+  font-family: inherit;
   box-sizing: border-box;
   outline: none;
   appearance: none;

diff --git a/packages/styles/typography/_t.bodys.scss b/packages/styles/typography/_t.bodys.scss
@@ -1,41 +1,41 @@
 /* mqp:start */
 .mt-body {
   &-l {
-    @include set-font-face('regular');
-    @include set-font-scale('06');
+    @include set-font-face("regular");
+    @include set-font-scale("06");
 
     &--line-height-m {
-      @include set-line-height('06', 'm');
+      @include set-line-height("06", "m");
     }
 
     &--semi-bold {
-      @include set-font-face('semi-bold');
+      @include set-font-face("semi-bold");
     }
   }
 
   &-m {
-    @include set-font-face('regular');
-    @include set-font-scale('05');
+    @include set-font-face("regular");
+    @include set-font-scale("05");
 
     &--line-height-m {
-      @include set-line-height('05', 'm');
+      @include set-line-height("05", "m");
     }
 
     &--semi-bold {
-      @include set-font-face('semi-bold');
+      @include set-font-face("semi-bold");
     }
   }
 
   &-s {
-    @include set-font-face('regular');
-    @include set-font-scale('04');
+    @include set-font-face("regular");
+    @include set-font-scale("04");
 
     &--line-height-m {
-      @include set-line-height('04', 'm');
+      @include set-line-height("04", "m");
     }
 
     &--semi-bold {
-      @include set-font-face('semi-bold');
+      @include set-font-face("semi-bold");
     }
   }
 }

diff --git a/packages/styles/typography/_t.headings.scss b/packages/styles/typography/_t.headings.scss
@@ -2,8 +2,6 @@
 .mt-heading {
   $parent: get-parent-selector(&, ".mt-");
 
-  @include set-font-face("regular");
-
   color: $color-font-darkest;
   display: block;
   margin-bottom: $mu200;
@@ -14,22 +12,21 @@
     content: "";
     display: block;
     height: $mu025;
-    background-color: $color-heading-underline-default;
+    background-color: $color-primary-01-500;
   }
 
   // underline color variations
 
-  &--line-primary-01-200::after,
-  &--line-lightest::after {
-    background-color: $color-heading-underline-lightest;
+  &--line-primary-02-600::after {
+    background-color: $color-primary-02-600;
   }
 
-  &--line-primary-02-200::after {
-    background-color: $color-primary-02-200;
+  &--line-primary-01-200::after {
+    background-color: $color-primary-01-200;
   }
 
-  &--line-primary-02-600::after {
-    background-color: $color-primary-02-600;
+  &--line-primary-02-200::after {
+    background-color: $color-primary-02-200;
   }
 
   // text alignment