From 929c1fd92b079e4a3ffe6ec184e9743a02f04664 Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Fri, 23 Aug 2019 19:09:28 -0700
Subject: [PATCH] improve theming [skip ci]

---
 hyperglass/render/templates/footer.html.j2 |   2 +-
 hyperglass/render/templates/theme.sass.j2  | 129 +++++++++++++++------
 hyperglass/static/hyperglass.es6           |  22 ++--
 hyperglass/static/overrides.sass           |  40 +++----
 4 files changed, 127 insertions(+), 66 deletions(-)

diff --git a/hyperglass/render/templates/footer.html.j2 b/hyperglass/render/templates/footer.html.j2
index 44bb95c..8cfb5c3 100644
--- a/hyperglass/render/templates/footer.html.j2
+++ b/hyperglass/render/templates/footer.html.j2
@@ -1,5 +1,5 @@
 {% if branding.footer.enable %}
-<nav class="navbar fixed-bottom navbar-footer bg-footer pt-0 pb-0">
+<nav class="navbar fixed-bottom navbar-footer bg-overlay pt-0 pb-0">
   <div class="container-fluid row no-gutters text-center p-0">
     <div class="col-auto float-left">
       <div class="d-none" id="hg-footer-terms-html">{{ details.footer.content | safe }}</div>
diff --git a/hyperglass/render/templates/theme.sass.j2 b/hyperglass/render/templates/theme.sass.j2
index 4bbb69f..ac7957a 100644
--- a/hyperglass/render/templates/theme.sass.j2
+++ b/hyperglass/render/templates/theme.sass.j2
@@ -3,32 +3,34 @@ $hg-primary: {{ colors.primary }}
 $hg-secondary: {{ colors.secondary }}
 $hg-danger: {{ colors.danger }}
 $hg-warning: {{ colors.warning }}
-$hg-light: {{ colors.light }}
-$hg-dark: {{ colors.dark }}
 $hg-background: {{ colors.background }}
-
-// Functions
+        
 @function findTextColor($color)
+    $inverted: invert($color)
     @if (lightness($color) > 55%)
-        @return $hg-dark
+        $text-color: scale-color($inverted, $lightness: -90%)
+        @return grayscale($text-color)
     @else
-        @return $hg-light
+        $text-color: scale-color($inverted, $lightness: 90%)
+        @return grayscale($text-color)
 
-@function findAltBackgroundColor($color)
+@function findOverlayColor($color)
     @if (lightness($color) > 55%)
-        @return $hg-light
-    @else
-        @return $hg-dark
-
-@function findFooterColor($color)
-    @if (lightness($color) > 55%)
-        $darker-color: scale-color($hg-light, $lightness: -3%)
+        $darker-color: scale-color($color, $lightness: -3%)
         @return grayscale($darker-color)
     @else
-        $darker-color: scale-color($hg-dark, $lightness: -3%)
+        $darker-color: scale-color($color, $lightness: 5%)
         @return grayscale($darker-color)
 
-@function findBorderColor($color)
+@function findSubtleColor($color)
+    @if (lightness($color) > 55%)
+        $subtle-color: scale-color($color, $lightness: -3%)
+        @return grayscale($subtle-color)
+    @else
+        $subtle-color: scale-color($color, $lightness: 20%)
+        @return grayscale($subtle-color)
+
+@function findInvertedColor($color)
     $inverted: invert($color)
     @if (lightness($inverted) > 55%)
         $border: scale-color($inverted, $lightness: -3%)
@@ -37,29 +39,88 @@ $hg-background: {{ colors.background }}
         $border: scale-color($inverted, $lightness: 3%)
         @return grayscale($border)
 
+@function findFieldColor($color)
+    @if (lightness($color) > 55%)
+        @return $color
+    @else
+        $darker-color: scale-color($color, $lightness: 5%)
+        @return grayscale($darker-color)
+
+//// Body Color
+$body-bg:       $hg-background
+$body-color:    findTextColor($body-bg)
+
+// Global variables
+$hg-overlay:        findOverlayColor($hg-background)
+$hg-inverted:       findInvertedColor($hg-background)
+$hg-field:          findFieldColor($hg-background)
+$hg-border:         rgba(findInvertedColor($hg-overlay), .2)
+$hg-primary-color:  findTextColor($hg-primary)
+
 // App variables
-$hg-loading: findAltBackgroundColor($hg-background)
-$hg-footer: findFooterColor($hg-background)
+$hg-loading:        $hg-overlay
+$hg-footer:         $hg-overlay
+$hg-overlay-bg:     $hg-overlay
+$hg-overlay-color:  findTextColor($hg-overlay-bg)
+$hg-inverted-bg:    $hg-inverted
+$hg-inverted-color: findTextColor($hg-inverted-bg)
+$hg-field-bg:       $hg-field
+$hg-field-color:    findTextColor($hg-field-bg)
 
-// Theme Overrides
-$theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer)
+// Bootstrap Overrides
 
-$font-family-sans-serif: "{{ font.primary }}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
-$font-family-monospace: "{{ font.mono }}", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
-$headings-font-weight: 400
+//// Components
+$component-active-color: findTextColor($hg-primary)
 
-$enable-responsive-font-sizes: true
-$enable-validation-icons: false
+//// Flags
+$enable-responsive-font-sizes:  true
+$enable-validation-icons:       false
+$theme-colors:                  ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": findTextColor(black), "dark": findTextColor(white), "overlay": $hg-overlay)
 
-$body-bg: $hg-background
-$body-color: findTextColor($body-bg)
+//// Fonts/Text
+$font-family-sans-serif:    "{{ font.primary }}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+$font-family-monospace:     "{{ font.mono }}", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+$headings-font-weight:      400
 
-$border-radius: .44rem
-$border-radius-lg: .4rem
-$border-radius-sm: .35rem
+//// Borders
+$border-radius:     .44rem
+$border-radius-lg:  .4rem
+$border-radius-sm:  .35rem
 
-$popover-bg: $hg-background
-$popover-border-color: rgba(findBorderColor($popover-bg), .2)
-$popover-body-color: findTextColor($popover-bg)
+//// Popovers
+$popover-bg:                    $hg-field-bg
+$popover-border-color:          $hg-border
+$popover-body-color:            $hg-field-color
 
-$card-border-color: findBorderColor($body-bg)
\ No newline at end of file
+//// Cards
+$card-bg:                       $hg-field-bg
+$card-color:                    $hg-field-color
+$card-border-color:             $hg-border
+
+//// Dropdowns
+$dropdown-bg:                   $hg-field-bg
+$dropdown-color:                $hg-field-color
+$dropdown-divider-bg:           $hg-border
+$dropdown-border-color:         $hg-border
+$dropdown-header-color:         findSubtleColor($dropdown-color)
+$dropdown-link-color:           $hg-field-color
+$dropdown-link-hover-bg:        $hg-primary
+$dropdown-link-hover-color:     $hg-primary-color
+$dropdown-link-active-bg:       $hg-primary
+$dropdown-link-active-color:    $hg-primary-color
+
+////Forms
+$input-bg:                      $hg-field-bg
+$input-color:                   $hg-field-color
+$input-border-color:            $hg-border
+$input-placeholder-color:       findSubtleColor($hg-field-color)
+$input-btn-focus-box-shadow:    none
+$input-focus-bg:                findSubtleColor($input-bg)
+$input-focus-color:             $input-color
+$input-focus-border-color:      findOverlayColor($hg-border)
+
+//// Code
+$code-color:                    $hg-secondary
+$kbd-bg:                        findOverlayColor($hg-overlay)
+$kbd-color:                     $hg-overlay-color
+$pre-color:                     $body-color
\ No newline at end of file
diff --git a/hyperglass/static/hyperglass.es6 b/hyperglass/static/hyperglass.es6
index a84081c..722c39b 100644
--- a/hyperglass/static/hyperglass.es6
+++ b/hyperglass/static/hyperglass.es6
@@ -175,7 +175,7 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
 
     const contentHtml = `
     <div class="card" id="${loc}-output">
-      <div class="card-header bg-loading" id="${loc}-heading">
+      <div class="card-header bg-overlay" id="${loc}-heading">
         <div class="float-right hg-status-container" id="${loc}-status-container">
           <button type="button" class="float-right btn btn-loading btn-lg hg-menu-btn hg-status-btn" 
             data-location="${loc}" id="${loc}-status-btn" disabled>
@@ -215,13 +215,14 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
 
     const generateError = (errorClass, locError, text) => {
       const iconError = '<i class="hg-menu-icon hg-status-icon remixicon-alert-line"></i>';
-      $(`#${locError}-heading`).removeClass('bg-loading').addClass(`bg-${errorClass}`);
+      $(`#${locError}-heading`).removeClass('bg-overlay').addClass(`bg-${errorClass}`);
       $(`#${locError}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass(`btn-${errorClass}`);
       $(`#${locError}-status-container`)
         .removeClass('hg-loading')
         .find('.hg-status-btn')
         .empty()
-        .html(iconError);
+        .html(iconError)
+        .addClass('hg-done');
       $(`#${locError}-text`).html(text);
     }
 
@@ -241,13 +242,14 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
       .done((data, textStatus, jqXHR) => {
         const displayHtml = `<pre>${jqXHR.responseText}</pre>`;
         const iconSuccess = '<i class="hg-menu-icon hg-status-icon remixicon-check-line"></i>';
-        $(`#${loc}-heading`).removeClass('bg-loading').addClass('bg-primary');
+        $(`#${loc}-heading`).removeClass('bg-overlay').addClass('bg-primary');
         $(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass('btn-primary');
         $(`#${loc}-status-container`)
           .removeClass('hg-loading')
           .find('.hg-status-btn')
           .empty()
-          .html(iconSuccess);
+          .html(iconSuccess)
+          .addClass('hg-done');
         $(`#${loc}-text`).empty().html(displayHtml);
       })
       .fail((jqXHR, textStatus, errorThrown) => {
@@ -256,9 +258,9 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
         if (textStatus === 'timeout') {
           const displayHtml = 'Request timed out.';
           const iconTimeout = '<i class="remixicon-time-line"></i>';
-          $(`#${loc}-heading`).removeClass('bg-loading').addClass('bg-warning');
+          $(`#${loc}-heading`).removeClass('bg-overlay').addClass('bg-warning');
           $(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass('btn-warning');
-          $(`#${loc}-status-container`).removeClass('hg-loading').find('.hg-status-btn').empty().html(iconTimeout);
+          $(`#${loc}-status-container`).removeClass('hg-loading').find('.hg-status-btn').empty().html(iconTimeout).addClass('hg-done');
           $(`#${loc}-text`).empty().html(displayHtml);
         } else if (codesDanger.includes(jqXHR.status)) {
           generateError('danger', loc, jqXHR.responseText);
@@ -350,19 +352,19 @@ clipboard.on('error', (e) => {
   console.log(e);
 });
 
-$('#hg-accordion').on('mouseenter', '.hg-status-btn', (e) => {
+$('#hg-accordion').on('mouseenter', '.hg-done', (e) => {
   $(e.currentTarget)
     .find('.hg-status-icon')
     .addClass('remixicon-repeat-line');
 });
 
-$('#hg-accordion').on('mouseleave', '.hg-status-btn', (e) => {
+$('#hg-accordion').on('mouseleave', '.hg-done', (e) => {
   $(e.currentTarget)
     .find('.hg-status-icon')
     .removeClass('remixicon-repeat-line');
 });
 
-$('#hg-accordion').on('click', '.hg-status-btn', (e) => {
+$('#hg-accordion').on('click', '.hg-done', (e) => {
   const thisLocation = $(e.currentTarget).data('location');
   console.log(`Refreshing ${thisLocation}`);
   const queryType = $('#query_type').val();
diff --git a/hyperglass/static/overrides.sass b/hyperglass/static/overrides.sass
index 92ed68c..3f2fdf2 100644
--- a/hyperglass/static/overrides.sass
+++ b/hyperglass/static/overrides.sass
@@ -268,10 +268,17 @@
 
 .input-group-lg > .form-control:not(textarea),
 .input-group-lg > .custom-select,
-bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
+.bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
     height: $input-height-lg !important
     padding: $input-padding-y-lg $input-padding-x-lg !important
 
+.form-control
+    transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important
+    color: $input-color !important
+
+.bootstrap-select > .dropdown-toggle.bs-placeholder
+    color: $input-placeholder-color !important
+
 .hg-back:hover
     text-decoration: none
     border: 1px solid $hg-primary !important
@@ -287,7 +294,7 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
     bottom: 5rem !important
     border-radius: 50rem !important
     border: 1px solid $card-border-color !important
-    background-color: $hg-loading
+    background-color: $hg-field-bg !important
     transition: all .3s !important
     font-weight: 200 !important
     font-size: 1.4rem !important
@@ -371,11 +378,11 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
         background-color: darken($hg-danger, 10%) !important
         border-color: $hg-danger !important
 
-.bg-loading
-    .btn-loading:hover
-        color: findTextColor($hg-loading) !important
-        background-color: darken($hg-loading, 10%) !important
-        border-color: $hg-loading !important
+.bg-overlay
+    .btn-overlay:hover
+        color: findTextColor($hg-overlay) !important
+        background-color: darken($hg-overlay, 10%) !important
+        border-color: $hg-overlay !important
 
 .bg-primary
     *
@@ -389,13 +396,9 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
     *
         color: findTextColor($hg-warning) !important
 
-.bg-loading
+.bg-overlay
     *
-        color: findTextColor($hg-loading) !important
-
-.bg-footer
-    *
-        color: findTextColor($hg-footer) !important
+        color: findTextColor($hg-overlay) !important
 
 .bg-primary
     ::selection, ::-moz-selection
@@ -412,15 +415,10 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
         background-color: findTextColor($hg-warning) !important
         color: $hg-warning !important
 
-.bg-loading
+.bg-overlay
     ::selection, ::-moz-selection
-        background-color: findTextColor($hg-loading) !important
-        color: $hg-loading !important
-
-.bg-loading
-    ::selection, ::-moz-selection
-        background-color: findTextColor($hg-footer) !important
-        color: $hg-footer !important
+        background-color: findTextColor($hg-overlay) !important
+        color: $hg-overlay !important
 
 .bg-danger
     .btn-outline-danger