[6.x] Improve delete states, and map them to variables

config/cp.php

@@ -109,8 +109,6 @@
         // 'grays' => Color::Zinc,
 
         // 'primary' => Color::Zinc[800],
-        // 'success' => Color::Green[400],
-        // 'danger' => Color::Red[600],
 
         // 'ui-accent-bg' => Color::Zinc[800],
         // 'ui-accent-text' => Color::Zinc[800],
@@ -134,6 +132,15 @@
 
         // 'switch-bg' => Color::Green[500],
         // 'dark-switch-bg' => Color::Green[600],
+
+        // 'success' => Color::Green[700],
+        // 'success-bg' => Color::Green[50],
+        // 'dark-success' => Color::Green[400],
+        // 'dark-success-bg' => Color::Green[950],
+        // 'danger' => Color::Red[700],
+        // 'danger-bg' => Color::Red[50],
+        // 'dark-danger' => Color::Red[400],
+        // 'dark-danger-bg' => Color::Red[950],
     ],
 
     /*

resources/css/components/fieldtypes/table.css

@@ -1,7 +1,5 @@
-/* ==========================================================================
-Table Fieldtype
-========================================================================== */
-
+/* TABLE FIELDTYPE
+=================================================== */
 .table-contained {
     @apply relative mb-4 w-full rounded-lg border text-gray shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
     border-collapse: separate;
@@ -131,7 +129,21 @@ Table Fieldtype
         &:focus-within {
             @apply bg-gray-100 dark:bg-gray-700;
             button {
-                @apply outline-hidden ring-0;
+                @apply ring-0;
+            }
+        }
+    }
+
+    /* TABLE FIELDTYPE / RED DELETE CONTROLS (RED)
+    =================================================== */
+    th,
+    .row-controls {
+        &:has([aria-label*="Delete"]:is(:hover, :focus)) {
+            --focus-outline-color: var(--color-danger);
+            background-color: var(--color-danger-bg);
+            svg {
+                color: var(--color-danger);
+                opacity: 1;
             }
         }
     }

resources/css/elements/base.css

@@ -10,6 +10,7 @@
     --focus-within-outline-offset: 0px;
     --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
+    --danger-outline-color: oklch(from var(--color-danger) l c h / 0.5);
 
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
@@ -100,6 +101,57 @@
     }
 }
 
+/* DELETE STATES
+=================================================== */
+@layer utilities {
+    /* Delete buttons */
+    button:is(
+        /* Not Deselect because it's used for bulk actions e.g. selecting/deselecting entries */
+        /* [aria-label*="Deselect"], */
+        [aria-label*="Delete"],
+        [aria-label*="Clear"],
+        [aria-label*="Remove"],
+        [aria-label*="Reset"]
+    ) {
+        /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
+        &:not([role="switch"], [data-ui-badge] &) {
+            --focus-outline-color: var(--danger-outline-color);
+            --focus-outline-width: 1px;
+            &:hover,
+            &:hover::before,
+            &:focus {
+                /* Delete states - use outline state instead so we don't have to worry about overriding borders, or adding borders to pseudo elements */
+                outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+                outline-offset: var(--focus-outline-offset);
+                background: var(--color-danger-bg);
+                svg {
+                    color: var(--color-danger);
+                    /* Need !important to override dark mode */
+                    opacity: 1!important;
+                }
+            }
+            &.bg-transparent {
+                border-radius: 100%;
+            }
+        }
+    }
+    /* DELETE STATES / BADGES
+    =================================================== */
+    /* When a badge "x" is hovered, the whole badge lights up red. */
+    [data-ui-badge]:has(button[aria-label*="Deselect"]:is(:hover, :focus)) {
+        --focus-outline-color: var(--danger-outline-color);
+        --focus-outline-width: 1px;
+        background: var(--color-danger-bg);
+        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+        outline-offset: var(--focus-outline-offset);
+        color: var(--color-danger);
+        /* Cancel the outline on the actual button since we're highlighting the entire badge */
+        button {
+            outline: none;
+        }
+    }
+}
+
 /* Prevent tailwind typography from adding backticks around code elements */
 @utility prose {
     code {

resources/css/ui.css

@@ -3,7 +3,7 @@
     --color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
     --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, black 30%);
     --color-primary-gap: color-mix(in oklch, var(--color-primary) 100%, black 50%);
-    --color-success: var(--theme-color-success);
+
     --color-gray-50: var(--theme-color-gray-50);
     --color-gray-100: var(--theme-color-gray-100);
     --color-gray-150: var(--theme-color-gray-150);
@@ -17,7 +17,7 @@
     --color-gray-850: var(--theme-color-gray-850);
     --color-gray-900: var(--theme-color-gray-900);
     --color-gray-925: var(--theme-color-gray-925);
-    --color-gray-950: var(--theme-color-zinc-950);
+    --color-gray-950: var(--theme-color-gray-950);
     --color-volt: oklch(93.86% 0.2018 122.24);
 
     --color-body-bg: var(--theme-color-body-bg);
@@ -30,6 +30,11 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
+    --color-danger: var(--theme-color-danger);
+    --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / var(--color-danger-bg-opacity, 1));
+    --color-success: var(--theme-color-success);
+    --color-success-bg: oklch(from var(--theme-color-success-bg) l c h / var(--color-success-bg-opacity, 1));
+
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
@@ -83,11 +88,17 @@
     --color-dark-gray: #404040;
 }
 
-.dark {
-    @theme inline {
-        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-        --color-success: var(--color-green-500);
-        --color-gray-950: hsl(240deg 7% 8%);
+:root {
+    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
+
+    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
+    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
+
+    &.dark {
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+        /* Make the danger background slightly darker/more subtle in dark mode */
+        --color-danger-bg-opacity: 0.2;
+        --color-success-bg-opacity: 0.2;
     }
 }
 
@@ -122,16 +133,5 @@
     }
 }
 
-:root {
-    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
-
-    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
-    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
-}
-
-.dark {
-    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-}
-
 @custom-variant with-contrast (&:where([data-contrast="increased"] *));
 

resources/js/components/assets/Editor/Editor.vue

@@ -38,13 +38,13 @@
                                 @completed="actionCompleted"
                                 v-slot="{ actions }"
                             >
-                                <ui-button inset size="sm" v-if="isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" />
-                                <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" />
-                                <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" />
-                                <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" />
-                                <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" />
-                                <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" />
-                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" />
+                                <ui-button inset size="sm" v-if="isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" :aria-label="__('Focal Point')" />
+                                <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" :aria-label="__('Rename')" />
+                                <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" :aria-label="__('Move to Folder')" />
+                                <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" :aria-label="__('Replace')" />
+                                <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" :aria-label="__('Reupload')" />
+                                <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" :aria-label="__('Download')" />
+                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" />
 
                                 <Dropdown class="me-4">
                                     <DropdownMenu>

resources/js/components/blueprints/ImportField.vue

@@ -15,7 +15,7 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                             <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                                 <field-settings
                                     ref="settings"

resources/js/components/blueprints/RegularField.vue

@@ -28,7 +28,7 @@
                     <div class="flex items-center">
                         <ui-button v-if="canDefineLocalizable" inset size="sm" icon="earth" :variant="localizable ? 'ghost-pressed' : 'subtle'" v-tooltip="__('Localizable')" @click="localizable = !localizable" />
                         <ui-button inset size="sm" icon="duplicate" variant="subtle" @click.prevent="$emit('duplicate')" v-tooltip="__('Duplicate')" />
-                        <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                        <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                     </div>
 
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">

resources/js/components/blueprints/Section.vue

@@ -7,8 +7,8 @@
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                 </div>
-                <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" />
-                <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" />
+                <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" :aria-label="__('Edit Section')" v-tooltip="__('Edit Section')" />
+                <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
             </ui-panel-header>
 
             <Fields

resources/js/components/field-conditions/Condition.vue

@@ -65,7 +65,7 @@
             @update:model-value="valueUpdated"
         />
 
-        <Button variant="ghost" size="sm" icon="trash" @click="remove" />
+        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" />
     </div>
 </template>
 

resources/js/components/field-validation/Builder.vue

@@ -76,7 +76,7 @@
                             <button
                                 type="button"
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove Validation Rule')"
                                 @click="remove(rule)"
                             >
                                 &times;

resources/js/components/fieldtypes/ListFieldtype.vue

@@ -35,6 +35,7 @@
                             <button
                                 @click="deleteValue(index)"
                                 class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
+                                :aria-label="__('Delete Value')"
                             >
                                 &times;
                             </button>

resources/js/components/fieldtypes/bard/Image.vue

@@ -19,7 +19,7 @@
                 <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @click="edit" />
                 <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @click="toggleAltEditor" />
                 <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @click="openSelector" />
-                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" @click="deleteNode" />
+                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" />
             </div>
 
             <div

resources/js/components/fieldtypes/bard/LinkToolbar.vue

@@ -109,18 +109,21 @@
                 <ui-button
                     @click="$emit('canceled')"
                     :text="__('Cancel')"
+                    :aria-label="__('Cancel')"
                     size="sm"
                     inset
                     variant="ghost"
                 />
                 <ui-button
                     :text="__('Remove Link')"
+                    :aria-label="__('Remove Link')"
                     @click="remove"
                     size="sm"
                     inset
                 />
                 <ui-button
                     :text="__('Apply Link')"
+                    :aria-label="__('Apply Link')"
                     :disabled="!canCommit"
                     @click="commit"
                     size="sm"

resources/js/components/fieldtypes/grid/StackedRow.vue

@@ -10,6 +10,7 @@
                 <ui-button
                     v-if="canAddRows"
                     @click="$emit('duplicate', index)"
+                    :aria-label="__('Duplicate Row')"
                     v-tooltip="__('Duplicate Row')"
                     icon="duplicate"
                     variant="ghost"
@@ -19,6 +20,7 @@
                 <ui-button
                     v-if="canDelete"
                     @click="$emit('removed', index)"
+                    :aria-label="__('Delete Row')"
                     v-tooltip="__('Delete Row')"
                     icon="trash"
                     variant="ghost"

resources/js/components/inputs/relationship/InlinePublishForm.vue

@@ -26,7 +26,7 @@
                 >
                     <template #action-buttons-right>
                         <slot name="action-buttons-right" />
-                        <Button icon="x" size="sm" variant="ghost" class="-me-2" @click="close" />
+                        <Button icon="x" size="sm" variant="ghost" class="-me-2" :aria-label="__('Close')" @click="close" />
                     </template>
                 </component>
             </div>
@@ -38,6 +38,7 @@
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
             :danger="true"
+            :aria-label="__('Discard Changes')"
             @confirm="confirmCloseWithChanges"
             @cancel="closingWithChanges = false"
         />

resources/js/components/inputs/relationship/Item.vue

@@ -52,11 +52,13 @@
                                 v-if="editable"
                                 :text="__('Edit')"
                                 @click="edit"
+                                :aria-label="__('Edit')"
                             />
                             <DropdownItem
                                 :text="__('Unlink')"
                                 variant="destructive"
                                 @click="$emit('removed')"
+                                :aria-label="__('Unlink')"
                             />
                         </DropdownMenu>
                     </Dropdown>