Add back 3 Stylelint configs (#4350)

* Add back @double-great/stylelint-a11y Stylelint plugin Notably, we choose to not use the 'a11y/no-outline-none' rule. The reason for this being that our focus ring suffices for almost every use case (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum), and using the same hover and focus styling can be considered bad design in many cases. YT goes the direction of foregoing the focus ring for many of its components and choosing a barely darker color than its :hover for :focus styling, which is controversial. Accessibility-wise, at the very least, using the same hover and focus styling can be confusing, especially for sighted users who use keyboard navigation. * Add back stylelint-config-sass-guidelines * Add back stylelint-config-standard * Satisfy media-prefers-reduced-motion a11y rule This is not recognized as a fix by the rule due to its limited detection logic, so this rule is not being imported directly. * Remove duplicate code * Implement linting fixes * Implement _ft-list-item.scss linting fixes excluding no-descending-specificity Properly implementing the no-descending-specificity rule in this file seems to utterly destroy the styling. This would be its own entire initiative to unravel. * Restart from scratch modifications of _ft-list-item.scss * Resolve styling discrepancies introduced with ft-list-channel and ft-tooltip
FreeTubeApp · Apr 17, 2024 · 23f1618 · 23f1618
1 parent 754f764
commit 23f1618
Show file tree

Hide file tree

Showing 70 changed files with 576 additions and 633 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
-  "plugins": ["stylelint-use-logical-spec"],
+  "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"],
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
   "overrides": [
     {
       "files": ["**/*.scss"],
@@ -16,6 +17,19 @@
     }
   ],
   "rules": {
+    "selector-no-qualifying-type": [
+      true, {
+      "ignore": ["attribute"]
+    }],
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["deep"]
+      }
+    ],
+    "a11y/no-outline-none": true,
     "liberty/use-logical-spec": ["always", { "except": ["float"] }]
   }
 }
diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -1,12 +1,12 @@
 @font-face {
   font-family: Roboto;
-  src: url(assets/font/Roboto-Regular.ttf);
+  src: url("assets/font/Roboto-Regular.ttf");
 }
 
-#app {
+.app {
   display: flex;
   flex-wrap: wrap;
-  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   block-size: 100%;
 }
 
@@ -30,23 +30,23 @@
 .flexBox {
   display: block;
   user-select: unset;
-  -webkit-user-select: unset;
 }
 
-#changeLogText {
+.changeLogText {
   overflow-y: scroll;
   block-size: 40vh;
-  display: block
+  display: block;
 }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .15s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .routerView {
     margin-block: 68px;
     margin-inline: 8px;
@@ -58,7 +58,6 @@
   }
 
   .flexBox {
-    margin-block-start: 60px;
-    margin-block-end: -75px;
+    margin-block: 60px -75px;
   }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -2,6 +2,7 @@
   <div
     v-if="dataReady"
     id="app"
+    class="app"
     :class="{
       hideOutlines: outlinesHidden,
       isLocaleRightToLeft: isLocaleRightToLeft
@@ -52,7 +53,7 @@
       @click="showReleaseNotes = !showReleaseNotes"
     >
       <span
-        id="changeLogText"
+        class="changeLogText"
         v-html="updateChangelog"
       />
       <ft-flex-box>

diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css
@@ -1,5 +1,5 @@
-@media only screen and (max-width: 800px) {
-  br.hide-on-mobile {
+@media only screen and (width <= 800px) {
+  .hide-on-mobile {
     display: none;
   }
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,5 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-inline-start: 4%;
-  padding-inline-end: 4%
+  padding-inline: 4% 4%
 }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
@@ -1,5 +1,5 @@
 .btn {
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
   min-inline-size: 100px;
   font-size: 0.9rem;
   padding-block: 10px;
@@ -18,7 +18,7 @@
   font-weight: 500;
   vertical-align: middle;
   margin: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 }
 
 .btn:disabled {
@@ -32,7 +32,7 @@
   transform: translate3d(0, 0, 0);
 }
 
-.ripple:after {
+.ripple::after {
   content: "";
   display: block;
   position: absolute;
@@ -49,7 +49,7 @@
   transition: transform .5s, opacity 1s;
 }
 
-.ripple:active:after {
+.ripple:active::after {
   transform: scale(0, 0);
   opacity: .3;
   transition: 0s;

diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
@@ -3,5 +3,5 @@
   margin: 8px;
   padding-block: 3px 16px;
   padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -24,18 +24,17 @@
   inline-size: 50px;
   block-size: 50px;
   border-radius: 100%;
-  -webkit-border-radius: 100%;
   object-fit: cover;
 }
 
 .selected {
   position: absolute;
   inset-block-start: 10px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
 }
 
 .icon {
-  color: #EEEEEE;
+  color: #EEE;
   font-size: 25px;
   position: absolute;
   inset-block-start: 12px;

diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -17,7 +17,7 @@
 
 .filled-circle {
   border-radius: 50%;
-  background-color: black;
+  background-color: #000;
   float: var(--float-left-ltr-rtl-value);
   block-size: 6px;
   inset-inline-start: 2px;
@@ -33,11 +33,10 @@
 .option {
   display: flex;
   align-items: center;
-  padding-block-end: 10px;
+  padding-block: 5px;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;
-  padding-block: 5px;
   padding-inline-start: 10px;
   margin-block-end: 10px;
 }

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -1,10 +1,11 @@
 /* stylelint-disable property-no-vendor-prefix */
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .outside {
   margin: auto;
   inline-size: 40%;
-  @media screen and (max-width: 768px) {
+
+  @media screen and (width <= 768px) {
     inline-size: 100%;
   }
 }
@@ -25,7 +26,6 @@
 }
 
 .communityThumbnail {
-  -webkit-border-radius: 50%;
   border-radius: 50%;
   block-size: 55px;
   margin-inline-end: 5px;
@@ -40,6 +40,7 @@
     font-weight: bold;
     margin-block: 5px 0;
     margin-inline: 5px 6px;
+
     .authorNameLink {
       color: inherit;
       text-decoration: none;
@@ -67,7 +68,7 @@
   max-inline-size: 210px;
   text-align: start;
 
-  @media screen and (max-width: 680px) {
+  @media screen and (width <= 680px) {
     margin-inline-start: 0;
     text-align: start;
   }
@@ -79,8 +80,7 @@
   }
 
   .likeCount {
-    margin-inline-start: 5px;
-    margin-inline-end: 6px;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -89,8 +89,7 @@
 
   .videoThumbnail {
     display: flex;
-    margin-block-end: auto;
-    margin-block-start: auto;
+    margin-block: auto;
     position: relative;
     inline-size: fit-content;
 

diff --git a/src/renderer/components/ft-flex-box/ft-flex-box.css b/src/renderer/components/ft-flex-box/ft-flex-box.css
@@ -3,5 +3,4 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   user-select: none;
-  -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -3,8 +3,6 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
-
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -90,7 +88,6 @@
   list-style-type: none;
   position: absolute;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
 

diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -8,7 +8,7 @@
 }
 
 .disabledMsg {
-  color: rgb(233, 255, 108);
+  color: rgb(233 255 108);
   padding-block-end: 10px;
 }
 
@@ -53,7 +53,7 @@
   color: var(--primary-text-color);
   opacity: 0.5;
   padding: 10px;
-  padding-inline-start: 0px;
+  padding-inline-start: 0;
 }
 
 .removeTagButton:hover {
@@ -64,7 +64,7 @@
   margin-block-start: 10px;
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (width <= 576px) {
   .ft-input-tags-component {
     inline-size: 100%;
   }

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .ft-input-component {
   position: relative;
 }
@@ -49,6 +50,7 @@
   position: absolute;
   inset-block-start: 5px;
   inset-inline-start: 0;
+
   /* To be higher than `.inputWrapper` */
   z-index: 1;
   margin-block: 0;
@@ -80,7 +82,7 @@
 }
 
 .forceTextColor .clearInputTextButton {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .forceTextColor .clearInputTextButton:active {
@@ -89,12 +91,10 @@
 
 .ft-input {
   box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   outline: none;
   inline-size: 100%;
   padding: 1rem;
-  border: none;
+  border: 0;
   margin-block-end: 10px;
   font-size: 16px;
   block-size: 45px;
@@ -103,26 +103,23 @@
   background-color: var(--search-bar-color);
 }
 
-.ft-input-component ::-webkit-input-placeholder {
+.ftcomponent ::placeholder {
   color: var(--tertiary-text-color);
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .forceTextColor .ft-input {
-  color: #EEEEEE;
+  color: #EEE;
   background-color: var(--primary-input-color);
 }
 
 .forceTextColor .ft-input:focus {
   box-shadow: 0 0 1rem 0 var(--primary-input-color);
-  -moz-transition: box-shadow 0.2s ease-in-out;
-  -o-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
 }
 
-.forceTextColor ::-webkit-input-placeholder {
-  color: #EEEEEE;
+.forceTextColor ::placeholder {
+  color: #EEE;
 }
 
 .inputWrapper {
@@ -138,12 +135,14 @@
   inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
+
   /* this should look disabled by default */
-  opacity: 50%;
+  opacity: 0.5;
 }
 
 .inputAction.enabled {
-  opacity: 100%;
+  opacity: 1;
+
   /* Only look respond to cursor when enabled */
   cursor: pointer;
 }
@@ -154,7 +153,7 @@
 }
 
 .forceTextColor .inputAction {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .ft-input-component.showActionButton .ft-input {