Merge branch 'main' into audio

Author: staxly[bot]

.stylelintrc.css.json

@@ -0,0 +1,85 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": [
+    "src/content.css"
+  ],
+  "rules": {
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always",
+    "at-rule-no-unknown": true,
+    "block-opening-brace-newline-after": "always",
+    "block-closing-brace-newline-before": [ "always", {
+      "severity": "warning"
+    } ],
+    "block-closing-brace-newline-after": "always",
+    "block-no-empty": [ true, {
+      "severity": "error"
+    } ],
+    "color-no-invalid-hex": true,
+    "comment-no-empty": true,
+    "declaration-block-no-duplicate-properties": [ true, {
+      "severity": "warning"
+    } ],
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-semicolon-newline-after": [ "always", {
+      "severity": "warning"
+    } ],
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-no-important": [ true, {
+      "severity": "warning"
+    } ],
+    "font-family-no-duplicate-names": true,
+    "font-family-no-missing-generic-family-keyword": true,
+    "function-comma-space-after": [ "always", {
+      "severity": "warning"
+    } ],
+    "function-max-empty-lines": 0,
+    "function-url-quotes": "always",
+    "indentation": 2,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-before": "never",
+    "media-feature-colon-space-after": "always",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-name-no-unknown": true,
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "no-duplicate-at-import-rules": true,
+    "no-duplicate-selectors": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-missing-end-of-source-newline": true,
+    "number-no-trailing-zeros": true,
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "selector-attribute-quotes": "always",
+    "selector-class-pattern": [ "^[a-z0-9]+(?:-[a-z0-9]+)*(?:-(?:-[a-z0-9]+)*)?$", {
+      "severity": "warning"
+    } ],
+    "selector-combinator-space-before": "always",
+    "selector-combinator-space-after": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-no-unknown":  [ true, {
+      "severity": "warning"
+    } ],
+    "string-quotes": [ "double", {
+      "severity": "warning"
+    } ],
+    "unit-no-unknown": true,
+    "unit-case": "lower",
+    "value-keyword-case": ["lower", {"ignoreKeywords": ["dummyValue"]}],
+    "value-list-max-empty-lines": 0,
+    "value-no-vendor-prefix": [ true, {
+      "severity": "warning"
+    } ]
+  }
+}

package.json

@@ -54,7 +54,9 @@
     "lint": "npm run-script lint:bash && npm run-script lint:css && npm run-script lint:typescript",
     "lint:typescript": "eslint src && tsc",
     "lint:exports": "ts-unused-exports ./tsconfig.json",
-    "lint:css": "stylelint 'src/**/*.tsx'",
+    "lint:css": "npm run-script lint:css:tsx && npm run-script lint:css:plain",
+    "lint:css:tsx": "stylelint 'src/**/*.tsx'",
+    "lint:css:plain": "stylelint --config .stylelintrc.css.json 'src/**/*.css'",
     "lint:bash": "shellcheck $(find . -type f \\( -iname '*\\.sh' -or -iname '*\\.bash' \\) | grep -v -e .venv -e node_modules)",
     "prestart": "npm run-script build:css",
     "start": "./script/start.bash",

src/app/components/Button.css

@@ -76,7 +76,7 @@
 .button-transparent {
   border: none;
   background-color: transparent;
-  color: var(--button-transparent-color, #027EB5);
+  color: var(--button-transparent-color, #027eb5);
   font-weight: normal;
   box-shadow: none;
 }
@@ -130,13 +130,13 @@
 .button-link {
   outline: none;
   font-size: 1.6rem;
-  color: var(--link-color, #027EB5);
+  color: var(--link-color, #027eb5);
   cursor: pointer;
   text-decoration: underline;
 }
 
 .button-link:hover {
-  color: var(--link-hover, #0064A0);
+  color: var(--link-hover, #0064a0);
 }
 
 .button-link-decorated {
@@ -145,13 +145,13 @@
 }
 
 .button-link-decorated::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 0.1rem;
-  background-color: var(--link-color, #027EB5);
+  background-color: var(--link-color, #027eb5);
 }
 
 .button-link-decorated:hover::after,
@@ -161,28 +161,28 @@
 }
 
 .button-link-decorated:hover {
-  color: var(--link-hover, #0064A0);
+  color: var(--link-hover, #0064a0);
   text-decoration: none;
 }
 
 .button-link-decorated:focus {
-  color: var(--link-hover, #0064A0);
+  color: var(--link-hover, #0064a0);
   text-decoration: none;
 }
 
 /* ButtonLink disabled state */
 .button-link[disabled],
-.button-link[aria-disabled='true'],
+.button-link[aria-disabled="true"],
 .button-link-decorated[disabled],
-.button-link-decorated[aria-disabled='true'] {
+.button-link-decorated[aria-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.6;
   pointer-events: none;
   text-decoration: none;
 }
 
 .button-link-decorated[disabled]::after,
-.button-link-decorated[aria-disabled='true']::after {
+.button-link-decorated[aria-disabled="true"]::after {
   width: 0;
   background-color: transparent;
 }

src/app/components/Checkbox.css

@@ -53,11 +53,16 @@
 .checkbox-label:focus-within {
   border-radius: 0.4rem;
   background-color: var(--checkbox-focus-bg, #f1f1f1); /* theme.color.neutral.pageBackground */
+
   /* Browser default focus outline */
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem auto -webkit-focus-ring-color;
+  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+  outline: 0.2rem auto -webkit-focus-ring-color; /* Fallback for webkit browsers */
 }
 
+/* stylelint-disable no-descending-specificity */
+
+/* Focus-within must come after input state selectors to properly override border styling */
 .checkbox-label:focus-within .checkbox-custom {
   border: 1px solid var(--checkbox-checked-bg, #b03808); /* theme.color.primary.orange.darkest */
 }
@@ -68,6 +73,8 @@
   background-color: var(--checkbox-focus-bg, #f1f1f1); /* theme.color.neutral.pageBackground */
 }
 
+/* Focus fallback must also come after input state selectors */
 .checkbox-label.focus-within .checkbox-custom {
   border: 1px solid var(--checkbox-checked-bg, #b03808); /* theme.color.primary.orange.darkest */
 }
+/* stylelint-enable no-descending-specificity */

src/app/components/Details.css

@@ -8,7 +8,7 @@
 .details-expand-icon,
 .details-collapse-icon {
   display: inline-block;
-  vertical-align: -.125em;
+  vertical-align: -0.125em;
   overflow: hidden;
   height: 1.7rem;
   width: 1.7rem;

src/app/components/ScrollLock.css

@@ -16,7 +16,8 @@ body.body.scroll-lock {
 @media print {
   body.body.scroll-lock,
   body.body.scroll-lock-medium-screens-only {
-    overflow: visible !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    overflow: visible !important; /* Must override scroll lock for printing */
   }
 }
 
@@ -28,6 +29,7 @@ body.body.scroll-lock {
 }
 
 /* Hide root in print when scroll lock is active on medium screens only */
+
 /* Only applies when scroll-lock-medium-screens-only is actually locking (mobile viewport) */
 @media print and (max-width: 75em) {
   body.body.scroll-lock-medium-screens-only #root {

src/app/content/components/ContentPane.css

@@ -61,12 +61,14 @@
 /* Sidebar closed states */
 @media screen and (max-width: 75em) {
   .content-pane-wrapper--sidebar-closed-mobile {
-    padding-left: 0 !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-left: 0 !important; /* Must override responsive padding when sidebar is closed */
   }
 }
 
 @media screen {
   .content-pane-wrapper--sidebar-closed-desktop {
-    padding-left: 0 !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-left: 0 !important; /* Must override responsive padding when sidebar is closed */
   }
 }