chore: add scss linter

.stylelintignore

@@ -0,0 +1,4 @@
+apps/docs/out/
+packages/design-tokens/dist/
+packages/stylesheet/dist/
+packages/components/dist/

apps/docs/src/app/_components/layout/Footer/footer.module.scss

@@ -24,6 +24,7 @@
     .feedbackImage {
       display: none;
     }
+
     .footerContent {
       padding-inline: var(--size-px--xl);
     }

apps/docs/src/app/global.scss

@@ -6,7 +6,6 @@
 
 html {
   scroll-behavior: smooth;
-  data-scroll-behavior: smooth;
 }
 
 body {

apps/docs/src/app/layout.module.scss

@@ -1,5 +1,6 @@
 .body {
   --header-height: 72px;
+
   background-color: var(--neutral--color--300);
   isolation: isolate;
 
@@ -28,6 +29,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
+
   &.scrolled {
     box-shadow: var(--shadow--content);
   }
@@ -121,9 +123,8 @@
   padding: 0;
 
   .homeImage {
-    border-bottom-color: var(--separator--color);
-    border-bottom-width: var(--separator--height);
-    border-bottom-style: var(--border-style--default);
+    border-bottom: var(--separator--height) var(--border-style--default)
+      var(--separator--color);
   }
 
   .homeTopContent {
@@ -143,6 +144,7 @@
     display: flex;
     padding-block: var(--size-px--m);
   }
+
   .mobileNavigationOffCanvas {
     h3 {
       display: none;

apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css

@@ -1,5 +1,10 @@
+.preview {
+  padding: var(--size-px--l);
+}
+
 .liveCodeEditor {
   --border-color: var(--neutral-outline-border-color);
+
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius--default);
   background-color: var(--neutral--color--200);
@@ -36,6 +41,19 @@
       .preview {
         background-color: var(--primary--color--1000);
       }
+
+      .mobile {
+        height: 100%;
+
+        .preview {
+          border-inline: 4px solid var(--neutral--color--500);
+          margin: 0 auto;
+          padding: var(--size-px--l);
+          max-width: 400px;
+          background-color: var(--neutral--color--100);
+          height: 100%;
+        }
+      }
     }
   }
 
@@ -50,33 +68,15 @@
     --modal--size--s: auto;
     --modal--size--m: auto;
     --modal--size--l: auto;
+
     box-shadow: var(--shadow--overlay);
   }
 }
 
-.preview {
-  padding: var(--size-px--l);
-}
-
 .editorContainer {
   overflow-x: auto;
 }
 
-.darkBackground {
-  .mobile {
-    height: 100%;
-
-    .preview {
-      border-inline: 4px solid var(--neutral--color--500);
-      margin: 0 auto;
-      padding: var(--size-px--l);
-      max-width: 400px;
-      background-color: var(--neutral--color--100);
-      height: 100%;
-    }
-  }
-}
-
 .toggleCode {
   width: 100% !important;
   outline-offset: calc(var(--size-px--xxs) * -1) !important;
@@ -98,6 +98,7 @@
   border-top: 1px solid var(--border-color);
   display: flex;
   justify-content: center;
+
   button {
     padding-block: var(--size-px--s);
   }

apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/Row/Row.module.css

@@ -1,8 +1,6 @@
 .row {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  column-gap: var(--size-rem--m);
-  row-gap: var(--size-rem--m);
+  flex-flow: row wrap;
+  gap: var(--size-rem--m);
   align-items: center;
 }

apps/docs/src/lib/mdx/components/DesignTokenTable/Samples/Sample.module.scss

@@ -23,6 +23,7 @@
   width: fit-content;
   border-radius: 4px;
   border: solid 1px;
+
   &:where(.padding) {
     background: repeating-linear-gradient(
       45deg,
@@ -33,6 +34,7 @@
     );
     border-color: var(--color--soft-contrast-violet--700);
   }
+
   &:where(.margin) {
     background: repeating-linear-gradient(
       45deg,
@@ -50,10 +52,12 @@
   padding: 25px 20px;
   border: 1px solid;
   border-radius: 4px;
+
   &:where(.padding) {
     color: var(--color--soft-contrast-violet--800);
     border-color: var(--color--soft-contrast-violet--800);
   }
+
   &:where(.margin) {
     color: var(--color--super-teal--800);
     border-color: var(--color--super-teal--800);

apps/docs/src/lib/mdx/components/MdxFileView/customComponents.module.css

@@ -30,16 +30,19 @@
 .anchorLinkHeading {
   width: fit-content;
   scroll-margin-top: 6rem;
+
   > span {
     display: flex;
     align-items: center;
     column-gap: var(--size-rem--s);
   }
+
   .anchorButton {
     opacity: 0;
     transition-property: opacity;
     transition-duration: var(--transition--duration--fast);
   }
+
   &:hover {
     .anchorButton {
       opacity: 1;
@@ -107,14 +110,17 @@
     "firstContent secondContent";
   grid-template-columns: 1fr 1fr;
 
-  .doAndDontCode:first-of-type,
-  .doAndDontText:first-of-type {
-    grid-area: firstExample;
-  }
+  .doAndDontCode,
+  .doAndDontText {
+    margin-bottom: 0;
 
-  .doAndDontCode:last-of-type,
-  .doAndDontText:last-of-type {
-    grid-area: secondExample;
+    &:last-of-type {
+      grid-area: secondExample;
+    }
+
+    &:first-of-type {
+      grid-area: firstExample;
+    }
   }
 
   .doAndDontContent:first-of-type {
@@ -124,11 +130,6 @@
   .doAndDontContent:last-of-type {
     grid-area: secondContent;
   }
-
-  .doAndDontCode,
-  .doAndDontText {
-    margin-bottom: 0;
-  }
 }
 
 @media (max-width: 1200px) {

package.json

@@ -17,7 +17,7 @@
     "dev": "nx build:deps $@ && concurrently \"yarn watch $@\" \"yarn nx dev $@\"",
     "dev:init-githooks": "pnpm dlx simple-git-hooks",
     "format": "prettier --write '**/*.{ts,tsx,yaml,yml,json,md,mdx,js,cjs,mjs,css}'",
-    "lint": "eslint .",
+    "lint": "eslint . && stylelint '**/*.{css,scss}'",
     "test": "nx run-many --targets=test:unit,test:compile",
     "test:browser": "nx run-many --targets=test:browser,test:e2e,test:visual",
     "test:browser:prepare": "pnpx playwright install --with-deps firefox webkit",
@@ -58,6 +58,10 @@
     "prettier-plugin-sort-json": "^4.2.0",
     "react-docgen-typescript": "^2.4.0",
     "simple-git-hooks": "^2.13.1",
+    "stylelint": "^17.0.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-scss": "^7.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",

packages/components/src/components/AccentBox/AccentBox.module.scss

@@ -22,6 +22,7 @@
   @mixin status($color) {
     &.#{$color} {
       background: var(--accent-box--background-color-#{$color});
+
       > svg {
         color: var(--accent-box--icon-color-#{$color});
       }

packages/components/src/components/Accordion/Accordion.module.scss

@@ -39,7 +39,6 @@
     grid-template-rows: 0fr;
     transition-property: grid-template-rows, visibility;
     transition-duration: var(--transition--duration--slow);
-
     visibility: hidden;
   }
 

packages/components/src/components/Align/Align.module.scss

@@ -3,7 +3,9 @@
     display: flex;
     gap: var(--align--avatar-text--spacing);
     height: fit-content;
+
     --first-two-lines-height: calc(var(--line-height--s) * 2);
+
     min-height: var(--first-two-lines-height);
 
     .text {

packages/components/src/components/Avatar/Avatar.module.scss

@@ -6,10 +6,8 @@
   flex-shrink: 0;
   font-weight: var(--font-weight--bold);
   font-size: calc(var(--avatar-size) * 0.35);
-
   background-color: var(--background-color);
   color: var(--content-color);
-
   display: flex;
   align-items: center;
   justify-content: center;

packages/components/src/components/AvatarStack/AvatarStack.module.scss

@@ -9,13 +9,15 @@
         var(--avatar-size) / 2 + var(--avatar-stack--border-width)
       );
       --mask-offset: calc(var(--avatar-size) * -0.25);
+
       mask: radial-gradient(
         circle at var(--mask-size) center,
         transparent var(--mask-cutout),
         white 0
       );
       margin-right: var(--mask-offset);
     }
+
     outline-offset: calc(var(--size-px--xxs) * -1);
   }
 

packages/components/src/components/Badge/Badge.module.scss

@@ -50,13 +50,11 @@
     }
 
     .value {
-      padding-inline-start: var(--badge--spacing);
-      padding-inline-end: var(--badge--padding-x);
+      padding-inline: var(--badge--spacing) var(--badge--padding-x);
     }
 
     .scope {
-      padding-inline-start: var(--badge--padding-x);
-      padding-inline-end: var(--badge--spacing);
+      padding-inline: var(--badge--padding-x) var(--badge--spacing);
       height: 100%;
       flex-shrink: 0;
     }

packages/components/src/components/Button/Button.module.scss

@@ -4,7 +4,7 @@
 
 .button {
   position: relative;
-  font-family: "Inter", sans-serif;
+  font-family: Inter, sans-serif;
   font-size: var(--font-size-text--default);
   font-weight: bold;
   line-height: var(--line-height--default);
@@ -147,7 +147,6 @@
       background-color: var(
         --button--#{$color}-#{$variant}-background-color--default
       );
-
       color: var(--button--#{$color}-#{$variant}-content-color--default);
 
       &.outline {
@@ -160,15 +159,13 @@
         background-color: var(
           --button--#{$color}-#{$variant}-background-color--hover
         );
-
         color: var(--button--#{$color}-#{$variant}-content-color--hover);
       }
 
       &[data-pressed]:where(:not([data-readonly])) {
         background-color: var(
           --button--#{$color}-#{$variant}-background-color--pressed
         );
-
         color: var(--button--#{$color}-#{$variant}-content-color--pressed);
       }
 
@@ -215,6 +212,5 @@
   @include variant(secondary, outline);
   @include variant(dark, outline);
   @include variant(light, outline);
-
   @include avatarButton.avatarButton();
 }