chore(lint): fix linting errors

package.json

@@ -22,7 +22,7 @@
     "format": "prettier --cache --write '**/*.{js,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:diff": "prettier --list-different '**/*.{js,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
     "lint": "eslint actions config packages www",
-    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "lint:styles": "stylelint '**/*.scss' --report-needless-disables --report-invalid-scope-disables",
     "sync": "carbon-cli sync",
     "test": "cross-env BABEL_ENV=test jest",
     "test:e2e": "cross-env BABEL_ENV=test jest -c jest.e2e.config.js",

packages/styles/scss/components/button/_mixins.scss

@@ -48,9 +48,9 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   flex-shrink: 0;
   justify-content: space-between;
+  border-radius: $button-border-radius;
   // Fix to remove added margins on buttons in safari (see #5155)
   margin: 0;
-  border-radius: $button-border-radius;
   cursor: pointer;
   inline-size: max-content;
   max-inline-size: convert.to-rem(320px);

packages/styles/scss/components/checkbox/_checkbox.scss

@@ -86,14 +86,14 @@
     // text overflows.
     position: absolute;
     border: 1px solid $icon-primary;
+    border-radius: 2px;
     // increase left margin for #6480
     margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px)
       convert.to-rem(3px);
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
     block-size: convert.to-rem(16px);
-    border-radius: 2px;
     content: '';
 
     // According to the spec, we'll want the bounding box for our checkbox to

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -71,8 +71,8 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 1px solid transparent;
-    background-color: $layer;
     border-radius: 4px;
+    background-color: $layer;
     color: $text-primary;
     cursor: pointer;
 

packages/styles/scss/components/date-picker/_flatpickr.scss

@@ -95,8 +95,8 @@
     box-sizing: border-box;
     padding: 0;
     border: 0;
-    animation: none;
     border-radius: 0;
+    animation: none;
     direction: ltr;
     inline-size: convert.to-rem(315px);
     max-block-size: 0;

packages/styles/scss/components/list-box/_list-box.scss

@@ -464,9 +464,9 @@ $list-box-menu-width: convert.to-rem(300px);
     align-items: center;
     justify-content: space-between;
     padding: convert.to-rem(8px);
+    border-radius: convert.to-rem(12px);
     background-color: $background-inverse;
     block-size: convert.to-rem(24px);
-    border-radius: convert.to-rem(12px);
     color: $text-inverse;
     inline-size: auto;
     inset-block-start: auto;
@@ -485,8 +485,8 @@ $list-box-menu-width: convert.to-rem(300px);
     margin-inline-start: convert.to-rem(4px);
 
     &:hover {
-      background-color: $button-secondary-hover;
       border-radius: 50%;
+      background-color: $button-secondary-hover;
     }
   }
 

packages/styles/scss/components/number-input/_number-input.scss

@@ -45,14 +45,14 @@
     display: inline-flex;
     box-sizing: border-box;
     border: 0;
+    border-radius: 0;
 
     // Firefox: Hide spinner (up and down buttons)
     -moz-appearance: textfield;
     appearance: textfield;
     background-color: $field;
     block-size: convert.to-rem(40px);
     border-block-end: convert.to-rem(1px) solid $border-strong;
-    border-radius: 0;
     color: $text-primary;
     font-family: font-family('sans');
     font-weight: 400;

packages/styles/scss/components/popover/_popover.scss

@@ -130,8 +130,8 @@ $popover-caret-height: custom-property.get-var(
     position: absolute;
     z-index: z('floating');
     display: none;
-    background-color: $popover-background-color;
     border-radius: $popover-border-radius;
+    background-color: $popover-background-color;
     color: $popover-text-color;
     inline-size: max-content;
     max-inline-size: convert.to-rem(368px);

packages/styles/scss/components/progress-indicator/_progress-indicator.scss

@@ -70,8 +70,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     position: relative;
     z-index: 1;
     flex-shrink: 0;
-    block-size: $spacing-05;
     border-radius: 50%;
+    block-size: $spacing-05;
     fill: $interactive;
     inline-size: $spacing-05;
     margin-block-start: convert.to-rem(10px);

packages/styles/scss/components/radio-button/_radio-button.scss

@@ -83,9 +83,9 @@ $radio-border-width: 1px !default;
 
     flex-shrink: 0;
     border: $radio-border-width solid $icon-primary;
+    border-radius: 50%;
     background-color: transparent;
     block-size: convert.to-rem(18px);
-    border-radius: 50%;
     inline-size: convert.to-rem(18px);
     margin-block: convert.to-rem(1px) convert.to-rem(2px);
     margin-inline: convert.to-rem(2px) $spacing-03;
@@ -102,9 +102,9 @@ $radio-border-width: 1px !default;
     &::before {
       position: relative;
       display: inline-block;
+      border-radius: 50%;
       background-color: $icon-primary;
       block-size: 100%;
-      border-radius: 50%;
       content: '';
       inline-size: 100%;
       transform: scale(0.5);

packages/styles/scss/components/select/_select.scss

@@ -45,11 +45,11 @@
 
     display: block;
     border: none;
+    border-radius: 0;
     appearance: none;
     background-color: $field;
     block-size: convert.to-rem(40px);
     border-block-end: 1px solid $border-strong;
-    border-radius: 0;
     color: $text-primary;
     cursor: pointer;
     font-family: inherit;

packages/styles/scss/components/slider/_slider.scss

@@ -88,9 +88,9 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
+    border-radius: 50%;
     background: $layer-selected-inverse;
     block-size: convert.to-rem(14px);
-    border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
     inline-size: convert.to-rem(14px);
     outline: none;

packages/styles/scss/components/tag/_tag.scss

@@ -44,8 +44,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin: $spacing-02;
     border-radius: convert.to-rem(15px);
+    margin: $spacing-02;
     cursor: default;
     // restricts size of contained elements
     max-inline-size: 100%;
@@ -186,10 +186,10 @@
     justify-content: center;
     padding: 0;
     border: 0;
+    border-radius: 50%;
     margin: 0 0 0 convert.to-rem(2px);
     background-color: transparent;
     block-size: layout.size('height');
-    border-radius: 50%;
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');

packages/styles/scss/components/toggle/_toggle.scss

@@ -51,17 +51,17 @@
 
   .#{$prefix}--toggle__switch {
     position: relative;
+    border-radius: convert.to-rem(12px);
     background-color: $toggle-off;
     block-size: convert.to-rem(24px);
-    border-radius: convert.to-rem(12px);
     inline-size: convert.to-rem(48px);
     transition: background-color $duration-fast-01 motion(exit, productive);
 
     &::before {
       position: absolute;
+      border-radius: 50%;
       background-color: $icon-on-color;
       block-size: convert.to-rem(18px);
-      border-radius: 50%;
       content: '';
       inline-size: convert.to-rem(18px);
       inset-block-start: convert.to-rem(3px);
@@ -204,9 +204,10 @@
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
     @include circular-skeleton;
 
-    block-size: convert.to-rem(18px);
     border-radius: 50%;
 
+    block-size: convert.to-rem(18px);
+
     inline-size: convert.to-rem(18px);
   }
 

packages/styles/scss/components/tooltip/_tooltip.scss

@@ -46,9 +46,10 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    border-block-end: 1px dotted theme.$border-strong;
     border-radius: 0;
 
+    border-block-end: 1px dotted theme.$border-strong;
+
     color: theme.$text-primary;
   }
 

packages/styles/scss/utilities/_skeleton.scss

@@ -50,8 +50,8 @@
 @mixin circular-skeleton {
   position: relative;
   overflow: hidden;
-  background: $skeleton-background;
   border-radius: 50%;
+  background: $skeleton-background;
 
   &::before {
     position: absolute;

packages/styles/scss/utilities/_tooltip.scss

@@ -41,9 +41,9 @@
     convert.to-rem(8px) convert.to-rem(16px),
     convert.to-rem(3px) convert.to-rem(16px)
   );
+  border-radius: convert.to-rem(2px);
   background-color: $background-inverse;
   block-size: auto;
-  border-radius: convert.to-rem(2px);
   color: $text-inverse;
   font-weight: 400;
   inline-size: max-content;