Refactor Sass mixin/function/vars/placeholder names to be kebab-case

[driskull]

Description

All sass mixin/function/vars/placeholder names should be kebab case for consistency and to follow Sass naming rules.

• https://sass-lang.com/documentation/at-rules/mixin/
• https://sass-lang.com/documentation/variables/
• https://sass-lang.com/documentation/style-rules/placeholder-selectors/
• https://sass-lang.com/documentation/at-rules/function/

E.g.,

• @mixin calciteHydratedHidden() => @mixin calcite-hydrated-hidden()

Additionally, the following stylelint-scss rules should be enabled to enforce this naming convention:

• https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-function-pattern/README.md
• https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-mixin-pattern/README.md
• https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-pattern/README.md
• https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/percent-placeholder-pattern/README.md

Proposed Advantages

development consistency

Which Component

All components

Relevant Info

#7346 (comment)

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react