diff --git a/hyperglass/render/templates/theme.sass.j2 b/hyperglass/render/templates/theme.sass.j2
index e69de29..328f310 100644
--- a/hyperglass/render/templates/theme.sass.j2
+++ b/hyperglass/render/templates/theme.sass.j2
@@ -0,0 +1,29 @@
+// Jinja2-rendered theme elements
+$hg-primary: {{ colors.primary }}
+$hg-background: {{ colors.background }}
+$hg-light: {{ colors.light }}
+$hg-dark: {{ colors.dark }}
+$hg-danger: {{ colors.danger }}
+$hg-warning: {{ colors.warning }}
+
+// Functions
+@function findTextColor($color)
+ @if (lightness($color) > 55%)
+ @return $hg-dark
+ @else
+ @return $hg-light
+
+@function findAltBackgroundColor($color)
+ @if (lightness($color) > 55%)
+ @return $hg-light
+ @else
+ @return $hg-dark
+
+// App variables
+
+$hg-loading: findAltBackgroundColor($hg-background)
+
+// Theme Overrides
+$theme-colors: ("primary": $hg-primary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading)
+$body-bg: $hg-background
+$body-color: findTextColor($body-bg)
\ No newline at end of file
diff --git a/hyperglass/static/main.scss b/hyperglass/static/main.scss
index d283c64..b306400 100644
--- a/hyperglass/static/main.scss
+++ b/hyperglass/static/main.scss
@@ -1,15 +1,3 @@
-// Functions
-
-@function findTextColor($color) {
- @if (lightness($color) > 55%) {
- @return $dark;
- }
-
- @else {
- @return $light;
- }
-}
-
// Custom Classes
@media (min-width: 576px) {
@@ -181,6 +169,6 @@
}
// Imports
+@import "./theme.sass";
@import "./node_modules/bootstrap/scss/bootstrap";
-@import "./overrides.sass";
-@import "./theme.sass";
\ No newline at end of file
+@import "./overrides.sass";
\ No newline at end of file
diff --git a/hyperglass/static/overrides.sass b/hyperglass/static/overrides.sass
index 107e2f2..14c7245 100644
--- a/hyperglass/static/overrides.sass
+++ b/hyperglass/static/overrides.sass
@@ -21,7 +21,7 @@
.hg-back:hover
text-decoration: none
- border: 1px solid $primary !important
+ border: 1px solid $hg-primary !important
.hg-back:focus
text-decoration: none
@@ -90,90 +90,85 @@
outline: none !important
box-shadow: none
+// .hg-results-loading
+// background-color: $hg-loading-bg
+
+// .btn-loading
+// background-color: $hg-loading-bg
+// color: $hg-loading-text
+
+.bg-primary
+ .btn-primary:hover
+ color: findTextColor($hg-primary) !important
+ background-color: darken($hg-primary, 10%) !important
+ border-color: $hg-primary !important
+
+.bg-warning
+ .btn-warning:hover
+ color: findTextColor($hg-warning) !important
+ background-color: darken($hg-warning, 10%) !important
+ border-color: $hg-warning !important
+
+.bg-danger
+ .btn-danger:hover
+ color: findTextColor($hg-danger) !important
+ 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-primary
*
- color: findTextColor($primary) !important
-
-.bg-secondary
- *
- color: findTextColor($secondary) !important
-
-.bg-success
- *
- color: findTextColor($success) !important
+ color: findTextColor($hg-primary) !important
.bg-danger
*
- color: findTextColor($danger) !important
+ color: findTextColor($hg-danger) !important
.bg-warning
*
- color: findTextColor($warning) !important
+ color: findTextColor($hg-warning) !important
-.bg-info
+.bg-loading
*
- color: findTextColor($info) !important
-
-.bg-light
- *
- color: findTextColor($light) !important
-
-.bg-dark
- *
- color: findTextColor($dark) !important
+ color: findTextColor($hg-primary) !important
.bg-primary
::selection, ::-moz-selection
- background-color: findTextColor($primary) !important
- color: $primary !important
-
-.bg-secondary
- ::selection, ::-moz-selection
- background-color: findTextColor($secondary) !important
- color: $secondary !important
-
-.bg-success
- ::selection, ::-moz-selection
- background-color: findTextColor($success) !important
- color: $success !important
+ background-color: findTextColor($hg-primary) !important
+ color: $hg-primary !important
.bg-danger
::selection, ::-moz-selection
- background-color: findTextColor($danger) !important
- color: $danger !important
+ background-color: findTextColor($hg-danger) !important
+ color: $hg-danger !important
.bg-warning
::selection, ::-moz-selection
- background-color: findTextColor($warning) !important
- color: $warning !important
+ background-color: findTextColor($hg-warning) !important
+ color: $hg-warning !important
-.bg-info
+.bg-loading
::selection, ::-moz-selection
- background-color: findTextColor($info) !important
- color: $info !important
-
-.bg-light
- ::selection, ::-moz-selection
- background-color: findTextColor($light) !important
- color: $light !important
-
-.bg-dark
- ::selection, ::-moz-selection
- background-color: findTextColor($dark) !important
- color: $dark !important
+ background-color: findTextColor($hg-loading) !important
+ color: $hg-loading !important
.bg-danger
.btn-outline-danger
- border-color: findTextColor($danger) !important
+ border-color: findTextColor($hg-danger) !important
.bg-danger
.btn-outline-danger:hover
- background-color: findTextColor($danger) !important
- color: $danger !important
+ background-color: findTextColor($hg-danger) !important
+ color: $hg-danger !important
.bg-danger
hr
- background-color: darken($danger, 10%)
+ background-color: darken($hg-danger, 10%)
.modal-body > p
padding-left: 0.3rem !important
diff --git a/hyperglass/static/package.json b/hyperglass/static/package.json
index f3db1b4..b646782 100644
--- a/hyperglass/static/package.json
+++ b/hyperglass/static/package.json
@@ -37,4 +37,4 @@
"@babel/preset-react"
]
}
-}
\ No newline at end of file
+}
diff --git a/manage.py b/manage.py
index cfae2fc..db41ade 100755
--- a/manage.py
+++ b/manage.py
@@ -621,16 +621,22 @@ def start_dev_server(host, port):
@hg.command("dev-server", help="Start development web server")
@click.option("--host", type=str, default="0.0.0.0", help="Listening IP")
@click.option("--port", type=int, default=5000, help="TCP Port")
-def dev_server(host, port):
+@click.option(
+ "--assets/--no-assets", default=False, help="Render Theme & Build Web Assets"
+)
+def dev_server(host, port, assets):
"""Renders theme and web assets, then starts dev web server"""
- try:
- assets_rendered = render_hyperglass_assets()
- except Exception as e:
- raise click.ClickException(
- click.style("✗ Error rendering assets: ", fg="red", bold=True)
- + click.style(e, fg="blue")
- )
- if assets_rendered:
+ if assets:
+ try:
+ assets_rendered = render_hyperglass_assets()
+ except Exception as e:
+ raise click.ClickException(
+ click.style("✗ Error rendering assets: ", fg="red", bold=True)
+ + click.style(e, fg="blue")
+ )
+ if assets_rendered:
+ start_dev_server(host, port)
+ if not assets:
start_dev_server(host, port)