Add focus ring

src/resources/theme/color/wa.globals.ts

@@ -51,5 +51,7 @@ export const waColorStyles = css`
     --wa-color-danger-on-loud: var(--color-on-danger-loud);
     --wa-color-danger-on-normal: var(--color-on-danger-normal);
     --wa-color-danger-on-quiet: var(--color-on-danger-quiet);
+
+    --wa-focus-ring-color: var(--color-neutral-60);
   }
 `;

src/resources/theme/theme.ts

@@ -5,16 +5,19 @@ import {
   typographyDerivedVariables,
   typographyStyles,
 } from "./typography.globals";
+import { waMainStyles } from "./wa.globals";
 
 export const themeStyles = [
   mainStyles.toString(),
   typographyStyles.toString(),
   ...colorStylesCollection,
   fontStyles.toString(),
+  waMainStyles.toString(),
 ].join("");
 
 export const derivedStyles = {
   ...mainDerivedVariables,
   ...typographyDerivedVariables,
   ...colorDerivedVariables,
+  ...waMainStyles,
 };

src/resources/theme/wa.globals.ts

@@ -0,0 +1,11 @@
+import { css } from "lit";
+
+export const waMainStyles = css`
+  html {
+    --wa-focus-ring-style: solid;
+    --wa-focus-ring-width: 2px;
+    --wa-focus-ring-offset: 2px;
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+      var(--wa-focus-ring-color);
+  }
+`;