Darken input borders to meet minimum contrast for UI components

packages/craftcms-sass/_mixins.scss

@@ -590,7 +590,7 @@ $radioSize: 16px;
 
 @mixin input-styles {
   border-radius: $smallBorderRadius;
-  border: 1px solid transparentize($inputColor, 0.75);
+  border: 1px solid var(--input-border-color);
   background-color: hsl(212, 50%, 99%);
   background-clip: padding-box;
 }

src/config/GeneralConfig.php

@@ -75,6 +75,7 @@ class GeneralConfig extends BaseConfig
      * - `underlineLinks` – Whether links should be underlined.
      * - `notificationDuration` – How long notifications should be shown before they disappear automatically (in
      *   milliseconds). Set to `0` to show them indefinitely.
+     * - `increaseContrast` - Whether the UI should be updated to have a higher contrast
      *
      * ```php
      * ->accessibilityDefaults([
@@ -90,6 +91,7 @@ class GeneralConfig extends BaseConfig
         'useShapes' => false,
         'underlineLinks' => false,
         'notificationDuration' => 5000,
+        'increaseContrast' => false,
     ];
 
     /**

src/controllers/UsersController.php

@@ -1425,7 +1425,8 @@ public function actionSaveUser(): ?Response
             'useShapes' => (bool)$this->request->getBodyParam('useShapes', $user->getPreference('useShapes')),
             'underlineLinks' => (bool)$this->request->getBodyParam('underlineLinks', $user->getPreference('underlineLinks')),
             'notificationDuration' => $this->request->getBodyParam('notificationDuration', $user->getPreference('notificationDuration')),
-        ];
+            'increaseContrast' => (bool)$this->request->getBodyParam('increaseContrast', $user->getPreference('increaseContrast')),
+            ];
 
         if ($user->admin) {
             $preferences = array_merge($preferences, [

src/templates/_layouts/base.twig

@@ -9,6 +9,7 @@
     not (currentUser.getPreference('alwaysShowFocusRings') ?? a11yDefaults['alwaysShowFocusRings'] ?? false) ? 'reduce-focus-visibility',
     (currentUser.getPreference('useShapes') ?? a11yDefaults['useShapes'] ?? false) ? 'use-shapes',
     (currentUser.getPreference('underlineLinks') ?? a11yDefaults['underlineLinks'] ?? false) ? 'underline-links',
+    (currentUser.getPreference('increaseContrast') ?? a11yDefaults['increaseContrast'] ?? false) ? 'increase-contrast',
     requestedSite ? "site--#{requestedSite.handle}",
 ])|filter -%}
 

src/templates/users/_edit.twig

@@ -264,6 +264,12 @@
                             id: 'underlineLinks',
                             checked: user.getPreference('underlineLinks') ?? a11yDefaults['underlineLinks'] ?? false,
                         },
+                        {
+                            label: 'Increase contrast'|t('app'),
+                            name: 'increaseContrast',
+                            id: 'increaseContrast',
+                            checked: user.getPreference('increaseContrast') ?? a11yDefaults['increaseContrast'] ?? false,
+                        },
                     ],
                 }) }}
 

src/translations/en/app.php

@@ -748,6 +748,7 @@
     'Includes suspending, unsuspending, and unlocking user accounts.' => 'Includes suspending, unsuspending, and unlocking user accounts.',
     'Incorrect current password.' => 'Incorrect current password.',
     'Incorrect password.' => 'Incorrect password.',
+    'Increase contrast' => 'Increase contrast',
     'Information' => 'Information',
     'Initial Rows' => 'Initial Rows',
     'Insert the button label for adding a new row to the table.' => 'Insert the button label for adding a new row to the table.',

src/web/assets/admintable/dist/manifest.json

@@ -1 +1 @@
-{"app.css":"/css/app.css","app.js":"/js/app.js","app.js.map":"/js/app.js.map"}
+{"app.css":"/css/app.css","app.js":"/js/app.js","app.css.map":"/css/app.css.map","app.js.map":"/js/app.js.map"}

src/web/assets/cp/src/css/_cp.scss

@@ -30,9 +30,11 @@ html {
 
 body {
   min-height: 100vh;
-}
 
-body {
+  &.increase-contrast {
+    --input-border-color: var(--gray-400);
+  }
+
   :focus {
     outline-style: solid;
     outline-color: transparent;
@@ -1101,10 +1103,6 @@ li.breadcrumb-toggle-wrapper {
     .meta {
       border-radius: var(--large-border-radius);
 
-      &:not(.read-only):not(.warning) {
-        @include pane;
-      }
-
       &.read-only {
         color: var(--medium-text-color);
         background-color: transparent !important;
@@ -1132,12 +1130,6 @@ li.breadcrumb-toggle-wrapper {
       }
     }
 
-    & > .field {
-      & > .input > .text.fullwidth {
-        @include pane;
-      }
-    }
-
     .notes {
       border-radius: var(--large-border-radius);
       padding-top: var(--m);

src/web/assets/cp/src/css/_main.scss

@@ -1878,7 +1878,7 @@ div.btn.submit input {
 
 /* dashed buttons */
 .btn.dashed {
-  border: 1px dashed var(--medium-hairline-color);
+  border: 1px dashed var(--input-border-color);
   background-color: transparent;
 
   .btngroup &:not(:last-child):not(.btngroup-btn-last) {
@@ -1953,7 +1953,7 @@ div.btn.submit input {
     width: 100%;
     height: 100%;
     border-radius: 17px;
-    box-shadow: inset 0 0 0 1px transparentize($black, 0.85);
+    box-shadow: inset 0 0 0 1px var(--input-border-color);
 
     &:focus-within {
       @include input-focused-styles;
@@ -3059,7 +3059,7 @@ $checkboxPadding: $checkboxSize + 4;
 /* editable tables */
 table.editable {
   border-radius: var(--large-border-radius);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--input-border-color);
 
   th,
   td.action {
@@ -3080,7 +3080,7 @@ table.editable {
   thead {
     tr {
       th {
-        border-bottom: 1px solid var(--hairline-color);
+        border-bottom: 1px solid var(--input-border-color);
 
         &.has-info {
           @include padding-right(calc(15px + 1em));
@@ -3099,7 +3099,7 @@ table.editable {
       &:not(:first-child) {
         th,
         td {
-          border-top: 1px solid var(--hairline-color);
+          border-top: 1px solid var(--input-border-color);
         }
       }
 
@@ -3118,7 +3118,7 @@ table.editable {
 
       td:not(:first-child),
       th ~ td:not(.hidden) ~ td {
-        @include border-left(1px solid var(--hairline-color));
+        @include border-left(1px solid var(--input-border-color));
       }
 
       th {
@@ -3768,6 +3768,7 @@ ul.tree,
 
 /* detail sidebars */
 .details {
+  --background-color: var(--gray-050);
   --spacing: var(--l);
   padding: 0 var(--padding) var(--spacing);
 
@@ -3782,7 +3783,7 @@ ul.tree,
     margin-bottom: var(--spacing);
 
     &:not(.read-only) {
-      background-color: var(--gray-050) !important;
+      background-color: var(--background-color) !important;
     }
 
     &.read-only {
@@ -3902,8 +3903,7 @@ ul.tree,
       margin: 0 var(--neg-padding);
       padding-left: var(--padding);
       padding-right: var(--padding);
-      border: none;
-      background-color: var(--gray-050) !important;
+      background-color: var(--background-color) !important;
       width: calc(100% + var(--padding) + var(--padding));
     }
   }
@@ -3922,15 +3922,16 @@ ul.tree,
 $min2ColWidth: 400px;
 
 .meta {
-  padding: 0 var(--padding);
+  display: grid;
+  grid-gap: var(--m);
+  padding: calc(var(--padding) / 2) var(--padding);
   overflow: visible;
 
   &,
   & > .flex-fields {
     & > .field,
     & > .data {
       display: flex;
-      min-height: 50px;
       box-sizing: border-box;
       flex-wrap: wrap; // for error lists
       justify-content: space-between;
@@ -3944,8 +3945,6 @@ $min2ColWidth: 400px;
       }
 
       &.add {
-        background-color: darken($grey050, 2%);
-
         &:before {
           position: absolute;
           @include left(0);
@@ -3987,10 +3986,10 @@ $min2ColWidth: 400px;
     }
 
     & > .field > .heading {
-      padding-top: var(--s);
+      margin: var(--xs) 0;
 
       @media screen and (min-width: $min2ColWidth) {
-        padding: 14px 0;
+        margin: 0;
       }
 
       & > .copytextbtn {
@@ -4069,10 +4068,7 @@ $min2ColWidth: 400px;
           & > .text {
             display: block;
             margin: calc(var(--s) * -1) 0;
-            padding: 14px 0;
-            border-radius: 0;
             background-color: transparent;
-            border: none !important;
           }
         }
 
@@ -4081,9 +4077,6 @@ $min2ColWidth: 400px;
         & > .datetimewrapper > .datewrapper,
         & > .datetimewrapper > .timewrapper {
           background-color: transparent;
-          .text + div[data-icon] {
-            @include left(0);
-          }
         }
 
         & > .datetimewrapper {
@@ -4120,11 +4113,6 @@ $min2ColWidth: 400px;
     }
   }
 
-  & > .field:not(:first-child),
-  & > .flex-fields + .field {
-    border-top: 1px solid var(--hairline-color);
-  }
-
   & > .flex-fields {
     h2,
     blockquote.note {
@@ -4152,18 +4140,15 @@ $min2ColWidth: 400px;
   box-shadow: none;
   background-color: transparent;
 
-  &:after {
-    @include right(0);
-  }
-
   & + .spinner {
     position: absolute;
     top: calc(50% - 17px);
     @include right(-24px);
   }
 
   select {
-    @include padding(var(--s), 12px, var(--s), 0);
+    @include padding-left(6px);
+    border: 1px solid var(--input-border-color);
     width: 100%;
     background-color: transparent;
   }
@@ -5749,7 +5734,7 @@ div.checkbox:before {
   content: '';
   font-size: 0;
   background-color: hsl(212, 50%, 99%);
-  border: 1px solid transparentize($inputColor, 0.6);
+  border: 1px solid var(--input-border-color);
   background-clip: padding-box;
   border-radius: var(--small-border-radius);
 }
@@ -5876,7 +5861,7 @@ div.radio:before {
   width: var(--radio-size);
   height: var(--radio-size);
   background-color: hsl(212, 50%, 99%);
-  border: 1px solid transparentize($inputColor, 0.6);
+  border: 1px solid var(--input-border-color);
 }
 
 input.radio + label:after,
@@ -6265,10 +6250,6 @@ tr.indexingSession td.progress div.progressContainer div.progressInfo {
 }
 
 .select:not(.selectize) select {
-  &:hover {
-    @include select-input-focused-styles;
-  }
-
   @include focus-styles {
     @include select-input-focused-styles;
   }

src/web/assets/cp/src/css/_variables.scss

@@ -69,6 +69,8 @@
   --medium-border-radius: 4px;
   --large-border-radius: 5px;
 
+  --input-border-color: #{transparentize($inputColor, 0.75)};
+
   --menu-border-radius: var(--medium-border-radius);
   --checkbox-size: 16px;
   --radio-size: 16px;