[core] Fix stylelint violations (#1422)

docs/src/app/(private)/experiments/accordion/accordion.horizontal.module.css

@@ -7,12 +7,12 @@
 }
 
 .root {
-  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --shadow: 0px 2px 1px -1px rgb(0 0 0 / 0.2), 0px 1px 1px 0px rgb(0 0 0 / 0.14),
+    0px 1px 3px 0px rgb(0 0 0 / 0.12);
 
   font-family: system-ui, sans-serif;
   box-shadow: var(--shadow);
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
   border-radius: 0.3rem;
   height: 40rem;
   display: inline-flex;
@@ -21,7 +21,7 @@
 .item {
   position: relative;
   background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgb(0 0 0 / 0.87);
   display: flex;
 }
 
@@ -73,7 +73,7 @@
 
 .trigger:focus-visible {
   outline: 0;
-  background-color: rgba(0, 0, 0, 0.88);
+  background-color: rgb(0 0 0 / 0.88);
   color: #eee;
 }
 

docs/src/app/(private)/experiments/accordion/accordion.module.css

@@ -1,16 +1,18 @@
-@keyframes slideDown {
+@keyframes slide-down {
   from {
     height: 0;
   }
+
   to {
     height: var(--accordion-panel-height);
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   from {
     height: var(--accordion-panel-height);
   }
+
   to {
     height: 0;
   }
@@ -26,19 +28,19 @@
 
 .root {
   --duration: 300ms;
-  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --shadow: 0px 2px 1px -1px rgb(0 0 0 / 0.2), 0px 1px 1px 0px rgb(0 0 0 / 0.14),
+    0px 1px 3px 0px rgb(0 0 0 / 0.12);
 
   font-family: system-ui, sans-serif;
   box-shadow: var(--shadow);
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
   border-radius: 0.3rem;
 }
 
 .item {
   position: relative;
   background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgb(0 0 0 / 0.87);
 }
 
 .item:not(:first-of-type) {
@@ -75,7 +77,7 @@
 
 .trigger:focus-visible {
   outline: 0;
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgb(0 0 0 / 0.12);
 }
 
 .trigger .triggerText {
@@ -102,11 +104,11 @@
 }
 
 .panel.cssanimation[data-open] {
-  animation: slideDown var(--duration) ease-out;
+  animation: slide-down var(--duration) ease-out;
 }
 
 .panel.cssanimation {
-  animation: slideUp var(--duration) ease-out;
+  animation: slide-up var(--duration) ease-out;
 }
 
 .panel.csstransition[data-open] {

docs/src/app/(private)/experiments/collapsible/collapsible.module.css

@@ -83,11 +83,11 @@
 
 .animation {
   & .panel[data-open] {
-    animation: slideDown var(--duration) ease-out;
+    animation: slide-down var(--duration) ease-out;
   }
 
   & .panel {
-    animation: slideUp var(--duration) ease-in;
+    animation: slide-up var(--duration) ease-in;
   }
 }
 
@@ -98,19 +98,21 @@
   }
 }
 
-@keyframes slideDown {
+@keyframes slide-down {
   from {
     height: 0;
   }
+
   to {
     height: var(--collapsible-panel-height);
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   from {
     height: var(--collapsible-panel-height);
   }
+
   to {
     height: 0;
   }

docs/src/app/(private)/experiments/dialog.module.css

@@ -2,6 +2,7 @@
   from {
     transform: translate(-50%, -35%) scale(0.8) translateY(0);
   }
+
   to {
     transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
       translateY(calc(-30px * var(--nested-dialogs)));
@@ -12,6 +13,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
     visibility: visible;
@@ -68,12 +70,12 @@
   min-width: 300px;
   max-width: 500px;
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+  box-shadow: rgb(0 0 0 / 0.2) 0 18px 50px -10px;
   position: fixed;
   top: 50%;
   left: 50%;
   padding: 16px;
-  font-family: IBM Plex Sans;
+  font-family: 'IBM Plex Sans', sans-serif;
   z-index: 1;
   transform: translate(-50%, -50%);
   opacity: calc(pow(0.95, var(--nested-dialogs)));
@@ -175,10 +177,10 @@
   max-width: 1000px;
   margin: 0 auto;
   padding: 16px;
-  font-family: IBM Plex Sans;
+  font-family: 'IBM Plex Sans', sans-serif;
 
   & h1 {
-    font-family: General Sans;
+    font-family: 'General Sans', sans-serif;
     font-weight: 600;
     font-size: 2rem;
   }

docs/src/app/(private)/experiments/rtl.module.css

@@ -21,7 +21,7 @@
   background: #fff;
   border: 1px solid var(--color-gray-200);
   color: black;
-  box-shadow: 0px 4px 30px var(--color-gray-200);
+  box-shadow: 0 4px 30px var(--color-gray-200);
   z-index: 1;
   transform-origin: var(--transform-origin);
   opacity: 1;

docs/src/app/(private)/experiments/toggle.module.css

@@ -29,6 +29,11 @@
   cursor: not-allowed;
 }
 
+.button:focus-visible {
+  outline: 2px solid black;
+  z-index: 1;
+}
+
 .button:first-child {
   border-radius: var(--border-radius-left);
   border-inline-end-color: transparent;
@@ -56,11 +61,6 @@
   z-index: 1;
 }
 
-.button:focus-visible {
-  outline: 2px solid black;
-  z-index: 1;
-}
-
 .button svg {
   fill: none;
   stroke: currentColor;

docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/css-modules/index.module.css

@@ -7,6 +7,12 @@
   color: var(--color-gray-900);
 }
 
+.Icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform 150ms ease-out;
+}
+
 .Trigger {
   display: flex;
   align-items: center;
@@ -42,12 +48,6 @@
   }
 }
 
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  transition: transform 150ms ease-out;
-}
-
 .Panel {
   display: flex;
   height: var(--collapsible-panel-height);

docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css

@@ -99,7 +99,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;

docs/src/app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css

@@ -99,7 +99,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;

docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css

@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,6 +83,7 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;

docs/src/app/(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css

@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {

docs/src/app/(public)/(content)/react/components/number-field/demos/hero/css-modules/index.module.css

@@ -53,6 +53,16 @@
   }
 }
 
+.Decrement {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.Increment {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .Decrement,
 .Increment {
   box-sizing: border-box;
@@ -81,13 +91,3 @@
     background-color: var(--color-gray-100);
   }
 }
-
-.Decrement {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.Increment {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}

docs/src/app/(public)/layout.css

@@ -78,6 +78,7 @@
         left: 0;
         margin-left: -1px;
       }
+
       &::after {
         right: 0;
         margin-right: -1px;

docs/src/breakpoints.css

@@ -20,6 +20,6 @@
 @custom-media --md (min-width: 48rem);
 @custom-media --lg (min-width: 64rem);
 @custom-media --xl (min-width: 80rem);
-@custom-media --2xl (min-width: 96rem);
+@custom-media --2xl (min-width: 96rem); /* stylelint-disable-line custom-media-pattern */
 @custom-media --show-side-nav (min-width: 64rem);
 @custom-media --show-quick-nav (min-width: 84rem);

docs/src/components/Code.css

@@ -7,16 +7,16 @@
       white-space: normal;
     }
 
-    & [data-line]:empty {
-      height: 1lh;
-    }
-
     & [data-line] {
       display: block;
       white-space: pre;
       padding-inline: 0.75rem;
     }
 
+    & [data-line]:empty {
+      height: 1lh;
+    }
+
     & mark {
       display: inline-block;
     }

docs/src/components/CodeBlock.css

@@ -22,10 +22,10 @@
     border-bottom: 1px solid var(--color-gray-200);
 
     /* Scroll */
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     overscroll-behavior-x: contain;
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       display: none;
     }