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

Resolves #1062
adeo · Dec 19, 2022 · 7006d18 · 7006d18
1 parent f8b29b8
commit 7006d18
Show file tree

Hide file tree

Showing 85 changed files with 577 additions and 619 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;
 
@@ -32,7 +32,7 @@
 
   // table
   @include set-datatable-size($datatabke-default-celle-size);
-  
+
   &__table {
     @include set-datatable-base();
 
@@ -85,11 +85,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 {
@@ -98,8 +98,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%;
       }
@@ -132,6 +131,7 @@
       }
     }
   }
+  /* stylelint-enable no-descending-specificity */
 
   &__cell {
     &-checkbox {
@@ -155,7 +155,7 @@
 
   // size
   @each $size, $props in $datatable-sizes {
-    @if ($size != "m") {
+    @if $size != "m" {
       &--#{$size} {
         #{$parent} {
           @include set-datatable-size($props);
@@ -165,6 +165,7 @@
   }
 
   // sticky
+  /* stylelint-disable no-duplicate-selectors */
   &--sticky,
   &--sticky-header {
     #{$parent} {
@@ -195,6 +196,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.dropdown.scss b/packages/styles/components/_c.dropdown.scss
@@ -19,11 +19,11 @@
     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 {
-      @include add-demo-state-class {
+      @include add-demo-state-class () {
         border-color: transparent;
         background-color: $color-grey-100;
         color: $color-grey-600;

diff --git a/packages/styles/components/_c.fields.scss b/packages/styles/components/_c.fields.scss
@@ -7,19 +7,19 @@
   }
 
   &__label {
-    @include set-font-scale('04', 's');
+    @include set-font-scale("04", "s");
   }
 
   &__legend {
-    @include set-font-scale('04', 'm');
+    @include set-font-scale("04", "m");
 
     padding-left: 0;
     padding-right: 0;
   }
 
   &__requirement,
   &__help {
-    @include set-font-scale('02', 's');
+    @include set-font-scale("02", "s");
 
     color: $color-fields-requirement;
   }
@@ -44,18 +44,18 @@
     margin-top: $mu100;
 
     &--inline {
-      @include set-from-screen('m-medium') {
+      @include set-from-screen("m-medium") {
         display: flex;
       }
 
       #{$parent}__item {
         &:not(:last-child) {
-          @include set-from-screen('m-medium') {
+          @include set-from-screen("m-medium") {
             margin-bottom: 0;
             margin-right: $mu100;
           }
 
-          @include set-from-screen('l') {
+          @include set-from-screen("l") {
             margin-right: $mu200;
           }
         }
@@ -70,7 +70,7 @@
   }
 
   &__error-message {
-    @include set-font-scale('04', 'm');
+    @include set-font-scale("04", "m");
 
     color: $color-fields-error;
     display: inline-block;