Add date picker and input inverted styles

digitalnsw · Feb 28, 2024 · f8b5b9e · f8b5b9e
1 parent 72c63d5
commit f8b5b9e
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 154 deletions.
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
@@ -63,6 +63,59 @@
     list-style: none;
   }
 
+  .nsw-section--invert & {
+    .nsw-icon-button {
+      color: rgba(var(--nsw-palette-grey-01-rgb), 0.6);
+
+      &:hover {
+        @include nsw-hover;
+        outline-width: 0;
+      }
+
+      &:focus {
+        @include nsw-focus();
+      }
+    }
+
+    .nsw-button--dark-outline-solid {
+      background-color: var(--nsw-white);
+      border-color: var(--nsw-brand-dark);
+      color: var(--nsw-brand-dark);
+
+      &:focus {
+        @include nsw-focus();
+      }
+
+      &:hover {
+        background-color: var(--nsw-brand-dark);
+        border-color: transparent;
+        color: var(--nsw-text-light);
+      }
+    }
+
+    .nsw-button--dark {
+      background-color: var(--nsw-brand-dark);
+      color: var(--nsw-text-light);
+
+      &:focus {
+        @include nsw-focus();
+      }
+
+      &:hover {
+        color: var(--nsw-text-light);
+        background-color: var(--nsw-brand-dark);
+        background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
+        border-color: transparent;
+      }
+
+      &:active {
+        background-color: var(--nsw-brand-dark);
+        background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.075), rgba(var(--nsw-white-rgb), 0.075));
+        border-color: transparent;
+      }
+    }
+  }
+
   &--is-visible {
     visibility: visible;
     opacity: 1;
@@ -107,10 +160,6 @@
           background-color: rgba(var(--nsw-palette-grey-01-rgb), 0.075);
           color: var(--nsw-text-dark);
         }
-
-        &:active {
-          transform: translateY(2px);
-        }
       }
     }
   }

diff --git a/src/components/date-picker/_guidance.hbs b/src/components/date-picker/_guidance.hbs
@@ -34,7 +34,7 @@ layout: blank-layout.hbs
 
 <h2>How this component works</h2>
 
-<p>The date picker component relies on JavaScript so should be treated as an enhancement. users should always be able to enter the date into a text field as well as use the control.</p>
+<p>The date picker component relies on JavaScript so should be treated as an enhancement. Users should always be able to enter the date into a text field as well as use the control.</p>
 
 <p>Users select dates from a visual representation of the month and can skip through months and years. This allows them to easily see what day of the week and week of the month a particular date is in, which is particularly useful for tasks like appointment booking.</p>
 

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable max-nesting-depth */
+
 $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M29.362 3.742l-18.867 19.204-7.857-7.997-2.638 2.685 9.175 9.34 1.319 1.284 1.318-1.284 20.187-20.547z"></path></svg>';
 
 .nsw-form {
@@ -93,6 +95,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 {
@@ -149,16 +155,35 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       border-bottom-left-radius: 0;
       border-width: 1px;
       white-space: nowrap;
+      border-color: var(--nsw-grey-01);
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+        background-color: var(--nsw-brand-dark);
+        border-color: var(--nsw-white);
+      }
 
       &:focus {
-        outline-color: var(--nsw-focus);
+        @include nsw-focus();
+
+        .nsw-section--invert & {    
+          @include nsw-focus($color: var(--nsw-focus-light));
+        }
       }
     }
 
     .nsw-material-icons {
       display: block;
       font-size: rem(map-get($nsw-icon-sizes, 36));
       position: static;
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+
+        &:hover {
+          color: var(--nsw-text-light);
+        }
+      }
     }
 
     &--icon {
@@ -167,11 +192,28 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
         min-width: rem(60px);
         border-color: var(--nsw-grey-01);
         border-left-width: 0;
+
+        .nsw-section--invert & {  
+          color: var(--nsw-white);
+          border-color: var(--nsw-white);
+
+          &:hover {
+            @include nsw-hover-light;
+          }
+
+          .nsw-material-icons {
+            color: var(--nsw-text-light);
+          }
+        }
       }
 
       .nsw-button--white {
         .nsw-material-icons {
           color: var(--nsw-brand-dark);
+
+          .nsw-section--invert & {    
+            color: var(--nsw-text-light);
+          }
         }
       }
     }
@@ -234,30 +276,6 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
     }
   }
 
-  &__date {
-    padding: 0;
-    margin: 0;
-    border: 0;
-
-    &-wrapper {
-      display: flex;
-      width: 100%;
-      margin: 0 rem(-8px);
-
-      > div {
-        padding: 0 rem(8px);
-      }
-    }
-
-    &-input {
-      width: rem(74px);
-
-      &--large {
-        width: rem(116px);
-      }
-    }
-  }
-
   &__fieldset {
     margin: 0;
     padding: 0;