[6.x] Improve Stricter WCAG 2.2 Mode

resources/css/app.css

@@ -41,6 +41,9 @@
   ::backdrop,
   ::file-selector-button {
     border-color: var(--color-gray-300, currentColor);
+    [data-contrast="increased"] & {
+        border-color: var(--color-gray-500, currentColor);
+    }
   }
   .dark {
     *,

resources/css/components/fieldtypes/bard.css

@@ -3,7 +3,7 @@
 @layer ui {
     /* .grid-cell, [data-ui-input-group] are exceptions for Bard fieldtypes inside a Grid fieldtype, since these cause double borders */
     .bard-fieldtype:not(.form-group, .grid-cell, [data-ui-input-group]) {
-        @apply relative rounded-lg border outline-hidden dark:border-gray-700;
+        @apply relative rounded-lg border outline-hidden dark:border-gray-700 with-contrast:border-gray-500;
     }
 }
 /* BARD / EDITOR

resources/css/components/fieldtypes/table.css

@@ -3,7 +3,7 @@ Table Fieldtype
 ========================================================================== */
 
 .table-contained {
-    @apply relative mb-4 w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 text-start;
+    @apply relative mb-4 w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 with-contrast:border-gray-500 text-start;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: fixed;
@@ -15,7 +15,7 @@ Table Fieldtype
                 dark:bg-gray-925
                 border-b bg-gray-50
                 not-last:border-e overflow-hidden
-                dark:border-gray-800 dark:border-b-gray-700
+                dark:border-gray-800 dark:border-b-gray-700 with-contrast:border-gray-500
                 text-sm font-medium text-gray-900
                 dark:text-gray-100
                 -top-2
@@ -97,7 +97,7 @@ Table Fieldtype
         }
 
         td {
-            @apply border-b p-0 dark:border-gray-700 border-e;
+            @apply border-b p-0 dark:border-gray-700 border-e with-contrast:border-gray-500;
 
             &:first-child.grid-cell {
                 @apply ps-4;

resources/js/components/fields/WidthSelector.vue

@@ -23,7 +23,7 @@ const selected = computed(() => {
 })
 
 const wrapperClasses = cva({
-    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 overflow-hidden flex cursor-pointer',
+    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer',
     variants: {
         size: {
             base: 'h-6 w-14 text-xs rounded-md',

resources/js/components/fieldtypes/ColorFieldtype.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex items-center">
         <!-- <div class="input-group w-auto" :class="{ 'max-w-[130px]': config.allow_any }"> -->
-        <div class="flex items-center rounded-full relative border shadow-ui-sm">
+        <div class="flex items-center rounded-full relative border shadow-ui-sm with-contrast:border-gray-500">
             <ui-popover
                 ref="colorPopover"
                 name="swatches"
@@ -12,7 +12,7 @@
                 @update:open="popoverOpen = $event"
             >
                 <template #trigger>
-                    <button type="button" class="cursor-pointer size-9 border rounded-full flex items-center justify-center" :aria-label="__('Pick Color')">
+                    <button type="button" class="cursor-pointer size-9 border rounded-full flex items-center justify-center with-contrast:border-gray-500" :aria-label="__('Pick Color')">
                         <div
                             class="size-8 rounded-full"
                             :class="{ 'cursor-not-allowed': isReadOnly }"

resources/js/components/fieldtypes/RangeFieldtype.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-2 @lg:px-4 @lg:py-3">
+    <div class="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-2 @lg:px-4 @lg:py-3 with-contrast:border with-contrast:border-gray-500">
         <ui-subheading size="lg" v-if="config.prepend" :text="__(config.prepend)" class="whitespace-nowrap" />
         <input
             class="min-w-0 flex-1 w-full"

resources/js/components/themes/Themes.vue

@@ -107,7 +107,7 @@ defineExpose({
                 v-for="theme in results"
                 :key="theme.id"
                 class="p-1 rounded-xl hover:bg-blue-100 dark:hover:bg-blue-900"
-                :class="{ 'bg-blue-400! dark:bg-blue-500!': isActive(theme) }"
+                :class="{ 'bg-blue-600!': isActive(theme) }"
                 @click="selectTheme(theme)"
             >
                 <Preview :theme="theme" />

resources/js/components/ui/Button/Button.vue

@@ -51,7 +51,7 @@ const buttonClasses = computed(() => {
         variants: {
             variant: {
                 default: [
-                    'bg-linear-to-b from-white to-gray-50 hover:to-gray-100 hover:bg-gray-50 text-gray-900 border border-gray-300 shadow-ui-sm',
+                    'bg-linear-to-b from-white to-gray-50 hover:to-gray-100 hover:bg-gray-50 text-gray-900 border border-gray-300 with-contrast:border-gray-500 shadow-ui-sm',
                     'dark:from-gray-850 dark:to-gray-900 dark:hover:to-gray-850 dark:hover:bg-gray-900 dark:border-gray-700/80 dark:text-gray-300 dark:shadow-ui-md',
                 ],
                 primary: [

resources/js/components/ui/Checkbox/Item.vue

@@ -47,7 +47,7 @@ const handleKeydown = (event) => {
 const checkboxClasses = computed(() => {
     return cva({
         base: [
-            'shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 bg-white',
+            'shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 with-contrast:border-gray-500 bg-white',
             'dark:bg-gray-500 dark:border-gray-900',
             'data-[state=checked]:border-ui-accent-bg data-[state=checked]:bg-ui-accent-bg',
             'data-[state=indeterminate]:border-ui-accent-bg data-[state=indeterminate]:bg-ui-accent-bg',

resources/js/components/ui/Combobox/Combobox.vue

@@ -80,7 +80,7 @@ const triggerClasses = cva({
     variants: {
         variant: {
             default: [
-                'bg-linear-to-b from-white to-gray-50 text-gray-900 border border-gray-300 shadow-ui-sm focus-within:focus-outline',
+                'bg-linear-to-b from-white to-gray-50 text-gray-900 border border-gray-300 with-contrast:border-gray-500 shadow-ui-sm focus-within:focus-outline',
                 'dark:from-gray-850 dark:to-gray-900 dark:border-gray-700 dark:text-gray-300 dark:shadow-ui-md',
             ],
             filled: 'bg-black/5 hover:bg-black/10 text-gray-900 border-none dark:bg-white/15 dark:hover:bg-white/20 dark:text-white focus-within:focus-outline dark:placeholder:text-red-500/60',

resources/js/components/ui/Input/GroupAppend.vue

@@ -10,6 +10,7 @@ const props = defineProps({
             'flex items-center justify-center',
             'shadow-ui-sm disabled:shadow-none',
             'border border-gray-300 bg-gray-50 text-gray-600 antialiased dark:border-gray-700 dark:bg-gray-925 dark:text-gray-300',
+            'with-contrast:border-gray-500',
             'rounded-e-lg px-3 text-sm leading-[1.375rem] shrink-0',
         ]"
         data-ui-input-group-append

resources/js/components/ui/Input/GroupPrepend.vue

@@ -10,6 +10,7 @@ const props = defineProps({
             'flex items-center justify-center',
             'shadow-ui-sm disabled:shadow-none',
             'border border-gray-300 bg-gray-50 text-gray-600 antialiased dark:border-gray-700 dark:bg-gray-925 dark:text-gray-300',
+            'with-contrast:border-gray-500',
             'rounded-s-lg px-3 text-sm leading-[1.375rem] shrink-0',
         ]"
         data-ui-input-group-prepend

resources/js/components/ui/Input/Input.vue

@@ -96,7 +96,7 @@ const inputClasses = computed(() => {
     const classes = cva({
         base: [
             'w-full block bg-white dark:bg-gray-900',
-            'border border-gray-300 with-contrast:border-gray-500 dark:border-gray-700 dark:inset-shadow-2xs dark:inset-shadow-black',
+            'border border-gray-300 with-contrast:border-gray-500 dark:border-gray-700 dark:with-contrast:border-gray-500 dark:inset-shadow-2xs dark:inset-shadow-black',
             'text-gray-925 dark:text-gray-300 placeholder:text-gray-500 dark:placeholder:text-gray-400/85',
             'appearance-none antialiased shadow-ui-sm disabled:shadow-none disabled:opacity-50 read-only:border-dashed not-prose',
         ],

resources/js/components/ui/Radio/Item.vue

@@ -22,7 +22,7 @@ const id = useId();
             :disabled
             class="
                 shadow-ui-xs mt-0.5 size-4 cursor-default rounded-full
-                focus:focus-outline border border-gray-400/75 dark:border-none bg-white outline-hidden
+                focus:focus-outline border border-gray-400/75 dark:border-none with-contrast:border-gray-100 bg-white outline-hidden
                 data-[state=checked]:border-ui-accent-bg data-[disabled]:opacity-50
                 dark:bg-gray-500 dark:data-[state=checked]:border-none dark:data-[state=checked]:bg-gray-300
             "

resources/js/components/ui/Switch.vue

@@ -17,7 +17,7 @@ defineEmits(['update:modelValue']);
 
 const switchRootClasses = cva({
     base: [
-        'relative flex rounded-full shrink-0 border-2',
+        'relative flex rounded-full shrink-0 border-2 with-contrast:border-1 with-contrast:border-gray-500!',
         'transition-colors cursor-pointer',
         'data-[state=checked]:shadow-inner data-[state=checked]:border-switch-bg data-[state=checked]:bg-switch-bg',
         'data-[state=unchecked]:border-transparent',