[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 shadow-ui-sm outline-hidden dark:border-gray-700 text-start;
     border-collapse: separate;
@@ -128,7 +126,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(--theme-color-danger) l c h / 0.5);
 
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
@@ -100,6 +101,46 @@
     }
 }
 
+/* DESTRUCTIVE STATES
+=================================================== */
+@layer utilities {
+    /* Destructive buttons */
+    [data-destructive]:not([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;
+            }
+        }
+    }
+    /* DESTRUCTIVE STATES / BADGES
+    =================================================== */
+    /* When a badge "x" is hovered, the whole badge lights up red. */
+    [data-ui-badge]:has([data-destructive]: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);
+        &, button {
+            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-bg: var(--theme-color-danger-bg);
+    --color-success-bg: var(--theme-color-success-bg);
+    --color-success: var(--theme-color-success);
+    --color-danger: var(--theme-color-danger);
+
     /* 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, .dark * {
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+        --color-danger: var(--theme-color-danger);
+        /* Make the danger background slightly darker/more subtle in dark mode */
+        --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / 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')" destructive />
 
                                 <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')" destructive />
                             <ui-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" destructive variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                     </div>
 
                     <ui-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" destructive @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" destructive />
     </div>
 </template>
 

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

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

resources/js/components/fieldtypes/ColorFieldtype.vue

@@ -69,7 +69,7 @@
             />
         </div>
 
-        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" />
+        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" destructive />
     </div>
 </template>
 

resources/js/components/fieldtypes/DictionaryFieldtype.vue

@@ -43,6 +43,7 @@
                                 type="button"
                                 class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
                                 :aria-label="__('Deselect option')"
+                                data-destructive
                                 @click="deselect(option.value)"
                             >
                                 <span>&times;</span>

resources/js/components/fieldtypes/FilesFieldtype.vue

@@ -62,6 +62,7 @@
                                         variant="ghost"
                                         :aria-label="__('Remove Asset')"
                                         :title="__('Remove')"
+                                        destructive
                                     />
                                 </td>
                             </tr>

resources/js/components/fieldtypes/ListFieldtype.vue

@@ -37,7 +37,7 @@
                                 variant="subtle"
                                 size="xs"
                                 round
-                                delete-action
+                                destructive
                                 @click="deleteValue(index)"
                                 :aria-label="__('Delete Item')"
                                 v-tooltip="__('Delete Item')"

resources/js/components/fieldtypes/TableFieldtype.vue

@@ -20,7 +20,7 @@
                             <th v-for="(column, index) in columnCount" :key="index">
                                 <div class="flex h-6 items-center justify-between">
                                     <span class="column-count">{{ index + 1 }}</span>
-                                    <ui-button icon="x" variant="subtle" size="xs" round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
+                                    <ui-button icon="x" variant="subtle" size="xs" destructive round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
                                 </div>
                             </th>
                             <th class="row-controls"></th>
@@ -46,7 +46,7 @@
                                     />
                                 </td>
                                 <td class="row-controls" v-if="canDeleteRows">
-                                    <ui-button icon="x" variant="subtle" size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
+                                    <ui-button icon="x" variant="subtle" destructive size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
                                 </td>
                             </tr>
                         </tbody>

resources/js/components/fieldtypes/assets/AssetRow.vue

@@ -49,6 +49,7 @@
                     variant="ghost"
                     :aria-label="__('Remove Asset')"
                     :title="__('Remove')"
+                    destructive
                 />
 
                 <asset-editor

resources/js/components/fieldtypes/assets/AssetTile.vue

@@ -38,7 +38,7 @@
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
                         <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" destructive />
                     </template>
 
                     <template v-else>

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" destructive />
             </div>
 
             <div

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

@@ -109,18 +109,22 @@
                 <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"
+                    destructive
                     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,8 @@
                 <ui-button
                     v-if="canDelete"
                     @click="$emit('removed', index)"
+                    :aria-label="__('Delete Row')"
+                    destructive
                     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"
         />