update stylelint

.prettierrc.yml

@@ -1,5 +1,4 @@
 arrowParens: 'always'
-jsxBracketSameLine: true
 printWidth: 120
 singleQuote: true
 trailingComma: 'es5'

.stylelintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "stylelint-config-rational-order",
+    "stylelint-config-standard-scss"
+  ],
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "at-rule-no-unknown": null,
+    "color-function-notation": "modern",
+    "declaration-empty-line-before": null,
+    "function-max-empty-lines": 1,
+    "max-line-length": null,
+    "no-descending-specificity": null,
+    "property-no-vendor-prefix": null,
+    "string-quotes": "single",
+    "selector-class-pattern": null,
+    "value-list-max-empty-lines": 1,
+    "value-keyword-case": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-import-partial-extension": null
+  }
+}

package.json

@@ -56,6 +56,7 @@
     "stylelint": "14.5.3",
     "stylelint-config-rational-order": "0.1.2",
     "stylelint-config-standard": "25.0.0",
+    "stylelint-config-standard-scss": "3.0.0",
     "stylelint-scss": "4.1.0"
   }
 }

src/components/demo-github-buttons.tsx

@@ -13,14 +13,16 @@ export class GitHubButtons {
             href="https://github.com"
             target="_blank"
             class="c-github-button__link c-github-button__link--button"
-            aria-label="Open on GitHub">
+            aria-label="Open on GitHub"
+          >
             <svg
               version="1.1"
               width="14"
               height="16"
               viewBox="0 0 14 16"
               class="c-github-button__icon c-github-button__icon--star"
-              aria-hidden="true">
+              aria-hidden="true"
+            >
               <path
                 fill-rule="evenodd"
                 d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"
@@ -32,7 +34,8 @@ export class GitHubButtons {
             href="https://github.com"
             target="_blank"
             class="c-github-button__link c-github-button__link--count"
-            aria-label="Open on GitHub">
+            aria-label="Open on GitHub"
+          >
             <b />
             <i />
             <span>1,337</span>
@@ -43,14 +46,16 @@ export class GitHubButtons {
             href="https://github.com"
             target="_blank"
             class="c-github-button__link c-github-button__link--button"
-            aria-label="Open on GitHub">
+            aria-label="Open on GitHub"
+          >
             <svg
               version="1.1"
               width="14"
               height="16"
               viewBox="0 0 14 16"
               class="c-github-button__icon c-github-button__icon--star"
-              aria-hidden="true">
+              aria-hidden="true"
+            >
               <path
                 fill-rule="evenodd"
                 d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"
@@ -62,7 +67,8 @@ export class GitHubButtons {
             href="https://github.com"
             target="_blank"
             class="c-github-button__link c-github-button__link--count"
-            aria-label="Open on GitHub">
+            aria-label="Open on GitHub"
+          >
             <b />
             <i />
             <span>1,337</span>

src/components/demo-progress-bars.tsx

@@ -135,7 +135,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '15%' }}
-            class="c-progress__bar">
+            class="c-progress__bar"
+          >
             15% complete
           </div>
         </div>
@@ -148,7 +149,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '20%' }}
-            class="c-progress__bar c-progress__bar--brand">
+            class="c-progress__bar c-progress__bar--brand"
+          >
             20% complete
           </div>
         </div>
@@ -161,7 +163,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '35%' }}
-            class="c-progress__bar c-progress__bar--info">
+            class="c-progress__bar c-progress__bar--info"
+          >
             35% complete
           </div>
         </div>
@@ -174,7 +177,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '45%' }}
-            class="c-progress__bar c-progress__bar--warning">
+            class="c-progress__bar c-progress__bar--warning"
+          >
             45% complete
           </div>
         </div>
@@ -187,7 +191,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '60%' }}
-            class="c-progress__bar c-progress__bar--success">
+            class="c-progress__bar c-progress__bar--success"
+          >
             60% complete
           </div>
         </div>
@@ -200,7 +205,8 @@ export class ProgressBars {
             aria-valuemin="0"
             aria-valuemax="100"
             style={{ width: '100%' }}
-            class="c-progress__bar c-progress__bar--error">
+            class="c-progress__bar c-progress__bar--error"
+          >
             100% complete
           </div>
         </div>

src/scss/_components.github-buttons.scss

@@ -37,7 +37,7 @@
     background-color: #e9ecef;
     background-image: none;
     border-color: #afb1b2;
-    box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+    box-shadow: inset 0 0.15em 0.3em rgb(27 31 35 / 15%);
   }
 
   &:hover {
@@ -90,7 +90,7 @@
   display: inline-block;
   height: 14px;
   vertical-align: top;
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .u-large {

src/scss/_components.overlays.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .c-overlay[aria-hidden] {
   position: fixed;
   top: 0;
@@ -8,7 +10,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: transparentize(#000, 0.6);
+  background-color: color.adjust(#000, $alpha: -0.6);
   visibility: hidden;
   opacity: 0;
 

src/scss/_components.ranges.scss

@@ -22,7 +22,7 @@
 @mixin range-thumb {
   width: 20px;
   height: 20px;
-  margin: -5px 0 0 0;
+  margin: -5px 0 0;
   background-color: #fff;
   border: 0;
   border-radius: var(--border-radius-rounded);
@@ -35,7 +35,7 @@
 }
 
 @mixin range-thumb-webkit {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 @mixin range-thumb-active {
@@ -53,7 +53,7 @@
   width: 100%;
   padding: var(--spacing-small) 0;
   outline: 0;
-  -webkit-appearance: none;
+  appearance: none;
 
   &.c-range--brand {
     --range-track-color: var(--color-brand);

src/scss/_generics.global.scss

@@ -3,7 +3,7 @@ html,
 :host {
   box-sizing: border-box;
   line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 *,

src/scss/_variables.scss

@@ -53,10 +53,10 @@
 
   /* Box shadows */
 
-  --box-shadow: 0 0 1px rgba(#000, 0.6);
-  --box-shadow-high: 0 5px 10px -3px rgba(0, 0, 0, 0.4);
-  --box-shadow-higher: 0 10px 25px -4px rgba(0, 0, 0, 0.4);
-  --box-shadow-highest: 0 20px 55px -8px rgba(0, 0, 0, 0.4);
+  --box-shadow: 0 0 1px rgb(0 0 0 / 60%);
+  --box-shadow-high: 0 5px 10px -3px rgb(0 0 0 / 40%);
+  --box-shadow-higher: 0 10px 25px -4px rgb(0 0 0 / 40%);
+  --box-shadow-highest: 0 20px 55px -8px rgb(0 0 0 / 40%);
 
   /* Focus styles */
 

src/scss/mixins/_tools.mediaqueries.scss

@@ -6,7 +6,6 @@ $screen-limits: (
   xlarge: 78em,
   super: 116em,
 );
-
 $screen-adjustment: 0.01 !default;
 
 @mixin screen-and-up($size) {
@@ -40,7 +39,7 @@ $screen-adjustment: 0.01 !default;
 }
 
 @mixin screen--xlarge-only {
-  @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge)  - $screen-adjustment}) {
+  @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge) - $screen-adjustment}) {
     @content;
   }
 }