refactor(stylelint): refactor to and enforce kebab-casing for Sass ut…

…ilities (#10147)

**Related Issue:** #7365

## Summary
Refactor sass names to kebab-case.

packages/calcite-components/.stylelintrc.json

@@ -40,6 +40,34 @@
       {
         "ignoreTypes": ["/^calcite-/"]
       }
+    ],
+    "scss/at-function-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/at-mixin-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
+    ],
+    "scss/percent-placeholder-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+      {
+        "message": "Name should be kebab-cased.",
+        "severity": "error"
+      }
     ]
   }
 }

packages/calcite-components/src/assets/styles/_animation.scss

@@ -115,9 +115,9 @@
 }
 
 /* helper to properly scale internal durations */
-@function scaleDuration($animationVar, $factor) {
+@function scale-duration($animation-var, $factor) {
   @return calc(
-    calc(var($animationVar) / var(--calcite-internal-duration-factor)) *
+    calc(var($animation-var) / var(--calcite-internal-duration-factor)) *
       calc($factor / var(--calcite-internal-duration-factor))
   );
 }

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -1,18 +1,18 @@
 $floating-ui-transition-offset: 5px;
 
-@mixin floatingUIOffsetBottom {
+@mixin floating-ui-offset-bottom {
   inset-block-start: -$floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetTop {
+@mixin floating-ui-offset-top {
   inset-block-start: $floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetLeft {
+@mixin floating-ui-offset-left {
   left: $floating-ui-transition-offset;
 }
 
-@mixin floatingUIOffsetRight {
+@mixin floating-ui-offset-right {
   left: -$floating-ui-transition-offset;
 }
 
@@ -21,7 +21,7 @@ $floating-ui-transition-offset: 5px;
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
 }
 
-@mixin floatingUIAnim {
+@mixin floating-ui-anim {
   .calcite-floating-ui-anim {
     position: relative;
     transition: var(--calcite-floating-ui-transition);
@@ -32,87 +32,87 @@ $floating-ui-transition-offset: 5px;
   }
 }
 
-@mixin floatingUIAnimActive {
+@mixin floating-ui-anim-active {
   opacity: 1;
   inset-block: 0;
   left: 0;
 }
 
-@mixin floatingUIElemAnim($selector) {
+@mixin floating-ui-elem-anim($selector) {
   #{$selector} {
-    @include floatingUIAnim();
+    @include floating-ui-anim();
 
     &[data-placement^="bottom"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetBottom();
+      @include floating-ui-offset-bottom();
     }
 
     &[data-placement^="top"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetTop();
+      @include floating-ui-offset-top();
     }
 
     &[data-placement^="left"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetLeft();
+      @include floating-ui-offset-left();
     }
 
     &[data-placement^="right"] .calcite-floating-ui-anim {
-      @include floatingUIOffsetRight();
+      @include floating-ui-offset-right();
     }
 
     &[data-placement] .calcite-floating-ui-anim--active {
-      @include floatingUIAnimActive();
+      @include floating-ui-anim-active();
     }
   }
 }
 
-@mixin floatingUIHostAnim {
-  @include floatingUIAnim();
+@mixin floating-ui-host-anim {
+  @include floating-ui-anim();
 
   :host([data-placement^="bottom"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetBottom();
+    @include floating-ui-offset-bottom();
   }
 
   :host([data-placement^="top"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetTop();
+    @include floating-ui-offset-top();
   }
 
   :host([data-placement^="left"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetLeft();
+    @include floating-ui-offset-left();
   }
 
   :host([data-placement^="right"]) .calcite-floating-ui-anim {
-    @include floatingUIOffsetRight();
+    @include floating-ui-offset-right();
   }
 
   :host([data-placement]) .calcite-floating-ui-anim--active {
-    @include floatingUIAnimActive();
+    @include floating-ui-anim-active();
   }
 }
 
-@mixin floatingUIContainer() {
+@mixin floating-ui-container() {
   display: block;
   position: absolute;
   z-index: var(--calcite-floating-ui-z-index);
 }
 
-@mixin floatingUIWrapper {
+@mixin floating-ui-wrapper {
   visibility: hidden;
 }
 
-@mixin floatingUIWrapperActive {
+@mixin floating-ui-wrapper-active {
   visibility: visible;
 }
 
-@mixin floatingUIHost() {
+@mixin floating-ui-host() {
   :host {
-    @include floatingUIContainer();
+    @include floating-ui-container();
   }
 
-  @include floatingUIHostAnim();
+  @include floating-ui-host-anim();
 
-  @include calciteHydratedHidden();
+  @include calcite-hydrated-hidden();
 }
 
-@mixin floatingUIArrow {
+@mixin floating-ui-arrow {
   .calcite-floating-ui-arrow {
     @apply -z-default
     absolute

packages/calcite-components/src/assets/styles/includes.scss

@@ -90,7 +90,7 @@
 }
 
 // mixin to provide default invisibility and disabling of pointer events for components.
-@mixin calciteHydratedHidden() {
+@mixin calcite-hydrated-hidden() {
   :host([calcite-hydrated-hidden]) {
     visibility: hidden !important; // 'important' is being used here to temporarily handle precendence of visibility set with calcite-hydrated. Do not follow this pattern. See #991.
     pointer-events: none;
@@ -107,7 +107,7 @@
   }
 }
 
-@mixin xButton() {
+@mixin x-button() {
   :host([scale="s"]) {
     .x-button {
       inline-size: theme("spacing.4");

packages/calcite-components/src/components/alert/alert.scss

@@ -258,16 +258,16 @@ $border-style: 1px solid var(--calcite-color-border-3);
   @apply text-color-link inline-flex;
 }
 
-$alertKinds:
+$alert-kinds:
   "brand" var(--calcite-color-brand),
   "info" var(--calcite-color-status-info),
   "danger" var(--calcite-color-status-danger),
   "success" var(--calcite-color-status-success),
   "warning" var(--calcite-color-status-warning);
 
-@each $alertKind in $alertKinds {
-  $name: nth($alertKind, 1);
-  $kind: nth($alertKind, 2);
+@each $alert-kind in $alert-kinds {
+  $name: nth($alert-kind, 1);
+  $kind: nth($alert-kind, 2);
 
   :host([kind="#{$name}"]) {
     .container {
@@ -280,14 +280,14 @@ $alertKinds:
   }
 }
 
-$alertDurations:
+$alert-durations:
   "fast" 6000ms,
   "medium" 10000ms,
   "slow" 14000ms;
 
-@each $alertDuration in $alertDurations {
-  $name: nth($alertDuration, 1);
-  $duration: nth($alertDuration, 2);
+@each $alert-duration in $alert-durations {
+  $name: nth($alert-duration, 1);
+  $duration: nth($alert-duration, 2);
 
   :host([auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation: dismissProgress $duration ease-out;
@@ -319,4 +319,4 @@ $alertDurations:
 }
 
 @include base-component();
-@include calciteHydratedHidden();
+@include calcite-hydrated-hidden();

packages/calcite-components/src/components/combobox/combobox.scss

@@ -11,7 +11,7 @@
 }
 
 @include disabled();
-@include xButton();
+@include x-button();
 
 :host([scale="s"]) {
   @apply text-n2;
@@ -202,14 +202,14 @@
 
 .floating-ui-container {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
-  @include floatingUIContainer();
-  @include floatingUIWrapper();
+  @include floating-ui-container();
+  @include floating-ui-wrapper();
 }
 
-@include floatingUIElemAnim(".floating-ui-container");
+@include floating-ui-elem-anim(".floating-ui-container");
 
 .floating-ui-container--active {
-  @include floatingUIWrapperActive();
+  @include floating-ui-wrapper-active();
 }
 
 @media (forced-colors: active) {

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

@@ -1,4 +1,4 @@
-@mixin itemStyling {
+@mixin item-styling {
   @apply text-color-3
     relative
     flex
@@ -19,11 +19,11 @@
 }
 
 .container {
-  @include itemStyling;
+  @include item-styling;
   @apply text-start;
 
   & a {
-    @include itemStyling;
+    @include item-styling;
     @apply focus-base;
   }
 }

packages/calcite-components/src/components/dropdown/dropdown.scss

@@ -14,13 +14,13 @@
 
 :host .calcite-dropdown-wrapper {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
-  @include floatingUIContainer();
-  @include floatingUIWrapper();
+  @include floating-ui-container();
+  @include floating-ui-wrapper();
 }
 
-@include floatingUIElemAnim(".calcite-dropdown-wrapper");
+@include floating-ui-elem-anim(".calcite-dropdown-wrapper");
 :host([open]) .calcite-dropdown-wrapper {
-  @include floatingUIWrapperActive();
+  @include floating-ui-wrapper-active();
 }
 
 :host .calcite-dropdown-content {

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss

@@ -1,6 +1,6 @@
 :host {
   @extend %component-spacing;
-  @include floatingUIElemAnim(".menu-container");
+  @include floating-ui-elem-anim(".menu-container");
   @apply relative
     inline-block
     w-full
@@ -108,19 +108,19 @@
 
 .menu-container {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
-  @include floatingUIContainer();
-  @include floatingUIWrapper();
+  @include floating-ui-container();
+  @include floating-ui-wrapper();
   @apply invisible;
 }
 
-@include floatingUIElemAnim(".menu-container");
+@include floating-ui-elem-anim(".menu-container");
 
 :host([open]) .menu-container {
-  @include floatingUIWrapperActive();
+  @include floating-ui-wrapper-active();
 }
 
 .menu-container--active {
-  @include floatingUIWrapperActive();
+  @include floating-ui-wrapper-active();
 }
 
 .input .calcite-input__wrapper {

packages/calcite-components/src/components/loader/loader.scss

@@ -184,7 +184,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
               (size + growth should not exceed 100)
   - duration  how long the segment takes to rotate 360° (seconds)
 */
-@mixin generateSegment($i, $size, $growth, $duration) {
+@mixin generate-segment($i, $size, $growth, $duration) {
   $circumference: calc($loader-circumference / $loader-scale) * 100;
   $length: ($size * 0.01) * $circumference;
   $end: $length + ($growth * 0.01) * $circumference;
@@ -209,9 +209,9 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   }
 }
 
-@include generateSegment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));
-@include generateSegment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));
-@include generateSegment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));
+@include generate-segment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));
+@include generate-segment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));
+@include generate-segment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));
 
 @keyframes loader-color-shift {
   0% {

packages/calcite-components/src/components/notice/notice.scss

@@ -162,16 +162,16 @@
   @apply flex self-stretch;
 }
 
-$noticeKinds:
+$notice-kinds:
   "brand" var(--calcite-color-brand),
   "info" var(--calcite-color-status-info),
   "danger" var(--calcite-color-status-danger),
   "success" var(--calcite-color-status-success),
   "warning" var(--calcite-color-status-warning);
 
-@each $noticeKind in $noticeKinds {
-  $name: nth($noticeKind, 1);
-  $kind: nth($noticeKind, 2);
+@each $notice-kind in $notice-kinds {
+  $name: nth($notice-kind, 1);
+  $kind: nth($notice-kind, 2);
 
   :host([kind="#{$name}"]) .container {
     border-color: $kind;