Chore: Update sass, stylelint, focus rings, general SCSS cleanup (#3294)

Author: codebykat

.stylelintrc

@@ -3,7 +3,16 @@
   "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
   "plugins": ["stylelint-prettier"],
   "rules": {
+    "alpha-value-notation": null,
+    "color-function-notation": "legacy",
+    "declaration-property-value-no-unknown": null,
     "prettier/prettier": true,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "selector-class-pattern": [
+      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*((__([a-z][a-z0-9]*)(-[a-z0-9]+)*)?(--([a-z][a-z0-9]*)(-[a-z0-9]+)*)?)$",
+      {
+        "message": "Expected BEM naming convention for class."
+      }
+    ]
   }
 }

Makefile

@@ -192,7 +192,7 @@ lint: lint-js lint-scss
 
 .PHONY: lint-scss
 lint-scss:
-	@npx stylelint --ignore-path .gitignore "**/*.scss"
+	@npx stylelint "**/*.scss"
 
 .PHONY: lint-js
 lint-js:

RELEASE-NOTES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [v2.23.2]
+
+### Other Changes
+
+- Updated styles, sass, style linting [#3294](https://github.com/Automattic/simplenote-electron/pull/3294)
+
 ## [v2.23.1]
 
 ### Fixes

lib/alternate-login-prompt/style.scss

@@ -1,9 +1,6 @@
 .alternate-login__overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,14 +56,14 @@
     padding-top: 10px;
     padding-bottom: 10px;
     display: flex;
-    flex-direction: row;
     justify-content: flex-end;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     width: 100%;
 
     a {
       padding-right: 12px;
     }
+
     .button-borderless {
       color: var(--accent-color);
     }

lib/app-layout/style.scss

@@ -1,3 +1,5 @@
+@use '../../scss/variables' as *;
+
 .app-layout {
   display: flex;
   flex: 1 0 auto;
@@ -12,6 +14,7 @@
         width 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
     }
+
     .app-layout__note-column {
       border-left-width: 0;
       transition: border-left-width 0.2s;
@@ -23,6 +26,7 @@
         opacity: 1;
         width: inherit;
       }
+
       .app-layout__note-column {
         transition: inherit;
       }
@@ -96,10 +100,12 @@
       opacity: 1;
       transform: scale(1);
     }
+
     50% {
       opacity: 0.85;
       transform: scale(1.05);
     }
+
     100% {
       opacity: 1;
       transform: scale(1);

lib/app.tsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import 'focus-visible/dist/focus-visible.js';
 import NoteInfo from './note-info';
 import NoteActions from './note-actions';
 import NavigationBar from './navigation-bar';

lib/auth/style.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line selector-class-pattern */
 .ReactModal__Overlay {
   z-index: 1000;
 }
@@ -168,6 +169,7 @@ body {
   line-height: 22px;
   text-align: center;
   width: 320px;
+
   .button {
     width: 95%;
   }

lib/components/panel-title/style.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/variables' as *;
+
 .panel-title {
   color: var(--foreground-color);
   margin: 0 0 0.5em;

lib/components/slider/style.scss

@@ -1,33 +1,46 @@
-.slider {
-  @extend %smart-focus-outline;
+@use '../../../scss/variables' as *;
+@use '../../../scss/mixins';
 
+.slider {
   background-color: var(--background-color);
   cursor: pointer;
   width: 100%;
   max-width: $max-content-width;
   padding: 0; // IE11
   appearance: none;
 
+  &:focus {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: $focus-outline;
+  }
+
   // Track
   &::-webkit-slider-runnable-track {
     background: var(--primary-slider-color);
     height: 4px;
     border-radius: 2px;
   }
+
   &::-moz-range-track {
     background: var(--primary-slider-color);
     height: 3px;
     border-radius: 2px;
   }
+
   &::-ms-track {
     border-color: var(--primary-slider-color);
     height: 3px;
     border-width: 7px 0;
     color: transparent;
   }
+
   &::-ms-fill-lower {
     background: var(--secondary-slider-color);
   }
+
   &::-ms-fill-upper {
     background: var(--secondary-slider-color);
   }
@@ -48,6 +61,7 @@
       transform: translateY(calc(-50% + 2px)) scale(1.15);
     }
   }
+
   &::-moz-range-thumb {
     background: var(--secondary-slider-color);
     box-shadow: 0 1px 3px 0 var(--overlay-color);
@@ -62,6 +76,7 @@
       transform: scale(1.15);
     }
   }
+
   &::-ms-thumb {
     background: var(--secondary-slider-color);
     box-shadow: 0 1px 3px 0 var(--overlay-color);

lib/components/transition-delay-enter/style.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/mixins';
+
 .transition-delay-enter {
-  @include react-transition-fade-in;
+  @include mixins.react-transition-fade-in;
 }