Separate focus halo and link color vars

backdrop-contrib · Jan 19, 2025 · 25756f0 · 25756f0
1 parent 86372d2
commit 25756f0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/css/base.css b/css/base.css
@@ -3,6 +3,7 @@
   --bedrock-font: 1rem/1.5 sans-serif;
   --bedrock-text-color: #444;
   --bedrock-link-color: #116e9b;
+  --bedrock-focus-halo-color: #539fc4;
   --bedrock-bg-color: #fafafa;
   --bedrock-bg-color-highlight: #fff;
   --bedrock-bg-color-secondary: #f0f0f0;
@@ -36,16 +37,16 @@ button:focus-visible,
 [type="button"]:focus-visible,
 [type="reset"]:focus-visible,
 [type="submit"]:focus-visible {
-  outline: 2px solid var(--bedrock-link-color);
+  outline: 2px solid var(--bedrock-focus-halo-color);
 }
 input:focus,
 select:focus,
 textarea:focus {
-  outline: 2px solid var(--bedrock-link-color);
+  outline: 2px solid var(--bedrock-focus-halo-color);
   box-shadow: none;
 }
 .tox .tox-edit-area::before {
-  border-color: var(--bedrock-link-color) !important;
+  border-color: var(--bedrock-focus-halo-color) !important;
 }
 p {
   margin: 1em 0;

diff --git a/css/bedrock-ui.css b/css/bedrock-ui.css
@@ -105,7 +105,7 @@ a.button {
 }
 input.form-submit:focus-visible,
 .form-actions input:focus-visible {
-  outline: 2px solid var(--bedrock-link-color);
+  outline: 2px solid var(--bedrock-focus-halo-color);
 }
 input.button-primary {
   background: var(--bedrock-link-color);
@@ -532,7 +532,7 @@ body .tox .tox-textfield, .tox .tox-toolbar-textfield {
 .image-library-choose-file.image-library-image-selected {
   border: none;
   background: var(--bedrock-bg-color-secondary);
-  outline: 3px solid var(--bedrock-link-color);
+  outline: 3px solid var(--bedrock-focus-halo-color);
 }
 .image-library-choose-file .image-library-image {
   display: inline;
@@ -636,7 +636,7 @@ div.node-preview-banner-form {
   border-color: var(--bedrock-border-color);
 }
 .js .dropbutton-widget:focus-within {
-  outline: 2px solid var(--bedrock-link-color);
+  outline: 2px solid var(--bedrock-focus-halo-color);
 }
 .dropbutton-widget,
 .dropbutton-widget * {