fix: better CSS custom property name for focus styles

receter · Oct 2, 2024 · 9045ec3 · 9045ec3
1 parent 6449858
commit 9045ec3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/packages/ui/fixtures/simpleForm.fixture.tsx b/packages/ui/fixtures/simpleForm.fixture.tsx
@@ -18,7 +18,7 @@ export default function Fixture() {
         <FormField label="What is your name?">
           {({ htmlFor }) => <TextInput id={htmlFor} />}
         </FormField>
-        <FormField label="What is your number?" htmlFor="my-custom-id">
+        <FormField label="What is your number?">
           {({ htmlFor }) => <TextInput id={htmlFor} type="tel" />}
         </FormField>
         <div className={classButtonGroup}>

diff --git a/packages/ui/lib/Button/styles.module.css b/packages/ui/lib/Button/styles.module.css
@@ -29,8 +29,8 @@ a.button {
 }
 
 .button:focus-visible {
-  outline: var(--sys42-button-outline--focus-visible);
-  outline-offset: var(--sys42-button-outline-offset--focus-visible);
+  outline: var(--sys42-focus-outline);
+  outline-offset: var(--sys42-focus-outline-offset);
 }
 
 .button:hover {

diff --git a/packages/ui/lib/TextInput/styles.module.css b/packages/ui/lib/TextInput/styles.module.css
@@ -14,3 +14,9 @@
         var(--sys42-input-text-border-width)
     );
 }
+
+.textInput:focus,
+.textInput:focus-visible {
+  outline: var(--sys42-focus-outline);
+  outline-offset: var(--sys42-focus-outline-offset);
+}
diff --git a/packages/ui/lib/default-custom-properties.css b/packages/ui/lib/default-custom-properties.css
@@ -17,6 +17,11 @@
   --sys42-border-radius-md: 0.5rem;
   --sys42-border-radius-lg: 1rem;
 
+  /* Focus style */
+  /* This is used for :focus-visible (buttons) and :focus (inputs) */
+  --sys42-focus-outline: 0.125rem solid #505b92;
+  --sys42-focus-outline-offset: 0.125rem;
+
   /* Button */
   /* There is a bug with border-width in Firefox when values differ between normal and :hover */
   --sys42-button-background: #dfe1f9;
@@ -32,10 +37,6 @@
   --sys42-button-box-shadow: none;
   --sys42-button-transition: none;
 
-  /* :focus-visible */
-  --sys42-button-outline--focus-visible: 0.125rem solid #505b92;
-  --sys42-button-outline-offset--focus-visible: 0.125rem;
-
   /* :hover */
   --sys42-button-background--hover: #d3d4ec;
   --sys42-button-border-color--hover: var(--sys42-button-border-color);