Merge pull request #504 from digitalnsw/bugfix/focus-styling-fixes-in…

…verted Adds support for inverted section focus colour
digitalnsw · Feb 10, 2025 · ab8188f · ab8188f
2 parents 89c9fbf + ab65e89
commit ab8188f
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 2 deletions.
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -109,6 +109,10 @@
       @include nsw-focus;
       @include z-index;
       position: relative;
+
+      .nsw-section--invert & {   
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }
     }
 
     &.active {

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -52,6 +52,10 @@
     a {
       text-decoration: none;
     }
+
+    .nsw-section--invert & {   
+      @include nsw-focus($color: var(--nsw-focus-light));
+    }
   }
 
   &__content {

diff --git a/src/components/filters/_filters.scss b/src/components/filters/_filters.scss
@@ -107,6 +107,10 @@
 
       &:focus {
         @include nsw-focus($offset: false);
+
+        .nsw-section--invert & {   
+          @include nsw-focus($color: var(--nsw-focus-light));
+        }
       }
     }
 
@@ -356,6 +360,10 @@
         @include nsw-focus;
       }
 
+      .nsw-section--invert &:focus {   
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }  
+
       &.active {
         >.nsw-material-icons:last-child {
           transform: rotate(180deg);

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -349,10 +349,18 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
 
     &:focus + .nsw-form__checkbox-label::before {
       @include nsw-focus;
+
+      .nsw-section--invert & {   
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }
     }
 
     &:focus + .nsw-form__radio-label::before {
       box-shadow: 0 0 0 3px var(--nsw-text-light), 0 0 0 6px var(--nsw-focus);
+
+      .nsw-section--invert & {
+        box-shadow: 0 0 0 3px var(--nsw-text-dark), 0 0 0 6px var(--nsw-focus-light);
+      }
     }
 
     &[aria-invalid='true'] + .nsw-form__checkbox-label,

diff --git a/src/components/list-item/_list-item.scss b/src/components/list-item/_list-item.scss
@@ -60,6 +60,10 @@
   &--block {
     &:focus-within {
       @include nsw-focus($offset: false);
+
+      .nsw-section--invert & {   
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }
     }
 
     .nsw-list-item__title a {

diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
@@ -25,6 +25,10 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
 
     &:focus {
       @include nsw-focus;
+
+      .nsw-section--invert & {   
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }
     }
 
     &:disabled {

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -14,6 +14,10 @@ $nsw-vertical-align: (
 
   &:focus {
     @include nsw-focus;
+
+    .nsw-section--invert & {   
+      @include nsw-focus($color: var(--nsw-focus-light));
+    }
   }
 
   table {

diff --git a/src/components/utility-list/_utility-list.scss b/src/components/utility-list/_utility-list.scss
@@ -69,8 +69,8 @@
         @include nsw-hover-light();
       }
 
-      &:focus {
-        @include nsw-focus(false);
+      &:focus { 
+        @include nsw-focus($color: var(--nsw-focus-light));
       }
 
       &:visited {