feat(styles): improve styles to conform to stylelint rules (#1187)

Resolves #1062
adeo · Feb 3, 2023 · 1033b16 · 1033b16
1 parent 7d21906
commit 1033b16
Show file tree

Hide file tree

Showing 83 changed files with 566 additions and 608 deletions.
diff --git a/packages/css-dev-tools/styleLintConfig.js b/packages/css-dev-tools/styleLintConfig.js
@@ -35,28 +35,14 @@ module.exports = {
   extends: ['stylelint-config-standard-scss'],
   plugins: ['@mozaic-ds/stylelint-plugin-mozaic'],
   rules: {
-    'at-rule-no-unknown': null,
-    'max-empty-lines': null,
     'plugin/mozaic-bem-pattern': [pickConfig()],
-    'no-invalid-position-at-import-rule': null,
-    'max-line-length': null,
+    // rules from Stylelint
     'alpha-value-notation': null,
     'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'selector-not-notation': 'simple',
+    // rules from stylelint-scss
     'scss/no-global-function-names': null,
-    // TODO: the following rules should be removed from the file when switching to @next
-    'scss/at-mixin-argumentless-call-parentheses': null,
-    'scss/at-import-partial-extension': null,
-    'scss/at-import-no-partial-leading-underscore': null,
-    'scss/double-slash-comment-empty-line-before': null,
-    'scss/at-rule-conditional-no-parentheses': null,
-    'custom-property-no-missing-var-function': null,
-    'string-quotes': null,
-    'at-rule-empty-line-before': null,
-    'color-function-notation': null,
-    'function-url-quotes': null,
-    'value-keyword-case': null,
-    'declaration-colon-newline-after': null,
-    'rule-empty-line-before': null,
-    'no-descending-specificity': null,
+    'scss/at-mixin-argumentless-call-parentheses': 'always',
   },
 }
diff --git a/packages/styles/components/_c.accordion.scss b/packages/styles/components/_c.accordion.scss
@@ -14,7 +14,7 @@
   &__label {
     @include set-font-weight("semi-bold");
 
-    @include set-focus-floating-base {
+    @include set-focus-floating-base() {
       top: -(math.div($mu025, 2));
       right: -(math.div($mu025, 2));
       bottom: -3px;
@@ -92,7 +92,7 @@
 
     &:focus {
       ~ #{$parent}__label {
-        @include set-focus-floating {
+        @include set-focus-floating() {
           box-shadow: 0 0 0 $size-focus-border-thin $color-focus-border;
         }
       }
@@ -140,7 +140,7 @@
     background-position: right $mu050 center;
     background-repeat: no-repeat;
     background-color: transparent;
-    color: currentColor;
+    color: currentcolor;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
@@ -153,7 +153,7 @@
     width: 100%;
 
     &:focus {
-      @include set-focus-floating {
+      @include set-focus-floating() {
         box-shadow: 0 0 0 $size-focus-border-thin $color-focus-border;
       }
     }
@@ -207,7 +207,7 @@
 
   @each $size, $props in $accordion-sizes {
     &--#{$size} {
-      @if ($size != "m") {
+      @if $size != "m" {
         @include set-accordion-size($props, $parent);
       }
     }

diff --git a/packages/styles/components/_c.badge.scss b/packages/styles/components/_c.badge.scss
@@ -6,7 +6,7 @@
   @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.breadcrumb.scss b/packages/styles/components/_c.breadcrumb.scss
@@ -33,21 +33,13 @@
     }
 
     &:not(:first-child) {
-      background-image: url(
-        inline-icons(
-          "arrow-right-16",
-          $color-breadcrumb-arrow
-        ));
+      background-image: url("#{inline-icons('arrow-right-16', $color-breadcrumb-arrow)}");
     }
 
     &.is-active,
     &:only-child {
       @media screen and (max-width: ($screen-l - 1)) {
-        background-image: url(
-          inline-icons(
-            "arrow-left-16",
-            $color-breadcrumb-arrow
-          ));
+        background-image: url("#{inline-icons('arrow-left-16', $color-breadcrumb-arrow)}");
       }
     }
   }
@@ -63,7 +55,7 @@
       &:focus,
       &:hover,
       &:visited {
-        color: currentColor;
+        color: currentcolor;
       }
     }
   }
@@ -74,21 +66,13 @@
     #{$parent} {
       &__item {
         &:not(:first-child) {
-          background-image: url(
-            inline-icons(
-              "arrow-right-16",
-              $color-breadcrumb-arrow-invert
-            ));
+          background-image: url("#{inline-icons('arrow-right-16', $color-breadcrumb-arrow-invert)}");
         }
 
         &.is-active,
         &:only-child {
           @media screen and (max-width: ($screen-l - 1)) {
-            background-image: url(
-              inline-icons(
-                "arrow-left-16",
-                $color-breadcrumb-arrow-invert
-              ));
+            background-image: url("#{inline-icons('arrow-left-16', $color-breadcrumb-arrow-invert)}");
           }
         }
       }

diff --git a/packages/styles/components/_c.button.scss b/packages/styles/components/_c.button.scss
@@ -8,10 +8,10 @@
 
   align-items: stretch;
   box-sizing: border-box;
-  fill: currentColor;
+  fill: currentcolor;
 
   &:focus {
-    @include add-demo-state-class {
+    @include add-demo-state-class() {
       @include set-shadow-focus();
     }
   }
@@ -73,7 +73,7 @@
   }
 
   @each $name, $props in $buttons {
-    @if ($name != "solid") {
+    @if $name != "solid" {
       &--#{$name} {
         @include set-button-theme($props);
       }

diff --git a/packages/styles/components/_c.card.scss b/packages/styles/components/_c.card.scss
@@ -38,7 +38,7 @@
     }
 
     @each $ratio, $size in $card-visual-ratios {
-      @if ($ratio != "4x3") {
+      @if $ratio != "4x3" {
         &--#{$ratio}::before {
           padding-top: $size;
         }

diff --git a/packages/styles/components/_c.checkbox.scss b/packages/styles/components/_c.checkbox.scss
@@ -15,7 +15,7 @@
   }
 
   &__input {
-    @include reset-input;
+    @include reset-input();
 
     min-width: $checkbox-min-width;
     min-height: $checkbox-min-height;
@@ -36,7 +36,7 @@
     }
 
     &:hover {
-      @include add-demo-state-class {
+      @include add-demo-state-class() {
         border-color: $color-input-hover-border;
 
         &::-ms-check {
@@ -46,7 +46,7 @@
     }
 
     &:focus {
-      @include add-demo-state-class {
+      @include add-demo-state-class() {
         @include set-shadow-focus();
 
         &::-ms-check {

diff --git a/packages/styles/components/_c.datatable.scss b/packages/styles/components/_c.datatable.scss
@@ -4,7 +4,7 @@
   $parent: get-parent-selector(&);
   $border-size: 0.0625rem;
 
-  @include set-font-family;
+  @include set-font-family();
 
   box-sizing: border-box;
 
@@ -84,11 +84,11 @@
     }
   }
 
+  /* stylelint-disable no-descending-specificity */
   &__row {
     $datatable-row: &;
 
-    &-parent:not(.mc-datatable__row-parent--expanded)
-      + .mc-datatable__row-expandable {
+    &-parent:not(.mc-datatable__row-parent--expanded) + .mc-datatable__row-expandable {
       height: 0;
 
       .mc-datatable__row-inner {
@@ -97,8 +97,7 @@
       }
     }
 
-    &-parent.mc-datatable__row-parent--expanded
-      + .mc-datatable__row-expandable {
+    &-parent.mc-datatable__row-parent--expanded + .mc-datatable__row-expandable {
       .mc-datatable__row-inner {
         max-height: 100%;
       }
@@ -131,6 +130,7 @@
       }
     }
   }
+  /* stylelint-enable no-descending-specificity */
 
   &__cell {
     &-checkbox {
@@ -154,7 +154,7 @@
 
   // size
   @each $size, $props in $datatable-sizes {
-    @if ($size != "m") {
+    @if $size != "m" {
       &--#{$size} {
         #{$parent} {
           @include set-datatable-size($props);
@@ -164,6 +164,7 @@
   }
 
   // sticky
+  /* stylelint-disable no-duplicate-selectors */
   &--sticky,
   &--sticky-header {
     #{$parent} {
@@ -194,6 +195,7 @@
       }
     }
   }
+  /* stylelint-enable no-duplicate-selectors */
 
   &--sticky {
     #{$parent} {

diff --git a/packages/styles/components/_c.divider.scss b/packages/styles/components/_c.divider.scss
@@ -6,15 +6,15 @@
       border-#{$position}: $divider-border-size-s solid $color-divider-default;
 
       @each $name, $props in $dividers {
-        @if ($name != "default") {
+        @if $name != "default" {
           &--#{$name} {
             border-#{$position}-color: $props;
           }
         }
       }
 
       @each $size, $props in $divider-sizes {
-        @if ($size != "s") {
+        @if $size != "s" {
           &--#{$size} {
             border-#{$position}-width: $props;
           }

diff --git a/packages/styles/components/_c.file-uploader.scss b/packages/styles/components/_c.file-uploader.scss
@@ -25,29 +25,30 @@
       height: $mu150;
       display: flex;
       align-items: center;
-      background: transparent
-        url(inline-icons("upload-24", $color-button-bordered-border)) no-repeat;
+      background-color: transparent;
+      background-image: url("#{inline-icons('upload-24', $color-button-bordered-border)}");
+      background-repeat: no-repeat;
       background-size: $mu150;
       margin-right: $mu050;
       margin-left: -$mu050;
     }
 
     :focus + & {
-      @include add-demo-state-class {
+      @include add-demo-state-class() {
         @include set-shadow-focus();
       }
     }
 
     :hover + & {
-      @include add-demo-state-class {
+      @include add-demo-state-class() {
         @include set-button-theme(
           get-token(color, button, "bordered", "hover")
         );
       }
     }
 
     :disabled + & {
-      @include add-demo-state-class {
+      @include add-demo-state-class() {
         @include set-button-theme(
           get-token(color, button, "bordered", "disabled")
         );
@@ -56,9 +57,9 @@
         cursor: not-allowed;
 
         &::before {
-          background: transparent
-            url(inline-icons("upload-24", $color-button-bordered-disabled-font))
-            no-repeat;
+          background-color: transparent;
+          background-image: url("#{inline-icons('upload-24', $color-button-bordered-disabled-font)}");
+          background-repeat: no-repeat;
         }
       }
     }
@@ -106,17 +107,11 @@
     }
 
     &--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 {
@@ -147,8 +142,9 @@
       content: "";
       width: $mu150;
       height: $mu150;
-      background: transparent
-        url(inline-icons("delete-24", $color-fileuploader-font)) no-repeat;
+      background-color: transparent;
+      background-image: url("#{inline-icons('delete-24', $color-fileuploader-font)}");
+      background-repeat: no-repeat;
       display: block;
     }
 

diff --git a/packages/styles/components/_c.flag.scss b/packages/styles/components/_c.flag.scss
@@ -7,7 +7,7 @@
   @include set-flag-theme($parent, get-token(color, flag, "solid"));
 
   @each $name, $props in $flags {
-    @if ($name != "solid") {
+    @if $name != "solid" {
       &--#{$name} {
         @include set-flag-theme($parent, $props);
       }

diff --git a/packages/styles/components/_c.layer.scss b/packages/styles/components/_c.layer.scss
@@ -118,8 +118,9 @@
     @include set-focus-floating-base();
 
     align-self: flex-start;
-    background: transparent
-      url(inline-icons("control-cross-32", $color-dialog-close)) no-repeat;
+    background-color: transparent;
+    background-image: url("#{inline-icons('control-cross-32', $color-grey-500)}");
+    background-repeat: no-repeat;
     background-size: contain;
     cursor: pointer;
     height: $mu200;

diff --git a/packages/styles/components/_c.left-icon-input.scss b/packages/styles/components/_c.left-icon-input.scss
@@ -17,7 +17,7 @@
 
   @each $size, $props in $input-icon-sizes {
     &--#{$size} {
-      @if ($size != 'm') {
+      @if $size != "m" {
         @include set-input-icon-size($props, $parent);
       }
     }