refactor(hx-search): implement and document variables and attributes

HelixDesignSystem · Jul 22, 2021 · 8fe5986 · 8fe5986
1 parent 118db70
commit 8fe5986
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/scss/components/search/SearchFacade.scss b/src/scss/components/search/SearchFacade.scss
@@ -5,31 +5,39 @@
 //
 
 @mixin SearchFacadePristineFocus {
-  border: 1px solid $cyan-700;
+  border: 1px solid $blue-700;
+  border: 1px solid var(--hxSearch-SearchFacadePristineFocus-border, $blue-700);
   box-shadow: $focus-glow;
 }
 
 @mixin SearchFacadeInvalid {
   border: 2px solid $red-status-500;
+  border: 2px solid var(--hxSearch-SearchFacadeInvalid-border, $red-status-500);
 }
 
 @mixin SearchFacadeInvalidFocus {
   border: 2px solid $red-status-500;
+  border: 2px solid var(--hxSearch-SearchFacadeInvalidFocus-border, $red-status-500);
   box-shadow: $focus-glow-invalid;
 }
 
 @mixin SearchFacadeDisabled {
   background-color: $gray-50;
+  background-color: var(--hxSearch-SearchFacadeDisabled-bgcolor, $gray-50);
   border: 1px solid $gray-500;
+  border: 1px solid var(--hxSearch-SearchFacadeDisabled-border, $gray-500);
   color: $gray-400;
+  color: var(--hxSearch-SearchFacadeDisabled-color, $gray-400);
 }
 
 @mixin SearchFacadeDisabledFocus {
   border: 1px solid $gray-500;
+  border: 1px solid var(--hxSearch-SearchFacadeDisabledFocus-border, $gray-500);
 }
 
 // TODO: Rename/move mixin
 @mixin SearchFacadeButtonFocus {
   outline: 1px dotted $gray-700;
+  outline: 1px dotted var(--hxSearch-SearchFacadeButtonFocus-border, $gray-700);
   outline-offset: -6px;
 }
diff --git a/src/scss/components/search/_index.scss b/src/scss/components/search/_index.scss
@@ -60,7 +60,8 @@ hx-search-control {
 
   > input[type="search"]:focus ~ hx-search,
   > button.hxClear:focus ~ hx-search {
-    border-color: $cyan-700;
+    border-color: $blue-700;
+    border-color: var(--hxSearch-border-color, $blue-700);
     box-shadow: $focus-glow;
   }
 
@@ -70,6 +71,7 @@ hx-search-control {
     background-color: transparent;
     border: none;
     color: $gray-700;
+    color: var(--hxSearch-button-color, $gray-700);
     cursor: pointer;
     font-size: 1rem;
     grid-area: btn;
@@ -81,6 +83,7 @@ hx-search-control {
 
     &:focus {
       outline: 1px dotted $gray-700;
+      outline: 1px dotted var(--hxSearch-button-focus-outline, $gray-700);
       outline-offset: -6px;
     }
 
@@ -94,8 +97,10 @@ hx-search-control {
     -ms-grid-column-span: 3;
     -ms-grid-row: 2;
     background-color: $gray-0;
+    background-color: var(--hxSearch-bgcolor, $gray-0);
     border-radius: 2px;
     border: 1px solid $gray-500;
+    border: 1px solid var(--hxSearch-border, $gray-500);
     grid-column: 1 / span 3;
     grid-row: 2;
     z-index: 0;
@@ -107,6 +112,7 @@ hx-search-control {
     -ms-grid-column: 1;
     -ms-grid-row: 1;
     color: $gray-950;
+    color: var(--hxSearch-label-color, $gray-950);
     font-weight: 600;
     display: inline-block;
     font-size: 1rem;
@@ -120,8 +126,10 @@ hx-search-assistance {
   @include is-positionable;
 
   background-color: $gray-0;
+  background-color: var(--hxSearch-hxSearchAssistance-bgcolor, $gray-0);
   border-radius: 2px;
   border: 1px solid $gray-300;
+  border: 1px solid var(--hxSearch-hxSearchAssistance-border, $gray-300);
   box-shadow: $layering-shadow;
   max-height: 20rem; // 320px
   max-width: 32rem; // 512px
@@ -133,13 +141,15 @@ hx-search-assistance {
   > header {
     align-items: center;
     color: $gray-600;
+    color: var(--hxSearch-hxSearchAssistance-header-color, $gray-600);
     display: flex;
     height: 2.5rem; // 40px
     padding: 0 0.75rem;
   }
 
   > section {
     border-top: 1px solid $gray-400;
+    border-top: 1px solid var(--hxSearch-hxSearchAssistance-section-border-top, $gray-400);
     padding: 1rem 0;
 
     > * {
@@ -148,6 +158,7 @@ hx-search-assistance {
 
     > header {
       color: $gray-600;
+      color: var(--hxSearch-hxSearchAssistance-header-color, $gray-600);
       font-size: 0.875rem;
       font-weight: 500;
       text-transform: uppercase;
@@ -214,6 +225,7 @@ hx-search-control:not([hx-defined]) > button {
   background-color: transparent; //polyfill browsers
   border: none;
   color: $gray-900;
+  color: var(--hxSearch-hxSearchSuggestion-color, $gray-900);
   cursor: pointer;
   display: block;
   font-size: 0.875rem;
@@ -222,6 +234,7 @@ hx-search-control:not([hx-defined]) > button {
   width: 100%;
 
   &:hover {
-    background-color: $cyan-50;
+    background-color: $blue-100;
+    background-color: var(--hxSearch-hxSearchSuggestion-hover-bgcolor, $blue-100);
   }
 }