More improvements

studio1902 · Mar 1, 2024 · 19f37ad · 19f37ad
1 parent 1ce4957
commit 19f37ad
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 25 deletions.
diff --git a/public/build/assets/site-54y9HhaR.css b/public/build/assets/site-54y9HhaR.css
diff --git a/public/build/assets/site-D7bkgQHD.css b/public/build/assets/site-D7bkgQHD.css
diff --git a/public/build/assets/site-jd60iClm.css b/public/build/assets/site-jd60iClm.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "resources/css/site.css": {
-    "file": "assets/site-jd60iClm.css",
+    "file": "assets/site-D7bkgQHD.css",
     "isEntry": true,
     "src": "resources/css/site.css"
   },

diff --git a/resources/views/vendor/statamic/forms/fields/assets.antlers.html b/resources/views/vendor/statamic/forms/fields/assets.antlers.html
@@ -2,7 +2,7 @@
 <input
     @change="form.{{ handle }} = Object.values($event.target.files)"
     :aria-invalid="form.invalid('{{ handle }}')"
-    class="w-full file:py-2 file:mr-4 file:px-4 file:border-2 file:border-solid file:border-primary file:bg-white file:text-primary file:text-xs file:uppercase file:tracking-widest file:font-bold file:rounded border-neutral focus-visible:border-primary motion-safe:transition"
+    class="w-full file:py-2 file:mr-4 file:px-4 file:border-2 file:border-solid file:border-primary file:bg-white file:text-primary file:text-xs file:uppercase file:tracking-widest file:font-bold file:rounded border-neutral focus:border-primary motion-safe:transition"
     type="file"
     {{ if max_files === 1 }}
         name="{{ handle }}"

diff --git a/resources/views/vendor/statamic/forms/fields/checkboxes.antlers.html b/resources/views/vendor/statamic/forms/fields/checkboxes.antlers.html
@@ -10,7 +10,7 @@
             <input
                 x-model="form.{{ handle }}"
                 @change="form.validate('{{ handle }}')"
-                class="mr-2 rounded border-neutral text-primary focus-visible:border-primary"
+                class="mr-2 rounded border-neutral text-primary focus:border-primary"
                 type="checkbox"
                 name="{{ handle }}[]"
                 value="{{ value }}"

diff --git a/resources/views/vendor/statamic/forms/fields/default.antlers.html b/resources/views/vendor/statamic/forms/fields/default.antlers.html
@@ -3,8 +3,11 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600': form.invalid('{{ handle }}') }"
-    class="w-full rounded border-neutral focus-visible:border-primary caret-primary"
+    :class="{
+        'border-red-600 focus:border-red-600 !outline-red-600/50': form.invalid('{{ handle }}'),
+        'border-neutral focus:border-primary': !form.invalid('{{ handle }}')
+    }"
+    class="w-full rounded caret-primary"
     id="{{ handle }}"
     name="{{ handle }}"
     type="{{ input_type ?? 'text' }}"

diff --git a/resources/views/vendor/statamic/forms/fields/radio.antlers.html b/resources/views/vendor/statamic/forms/fields/radio.antlers.html
@@ -10,7 +10,7 @@
             <input
                 x-model="form.{{ handle }}"
                 @change="form.validate('{{ handle }}')"
-                class="mr-2 border-neutral text-primary focus-visible:border-primary"
+                class="mr-2 border-neutral text-primary focus:border-primary"
                 type="radio"
                 name="{{ handle }}"
                 value="{{ value }}"

diff --git a/resources/views/vendor/statamic/forms/fields/select.antlers.html b/resources/views/vendor/statamic/forms/fields/select.antlers.html
@@ -3,8 +3,11 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600': form.invalid('{{ handle }}')}"
-    class="w-full rounded border-neutral focus-visible:border-primary"
+    :class="{
+        'border-red-600 focus:border-red-600 !outline-red-600/50': form.invalid('{{ handle }}'),
+        'border-neutral focus:border-primary': !form.invalid('{{ handle }}')
+    }"
+    class="w-full rounded"
     id="{{ handle }}"
     name="{{ handle }}{{ multiple ?= "[]" }}"
     {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}

diff --git a/resources/views/vendor/statamic/forms/fields/textarea.antlers.html b/resources/views/vendor/statamic/forms/fields/textarea.antlers.html
@@ -3,8 +3,11 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600': form.invalid('{{ handle }}') }"
-    class="w-full h-32 rounded border-neutral focus-visible:border-primary caret-primary"
+    :class="{
+        'border-red-600 focus:border-red-600 !outline-red-600/50': form.invalid('{{ handle }}'),
+        'border-neutral focus:border-primary': !form.invalid('{{ handle }}')
+    }"
+    class="w-full h-32 rounded caret-primary"
     id="{{ handle }}"
     name="{{ handle }}"
     rows="5"

diff --git a/resources/views/vendor/statamic/forms/fields/toggle.antlers.html b/resources/views/vendor/statamic/forms/fields/toggle.antlers.html
@@ -8,7 +8,7 @@
 >
     <input type="hidden" name="{{ handle }}" value="0">
     <input
-        class="mr-2 inline-flex rounded border-neutral focus-visible:border-primary text-primary"
+        class="mr-2 inline-flex rounded border-neutral focus:border-primary text-primary"
         type="checkbox"
         name="{{ handle }}"
         value="1"

diff --git a/tailwind.config.site.js b/tailwind.config.site.js
@@ -93,23 +93,30 @@ module.exports = {
           '--focus-outline-offset': '3px',
           '--focus-outline-color': 'currentColor',
           '--focus-outline-style': 'dotted',
+          '--focus-form-outline-width': '3px',
+          '--focus-form-outline-offset': '0',
+          '--focus-form-outline-color': "theme('colors.primary.DEFAULT / .5')",
+          '--focus-form-outline-style': 'solid',
         },
         ':focus': {
+          outlineWidth: 'var(--focus-outline-width, 2px)',
+          outlineOffset: 'var(--focus-outline-offset, 3px)',
+          outlineColor: 'var(--focus-outline-color, currentColor)',
+          outlineStyle: 'var(--focus-outline-style, dotted)',
+        },
+        '*:focus:not(:focus-visible)': {
           outline: '2px solid transparent',
-          outlineOffset: '2px'
+          outlineOffset: '2px',
         },
-        ':focus-visible': {
-          outlineWidth: 'var(--focus-outline-width)',
-          outlineOffset: 'var(--focus-outline-offset)',
-          outlineColor: 'var(--focus-outline-color)',
-          outlineStyle: 'var(--focus-outline-style)',
+        '*:focus:not(:focus-visible) > .focus-nested': {
+          outline: 'none !important'
         },
-        'input:focus-visible, textarea:focus-visible, select:focus-visible': {
-          boxShadow: 'none !important',
-          outlineWidth: 'var(--focus-outline-width) !important',
-          outlineOffset: 'var(--focus-outline-offset) !important',
-          outlineColor: 'var(--focus-outline-color) !important',
-          outlineStyle: 'var(--focus-outline-style) !important',
+        'input:not([type="button"]):focus, textarea:focus, select:focus': {
+          boxShadow: 'none',
+          outlineWidth: 'var(--focus-form-outline-width, 3px)',
+          outlineOffset: 'var(--focus-form-outline-offset, 0)',
+          outlineColor: 'var(--focus-form-outline-color, currentColor)',
+          outlineStyle: 'var(--focus-form-outline-style, solid)',
         },
         'mark': {
           backgroundColor: "theme('colors.primary.DEFAULT / 1')",