chore: lint CSS in nested folders, fix Stylelint warnings (#9259)

Author: web-padawan

package.json

@@ -12,7 +12,7 @@
     "docs": "yarn analyze && web-dev-server --node-resolve --open",
     "icons": "lerna run icons",
     "lint": "npm-run-all --parallel lint:*",
-    "lint:css": "stylelint --ignore-path .gitignore packages/**/src/*.js packages/**/theme/**/*-styles.js packages/**/*.css",
+    "lint:css": "stylelint --ignore-path .gitignore packages/**/src/**/*.js packages/**/theme/**/*-styles.js packages/**/*.css",
     "lint:js": "eslint --ext .js,.ts *.js scripts packages test",
     "lint:types": "tsc",
     "postinstall": "patch-package",

packages/a11y-base/src/styles/sr-only-styles.js

@@ -15,7 +15,6 @@ export const screenReaderOnly = css`
   .sr-only {
     border: 0 !important;
     clip: rect(1px, 1px, 1px, 1px) !important;
-    -webkit-clip-path: inset(50%) !important;
     clip-path: inset(50%) !important;
     height: 1px !important;
     margin: -1px !important;

packages/field-base/src/styles/field-core-styles.js

@@ -32,9 +32,11 @@ export const field = css`
       outline: 1px solid;
       outline-offset: -1px;
     }
+
     :host([focused]) [part='input-field'] {
       outline-width: 2px;
     }
+
     :host([disabled]) [part='input-field'] {
       outline-color: GrayText;
     }